Expertiza_Wiki - User contributions [en]

File:Assign reviewer 4.png

2024-12-07T17:16:17Z

Vdevire2:

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-07T17:15:46Z

Vdevire2: /* Add Reviewer */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component: This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.

Reviewer Row Component: A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).

Action Buttons: Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Originally planned view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 

== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File: Assign_reviewer_1.png |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File: Assign_reviewer_2.png |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File: Assign_reviewer_3.png |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File: Assign_reviewer_4.png |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h3>1. Frontend Component Files</h3>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h3>2. Core Functionalities</h3>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h3>3. UI Enhancements</h3>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure: Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==
* Enhanced Assignment Management: Improve assignment editing capabilities by adding features like due date modification and participant management.
* Comprehensive Questionnaire Support: Create intuitive pages for designing, updating, and interacting with questionnaires.
* Automated Reviewer Assignment: Introduce dynamic reviewer assignment based on expertise, workload, or predefined criteria.
* Account Request Module: Develop a streamlined module for handling and approving account requests efficiently.
* Performance and Accessibility Enhancements: Optimize loading times and ensure a responsive design across all devices for a seamless user experience.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

File:Assign reviewer 3.png

2024-12-07T17:12:11Z

Vdevire2:

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-07T17:11:37Z

Vdevire2: /* Reviewer Management */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component: This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.

Reviewer Row Component: A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).

Action Buttons: Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Originally planned view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 

== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File: Assign_reviewer_1.png |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File: Assign_reviewer_2.png |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File: Assign_reviewer_3.png |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h3>1. Frontend Component Files</h3>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h3>2. Core Functionalities</h3>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h3>3. UI Enhancements</h3>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure: Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==
* Enhanced Assignment Management: Improve assignment editing capabilities by adding features like due date modification and participant management.
* Comprehensive Questionnaire Support: Create intuitive pages for designing, updating, and interacting with questionnaires.
* Automated Reviewer Assignment: Introduce dynamic reviewer assignment based on expertise, workload, or predefined criteria.
* Account Request Module: Develop a streamlined module for handling and approving account requests efficiently.
* Performance and Accessibility Enhancements: Optimize loading times and ensure a responsive design across all devices for a seamless user experience.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

File:Assign reviewer 2.png

2024-12-07T17:11:00Z

Vdevire2:

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-07T17:10:40Z

Vdevire2: /* Review Status Tracking */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component: This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.

Reviewer Row Component: A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).

Action Buttons: Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Originally planned view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 

== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File: Assign_reviewer_1.png |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File: Assign_reviewer_2.png |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h3>1. Frontend Component Files</h3>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h3>2. Core Functionalities</h3>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h3>3. UI Enhancements</h3>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure: Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==
* Enhanced Assignment Management: Improve assignment editing capabilities by adding features like due date modification and participant management.
* Comprehensive Questionnaire Support: Create intuitive pages for designing, updating, and interacting with questionnaires.
* Automated Reviewer Assignment: Introduce dynamic reviewer assignment based on expertise, workload, or predefined criteria.
* Account Request Module: Develop a streamlined module for handling and approving account requests efficiently.
* Performance and Accessibility Enhancements: Optimize loading times and ensure a responsive design across all devices for a seamless user experience.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-07T17:07:38Z

Vdevire2: /* Overall view */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component: This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.

Reviewer Row Component: A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).

Action Buttons: Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Originally planned view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 

== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File: Assign_reviewer_1.png |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h3>1. Frontend Component Files</h3>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h3>2. Core Functionalities</h3>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h3>3. UI Enhancements</h3>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure: Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==
* Enhanced Assignment Management: Improve assignment editing capabilities by adding features like due date modification and participant management.
* Comprehensive Questionnaire Support: Create intuitive pages for designing, updating, and interacting with questionnaires.
* Automated Reviewer Assignment: Introduce dynamic reviewer assignment based on expertise, workload, or predefined criteria.
* Account Request Module: Develop a streamlined module for handling and approving account requests efficiently.
* Performance and Accessibility Enhancements: Optimize loading times and ensure a responsive design across all devices for a seamless user experience.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-07T17:06:41Z

Vdevire2: /* Overall view */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component: This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.

Reviewer Row Component: A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).

Action Buttons: Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Originally planned view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 

== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File: Assign_reviewer_1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h3>1. Frontend Component Files</h3>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h3>2. Core Functionalities</h3>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h3>3. UI Enhancements</h3>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure: Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==
* Enhanced Assignment Management: Improve assignment editing capabilities by adding features like due date modification and participant management.
* Comprehensive Questionnaire Support: Create intuitive pages for designing, updating, and interacting with questionnaires.
* Automated Reviewer Assignment: Introduce dynamic reviewer assignment based on expertise, workload, or predefined criteria.
* Account Request Module: Develop a streamlined module for handling and approving account requests efficiently.
* Performance and Accessibility Enhancements: Optimize loading times and ensure a responsive design across all devices for a seamless user experience.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

File:Assign reviewer 1.png

2024-12-07T17:06:04Z

Vdevire2:

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:46:07Z

Vdevire2: /* Technologies */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h3>1. Frontend Component Files</h3>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h3>2. Core Functionalities</h3>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h3>3. UI Enhancements</h3>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure: Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==
* Enhanced Assignment Management: Improve assignment editing capabilities by adding features like due date modification and participant management.
* Comprehensive Questionnaire Support: Create intuitive pages for designing, updating, and interacting with questionnaires.
* Automated Reviewer Assignment: Introduce dynamic reviewer assignment based on expertise, workload, or predefined criteria.
* Account Request Module: Develop a streamlined module for handling and approving account requests efficiently.
* Performance and Accessibility Enhancements: Optimize loading times and ensure a responsive design across all devices for a seamless user experience.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:42:54Z

Vdevire2: /* Future Scope */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h3>1. Frontend Component Files</h3>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h3>2. Core Functionalities</h3>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h3>3. UI Enhancements</h3>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure: Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==
* Enhanced Assignment Management: Improve assignment editing capabilities by adding features like due date modification and participant management.
* Comprehensive Questionnaire Support: Create intuitive pages for designing, updating, and interacting with questionnaires.
* Automated Reviewer Assignment: Introduce dynamic reviewer assignment based on expertise, workload, or predefined criteria.
* Account Request Module: Develop a streamlined module for handling and approving account requests efficiently.
* Performance and Accessibility Enhancements: Optimize loading times and ensure a responsive design across all devices for a seamless user experience.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:42:30Z

Vdevire2: /* Future Scope */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h3>1. Frontend Component Files</h3>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h3>2. Core Functionalities</h3>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h3>3. UI Enhancements</h3>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure: Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==
1. Enhanced Assignment Management: Improve assignment editing capabilities by adding features like due date modification and participant management.
2. Comprehensive Questionnaire Support: Create intuitive pages for designing, updating, and interacting with questionnaires.
3. Automated Reviewer Assignment: Introduce dynamic reviewer assignment based on expertise, workload, or predefined criteria.
4. Account Request Module: Develop a streamlined module for handling and approving account requests efficiently.
5. Performance and Accessibility Enhancements: Optimize loading times and ensure a responsive design across all devices for a seamless user experience.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:38:54Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h3>1. Frontend Component Files</h3>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h3>2. Core Functionalities</h3>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h3>3. UI Enhancements</h3>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure: Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:38:37Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h3>1. Frontend Component Files</h3>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h3>2. Core Functionalities</h3>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h3>3. UI Enhancements</h3>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure:Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:38:13Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h3>1. Frontend Component Files</h3>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h2>2. Core Functionalities</h2>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h2>3. UI Enhancements</h2>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure:Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:37:42Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

<h2>1. Frontend Component Files</h2>
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

<h2>2. Core Functionalities</h2>
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

<h2>3. UI Enhancements</h2>
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure:Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:36:22Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

1. Frontend Component Files
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

2. Core Functionalities
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

3. UI Enhancements
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements: Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure:Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:35:22Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

1. Frontend Component Files
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

2. Core Functionalities
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

3. UI Enhancements
* Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
* Interactive Elements:
Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
* Table Structure:
Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:33:39Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

1. Frontend Component Files
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

2. Core Functionalities
Reviewer Management Functions:
* `handleAddReviewer`
* `handleUnsubmit`
* `openModal`
* `closeModal`
Table Structure:
* Dynamic rows for reviewers and contributors.

3. UI Enhancements
- Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
- Interactive Elements:
- Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
- Table Structure:
- Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:31:20Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

1. Frontend Component Files
* `src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
* `src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
* `src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

2. Core Functionalities
Reviewer Management Functions:
`handleAddReviewer`
`handleUnsubmit`
`openModal`
`closeModal`
**Table Structure**:
- Dynamic rows for reviewers and contributors.

3. UI Enhancements
- Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
- Interactive Elements:
- Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
- Table Structure:
- Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:28:03Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

1. Frontend Component Files
`src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
`src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
`src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

2. Core Functionalities
Reviewer Management Functions:
- `handleAddReviewer`
- `handleUnsubmit`
- `openModal`
- `closeModal`
- **Table Structure**:
- Dynamic rows for reviewers and contributors.

3. UI Enhancements
- Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
- Interactive Elements:
- Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
- Table Structure:
- Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:27:24Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

# Frontend Component Files
`src/pages/Assignments/AssignReviewer.tsx`: Implements the main UI for assigning reviewers.
`src/pages/Assignments/AssignReviewerStyle.css`: Defines the CSS styles for the `AssignReviewer` component.
`src/pages/Assignments/AssignmentEditor.tsx`: Adds navigation for the `AssignReviewer` page.

# Core Functionalities
Reviewer Management Functions:
- `handleAddReviewer`
- `handleUnsubmit`
- `openModal`
- `closeModal`
- **Table Structure**:
- Dynamic rows for reviewers and contributors.

# UI Enhancements
- Modal for Adding Reviewers: Provides a user interface for adding reviewers to assignments.
- Interactive Elements:
- Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
- Table Structure:
- Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:23:49Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

# List of Files Added/Updated

### Frontend Component Files
**`src/pages/Assignments/AssignReviewer.tsx`**: Implements the main UI for assigning reviewers.
**`src/pages/Assignments/AssignReviewerStyle.css`**: Defines the CSS styles for the `AssignReviewer` component.
**`src/pages/Assignments/AssignmentEditor.tsx`**: Adds navigation for the `AssignReviewer` page.

### Core Functionalities
**Reviewer Management Functions**:
- `handleAddReviewer`
- `handleUnsubmit`
- `openModal`
- `closeModal`
- **Table Structure**:
- Dynamic rows for reviewers and contributors.

### UI Enhancements
- **Modal for Adding Reviewers**: Provides a user interface for adding reviewers to assignments.
- **Interactive Elements**:
- Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
- **Table Structure**:
- Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:23:30Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

## List of Files Added/Updated

### Frontend Component Files
**`src/pages/Assignments/AssignReviewer.tsx`**: Implements the main UI for assigning reviewers.
**`src/pages/Assignments/AssignReviewerStyle.css`**: Defines the CSS styles for the `AssignReviewer` component.
**`src/pages/Assignments/AssignmentEditor.tsx`**: Adds navigation for the `AssignReviewer` page.

### Core Functionalities
**Reviewer Management Functions**:
- `handleAddReviewer`
- `handleUnsubmit`
- `openModal`
- `closeModal`
- **Table Structure**:
- Dynamic rows for reviewers and contributors.

### UI Enhancements
- **Modal for Adding Reviewers**: Provides a user interface for adding reviewers to assignments.
- **Interactive Elements**:
- Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
- **Table Structure**:
- Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:22:50Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

## List of Files Added/Updated

### Frontend Component Files
- **`src/pages/Assignments/AssignReviewer.tsx`**: Implements the main UI for assigning reviewers.
- **`src/pages/Assignments/AssignReviewerStyle.css`**: Defines the CSS styles for the `AssignReviewer` component.
- **`src/pages/Assignments/AssignmentEditor.tsx`**: Adds navigation for the `AssignReviewer` page.

### Core Functionalities
- **Reviewer Management Functions**:
- `handleAddReviewer`
- `handleUnsubmit`
- `openModal`
- `closeModal`
- **Table Structure**:
- Dynamic rows for reviewers and contributors.

### UI Enhancements
- **Modal for Adding Reviewers**: Provides a user interface for adding reviewers to assignments.
- **Interactive Elements**:
- Managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
- **Table Structure**:
- Displays topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:20:19Z

Vdevire2: /* List of files added/updated */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==

* Frontend Component Files

** src/pages/Assignments/AssignReviewer.tsx: Implements the main UI for assigning reviewers.
** src/pages/Assignments/AssignReviewerStyle.css: Defines the CSS styles for the AssignReviewer component.
** src/pages/Assignments/AssignmentEditor.tsx: Adds navigation for the AssignReviewer page.

* Core Functionalities

** Reviewer management functions (handleAddReviewer, handleUnsubmit, openModal, closeModal).
** Table structure with dynamic rows for reviewers and contributors.

* UI Enhancements

** Modal for adding reviewers.
** Interactive elements for managing reviewer assignments (e.g., "Add Reviewer," "Unsubmit").
** Table structure for displaying topics, contributors, and reviewers.

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:18:08Z

Vdevire2: /* Technologies */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==
==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:17:01Z

Vdevire2: /* Technologies */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

* Frontend: React, TypeScript
* State Management: React's useState and useMemo, Context API for centralized data handling
* Styling: CSS (for responsive and accessible design), AssignReviewerStyle.css
* Backend Interaction: API calls for real-time data updates
* Tooling: Bootstrap for UI components

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==
==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:10:52Z

Vdevire2: /* Technical Design */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

==Technologies==

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==
==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:09:50Z

Vdevire2: /* Conclusion */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==
==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

==Future Scope==

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:09:03Z

Vdevire2: /* Test plan */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==List of files added/updated==
==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T03:05:39Z

Vdevire2: /* Code Changes Made */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
====Reviewer and IContributor Interfaces====

These interfaces are used to define and manage data related to reviewers and contributors.
Reviewer Interface: Represents individual reviewers, including details such as name, username, and review status.
IContributor Interface: Represents contributors, detailing their identity and role in the project submission process.

====RowData Interface====

Combines multiple aspects of a topic into a single, structured data model.
Components:
Topic Details: The main subject under review.
Contributor Information: Names and usernames of contributors involved.
Reviewer Information: Assigned reviewers along with their current review status.

This unified data model ensures seamless integration of topics, contributors, and reviewers for efficient management.
[[File:Code111.jpg |500px| center]]

===Core Functions for Reviewer Management===
====handleAddReviewer Function====

Purpose: Adds a new reviewer to a specific topic in the table’s data.
Process:
Iterates through the table rows to find the row matching the selected topic.
Appends a new reviewer object (with a "Pending" status) to the reviewers array for that topic.
Closes the modal to confirm the operation visually.

This function ensures the data is updated dynamically while maintaining the integrity of other rows.

====handleUnsubmit Function====

Purpose: Updates the review status of a specific reviewer to "Pending" for a selected topic.
Process:
Identifies the row corresponding to the selected topic.
Locates the specific reviewer by their name and updates their review status.
Preserves the state of other rows and reviewers.

This ensures flexibility and allows administrators to reset reviews when needed.

====openModal and closeModal Functions====

openModal: Prepares and displays the modal for assigning or managing reviewers.
Sets the selected topic.
Formats contributor details into strings (e.g., name and username) for display.
Opens the modal by updating the setModalOpen state to true.

closeModal: Closes the modal and resets any temporary fields (e.g., reviewer name).

Together, these functions create a seamless user experience for modal interactions.

[[File:Code222.jpg |500px| center]]
[[File:Code333.jpg |500px| center]]
[[File:Code444.jpg |500px| center]]

===Data Structure for Review Management===

Each topic in the system contains:

Contributor Details: Includes the name and username of contributors.
Reviewer Details: Includes the name, username, and current review status of assigned reviewers.

This structured dataset ensures clarity, allowing for organized review tracking and assignment.

[[File:Code555.jpg |500px| center]]

===CSS Styles for Buttons and Links===
====Interactive Elements====

Add Reviewer Button: Styled with colors and hover effects for clear visibility and actionability.
Unsubmit Link: Changes to light green on hover, indicating interactivity.
Submit and Cancel Buttons: Styled for consistent appearance with distinct colors and layout.

====Layout and Presentation====

Specifies properties such as width, margin, and alignment for a cohesive design.
Ensures all buttons and links are easily accessible and visually distinct.
[[File:Code666.jpg |500px| center]]

===CSS Styles for the Review Assignment Component===
====Component Styling====

Container (.assign-reviewer-container): Provides padding, borders, and background color for a well-structured layout.
Table (.assign-reviewer-table): Styled for readability and clarity with defined spacing, borders, and alignment.

====Table-Specific Styling====

Headers and cells have distinct styles to differentiate them visually.
Ensures that elements are spaced appropriately, contributing to an organized presentation.
[[File:Code777.jpg |500px| center]]

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-04T02:52:47Z

Vdevire2: /* UI Enhancements and Features in Screenshots */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Implementation ==

The UI has been updated to match the rest of the Expertiza APP

=== Overall view ===

The enhanced feature in Expertiza is designed to simplify the process of assigning reviewers to project submissions, providing a clear, functional, and user-friendly interface. This improvement addresses the needs of administrators managing peer reviews, offering tools for efficient reviewer assignment, tracking progress, and maintaining transparency in the workflow.

[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

=== Review Status Tracking ===
Review Status Tracking

The interface displays the current status of reviews for each project, categorized as either:

Pending: Reviews that have not yet been completed or submitted.
Submitted: Reviews that are finalized and available for review by administrators.

It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

=== Reviewer Management ===
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
Administrators have the capability to:

Assign new reviewers to projects by entering their details directly into the system.
Manage existing assignments, including updating or removing reviewers as needed.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

=== Add Reviewer ===

Administrators can efficiently assign reviewers to submissions through a clear and user-friendly interface:

Add Reviewer Button: This feature simplifies the process of adding reviewers. Administrators can input the necessary user details and assign them to specific projects or topics.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Changes Made ==
* The Reviewer and IContributor interfaces represent individual reviewers and contributors, while the RowData interface combines a topic, its contributors, and assigned reviewers into a single cohesive data model.
[[File:Code111.jpg |500px| center]]

* This function, handleAddReviewer, adds a new reviewer to a specific topic in a table's data. It updates the table data by mapping through the existing rows, finding the row that matches the selectedTopic, and appending a new reviewer object with a "Pending" status to the reviewers array, then closes the modal afterward.
[[File:Code222.jpg |500px| center]]

* The handleUnsubmit function updates the review status of a specific reviewer to "Pending" for a given topic in the table data. It maps through the rows to find the matching topic, then updates the status of the reviewer with the specified reviewerName, ensuring other rows and reviewers remain unchanged.
[[File:Code333.jpg |500px| center]]

* The openModal function prepares data for displaying a modal by setting the selected topic and formatting contributor details into strings showing their name and username. It then opens the modal by updating the setModalOpen state to true. The closeModal function simply closes the modal and resets the reviewer name field.
[[File:Code444.jpg |500px| center]]

* Each topic includes contributor details (name and username) and reviewer information (name, username, and review status), showcasing a structured dataset for managing reviews and assignments.
[[File:Code555.jpg |500px| center]]

* This CSS code defines styles for various buttons and links, including an "add reviewer" button, "unsubmit" link, "submit" button, and "cancel" button. It specifies colors, hover effects (e.g., the "unsubmit" link changes to light green on hover), and layout properties such as width and margin to control their appearance and interactivity.
[[File:Code666.jpg |500px| center]]

* This CSS code styles a component for assigning reviewers, including a container (.assign-reviewer-container) and a table (.assign-reviewer-table). It defines properties like padding, borders, alignment, and background color to ensure the table is well-structured, readable, and visually distinct, with specific styling for table headers, cells, and spacing between elements.
[[File:Code777.jpg |500px| center]]

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-03T14:34:37Z

Vdevire2: /* Pull Request*/

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Enhancements and Features in Screenshots ==

The UI has been updated to match the rest of the Expertiza APP

* This feature from Expertiza showcases the interface for assigning reviewers to project submissions. It allows administrators to view contributors, track review statuses, and add or manage reviewers efficiently, streamlining the peer-review process.
[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

* Review status tracking in Expertiza, showing assigned reviewers and their progress (Pending or Submitted). It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

* Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

* This image showcases the 'Add reviewer' functionality in Expertiza, allowing admins to assign reviewers to specific topics by entering their user details. On clicking the 'Add reviewer', the changes are saved.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Changes Made ==
* The Reviewer and IContributor interfaces represent individual reviewers and contributors, while the RowData interface combines a topic, its contributors, and assigned reviewers into a single cohesive data model.
[[File:Code111.jpg |500px| center]]

* This function, handleAddReviewer, adds a new reviewer to a specific topic in a table's data. It updates the table data by mapping through the existing rows, finding the row that matches the selectedTopic, and appending a new reviewer object with a "Pending" status to the reviewers array, then closes the modal afterward.
[[File:Code222.jpg |500px| center]]

* The handleUnsubmit function updates the review status of a specific reviewer to "Pending" for a given topic in the table data. It maps through the rows to find the matching topic, then updates the status of the reviewer with the specified reviewerName, ensuring other rows and reviewers remain unchanged.
[[File:Code333.jpg |500px| center]]

* The openModal function prepares data for displaying a modal by setting the selected topic and formatting contributor details into strings showing their name and username. It then opens the modal by updating the setModalOpen state to true. The closeModal function simply closes the modal and resets the reviewer name field.
[[File:Code444.jpg |500px| center]]

* Each topic includes contributor details (name and username) and reviewer information (name, username, and review status), showcasing a structured dataset for managing reviews and assignments.
[[File:Code555.jpg |500px| center]]

* This CSS code defines styles for various buttons and links, including an "add reviewer" button, "unsubmit" link, "submit" button, and "cancel" button. It specifies colors, hover effects (e.g., the "unsubmit" link changes to light green on hover), and layout properties such as width and margin to control their appearance and interactivity.
[[File:Code666.jpg |500px| center]]

* This CSS code styles a component for assigning reviewers, including a container (.assign-reviewer-container) and a table (.assign-reviewer-table). It defines properties like padding, borders, alignment, and background color to ensure the table is well-structured, readable, and visually distinct, with specific styling for table headers, cells, and spacing between elements.
[[File:Code777.jpg |500px| center]]

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Pull Request ==
Check out the [https://github.com/expertiza/reimplementation-front-end/pull/75 pull request] for a detailed changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-03T04:03:01Z

Vdevire2: /* Test plan */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Enhancements and Features in Screenshots ==

The UI has been updated to match the rest of the Expertiza APP

* This feature from Expertiza showcases the interface for assigning reviewers to project submissions. It allows administrators to view contributors, track review statuses, and add or manage reviewers efficiently, streamlining the peer-review process.
[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

* Review status tracking in Expertiza, showing assigned reviewers and their progress (Pending or Submitted). It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

* Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

* This image showcases the 'Add reviewer' functionality in Expertiza, allowing admins to assign reviewers to specific topics by entering their user details. On clicking the 'Add reviewer', the changes are saved.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Changes Made ==
* The Reviewer and IContributor interfaces represent individual reviewers and contributors, while the RowData interface combines a topic, its contributors, and assigned reviewers into a single cohesive data model.
[[File:Code111.jpg |500px| center]]

* This function, handleAddReviewer, adds a new reviewer to a specific topic in a table's data. It updates the table data by mapping through the existing rows, finding the row that matches the selectedTopic, and appending a new reviewer object with a "Pending" status to the reviewers array, then closes the modal afterward.
[[File:Code222.jpg |500px| center]]

* The handleUnsubmit function updates the review status of a specific reviewer to "Pending" for a given topic in the table data. It maps through the rows to find the matching topic, then updates the status of the reviewer with the specified reviewerName, ensuring other rows and reviewers remain unchanged.
[[File:Code333.jpg |500px| center]]

* The openModal function prepares data for displaying a modal by setting the selected topic and formatting contributor details into strings showing their name and username. It then opens the modal by updating the setModalOpen state to true. The closeModal function simply closes the modal and resets the reviewer name field.
[[File:Code444.jpg |500px| center]]

* Each topic includes contributor details (name and username) and reviewer information (name, username, and review status), showcasing a structured dataset for managing reviews and assignments.
[[File:Code555.jpg |500px| center]]

* This CSS code defines styles for various buttons and links, including an "add reviewer" button, "unsubmit" link, "submit" button, and "cancel" button. It specifies colors, hover effects (e.g., the "unsubmit" link changes to light green on hover), and layout properties such as width and margin to control their appearance and interactivity.
[[File:Code666.jpg |500px| center]]

* This CSS code styles a component for assigning reviewers, including a container (.assign-reviewer-container) and a table (.assign-reviewer-table). It defines properties like padding, borders, alignment, and background color to ensure the table is well-structured, readable, and visually distinct, with specific styling for table headers, cells, and spacing between elements.
[[File:Code777.jpg |500px| center]]

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Demo Video ==
You can watch this [https://youtu.be/gnkIrNjF9cg demo video] for a detailed demonstration of the changes we made in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-03T04:00:39Z

Vdevire2: /* Code Changes Made */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Enhancements and Features in Screenshots ==

The UI has been updated to match the rest of the Expertiza APP

* This feature from Expertiza showcases the interface for assigning reviewers to project submissions. It allows administrators to view contributors, track review statuses, and add or manage reviewers efficiently, streamlining the peer-review process.
[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

* Review status tracking in Expertiza, showing assigned reviewers and their progress (Pending or Submitted). It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

* Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

* This image showcases the 'Add reviewer' functionality in Expertiza, allowing admins to assign reviewers to specific topics by entering their user details. On clicking the 'Add reviewer', the changes are saved.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Changes Made ==
* The Reviewer and IContributor interfaces represent individual reviewers and contributors, while the RowData interface combines a topic, its contributors, and assigned reviewers into a single cohesive data model.
[[File:Code111.jpg |500px| center]]

* This function, handleAddReviewer, adds a new reviewer to a specific topic in a table's data. It updates the table data by mapping through the existing rows, finding the row that matches the selectedTopic, and appending a new reviewer object with a "Pending" status to the reviewers array, then closes the modal afterward.
[[File:Code222.jpg |500px| center]]

* The handleUnsubmit function updates the review status of a specific reviewer to "Pending" for a given topic in the table data. It maps through the rows to find the matching topic, then updates the status of the reviewer with the specified reviewerName, ensuring other rows and reviewers remain unchanged.
[[File:Code333.jpg |500px| center]]

* The openModal function prepares data for displaying a modal by setting the selected topic and formatting contributor details into strings showing their name and username. It then opens the modal by updating the setModalOpen state to true. The closeModal function simply closes the modal and resets the reviewer name field.
[[File:Code444.jpg |500px| center]]

* Each topic includes contributor details (name and username) and reviewer information (name, username, and review status), showcasing a structured dataset for managing reviews and assignments.
[[File:Code555.jpg |500px| center]]

* This CSS code defines styles for various buttons and links, including an "add reviewer" button, "unsubmit" link, "submit" button, and "cancel" button. It specifies colors, hover effects (e.g., the "unsubmit" link changes to light green on hover), and layout properties such as width and margin to control their appearance and interactivity.
[[File:Code666.jpg |500px| center]]

* This CSS code styles a component for assigning reviewers, including a container (.assign-reviewer-container) and a table (.assign-reviewer-table). It defines properties like padding, borders, alignment, and background color to ensure the table is well-structured, readable, and visually distinct, with specific styling for table headers, cells, and spacing between elements.
[[File:Code777.jpg |500px| center]]

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-03T04:00:15Z

Vdevire2: /* Code Changes Made */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Enhancements and Features in Screenshots ==

The UI has been updated to match the rest of the Expertiza APP

* This feature from Expertiza showcases the interface for assigning reviewers to project submissions. It allows administrators to view contributors, track review statuses, and add or manage reviewers efficiently, streamlining the peer-review process.
[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

* Review status tracking in Expertiza, showing assigned reviewers and their progress (Pending or Submitted). It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

* Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

* This image showcases the 'Add reviewer' functionality in Expertiza, allowing admins to assign reviewers to specific topics by entering their user details. On clicking the 'Add reviewer', the changes are saved.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Changes Made ==
* The Reviewer and IContributor interfaces represent individual reviewers and contributors, while the RowData interface combines a topic, its contributors, and assigned reviewers into a single cohesive data model.
[[File:Code111.jpg |500px| center]]

* This function, handleAddReviewer, adds a new reviewer to a specific topic in a table's data. It updates the table data by mapping through the existing rows, finding the row that matches the selectedTopic, and appending a new reviewer object with a "Pending" status to the reviewers array, then closes the modal afterward.
[[File:Code222.jpg |500px| center]]

* The handleUnsubmit function updates the review status of a specific reviewer to "Pending" for a given topic in the table data. It maps through the rows to find the matching topic, then updates the status of the reviewer with the specified reviewerName, ensuring other rows and reviewers remain unchanged.
[[File:Code333.jpg |500px| center]]

* The openModal function prepares data for displaying a modal by setting the selected topic and formatting contributor details into strings showing their name and username. It then opens the modal by updating the setModalOpen state to true. The closeModal function simply closes the modal and resets the reviewer name field.
[[File:Code444.jpg |500px| center]]

* Each topic includes contributor details (name and username) and reviewer information (name, username, and review status), showcasing a structured dataset for managing reviews and assignments.
[[File:Code555.jpg |500px| center]]

* This CSS code defines styles for various buttons and links, including an "add reviewer" button, "unsubmit" link, "submit" button, and "cancel" button. It specifies colors, hover effects (e.g., the "unsubmit" link changes to light green on hover), and layout properties such as width and margin to control their appearance and interactivity.
[[File:Code666.jpg |500px| center]]

* This CSS code styles a component for assigning reviewers, including a container (.assign-reviewer-container) and a table (.assign-reviewer-table). It defines properties like padding, borders, alignment, and background color to ensure the table is well-structured, readable, and visually distinct, with specific styling for table headers, cells, and spacing between elements.
[[File:Code777.jpg |500px]]

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-03T03:58:18Z

Vdevire2: /* Code Changes Made */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Enhancements and Features in Screenshots ==

The UI has been updated to match the rest of the Expertiza APP

* This feature from Expertiza showcases the interface for assigning reviewers to project submissions. It allows administrators to view contributors, track review statuses, and add or manage reviewers efficiently, streamlining the peer-review process.
[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

* Review status tracking in Expertiza, showing assigned reviewers and their progress (Pending or Submitted). It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

* Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

* This image showcases the 'Add reviewer' functionality in Expertiza, allowing admins to assign reviewers to specific topics by entering their user details. On clicking the 'Add reviewer', the changes are saved.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Changes Made ==
* The Reviewer and IContributor interfaces represent individual reviewers and contributors, while the RowData interface combines a topic, its contributors, and assigned reviewers into a single cohesive data model.
[[File:Code111.jpg |500px]]

* This function, handleAddReviewer, adds a new reviewer to a specific topic in a table's data. It updates the table data by mapping through the existing rows, finding the row that matches the selectedTopic, and appending a new reviewer object with a "Pending" status to the reviewers array, then closes the modal afterward.
[[File:Code222.jpg |500px]]
UI looks similar to Expertiza with Pagination at bottom

* The handleUnsubmit function updates the review status of a specific reviewer to "Pending" for a given topic in the table data. It maps through the rows to find the matching topic, then updates the status of the reviewer with the specified reviewerName, ensuring other rows and reviewers remain unchanged.
[[File:Code333.jpg |500px]]

* The openModal function prepares data for displaying a modal by setting the selected topic and formatting contributor details into strings showing their name and username. It then opens the modal by updating the setModalOpen state to true. The closeModal function simply closes the modal and resets the reviewer name field.
[[File:Code444.jpg |500px]]

* Each topic includes contributor details (name and username) and reviewer information (name, username, and review status), showcasing a structured dataset for managing reviews and assignments.
[[File:Code555.jpg |500px]]

* This CSS code defines styles for various buttons and links, including an "add reviewer" button, "unsubmit" link, "submit" button, and "cancel" button. It specifies colors, hover effects (e.g., the "unsubmit" link changes to light green on hover), and layout properties such as width and margin to control their appearance and interactivity.
[[File:Code666.jpg |500px]]

* This CSS code styles a component for assigning reviewers, including a container (.assign-reviewer-container) and a table (.assign-reviewer-table). It defines properties like padding, borders, alignment, and background color to ensure the table is well-structured, readable, and visually distinct, with specific styling for table headers, cells, and spacing between elements.
[[File:Code777.jpg |500px]]
UI looks similar to Expertiza with Pagination at bottom

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-03T03:56:51Z

Vdevire2: /* Code Changes Made */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Enhancements and Features in Screenshots ==

The UI has been updated to match the rest of the Expertiza APP

* This feature from Expertiza showcases the interface for assigning reviewers to project submissions. It allows administrators to view contributors, track review statuses, and add or manage reviewers efficiently, streamlining the peer-review process.
[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

* Review status tracking in Expertiza, showing assigned reviewers and their progress (Pending or Submitted). It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

* Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

* This image showcases the 'Add reviewer' functionality in Expertiza, allowing admins to assign reviewers to specific topics by entering their user details. On clicking the 'Add reviewer', the changes are saved.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Changes Made ==
* The Reviewer and IContributor interfaces represent individual reviewers and contributors, while the RowData interface combines a topic, its contributors, and assigned reviewers into a single cohesive data model.
[[File:Code111.jpg |500px|left]]

* This function, handleAddReviewer, adds a new reviewer to a specific topic in a table's data. It updates the table data by mapping through the existing rows, finding the row that matches the selectedTopic, and appending a new reviewer object with a "Pending" status to the reviewers array, then closes the modal afterward.
[[File:Code222.jpg |500px|left]]
UI looks similar to Expertiza with Pagination at bottom

* The handleUnsubmit function updates the review status of a specific reviewer to "Pending" for a given topic in the table data. It maps through the rows to find the matching topic, then updates the status of the reviewer with the specified reviewerName, ensuring other rows and reviewers remain unchanged.
[[File:Code333.jpg |500px|left]]

* The openModal function prepares data for displaying a modal by setting the selected topic and formatting contributor details into strings showing their name and username. It then opens the modal by updating the setModalOpen state to true. The closeModal function simply closes the modal and resets the reviewer name field.
[[File:Code444.jpg |500px|left]]

* Each topic includes contributor details (name and username) and reviewer information (name, username, and review status), showcasing a structured dataset for managing reviews and assignments.
[[File:Code555.jpg |500px|left]]

* This CSS code defines styles for various buttons and links, including an "add reviewer" button, "unsubmit" link, "submit" button, and "cancel" button. It specifies colors, hover effects (e.g., the "unsubmit" link changes to light green on hover), and layout properties such as width and margin to control their appearance and interactivity.
[[File:Code666.jpg |500px|left]]

* This CSS code styles a component for assigning reviewers, including a container (.assign-reviewer-container) and a table (.assign-reviewer-table). It defines properties like padding, borders, alignment, and background color to ensure the table is well-structured, readable, and visually distinct, with specific styling for table headers, cells, and spacing between elements.
[[File:Code777.jpg |500px|left]]
UI looks similar to Expertiza with Pagination at bottom

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-02T22:02:53Z

Vdevire2: /* UI Enhancements and Features in Screenshots */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Enhancements and Features in Screenshots ==

The UI has been updated to match the rest of the Expertiza APP

* This feature from Expertiza showcases the interface for assigning reviewers to project submissions. It allows administrators to view contributors, track review statuses, and add or manage reviewers efficiently, streamlining the peer-review process.
[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]

* Review status tracking in Expertiza, showing assigned reviewers and their progress (Pending or Submitted). It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process. When hover over "Unsubmit" link, the color changes to green indicating that it is clickable and interactive.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]

* Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration. When hover over "Add reviewer" button, the color changes to blue.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]

* This image showcases the 'Add reviewer' functionality in Expertiza, allowing admins to assign reviewers to specific topics by entering their user details. On clicking the 'Add reviewer', the changes are saved.
[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]

== Code Changes Made ==
[[File:Code111.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code222.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code333.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code444.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code555.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code666.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code777.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-02T21:39:06Z

Vdevire2: /* UI Enhancements and Features in Screenshots */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Enhancements and Features in Screenshots ==

The UI has been updated to match the rest of the Expertiza APP
[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]
This feature from Expertiza showcases the interface for assigning reviewers to project submissions. It allows administrators to view contributors, track review statuses, and add or manage reviewers efficiently, streamlining the peer-review process.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |600px|center]]
Review status tracking in Expertiza, showing assigned reviewers and their progress (Pending or Submitted). It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |600px|center]]
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]
This image showcases the 'Add Reviewer' functionality in Expertiza, allowing admins to assign reviewers to specific topics by entering their user details. It simplifies the management of peer reviews, ensuring efficient collaboration.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 81576a3c.jpg |300px|center]]
The 'Add Reviewer' popup in Expertiza, enabling administrators to assign reviewers by inputting their login details. It simplifies the process of assigning tasks to ensure seamless collaboration.

=== Code Changes Made ===
[[File:Code111.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code222.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code333.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code444.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code555.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code666.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code777.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-02T16:35:36Z

Vdevire2: /* Code Changes Made */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Enhancements and Features in Screenshots ==

The UI has been updated to match the rest of the Expertiza APP
[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]
This feature from Expertiza showcases the interface for assigning reviewers to project submissions. It allows administrators to view contributors, track review statuses, and add or manage reviewers efficiently, streamlining the peer-review process.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |800px|center]]
Review status tracking in Expertiza, showing assigned reviewers and their progress (Pending or Submitted). It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |1000px|center]]
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]
This image showcases the 'Add Reviewer' functionality in Expertiza, allowing admins to assign reviewers to specific topics by entering their user details. It simplifies the management of peer reviews, ensuring efficient collaboration.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 81576a3c.jpg |300px|center]]
The 'Add Reviewer' popup in Expertiza, enabling administrators to assign reviewers by inputting their login details. It simplifies the process of assigning tasks to ensure seamless collaboration.

=== Code Changes Made ===
[[File:Code111.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code222.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code333.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code444.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code555.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code666.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

[[File:Code777.jpg |500px|center]]
UI looks similar to Expertiza with Pagination at bottom

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-02T16:34:08Z

Vdevire2: /* Code Changes Made */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Enhancements and Features in Screenshots ==

The UI has been updated to match the rest of the Expertiza APP
[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]
This feature from Expertiza showcases the interface for assigning reviewers to project submissions. It allows administrators to view contributors, track review statuses, and add or manage reviewers efficiently, streamlining the peer-review process.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |800px|center]]
Review status tracking in Expertiza, showing assigned reviewers and their progress (Pending or Submitted). It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |1000px|center]]
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]
This image showcases the 'Add Reviewer' functionality in Expertiza, allowing admins to assign reviewers to specific topics by entering their user details. It simplifies the management of peer reviews, ensuring efficient collaboration.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 81576a3c.jpg |300px|center]]
The 'Add Reviewer' popup in Expertiza, enabling administrators to assign reviewers by inputting their login details. It simplifies the process of assigning tasks to ensure seamless collaboration.

=== Code Changes Made ===
[[File:Code111.jpg |500px|center]]

[[File:Code222.jpg |300px|center]]

[[File:Code333.jpg |300px|center]]

[[File:Code444.jpg |300px|center]]

[[File:Code555.jpg |300px|center]]

[[File:Code666.jpg |300px|center]]

[[File:Code777.jpg |300px|center]]

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)

File:Code777.jpg

2024-12-02T16:33:52Z

Vdevire2:

File:Code666.jpg

2024-12-02T16:33:03Z

Vdevire2:

File:Code555.jpg

2024-12-02T16:32:50Z

Vdevire2:

File:Code444.jpg

2024-12-02T16:32:37Z

Vdevire2:

File:Code333.jpg

2024-12-02T16:32:25Z

Vdevire2:

File:Code222.jpg

2024-12-02T16:32:00Z

Vdevire2:

CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers

2024-12-02T16:29:39Z

Vdevire2: /* Code Changes Made */

== Introduction ==
Expertiza is an open-source learning management system developed with Ruby on Rails, designed to enhance interactive and collaborative learning. Unlike traditional LMS platforms, it prioritizes peer reviews and team-based assignments, enabling students to exchange detailed feedback within and across groups. This approach fosters critical thinking and reflective learning by encouraging engagement with diverse perspectives, allowing students to refine their work through constructive input. The platform also supports course and assignment management, giving instructors the flexibility to create real-world projects that go beyond typical assessments. Its grading tools, often featuring rubrics, ensure transparent evaluation while providing personalized feedback. As an open-source system, Expertiza is highly customizable, allowing institutions to tailor its features and integrate seamlessly with other tools. By promoting teamwork and peer interaction, Expertiza equips students with essential collaborative skills for professional environments, making it an indispensable tool in modern education.

== Problem Statement ==
=== Project Overview ===

The "Assign Reviewers" UI project is aimed at developing a user interface to assign reviewers to assignments within the Expertiza platform. The new UI will focus on presenting the reviewers and contributors in a structured table layout, with the ability to manage reviewer assignments (e.g., unsubmit, delete). This interface will help streamline the process of assigning reviewers, making it easier for instructors to manage review assignments for contributors.

== Functional Requirements ==

=== UI Layout ===
The table will consist of three main columns:
Topic Selected: Display the title of the assignment or topic.
Contributor: Show the name of the contributor who submitted the assignment.
Reviewed By: Display the list of assigned reviewers.
Action buttons for each reviewer will be displayed in the "Reviewed By" column. These will include:
Unsubmit: Allow the instructor to unassign a reviewer from a particular assignment.
Delete: Allow the instructor to remove a reviewer from the assignment entirely.

=== Exclusion of Meta Reviewer Options ===
The UI will exclude any options related to meta reviewers. This is to keep the focus on core reviewer functionalities.

=== Interactivity ===
The "Unsubmit" and "Delete" buttons will trigger actions, which will interact with the backend to update the assignment status.
Hover or clickable rows will show tooltips for better clarity on available actions.

=== Display Logic ===
Each assignment may have multiple reviewers, which will be displayed in the "Reviewed By" column.
If no reviewers are assigned, the UI will indicate that no reviewers are present.
The "Reviewed By" column should allow dynamic updates based on the changes made by the instructor.

=== Excluding Meta Reviewer ===
Meta reviewer options will be excluded from this UI to focus on the primary reviewer functions.

== Technical Design ==
=== Frontend (React & TypeScript) ===

=== Component Structure ===
Main Table Component:
This component will render the table structure, which includes all three columns: Topic Selected, Contributor, and Reviewed By.
Reviewer Row Component:
A row within the table for each reviewer, displaying the reviewer's name and action buttons (Unsubmit/Delete).
Action Buttons:
Each action button will trigger a specific function for managing reviewer assignments.

=== State Management ===

State management in this application uses React's state and Context API (or other suitable solutions) to efficiently handle and centralize data for each row representing assignments and reviewers. This setup enables consistent data sharing across components, reducing redundancy and simplifying data flow. API calls to the backend retrieve data on assignments and reviewers, ensuring the application remains up-to-date with real-time information. By managing state in a centralized way, it allows for dynamic interactions, streamlined updates, and an overall smoother user experience across the interface.

=== Styling ===
For styling, use CSS or a CSS-in-JS solution like styled-components to create a visually appealing and functional table layout, along with styled action buttons. Ensure the design is responsive, adapting seamlessly to both desktop and mobile screens, to provide an optimal user experience across devices.

== Design Principles ==
=== Design Principles for Assign Reviewers UI ===
'''1. Single Responsibility Principle (SRP)'''
Each React component in the UI will have a clearly defined responsibility, focusing on a single aspect of functionality or presentation.

Main Table Component: Responsible for rendering the table layout with columns for "Topic Selected," "Contributor," and "Reviewed By."
Reviewer Row Component: Focused on displaying reviewer details and managing actions like "Unsubmit" and "Delete."
Action Buttons Component: Encapsulates specific functionalities for individual actions (e.g., handling clicks for "Unsubmit" or "Delete").
By adhering to SRP, the components will be easier to understand, maintain, and test.

'''2. Open/Closed Principle (OCP)'''
The UI and its components will be designed to be open for extension but closed for modification.

The AssignmentsTable component can accommodate additional columns or features (e.g., new reviewer actions) by extending the functionality without altering its core logic.
New action buttons or features can be added as independent components, seamlessly integrating into the existing design without modifying other parts of the codebase.
This principle ensures future enhancements do not disrupt the stability of the current implementation.

'''3. DRY Principle (Don’t Repeat Yourself)'''
Code duplication will be minimized by reusing components and centralizing logic.

Reusable Components: Components like ActionButton and ReviewerRow will be created to handle repetitive UI elements and logic.
Shared State Management: React’s Context API or a similar state management library will centralize shared data, reducing redundant state handling across components.
Utility Functions: Common logic for tasks like API interactions or data formatting will be encapsulated in reusable utility functions.
By adhering to the DRY principle, the codebase will remain clean, consistent, and easier to maintain.

'''4. Separation of Concerns (SoC)'''
The project will separate concerns across different layers to maintain a clear structure:

Frontend Components: Handle the presentation and user interaction logic.
State Management: Manages the application state centrally to keep components stateless wherever possible.
Backend Interactions: Isolate API call logic into service functions or hooks for better reusability and testability.
This separation ensures modularity, making the system easier to debug and extend.

'''5. Accessibility and Responsiveness'''
The UI will prioritize accessibility and adapt to various devices.

Ensure components use semantic HTML elements for better screen reader support.
Implement responsive design principles to provide an optimal experience on both desktop and mobile devices.
Use ARIA roles for enhanced accessibility of dynamic components like buttons and tables.

'''6. Consistency and Scalability'''
A consistent design system will be maintained for styling and interactions:

Use CSS modules, styled-components, or a design system (e.g., Material-UI) for a unified appearance.
Keep naming conventions for CSS classes and component props standardized for better readability.
This consistency will make it easier to scale the project with additional features or contributors.

== User Stories ==

As an instructor, I want to see a list of contributors and the reviewers assigned to them, so that I can manage the assignment of reviewers.
As an instructor, I want to be able to unsubmit a reviewer, so that they are no longer responsible for reviewing a specific assignment.
As an instructor, I want to delete a reviewer, so that I can remove them completely from the review process for a particular assignment.
As a contributor, I want to see the status of my assignment and who is reviewing it.

=== Use Case Diagram ===

The central user interacts with various use cases, which are represented by blue ovals surrounding the user. These use cases include:

* '''View Topic Selected:''' Allows the user to view the chosen topic for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:''' Lets the user view assigned reviewers and their review status.
* '''Add Reviewers for Each Topic:''' Provides functionality to add reviewers for specific topics.
* '''Delete Reviewers for Each Topic:''' Allows deletion of assigned reviewers per topic.
* '''Unsubmit Review Status:''' Enables the user to unsubmit a review status if needed.

 

[[File:usecase(1).png|700px|center]]

 

== Class Diagram ==

The Class Diagram for the frontend UI of the "Assign Reviewers" functionality defines the key React components and their responsibilities. At the top level, the AssignReviewersPage component manages the overall state, holding data for both the assignments and the reviewers. It passes this data down to child components, including the AssignmentsTable, which renders the assignments as rows, each represented by a ReviewerRow component. Each reviewer row displays the reviewer's details and includes action buttons for "Unsubmit" and "Delete." The ActionButton component, which is embedded within each row, handles the user interaction by triggering the appropriate method (either unsubmit or delete). The methods within ReviewerRow, such as handleUnsubmitClick and handleDeleteClick, interact with the parent component’s state to update the reviewer status or remove a reviewer. These components work together in a modular way, ensuring that the state is managed effectively while keeping the UI interactive and dynamic. The class diagram represents how data flows from the parent to the child components and how user actions result in state updates, which are reflected in the re-rendered UI.

 

[[File:ClassDiagramm.png |700px|center]]

 

== Expected view of table ==

The table is divided into columns labeled "Topic Selected," "Contributor," and "Reviewed by." Each row displays details such as the topic, team names, contributor names, and review statuses. Buttons like "Add Reviewer," "Delete Reviewer," "Unsubmit," and "Delete Review" allow users to manage reviewers and their submissions for the assignment. This layout facilitates easy organization and control of participants' review statuses.

 

[[File:wikishot1new.png|700px|center]]

 

The UI below shows an "Add Reviewer" interface in the Expertiza platform, where a user can assign reviewers to a specific project. The interface displays the contributor's team name (e.g., "E1234 team") and the assignment title ("Final project (and design doc)"). Below, there is an input field labeled "Enter a user login:" where the user can type in the login ID of the reviewer they wish to add. A button labeled "Add Reviewer" is provided to submit the entry and assign the reviewer to the project.

 

[[File:wikishot2.png|700px|center]]

 
== UI Enhancements and Features in Screenshots ==

The UI has been updated to match the rest of the Expertiza APP
[[File:WhatsApp Image 2024-12-01 at 21.17.18 ea3e38d1.jpg |1000px|center]]
This feature from Expertiza showcases the interface for assigning reviewers to project submissions. It allows administrators to view contributors, track review statuses, and add or manage reviewers efficiently, streamlining the peer-review process.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 3470491a.jpg |800px|center]]
Review status tracking in Expertiza, showing assigned reviewers and their progress (Pending or Submitted). It also includes an option to unsubmit reviews, ensuring flexibility and transparency in the peer-review process.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 b6f8196b.jpg |1000px|center]]
Admins can track review statuses and assign new reviewers. It provides a clear interface to manage peer reviews effectively, ensuring smooth collaboration.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 db568918.jpg |1000px|center]]
This image showcases the 'Add Reviewer' functionality in Expertiza, allowing admins to assign reviewers to specific topics by entering their user details. It simplifies the management of peer reviews, ensuring efficient collaboration.

[[File:WhatsApp Image 2024-12-01 at 21.17.19 81576a3c.jpg |300px|center]]
The 'Add Reviewer' popup in Expertiza, enabling administrators to assign reviewers by inputting their login details. It simplifies the process of assigning tasks to ensure seamless collaboration.

=== Code Changes Made ===
[[File:Code111.jpg |300px|center]]

==Test plan==

'''Manual Testing'''

Manual testing ensures the functionality and usability of the "Participants" and "Add Reviewer" pages in the Expertiza platform. It focuses on verifying seamless navigation between pages, accurate rendering of the table layout, and proper functioning of action buttons like "Add Reviewer," "Delete Reviewer," and "Unsubmit." Validation checks will handle empty, invalid, or duplicate inputs effectively, with clear error messages. Testing also ensures that actions like adding, deleting, or updating reviewers dynamically reflect in the interface. Additionally, the plan emphasizes responsiveness across devices and browsers, data consistency, and smooth navigation, ensuring a robust, user-friendly experience for managing reviewers.

'''Automatic Testing'''

Initially, testing was excluded from the project’s scope, as the focus was on frontend development. However, ensuring the functionality and user experience of the "Participants" interface is critical. Manual testing procedures will be employed to validate the proper operation of the UI components shown in the screenshot. These procedures include:
*Verifying that the "Add Reviewer" and "Delete Reviewer" buttons function correctly, dynamically updating the interface without errors.
*Testing the "Unsubmit" button to ensure it appropriately changes the review status in real-time.
*Confirming that all table columns—"Topic Selected," "Contributor," and "Reviewed By"—render accurate and consistent data for each assignment.
*Validating that any changes made to reviewers (adding, deleting, or unassigning) are reflected correctly in the UI.

== Conclusion ==

In conclusion, this design document provides a comprehensive plan for developing an improved UI for assigning reviewers in Expertiza. By leveraging React and TypeScript for the frontend, the solution aims to deliver a smooth and intuitive experience, enabling instructors to manage reviewer assignments efficiently. The use of modern technologies ensures high performance, scalability, and maintainable code. This approach also prioritizes data integrity and security, safeguarding the accuracy of assignment data while fostering a user-centric, responsive design that enhances usability across various devices.

== Project Mentor ==

'''Anvitha Reddy Gutha''' (agutha@ncsu.edu)

== Team Members ==

* '''Vishal Reddy Devireddy''' (unityid: vdevire2, github: vishalreddy2323)
* '''Madhumitha Aravelli''' (unityid: maravel, github: madhumithaaravelli)
* '''Mona Sree Muppala''' (unityid: mmuppal, github: Monasree)