Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2024 - E2490.1 Improving Assignment Participants Management UI in Expertiza

2024-12-04T02:29:32Z

Jkersey:

== Introduction ==
The Assignment Participants Management UI in Expertiza is a tool for instructors and administrators to manage assignment participants. However, the current interface is cluttered with dense information, limited filtering options, and ambiguous/unnecessary labels, making it challenging to locate, filter, or modify participant data effectively. This redesign focuses on improving usability, clarity, and responsiveness.

===Project Goals===
This project aims to redesign and improve the Assignment Participants Management UI by creating a cleaner, more streamlined, and user-friendly interface. The key objectives include:
*Enhancing readability and usability by restructuring the layout and adding more intuitive spacing.
*Improving visual hierarchy with icons, badges, and role-based indicators to make information more accessible at a glance.
*Ensuring responsiveness so that the interface adapts well across different screen sizes and devices.

== Problem Statement==

===Issues with Current UI===
*Cluttered Layout: The current UI is dense, with little spacing between elements, making it hard to read and locate information.
*Limited Filtering Options: Filtering capabilities are minimal, making it challenging to find participants based on specific criteria.
*Inefficient User Actions: Actions like removing or updating participants must be done individually, resulting in repetitive tasks for instructors.
*Confusing Labels: Certain labels (like "Handle") are unclear, leading to usability issues, creating confusion around functionality.
*Lack of Responsive Design: The current design does not adapt well to different screen sizes, reducing usability on smaller devices.

This project will address these issues with a comprehensive redesign focused on improving the user experience for instructors and administrators managing assignments in Expertiza.

== Proposed Solution==
===Streamlined Layout and Spacing===

*Column Organization: Consolidate redundant columns (e.g., "Submit" and "Submission") and remove unnecessary ones (e.g., "Handle" and "Metareview").
*Improved Spacing: Add padding and spacing between rows and columns to improve readability.
*Properly handling edge cases: Error states are now properly displayed to the user under the conditions when they attempt to add a participant to the assignment with the same name as a pre-existing participant, or attempt to add a participant without a name.
*Addition of Visual Cues: Add visual cues throughout the implementation such as various icons (for distinguishing between participants' roles, as well as performing actions), allowing users to focus on essential information and streamline overall look and feel.

====Sequence Diagram for Layout Change====

In the current implementation we use dummy data, but the frontend would eventually be wired up to a backend for real-world usage.

[[File: 3_1_1.png| 500px]]<br>

Note: The current implementation has all changes made to the participants list implemented via client side state. This means that after performing various additions of new participants as well as edits and deletions of participants, whenever the browser is refreshed, this state is wiped out, and we are back at the initial load of our dummy data.

====UI Enhancements====

UI with improvements to visual clarity, layout, and responsiveness

===Visual Hierarchy and Icons===
*Icons for Actions: Standard icons for tasks like edit, delete, and add, using those from the previous implementation to maintain consistency.
*Role-Based Badges: Color-coded badges (e.g., blue for "Student," green for "Instructor") with associated icons.
*Status Indicators: Display indicators for participants properties, like a checkmark for "Review" or "Submit" or a cross instead.
===Responsive Design===
Adaptive Column Visibility: Implement a responsive design where columns adapt to screen size, incorporating side-scroll functionality, condensing the columns, and reducing the text size for smaller screens.
===Tooltips and Help Icons===
*Tooltips: Add tooltips and icons for different kinds of participants when adding a new one (e.g., hovering over "reader") to provide brief explanations.

==Implementation==

===Prior Implementation===

The UI for participant management before the redesign is shown below for reference.

[[File: Current Implementation.jpg | 800px ]]<br>

===Participants List Component===

====Usage at the Call Site====

<syntaxhighlight lang="javascript">
<AssignmentParticipants assignmentProps={{ hasQuiz: false, hasMentor: false }} />
</syntaxhighlight>

The main AssignmentParticipants component displays the page overall as well as contains props for the various properties an assignment might have which would affect the participants table, namely, having an associated quiz or a mentor. In the current implementation, this is done via the use of props, however future versions should have this properly linked to the implementation for the Assignment itself and passed through.

====Snippet of the Implementation====

<syntaxhighlight lang="javascript">
<div className="assignment-participants-container">
<h1 className="assignment-participants-header">Assignment Participants: Program 1</h1>

{/* Add User Section */}
<label className="section-label">Add New Participant</label>
{error && <div className="error-message">{error}</div>}
<div className="add-user-section">
<div className="add-user-input">
<input
type="text"
placeholder="Enter a new username"
className="username-input"
value={newUserName}
onChange={(e) => setNewUserName(e.target.value)}
/>
<button className="add-user-button" onClick={handleAddUser}>Add User</button>
</div>

{/* Radio Group for Role Selection */}
<div className="role-radio-group">
{Object.values(ParticipantRole).map((role) => (
<label key={role} className="role-radio-option">
<input
type="radio"
value={role}
checked={selectedRole === role}
onChange={() => setSelectedRole(role as ParticipantRole)}
/>
{role}
<span className="info-icon" title={participantRoleInfo(role)}>i</span>
</label>
))}
</div>
</div>

{/* Participant Table */}
<ParticipantTable
participants={filteredParticipants}
onSort={handleSort}
assignmentProps={assignmentProps}
openEditModal={openEditModal}
openRemoveModal={openRemoveModal}
numColumns={numColumns(assignmentProps)}
sortConfig={sortConfig}
/>

{/* Modals */}
{selectedParticipant && (
<EditParticipantModal
show={modalShow.edit}
participant={selectedParticipant}
onHide={() => setModalShow({ ...modalShow, edit: false })}
onSave={handleSave}
/>
)}
<ConfirmRemoveModal
show={modalShow.remove}
onHide={() => setModalShow({ ...modalShow, remove: false })}
onConfirm={handleRemove}
/>
</div>
</syntaxhighlight>

====Redesigned UI====

Below is a screenshot displaying the component above which is the crux of the redesigned page for managing the participants associated with an assignment.

[[File:AssignmentParticipantsTable.png| 800px]]<br>

===EditParticipantModal Component===

====Snippet of the Implementation====

<syntaxhighlight lang="javascript">
function EditParticipantModal({ participant, show, onHide, onSave }: EditParticipantModalProps) {
const [updatedParticipant, setUpdatedParticipant] = useState<Participant>(participant);

const handleChange = (field: keyof Participant, value: any) => {
setUpdatedParticipant({ ...updatedParticipant, [field]: value });
};

const handlePermissionsToggle = (field: keyof ParticipantPermissions) => {
setUpdatedParticipant({
...updatedParticipant,
permissions: {
...updatedParticipant.permissions,
[field]: updatedParticipant.permissions[field] === 'yes' ? 'no' : 'yes',
},
});
};

return (
<Modal show={show} onHide={onHide} centered>
<Modal.Header closeButton>
<Modal.Title>Edit Participant</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formName" className="mb-3">
<Form.Label>Name</Form.Label>
<Form.Control
type="text"
value={updatedParticipant.name}
onChange={(e) => handleChange('name', e.target.value)}
/>
</Form.Group>
<Form.Group controlId="formEmail" className="mb-3">
<Form.Label>Email</Form.Label>
<Form.Control
type="email"
value={updatedParticipant.email}
onChange={(e) => handleChange('email', e.target.value)}
/>
</Form.Group>
<Form.Group controlId="formRole" className="mb-3">
<Form.Label>Role</Form.Label>
<Form.Control
as="select"
value={updatedParticipant.role}
onChange={(e) => handleChange('role', e.target.value)}
>
{Object.values(Role).map((role) => (
<option key={role} value={role}>
{role}
</option>
))}
</Form.Control>
</Form.Group>
<Form.Group controlId="formParticipantRole" className="mb-3">
<Form.Label>Participant Role</Form.Label>
<Form.Control
as="select"
value={updatedParticipant.participantRole}
onChange={(e) => handleChange('participantRole', e.target.value)}
>
{Object.values(ParticipantRole).map((role) => (
<option key={role} value={role}>
{role}
</option>
))}
</Form.Control>
</Form.Group>

<div className="permissions-container">
{Object.keys(permissionLabels).map((key) => (
<Form.Check
key={key}
type="switch"
id={`${key}-switch`}
label={permissionLabels[key as keyof ParticipantPermissions]}
checked={updatedParticipant.permissions[key as keyof ParticipantPermissions] === 'yes'}
onChange={() => handlePermissionsToggle(key as keyof ParticipantPermissions)}
className="permission-switch"
/>
))}
</div>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onHide}>
Cancel
</Button>
<Button variant="primary" onClick={() => onSave(updatedParticipant)}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
);
}
</syntaxhighlight>

====Redesigned UI====

Below is a screenshot displaying the EditParticipantModal component above which is used for managing the properties of a user in the assignment's participants list.

[[File:EditParticipantModal.png| 800px]]<br>

===ConfirmRemoveModal Component===

In a similar fashion to the modal for editing a participant, the UI also contains a modal associated with a confirmation for removing a participant from the assignment. This confirmation modal is presented to the user to prevent them from making an accidental deletion in the case when they didn't mean to press the removal button, and confirms they want to indeed perform the removal of the participant.

====Snippet of the Implementation====

<syntaxhighlight lang="javascript">
function ConfirmRemoveModal({ show, onHide, onConfirm }: ConfirmRemoveModalProps) {
return (
<Modal show={show} onHide={onHide} centered>
<Modal.Header closeButton>
<Modal.Title>Confirm Removal</Modal.Title>
</Modal.Header>
<Modal.Body>
Are you sure you want to remove this participant?
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onHide}>
Cancel
</Button>
<Button variant="danger" onClick={onConfirm}>
Confirm
</Button>
</Modal.Footer>
</Modal>
);
}
</syntaxhighlight>

====Redesigned UI====

Below is a screenshot displaying the ConfirmRemoveModal component above which is used for ensuring deletion of participants only occurs when the operation is intended.

[[File:ConfirmRemoveModal.png| 800px]]<br>

===Responsive design===

Finally, the overall UI was designed to be responsive for various screen sizes (i.e. maintains quality and visual consistency across mobile, tablet, and desktop screen sizes). This was done primarily through the usage of media queries as well as various modern CSS features.

====Snippet of the Implementation====

<syntaxhighlight lang="css">
@media (max-width: 768px) {

.add-user-section,
.user-permissions {
width: 100%;
flex-direction: column;
}

.role-radio-group {
margin-top: 1rem;
}

.user-input {
margin-bottom: 0;
width: 100%;
}

.assignment-participants-header {
font-size: 1.25rem;
}

.add-user-button {
width: 100%;
}

.assignment-participants-table th::before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
</syntaxhighlight>

====Mobile Layout====

Below is a screenshot displaying the UI when viewed from a mobile screen size. The use of side-scrolling functionality is used to make the table functional while still taking up the majority of the screen real estate available for mobile screens.

[[File:MobileUI.png| 800px]]<br>

===Design Patterns===
The following design patterns we're used throughout the process of the UI redesign:

* Single Responsibility Principle (SRP): Each UI component will be designed to handle a specific function, like adding a user, or editing their properties, to keep the interface modular.
* Interface Segregation Principle (ISP): Each feature (e.g., modals for user actions, participants table) will be separated into separate, focused components, ensuring organized functionality and clear dependencies.
* DRY Principle: Common features like icons, and styling will be centralized in reusable components to avoid redundancy in the UI code.

==Test Plan==
===Manual UI Testing===
The following step-by-step test cases were performed for manually verifying each UI component:
*Adding a User: Enter username and click add user, showing the new user in the updated participants list.
*Editing a User: Click the edit icon for the user in the participant list and edit the various properties associated with the user, then click confirm to save the changes and see them reflected in the participants list.
*Deleting a User: Click the delete icon for the user in the participant list, then click confirm to delete the user and see them no longer in the participants list.
* Responsiveness: Verify UI properly adapts across desktop, tablet, and mobile devices.

==Future Enhancements==

*Detailed Statistics: Provide analytics on participation, submission rates, etc., to give instructors a quick overview of assignment engagement.

== Conclusion ==

The redesign of the Assignment Participants Management UI significantly improves the usability, accessibility, and adaptability of the tool for instructors and administrators. Key improvements include a cleaner and more structured layout, enhanced filtering capabilities, and a responsive design that ensures seamless use across various devices. By introducing intuitive features like role-based badges, actionable icons, and tooltips, the interface provides a modern and user-friendly experience. These changes streamline participant management tasks, reducing repetitive work and improving overall efficiency for managing large classes. This redesign lays a solid foundation for future enhancements, such as detailed analytics and advanced filtering capabilities.

== Team ==
=====Mentor=====

* Chaitanya Srusti <crsrusti@ncsu.edu>

=====Members=====
* Josh Kersey <jkersey@ncsu.edu>

=== Video Demo ===
The video demo highlights the redesigned UI in action, showcasing key features such as adding, editing, and deleting participants, the enhanced responsiveness on mobile and desktop, and improved usability with tooltips and badges and more.

Link to Demo: https://drive.google.com/file/d/1qiav8ZJoPRiT9r5b7sq-hF0glbLAYtHp/view?usp=sharing

=== PR Link ===

Link to PR: https://github.com/expertiza/reimplementation-front-end/pull/79

CSC/ECE 517 Fall 2024 - E2490.1 Improving Assignment Participants Management UI in Expertiza

2024-12-04T01:38:22Z

Jkersey:

== Introduction ==
The Assignment Participants Management UI in Expertiza is a tool for instructors and administrators to manage assignment participants. However, the current interface is cluttered with dense information, limited filtering options, and ambiguous/unnecessary labels, making it challenging to locate, filter, or modify participant data effectively. This redesign focuses on improving usability, clarity, and responsiveness.

===Project Goals===
This project aims to redesign and improve the Assignment Participants Management UI by creating a cleaner, more streamlined, and user-friendly interface. The key objectives include:
*Enhancing readability and usability by restructuring the layout and adding more intuitive spacing.
*Improving visual hierarchy with icons, badges, and role-based indicators to make information more accessible at a glance.
*Ensuring responsiveness so that the interface adapts well across different screen sizes and devices.

== Problem Statement==

===Issues with Current UI===
*Cluttered Layout: The current UI is dense, with little spacing between elements, making it hard to read and locate information.
*Limited Filtering Options: Filtering capabilities are minimal, making it challenging to find participants based on specific criteria.
*Inefficient User Actions: Actions like removing or updating participants must be done individually, resulting in repetitive tasks for instructors.
*Confusing Labels: Certain labels (like "Handle") are unclear, leading to usability issues, creating confusion around functionality.
*Lack of Responsive Design: The current design does not adapt well to different screen sizes, reducing usability on smaller devices.

This project will address these issues with a comprehensive redesign focused on improving the user experience for instructors and administrators managing assignments in Expertiza.

== Proposed Solution==
===Streamlined Layout and Spacing===

*Column Organization: Consolidate redundant columns (e.g., "Submit" and "Submission") and remove unnecessary ones (e.g., "Handle" and "Metareview").
*Improved Spacing: Add padding and spacing between rows and columns to improve readability.
*Properly handling edge cases: Error states are now properly displayed to the user under the conditions when they attempt to add a participant to the assignment with the same name as a pre-existing participant, or attempt to add a participant without a name.
*Addition of Visual Cues: Add visual cues throughout the implementation such as various icons (for distinguishing between participants' roles, as well as performing actions), allowing users to focus on essential information and streamline overall look and feel.

====Sequence Diagram for Layout Change====

In the current implementation we use dummy data, but the frontend would eventually be wired up to a backend for real-world usage.

[[File: 3_1_1.png| 500px]]<br>

Note: The current implementation has all changes made to the participants list implemented via client side state. This means that after performing various additions of new participants as well as edits and deletions of participants, whenever the browser is refreshed, this state is wiped out, and we are back at the initial load of our dummy data.

====UI Enhancements====

UI with improvements to visual clarity, layout, and responsiveness

===Visual Hierarchy and Icons===
*Icons for Actions: Standard icons for tasks like edit, delete, and add, using those from the previous implementation to maintain consistency.
*Role-Based Badges: Color-coded badges (e.g., blue for "Student," green for "Instructor") with associated icons.
*Status Indicators: Display indicators for participants properties, like a checkmark for "Review" or "Submit" or a cross instead.
===Responsive Design===
Adaptive Column Visibility: Implement a responsive design where columns adapt to screen size, incorporating side-scroll functionality, condensing the columns, and reducing the text size for smaller screens.
===Tooltips and Help Icons===
*Tooltips: Add tooltips and icons for different kinds of participants when adding a new one (e.g., hovering over "reader") to provide brief explanations.

==Implementation==

===Prior Implementation===

The UI for participant management before the redesign is shown below for reference.

[[File: Current Implementation.jpg | 800px ]]<br>

===Participants List Component===

====Usage at the Call Site====

<syntaxhighlight lang="javascript">
<AssignmentParticipants assignmentProps={{ hasQuiz: false, hasMentor: false }} />
</syntaxhighlight>

The main AssignmentParticipants component displays the page overall as well as contains props for the various properties an assignment might have which would affect the participants table, namely, having an associated quiz or a mentor. In the current implementation, this is done via the use of props, however future versions should have this properly linked to the implementation for the Assignment itself and passed through.

====Snippet of the Implementation====

<syntaxhighlight lang="javascript">
<div className="assignment-participants-container">
<h1 className="assignment-participants-header">Assignment Participants: Program 1</h1>

{/* Add User Section */}
<label className="section-label">Add New Participant</label>
{error && <div className="error-message">{error}</div>}
<div className="add-user-section">
<div className="add-user-input">
<input
type="text"
placeholder="Enter a new username"
className="username-input"
value={newUserName}
onChange={(e) => setNewUserName(e.target.value)}
/>
<button className="add-user-button" onClick={handleAddUser}>Add User</button>
</div>

{/* Radio Group for Role Selection */}
<div className="role-radio-group">
{Object.values(ParticipantRole).map((role) => (
<label key={role} className="role-radio-option">
<input
type="radio"
value={role}
checked={selectedRole === role}
onChange={() => setSelectedRole(role as ParticipantRole)}
/>
{role}
<span className="info-icon" title={participantRoleInfo(role)}>i</span>
</label>
))}
</div>
</div>

{/* Participant Table */}
<ParticipantTable
participants={filteredParticipants}
onSort={handleSort}
assignmentProps={assignmentProps}
openEditModal={openEditModal}
openRemoveModal={openRemoveModal}
numColumns={numColumns(assignmentProps)}
sortConfig={sortConfig}
/>

{/* Modals */}
{selectedParticipant && (
<EditParticipantModal
show={modalShow.edit}
participant={selectedParticipant}
onHide={() => setModalShow({ ...modalShow, edit: false })}
onSave={handleSave}
/>
)}
<ConfirmRemoveModal
show={modalShow.remove}
onHide={() => setModalShow({ ...modalShow, remove: false })}
onConfirm={handleRemove}
/>
</div>
</syntaxhighlight>

====Redesigned UI====

Below is a screenshot displaying the component above which is the crux of the redesigned page for managing the participants associated with an assignment.

[[File:AssignmentParticipantsTable.png| 800px]]<br>

===EditParticipantModal Component===

====Snippet of the Implementation====

<syntaxhighlight lang="javascript">
function EditParticipantModal({ participant, show, onHide, onSave }: EditParticipantModalProps) {
const [updatedParticipant, setUpdatedParticipant] = useState<Participant>(participant);

const handleChange = (field: keyof Participant, value: any) => {
setUpdatedParticipant({ ...updatedParticipant, [field]: value });
};

const handlePermissionsToggle = (field: keyof ParticipantPermissions) => {
setUpdatedParticipant({
...updatedParticipant,
permissions: {
...updatedParticipant.permissions,
[field]: updatedParticipant.permissions[field] === 'yes' ? 'no' : 'yes',
},
});
};

return (
<Modal show={show} onHide={onHide} centered>
<Modal.Header closeButton>
<Modal.Title>Edit Participant</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formName" className="mb-3">
<Form.Label>Name</Form.Label>
<Form.Control
type="text"
value={updatedParticipant.name}
onChange={(e) => handleChange('name', e.target.value)}
/>
</Form.Group>
<Form.Group controlId="formEmail" className="mb-3">
<Form.Label>Email</Form.Label>
<Form.Control
type="email"
value={updatedParticipant.email}
onChange={(e) => handleChange('email', e.target.value)}
/>
</Form.Group>
<Form.Group controlId="formRole" className="mb-3">
<Form.Label>Role</Form.Label>
<Form.Control
as="select"
value={updatedParticipant.role}
onChange={(e) => handleChange('role', e.target.value)}
>
{Object.values(Role).map((role) => (
<option key={role} value={role}>
{role}
</option>
))}
</Form.Control>
</Form.Group>
<Form.Group controlId="formParticipantRole" className="mb-3">
<Form.Label>Participant Role</Form.Label>
<Form.Control
as="select"
value={updatedParticipant.participantRole}
onChange={(e) => handleChange('participantRole', e.target.value)}
>
{Object.values(ParticipantRole).map((role) => (
<option key={role} value={role}>
{role}
</option>
))}
</Form.Control>
</Form.Group>

<div className="permissions-container">
{Object.keys(permissionLabels).map((key) => (
<Form.Check
key={key}
type="switch"
id={`${key}-switch`}
label={permissionLabels[key as keyof ParticipantPermissions]}
checked={updatedParticipant.permissions[key as keyof ParticipantPermissions] === 'yes'}
onChange={() => handlePermissionsToggle(key as keyof ParticipantPermissions)}
className="permission-switch"
/>
))}
</div>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onHide}>
Cancel
</Button>
<Button variant="primary" onClick={() => onSave(updatedParticipant)}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
);
}
</syntaxhighlight>

====Redesigned UI====

Below is a screenshot displaying the EditParticipantModal component above which is used for managing the properties of a user in the assignment's participants list.

[[File:EditParticipantModal.png| 800px]]<br>

===ConfirmRemoveModal Component===

In a similar fashion to the modal for editing a participant, the UI also contains a modal associated with a confirmation for removing a participant from the assignment. This confirmation modal is presented to the user to prevent them from making an accidental deletion in the case when they didn't mean to press the removal button, and confirms they want to indeed perform the removal of the participant.

====Snippet of the Implementation====

<syntaxhighlight lang="javascript">
function ConfirmRemoveModal({ show, onHide, onConfirm }: ConfirmRemoveModalProps) {
return (
<Modal show={show} onHide={onHide} centered>
<Modal.Header closeButton>
<Modal.Title>Confirm Removal</Modal.Title>
</Modal.Header>
<Modal.Body>
Are you sure you want to remove this participant?
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onHide}>
Cancel
</Button>
<Button variant="danger" onClick={onConfirm}>
Confirm
</Button>
</Modal.Footer>
</Modal>
);
}
</syntaxhighlight>

====Redesigned UI====

Below is a screenshot displaying the ConfirmRemoveModal component above which is used for ensuring deletion of participants only occurs when the operation is intended.

[[File:ConfirmRemoveModal.png| 800px]]<br>

===Responsive design===

Finally, the overall UI was designed to be responsive for various screen sizes (i.e. maintains quality and visual consistency across mobile, tablet, and desktop screen sizes). This was done primarily through the usage of media queries as well as various modern CSS features.

====Snippet of the Implementation====

<syntaxhighlight lang="css">
@media (max-width: 768px) {

.add-user-section,
.user-permissions {
width: 100%;
flex-direction: column;
}

.role-radio-group {
margin-top: 1rem;
}

.user-input {
margin-bottom: 0;
width: 100%;
}

.assignment-participants-header {
font-size: 1.25rem;
}

.add-user-button {
width: 100%;
}

.assignment-participants-table th::before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
</syntaxhighlight>

====Mobile Layout====

Below is a screenshot displaying the UI when viewed from a mobile screen size. The use of side-scrolling functionality is used to make the table functional while still taking up the majority of the screen real estate available for mobile screens.

[[File:MobileUI.png| 800px]]<br>

===Design Patterns===
The following design patterns we're used throughout the process of the UI redesign:

* Single Responsibility Principle (SRP): Each UI component will be designed to handle a specific function, like adding a user, or editing their properties, to keep the interface modular.
* Interface Segregation Principle (ISP): Each feature (e.g., modals for user actions, participants table) will be separated into separate, focused components, ensuring organized functionality and clear dependencies.
* DRY Principle: Common features like icons, and styling will be centralized in reusable components to avoid redundancy in the UI code.

==Test Plan==
===Manual UI Testing===
The following step-by-step test cases were performed for manually verifying each UI component:
*Adding a User: Enter username and click add user, showing the new user in the updated participants list.
*Editing a User: Click the edit icon for the user in the participant list and edit the various properties associated with the user, then click confirm to save the changes and see them reflected in the participants list.
*Deleting a User: Click the delete icon for the user in the participant list, then click confirm to delete the user and see them no longer in the participants list.
* Responsiveness: Verify UI properly adapts across desktop, tablet, and mobile devices.

==Future Enhancements==

*Detailed Statistics: Provide analytics on participation, submission rates, etc., to give instructors a quick overview of assignment engagement.

== Conclusion ==

The redesign of the Assignment Participants Management UI significantly improves the usability, accessibility, and adaptability of the tool for instructors and administrators. Key improvements include a cleaner and more structured layout, enhanced filtering capabilities, and a responsive design that ensures seamless use across various devices. By introducing intuitive features like role-based badges, actionable icons, and tooltips, the interface provides a modern and user-friendly experience. These changes streamline participant management tasks, reducing repetitive work and improving overall efficiency for managing large classes. This redesign lays a solid foundation for future enhancements, such as detailed analytics and advanced filtering capabilities.

== Team ==
=====Mentor=====

* Chaitanya Srusti <crsrusti@ncsu.edu>

=====Members=====
* Josh Kersey <jkersey@ncsu.edu>

== Video Demo ==
The video demo highlights the redesigned UI in action, showcasing key features such as adding, editing, and deleting participants, the enhanced responsiveness on mobile and desktop, and improved usability with tooltips and badges and more.

Link to Demo: <demo_link_here>

File:MobileUI.png

2024-12-04T01:34:02Z

Jkersey:

File:ConfirmRemoveModal.png

2024-12-04T01:23:55Z

Jkersey:

File:EditParticipantModal.png

2024-12-04T01:18:02Z

Jkersey:

File:AssignmentParticipantsTable.png

2024-12-04T01:11:16Z

Jkersey:

CSC/ECE 517 Fall 2024 - E2490.1 Improving Assignment Participants Management UI in Expertiza

2024-12-04T00:45:47Z

Jkersey: Created page with "== Introduction == The Assignment Participants Management UI in Expertiza is a tool used by instructors and administrators to manage participants in assignments. Currently, this interface is cluttered, with dense information and limited filtering options, making it challenging to quickly locate, filter, or modify participant data. The current UI has issues with readability, and ambiguous/confusing labels. ===Project Goals=== This project aims to redesign and improve the..."

== Introduction ==
The Assignment Participants Management UI in Expertiza is a tool used by instructors and administrators to manage participants in assignments. Currently, this interface is cluttered, with dense information and limited filtering options, making it challenging to quickly locate, filter, or modify participant data. The current UI has issues with readability, and ambiguous/confusing labels.

===Project Goals===
This project aims to redesign and improve the Assignment Participants Management UI by creating a cleaner, more streamlined, and user-friendly interface. The key objectives include:
*Enhancing readability and usability by restructuring the layout and adding more intuitive spacing.
*Improving visual hierarchy with icons, badges, and role-based indicators to make information more accessible at a glance.
*Ensuring responsiveness so that the interface adapts well across different screen sizes and devices.

== Problem Statement==

===Issues with Current UI===
*Cluttered Layout: The current UI is dense, with little spacing between elements, making it hard to read and locate information.
*Limited Filtering Options: Filtering capabilities are minimal, making it challenging to find participants based on specific criteria.
*Inefficient User Actions: Actions like removing or updating participants must be done individually, resulting in repetitive tasks for instructors.
*Confusing Labels: Certain labels (like "Handle") are unclear, leading to usability issues, creating confusion around functionality.
*Lack of Responsive Design: The current design does not adapt well to different screen sizes, reducing usability on smaller devices.

This project will address these issues with a comprehensive redesign focused on improving the user experience for instructors and administrators managing assignments in Expertiza.

== Proposed Solution==
===Streamlined Layout and Spacing===

*Column Organization: Remove redundant columns (e.g., "Submit," "Submission") should be changed to just "Submit". Additionally, remove unnecessary columns such as "Handle," and "Metareview".
*Improved Spacing: Add padding and spacing between rows and columns to improve readability.
*Addition of Visual Cues: Add visual cues throughout the implementation such as various icons (for distinguishing between participants' roles, as well as performing actions), allowing users to focus on essential information and streamline overall look and feel.

====Sequence Diagram for Layout Change====

In the current implementation we use dummy data, but the frontend would eventually be wired up to a backend for real-world usage.

[[File: 3_1_1.png| 500px]]<br>

Note: The current implementation has all changes made to the participants list implemented via client side state. This means that after performing various additions of new participants as well as edits and deletions of participants, whenever the browser is refreshed, this state is wiped out, and we are back at the initial load of our dummy data.

====UI Enhancements====

UI with improvements to visual clarity, layout, and responsiveness

===Visual Hierarchy and Icons===
*Icons for Actions: Use icons for common actions, such as a delete icon for "Remove."
*Role-Based Badges: Show roles with color-coded badges (e.g., "Student" in blue, "Instructor" in green) as well as accompanying icons.
*Status Indicators: Display indicators for participants properties, like a checkmark for "Review" or "Submit" or a cross instead.
===Responsive Design===
Adaptive Column Visibility: Implement a responsive design where columns adapt based on screen size, i.e. text becomes smaller and columns become more condensed as well as have a side-scroll functionality on smaller screens.
===Tooltips and Help Icons===
*Tooltips: Add tooltips and icons for different kinds of participants when adding a new one (e.g., hovering over "reader") to provide brief explanations.

==Implementation Plan==
===Frontend Modifications===
*List specific files to modify (e.g., ParticipantsTable.tsx, AssignmentParticipants.tsx) with high-level explanations of changes in each.
*Detail CSS changes for improved spacing and responsiveness, including media queries for adaptive design.
===Design Patterns===
* Single Responsibility Principle (SRP): Each UI component will be designed to handle a specific function, like adding a user, or editing their properties, to keep the interface modular.
* Interface Segregation Principle (ISP): Each feature (e.g., modals for user actions, participants table) will be separated into separate, focused components, ensuring organized functionality and clear dependencies.
* DRY Principle: Common features like icons, and styling will be centralized in reusable components to avoid redundancy in the UI code.

==Test Plan==
===Manual UI Testing===
The following step-by-step test cases were performed for manually verifying each UI component:
*Adding a User: Enter username and click add user, showing the new user in the updated participants list.
*Editing a User: Click the edit icon for the user in the participant list and edit the various properties associated with the user, then click confirm to save the changes and see them reflected in the participants list.
*Deleting a User: Click the delete icon for the user in the participant list, then click confirm to delete the user and see them no longer in the participants list.

==Future Enhancements==

*Detailed Statistics: Provide analytics on participation, submission rates, etc., to give instructors a quick overview of assignment engagement.

== Conclusion ==

*Summarize the improvements, emphasizing the cleaner design, enhanced filtering capabilities, and improved user experience.
*Highlight the importance of responsive design and ease of use for instructors and administrators managing large classes.

== Team ==
=====Mentor=====

* Chaitanya Srusti <crsrusti@ncsu.edu>

=====Members=====
* Josh Kersey <jkersey@ncsu.edu>

== Video Demo ==
<link_here>

CSC/ECE 517 Fall 2024

2024-12-04T00:25:58Z

Jkersey:

* [[CSC/ECE 517 Fall 2024 - E2450. Refactor assignments_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2451. Reimplement feedback_response_map.rb]]
* [[CSC/ECE 517 Fall 2024 - E2452. Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2453. Refactor review_mapping_helper.rb]]
* [[CSC/ECE 517 Fall 2024 - E2454. Refactor student_task.rb]]
* [[CSC/ECE 517 Fall 2024 - E2455. Refactor sign_up_sheet_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2456. Refactor teams_user.rb]]
* [[CSC/ECE 517 Fall 2024 - E2456. Refactor teams_user.rb (Phase 2 - Design Document)]]
* [[CSC/ECE 517 Fall 2024 - E2457. GitHub metrics integration]]
* [[CSC/ECE 517 Fall 2024 - E2458. User management and users table]]
* [[CSC/ECE 517 Fall 2024 - E2459. View for results of bidding]]
* [[CSC/ECE 517 Fall 2024 - E2460 Mentor-Meeting Management]]
* [[CSC/ECE 517 Fall 2024 - E2461. UI for Courses]]
* [[CSC/ECE 517 Fall 2024 - E2461. UI and Backend for Courses]]
* [https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2462._UI_for_Questionnaires CSC/ECE 517 Fall 2024 - E2462. UI for Questionnaire.rb]
* [https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2463_Implement_Front_End_for_Student_Task_List CSC/ECE 517 Fall 2024 - E2463. UI for Student Task List]
* [[CSC/ECE 517 Fall 2024 - E2464 UI for Project Topics (was: Sign_up_Topics)]]
* [[CSC/ECE 517 Fall 2024 - E2465. UI for Institutions and Notification]]
* [[CSC/ECE 517 Fall 2024 - E2466. UI for Impersonate User]]
* [[CSC/ECE 517 Fall 2024 - E2467. UI for View Submissions]]
* [[CSC/ECE 517 Fall 2024 - E2468. Reimplement due_date]]
* [[CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view_team]]
* [[CSC/ECE 517 Fall 2024 - E2470. Reimplement grades_controller]]
* [[CSC/ECE 517 Fall 2024 - E2471. Reimplement logger]]
* [[CSC/ECE 517 Fall 2024 - E2472. Reimplement responses_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2473. Reimplement sign up topic.rb as project topic.rb]]
* [[CSC/ECE 517 Fall 2024 - E2474. Reimplement student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2475. Reimplement student_task view]]
* [[CSC/ECE 517 Fall 2024 - E2476. Reimplement student_teams_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2477. Reimplement suggestion_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2478. Reimplement the Question hierarchy as Item hierarchy]]
* [[CSC/ECE 517 Fall 2024 - E2479. Reimplement teams_users_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2480. Implement testing for new Bookmarks Controller]]
* [[CSC/ECE 517 Fall 2024 - E2481 Reimplement response_map.rb]]
* [[CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews]]
* [[CSC/ECE 517 Fall 2024 - E2483. Reimplement Notification Controller and Model]]
* [[CSC/ECE 517 Fall 2024 - E2484. Reimplement participants_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2485. Allow reviewers to bid on what to review]]
* [[CSC/ECE 517 Fall 2024 - E2486.Reimplement deadline_rights and deadline_types]]
* [[CSC/ECE 517 Fall 2024 - E2487. Reimplement authorization_helper.rb]]
* [[CSC/ECE 517 Fall 2024 - E2488 Reimplementation of Add TA to course]]
* [[CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS]]
* [[CSC/ECE 517 Fall 2024 - E2490.1 Improving Assignment Participants Management UI in Expertiza]]
* [[CSC/ECE 517 Fall 2024 - E2491.UI for View assignments in Courses view]]
* [[CSC/ECE 517 Fall 2024 - E2492. UI for View submissions/assign grades (except heatgrid)]]
* [[CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers]]
* [[CSC/ECE 517 Fall 2024 - E2494. UI for Report Review for Assignment]]
* [[CSC/ECE 517 Fall 2024 - E2494. UI for Teammate Review View]]
* [[CSC/ECE 517 Fall 2024 - G2401 Refactor Graphql API endpoint for contribution metrics]]
* [[CSC/ECE 517 Fall 2024 - G2402 Refactor Graphql API endpoint for repositories]]

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-30T03:21:20Z

Jkersey: /* Files Added / Changed */

== Reimplement Heatgrid for Reviews ==

The '''Heatgrid for Reviews''' project, built with '''React''', is a robust, interactive component designed to provide a clear and comprehensive overview of review grades across assignments. This new implementation enhances the usability of the current review heatgrid in Expertiza by focusing on accessibility, responsiveness, and an intuitive layout, ensuring a seamless experience for students, faculty, and other users across devices.

The '''heatgrid''' displays all grades assigned to each question by every reviewer. This redesign introduces a customized view based on the user's role, making it particularly valuable for both faculty and students, who each benefit from distinct perspectives of the heatgrid's data.

== Overview ==

The main objective of this reimplementation is to establish a clean, visually appealing, and responsive heatgrid UI that maintains its layout across multiple screen sizes and devices. The project will include error-handling mechanisms to address potential data issues, providing reliability and consistency to users.

== Existing Heatgrid Component ==

[[File:OldHeatgrid.png | 1000px]]

<p style="text-align: center;">Current Heatgrid component in Expertiza</p>

== Project Requirements ==

1. '''User-Focused Design'''
- '''Goal:''' Design an interface that’s user-friendly, intuitive, and allows for easy navigation.
- '''Features:''' Provide ample spacing for data display, enhance readability, and ensure orderly arrangement of information.

2. '''Responsive Design'''
- '''Goal:''' Ensure seamless functionality and readability across various devices and screen sizes.
- '''Features:''' Responsive layouts for mobile, tablet, and desktop views.

3. '''Error Handling'''
- '''Goal:''' Implement robust error handling for reliable UI performance.
- '''Features:''' Address and handle invalid or missing data gracefully within the heatgrid view.

4. '''Testing'''
- '''Goal:''' Conduct rigorous testing to guarantee component functionality and reliability.
- '''Features:''' Test for both user interactions and error scenarios.

== Reimplementation Details ==

=== Technologies ===
* '''React:''' For building a component-based architecture.
* '''TypeScript:''' Ensures type safety and easier maintenance.

=== Key Implementation Steps ===
* '''Component Development:''' Refactor existing logic to create reusable, modular components with a clear structure.
* '''Error Handling:''' Implement catch blocks and fallback displays for missing or invalid data.
* '''Responsiveness:''' Use media queries and flex/grid layouts to adapt to different screen sizes.
* '''Role-Based Display:''' Customize heatgrid view based on whether the user is a student or faculty member.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===
* Each component will serve a single function to improve code clarity and modularity.

=== Separation of Concerns (SoC) ===
* Different sections of the heatgrid will be organized into specific components for better maintainability.

=== Don't Repeat Yourself (DRY) ===
* Shared logic will be consolidated into utilities and hooks to prevent code duplication.

=== Open/Closed Principle (OCP) ===
* Components will be designed to allow extension for future enhancements without modification.

== Files Added / Changed ==

'''ReviewTableRow.tsx'''

[[File:ReviewTableRowProps.png | 1000px]]

* Updated the type of row from ReviewData to QuestionFeedback to improve type safety and align with the new interface that fits the component's specific requirements. Renamed showToggleQuestion to isQuestionListVisible for better clarity, indicating that this prop controls the visibility of the question list.

* Extracted the logic for determining the icon (star or tick) based on maxScore into getScoreIcon to make the code more modular and readable.

[[File:ReviewTableHelpers.png | 1000px]]

* Updated this part to use isQuestionListVisible instead of showToggleQuestion, which aligns with the renamed prop. Also, it now calls getScoreIcon to render the icon based on the maximum score for the question type allowing user to differentiate between the questions, keeping the logic clean and separated.

[[File:HeaderCells.png | 1000px]]

* This component generates header cells for each review, improving code reusability and reducing duplication in the main component.

[[File:Toggles.png | 1000px]]

* This toggle function now uses the SORT_ORDER_SEQUENCE constant for simpler and cleaner logic when toggling the sort order. The toggleVisibility helper function reduces redundancy in toggling visibility, making it reusable for various states. This renderSortIcon function centralizes sort icon logic, making it easier to adjust the icon display in one place.

[[File:RenameState.png | 1000px]]

* Renamed props and state variables (currentRound to selectedRound, sortOrderRow to rowSortOrder, etc.) to enhance clarity and consistency with naming conventions.

'''ShowReviews.tsx'''

[[File:RoundHeading.png | 1000px]]

* Extracted the round title display as a separate RoundHeading component for cleaner and more modular code.

* Extracted the review title display with conditional reviewer name as a ReviewHeading component to simplify the main ShowReviews component and make the reviewer name logic clearer.

* The QuestionReview component now handles each question’s review and score display, which reduces code duplication and enhances readability by encapsulating the question review logic.

'''Statistics.tsx'''

[[File:ToggleButton.png | 1000px]]

* Moved the toggle functionality for visibility (such as "Show/Hide Stats," "Show/Hide Reviews," and "Show/Hide Author Feedback") into a reusable ToggleButton component, improving modularity and readability. Used the toggleVisibility function from utils to manage the visibility state in a cleaner and reusable manner.

[[File:TotalReviews.png | 1000px]]

* The helper function, getTotalReviewsForQuestion, was created to handle calculating totals for reviews and feedback, making the code more concise and reusable.

{| class="wikitable" style="margin:auto"
|+ Enhanced methods and commit link
|-
! File !! Purpose !! Rationale !! CommitLink
|-
| Grades.scss (@media) || create a responsive, accessible table layout that maintains readability and usability across all screen sizes || optimize screen space and enhance user experience, ensuring the table is easily viewable and navigable on devices from desktops to small smartphones. || [https://github.com/manideepika21/reimplementation-front-end/commit/01d37a3ac96344a8a8ca174a3e72b928bb67cc18 CommitLink]
|-
| Grades.scss (tbl_heat) || Adjusted table width. Fixed the table size to adjust dynamically according to the zoom level. Modified the question column for better alignment to the left and added labels to differentiate types of questions more clearly. || enhance the table's usability and clarity by ensuring it dynamically resizes according to the user’s zoom level, maintaining readability without manual adjustments. Aligning the question column to the left and adding labels improves visual organization and helps users quickly differentiate question types, making the data easier to scan and understand. || [https://github.com/manideepika21/reimplementation-front-end/commit/a6a92eab85542c76e98f870946429d93149850b8 CommitLink]
|-
| Grades.scss(tbl_heat td[data-question]:hover::after) || Enhanced tooltip for comments || improve user experience by making information more accessible and easier to read. An improved tooltip provides clear, immediate feedback, allowing users to view additional details without disrupting their workflow, ultimately enhancing clarity and interactivity within the interface. || [https://github.com/manideepika21/reimplementation-front-end/commit/fef65d58c1607bd244c541057f1ddd9ba36e9501 CommitLink]
|-
| || Modified code for better readability and satisfying the principles and added comments || enhance readability and maintainability by adhering to coding principles like Single Responsibility and DRY (Don't Repeat Yourself), which improve the structure and clarity of the code. Adding comments further aids in understanding by providing context and explanations, making it easier for current and future developers to follow the logic, troubleshoot, and extend functionality. || [https://github.com/manideepika21/reimplementation-front-end/commit/a61cb4039bacb7deb1c2b0f1a0cc966d365874f7 CommitLink]
|}

== New Heatgrid Component ==

[[File:NewHeatgrid.png | 1000px]]

<p style="text-align: center;">New Heatgrid Component for Reviews</p>

The newly implemented heatgrid component provides an updated, refined experience, ensuring all the existing features while making the view more accessible and user-friendly.

== Testing ==

* '''Rendering Validation''': Ensure all elements render correctly across devices.
* '''Styling Consistency''': Verify uniform styling across the component.
* '''Functionality Tests''': Confirm buttons and other dynamic elements work as expected.
* '''Responsive Design Testing''': Ensure adaptability to different screen sizes.
* '''Integration Testing''': Validate seamless data flow between heatgrid components.
* '''Cross-Browser Testing''': Test on Chrome, Firefox, Safari, and Edge to ensure broad compatibility.

== Team ==

=== Mentor ===
* '''Sahil Sawant''' (ssawant2@ncsu.edu)

=== Members ===
* '''Manideepika Reddy Myaka''' (mmyaka@ncsu.edu)
* '''Dhananjay Raghu''' (draghu@ncsu.edu)
* '''Josh Kersey''' (jkersey@ncsu.edu)

== Contributors to this project ==
* '''Manideepika Reddy Myaka''' (unityid: mmyaka, github: manideepika21)
* '''Dhananjay Raghu''' (unityid: draghu, github: Dhananjay-Raghu)
* '''Josh Kersey''' (unityid: jkersey, github: pulanski)
* '''Github repo''' https://github.com/manideepika21/reimplementation-front-end
* '''Link to PR''' https://github.com/expertiza/reimplementation-front-end/pull/68
* '''Video of UI/UX Improvements''' https://drive.google.com/file/d/1_-VzUDZGCV_3VzQzh5ucPA8uptkuVh78/view?usp=sharing

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-30T03:18:33Z

Jkersey: /* Contributors to this project */

== Reimplement Heatgrid for Reviews ==

The '''Heatgrid for Reviews''' project, built with '''React''', is a robust, interactive component designed to provide a clear and comprehensive overview of review grades across assignments. This new implementation enhances the usability of the current review heatgrid in Expertiza by focusing on accessibility, responsiveness, and an intuitive layout, ensuring a seamless experience for students, faculty, and other users across devices.

The '''heatgrid''' displays all grades assigned to each question by every reviewer. This redesign introduces a customized view based on the user's role, making it particularly valuable for both faculty and students, who each benefit from distinct perspectives of the heatgrid's data.

== Overview ==

The main objective of this reimplementation is to establish a clean, visually appealing, and responsive heatgrid UI that maintains its layout across multiple screen sizes and devices. The project will include error-handling mechanisms to address potential data issues, providing reliability and consistency to users.

== Existing Heatgrid Component ==

[[File:OldHeatgrid.png | 1000px]]

<p style="text-align: center;">Current Heatgrid component in Expertiza</p>

== Project Requirements ==

1. '''User-Focused Design'''
- '''Goal:''' Design an interface that’s user-friendly, intuitive, and allows for easy navigation.
- '''Features:''' Provide ample spacing for data display, enhance readability, and ensure orderly arrangement of information.

2. '''Responsive Design'''
- '''Goal:''' Ensure seamless functionality and readability across various devices and screen sizes.
- '''Features:''' Responsive layouts for mobile, tablet, and desktop views.

3. '''Error Handling'''
- '''Goal:''' Implement robust error handling for reliable UI performance.
- '''Features:''' Address and handle invalid or missing data gracefully within the heatgrid view.

4. '''Testing'''
- '''Goal:''' Conduct rigorous testing to guarantee component functionality and reliability.
- '''Features:''' Test for both user interactions and error scenarios.

== Reimplementation Details ==

=== Technologies ===
* '''React:''' For building a component-based architecture.
* '''TypeScript:''' Ensures type safety and easier maintenance.

=== Key Implementation Steps ===
* '''Component Development:''' Refactor existing logic to create reusable, modular components with a clear structure.
* '''Error Handling:''' Implement catch blocks and fallback displays for missing or invalid data.
* '''Responsiveness:''' Use media queries and flex/grid layouts to adapt to different screen sizes.
* '''Role-Based Display:''' Customize heatgrid view based on whether the user is a student or faculty member.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===
* Each component will serve a single function to improve code clarity and modularity.

=== Separation of Concerns (SoC) ===
* Different sections of the heatgrid will be organized into specific components for better maintainability.

=== Don't Repeat Yourself (DRY) ===
* Shared logic will be consolidated into utilities and hooks to prevent code duplication.

=== Open/Closed Principle (OCP) ===
* Components will be designed to allow extension for future enhancements without modification.

== Files Added / Changed ==

'''ReviewTableRow.tsx'''

[[File:ReviewTableRowProps.png | 1000px]]

* Updated the type of row from ReviewData to QuestionFeedback to improve type safety and align with the new interface that fits the component's specific requirements. Renamed showToggleQuestion to isQuestionListVisible for better clarity, indicating that this prop controls the visibility of the question list.

* Extracted the logic for determining the icon (star or tick) based on maxScore into getScoreIcon to make the code more modular and readable.

[[File:ReviewTableHelpers.png | 1000px]]

* Updated this part to use isQuestionListVisible instead of showToggleQuestion, which aligns with the renamed prop. Also, it now calls getScoreIcon to render the icon based on the maximum score for the question type allowing user to differentiate between the questions, keeping the logic clean and separated.

[[File:HeaderCells.png | 1000px]]

* This component generates header cells for each review, improving code reusability and reducing duplication in the main component.

[[File:Toggles.png | 1000px]]

* This toggle function now uses the SORT_ORDER_SEQUENCE constant for simpler and cleaner logic when toggling the sort order. The toggleVisibility helper function reduces redundancy in toggling visibility, making it reusable for various states. This renderSortIcon function centralizes sort icon logic, making it easier to adjust the icon display in one place.

[[File:RenameState.png | 1000px]]

* Renamed props and state variables (currentRound to selectedRound, sortOrderRow to rowSortOrder, etc.) to enhance clarity and consistency with naming conventions.

'''ShowReviews.tsx'''

[[File:RoundHeading.png | 1000px]]

* Extracted the round title display as a separate RoundHeading component for cleaner and more modular code.

* Extracted the review title display with conditional reviewer name as a ReviewHeading component to simplify the main ShowReviews component and make the reviewer name logic clearer.

* The QuestionReview component now handles each question’s review and score display, which reduces code duplication and enhances readability by encapsulating the question review logic.

'''Statistics.tsx'''

[[File:ToggleButton.png | 1000px]]

* Moved the toggle functionality for visibility (such as "Show/Hide Stats," "Show/Hide Reviews," and "Show/Hide Author Feedback") into a reusable ToggleButton component, improving modularity and readability. Used the toggleVisibility function from utils to manage the visibility state in a cleaner and reusable manner.

[[File:TotalReviews.png | 1000px]]

* The helper function, getTotalReviewsForQuestion, was created to handle calculating totals for reviews and feedback, making the code more concise and reusable.

{| class="wikitable" style="margin:auto"
|+ Enhanced methods and commit link
|-
! File !! Purpose !! Rationale !! CommitLink
|-
| Grades.scss (@media) || create a responsive, accessible table layout that maintains readability and usability across all screen sizes || optimize screen space and enhance user experience, ensuring the table is easily viewable and navigable on devices from desktops to small smartphones. || [https://github.com/manideepika21/reimplementation-front-end/commit/01d37a3ac96344a8a8ca174a3e72b928bb67cc18 CommitLink]
|-
| Grades.scss (tbl_heat) || Adjusted table width. Fixed the table size to adjust dynamically according to the zoom level. Modified the question column for better alignment to the left and added labels to differentiate types of questions more clearly. || enhance the table's usability and clarity by ensuring it dynamically resizes according to the user’s zoom level, maintaining readability without manual adjustments. Aligning the question column to the left and adding labels improves visual organization and helps users quickly differentiate question types, making the data easier to scan and understand. || [https://github.com/manideepika21/reimplementation-front-end/commit/f913b9c32f08066e1c2c033ac1123d9ac02bc95c CommitLink]
|-
| Grades.scss(tbl_heat td[data-question]:hover::after) || Enhanced tooltip for comments || improve user experience by making information more accessible and easier to read. An improved tooltip provides clear, immediate feedback, allowing users to view additional details without disrupting their workflow, ultimately enhancing clarity and interactivity within the interface. || [https://github.com/manideepika21/reimplementation-front-end/commit/fef65d58c1607bd244c541057f1ddd9ba36e9501 CommitLink]
|-
| || Modified code for better readability and satisfying the principles and added comments || enhance readability and maintainability by adhering to coding principles like Single Responsibility and DRY (Don't Repeat Yourself), which improve the structure and clarity of the code. Adding comments further aids in understanding by providing context and explanations, making it easier for current and future developers to follow the logic, troubleshoot, and extend functionality. || [https://github.com/manideepika21/reimplementation-front-end/commit/a61cb4039bacb7deb1c2b0f1a0cc966d365874f7 CommitLink]
|}

== New Heatgrid Component ==

[[File:NewHeatgrid.png | 1000px]]

<p style="text-align: center;">New Heatgrid Component for Reviews</p>

The newly implemented heatgrid component provides an updated, refined experience, ensuring all the existing features while making the view more accessible and user-friendly.

== Testing ==

* '''Rendering Validation''': Ensure all elements render correctly across devices.
* '''Styling Consistency''': Verify uniform styling across the component.
* '''Functionality Tests''': Confirm buttons and other dynamic elements work as expected.
* '''Responsive Design Testing''': Ensure adaptability to different screen sizes.
* '''Integration Testing''': Validate seamless data flow between heatgrid components.
* '''Cross-Browser Testing''': Test on Chrome, Firefox, Safari, and Edge to ensure broad compatibility.

== Team ==

=== Mentor ===
* '''Sahil Sawant''' (ssawant2@ncsu.edu)

=== Members ===
* '''Manideepika Reddy Myaka''' (mmyaka@ncsu.edu)
* '''Dhananjay Raghu''' (draghu@ncsu.edu)
* '''Josh Kersey''' (jkersey@ncsu.edu)

== Contributors to this project ==
* '''Manideepika Reddy Myaka''' (unityid: mmyaka, github: manideepika21)
* '''Dhananjay Raghu''' (unityid: draghu, github: Dhananjay-Raghu)
* '''Josh Kersey''' (unityid: jkersey, github: pulanski)
* '''Github repo''' https://github.com/manideepika21/reimplementation-front-end
* '''Link to PR''' https://github.com/expertiza/reimplementation-front-end/pull/68
* '''Video of UI/UX Improvements''' https://drive.google.com/file/d/1_-VzUDZGCV_3VzQzh5ucPA8uptkuVh78/view?usp=sharing

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-30T02:10:41Z

Jkersey: /* Files Added / Changed */

== Reimplement Heatgrid for Reviews ==

The '''Heatgrid for Reviews''' project, built with '''React''', is a robust, interactive component designed to provide a clear and comprehensive overview of review grades across assignments. This new implementation enhances the usability of the current review heatgrid in Expertiza by focusing on accessibility, responsiveness, and an intuitive layout, ensuring a seamless experience for students, faculty, and other users across devices.

The '''heatgrid''' displays all grades assigned to each question by every reviewer. This redesign introduces a customized view based on the user's role, making it particularly valuable for both faculty and students, who each benefit from distinct perspectives of the heatgrid's data.

== Overview ==

The main objective of this reimplementation is to establish a clean, visually appealing, and responsive heatgrid UI that maintains its layout across multiple screen sizes and devices. The project will include error-handling mechanisms to address potential data issues, providing reliability and consistency to users.

== Existing Heatgrid Component ==

[[File:OldHeatgrid.png | 1000px]]

<p style="text-align: center;">Current Heatgrid component in Expertiza</p>

== Project Requirements ==

1. '''User-Focused Design'''
- '''Goal:''' Design an interface that’s user-friendly, intuitive, and allows for easy navigation.
- '''Features:''' Provide ample spacing for data display, enhance readability, and ensure orderly arrangement of information.

2. '''Responsive Design'''
- '''Goal:''' Ensure seamless functionality and readability across various devices and screen sizes.
- '''Features:''' Responsive layouts for mobile, tablet, and desktop views.

3. '''Error Handling'''
- '''Goal:''' Implement robust error handling for reliable UI performance.
- '''Features:''' Address and handle invalid or missing data gracefully within the heatgrid view.

4. '''Testing'''
- '''Goal:''' Conduct rigorous testing to guarantee component functionality and reliability.
- '''Features:''' Test for both user interactions and error scenarios.

== Reimplementation Details ==

=== Technologies ===
* '''React:''' For building a component-based architecture.
* '''TypeScript:''' Ensures type safety and easier maintenance.

=== Key Implementation Steps ===
* '''Component Development:''' Refactor existing logic to create reusable, modular components with a clear structure.
* '''Error Handling:''' Implement catch blocks and fallback displays for missing or invalid data.
* '''Responsiveness:''' Use media queries and flex/grid layouts to adapt to different screen sizes.
* '''Role-Based Display:''' Customize heatgrid view based on whether the user is a student or faculty member.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===
* Each component will serve a single function to improve code clarity and modularity.

=== Separation of Concerns (SoC) ===
* Different sections of the heatgrid will be organized into specific components for better maintainability.

=== Don't Repeat Yourself (DRY) ===
* Shared logic will be consolidated into utilities and hooks to prevent code duplication.

=== Open/Closed Principle (OCP) ===
* Components will be designed to allow extension for future enhancements without modification.

== Files Added / Changed ==

'''ReviewTableRow.tsx'''

[[File:ReviewTableRowProps.png | 1000px]]

* Updated the type of row from ReviewData to QuestionFeedback to improve type safety and align with the new interface that fits the component's specific requirements. Renamed showToggleQuestion to isQuestionListVisible for better clarity, indicating that this prop controls the visibility of the question list.

* Extracted the logic for determining the icon (star or tick) based on maxScore into getScoreIcon to make the code more modular and readable.

[[File:ReviewTableHelpers.png | 1000px]]

* Updated this part to use isQuestionListVisible instead of showToggleQuestion, which aligns with the renamed prop. Also, it now calls getScoreIcon to render the icon based on the maximum score for the question type allowing user to differentiate between the questions, keeping the logic clean and separated.

[[File:HeaderCells.png | 1000px]]

* This component generates header cells for each review, improving code reusability and reducing duplication in the main component.

[[File:Toggles.png | 1000px]]

* This toggle function now uses the SORT_ORDER_SEQUENCE constant for simpler and cleaner logic when toggling the sort order. The toggleVisibility helper function reduces redundancy in toggling visibility, making it reusable for various states. This renderSortIcon function centralizes sort icon logic, making it easier to adjust the icon display in one place.

[[File:RenameState.png | 1000px]]

* Renamed props and state variables (currentRound to selectedRound, sortOrderRow to rowSortOrder, etc.) to enhance clarity and consistency with naming conventions.

'''ShowReviews.tsx'''

[[File:RoundHeading.png | 1000px]]

* Extracted the round title display as a separate RoundHeading component for cleaner and more modular code.

* Extracted the review title display with conditional reviewer name as a ReviewHeading component to simplify the main ShowReviews component and make the reviewer name logic clearer.

* The QuestionReview component now handles each question’s review and score display, which reduces code duplication and enhances readability by encapsulating the question review logic.

'''Statistics.tsx'''

[[File:ToggleButton.png | 1000px]]

* Moved the toggle functionality for visibility (such as "Show/Hide Stats," "Show/Hide Reviews," and "Show/Hide Author Feedback") into a reusable ToggleButton component, improving modularity and readability. Used the toggleVisibility function from utils to manage the visibility state in a cleaner and reusable manner.

[[File:TotalReviews.png | 1000px]]

* The helper function, getTotalReviewsForQuestion, was created to handle calculating totals for reviews and feedback, making the code more concise and reusable.

{| class="wikitable" style="margin:auto"
|+ Enhanced methods and commit link
|-
! File !! Purpose !! Rationale !! CommitLink
|-
| Grades.scss (@media) || create a responsive, accessible table layout that maintains readability and usability across all screen sizes || optimize screen space and enhance user experience, ensuring the table is easily viewable and navigable on devices from desktops to small smartphones. || [https://github.com/manideepika21/reimplementation-front-end/commit/01d37a3ac96344a8a8ca174a3e72b928bb67cc18 CommitLink]
|-
| Grades.scss (tbl_heat) || Adjusted table width. Fixed the table size to adjust dynamically according to the zoom level. Modified the question column for better alignment to the left and added labels to differentiate types of questions more clearly. || enhance the table's usability and clarity by ensuring it dynamically resizes according to the user’s zoom level, maintaining readability without manual adjustments. Aligning the question column to the left and adding labels improves visual organization and helps users quickly differentiate question types, making the data easier to scan and understand. || [https://github.com/manideepika21/reimplementation-front-end/commit/f913b9c32f08066e1c2c033ac1123d9ac02bc95c CommitLink]
|-
| Grades.scss(tbl_heat td[data-question]:hover::after) || Enhanced tooltip for comments || improve user experience by making information more accessible and easier to read. An improved tooltip provides clear, immediate feedback, allowing users to view additional details without disrupting their workflow, ultimately enhancing clarity and interactivity within the interface. || [https://github.com/manideepika21/reimplementation-front-end/commit/fef65d58c1607bd244c541057f1ddd9ba36e9501 CommitLink]
|-
| || Modified code for better readability and satisfying the principles and added comments || enhance readability and maintainability by adhering to coding principles like Single Responsibility and DRY (Don't Repeat Yourself), which improve the structure and clarity of the code. Adding comments further aids in understanding by providing context and explanations, making it easier for current and future developers to follow the logic, troubleshoot, and extend functionality. || [https://github.com/manideepika21/reimplementation-front-end/commit/a61cb4039bacb7deb1c2b0f1a0cc966d365874f7 CommitLink]
|}

== New Heatgrid Component ==

[[File:NewHeatgrid.png | 1000px]]

<p style="text-align: center;">New Heatgrid Component for Reviews</p>

The newly implemented heatgrid component provides an updated, refined experience, ensuring all the existing features while making the view more accessible and user-friendly.

== Testing ==

* '''Rendering Validation''': Ensure all elements render correctly across devices.
* '''Styling Consistency''': Verify uniform styling across the component.
* '''Functionality Tests''': Confirm buttons and other dynamic elements work as expected.
* '''Responsive Design Testing''': Ensure adaptability to different screen sizes.
* '''Integration Testing''': Validate seamless data flow between heatgrid components.
* '''Cross-Browser Testing''': Test on Chrome, Firefox, Safari, and Edge to ensure broad compatibility.

== Team ==

=== Mentor ===
* '''Sahil Sawant''' (ssawant2@ncsu.edu)

=== Members ===
* '''Manideepika Reddy Myaka''' (mmyaka@ncsu.edu)
* '''Dhananjay Raghu''' (draghu@ncsu.edu)
* '''Josh Kersey''' (jkersey@ncsu.edu)

== Contributors to this project ==
* '''Manideepika Reddy Myaka''' (unityid: mmyaka, github: manideepika21)
* '''Dhananjay Raghu''' (unityid: draghu, github: Dhananjay-Raghu)
* '''Josh Kersey''' (unityid: jkersey, github: pulanski)
* '''Github repo''' https://github.com/manideepika21/reimplementation-front-end
* '''Link to PR''' https://github.com/expertiza/reimplementation-front-end/pull/<TODO_ADD_ME>
* '''Video of UI/UX Improvements''' https://drive.google.com/file/d/1_-VzUDZGCV_3VzQzh5ucPA8uptkuVh78/view?usp=sharing

File:TotalReviews.png

2024-10-30T02:01:30Z

Jkersey:

File:ToggleButton.png

2024-10-30T02:00:15Z

Jkersey:

File:RoundHeading.png

2024-10-30T01:58:21Z

Jkersey:

File:RenameState.png

2024-10-30T01:55:13Z

Jkersey:

File:Toggles.png

2024-10-30T01:54:11Z

Jkersey:

File:HeaderCells.png

2024-10-30T01:52:08Z

Jkersey:

File:ReviewTableHelpers.png

2024-10-30T01:48:53Z

Jkersey:

File:ReviewTableRowProps.png

2024-10-30T01:46:07Z

Jkersey:

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-29T22:44:03Z

Jkersey: /* Contributors to this project */

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-29T22:29:22Z

Jkersey: /* Contributors to this project */

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-29T22:16:59Z

Jkersey: /* Existing Heatgrid Component */

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-29T22:16:50Z

Jkersey: /* New Heatgrid Component */

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-29T22:15:57Z

Jkersey: /* New Heatgrid Component */

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-29T22:14:21Z

Jkersey: /* New Heatgrid Component */

File:NewHeatgrid.png

2024-10-29T22:13:51Z

Jkersey:

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-29T22:11:17Z

Jkersey: /* Existing Heatgrid Component */

File:OldHeatgrid.png

2024-10-29T22:10:56Z

Jkersey: Old heatgrid implementation

== Summary ==
Old heatgrid implementation

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-29T22:10:22Z

Jkersey: /* Existing Heatgrid Component */

CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews

2024-10-28T16:48:49Z

Jkersey: Created page with "== Reimplement Heatgrid for Reviews == The '''Heatgrid for Reviews''' project, built with '''React''', is a robust, interactive component designed to provide a clear and comprehensive overview of review grades across assignments. This new implementation enhances the usability of the current review heatgrid in Expertiza by focusing on accessibility, responsiveness, and an intuitive layout, ensuring a seamless experience for students, faculty, and other users across devic..."

CSC/ECE 517 Fall 2024

2024-10-28T16:25:43Z

Jkersey:

* [[CSC/ECE 517 Fall 2024 - E2454. Refactor student_task.rb]]
* [[CSC/ECE 517 Fall 2024 - E2466. UI for Impersonate User]]
* [[CSC/ECE 517 Fall 2024 - E2456. Refactor teams_user.rb]]
* [[CSC/ECE 517 Fall 2024 - E2465. UI for Institutions and Notification]]
* [[CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews]]