Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2025 - E2521 UI for View submissions/assign grades (except heatgrid)

2025-04-23T01:25:55Z

Pnkulka2: /* Screenshots */

== Introduction ==
=== Project Overview ===
This project aims to enhance the grading interface in Expertiza by implementing two key pages:

'''1. View Submissions Page:''' Displays team submissions with resource links and history.

'''2. Assign Grades Page:''' Enables instructors to assign grades and provide comments, integrating peer review data.

The redesigned interface will simplify workflows for instructors and TAs by incorporating real-time API integration, responsive design, and a clear visual hierarchy. The goal is to reduce clutter, improve accessibility, and ensure seamless functionality on all devices.

== Design Goals ==
To ensure a user-friendly, efficient, and maintainable interface, the following design principles are adopted:

* '''Clarity:''' Information should be presented in an easily digestible format. This helps instructors quickly locate relevant data without being overwhelmed by unnecessary details.
* '''Accessibility:''' The interface must comply with WCAG 2.1 standards to ensure usability for all users, including those with disabilities. Features like ARIA roles, keyboard navigation, and proper contrast ratios will be implemented.
* '''Modularity:''' By designing reusable React components (e.g., tables, forms), we adhere to the DRY principle, reducing redundancy and simplifying future updates.
* '''Real-Time Synchronization:''' Instant feedback through API integration ensures that users always work with the latest data. This is critical for grading workflows where delays can cause confusion.
* '''Error Resilience:''' Robust error handling ensures that users receive clear notifications when something goes wrong (e.g., failed API calls or invalid inputs), improving trust in the system.

=== Why These Principles? ===

'''1. Clarity:''' Instructors often deal with large datasets (e.g., multiple teams and submissions). A cluttered interface can slow down their workflow. By focusing on clarity, we aim to streamline their experience and reduce cognitive load.

'''2. Accessibility:''' Accessibility ensures inclusivity. Meeting WCAG standards makes the system usable for everyone, including those relying on assistive technologies like screen readers or keyboard navigation.

'''3. Modularity:''' Modular components reduce development time for future features (e.g., heatgrid integration) and make debugging easier by isolating functionality into smaller units.

'''4. Real-Time Synchronization:''' Grading workflows require up-to-date information to avoid errors (e.g., grading based on outdated peer reviews). Real-time sync ensures data accuracy.

'''5. Error Resilience:''' Instructors need immediate feedback when something goes wrong (e.g., submitting incomplete grades). Clear error messages prevent frustration and guide users toward resolution.

== Current UI Limitations ==
[[File:UI-1.png|900px|center]]

[[File:UI-2.png|900px|center]]
- The current layout is cluttered with overlapping action links.

- No visual distinction between graded and ungraded submissions.

- Missing review indicators are not prominent.

- Tables overflow horizontally on smaller screens.

- Error handling is inconsistent or absent.

== Proposed Implementation ==

=== 1. Optimized View Submissions Table ===
The revamped "View Submissions" table serves as a central hub for instructors to access and evaluate team performance efficiently. It is designed to be responsive, informative, and action-oriented, and is fully integrated with backend APIs to ensure data is always current.

'''Key Features:'''

'''Responsive Design:''' Adapts to mobile, tablet, and desktop screens. Columns collapse intelligently to ensure readability.

'''Team Overview:''' Each row lists the team name, associated members, and their submission topic, all fetched dynamically from the backend.

'''Direct Action Links:''' Provides context-aware links such as "Assign Grade" and "View History" within the table.

'''Visual Feedback:''' Highlights missing or incomplete submissions, allowing instructors to take quick action.

'''Integrated Accessibility:''' Table supports screen readers and keyboard navigation out of the box.

'''Performance Optimized:''' Efficient rendering through virtual scrolling and memoization for large datasets.

'''Backend Integration:''' Data is retrieved via RESTful API endpoints, enabling real-time synchronization with the Expertiza database.

=== 2. Grade Assignment Form ===
The "Assign Grades" page will allow instructors to assign grades and provide comments while integrating peer review data.

Key Features:

- Color-coded alerts for missing reviews.

- Auto-save draft functionality to prevent accidental data loss.

- Rubric-based score suggestions for consistent grading.

=== 3. Error Handling System ===

Error handling is essential to ensure a seamless user experience and system reliability. The error-handling system will address three key areas: '''user input validation''', '''API communication errors''', and '''unexpected system-level failures'''.

'''User Input Validation:'''

- Validates user inputs on the client side to prevent invalid data submissions.

- Ensures required fields (e.g., grades, comments) are completed before submission.

- Provides immediate feedback through visual indicators such as error messages or field highlights.

- Prevents submission until all fields meet validation criteria.

'''API Communication Errors:'''

- Handles network issues, server downtime, or incorrect API responses gracefully.

- Displays contextual error messages (e.g., "Failed to fetch submissions. Please try again later.") to keep users informed.

- Implements retry mechanisms with exponential backoff for transient errors.

- Logs errors for debugging without exposing sensitive information.

'''System-Level Failures:'''

- Catches unexpected rendering errors using error boundaries at the React component level.

- Displays fallback UI with user-friendly messages like "Something went wrong. Please refresh the page."

- Provides options for users to report issues directly to the support team.

=== Key Features ===

* '''Error Classification:''' Errors are categorized into validation, network, and server-side errors for targeted handling.
* '''Error Recovery:''' Users can retry failed actions (e.g., reloading data or resubmitting grades).
* '''User Notifications:''' Immediate feedback is provided via toast messages or modals with actionable suggestions.
* '''Logging and Monitoring:''' Errors are logged for developers to analyze and proactively fix issues.

== Implementation ==

The frontend implementation focuses on creating a modular, responsive, and accessible interface that integrates seamlessly with backend APIs. It adheres to best practices like separation of concerns, reusability, and responsiveness.

'''State Management:'''

- A centralized state management solution will be used to manage data such as team submissions, grading drafts, and API responses.

- This ensures efficient data sharing across components without unnecessary re-renders.

'''Dynamic Table Rendering:'''

- The "View Submissions" page will feature a responsive table layout that adapts to different screen sizes.

- Columns with lower priority (e.g., team member names) will collapse on smaller screens for better usability.

- Virtual scrolling will be implemented for large datasets to enhance performance.

'''Form Handling on Assign Grades Page:'''

- Includes input fields for grades and comments with real-time validation to ensure data integrity.

- Highlights missing peer reviews visually (e.g., using red icons or badges) so instructors can address them before submitting grades.

'''Responsive Design:'''

- Ensures the interface adapts to various screen sizes using CSS media queries and responsive layouts.

- Implements touch-friendly controls (e.g., larger buttons) for mobile users.

'''Error Handling Integration:'''

- Displays error messages prominently on the UI (e.g., banners or modals) for failed API calls.

- Uses fallback UI for unexpected rendering errors.

'''Reusable Components:'''

- Modular components like tables, forms, and buttons ensure consistency across pages and simplify future maintenance.

- Components follow the Single Responsibility Principle for better testability and scalability.

'''Accessibility Features:'''

- ARIA roles and attributes are added to components for enhanced screen reader support.

- Keyboard navigation is supported for all interactive elements.

- Color contrast ratios meet WCAG standards for readability.

== 1. View Submissions Page ==

=== Objective ===
The View Submissions page in Expertiza provides instructors and TAs with a streamlined, responsive interface to evaluate team submissions. This modernized interface includes full backend integration, dynamic UI rendering, accessibility support, and robust error handling.

=== Key Features ===

* '''Fully Integrated with Backend:''' All team data is fetched dynamically using RESTful API, developed required backend for the task.
* '''Responsive UI:''' Layout adapts seamlessly across mobile, tablet, and desktop.
* '''Actionable Buttons:''' Each row includes direct links for "Assign Grade" and "View History".
* '''Accessibility Features:''' ARIA tags, keyboard navigation, and screen reader support.
* '''Optimized Performance:''' Virtual scrolling and memoization ensure smooth rendering.
* '''Real-Time Synchronization:''' Live data synced with Expertiza backend.

=== Data Structure ===
<syntaxhighlight lang=\"typescript\">
interface ITeamSubmission {
id: number;
teamName: string;
teamMembers: { name: string; id: number }[];
historyLink: string;
topic?: string;
}
</syntaxhighlight>

=== Frontend Component ===

'''Component:''' <code>ViewSubmissions.tsx</code>

<syntaxhighlight lang="typescript">
import React, { useMemo } from 'react';
import { createColumnHelper } from "@tanstack/react-table";
import Table from "components/Table/Table";
import { useLoaderData } from 'react-router-dom';
import { ITeamRow, TeamSubmission } from './AssignmentUtil';

// Column helper to define typed table columns
const columnHelper = createColumnHelper<ITeamRow>();

const ViewSubmissions: React.FC = () => {
// Fetch data loaded from route loader (assignment teams)
const assignment = useLoaderData() as TeamSubmission[];

// Transform the backend response to a table-friendly structure
const submissions = useMemo<ITeamRow[]>(() =>
assignment.map((team) => ({
id: team.id,
teamName: team.name,
teamMembers: team.members,
historyLink: `/history/${team.team_id}`,
}))
, [assignment]);

// Define the columns used in the table
const columns = useMemo(() => [
columnHelper.accessor('teamName', {
header: 'Team Name',
cell: info => (
<div style={{ color: 'brown', fontWeight: 'bold' }}>
{info.getValue()}
</div>
),
}),
columnHelper.accessor('teamMembers', {
header: 'Team Member(s)',
cell: info => (
<div>
{info.getValue().map((member) => (
<div key={member.id}>
<a href={`/students/${member.id}`} style={{ color: '#b44' }}>
{member.name}
</a>
</div>
))}
</div>
),
}),
columnHelper.display({
id: 'links',
header: 'Links',
cell: ({ row }) => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<a
href={`/assign_grade/${row.original.id}`}
style={{ color: '#b44', marginBottom: '4px' }}
>
Assign Grade
</a>
<a
href={row.original.historyLink}
style={{ color: '#b44' }}
>
History
</a>
</div>
),
}),
], []);

return (
<div className="mt-4">
<h1 className="text-center">
View Submissions - {assignment[0]?.topic || 'Assignment'}
</h1>

<hr />

{/* Render dynamic table of submissions */}
<Table
data={submissions}
columns={columns}
columnVisibility={{
id: false, // Hide the 'id' column from UI
}}
/>
</div>
);
};

export default ViewSubmissions;
</syntaxhighlight>

* Fetches data with <code>loadAssignmentTeams()</code> via the route's loader
<syntaxhighlight lang="typescript">
// Middleware to fetch teams for assignment
export async function loadAssignmentTeams({ params }: {id:string}) {
let teamsData = [];

if (params.id) {
const response = await axiosClient.get(`/assignments/${params.id}/teams`);
teamsData = response.data;
}

return teamsData;
}
</syntaxhighlight>

* Uses <code>@tanstack/react-table</code> with <code>createColumnHelper</code> for table config
* Displays columns: Team Name, Members, Assign Grade, and History
* Bootstrap-styled; includes keyboard and screen reader accessibility

=== Backend Controller Code ===
<syntaxhighlight lang="ruby">
def teams
assignment = Assignment.find_by(id: params[:assignment_id])

if assignment.nil?
render json: { error: "Assignment not found" }, status: :not_found
return
end

submissions = if assignment.has_teams?
assignment.teams.includes(:teams_users => :user).map do |team|
signed_up_team = team.signed_up_teams.first
topic = signed_up_team&.sign_up_topic&.topic_name

{
id: team.id,
name: team.name,
team_id: team.id,
topic: topic,
members: team.teams_users.map { |tu| { id: tu.user.id, name: tu.user.name } }
}
end
else
assignment.participants.includes(:user).map do |participant|
{
id: participant.id,
name: participant.user.name,
team_id: nil,
topic: nil,
members: [{ id: participant.user.id, name: participant.user.name }]
}
end
end

render json: submissions, status: :ok
end
</syntaxhighlight>

=== API Documentation ===
* '''Endpoint:''' <code>GET /api/v1/assignments/:assignment_id/teams</code>
* '''Returns:''' Array of team info, members, and topic
* '''Swagger Docs:''' [http://152.7.177.242:3002/api-docs/index.html Swagger UI]

=== Sample JSON Response ===
<syntaxhighlight lang="json">
[
{
"id": 9,
"name": "Texas penguins",
"team_id": 9,
"topic": "Progressive fresh-thinking middleware",
"members": [
{ "id": 20, "name": "erlinda.grimes" },
{ "id": 21, "name": "lawanda.wilkinson" }
]
}
]
</syntaxhighlight>

=== Seeding Changes ===

To test the View Submissions feature thoroughly, we updated `db/seeds.rb` to include realistic assignments, topics, teams, and student-user mappings.

<syntaxhighlight lang="ruby">
# SignUpTopics
signup_topics = assignments.flat_map do |assignment|
5.times.map do
SignUpTopic.create!(
topic_name: Faker::Company.catch_phrase,
assignment_id: assignment.id,
max_choosers: 2,
category: "Default",
topic_identifier: Faker::Alphanumeric.alpha(number: 8).upcase,
description: Faker::Lorem.sentence
)
end
end

# SignedUpTeams
teams.each_with_index do |team, idx|
SignedUpTeam.create!(
sign_up_topic_id: signup_topics[idx % signup_topics.length].id,
team_id: team.id,
is_waitlisted: false,
preference_priority_number: 1
)
end

# Participants
students.each_with_index do |student, idx|
Participant.create!(
user_id: student.id,
assignment_id: assignments[idx % assignments.length].id,
team_id: teams[idx % teams.length].id
)
end
</syntaxhighlight>

* Ensures every team has students, a valid assignment, and a topic
* Prepares data for consistent API response
* Essential for local testing and API verification

This implementation was inspired by prior work in the Expertiza backend [https://github.com/expertiza/reimplementation-back-end/pull/173 (PR #173)], and extended in our custom implementation documented here: [https://github.com/expertiza/reimplementation-back-end/pull/190 (PR #190)].

=== UI Previews ===
Visual confirmation of the working interface with accessible design, action buttons, and responsive layout.

==== View Assignments Page ====

'''1. Desktop View'''
[[File:ass-1-ui.png|800px|center]]

'''2. Mobile View'''
[[File:ass-1-ui-2.png|400px|center]]

'''3. Network Request'''
[[File:ass-1-net-1.png|800px|center]]

=== View Submissions Page ===

'''1. Desktop View'''
[[File:ass-2-ui.png|800px|center]]

'''2. Mobile View'''
[[File:ass-2-ui-2.png|400px|center]]

'''3. Network Request'''
[[File:ass-2-net-1.png|800px|center]]

== 2. Assign Grade Page ==

=== Objective ===
The Assign Grade page enables instructors and TAs to efficiently assess a team’s performance by reviewing peer feedback, submission details, and finalizing grades. It offers clarity, validation, and visual cues to streamline the grading workflow and ensure completeness of required inputs.

=== Key Features ===

'''Team & Submission Summary:'''
Displays assignment title, selected team name, associated topic, and team members with profile links. A button placeholder allows viewing the submitted work.

'''Peer Feedback Tables (HeatGrid):'''
Utilizes a reusable ReviewTable component to render two structured tables:

Author Feedback Reviews

Teammate Reviews

Each review entry includes:

Reviewer ID

Comments

Score (out of 5)

Date of review
Tables are dynamically populated via convertReviewDataToHeatMap() from the loaded data.

'''Grade Submission Form:'''
A form capturing:

Grade (text input)

Comment (textarea)

Late Penalty (text input)
The form includes validation: grade and comment are mandatory. Alerts provide visual feedback on successful save or missing inputs.

'''Form Submission Handling:'''
Upon submission:

Inputs are validated

State is updated to show success/error

Data is logged to console (pending backend connection)

'''Backend Integration (Planned):'''
All dynamic data (assignment, reviews) is currently fetched via route loader. Integration steps include:

Fetching Data: Populate author and teammate reviews using API endpoints

Saving Grades: Send POST/PUT requests to submit final grades, comments, and penalties

Missing Reviews: Highlight when peer review data is unavailable

=== UI Structure ===

'''1. Page Header'''

Assignment title

Team name and topic

Team members with links to profiles

'''2. Review Section'''

Rendered via reusable <ReviewTable /> component

Empty state notices for missing reviews

'''3. Grade Form'''

Inputs: Grade, Comment, Late Penalty

Success/error message feedback

Validation on submit

=== Frontend Component ===
'''Component:''' <code>AssignGrade.tsx</code>

<syntaxhighlight lang="typescript">
import { useLocation, useLoaderData } from 'react-router-dom';
import { useState } from 'react';
import ReviewTable from '../../components/HeatGrid/ReviewTable'; // HeatGrid component for displaying reviews in tabular format
import { convertReviewDataToHeatMap, LoaderOutput } from './AssignmentUtil';

const AssignGrade = () => {
// Accessing navigation state passed from the previous route (team name, topic, team members)
const location = useLocation();
console.log("Location state:", location.state);

// Getting the assignment and review data from the route loader
const { assignment, reviews } = useLoaderData() as LoaderOutput;

// State variables to manage form data and UI state
const [grade, setGrade] = useState('');
const [comment, setComment] = useState('');
const [latePenalty, setLatePenalty] = useState('');
const [showSuccess, setShowSuccess] = useState(false);
const [error, setError] = useState('');

// Converting raw review data into a format suitable for HeatGrid (peer reviews)
const authorReviewes = convertReviewDataToHeatMap(reviews.author_feedback_reviews);
// Converting teammate reviews similarly
const teamReviews = convertReviewDataToHeatMap(reviews.teammate_reviews);

// Handle submission of grade and comment
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();

// Validate required fields
if (!grade.trim() || !comment.trim()) {
setError('Both grade and comment are required');
return;
}

// Reset error and show success message
setError('');
setShowSuccess(true);

// Logging submitted data (in production this would be replaced with an API call)
console.log('Grade submitted:', grade, 'Comment:', comment, 'Late Penalty:', latePenalty);
};

return (
<div style={{
maxWidth: '1000px',
margin: '2rem auto',
padding: '2rem',
backgroundColor: '#fff',
borderRadius: '10px',
boxShadow: '0 4px 10px rgba(0,0,0,0.1)'
}}>
{/* Success message after grade is submitted */}
{showSuccess && (
<div style={{ backgroundColor: '#d1fae5', padding: '1rem', marginBottom: '1rem', border: '1px solid #10b981', color: '#065f46' }}>
Grade and comment saved!
</div>
)}

{/* Assignment title */}
<h1 style={{ fontSize: '1.8rem', fontWeight: 'bold' }}>
Summary Report for Assignment: {assignment.name}
</h1>

{/* Team and topic details from navigation state */}
<div style={{ margin: '1rem 0' }}>
<strong>Team:</strong> {location.state?.teamName || 'Unknown Team'}
</div>
<div style={{ margin: '1rem 0' }}>
<strong>Topic:</strong> {location.state?.topicName || 'Unknown Topic'}
</div>

{/* Placeholder button for viewing the submission */}
<button style={{ padding: '0.5rem 1rem', backgroundColor: '#eee', border: '1px solid #ccc', marginBottom: '1rem' }}>
Show Submission
</button>

{/* Peer review section */}
<h3 style={{ margin: '1rem 0', textAlign: 'left' }}>
Peer Review
</h3>

{authorReviewes.length !== 0 ? (
<ReviewTable reviews={authorReviewes} />
) : (
<div style={{ backgroundColor: '#fffbcc', padding: '1rem', marginBottom: '1rem' }}>
<strong>Note:</strong> No data provided for peer reviews table.
</div>
)}

{/* Displaying list of teammates with profile links */}
<div style={{ margin: '1rem 0', paddingLeft: '1rem' }}>
<strong>Teammates: </strong>
<span style={{ marginTop: '0.5rem', fontSize: '1rem' }}>
{location.state?.teamMembers?.map((member: { id: number; name: string }, index: number) => (
<span key={member.id} style={{ marginRight: '0.5rem' }}>
<a href={`/students/${member.id}`} style={{ color: '#a67c52', textDecoration: 'none' }}>
{member.name}
</a>
{index < location.state.teamMembers.length - 1 ? ',' : ''}
</span>
))}
</span>
</div>

{/* Teammate review section */}
{teamReviews.length !== 0 && (
<h3 style={{ margin: '1rem 0', textAlign: 'left' }}>
Teammate Review
</h3>
)}

{teamReviews.length !== 0 ? (
<ReviewTable reviews={teamReviews} />
) : (
<div style={{ backgroundColor: '#fffbcc', padding: '1rem', marginBottom: '1rem' }}>
<strong>Note:</strong> No data provided for teammate reviews table.
</div>
)}

{/* Grade and comment input form */}
<h3>Grade and Comment for Submission</h3>
{error && <div style={{ color: 'red', marginBottom: '1rem' }}>{error}</div>}

<form onSubmit={handleSubmit}>
{/* Grade input */}
<label>Grade:</label>
<input
type="text"
value={grade}
onChange={e => setGrade(e.target.value)}
style={{ width: '100%', padding: '0.5rem', marginBottom: '1rem' }}
/>

{/* Comment textarea */}
<label>Comment:</label>
<textarea
value={comment}
onChange={e => setComment(e.target.value)}
rows={4}
style={{ width: '100%', padding: '0.5rem' }}
/>

{/* Late penalty input */}
<label>Late Penalty:</label>
<input
type="text"
value={latePenalty}
onChange={e => setLatePenalty(e.target.value)}
style={{ width: '100%', padding: '0.5rem', marginBottom: '1rem' }}
/>

<button type="submit" style={{ marginTop: '1rem', padding: '0.5rem 1rem' }}>
Save
</button>
</form>
</div>
);
};

export default AssignGrade;

</syntaxhighlight>

'''Tech Stack:'''
React (TypeScript), React Router, HeatGrid-based ReviewTable, Inline CSS

'''Visual Feedback:'''

Light green alert for successful submission

Yellow info boxes for missing peer review data

Red error text for form validation

=== Screenshots ===

'''AssignGrade View:'''
[[File:AssignGrades1.png|800px|center]]
[[File:AssignGrades2.png|800px|center]]
[[File:AssignGrades3.png|800px|center]]

'''Validation Alert:'''
[[File:AssignGrade3.png|800px|center]]

'''Success Message:'''
[[File:AssignGrade4.png|800px|center]]

== User Stories ==

'''1. As an instructor, I want to see submission status at a glance so that I can quickly assess which teams need grading.'''

- Solution: The "View Submissions" page will display submission statuses using color-coded badges (e.g., green for graded, yellow for pending).

- Functionality: Badges dynamically update based on real-time API data & A filter option allows instructors to view only ungraded submissions.

'''2. As a TA, I need to identify missing reviews before assigning grades so that I can ensure all reviews are completed.'''

- Solution: Missing reviews are highlighted visually on the "Assign Grades" page using red icons or warning messages.

- Functionality: A summary section shows the number of missing reviews per team & Incomplete submissions are flagged automatically during form validation.

'''3. As an admin, I require audit trails for grade changes so that I can track modifications made by instructors or TAs.'''

- Solution: An audit log system records every grade change along with timestamps and user details.

- Functionality: Logs include before/after values of grades and reasons for changes (if provided) & Audit logs are accessible via an admin-only interface for review.

'''4. As a mobile user, I need touch-friendly controls so that I can grade submissions easily on my tablet or phone.'''

- Solution: The interface includes larger buttons, touch-friendly dropdowns, and swipe gestures where applicable.

- Functionality: Buttons meet minimum size requirements (48x48px) & Interactive elements are optimized for touch input without requiring precision clicks.

'''5. As an instructor, I want error notifications when something goes wrong so that I can take corrective action without delays.'''

- Solution: A notification system displays errors as toast messages or modals with actionable suggestions (e.g., "Retry" or "Contact Support").

- Functionality: Notifications appear immediately after an error occurs & Detailed error logs are available in case further troubleshooting is needed.

== Use Case Diagram ==
* Actor: Student
** The student initiates the interaction with the system by clicking on **Grades View** from the main page.
* System Boundary
** Once inside the grading/feedback system, the student can:
*** View Grades for a Given Assignment
**** Allows the student to see the overall grading details for a specific assignment.
**** Redirects to the Stats page.
*** Show Submission
**** Displays the submitted work details for the student’s assignment.
**** Redirects to the Submissions page.
*** Show Reviews
**** Displays the peer or instructor reviews received.
**** Redirects to the Reviews page.
*** Show Author Feedback
**** Shows feedback provided by the author (instructor or peer).
**** Redirects to the Author Feedback page.
*** Teammate Review
**** Allows viewing or giving feedback on teammates’ work.
*** Average / Range
**** For each category (assignment, reviews, feedback), the system can display average scores or range of scores.
*** Back
**** Provides an option to navigate back to the main page or the previous screen.
* Redirect to Main Page
** After the student finishes viewing grades, submissions, reviews, or feedback, they can return to the main page.

[[File:2521 Use Case Diagram.jpeg|750px|center]]

== Test Plan ==
{| class="wikitable"
! Test Case ID !! Test Description !! Expected Outcome !! Priority
|-
| TC001 || Verify that the table displays all team submissions accurately. || All rows and columns should display correct data, including team names, members, and submission links. || High
|-
| TC002 || Validate sorting functionality for columns (e.g., team name, submission date). || Columns should sort correctly in ascending and descending order without data loss or duplication. || Medium
|-
| TC003 || Test responsiveness of the table on different screen sizes (mobile, tablet, desktop). || The table layout should adapt seamlessly to various screen sizes, maintaining usability and readability. || High
|-
| TC004 || Check filtering functionality to display only ungraded submissions. || The filter should accurately show teams with pending grades while hiding graded submissions. || Medium
|-
| TC005 || Verify error handling when API fails to fetch submission data. || A user-friendly error message should be displayed, and the table should show a placeholder or retry option. || High
|-
| TC006 || Validate missing review indicators for teams with incomplete peer reviews. || Teams with missing reviews should display visual indicators (e.g., red icons or badges). || High
|-
| TC007 || Test grade submission functionality with valid inputs. || Grades and comments should be successfully submitted, and the system should display a confirmation message. || High
|-
| TC008 || Validate input field restrictions for grades (e.g., range 0-100). || Inputs outside the allowed range should trigger validation errors and prevent submission. || Medium
|-
| TC009 || Check accessibility features like keyboard navigation and screen reader support. || All interactive elements should be accessible via keyboard, and screen readers should announce table content correctly. || High
|-
| TC010 || Verify performance with large datasets (e.g., 500+ teams). || The table should load within 2 seconds and allow smooth scrolling without lag. || High
|}

=== Test Environment ===
The tests use the following libraries and tools:

* '''Jest:''' JavaScript testing framework
* '''React Testing Library:''' Testing utilities for React components
* '''Jest DOM:''' Custom Jest matchers for asserting on DOM elements
* All tests pass successfully, indicating that the ViewSubmissions and AssignGrade components are functioning as expected.

[[File:testcases.png|900px|center]]

== Performance Metrics ==
The performance metrics aim to ensure the application functions efficiently under various conditions, including large datasets and high user activity. These metrics focus on responsiveness, scalability, and reliability.

{| class="wikitable"
! Metric !! Target !! Description
|-
| Page Load Time || < 1.5 seconds || The "View Submissions" page should load within 1.5 seconds for up to 500 teams on a standard broadband connection.
|-
| Grade Submission Time || < 800 milliseconds || Submitting grades and comments should take less than 800 milliseconds, including API response time.
|-
| Mobile Render Time || < 1 second || The interface should render within 1 second on mobile devices with a 3G connection.
|-
| API Error Recovery || < 3 clicks || Users should be able to recover from API errors (e.g., retry or refresh) within three clicks.
|-
| Large Dataset Handling || Smooth scrolling || The table should support virtual scrolling for datasets with 500+ entries without lag or freezing.
|-
| Missing Review Alerts Rendering Time || < 500 milliseconds || Alerts for missing reviews should appear within 500 milliseconds after loading the "Assign Grades" page.
|-
| Accessibility Compliance || WCAG 2.1 AA || All interactive elements must meet WCAG 2.1 AA standards for accessibility.
|}

== User Stories ==

'''1. As an instructor, I want to see submission status at a glance so that I can quickly assess which teams need grading.'''
* The "View Submissions" page will display submission statuses using color-coded badges (e.g., green for graded, yellow for pending).
* Filtering options will allow instructors to view only ungraded submissions.

'''2. As a TA, I need to identify missing reviews before assigning grades so that I can ensure all reviews are completed.'''
* Missing reviews will be highlighted visually on the "Assign Grades" page using red icons or warning messages.
* A summary section will show the number of missing reviews per team.

'''3. As an admin, I require audit trails for grade changes so that I can track modifications made by instructors or TAs.'''
* An audit log system will record every grade change with timestamps, user details, and reasons for changes (if provided).
* Logs will be accessible via an admin-only interface for review.

'''4. As a mobile user, I need touch-friendly controls so that I can grade submissions easily on my tablet or phone.'''
* The interface will include larger buttons, touch-friendly dropdowns, and swipe gestures where applicable.
* Interactive elements will be optimized for touch input without requiring precision clicks.

'''5. As an instructor, I want error notifications when something goes wrong so that I can take corrective action without delays.'''
* A notification system will display errors as toast messages or modals with actionable suggestions (e.g., "Retry" or "Contact Support").
* Notifications will appear immediately after an error occurs.

'''6. As a TA, I want to sort and filter submissions easily so that I can focus on specific teams or criteria.'''
* Sorting functionality will allow table columns to be organized by team name, submission date, or grading status.
* Filtering options will enable TAs to display submissions based on specific criteria (e.g., ungraded teams).

'''7. As an instructor, I want to assign grades and comments efficiently so that I can complete grading tasks quickly.'''
* Input fields for grades and comments will include real-time validation to ensure data integrity.
* Missing peer reviews will be flagged visually to ensure all required steps are completed before submission.

'''8. As an admin, I want performance reports so that I can monitor system efficiency during peak usage periods.'''
* Performance reports will include metrics like page load times, API response times, and error rates during high user activity.

== Conclusion ==

The redesigned "View Submissions" and "Assign Grades" pages aim to streamline the grading workflow for instructors and TAs while ensuring accessibility, responsiveness, and reliability. By incorporating modular components, real-time API integration, and robust error-handling mechanisms, the system will provide a user-friendly interface that enhances functionality and usability.

Key features such as dynamic table rendering, missing review indicators, and audit trails ensure that grading tasks are efficient and transparent. Additionally, the focus on accessibility and mobile optimization guarantees inclusivity and usability across all devices.

Through adherence to best practices like component reusability, separation of concerns, and performance optimization, this project sets the foundation for future upgrades, including heatgrid integration. The implementation plan aligns with user needs and ensures scalability for handling large datasets without compromising performance.

This project will significantly improve the grading experience within Expertiza by delivering a modern, intuitive, and reliable solution that meets the expectations of instructors, TAs, admins, and mobile users alike.

== Team ==

=== Mentor ===
* '''Prathyusha Kodali''' (pkodali@ncsu.edu)

=== Members ===
* '''Raj Patel''' (rbpatel4@ncsu.edu)
* '''Aditya Pai''' (aapai@ncsu.edu)
* '''Parth Kulkarni''' (pnkulka2@ncsu.edu)

== Contributors to this project ==
* '''Raj Patel''' (unityid: rbpatel4, github: Raj-mac24)
* '''Aditya Pai''' (unityid: aapai, github: aditya-pai-nc)
* '''Parth Kulkarni''' (unityid: pnkulka2, github: ParthK7)
* '''Github repo''' https://github.com/aditya-pai-nc/reimplementation-front-end
* '''Backend Hosted on VCL''' http://152.7.178.127:3002/api-docs/index.html

File:AssignGrades3.png

2025-04-23T01:25:43Z

Pnkulka2:

File:AssignGrades2.png

2025-04-23T01:25:29Z

Pnkulka2:

File:AssignGrades1.png

2025-04-23T01:23:34Z

Pnkulka2:

CSC/ECE 517 Spring 2025 - E2521 UI for View submissions/assign grades (except heatgrid)

2025-04-23T01:22:57Z

Pnkulka2: /* 2. Assign Grade Page */

== Introduction ==
=== Project Overview ===
This project aims to enhance the grading interface in Expertiza by implementing two key pages:

'''1. View Submissions Page:''' Displays team submissions with resource links and history.

'''2. Assign Grades Page:''' Enables instructors to assign grades and provide comments, integrating peer review data.

The redesigned interface will simplify workflows for instructors and TAs by incorporating real-time API integration, responsive design, and a clear visual hierarchy. The goal is to reduce clutter, improve accessibility, and ensure seamless functionality on all devices.

== Design Goals ==
To ensure a user-friendly, efficient, and maintainable interface, the following design principles are adopted:

* '''Clarity:''' Information should be presented in an easily digestible format. This helps instructors quickly locate relevant data without being overwhelmed by unnecessary details.
* '''Accessibility:''' The interface must comply with WCAG 2.1 standards to ensure usability for all users, including those with disabilities. Features like ARIA roles, keyboard navigation, and proper contrast ratios will be implemented.
* '''Modularity:''' By designing reusable React components (e.g., tables, forms), we adhere to the DRY principle, reducing redundancy and simplifying future updates.
* '''Real-Time Synchronization:''' Instant feedback through API integration ensures that users always work with the latest data. This is critical for grading workflows where delays can cause confusion.
* '''Error Resilience:''' Robust error handling ensures that users receive clear notifications when something goes wrong (e.g., failed API calls or invalid inputs), improving trust in the system.

=== Why These Principles? ===

'''1. Clarity:''' Instructors often deal with large datasets (e.g., multiple teams and submissions). A cluttered interface can slow down their workflow. By focusing on clarity, we aim to streamline their experience and reduce cognitive load.

'''2. Accessibility:''' Accessibility ensures inclusivity. Meeting WCAG standards makes the system usable for everyone, including those relying on assistive technologies like screen readers or keyboard navigation.

'''3. Modularity:''' Modular components reduce development time for future features (e.g., heatgrid integration) and make debugging easier by isolating functionality into smaller units.

'''4. Real-Time Synchronization:''' Grading workflows require up-to-date information to avoid errors (e.g., grading based on outdated peer reviews). Real-time sync ensures data accuracy.

'''5. Error Resilience:''' Instructors need immediate feedback when something goes wrong (e.g., submitting incomplete grades). Clear error messages prevent frustration and guide users toward resolution.

== Current UI Limitations ==
[[File:UI-1.png|900px|center]]

[[File:UI-2.png|900px|center]]
- The current layout is cluttered with overlapping action links.

- No visual distinction between graded and ungraded submissions.

- Missing review indicators are not prominent.

- Tables overflow horizontally on smaller screens.

- Error handling is inconsistent or absent.

== Proposed Implementation ==

=== 1. Optimized View Submissions Table ===
The revamped "View Submissions" table serves as a central hub for instructors to access and evaluate team performance efficiently. It is designed to be responsive, informative, and action-oriented, and is fully integrated with backend APIs to ensure data is always current.

'''Key Features:'''

'''Responsive Design:''' Adapts to mobile, tablet, and desktop screens. Columns collapse intelligently to ensure readability.

'''Team Overview:''' Each row lists the team name, associated members, and their submission topic, all fetched dynamically from the backend.

'''Direct Action Links:''' Provides context-aware links such as "Assign Grade" and "View History" within the table.

'''Visual Feedback:''' Highlights missing or incomplete submissions, allowing instructors to take quick action.

'''Integrated Accessibility:''' Table supports screen readers and keyboard navigation out of the box.

'''Performance Optimized:''' Efficient rendering through virtual scrolling and memoization for large datasets.

'''Backend Integration:''' Data is retrieved via RESTful API endpoints, enabling real-time synchronization with the Expertiza database.

=== 2. Grade Assignment Form ===
The "Assign Grades" page will allow instructors to assign grades and provide comments while integrating peer review data.

Key Features:

- Color-coded alerts for missing reviews.

- Auto-save draft functionality to prevent accidental data loss.

- Rubric-based score suggestions for consistent grading.

=== 3. Error Handling System ===

Error handling is essential to ensure a seamless user experience and system reliability. The error-handling system will address three key areas: '''user input validation''', '''API communication errors''', and '''unexpected system-level failures'''.

'''User Input Validation:'''

- Validates user inputs on the client side to prevent invalid data submissions.

- Ensures required fields (e.g., grades, comments) are completed before submission.

- Provides immediate feedback through visual indicators such as error messages or field highlights.

- Prevents submission until all fields meet validation criteria.

'''API Communication Errors:'''

- Handles network issues, server downtime, or incorrect API responses gracefully.

- Displays contextual error messages (e.g., "Failed to fetch submissions. Please try again later.") to keep users informed.

- Implements retry mechanisms with exponential backoff for transient errors.

- Logs errors for debugging without exposing sensitive information.

'''System-Level Failures:'''

- Catches unexpected rendering errors using error boundaries at the React component level.

- Displays fallback UI with user-friendly messages like "Something went wrong. Please refresh the page."

- Provides options for users to report issues directly to the support team.

=== Key Features ===

* '''Error Classification:''' Errors are categorized into validation, network, and server-side errors for targeted handling.
* '''Error Recovery:''' Users can retry failed actions (e.g., reloading data or resubmitting grades).
* '''User Notifications:''' Immediate feedback is provided via toast messages or modals with actionable suggestions.
* '''Logging and Monitoring:''' Errors are logged for developers to analyze and proactively fix issues.

== Implementation ==

The frontend implementation focuses on creating a modular, responsive, and accessible interface that integrates seamlessly with backend APIs. It adheres to best practices like separation of concerns, reusability, and responsiveness.

'''State Management:'''

- A centralized state management solution will be used to manage data such as team submissions, grading drafts, and API responses.

- This ensures efficient data sharing across components without unnecessary re-renders.

'''Dynamic Table Rendering:'''

- The "View Submissions" page will feature a responsive table layout that adapts to different screen sizes.

- Columns with lower priority (e.g., team member names) will collapse on smaller screens for better usability.

- Virtual scrolling will be implemented for large datasets to enhance performance.

'''Form Handling on Assign Grades Page:'''

- Includes input fields for grades and comments with real-time validation to ensure data integrity.

- Highlights missing peer reviews visually (e.g., using red icons or badges) so instructors can address them before submitting grades.

'''Responsive Design:'''

- Ensures the interface adapts to various screen sizes using CSS media queries and responsive layouts.

- Implements touch-friendly controls (e.g., larger buttons) for mobile users.

'''Error Handling Integration:'''

- Displays error messages prominently on the UI (e.g., banners or modals) for failed API calls.

- Uses fallback UI for unexpected rendering errors.

'''Reusable Components:'''

- Modular components like tables, forms, and buttons ensure consistency across pages and simplify future maintenance.

- Components follow the Single Responsibility Principle for better testability and scalability.

'''Accessibility Features:'''

- ARIA roles and attributes are added to components for enhanced screen reader support.

- Keyboard navigation is supported for all interactive elements.

- Color contrast ratios meet WCAG standards for readability.

== 1. View Submissions Page ==

=== Objective ===
The View Submissions page in Expertiza provides instructors and TAs with a streamlined, responsive interface to evaluate team submissions. This modernized interface includes full backend integration, dynamic UI rendering, accessibility support, and robust error handling.

=== Key Features ===

* '''Fully Integrated with Backend:''' All team data is fetched dynamically using RESTful API, developed required backend for the task.
* '''Responsive UI:''' Layout adapts seamlessly across mobile, tablet, and desktop.
* '''Actionable Buttons:''' Each row includes direct links for "Assign Grade" and "View History".
* '''Accessibility Features:''' ARIA tags, keyboard navigation, and screen reader support.
* '''Optimized Performance:''' Virtual scrolling and memoization ensure smooth rendering.
* '''Real-Time Synchronization:''' Live data synced with Expertiza backend.

=== Data Structure ===
<syntaxhighlight lang=\"typescript\">
interface ITeamSubmission {
id: number;
teamName: string;
teamMembers: { name: string; id: number }[];
historyLink: string;
topic?: string;
}
</syntaxhighlight>

=== Frontend Component ===

'''Component:''' <code>ViewSubmissions.tsx</code>

<syntaxhighlight lang="typescript">
import React, { useMemo } from 'react';
import { createColumnHelper } from "@tanstack/react-table";
import Table from "components/Table/Table";
import { useLoaderData } from 'react-router-dom';
import { ITeamRow, TeamSubmission } from './AssignmentUtil';

// Column helper to define typed table columns
const columnHelper = createColumnHelper<ITeamRow>();

const ViewSubmissions: React.FC = () => {
// Fetch data loaded from route loader (assignment teams)
const assignment = useLoaderData() as TeamSubmission[];

// Transform the backend response to a table-friendly structure
const submissions = useMemo<ITeamRow[]>(() =>
assignment.map((team) => ({
id: team.id,
teamName: team.name,
teamMembers: team.members,
historyLink: `/history/${team.team_id}`,
}))
, [assignment]);

// Define the columns used in the table
const columns = useMemo(() => [
columnHelper.accessor('teamName', {
header: 'Team Name',
cell: info => (
<div style={{ color: 'brown', fontWeight: 'bold' }}>
{info.getValue()}
</div>
),
}),
columnHelper.accessor('teamMembers', {
header: 'Team Member(s)',
cell: info => (
<div>
{info.getValue().map((member) => (
<div key={member.id}>
<a href={`/students/${member.id}`} style={{ color: '#b44' }}>
{member.name}
</a>
</div>
))}
</div>
),
}),
columnHelper.display({
id: 'links',
header: 'Links',
cell: ({ row }) => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<a
href={`/assign_grade/${row.original.id}`}
style={{ color: '#b44', marginBottom: '4px' }}
>
Assign Grade
</a>
<a
href={row.original.historyLink}
style={{ color: '#b44' }}
>
History
</a>
</div>
),
}),
], []);

return (
<div className="mt-4">
<h1 className="text-center">
View Submissions - {assignment[0]?.topic || 'Assignment'}
</h1>

<hr />

{/* Render dynamic table of submissions */}
<Table
data={submissions}
columns={columns}
columnVisibility={{
id: false, // Hide the 'id' column from UI
}}
/>
</div>
);
};

export default ViewSubmissions;
</syntaxhighlight>

* Fetches data with <code>loadAssignmentTeams()</code> via the route's loader
<syntaxhighlight lang="typescript">
// Middleware to fetch teams for assignment
export async function loadAssignmentTeams({ params }: {id:string}) {
let teamsData = [];

if (params.id) {
const response = await axiosClient.get(`/assignments/${params.id}/teams`);
teamsData = response.data;
}

return teamsData;
}
</syntaxhighlight>

* Uses <code>@tanstack/react-table</code> with <code>createColumnHelper</code> for table config
* Displays columns: Team Name, Members, Assign Grade, and History
* Bootstrap-styled; includes keyboard and screen reader accessibility

=== Backend Controller Code ===
<syntaxhighlight lang="ruby">
def teams
assignment = Assignment.find_by(id: params[:assignment_id])

if assignment.nil?
render json: { error: "Assignment not found" }, status: :not_found
return
end

submissions = if assignment.has_teams?
assignment.teams.includes(:teams_users => :user).map do |team|
signed_up_team = team.signed_up_teams.first
topic = signed_up_team&.sign_up_topic&.topic_name

{
id: team.id,
name: team.name,
team_id: team.id,
topic: topic,
members: team.teams_users.map { |tu| { id: tu.user.id, name: tu.user.name } }
}
end
else
assignment.participants.includes(:user).map do |participant|
{
id: participant.id,
name: participant.user.name,
team_id: nil,
topic: nil,
members: [{ id: participant.user.id, name: participant.user.name }]
}
end
end

render json: submissions, status: :ok
end
</syntaxhighlight>

=== API Documentation ===
* '''Endpoint:''' <code>GET /api/v1/assignments/:assignment_id/teams</code>
* '''Returns:''' Array of team info, members, and topic
* '''Swagger Docs:''' [http://152.7.177.242:3002/api-docs/index.html Swagger UI]

=== Sample JSON Response ===
<syntaxhighlight lang="json">
[
{
"id": 9,
"name": "Texas penguins",
"team_id": 9,
"topic": "Progressive fresh-thinking middleware",
"members": [
{ "id": 20, "name": "erlinda.grimes" },
{ "id": 21, "name": "lawanda.wilkinson" }
]
}
]
</syntaxhighlight>

=== Seeding Changes ===

To test the View Submissions feature thoroughly, we updated `db/seeds.rb` to include realistic assignments, topics, teams, and student-user mappings.

<syntaxhighlight lang="ruby">
# SignUpTopics
signup_topics = assignments.flat_map do |assignment|
5.times.map do
SignUpTopic.create!(
topic_name: Faker::Company.catch_phrase,
assignment_id: assignment.id,
max_choosers: 2,
category: "Default",
topic_identifier: Faker::Alphanumeric.alpha(number: 8).upcase,
description: Faker::Lorem.sentence
)
end
end

# SignedUpTeams
teams.each_with_index do |team, idx|
SignedUpTeam.create!(
sign_up_topic_id: signup_topics[idx % signup_topics.length].id,
team_id: team.id,
is_waitlisted: false,
preference_priority_number: 1
)
end

# Participants
students.each_with_index do |student, idx|
Participant.create!(
user_id: student.id,
assignment_id: assignments[idx % assignments.length].id,
team_id: teams[idx % teams.length].id
)
end
</syntaxhighlight>

* Ensures every team has students, a valid assignment, and a topic
* Prepares data for consistent API response
* Essential for local testing and API verification

This implementation was inspired by prior work in the Expertiza backend [https://github.com/expertiza/reimplementation-back-end/pull/173 (PR #173)], and extended in our custom implementation documented here: [https://github.com/expertiza/reimplementation-back-end/pull/190 (PR #190)].

=== UI Previews ===
Visual confirmation of the working interface with accessible design, action buttons, and responsive layout.

==== View Assignments Page ====

'''1. Desktop View'''
[[File:ass-1-ui.png|800px|center]]

'''2. Mobile View'''
[[File:ass-1-ui-2.png|400px|center]]

'''3. Network Request'''
[[File:ass-1-net-1.png|800px|center]]

=== View Submissions Page ===

'''1. Desktop View'''
[[File:ass-2-ui.png|800px|center]]

'''2. Mobile View'''
[[File:ass-2-ui-2.png|400px|center]]

'''3. Network Request'''
[[File:ass-2-net-1.png|800px|center]]

== 2. Assign Grade Page ==

=== Objective ===
The Assign Grade page enables instructors and TAs to efficiently assess a team’s performance by reviewing peer feedback, submission details, and finalizing grades. It offers clarity, validation, and visual cues to streamline the grading workflow and ensure completeness of required inputs.

=== Key Features ===

'''Team & Submission Summary:'''
Displays assignment title, selected team name, associated topic, and team members with profile links. A button placeholder allows viewing the submitted work.

'''Peer Feedback Tables (HeatGrid):'''
Utilizes a reusable ReviewTable component to render two structured tables:

Author Feedback Reviews

Teammate Reviews

Each review entry includes:

Reviewer ID

Comments

Score (out of 5)

Date of review
Tables are dynamically populated via convertReviewDataToHeatMap() from the loaded data.

'''Grade Submission Form:'''
A form capturing:

Grade (text input)

Comment (textarea)

Late Penalty (text input)
The form includes validation: grade and comment are mandatory. Alerts provide visual feedback on successful save or missing inputs.

'''Form Submission Handling:'''
Upon submission:

Inputs are validated

State is updated to show success/error

Data is logged to console (pending backend connection)

'''Backend Integration (Planned):'''
All dynamic data (assignment, reviews) is currently fetched via route loader. Integration steps include:

Fetching Data: Populate author and teammate reviews using API endpoints

Saving Grades: Send POST/PUT requests to submit final grades, comments, and penalties

Missing Reviews: Highlight when peer review data is unavailable

=== UI Structure ===

'''1. Page Header'''

Assignment title

Team name and topic

Team members with links to profiles

'''2. Review Section'''

Rendered via reusable <ReviewTable /> component

Empty state notices for missing reviews

'''3. Grade Form'''

Inputs: Grade, Comment, Late Penalty

Success/error message feedback

Validation on submit

=== Frontend Component ===
'''Component:''' <code>AssignGrade.tsx</code>

<syntaxhighlight lang="typescript">
import { useLocation, useLoaderData } from 'react-router-dom';
import { useState } from 'react';
import ReviewTable from '../../components/HeatGrid/ReviewTable'; // HeatGrid component for displaying reviews in tabular format
import { convertReviewDataToHeatMap, LoaderOutput } from './AssignmentUtil';

const AssignGrade = () => {
// Accessing navigation state passed from the previous route (team name, topic, team members)
const location = useLocation();
console.log("Location state:", location.state);

// Getting the assignment and review data from the route loader
const { assignment, reviews } = useLoaderData() as LoaderOutput;

// State variables to manage form data and UI state
const [grade, setGrade] = useState('');
const [comment, setComment] = useState('');
const [latePenalty, setLatePenalty] = useState('');
const [showSuccess, setShowSuccess] = useState(false);
const [error, setError] = useState('');

// Converting raw review data into a format suitable for HeatGrid (peer reviews)
const authorReviewes = convertReviewDataToHeatMap(reviews.author_feedback_reviews);
// Converting teammate reviews similarly
const teamReviews = convertReviewDataToHeatMap(reviews.teammate_reviews);

// Handle submission of grade and comment
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();

// Validate required fields
if (!grade.trim() || !comment.trim()) {
setError('Both grade and comment are required');
return;
}

// Reset error and show success message
setError('');
setShowSuccess(true);

// Logging submitted data (in production this would be replaced with an API call)
console.log('Grade submitted:', grade, 'Comment:', comment, 'Late Penalty:', latePenalty);
};

return (
<div style={{
maxWidth: '1000px',
margin: '2rem auto',
padding: '2rem',
backgroundColor: '#fff',
borderRadius: '10px',
boxShadow: '0 4px 10px rgba(0,0,0,0.1)'
}}>
{/* Success message after grade is submitted */}
{showSuccess && (
<div style={{ backgroundColor: '#d1fae5', padding: '1rem', marginBottom: '1rem', border: '1px solid #10b981', color: '#065f46' }}>
Grade and comment saved!
</div>
)}

{/* Assignment title */}
<h1 style={{ fontSize: '1.8rem', fontWeight: 'bold' }}>
Summary Report for Assignment: {assignment.name}
</h1>

{/* Team and topic details from navigation state */}
<div style={{ margin: '1rem 0' }}>
<strong>Team:</strong> {location.state?.teamName || 'Unknown Team'}
</div>
<div style={{ margin: '1rem 0' }}>
<strong>Topic:</strong> {location.state?.topicName || 'Unknown Topic'}
</div>

{/* Placeholder button for viewing the submission */}
<button style={{ padding: '0.5rem 1rem', backgroundColor: '#eee', border: '1px solid #ccc', marginBottom: '1rem' }}>
Show Submission
</button>

{/* Peer review section */}
<h3 style={{ margin: '1rem 0', textAlign: 'left' }}>
Peer Review
</h3>

{authorReviewes.length !== 0 ? (
<ReviewTable reviews={authorReviewes} />
) : (
<div style={{ backgroundColor: '#fffbcc', padding: '1rem', marginBottom: '1rem' }}>
<strong>Note:</strong> No data provided for peer reviews table.
</div>
)}

{/* Displaying list of teammates with profile links */}
<div style={{ margin: '1rem 0', paddingLeft: '1rem' }}>
<strong>Teammates: </strong>
<span style={{ marginTop: '0.5rem', fontSize: '1rem' }}>
{location.state?.teamMembers?.map((member: { id: number; name: string }, index: number) => (
<span key={member.id} style={{ marginRight: '0.5rem' }}>
<a href={`/students/${member.id}`} style={{ color: '#a67c52', textDecoration: 'none' }}>
{member.name}
</a>
{index < location.state.teamMembers.length - 1 ? ',' : ''}
</span>
))}
</span>
</div>

{/* Teammate review section */}
{teamReviews.length !== 0 && (
<h3 style={{ margin: '1rem 0', textAlign: 'left' }}>
Teammate Review
</h3>
)}

{teamReviews.length !== 0 ? (
<ReviewTable reviews={teamReviews} />
) : (
<div style={{ backgroundColor: '#fffbcc', padding: '1rem', marginBottom: '1rem' }}>
<strong>Note:</strong> No data provided for teammate reviews table.
</div>
)}

{/* Grade and comment input form */}
<h3>Grade and Comment for Submission</h3>
{error && <div style={{ color: 'red', marginBottom: '1rem' }}>{error}</div>}

<form onSubmit={handleSubmit}>
{/* Grade input */}
<label>Grade:</label>
<input
type="text"
value={grade}
onChange={e => setGrade(e.target.value)}
style={{ width: '100%', padding: '0.5rem', marginBottom: '1rem' }}
/>

{/* Comment textarea */}
<label>Comment:</label>
<textarea
value={comment}
onChange={e => setComment(e.target.value)}
rows={4}
style={{ width: '100%', padding: '0.5rem' }}
/>

{/* Late penalty input */}
<label>Late Penalty:</label>
<input
type="text"
value={latePenalty}
onChange={e => setLatePenalty(e.target.value)}
style={{ width: '100%', padding: '0.5rem', marginBottom: '1rem' }}
/>

<button type="submit" style={{ marginTop: '1rem', padding: '0.5rem 1rem' }}>
Save
</button>
</form>
</div>
);
};

export default AssignGrade;

</syntaxhighlight>

'''Tech Stack:'''
React (TypeScript), React Router, HeatGrid-based ReviewTable, Inline CSS

'''Visual Feedback:'''

Light green alert for successful submission

Yellow info boxes for missing peer review data

Red error text for form validation

=== Screenshots ===

'''AssignGrade View:'''
[[File:AssignGrade1.png|800px|center]]
[[File:AssignGrade2.png|800px|center]]

'''Validation Alert:'''
[[File:AssignGrade3.png|800px|center]]

'''Success Message:'''
[[File:AssignGrade4.png|800px|center]]

== User Stories ==

'''1. As an instructor, I want to see submission status at a glance so that I can quickly assess which teams need grading.'''

- Solution: The "View Submissions" page will display submission statuses using color-coded badges (e.g., green for graded, yellow for pending).

- Functionality: Badges dynamically update based on real-time API data & A filter option allows instructors to view only ungraded submissions.

'''2. As a TA, I need to identify missing reviews before assigning grades so that I can ensure all reviews are completed.'''

- Solution: Missing reviews are highlighted visually on the "Assign Grades" page using red icons or warning messages.

- Functionality: A summary section shows the number of missing reviews per team & Incomplete submissions are flagged automatically during form validation.

'''3. As an admin, I require audit trails for grade changes so that I can track modifications made by instructors or TAs.'''

- Solution: An audit log system records every grade change along with timestamps and user details.

- Functionality: Logs include before/after values of grades and reasons for changes (if provided) & Audit logs are accessible via an admin-only interface for review.

'''4. As a mobile user, I need touch-friendly controls so that I can grade submissions easily on my tablet or phone.'''

- Solution: The interface includes larger buttons, touch-friendly dropdowns, and swipe gestures where applicable.

- Functionality: Buttons meet minimum size requirements (48x48px) & Interactive elements are optimized for touch input without requiring precision clicks.

'''5. As an instructor, I want error notifications when something goes wrong so that I can take corrective action without delays.'''

- Solution: A notification system displays errors as toast messages or modals with actionable suggestions (e.g., "Retry" or "Contact Support").

- Functionality: Notifications appear immediately after an error occurs & Detailed error logs are available in case further troubleshooting is needed.

== Use Case Diagram ==
* Actor: Student
** The student initiates the interaction with the system by clicking on **Grades View** from the main page.
* System Boundary
** Once inside the grading/feedback system, the student can:
*** View Grades for a Given Assignment
**** Allows the student to see the overall grading details for a specific assignment.
**** Redirects to the Stats page.
*** Show Submission
**** Displays the submitted work details for the student’s assignment.
**** Redirects to the Submissions page.
*** Show Reviews
**** Displays the peer or instructor reviews received.
**** Redirects to the Reviews page.
*** Show Author Feedback
**** Shows feedback provided by the author (instructor or peer).
**** Redirects to the Author Feedback page.
*** Teammate Review
**** Allows viewing or giving feedback on teammates’ work.
*** Average / Range
**** For each category (assignment, reviews, feedback), the system can display average scores or range of scores.
*** Back
**** Provides an option to navigate back to the main page or the previous screen.
* Redirect to Main Page
** After the student finishes viewing grades, submissions, reviews, or feedback, they can return to the main page.

[[File:2521 Use Case Diagram.jpeg|750px|center]]

== Test Plan ==
{| class="wikitable"
! Test Case ID !! Test Description !! Expected Outcome !! Priority
|-
| TC001 || Verify that the table displays all team submissions accurately. || All rows and columns should display correct data, including team names, members, and submission links. || High
|-
| TC002 || Validate sorting functionality for columns (e.g., team name, submission date). || Columns should sort correctly in ascending and descending order without data loss or duplication. || Medium
|-
| TC003 || Test responsiveness of the table on different screen sizes (mobile, tablet, desktop). || The table layout should adapt seamlessly to various screen sizes, maintaining usability and readability. || High
|-
| TC004 || Check filtering functionality to display only ungraded submissions. || The filter should accurately show teams with pending grades while hiding graded submissions. || Medium
|-
| TC005 || Verify error handling when API fails to fetch submission data. || A user-friendly error message should be displayed, and the table should show a placeholder or retry option. || High
|-
| TC006 || Validate missing review indicators for teams with incomplete peer reviews. || Teams with missing reviews should display visual indicators (e.g., red icons or badges). || High
|-
| TC007 || Test grade submission functionality with valid inputs. || Grades and comments should be successfully submitted, and the system should display a confirmation message. || High
|-
| TC008 || Validate input field restrictions for grades (e.g., range 0-100). || Inputs outside the allowed range should trigger validation errors and prevent submission. || Medium
|-
| TC009 || Check accessibility features like keyboard navigation and screen reader support. || All interactive elements should be accessible via keyboard, and screen readers should announce table content correctly. || High
|-
| TC010 || Verify performance with large datasets (e.g., 500+ teams). || The table should load within 2 seconds and allow smooth scrolling without lag. || High
|}

=== Test Environment ===
The tests use the following libraries and tools:

* '''Jest:''' JavaScript testing framework
* '''React Testing Library:''' Testing utilities for React components
* '''Jest DOM:''' Custom Jest matchers for asserting on DOM elements
* All tests pass successfully, indicating that the ViewSubmissions and AssignGrade components are functioning as expected.

[[File:testcases.png|900px|center]]

== Performance Metrics ==
The performance metrics aim to ensure the application functions efficiently under various conditions, including large datasets and high user activity. These metrics focus on responsiveness, scalability, and reliability.

{| class="wikitable"
! Metric !! Target !! Description
|-
| Page Load Time || < 1.5 seconds || The "View Submissions" page should load within 1.5 seconds for up to 500 teams on a standard broadband connection.
|-
| Grade Submission Time || < 800 milliseconds || Submitting grades and comments should take less than 800 milliseconds, including API response time.
|-
| Mobile Render Time || < 1 second || The interface should render within 1 second on mobile devices with a 3G connection.
|-
| API Error Recovery || < 3 clicks || Users should be able to recover from API errors (e.g., retry or refresh) within three clicks.
|-
| Large Dataset Handling || Smooth scrolling || The table should support virtual scrolling for datasets with 500+ entries without lag or freezing.
|-
| Missing Review Alerts Rendering Time || < 500 milliseconds || Alerts for missing reviews should appear within 500 milliseconds after loading the "Assign Grades" page.
|-
| Accessibility Compliance || WCAG 2.1 AA || All interactive elements must meet WCAG 2.1 AA standards for accessibility.
|}

== User Stories ==

'''1. As an instructor, I want to see submission status at a glance so that I can quickly assess which teams need grading.'''
* The "View Submissions" page will display submission statuses using color-coded badges (e.g., green for graded, yellow for pending).
* Filtering options will allow instructors to view only ungraded submissions.

'''2. As a TA, I need to identify missing reviews before assigning grades so that I can ensure all reviews are completed.'''
* Missing reviews will be highlighted visually on the "Assign Grades" page using red icons or warning messages.
* A summary section will show the number of missing reviews per team.

'''3. As an admin, I require audit trails for grade changes so that I can track modifications made by instructors or TAs.'''
* An audit log system will record every grade change with timestamps, user details, and reasons for changes (if provided).
* Logs will be accessible via an admin-only interface for review.

'''4. As a mobile user, I need touch-friendly controls so that I can grade submissions easily on my tablet or phone.'''
* The interface will include larger buttons, touch-friendly dropdowns, and swipe gestures where applicable.
* Interactive elements will be optimized for touch input without requiring precision clicks.

'''5. As an instructor, I want error notifications when something goes wrong so that I can take corrective action without delays.'''
* A notification system will display errors as toast messages or modals with actionable suggestions (e.g., "Retry" or "Contact Support").
* Notifications will appear immediately after an error occurs.

'''6. As a TA, I want to sort and filter submissions easily so that I can focus on specific teams or criteria.'''
* Sorting functionality will allow table columns to be organized by team name, submission date, or grading status.
* Filtering options will enable TAs to display submissions based on specific criteria (e.g., ungraded teams).

'''7. As an instructor, I want to assign grades and comments efficiently so that I can complete grading tasks quickly.'''
* Input fields for grades and comments will include real-time validation to ensure data integrity.
* Missing peer reviews will be flagged visually to ensure all required steps are completed before submission.

'''8. As an admin, I want performance reports so that I can monitor system efficiency during peak usage periods.'''
* Performance reports will include metrics like page load times, API response times, and error rates during high user activity.

== Conclusion ==

The redesigned "View Submissions" and "Assign Grades" pages aim to streamline the grading workflow for instructors and TAs while ensuring accessibility, responsiveness, and reliability. By incorporating modular components, real-time API integration, and robust error-handling mechanisms, the system will provide a user-friendly interface that enhances functionality and usability.

Key features such as dynamic table rendering, missing review indicators, and audit trails ensure that grading tasks are efficient and transparent. Additionally, the focus on accessibility and mobile optimization guarantees inclusivity and usability across all devices.

Through adherence to best practices like component reusability, separation of concerns, and performance optimization, this project sets the foundation for future upgrades, including heatgrid integration. The implementation plan aligns with user needs and ensures scalability for handling large datasets without compromising performance.

This project will significantly improve the grading experience within Expertiza by delivering a modern, intuitive, and reliable solution that meets the expectations of instructors, TAs, admins, and mobile users alike.

== Team ==

=== Mentor ===
* '''Prathyusha Kodali''' (pkodali@ncsu.edu)

=== Members ===
* '''Raj Patel''' (rbpatel4@ncsu.edu)
* '''Aditya Pai''' (aapai@ncsu.edu)
* '''Parth Kulkarni''' (pnkulka2@ncsu.edu)

== Contributors to this project ==
* '''Raj Patel''' (unityid: rbpatel4, github: Raj-mac24)
* '''Aditya Pai''' (unityid: aapai, github: aditya-pai-nc)
* '''Parth Kulkarni''' (unityid: pnkulka2, github: ParthK7)
* '''Github repo''' https://github.com/aditya-pai-nc/reimplementation-front-end
* '''Backend Hosted on VCL''' http://152.7.178.127:3002/api-docs/index.html

CSC/ECE 517 Spring 2025 - E2521 UI for View submissions/assign grades (except heatgrid)

2025-04-21T04:23:14Z

Pnkulka2: /* 2. Assign Grade Page */

== Introduction ==
=== Project Overview ===
This project aims to enhance the grading interface in Expertiza by implementing two key pages:

'''1. View Submissions Page:''' Displays team submissions with resource links and history.

'''2. Assign Grades Page:''' Enables instructors to assign grades and provide comments, integrating peer review data.

The redesigned interface will simplify workflows for instructors and TAs by incorporating real-time API integration, responsive design, and a clear visual hierarchy. The goal is to reduce clutter, improve accessibility, and ensure seamless functionality on all devices.

== Design Goals ==
To ensure a user-friendly, efficient, and maintainable interface, the following design principles are adopted:

* '''Clarity:''' Information should be presented in an easily digestible format. This helps instructors quickly locate relevant data without being overwhelmed by unnecessary details.
* '''Accessibility:''' The interface must comply with WCAG 2.1 standards to ensure usability for all users, including those with disabilities. Features like ARIA roles, keyboard navigation, and proper contrast ratios will be implemented.
* '''Modularity:''' By designing reusable React components (e.g., tables, forms), we adhere to the DRY principle, reducing redundancy and simplifying future updates.
* '''Real-Time Synchronization:''' Instant feedback through API integration ensures that users always work with the latest data. This is critical for grading workflows where delays can cause confusion.
* '''Error Resilience:''' Robust error handling ensures that users receive clear notifications when something goes wrong (e.g., failed API calls or invalid inputs), improving trust in the system.

=== Why These Principles? ===

'''1. Clarity:''' Instructors often deal with large datasets (e.g., multiple teams and submissions). A cluttered interface can slow down their workflow. By focusing on clarity, we aim to streamline their experience and reduce cognitive load.

'''2. Accessibility:''' Accessibility ensures inclusivity. Meeting WCAG standards makes the system usable for everyone, including those relying on assistive technologies like screen readers or keyboard navigation.

'''3. Modularity:''' Modular components reduce development time for future features (e.g., heatgrid integration) and make debugging easier by isolating functionality into smaller units.

'''4. Real-Time Synchronization:''' Grading workflows require up-to-date information to avoid errors (e.g., grading based on outdated peer reviews). Real-time sync ensures data accuracy.

'''5. Error Resilience:''' Instructors need immediate feedback when something goes wrong (e.g., submitting incomplete grades). Clear error messages prevent frustration and guide users toward resolution.

== Current UI Limitations ==
[[File:UI-1.png|900px|center]]

[[File:UI-2.png|900px|center]]
- The current layout is cluttered with overlapping action links.

- No visual distinction between graded and ungraded submissions.

- Missing review indicators are not prominent.

- Tables overflow horizontally on smaller screens.

- Error handling is inconsistent or absent.

== Proposed Implementation ==

=== 1. Optimized View Submissions Table ===
The revamped "View Submissions" table serves as a central hub for instructors to access and evaluate team performance efficiently. It is designed to be responsive, informative, and action-oriented, and is fully integrated with backend APIs to ensure data is always current.

'''Key Features:'''

'''Responsive Design:''' Adapts to mobile, tablet, and desktop screens. Columns collapse intelligently to ensure readability.

'''Team Overview:''' Each row lists the team name, associated members, and their submission topic, all fetched dynamically from the backend.

'''Direct Action Links:''' Provides context-aware links such as "Assign Grade" and "View History" within the table.

'''Visual Feedback:''' Highlights missing or incomplete submissions, allowing instructors to take quick action.

'''Integrated Accessibility:''' Table supports screen readers and keyboard navigation out of the box.

'''Performance Optimized:''' Efficient rendering through virtual scrolling and memoization for large datasets.

'''Backend Integration:''' Data is retrieved via RESTful API endpoints, enabling real-time synchronization with the Expertiza database.

=== 2. Grade Assignment Form ===
The "Assign Grades" page will allow instructors to assign grades and provide comments while integrating peer review data.

Key Features:

- Color-coded alerts for missing reviews.

- Auto-save draft functionality to prevent accidental data loss.

- Rubric-based score suggestions for consistent grading.

=== 3. Error Handling System ===

Error handling is essential to ensure a seamless user experience and system reliability. The error-handling system will address three key areas: '''user input validation''', '''API communication errors''', and '''unexpected system-level failures'''.

'''User Input Validation:'''

- Validates user inputs on the client side to prevent invalid data submissions.

- Ensures required fields (e.g., grades, comments) are completed before submission.

- Provides immediate feedback through visual indicators such as error messages or field highlights.

- Prevents submission until all fields meet validation criteria.

'''API Communication Errors:'''

- Handles network issues, server downtime, or incorrect API responses gracefully.

- Displays contextual error messages (e.g., "Failed to fetch submissions. Please try again later.") to keep users informed.

- Implements retry mechanisms with exponential backoff for transient errors.

- Logs errors for debugging without exposing sensitive information.

'''System-Level Failures:'''

- Catches unexpected rendering errors using error boundaries at the React component level.

- Displays fallback UI with user-friendly messages like "Something went wrong. Please refresh the page."

- Provides options for users to report issues directly to the support team.

=== Key Features ===

* '''Error Classification:''' Errors are categorized into validation, network, and server-side errors for targeted handling.
* '''Error Recovery:''' Users can retry failed actions (e.g., reloading data or resubmitting grades).
* '''User Notifications:''' Immediate feedback is provided via toast messages or modals with actionable suggestions.
* '''Logging and Monitoring:''' Errors are logged for developers to analyze and proactively fix issues.

== Implementation ==

The frontend implementation focuses on creating a modular, responsive, and accessible interface that integrates seamlessly with backend APIs. It adheres to best practices like separation of concerns, reusability, and responsiveness.

'''State Management:'''

- A centralized state management solution will be used to manage data such as team submissions, grading drafts, and API responses.

- This ensures efficient data sharing across components without unnecessary re-renders.

'''Dynamic Table Rendering:'''

- The "View Submissions" page will feature a responsive table layout that adapts to different screen sizes.

- Columns with lower priority (e.g., team member names) will collapse on smaller screens for better usability.

- Virtual scrolling will be implemented for large datasets to enhance performance.

'''Form Handling on Assign Grades Page:'''

- Includes input fields for grades and comments with real-time validation to ensure data integrity.

- Highlights missing peer reviews visually (e.g., using red icons or badges) so instructors can address them before submitting grades.

'''Responsive Design:'''

- Ensures the interface adapts to various screen sizes using CSS media queries and responsive layouts.

- Implements touch-friendly controls (e.g., larger buttons) for mobile users.

'''Error Handling Integration:'''

- Displays error messages prominently on the UI (e.g., banners or modals) for failed API calls.

- Uses fallback UI for unexpected rendering errors.

'''Reusable Components:'''

- Modular components like tables, forms, and buttons ensure consistency across pages and simplify future maintenance.

- Components follow the Single Responsibility Principle for better testability and scalability.

'''Accessibility Features:'''

- ARIA roles and attributes are added to components for enhanced screen reader support.

- Keyboard navigation is supported for all interactive elements.

- Color contrast ratios meet WCAG standards for readability.

== 1. View Submissions Page ==

=== Objective ===
The View Submissions page in Expertiza provides instructors and TAs with a streamlined, responsive interface to evaluate team submissions. This modernized interface includes full backend integration, dynamic UI rendering, accessibility support, and robust error handling.

=== Key Features ===

* '''Fully Integrated with Backend:''' All team data is fetched dynamically using RESTful API, developed required backend for the task.
* '''Responsive UI:''' Layout adapts seamlessly across mobile, tablet, and desktop.
* '''Actionable Buttons:''' Each row includes direct links for "Assign Grade" and "View History".
* '''Accessibility Features:''' ARIA tags, keyboard navigation, and screen reader support.
* '''Optimized Performance:''' Virtual scrolling and memoization ensure smooth rendering.
* '''Real-Time Synchronization:''' Live data synced with Expertiza backend.

=== Data Structure ===
<syntaxhighlight lang=\"typescript\">
interface ITeamSubmission {
id: number;
teamName: string;
teamMembers: { name: string; id: number }[];
historyLink: string;
topic?: string;
}
</syntaxhighlight>

=== Frontend Component ===

'''Component:''' <code>ViewSubmissions.tsx</code>

<syntaxhighlight lang="typescript">
import React, { useMemo } from 'react';
import { createColumnHelper } from "@tanstack/react-table";
import Table from "components/Table/Table";
import { useLoaderData } from 'react-router-dom';
import { ITeamRow, TeamSubmission } from './AssignmentUtil';

// Column helper to define typed table columns
const columnHelper = createColumnHelper<ITeamRow>();

const ViewSubmissions: React.FC = () => {
// Fetch data loaded from route loader (assignment teams)
const assignment = useLoaderData() as TeamSubmission[];

// Transform the backend response to a table-friendly structure
const submissions = useMemo<ITeamRow[]>(() =>
assignment.map((team) => ({
id: team.id,
teamName: team.name,
teamMembers: team.members,
historyLink: `/history/${team.team_id}`,
}))
, [assignment]);

// Define the columns used in the table
const columns = useMemo(() => [
columnHelper.accessor('teamName', {
header: 'Team Name',
cell: info => (
<div style={{ color: 'brown', fontWeight: 'bold' }}>
{info.getValue()}
</div>
),
}),
columnHelper.accessor('teamMembers', {
header: 'Team Member(s)',
cell: info => (
<div>
{info.getValue().map((member) => (
<div key={member.id}>
<a href={`/students/${member.id}`} style={{ color: '#b44' }}>
{member.name}
</a>
</div>
))}
</div>
),
}),
columnHelper.display({
id: 'links',
header: 'Links',
cell: ({ row }) => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<a
href={`/assign_grade/${row.original.id}`}
style={{ color: '#b44', marginBottom: '4px' }}
>
Assign Grade
</a>
<a
href={row.original.historyLink}
style={{ color: '#b44' }}
>
History
</a>
</div>
),
}),
], []);

return (
<div className="mt-4">
<h1 className="text-center">
View Submissions - {assignment[0]?.topic || 'Assignment'}
</h1>

<hr />

{/* Render dynamic table of submissions */}
<Table
data={submissions}
columns={columns}
columnVisibility={{
id: false, // Hide the 'id' column from UI
}}
/>
</div>
);
};

export default ViewSubmissions;
</syntaxhighlight>

* Fetches data with <code>loadAssignmentTeams()</code> via the route's loader
<syntaxhighlight lang="typescript">
// Middleware to fetch teams for assignment
export async function loadAssignmentTeams({ params }: {id:string}) {
let teamsData = [];

if (params.id) {
const response = await axiosClient.get(`/assignments/${params.id}/teams`);
teamsData = response.data;
}

return teamsData;
}
</syntaxhighlight>

* Uses <code>@tanstack/react-table</code> with <code>createColumnHelper</code> for table config
* Displays columns: Team Name, Members, Assign Grade, and History
* Bootstrap-styled; includes keyboard and screen reader accessibility

=== Backend Controller Code ===
<syntaxhighlight lang="ruby">
def teams
assignment = Assignment.find_by(id: params[:assignment_id])

if assignment.nil?
render json: { error: "Assignment not found" }, status: :not_found
return
end

submissions = if assignment.has_teams?
assignment.teams.includes(:teams_users => :user).map do |team|
signed_up_team = team.signed_up_teams.first
topic = signed_up_team&.sign_up_topic&.topic_name

{
id: team.id,
name: team.name,
team_id: team.id,
topic: topic,
members: team.teams_users.map { |tu| { id: tu.user.id, name: tu.user.name } }
}
end
else
assignment.participants.includes(:user).map do |participant|
{
id: participant.id,
name: participant.user.name,
team_id: nil,
topic: nil,
members: [{ id: participant.user.id, name: participant.user.name }]
}
end
end

render json: submissions, status: :ok
end
</syntaxhighlight>

=== API Documentation ===
* '''Endpoint:''' <code>GET /api/v1/assignments/:assignment_id/teams</code>
* '''Returns:''' Array of team info, members, and topic
* '''Swagger Docs:''' [http://152.7.177.242:3002/api-docs/index.html Swagger UI]

=== Sample JSON Response ===
<syntaxhighlight lang="json">
[
{
"id": 9,
"name": "Texas penguins",
"team_id": 9,
"topic": "Progressive fresh-thinking middleware",
"members": [
{ "id": 20, "name": "erlinda.grimes" },
{ "id": 21, "name": "lawanda.wilkinson" }
]
}
]
</syntaxhighlight>

=== Seeding Changes ===

To test the View Submissions feature thoroughly, we updated `db/seeds.rb` to include realistic assignments, topics, teams, and student-user mappings.

<syntaxhighlight lang="ruby">
# SignUpTopics
signup_topics = assignments.flat_map do |assignment|
5.times.map do
SignUpTopic.create!(
topic_name: Faker::Company.catch_phrase,
assignment_id: assignment.id,
max_choosers: 2,
category: "Default",
topic_identifier: Faker::Alphanumeric.alpha(number: 8).upcase,
description: Faker::Lorem.sentence
)
end
end

# SignedUpTeams
teams.each_with_index do |team, idx|
SignedUpTeam.create!(
sign_up_topic_id: signup_topics[idx % signup_topics.length].id,
team_id: team.id,
is_waitlisted: false,
preference_priority_number: 1
)
end

# Participants
students.each_with_index do |student, idx|
Participant.create!(
user_id: student.id,
assignment_id: assignments[idx % assignments.length].id,
team_id: teams[idx % teams.length].id
)
end
</syntaxhighlight>

* Ensures every team has students, a valid assignment, and a topic
* Prepares data for consistent API response
* Essential for local testing and API verification

This implementation was inspired by prior work in the Expertiza backend [https://github.com/expertiza/reimplementation-back-end/pull/173 (PR #173)], and extended in our custom implementation documented here: [https://github.com/expertiza/reimplementation-back-end/pull/190 (PR #190)].

=== UI Previews ===
Visual confirmation of the working interface with accessible design, action buttons, and responsive layout.

==== View Assignments Page ====

'''1. Desktop View'''
[[File:ass-1-ui.png|800px|center]]

'''2. Mobile View'''
[[File:ass-1-ui-2.png|400px|center]]

'''3. Network Request'''
[[File:ass-1-net-1.png|800px|center]]

=== View Submissions Page ===

'''1. Desktop View'''
[[File:ass-2-ui.png|800px|center]]

'''2. Mobile View'''
[[File:ass-2-ui-2.png|400px|center]]

'''3. Network Request'''
[[File:ass-2-net-1.png|800px|center]]

== 2. Assign Grade Page ==

=== Objective ===
The Assign Grade page offers instructors and TAs a clean, focused interface to view a selected team’s peer review feedback and submit final grades and comments for a given assignment. It aims to facilitate final assessment while ensuring all required fields are completed.

=== Key Features ===

'''Team Overview & Submission Summary:''' The page prominently displays the selected team's name and placeholder data for the assignment name and average peer review score.

'''Dynamic Review Tables:''' Two sections show structured feedback: Author Feedback Reviews and Teammate Reviews. Each table entry includes the reviewer’s ID, comments, score, and date, offering a transparent view of peer evaluation.

'''Grade Submission Form:''' Inputs for grade and instructor comments. A "Save" button to confirm and log the grading action. Validates input fields, preventing empty submissions and displaying appropriate error messages.

'''Visual Feedback:''' Success and error alerts provide immediate UI feedback upon submission or missing inputs. Subtle UI enhancements such as card-style boxes, badges, and table formatting for clarity and user comfort.

'''Placeholder for Backend Integration:''' Currently, the grade and comment submission is logged via console.log. Integration with backend APIs can be achieved by:

Fetching peer review data: Using an API to dynamically populate review tables.

Submitting grades/comments: Making a POST or PUT request to a grading endpoint.

Calculating average scores: Pulling peer scores from a backend service to compute and display an actual average.

=== Data Structure ===
<syntaxhighlight lang=\"typescript\">
interface ITeamSubmission {
id: number;
teamName: string;
teamMembers: { name: string; id: number }[];
historyLink: string;
topic?: string;
}
</syntaxhighlight>

=== Frontend Component ===

'''Component:''' <code>AssignGrade.tsx</code>

'''Tech Stack:''' React (TypeScript), Inline CSS (JSX style objects), React Router

<syntaxhighlight lang="typescript">
import { useLocation } from 'react-router-dom';
import { useState } from 'react';

interface ReviewData {
id: number;
reviewer_id: number;
comments: string;
score: number;
created_at: string;
}

const AssignGrade = () => {
const location = useLocation();
const [grade, setGrade] = useState('');
const [comment, setComment] = useState('');
const [showSuccess, setShowSuccess] = useState(false);
const [error, setError] = useState('');

const ReviewTable = ({ title, data }: { title: string; data: ReviewData[] }) => (
<div style={{ margin: '2rem 0' }}>
<h4 style={{
fontSize: '1.1rem',
fontWeight: 'bold',
borderBottom: '2px solid #eee',
paddingBottom: '0.5rem',
marginBottom: '1rem'
}}>
{title}
</h4>
<div style={{
border: '1px solid #ddd',
borderRadius: '8px',
overflow: 'hidden'
}}>
<div style={{
display: 'flex',
backgroundColor: '#f8f9fa',
padding: '1rem',
borderBottom: '1px solid #ddd'
}}>
<div style={{ flex: 1, fontWeight: 600 }}>Reviewer</div>
<div style={{ flex: 3, fontWeight: 600 }}>Comments</div>
<div style={{ flex: 1, fontWeight: 600 }}>Score</div>
<div style={{ flex: 1, fontWeight: 600 }}>Date</div>
</div>
{data.map((review) => (
<div key={review.id} style={{
display: 'flex',
padding: '1rem',
borderBottom:
data.indexOf(review) === data.length - 1
? 'none'
: '1px solid #ddd'
}}>
<div style={{ flex: 1 }}>User #{review.reviewer_id}</div>
<div style={{ flex: 3 }}>{review.comments}</div>
<div style={{ flex: 1 }}>{review.score}/5</div>
<div style={{ flex: 1 }}>
{new Date(review.created_at).toLocaleDateString()}
</div>
</div>
))}
</div>
</div>
);

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();

if (!grade.trim() || !comment.trim()) {
setError('Both grade and comment are required');
return;
}

setError('');
console.log('Grade:', grade, 'Comment:', comment);
setShowSuccess(true);
};

const styles = {
container: {
maxWidth: '700px',
margin: '2rem auto',
padding: '2rem',
backgroundColor: '#fff',
borderRadius: '10px',
boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
fontFamily: 'Arial, sans-serif',
},
heading: {
fontSize: '1.8rem',
fontWeight: 'bold',
marginBottom: '1rem',
},
label: {
fontWeight: 'bold',
display: 'block',
marginBottom: '0.5rem',
},
input: {
width: '100%',
padding: '0.6rem',
border: '1px solid #ccc',
borderRadius: '5px',
marginBottom: '1rem',
},
textarea: {
width: '100%',
padding: '0.6rem',
border: '1px solid #ccc',
borderRadius: '5px',
marginBottom: '1rem',
},
button: {
padding: '0.6rem 1.2rem',
border: '1px solid #888',
backgroundColor: '#f0f0f0',
borderRadius: '5px',
cursor: 'pointer',
},
message: {
marginBottom: '1rem',
padding: '0.75rem',
borderRadius: '6px',
},
success: {
backgroundColor: '#d1fae5',
color: '#065f46',
border: '1px solid #10b981',
},
error: {
backgroundColor: '#fee2e2',
color: '#b91c1c',
border: '1px solid #ef4444',
},
warning: {
backgroundColor: '#fef3c7',
color: '#92400e',
border: '1px solid #f59e0b',
marginBottom: '0.5rem',
},
badge: {
backgroundColor: '#d1fae5',
color: '#065f46',
padding: '0.2rem 0.5rem',
borderRadius: '6px',
fontSize: '0.9rem',
},
};

return (
<div style={styles.container}>
{showSuccess && (
<div style={{ ...styles.message, ...styles.success }}>
Grade and comment for submission successfully saved.
</div>
)}

<h1 style={styles.heading}>
Summary Report for assignment: Program 1
</h1>

<div style={{ marginBottom: '1rem' }}>
<span style={styles.label}>Team:</span>
{location.state?.teamName || 'Unknown Team'}
</div>

<div style={{ marginBottom: '1rem' }}>
<span style={styles.label}>Average peer review score:</span>
<span style={styles.badge}>N/A</span>
</div>

<button style={styles.button}>Show Submission</button>

<ReviewTable
title="Author Feedback Reviews"
data={[
{
id: 1,
reviewer_id: 4,
comments: "Excellent documentation quality",
score: 4.5,
created_at: "2023-10-05T14:48:00Z"
},
{
id: 2,
reviewer_id: 5,
comments: "Very thorough implementation",
score: 4.8,
created_at: "2023-10-05T15:12:00Z"
}
]}
/>

<ReviewTable
title="Teammate Reviews"
data={[
{
id: 3,
reviewer_id: 5,
comments: "Great collaboration skills",
score: 4.0,
created_at: "2023-10-05T15:30:00Z"
},
{
id: 4,
reviewer_id: 4,
comments: "Consistent code quality",
score: 4.2,
created_at: "2023-10-05T16:45:00Z"
}
]}
/>

<h3 style={{ ...styles.label, fontSize: '1.2rem' }}>
Grade and Comment for Submission
</h3>

{error && (
<div style={{ ...styles.message, ...styles.error }}>{error}</div>
)}

<form onSubmit={handleSubmit}>
<label style={styles.label}>Grade:</label>
<input
type="text"
style={styles.input}
value={grade}
onChange={(e) => setGrade(e.target.value)}
/>

<label style={styles.label}>Comment:</label>
<textarea
rows={4}
style={styles.textarea}
value={comment}
onChange={(e) => setComment(e.target.value)}
/>

<button type="submit" style={styles.button}>
Save
</button>
</form>
</div>
);
};

export default AssignGrade;
</syntaxhighlight>

=== Current Limitations ===

'''No Backend Integration Yet:''' All data is hardcoded. Integration with actual APIs for fetching and submitting data is needed to make the page functional.

=== UI Previews ===

'''1. AssignGrade Page''' [[File:AssignGrade1.png|800px|center]]

[[File:AssignGrade2.png|800px|center]]

'''2. Incomplete field alert''' [[File:AssignGrade3.png|800px|center]]
'''3. Submission confirmation '''[[File:AssignGrade4.png|800px|center]]

== User Stories ==

'''1. As an instructor, I want to see submission status at a glance so that I can quickly assess which teams need grading.'''

- Solution: The "View Submissions" page will display submission statuses using color-coded badges (e.g., green for graded, yellow for pending).

- Functionality: Badges dynamically update based on real-time API data & A filter option allows instructors to view only ungraded submissions.

'''2. As a TA, I need to identify missing reviews before assigning grades so that I can ensure all reviews are completed.'''

- Solution: Missing reviews are highlighted visually on the "Assign Grades" page using red icons or warning messages.

- Functionality: A summary section shows the number of missing reviews per team & Incomplete submissions are flagged automatically during form validation.

'''3. As an admin, I require audit trails for grade changes so that I can track modifications made by instructors or TAs.'''

- Solution: An audit log system records every grade change along with timestamps and user details.

- Functionality: Logs include before/after values of grades and reasons for changes (if provided) & Audit logs are accessible via an admin-only interface for review.

'''4. As a mobile user, I need touch-friendly controls so that I can grade submissions easily on my tablet or phone.'''

- Solution: The interface includes larger buttons, touch-friendly dropdowns, and swipe gestures where applicable.

- Functionality: Buttons meet minimum size requirements (48x48px) & Interactive elements are optimized for touch input without requiring precision clicks.

'''5. As an instructor, I want error notifications when something goes wrong so that I can take corrective action without delays.'''

- Solution: A notification system displays errors as toast messages or modals with actionable suggestions (e.g., "Retry" or "Contact Support").

- Functionality: Notifications appear immediately after an error occurs & Detailed error logs are available in case further troubleshooting is needed.

== Use Case Diagram ==
* Actor: Student
** The student initiates the interaction with the system by clicking on **Grades View** from the main page.
* System Boundary
** Once inside the grading/feedback system, the student can:
*** View Grades for a Given Assignment
**** Allows the student to see the overall grading details for a specific assignment.
**** Redirects to the Stats page.
*** Show Submission
**** Displays the submitted work details for the student’s assignment.
**** Redirects to the Submissions page.
*** Show Reviews
**** Displays the peer or instructor reviews received.
**** Redirects to the Reviews page.
*** Show Author Feedback
**** Shows feedback provided by the author (instructor or peer).
**** Redirects to the Author Feedback page.
*** Teammate Review
**** Allows viewing or giving feedback on teammates’ work.
*** Average / Range
**** For each category (assignment, reviews, feedback), the system can display average scores or range of scores.
*** Back
**** Provides an option to navigate back to the main page or the previous screen.
* Redirect to Main Page
** After the student finishes viewing grades, submissions, reviews, or feedback, they can return to the main page.

[[File:2521 Use Case Diagram.jpeg|750px|center]]

== Test Plan ==
{| class="wikitable"
! Test Case ID !! Test Description !! Expected Outcome !! Priority
|-
| TC001 || Verify that the table displays all team submissions accurately. || All rows and columns should display correct data, including team names, members, and submission links. || High
|-
| TC002 || Validate sorting functionality for columns (e.g., team name, submission date). || Columns should sort correctly in ascending and descending order without data loss or duplication. || Medium
|-
| TC003 || Test responsiveness of the table on different screen sizes (mobile, tablet, desktop). || The table layout should adapt seamlessly to various screen sizes, maintaining usability and readability. || High
|-
| TC004 || Check filtering functionality to display only ungraded submissions. || The filter should accurately show teams with pending grades while hiding graded submissions. || Medium
|-
| TC005 || Verify error handling when API fails to fetch submission data. || A user-friendly error message should be displayed, and the table should show a placeholder or retry option. || High
|-
| TC006 || Validate missing review indicators for teams with incomplete peer reviews. || Teams with missing reviews should display visual indicators (e.g., red icons or badges). || High
|-
| TC007 || Test grade submission functionality with valid inputs. || Grades and comments should be successfully submitted, and the system should display a confirmation message. || High
|-
| TC008 || Validate input field restrictions for grades (e.g., range 0-100). || Inputs outside the allowed range should trigger validation errors and prevent submission. || Medium
|-
| TC009 || Check accessibility features like keyboard navigation and screen reader support. || All interactive elements should be accessible via keyboard, and screen readers should announce table content correctly. || High
|-
| TC010 || Verify performance with large datasets (e.g., 500+ teams). || The table should load within 2 seconds and allow smooth scrolling without lag. || High
|}

=== Test Environment ===
The tests use the following libraries and tools:

* '''Jest:''' JavaScript testing framework
* '''React Testing Library:''' Testing utilities for React components
* '''Jest DOM:''' Custom Jest matchers for asserting on DOM elements
* All tests pass successfully, indicating that the ViewSubmissions and AssignGrade components are functioning as expected.

[[File:testcases.png|900px|center]]

== Performance Metrics ==
The performance metrics aim to ensure the application functions efficiently under various conditions, including large datasets and high user activity. These metrics focus on responsiveness, scalability, and reliability.

{| class="wikitable"
! Metric !! Target !! Description
|-
| Page Load Time || < 1.5 seconds || The "View Submissions" page should load within 1.5 seconds for up to 500 teams on a standard broadband connection.
|-
| Grade Submission Time || < 800 milliseconds || Submitting grades and comments should take less than 800 milliseconds, including API response time.
|-
| Mobile Render Time || < 1 second || The interface should render within 1 second on mobile devices with a 3G connection.
|-
| API Error Recovery || < 3 clicks || Users should be able to recover from API errors (e.g., retry or refresh) within three clicks.
|-
| Large Dataset Handling || Smooth scrolling || The table should support virtual scrolling for datasets with 500+ entries without lag or freezing.
|-
| Missing Review Alerts Rendering Time || < 500 milliseconds || Alerts for missing reviews should appear within 500 milliseconds after loading the "Assign Grades" page.
|-
| Accessibility Compliance || WCAG 2.1 AA || All interactive elements must meet WCAG 2.1 AA standards for accessibility.
|}

== User Stories ==

'''1. As an instructor, I want to see submission status at a glance so that I can quickly assess which teams need grading.'''
* The "View Submissions" page will display submission statuses using color-coded badges (e.g., green for graded, yellow for pending).
* Filtering options will allow instructors to view only ungraded submissions.

'''2. As a TA, I need to identify missing reviews before assigning grades so that I can ensure all reviews are completed.'''
* Missing reviews will be highlighted visually on the "Assign Grades" page using red icons or warning messages.
* A summary section will show the number of missing reviews per team.

'''3. As an admin, I require audit trails for grade changes so that I can track modifications made by instructors or TAs.'''
* An audit log system will record every grade change with timestamps, user details, and reasons for changes (if provided).
* Logs will be accessible via an admin-only interface for review.

'''4. As a mobile user, I need touch-friendly controls so that I can grade submissions easily on my tablet or phone.'''
* The interface will include larger buttons, touch-friendly dropdowns, and swipe gestures where applicable.
* Interactive elements will be optimized for touch input without requiring precision clicks.

'''5. As an instructor, I want error notifications when something goes wrong so that I can take corrective action without delays.'''
* A notification system will display errors as toast messages or modals with actionable suggestions (e.g., "Retry" or "Contact Support").
* Notifications will appear immediately after an error occurs.

'''6. As a TA, I want to sort and filter submissions easily so that I can focus on specific teams or criteria.'''
* Sorting functionality will allow table columns to be organized by team name, submission date, or grading status.
* Filtering options will enable TAs to display submissions based on specific criteria (e.g., ungraded teams).

'''7. As an instructor, I want to assign grades and comments efficiently so that I can complete grading tasks quickly.'''
* Input fields for grades and comments will include real-time validation to ensure data integrity.
* Missing peer reviews will be flagged visually to ensure all required steps are completed before submission.

'''8. As an admin, I want performance reports so that I can monitor system efficiency during peak usage periods.'''
* Performance reports will include metrics like page load times, API response times, and error rates during high user activity.

== Conclusion ==

The redesigned "View Submissions" and "Assign Grades" pages aim to streamline the grading workflow for instructors and TAs while ensuring accessibility, responsiveness, and reliability. By incorporating modular components, real-time API integration, and robust error-handling mechanisms, the system will provide a user-friendly interface that enhances functionality and usability.

Key features such as dynamic table rendering, missing review indicators, and audit trails ensure that grading tasks are efficient and transparent. Additionally, the focus on accessibility and mobile optimization guarantees inclusivity and usability across all devices.

Through adherence to best practices like component reusability, separation of concerns, and performance optimization, this project sets the foundation for future upgrades, including heatgrid integration. The implementation plan aligns with user needs and ensures scalability for handling large datasets without compromising performance.

This project will significantly improve the grading experience within Expertiza by delivering a modern, intuitive, and reliable solution that meets the expectations of instructors, TAs, admins, and mobile users alike.

== Team ==

=== Mentor ===
* '''Prathyusha Kodali''' (pkodali@ncsu.edu)

=== Members ===
* '''Raj Patel''' (rbpatel4@ncsu.edu)
* '''Aditya Pai''' (aapai@ncsu.edu)
* '''Parth Kulkarni''' (pnkulka2@ncsu.edu)

== Contributors to this project ==
* '''Raj Patel''' (unityid: rbpatel4, github: Raj-mac24)
* '''Aditya Pai''' (unityid: aapai, github: aditya-pai-nc)
* '''Parth Kulkarni''' (unityid: pnkulka2, github: ParthK7)
* '''Github repo''' https://github.com/aditya-pai-nc/reimplementation-front-end
* '''Backend Hosted on VCL''' http://152.7.178.127:3002/api-docs/index.html

File:AssignGrade4.png

2025-04-21T04:17:48Z

Pnkulka2:

File:AssignGrade3.png

2025-04-21T04:17:29Z

Pnkulka2:

File:AssignGrade2.png

2025-04-21T04:17:08Z

Pnkulka2:

File:AssignGrade1.png

2025-04-21T04:16:43Z

Pnkulka2:

CSC/ECE 517 Spring 2025 - E2521 UI for View submissions/assign grades (except heatgrid)

2025-04-21T04:01:27Z

Pnkulka2: /* 1. View Submissions Page */

== Introduction ==
=== Project Overview ===
This project aims to enhance the grading interface in Expertiza by implementing two key pages:

'''1. View Submissions Page:''' Displays team submissions with resource links and history.

'''2. Assign Grades Page:''' Enables instructors to assign grades and provide comments, integrating peer review data.

The redesigned interface will simplify workflows for instructors and TAs by incorporating real-time API integration, responsive design, and a clear visual hierarchy. The goal is to reduce clutter, improve accessibility, and ensure seamless functionality on all devices.

== Design Goals ==
To ensure a user-friendly, efficient, and maintainable interface, the following design principles are adopted:

* '''Clarity:''' Information should be presented in an easily digestible format. This helps instructors quickly locate relevant data without being overwhelmed by unnecessary details.
* '''Accessibility:''' The interface must comply with WCAG 2.1 standards to ensure usability for all users, including those with disabilities. Features like ARIA roles, keyboard navigation, and proper contrast ratios will be implemented.
* '''Modularity:''' By designing reusable React components (e.g., tables, forms), we adhere to the DRY principle, reducing redundancy and simplifying future updates.
* '''Real-Time Synchronization:''' Instant feedback through API integration ensures that users always work with the latest data. This is critical for grading workflows where delays can cause confusion.
* '''Error Resilience:''' Robust error handling ensures that users receive clear notifications when something goes wrong (e.g., failed API calls or invalid inputs), improving trust in the system.

=== Why These Principles? ===

'''1. Clarity:''' Instructors often deal with large datasets (e.g., multiple teams and submissions). A cluttered interface can slow down their workflow. By focusing on clarity, we aim to streamline their experience and reduce cognitive load.

'''2. Accessibility:''' Accessibility ensures inclusivity. Meeting WCAG standards makes the system usable for everyone, including those relying on assistive technologies like screen readers or keyboard navigation.

'''3. Modularity:''' Modular components reduce development time for future features (e.g., heatgrid integration) and make debugging easier by isolating functionality into smaller units.

'''4. Real-Time Synchronization:''' Grading workflows require up-to-date information to avoid errors (e.g., grading based on outdated peer reviews). Real-time sync ensures data accuracy.

'''5. Error Resilience:''' Instructors need immediate feedback when something goes wrong (e.g., submitting incomplete grades). Clear error messages prevent frustration and guide users toward resolution.

== Current UI Limitations ==
[[File:UI-1.png|900px|center]]

[[File:UI-2.png|900px|center]]
- The current layout is cluttered with overlapping action links.

- No visual distinction between graded and ungraded submissions.

- Missing review indicators are not prominent.

- Tables overflow horizontally on smaller screens.

- Error handling is inconsistent or absent.

== Proposed Implementation ==

=== 1. Optimized View Submissions Table ===
The revamped "View Submissions" table serves as a central hub for instructors to access and evaluate team performance efficiently. It is designed to be responsive, informative, and action-oriented, and is fully integrated with backend APIs to ensure data is always current.

'''Key Features:'''

'''Responsive Design:''' Adapts to mobile, tablet, and desktop screens. Columns collapse intelligently to ensure readability.

'''Team Overview:''' Each row lists the team name, associated members, and their submission topic, all fetched dynamically from the backend.

'''Direct Action Links:''' Provides context-aware links such as "Assign Grade" and "View History" within the table.

'''Visual Feedback:''' Highlights missing or incomplete submissions, allowing instructors to take quick action.

'''Integrated Accessibility:''' Table supports screen readers and keyboard navigation out of the box.

'''Performance Optimized:''' Efficient rendering through virtual scrolling and memoization for large datasets.

'''Backend Integration:''' Data is retrieved via RESTful API endpoints, enabling real-time synchronization with the Expertiza database.

=== 2. Grade Assignment Form ===
The "Assign Grades" page will allow instructors to assign grades and provide comments while integrating peer review data.

Key Features:

- Color-coded alerts for missing reviews.

- Auto-save draft functionality to prevent accidental data loss.

- Rubric-based score suggestions for consistent grading.

=== 3. Error Handling System ===

Error handling is essential to ensure a seamless user experience and system reliability. The error-handling system will address three key areas: '''user input validation''', '''API communication errors''', and '''unexpected system-level failures'''.

'''User Input Validation:'''

- Validates user inputs on the client side to prevent invalid data submissions.

- Ensures required fields (e.g., grades, comments) are completed before submission.

- Provides immediate feedback through visual indicators such as error messages or field highlights.

- Prevents submission until all fields meet validation criteria.

'''API Communication Errors:'''

- Handles network issues, server downtime, or incorrect API responses gracefully.

- Displays contextual error messages (e.g., "Failed to fetch submissions. Please try again later.") to keep users informed.

- Implements retry mechanisms with exponential backoff for transient errors.

- Logs errors for debugging without exposing sensitive information.

'''System-Level Failures:'''

- Catches unexpected rendering errors using error boundaries at the React component level.

- Displays fallback UI with user-friendly messages like "Something went wrong. Please refresh the page."

- Provides options for users to report issues directly to the support team.

=== Key Features ===

* '''Error Classification:''' Errors are categorized into validation, network, and server-side errors for targeted handling.
* '''Error Recovery:''' Users can retry failed actions (e.g., reloading data or resubmitting grades).
* '''User Notifications:''' Immediate feedback is provided via toast messages or modals with actionable suggestions.
* '''Logging and Monitoring:''' Errors are logged for developers to analyze and proactively fix issues.

== Implementation ==

The frontend implementation focuses on creating a modular, responsive, and accessible interface that integrates seamlessly with backend APIs. It adheres to best practices like separation of concerns, reusability, and responsiveness.

'''State Management:'''

- A centralized state management solution will be used to manage data such as team submissions, grading drafts, and API responses.

- This ensures efficient data sharing across components without unnecessary re-renders.

'''Dynamic Table Rendering:'''

- The "View Submissions" page will feature a responsive table layout that adapts to different screen sizes.

- Columns with lower priority (e.g., team member names) will collapse on smaller screens for better usability.

- Virtual scrolling will be implemented for large datasets to enhance performance.

'''Form Handling on Assign Grades Page:'''

- Includes input fields for grades and comments with real-time validation to ensure data integrity.

- Highlights missing peer reviews visually (e.g., using red icons or badges) so instructors can address them before submitting grades.

'''Responsive Design:'''

- Ensures the interface adapts to various screen sizes using CSS media queries and responsive layouts.

- Implements touch-friendly controls (e.g., larger buttons) for mobile users.

'''Error Handling Integration:'''

- Displays error messages prominently on the UI (e.g., banners or modals) for failed API calls.

- Uses fallback UI for unexpected rendering errors.

'''Reusable Components:'''

- Modular components like tables, forms, and buttons ensure consistency across pages and simplify future maintenance.

- Components follow the Single Responsibility Principle for better testability and scalability.

'''Accessibility Features:'''

- ARIA roles and attributes are added to components for enhanced screen reader support.

- Keyboard navigation is supported for all interactive elements.

- Color contrast ratios meet WCAG standards for readability.

== 1. View Submissions Page ==

=== Objective ===
The View Submissions page in Expertiza provides instructors and TAs with a streamlined, responsive interface to evaluate team submissions. This modernized interface includes full backend integration, dynamic UI rendering, accessibility support, and robust error handling.

=== Key Features ===

* '''Fully Integrated with Backend:''' All team data is fetched dynamically using RESTful API, developed required backend for the task.
* '''Responsive UI:''' Layout adapts seamlessly across mobile, tablet, and desktop.
* '''Actionable Buttons:''' Each row includes direct links for "Assign Grade" and "View History".
* '''Accessibility Features:''' ARIA tags, keyboard navigation, and screen reader support.
* '''Optimized Performance:''' Virtual scrolling and memoization ensure smooth rendering.
* '''Real-Time Synchronization:''' Live data synced with Expertiza backend.

=== Data Structure ===
<syntaxhighlight lang=\"typescript\">
interface ITeamSubmission {
id: number;
teamName: string;
teamMembers: { name: string; id: number }[];
historyLink: string;
topic?: string;
}
</syntaxhighlight>

=== Frontend Component ===

'''Component:''' <code>ViewSubmissions.tsx</code>

<syntaxhighlight lang="typescript">
import React, { useMemo } from 'react';
import { createColumnHelper } from "@tanstack/react-table";
import Table from "components/Table/Table";
import { useLoaderData } from 'react-router-dom';
import { ITeamRow, TeamSubmission } from './AssignmentUtil';

// Column helper to define typed table columns
const columnHelper = createColumnHelper<ITeamRow>();

const ViewSubmissions: React.FC = () => {
// Fetch data loaded from route loader (assignment teams)
const assignment = useLoaderData() as TeamSubmission[];

// Transform the backend response to a table-friendly structure
const submissions = useMemo<ITeamRow[]>(() =>
assignment.map((team) => ({
id: team.id,
teamName: team.name,
teamMembers: team.members,
historyLink: `/history/${team.team_id}`,
}))
, [assignment]);

// Define the columns used in the table
const columns = useMemo(() => [
columnHelper.accessor('teamName', {
header: 'Team Name',
cell: info => (
<div style={{ color: 'brown', fontWeight: 'bold' }}>
{info.getValue()}
</div>
),
}),
columnHelper.accessor('teamMembers', {
header: 'Team Member(s)',
cell: info => (
<div>
{info.getValue().map((member) => (
<div key={member.id}>
<a href={`/students/${member.id}`} style={{ color: '#b44' }}>
{member.name}
</a>
</div>
))}
</div>
),
}),
columnHelper.display({
id: 'links',
header: 'Links',
cell: ({ row }) => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<a
href={`/assign_grade/${row.original.id}`}
style={{ color: '#b44', marginBottom: '4px' }}
>
Assign Grade
</a>
<a
href={row.original.historyLink}
style={{ color: '#b44' }}
>
History
</a>
</div>
),
}),
], []);

return (
<div className="mt-4">
<h1 className="text-center">
View Submissions - {assignment[0]?.topic || 'Assignment'}
</h1>

<hr />

{/* Render dynamic table of submissions */}
<Table
data={submissions}
columns={columns}
columnVisibility={{
id: false, // Hide the 'id' column from UI
}}
/>
</div>
);
};

export default ViewSubmissions;
</syntaxhighlight>

* Fetches data with <code>loadAssignmentTeams()</code> via the route's loader
<syntaxhighlight lang="typescript">
// Middleware to fetch teams for assignment
export async function loadAssignmentTeams({ params }: {id:string}) {
let teamsData = [];

if (params.id) {
const response = await axiosClient.get(`/assignments/${params.id}/teams`);
teamsData = response.data;
}

return teamsData;
}
</syntaxhighlight>

* Uses <code>@tanstack/react-table</code> with <code>createColumnHelper</code> for table config
* Displays columns: Team Name, Members, Assign Grade, and History
* Bootstrap-styled; includes keyboard and screen reader accessibility

=== Backend Controller Code ===
<syntaxhighlight lang="ruby">
def teams
assignment = Assignment.find_by(id: params[:assignment_id])

if assignment.nil?
render json: { error: "Assignment not found" }, status: :not_found
return
end

submissions = if assignment.has_teams?
assignment.teams.includes(:teams_users => :user).map do |team|
signed_up_team = team.signed_up_teams.first
topic = signed_up_team&.sign_up_topic&.topic_name

{
id: team.id,
name: team.name,
team_id: team.id,
topic: topic,
members: team.teams_users.map { |tu| { id: tu.user.id, name: tu.user.name } }
}
end
else
assignment.participants.includes(:user).map do |participant|
{
id: participant.id,
name: participant.user.name,
team_id: nil,
topic: nil,
members: [{ id: participant.user.id, name: participant.user.name }]
}
end
end

render json: submissions, status: :ok
end
</syntaxhighlight>

=== API Documentation ===
* '''Endpoint:''' <code>GET /api/v1/assignments/:assignment_id/teams</code>
* '''Returns:''' Array of team info, members, and topic
* '''Swagger Docs:''' [http://152.7.177.242:3002/api-docs/index.html Swagger UI]

=== Sample JSON Response ===
<syntaxhighlight lang="json">
[
{
"id": 9,
"name": "Texas penguins",
"team_id": 9,
"topic": "Progressive fresh-thinking middleware",
"members": [
{ "id": 20, "name": "erlinda.grimes" },
{ "id": 21, "name": "lawanda.wilkinson" }
]
}
]
</syntaxhighlight>

=== Seeding Changes ===

To test the View Submissions feature thoroughly, we updated `db/seeds.rb` to include realistic assignments, topics, teams, and student-user mappings.

<syntaxhighlight lang="ruby">
# SignUpTopics
signup_topics = assignments.flat_map do |assignment|
5.times.map do
SignUpTopic.create!(
topic_name: Faker::Company.catch_phrase,
assignment_id: assignment.id,
max_choosers: 2,
category: "Default",
topic_identifier: Faker::Alphanumeric.alpha(number: 8).upcase,
description: Faker::Lorem.sentence
)
end
end

# SignedUpTeams
teams.each_with_index do |team, idx|
SignedUpTeam.create!(
sign_up_topic_id: signup_topics[idx % signup_topics.length].id,
team_id: team.id,
is_waitlisted: false,
preference_priority_number: 1
)
end

# Participants
students.each_with_index do |student, idx|
Participant.create!(
user_id: student.id,
assignment_id: assignments[idx % assignments.length].id,
team_id: teams[idx % teams.length].id
)
end
</syntaxhighlight>

* Ensures every team has students, a valid assignment, and a topic
* Prepares data for consistent API response
* Essential for local testing and API verification

This implementation was inspired by prior work in the Expertiza backend [https://github.com/expertiza/reimplementation-back-end/pull/173 (PR #173)], and extended in our custom implementation documented here: [https://github.com/expertiza/reimplementation-back-end/pull/190 (PR #190)].

=== UI Previews ===
Visual confirmation of the working interface with accessible design, action buttons, and responsive layout.

==== View Assignments Page ====

'''1. Desktop View'''
[[File:ass-1-ui.png|800px|center]]

'''2. Mobile View'''
[[File:ass-1-ui-2.png|400px|center]]

'''3. Network Request'''
[[File:ass-1-net-1.png|800px|center]]

=== View Submissions Page ===

'''1. Desktop View'''
[[File:ass-2-ui.png|800px|center]]

'''2. Mobile View'''
[[File:ass-2-ui-2.png|400px|center]]

'''3. Network Request'''
[[File:ass-2-net-1.png|800px|center]]

== 2. Assign Grade Page ==

=== Objective ===
The Assign Grade page offers instructors and TAs a clean, focused interface to view a selected team’s peer review feedback and submit final grades and comments for a given assignment. It aims to facilitate final assessment while ensuring all required fields are completed.

=== Key Features ===

'''Team Overview & Submission Summary:''' The page prominently displays the selected team's name and placeholder data for the assignment name and average peer review score.

'''Dynamic Review Tables:''' Two sections show structured feedback: Author Feedback Reviews and Teammate Reviews. Each table entry includes the reviewer’s ID, comments, score, and date, offering a transparent view of peer evaluation.

'''Grade Submission Form:''' Inputs for grade and instructor comments. A "Save" button to confirm and log the grading action. Validates input fields, preventing empty submissions and displaying appropriate error messages.

'''Visual Feedback:''' Success and error alerts provide immediate UI feedback upon submission or missing inputs. Subtle UI enhancements such as card-style boxes, badges, and table formatting for clarity and user comfort.

'''Placeholder for Backend Integration:''' Currently, the grade and comment submission is logged via console.log. Integration with backend APIs can be achieved by:

Fetching peer review data: Using an API to dynamically populate review tables.

Submitting grades/comments: Making a POST or PUT request to a grading endpoint.

Calculating average scores: Pulling peer scores from a backend service to compute and display an actual average.

=== Data Structure ===
<syntaxhighlight lang=\"typescript\">
interface ITeamSubmission {
id: number;
teamName: string;
teamMembers: { name: string; id: number }[];
historyLink: string;
topic?: string;
}
</syntaxhighlight>

=== Frontend Component ===

'''Component:''' <code>AssignGrade.tsx</code>

'''Tech Stack:''' React (TypeScript), Inline CSS (JSX style objects), React Router

<syntaxhighlight lang="typescript">
import { useLocation } from 'react-router-dom';
import { useState } from 'react';

interface ReviewData {
id: number;
reviewer_id: number;
comments: string;
score: number;
created_at: string;
}

const AssignGrade = () => {
const location = useLocation();
const [grade, setGrade] = useState('');
const [comment, setComment] = useState('');
const [showSuccess, setShowSuccess] = useState(false);
const [error, setError] = useState('');

const ReviewTable = ({ title, data }: { title: string; data: ReviewData[] }) => (
<div style={{ margin: '2rem 0' }}>
<h4 style={{
fontSize: '1.1rem',
fontWeight: 'bold',
borderBottom: '2px solid #eee',
paddingBottom: '0.5rem',
marginBottom: '1rem'
}}>
{title}
</h4>
<div style={{
border: '1px solid #ddd',
borderRadius: '8px',
overflow: 'hidden'
}}>
<div style={{
display: 'flex',
backgroundColor: '#f8f9fa',
padding: '1rem',
borderBottom: '1px solid #ddd'
}}>
<div style={{ flex: 1, fontWeight: 600 }}>Reviewer</div>
<div style={{ flex: 3, fontWeight: 600 }}>Comments</div>
<div style={{ flex: 1, fontWeight: 600 }}>Score</div>
<div style={{ flex: 1, fontWeight: 600 }}>Date</div>
</div>
{data.map((review) => (
<div key={review.id} style={{
display: 'flex',
padding: '1rem',
borderBottom:
data.indexOf(review) === data.length - 1
? 'none'
: '1px solid #ddd'
}}>
<div style={{ flex: 1 }}>User #{review.reviewer_id}</div>
<div style={{ flex: 3 }}>{review.comments}</div>
<div style={{ flex: 1 }}>{review.score}/5</div>
<div style={{ flex: 1 }}>
{new Date(review.created_at).toLocaleDateString()}
</div>
</div>
))}
</div>
</div>
);

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();

if (!grade.trim() || !comment.trim()) {
setError('Both grade and comment are required');
return;
}

setError('');
console.log('Grade:', grade, 'Comment:', comment);
setShowSuccess(true);
};

const styles = {
container: {
maxWidth: '700px',
margin: '2rem auto',
padding: '2rem',
backgroundColor: '#fff',
borderRadius: '10px',
boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
fontFamily: 'Arial, sans-serif',
},
heading: {
fontSize: '1.8rem',
fontWeight: 'bold',
marginBottom: '1rem',
},
label: {
fontWeight: 'bold',
display: 'block',
marginBottom: '0.5rem',
},
input: {
width: '100%',
padding: '0.6rem',
border: '1px solid #ccc',
borderRadius: '5px',
marginBottom: '1rem',
},
textarea: {
width: '100%',
padding: '0.6rem',
border: '1px solid #ccc',
borderRadius: '5px',
marginBottom: '1rem',
},
button: {
padding: '0.6rem 1.2rem',
border: '1px solid #888',
backgroundColor: '#f0f0f0',
borderRadius: '5px',
cursor: 'pointer',
},
message: {
marginBottom: '1rem',
padding: '0.75rem',
borderRadius: '6px',
},
success: {
backgroundColor: '#d1fae5',
color: '#065f46',
border: '1px solid #10b981',
},
error: {
backgroundColor: '#fee2e2',
color: '#b91c1c',
border: '1px solid #ef4444',
},
warning: {
backgroundColor: '#fef3c7',
color: '#92400e',
border: '1px solid #f59e0b',
marginBottom: '0.5rem',
},
badge: {
backgroundColor: '#d1fae5',
color: '#065f46',
padding: '0.2rem 0.5rem',
borderRadius: '6px',
fontSize: '0.9rem',
},
};

return (
<div style={styles.container}>
{showSuccess && (
<div style={{ ...styles.message, ...styles.success }}>
Grade and comment for submission successfully saved.
</div>
)}

<h1 style={styles.heading}>
Summary Report for assignment: Program 1
</h1>

<div style={{ marginBottom: '1rem' }}>
<span style={styles.label}>Team:</span>
{location.state?.teamName || 'Unknown Team'}
</div>

<div style={{ marginBottom: '1rem' }}>
<span style={styles.label}>Average peer review score:</span>
<span style={styles.badge}>N/A</span>
</div>

<button style={styles.button}>Show Submission</button>

<ReviewTable
title="Author Feedback Reviews"
data={[
{
id: 1,
reviewer_id: 4,
comments: "Excellent documentation quality",
score: 4.5,
created_at: "2023-10-05T14:48:00Z"
},
{
id: 2,
reviewer_id: 5,
comments: "Very thorough implementation",
score: 4.8,
created_at: "2023-10-05T15:12:00Z"
}
]}
/>

<ReviewTable
title="Teammate Reviews"
data={[
{
id: 3,
reviewer_id: 5,
comments: "Great collaboration skills",
score: 4.0,
created_at: "2023-10-05T15:30:00Z"
},
{
id: 4,
reviewer_id: 4,
comments: "Consistent code quality",
score: 4.2,
created_at: "2023-10-05T16:45:00Z"
}
]}
/>

<h3 style={{ ...styles.label, fontSize: '1.2rem' }}>
Grade and Comment for Submission
</h3>

{error && (
<div style={{ ...styles.message, ...styles.error }}>{error}</div>
)}

<form onSubmit={handleSubmit}>
<label style={styles.label}>Grade:</label>
<input
type="text"
style={styles.input}
value={grade}
onChange={(e) => setGrade(e.target.value)}
/>

<label style={styles.label}>Comment:</label>
<textarea
rows={4}
style={styles.textarea}
value={comment}
onChange={(e) => setComment(e.target.value)}
/>

<button type="submit" style={styles.button}>
Save
</button>
</form>
</div>
);
};

export default AssignGrade;
</syntaxhighlight>

=== Current Limitations ===

'''No Backend Integration Yet:''' All data is hardcoded. Integration with actual APIs for fetching and submitting data is needed to make the page functional.

== User Stories ==

'''1. As an instructor, I want to see submission status at a glance so that I can quickly assess which teams need grading.'''

- Solution: The "View Submissions" page will display submission statuses using color-coded badges (e.g., green for graded, yellow for pending).

- Functionality: Badges dynamically update based on real-time API data & A filter option allows instructors to view only ungraded submissions.

'''2. As a TA, I need to identify missing reviews before assigning grades so that I can ensure all reviews are completed.'''

- Solution: Missing reviews are highlighted visually on the "Assign Grades" page using red icons or warning messages.

- Functionality: A summary section shows the number of missing reviews per team & Incomplete submissions are flagged automatically during form validation.

'''3. As an admin, I require audit trails for grade changes so that I can track modifications made by instructors or TAs.'''

- Solution: An audit log system records every grade change along with timestamps and user details.

- Functionality: Logs include before/after values of grades and reasons for changes (if provided) & Audit logs are accessible via an admin-only interface for review.

'''4. As a mobile user, I need touch-friendly controls so that I can grade submissions easily on my tablet or phone.'''

- Solution: The interface includes larger buttons, touch-friendly dropdowns, and swipe gestures where applicable.

- Functionality: Buttons meet minimum size requirements (48x48px) & Interactive elements are optimized for touch input without requiring precision clicks.

'''5. As an instructor, I want error notifications when something goes wrong so that I can take corrective action without delays.'''

- Solution: A notification system displays errors as toast messages or modals with actionable suggestions (e.g., "Retry" or "Contact Support").

- Functionality: Notifications appear immediately after an error occurs & Detailed error logs are available in case further troubleshooting is needed.

== Use Case Diagram ==
* Actor: Student
** The student initiates the interaction with the system by clicking on **Grades View** from the main page.
* System Boundary
** Once inside the grading/feedback system, the student can:
*** View Grades for a Given Assignment
**** Allows the student to see the overall grading details for a specific assignment.
**** Redirects to the Stats page.
*** Show Submission
**** Displays the submitted work details for the student’s assignment.
**** Redirects to the Submissions page.
*** Show Reviews
**** Displays the peer or instructor reviews received.
**** Redirects to the Reviews page.
*** Show Author Feedback
**** Shows feedback provided by the author (instructor or peer).
**** Redirects to the Author Feedback page.
*** Teammate Review
**** Allows viewing or giving feedback on teammates’ work.
*** Average / Range
**** For each category (assignment, reviews, feedback), the system can display average scores or range of scores.
*** Back
**** Provides an option to navigate back to the main page or the previous screen.
* Redirect to Main Page
** After the student finishes viewing grades, submissions, reviews, or feedback, they can return to the main page.

[[File:2521 Use Case Diagram.jpeg|750px|center]]

== Test Plan ==
{| class="wikitable"
! Test Case ID !! Test Description !! Expected Outcome !! Priority
|-
| TC001 || Verify that the table displays all team submissions accurately. || All rows and columns should display correct data, including team names, members, and submission links. || High
|-
| TC002 || Validate sorting functionality for columns (e.g., team name, submission date). || Columns should sort correctly in ascending and descending order without data loss or duplication. || Medium
|-
| TC003 || Test responsiveness of the table on different screen sizes (mobile, tablet, desktop). || The table layout should adapt seamlessly to various screen sizes, maintaining usability and readability. || High
|-
| TC004 || Check filtering functionality to display only ungraded submissions. || The filter should accurately show teams with pending grades while hiding graded submissions. || Medium
|-
| TC005 || Verify error handling when API fails to fetch submission data. || A user-friendly error message should be displayed, and the table should show a placeholder or retry option. || High
|-
| TC006 || Validate missing review indicators for teams with incomplete peer reviews. || Teams with missing reviews should display visual indicators (e.g., red icons or badges). || High
|-
| TC007 || Test grade submission functionality with valid inputs. || Grades and comments should be successfully submitted, and the system should display a confirmation message. || High
|-
| TC008 || Validate input field restrictions for grades (e.g., range 0-100). || Inputs outside the allowed range should trigger validation errors and prevent submission. || Medium
|-
| TC009 || Check accessibility features like keyboard navigation and screen reader support. || All interactive elements should be accessible via keyboard, and screen readers should announce table content correctly. || High
|-
| TC010 || Verify performance with large datasets (e.g., 500+ teams). || The table should load within 2 seconds and allow smooth scrolling without lag. || High
|}

=== Test Environment ===
The tests use the following libraries and tools:

* '''Jest:''' JavaScript testing framework
* '''React Testing Library:''' Testing utilities for React components
* '''Jest DOM:''' Custom Jest matchers for asserting on DOM elements
* All tests pass successfully, indicating that the ViewSubmissions and AssignGrade components are functioning as expected.

[[File:testcases.png|900px|center]]

== Performance Metrics ==
The performance metrics aim to ensure the application functions efficiently under various conditions, including large datasets and high user activity. These metrics focus on responsiveness, scalability, and reliability.

{| class="wikitable"
! Metric !! Target !! Description
|-
| Page Load Time || < 1.5 seconds || The "View Submissions" page should load within 1.5 seconds for up to 500 teams on a standard broadband connection.
|-
| Grade Submission Time || < 800 milliseconds || Submitting grades and comments should take less than 800 milliseconds, including API response time.
|-
| Mobile Render Time || < 1 second || The interface should render within 1 second on mobile devices with a 3G connection.
|-
| API Error Recovery || < 3 clicks || Users should be able to recover from API errors (e.g., retry or refresh) within three clicks.
|-
| Large Dataset Handling || Smooth scrolling || The table should support virtual scrolling for datasets with 500+ entries without lag or freezing.
|-
| Missing Review Alerts Rendering Time || < 500 milliseconds || Alerts for missing reviews should appear within 500 milliseconds after loading the "Assign Grades" page.
|-
| Accessibility Compliance || WCAG 2.1 AA || All interactive elements must meet WCAG 2.1 AA standards for accessibility.
|}

== User Stories ==

'''1. As an instructor, I want to see submission status at a glance so that I can quickly assess which teams need grading.'''
* The "View Submissions" page will display submission statuses using color-coded badges (e.g., green for graded, yellow for pending).
* Filtering options will allow instructors to view only ungraded submissions.

'''2. As a TA, I need to identify missing reviews before assigning grades so that I can ensure all reviews are completed.'''
* Missing reviews will be highlighted visually on the "Assign Grades" page using red icons or warning messages.
* A summary section will show the number of missing reviews per team.

'''3. As an admin, I require audit trails for grade changes so that I can track modifications made by instructors or TAs.'''
* An audit log system will record every grade change with timestamps, user details, and reasons for changes (if provided).
* Logs will be accessible via an admin-only interface for review.

'''4. As a mobile user, I need touch-friendly controls so that I can grade submissions easily on my tablet or phone.'''
* The interface will include larger buttons, touch-friendly dropdowns, and swipe gestures where applicable.
* Interactive elements will be optimized for touch input without requiring precision clicks.

'''5. As an instructor, I want error notifications when something goes wrong so that I can take corrective action without delays.'''
* A notification system will display errors as toast messages or modals with actionable suggestions (e.g., "Retry" or "Contact Support").
* Notifications will appear immediately after an error occurs.

'''6. As a TA, I want to sort and filter submissions easily so that I can focus on specific teams or criteria.'''
* Sorting functionality will allow table columns to be organized by team name, submission date, or grading status.
* Filtering options will enable TAs to display submissions based on specific criteria (e.g., ungraded teams).

'''7. As an instructor, I want to assign grades and comments efficiently so that I can complete grading tasks quickly.'''
* Input fields for grades and comments will include real-time validation to ensure data integrity.
* Missing peer reviews will be flagged visually to ensure all required steps are completed before submission.

'''8. As an admin, I want performance reports so that I can monitor system efficiency during peak usage periods.'''
* Performance reports will include metrics like page load times, API response times, and error rates during high user activity.

== Conclusion ==

The redesigned "View Submissions" and "Assign Grades" pages aim to streamline the grading workflow for instructors and TAs while ensuring accessibility, responsiveness, and reliability. By incorporating modular components, real-time API integration, and robust error-handling mechanisms, the system will provide a user-friendly interface that enhances functionality and usability.

Key features such as dynamic table rendering, missing review indicators, and audit trails ensure that grading tasks are efficient and transparent. Additionally, the focus on accessibility and mobile optimization guarantees inclusivity and usability across all devices.

Through adherence to best practices like component reusability, separation of concerns, and performance optimization, this project sets the foundation for future upgrades, including heatgrid integration. The implementation plan aligns with user needs and ensures scalability for handling large datasets without compromising performance.

This project will significantly improve the grading experience within Expertiza by delivering a modern, intuitive, and reliable solution that meets the expectations of instructors, TAs, admins, and mobile users alike.

== Team ==

=== Mentor ===
* '''Prathyusha Kodali''' (pkodali@ncsu.edu)

=== Members ===
* '''Raj Patel''' (rbpatel4@ncsu.edu)
* '''Aditya Pai''' (aapai@ncsu.edu)
* '''Parth Kulkarni''' (pnkulka2@ncsu.edu)

== Contributors to this project ==
* '''Raj Patel''' (unityid: rbpatel4, github: Raj-mac24)
* '''Aditya Pai''' (unityid: aapai, github: aditya-pai-nc)
* '''Parth Kulkarni''' (unityid: pnkulka2, github: ParthK7)
* '''Github repo''' https://github.com/aditya-pai-nc/reimplementation-front-end
* '''Backend Hosted on VCL''' http://152.7.178.127:3002/api-docs/index.html

CSC/ECE 517 Spring 2025 - E2521 UI for View submissions/assign grades (except heatgrid)

2025-04-04T18:23:09Z

Pnkulka2: /* Current UI Limitations */

File:UI-2.png

2025-04-04T18:19:37Z

Pnkulka2:

File:UI-1.png

2025-04-04T18:19:20Z

Pnkulka2:

CSC/ECE 517 Spring 2025 - E2521 UI for View submissions/assign grades (except heatgrid)

2025-04-04T14:14:49Z

Pnkulka2: /* Current UI Limitations */

File:CurrentUIss.png

2025-04-04T14:13:57Z

Pnkulka2:

File:Current UI.png

2025-04-04T14:07:45Z

Pnkulka2:

CSC/ECE 517 Spring 2025 - E2521 UI for View submissions/assign grades (except heatgrid)

2025-04-04T12:55:55Z

Pnkulka2: /* Use Case Diagram */

CSC/ECE 517 Spring 2025 - E2521 UI for View submissions/assign grades (except heatgrid)

2025-04-04T12:38:32Z

Pnkulka2: /* Use Case Diagram */

File:2521 Use Case Diagram.jpeg

2025-04-04T12:38:01Z

Pnkulka2:

CSC/ECE 517 Spring 2025 - E2520. Reimplement heatgrid UI for reviews

2025-03-25T20:29:16Z

Pnkulka2:

= E2520: Reimplement Heatgrid UI for Reviews =

== 🌟 Introduction ==
The '''Heatgrid UI for Reviews''' is a '''React-based''' component designed to visually represent review scores in a '''structured and user-friendly manner'''. This project enhances usability, data handling, and efficiency while introducing new features to improve the review experience. The component ensures '''seamless interaction and role-based access control''' for different users.

== 🚀 Key Enhancements & Features ==

=== 🎛 1. Toggle Question List ===
* '''Feature:''' Added a '''"Toggle Question List"''' button to display or hide all review questions.
* '''Implementation:''' Users can '''click the button''' to dynamically expand/collapse the list of questions.

Before
[[File:Toggle questions before.png | 1000px]]

After
[[File:Toggle questions after.png | 1000px]]

=== 🏷 2. Hide Tags Button ===
* '''Feature:''' Added a '''"Hide Tags"''' button to toggle the visibility of tags.
* '''Implementation:''' Clicking the button '''hides/shows''' tagging information dynamically.

=== 🎨 3. Color Legend Tooltip ===
* '''Feature:''' Hovering over the color legend displays a tooltip explaining the '''color scale from poor to excellent'''.

[[File:Color legend ss.png| 1000px]]

=== 📌 4. Interaction Legend Tooltip ===
* '''Feature:''' Hovering over the interaction legend now displays a '''tooltip''' with a detailed explanation.

[[File:Interaction legend ss.png| 1000px]]

=== 📝 5. Renamed Comment Categories & Added Word Count Column ===
* '''Feature:''' Changed '''"> 10 Word Comments"''' to '''"Short Comments"''' and '''"> 20 Word Comments"''' to '''"Long Comments"'''. A '''new column''' displays '''word count''' for each review comment.

[[File:HG5 1.png| 1000px]]

[[File:HG5 2.png| 1000px]]

=== 🔼 6. Sorting Questions with Ascending & Descending Arrows ===
* '''Feature:''' Users can now '''sort questions''' using ascending/descending arrows.

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

=== 📊 7. Sort Reviews by Total Score ===
* '''Feature:''' Sort reviews '''in ascending/descending order''' based on '''total review score'''.

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

=== 👥 8. Dynamic Team Members ===
* '''Feature:''' Dynamically '''fetch and display team members' names'''.

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

=== 💬 9. Bold & Underlined Comments with Hover Preview ===
* '''Feature:''' Review comments are now '''bold and underlined'''; hovering over them '''shows a preview'''.

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

=== 🔄 10. Refactored Heatgrid to Reusable Components ===
* '''Feature:''' The frontend was '''restructured''' using '''modular, reusable React components'''.

[[File:HeatGridComponent.png|250px]]

=== 🔑 11. Role-Based Access Control ===
* '''Feature:''' Normal users see anonymous "Review 0, Review 1" labels, while '''admins see actual reviewer names'''.

Student view
[[File:Student view new.png | 1000px]]

Admin view
[[File:Admin view.png | 1000px]]

=== 🖥 12. Backend Integration & Database Configuration ===
* '''Feature:''' Integrated the frontend with the backend, configured the '''database''', and deployed it on '''VCL using Docker'''.

= ✅ Deployment & Testing =

== 🚀 Deployment ==
* '''Deployment Platform:''' Successfully deployed on '''Virtual Computing Lab (VCL)'''.
* '''Deployment Method:''' Used '''Docker''' for containerized setup and consistent environment replication.

== 🧪 Testing ==

=== ✅ Manual Testing ===
Thorough manual testing was conducted for the following features:

* Rendering of '''Summary Report''' and '''Team Information'''
* Display of '''Submission Links'''
* Functionality of the '''Round Selector'''
* Checkbox toggles:
** '''> 10 Word Comments'''
** '''> 20 Word Comments'''
* Conditional rendering of the '''Word Count''' column
* Sorting by:
** '''Row Average'''
** '''Total Review Score''' (ascending/descending toggle)

=== ✅ Automated Testing (`App.test.tsx`) ===
Unit/UI tests written with '''@testing-library/react''' and '''jest'''.

<syntaxhighlight lang="tsx">
import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { MemoryRouter, Route, Routes } from "react-router-dom";
import ReviewTable from "./components/ReviewTable"; // Adjust path as needed

describe("ReviewTable page", () => {
const setup = () =>
render(
<MemoryRouter initialEntries={["/view-team-grades"]}>
<Routes>
<Route path="/view-team-grades" element={<ReviewTable />} />
</Routes>
</MemoryRouter>
);

test("renders summary report and team info", async () => {
setup();
expect(screen.getByText(/Summary Report: Program 2/i)).toBeInTheDocument();
expect(screen.getByText(/Team:/i)).toBeInTheDocument();
});

test("renders submission links", async () => {
setup();
expect(
screen.getByText("https://github.ncsu.edu/Program-2-Ruby-on-Rails/WolfEvents")
).toBeInTheDocument();
expect(screen.getByText("README.md")).toBeInTheDocument();
});

test("renders round selector", () => {
setup();
expect(screen.getByText(/Round/i)).toBeInTheDocument();
});

test("renders word count checkboxes", () => {
setup();
expect(screen.getByLabelText(/> 10 Word Comments/i)).toBeInTheDocument();
expect(screen.getByLabelText(/> 20 Word Comments/i)).toBeInTheDocument();
});

test("shows Word Count column when checkbox is selected", async () => {
setup();

expect(screen.queryByText(/Word Count/i)).not.toBeInTheDocument();

const checkbox10 = screen.getByLabelText(/> 10 Word Comments/i);
fireEvent.click(checkbox10);

await waitFor(() => {
expect(screen.getAllByText(/Word Count/i).length).toBeGreaterThan(0);
});
});

test("toggle sort by total score", () => {
setup();
const button = screen.getByText(/Sort by Total Review Score/i);
fireEvent.click(button);
expect(button.textContent).toMatch(/desc|asc/i);
});
});
</syntaxhighlight>

== 🎯 Future Enhancements & Best Practices ==
* Implement automated tests to '''improve maintainability'''.
* Enhance '''responsiveness''' for better mobile support.
* Optimize '''performance''' for larger datasets.
* Follow '''best coding practices''' including '''DRY''' and '''Single Responsibility Principle'''.

== 🏁 Conclusion ==
This project significantly '''enhances the Heatgrid UI''' for reviews, improving '''usability, accessibility, and data handling''' while maintaining an '''intuitive design'''. These newly added features ensure a '''seamless experience''' for students, faculty, and administrators.

== Team ==

=== Mentor ===
* '''Prathyusha Kodali''' (pkodali@ncsu.edu)

=== Members ===
* '''Raj Patel''' (rbpatel4@ncsu.edu)
* '''Aditya Pai''' (aapai@ncsu.edu)
* '''Parth Kulkarni''' (pnkulka2@ncsu.edu)

== Contributors to this project ==
* '''Raj Patel''' (unityid: rbpatel4, github: Raj-mac24)
* '''Aditya Pai''' (unityid: aapai, github: aditya-pai-nc)
* '''Parth Kulkarni''' (unityid: pnkulka2, github: ParthK7)
* '''Github repo''' https://github.com/aditya-pai-nc/reimplementation-front-end
* '''Backend Hosted on VCL''' http://152.7.178.127:3002/api-docs/index.html
* '''Link to PR''' https://github.com/expertiza/reimplementation-front-end/pull/92
* '''Video of UI/UX Improvements''' https://drive.google.com/file/d/1yLXV0OzHWlY9DPobZYe9JJ7_dUclRLJ4/view?usp=sharing

File:Student view new.png

2025-03-25T20:28:21Z

Pnkulka2:

File:Admin view.png

2025-03-25T20:25:10Z

Pnkulka2:

File:Student view.png

2025-03-25T20:24:43Z

Pnkulka2: Pnkulka2 uploaded a new version of File:Student view.png

CSC/ECE 517 Spring 2025 - E2520. Reimplement heatgrid UI for reviews

2025-03-25T01:02:38Z

Pnkulka2: /* 🚀 Key Enhancements & Features */

= E2520: Reimplement Heatgrid UI for Reviews =

== 🌟 Introduction ==
The '''Heatgrid UI for Reviews''' is a '''React-based''' component designed to visually represent review scores in a '''structured and user-friendly manner'''. This project enhances usability, data handling, and efficiency while introducing new features to improve the review experience. The component ensures '''seamless interaction and role-based access control''' for different users.

== 🚀 Key Enhancements & Features ==

=== 🎛 1. Toggle Question List ===
* '''Feature:''' Added a '''"Toggle Question List"''' button to display or hide all review questions.
* '''Implementation:''' Users can '''click the button''' to dynamically expand/collapse the list of questions.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowQuestions(!showQuestions)} style={{ backgroundColor: '#4CAF50', color: 'white', fontWeight: 'bold' }}>
Toggle Question List
</Button>
{showQuestions && <QuestionList questions={questions} />}
</syntaxhighlight>

Before
[[File:Toggle questions before.png | 1000px]]

After
[[File:Toggle questions after.png | 1000px]]

=== 🏷 2. Hide Tags Button ===
* '''Feature:''' Added a '''"Hide Tags"''' button to toggle the visibility of tags.
* '''Implementation:''' Clicking the button '''hides/shows''' tagging information dynamically.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowTags(!showTags)} style={{ backgroundColor: '#FF5722', color: 'white', fontWeight: 'bold' }}>
Hide Tags
</Button>
{showTags && <TagList tags={tags} />}
</syntaxhighlight>

=== 🎨 3. Color Legend Tooltip ===
* '''Feature:''' Hovering over the color legend displays a tooltip explaining the '''color scale from poor to excellent'''.

<syntaxhighlight lang="jsx">
<Tooltip title="Colors are scaled from poor to excellent: red, orange, yellow, light-green, dark-green">
<LegendIcon style={{ color: 'blue' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Color legend ss.png| 1000px]]

=== 📌 4. Interaction Legend Tooltip ===
* '''Feature:''' Hovering over the interaction legend now displays a '''tooltip''' with a detailed explanation.

<syntaxhighlight lang="jsx">
<Tooltip title={t("interaction_legend_tooltip")}>
<InteractionLegendIcon style={{ color: 'purple' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Interaction legend ss.png| 1000px]]

=== 📝 5. Renamed Comment Categories & Added Word Count Column ===
* '''Feature:''' Changed '''"> 10 Word Comments"''' to '''"Short Comments"''' and '''"> 20 Word Comments"''' to '''"Long Comments"'''. A '''new column''' displays '''word count''' for each review comment.

<syntaxhighlight lang="jsx">
{reviews.map(review => (
<TableRow>
<TableCell style={{ fontWeight: 'bold' }}>{review.shortComments}</TableCell>
<TableCell style={{ fontWeight: 'bold' }}>{review.longComments}</TableCell>
</TableRow>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comments Column](link-to-screenshot)

=== 🔼 6. Sorting Questions with Ascending & Descending Arrows ===
* '''Feature:''' Users can now '''sort questions''' using ascending/descending arrows.

<syntaxhighlight lang="jsx">
<TableHeader onClick={() => sortQuestions("asc")} style={{ cursor: 'pointer' }}>▲</TableHeader>
<TableHeader onClick={() => sortQuestions("desc")} style={{ cursor: 'pointer' }}>▼</TableHeader>
</syntaxhighlight>

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

=== 📊 7. Sort Reviews by Total Score ===
* '''Feature:''' Sort reviews '''in ascending/descending order''' based on '''total review score'''.

<syntaxhighlight lang="jsx">
<Button onClick={() => toggleSortByTotalScore()} style={{ backgroundColor: '#3F51B5', color: 'white', fontWeight: 'bold' }}>
Sort by Total Review Score
</Button>
</syntaxhighlight>

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

=== 👥 8. Dynamic Team Members ===
* '''Feature:''' Dynamically '''fetch and display team members' names'''.

<syntaxhighlight lang="jsx">
{teamMembers.map(member => (
<li key={member.id} style={{ fontWeight: 'bold', color: '#795548' }}>{member.name}</li>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Team Members](link-to-screenshot)

=== 💬 9. Bold & Underlined Comments with Hover Preview ===
* '''Feature:''' Review comments are now '''bold and underlined'''; hovering over them '''shows a preview'''.

<syntaxhighlight lang="jsx">
<span style={{ fontWeight: 'bold', textDecoration: 'underline', color: '#E91E63' }}>
{review.comment}
</span>
<Tooltip title={review.commentDetails}>
<span> ℹ️</span>
</Tooltip>
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comment Preview](link-to-screenshot)

=== 🔄 10. Refactored Heatgrid to Reusable Components ===
* '''Feature:''' The frontend was '''restructured''' using '''modular, reusable React components'''.

<syntaxhighlight lang="jsx">
const HeatGrid = ({ data }) => {
return (
<div>
{data.map(row => <HeatGridRow key={row.id} row={row} />)}
</div>
);
};
</syntaxhighlight>

[[File:HeatGridComponent.png|250px]]

=== 🔑 11. Role-Based Access Control ===
* '''Feature:''' Normal users see anonymous "Review 0, Review 1" labels, while '''admins see actual reviewer names'''.

<syntaxhighlight lang="jsx">
{userRole === 'admin' ? review.reviewerName : `Review ${index}`}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Role-Based Access](link-to-screenshot)

=== 🖥 12. Backend Integration & Database Configuration ===
* '''Feature:''' Integrated the frontend with the backend, configured the '''database''', and deployed it on '''VCL using Docker'''.
'''🖼 Screenshot:''' ![Backend Integration](link-to-screenshot)

== 🏗 Architecture & Flow Diagram ==
A '''visual representation''' of how the '''frontend interacts''' with the '''backend''' and '''database''', illustrating '''data flow and component structure'''.
'''📌 Diagram:''' ![Flow Diagram](link-to-flow-diagram)

== ✅ Deployment & Testing ==
* '''Deployment:''' Successfully deployed on '''Virtual Computing Lab (VCL)''' using '''Docker'''.
* '''Testing:''' Conducted thorough '''manual test cases''' for all new functionalities.

== 🎯 Future Enhancements & Best Practices ==
* Implement automated tests to '''improve maintainability'''.
* Enhance '''responsiveness''' for better mobile support.
* Optimize '''performance''' for larger datasets.
* Follow '''best coding practices''' including '''DRY''' and '''Single Responsibility Principle'''.

== 🏁 Conclusion ==
This project significantly '''enhances the Heatgrid UI''' for reviews, improving '''usability, accessibility, and data handling''' while maintaining an '''intuitive design'''. These newly added features ensure a '''seamless experience''' for students, faculty, and administrators.

== Team ==

=== Mentor ===
* '''Prathyusha Kodali''' (pkodali@ncsu.edu)

=== Members ===
* '''Raj Patel''' (rbpatel4@ncsu.edu)
* '''Aditya Pai''' (aapai@ncsu.edu)
* '''Parth Kulkarni''' (pnkulka2@ncsu.edu)

== Contributors to this project ==
* '''Raj Patel''' (unityid: rbpatel4, github: Raj-mac24)
* '''Aditya Pai''' (unityid: aapai, github: aditya-pai-nc)
* '''Parth Kulkarni''' (unityid: pnkulka2, github: ParthK7)
* '''Github repo''' https://github.com/aditya-pai-nc/reimplementation-front-end
* '''Link to PR'''
* '''Video of UI/UX Improvements'''

CSC/ECE 517 Spring 2025 - E2520. Reimplement heatgrid UI for reviews

2025-03-25T00:58:35Z

Pnkulka2:

= E2520: Reimplement Heatgrid UI for Reviews =

== 🌟 Introduction ==
The '''Heatgrid UI for Reviews''' is a '''React-based''' component designed to visually represent review scores in a '''structured and user-friendly manner'''. This project enhances usability, data handling, and efficiency while introducing new features to improve the review experience. The component ensures '''seamless interaction and role-based access control''' for different users.

== 🚀 Key Enhancements & Features ==

=== 🎛 1. Toggle Question List ===
* '''Feature:''' Added a '''"Toggle Question List"''' button to display or hide all review questions.
* '''Implementation:''' Users can '''click the button''' to dynamically expand/collapse the list of questions.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowQuestions(!showQuestions)} style={{ backgroundColor: '#4CAF50', color: 'white', fontWeight: 'bold' }}>
Toggle Question List
</Button>
{showQuestions && <QuestionList questions={questions} />}
</syntaxhighlight>

[[File:Toggle questions before.png | 1000px]]
[[File:Toggle questions after.png | 1000px]]

=== 🏷 2. Hide Tags Button ===
* '''Feature:''' Added a '''"Hide Tags"''' button to toggle the visibility of tags.
* '''Implementation:''' Clicking the button '''hides/shows''' tagging information dynamically.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowTags(!showTags)} style={{ backgroundColor: '#FF5722', color: 'white', fontWeight: 'bold' }}>
Hide Tags
</Button>
{showTags && <TagList tags={tags} />}
</syntaxhighlight>

=== 🎨 3. Color Legend Tooltip ===
* '''Feature:''' Hovering over the color legend displays a tooltip explaining the '''color scale from poor to excellent'''.

<syntaxhighlight lang="jsx">
<Tooltip title="Colors are scaled from poor to excellent: red, orange, yellow, light-green, dark-green">
<LegendIcon style={{ color: 'blue' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Color legend ss.png| 1000px]]

=== 📌 4. Interaction Legend Tooltip ===
* '''Feature:''' Hovering over the interaction legend now displays a '''tooltip''' with a detailed explanation.

<syntaxhighlight lang="jsx">
<Tooltip title={t("interaction_legend_tooltip")}>
<InteractionLegendIcon style={{ color: 'purple' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Interaction legend ss.png| 1000px]]

=== 📝 5. Renamed Comment Categories & Added Word Count Column ===
* '''Feature:''' Changed '''"> 10 Word Comments"''' to '''"Short Comments"''' and '''"> 20 Word Comments"''' to '''"Long Comments"'''. A '''new column''' displays '''word count''' for each review comment.

<syntaxhighlight lang="jsx">
{reviews.map(review => (
<TableRow>
<TableCell style={{ fontWeight: 'bold' }}>{review.shortComments}</TableCell>
<TableCell style={{ fontWeight: 'bold' }}>{review.longComments}</TableCell>
</TableRow>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comments Column](link-to-screenshot)

=== 🔼 6. Sorting Questions with Ascending & Descending Arrows ===
* '''Feature:''' Users can now '''sort questions''' using ascending/descending arrows.

<syntaxhighlight lang="jsx">
<TableHeader onClick={() => sortQuestions("asc")} style={{ cursor: 'pointer' }}>▲</TableHeader>
<TableHeader onClick={() => sortQuestions("desc")} style={{ cursor: 'pointer' }}>▼</TableHeader>
</syntaxhighlight>

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

=== 📊 7. Sort Reviews by Total Score ===
* '''Feature:''' Sort reviews '''in ascending/descending order''' based on '''total review score'''.

<syntaxhighlight lang="jsx">
<Button onClick={() => toggleSortByTotalScore()} style={{ backgroundColor: '#3F51B5', color: 'white', fontWeight: 'bold' }}>
Sort by Total Review Score
</Button>
</syntaxhighlight>

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

=== 👥 8. Dynamic Team Members ===
* '''Feature:''' Dynamically '''fetch and display team members' names'''.

<syntaxhighlight lang="jsx">
{teamMembers.map(member => (
<li key={member.id} style={{ fontWeight: 'bold', color: '#795548' }}>{member.name}</li>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Team Members](link-to-screenshot)

=== 💬 9. Bold & Underlined Comments with Hover Preview ===
* '''Feature:''' Review comments are now '''bold and underlined'''; hovering over them '''shows a preview'''.

<syntaxhighlight lang="jsx">
<span style={{ fontWeight: 'bold', textDecoration: 'underline', color: '#E91E63' }}>
{review.comment}
</span>
<Tooltip title={review.commentDetails}>
<span> ℹ️</span>
</Tooltip>
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comment Preview](link-to-screenshot)

=== 🔄 10. Refactored Heatgrid to Reusable Components ===
* '''Feature:''' The frontend was '''restructured''' using '''modular, reusable React components'''.

<syntaxhighlight lang="jsx">
const HeatGrid = ({ data }) => {
return (
<div>
{data.map(row => <HeatGridRow key={row.id} row={row} />)}
</div>
);
};
</syntaxhighlight>

[[File:HeatGridComponent.png|250px]]

=== 🔑 11. Role-Based Access Control ===
* '''Feature:''' Normal users see anonymous "Review 0, Review 1" labels, while '''admins see actual reviewer names'''.

<syntaxhighlight lang="jsx">
{userRole === 'admin' ? review.reviewerName : `Review ${index}`}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Role-Based Access](link-to-screenshot)

=== 🖥 12. Backend Integration & Database Configuration ===
* '''Feature:''' Integrated the frontend with the backend, configured the '''database''', and deployed it on '''VCL using Docker'''.
'''🖼 Screenshot:''' ![Backend Integration](link-to-screenshot)

== 🏗 Architecture & Flow Diagram ==
A '''visual representation''' of how the '''frontend interacts''' with the '''backend''' and '''database''', illustrating '''data flow and component structure'''.
'''📌 Diagram:''' ![Flow Diagram](link-to-flow-diagram)

== ✅ Deployment & Testing ==
* '''Deployment:''' Successfully deployed on '''Virtual Computing Lab (VCL)''' using '''Docker'''.
* '''Testing:''' Conducted thorough '''manual test cases''' for all new functionalities.

== 🎯 Future Enhancements & Best Practices ==
* Implement automated tests to '''improve maintainability'''.
* Enhance '''responsiveness''' for better mobile support.
* Optimize '''performance''' for larger datasets.
* Follow '''best coding practices''' including '''DRY''' and '''Single Responsibility Principle'''.

== 🏁 Conclusion ==
This project significantly '''enhances the Heatgrid UI''' for reviews, improving '''usability, accessibility, and data handling''' while maintaining an '''intuitive design'''. These newly added features ensure a '''seamless experience''' for students, faculty, and administrators.

== Team ==

=== Mentor ===
* '''Prathyusha Kodali''' (pkodali@ncsu.edu)

=== Members ===
* '''Raj Patel''' (rbpatel4@ncsu.edu)
* '''Aditya Pai''' (aapai@ncsu.edu)
* '''Parth Kulkarni''' (pnkulka2@ncsu.edu)

== Contributors to this project ==
* '''Raj Patel''' (unityid: rbpatel4, github: Raj-mac24)
* '''Aditya Pai''' (unityid: aapai, github: aditya-pai-nc)
* '''Parth Kulkarni''' (unityid: pnkulka2, github: ParthK7)
* '''Github repo''' https://github.com/aditya-pai-nc/reimplementation-front-end
* '''Link to PR'''
* '''Video of UI/UX Improvements'''

CSC/ECE 517 Spring 2025 - E2520. Reimplement heatgrid UI for reviews

2025-03-25T00:58:10Z

Pnkulka2:

= E2520: Reimplement Heatgrid UI for Reviews =

== 🌟 Introduction ==
The '''Heatgrid UI for Reviews''' is a '''React-based''' component designed to visually represent review scores in a '''structured and user-friendly manner'''. This project enhances usability, data handling, and efficiency while introducing new features to improve the review experience. The component ensures '''seamless interaction and role-based access control''' for different users.

== 🚀 Key Enhancements & Features ==

=== 🎛 1. Toggle Question List ===
* '''Feature:''' Added a '''"Toggle Question List"''' button to display or hide all review questions.
* '''Implementation:''' Users can '''click the button''' to dynamically expand/collapse the list of questions.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowQuestions(!showQuestions)} style={{ backgroundColor: '#4CAF50', color: 'white', fontWeight: 'bold' }}>
Toggle Question List
</Button>
{showQuestions && <QuestionList questions={questions} />}
</syntaxhighlight>

[[File:Toggle questions before.png | 1000px]]
[[File:Toggle questions after.png | 1000px]]

=== 🏷 2. Hide Tags Button ===
* '''Feature:''' Added a '''"Hide Tags"''' button to toggle the visibility of tags.
* '''Implementation:''' Clicking the button '''hides/shows''' tagging information dynamically.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowTags(!showTags)} style={{ backgroundColor: '#FF5722', color: 'white', fontWeight: 'bold' }}>
Hide Tags
</Button>
{showTags && <TagList tags={tags} />}
</syntaxhighlight>

[[File:Hide tags ss.png| 1000px]]

=== 🎨 3. Color Legend Tooltip ===
* '''Feature:''' Hovering over the color legend displays a tooltip explaining the '''color scale from poor to excellent'''.

<syntaxhighlight lang="jsx">
<Tooltip title="Colors are scaled from poor to excellent: red, orange, yellow, light-green, dark-green">
<LegendIcon style={{ color: 'blue' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Color legend ss.png| 1000px]]

=== 📌 4. Interaction Legend Tooltip ===
* '''Feature:''' Hovering over the interaction legend now displays a '''tooltip''' with a detailed explanation.

<syntaxhighlight lang="jsx">
<Tooltip title={t("interaction_legend_tooltip")}>
<InteractionLegendIcon style={{ color: 'purple' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Interaction legend ss.png| 1000px]]

=== 📝 5. Renamed Comment Categories & Added Word Count Column ===
* '''Feature:''' Changed '''"> 10 Word Comments"''' to '''"Short Comments"''' and '''"> 20 Word Comments"''' to '''"Long Comments"'''. A '''new column''' displays '''word count''' for each review comment.

<syntaxhighlight lang="jsx">
{reviews.map(review => (
<TableRow>
<TableCell style={{ fontWeight: 'bold' }}>{review.shortComments}</TableCell>
<TableCell style={{ fontWeight: 'bold' }}>{review.longComments}</TableCell>
</TableRow>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comments Column](link-to-screenshot)

=== 🔼 6. Sorting Questions with Ascending & Descending Arrows ===
* '''Feature:''' Users can now '''sort questions''' using ascending/descending arrows.

<syntaxhighlight lang="jsx">
<TableHeader onClick={() => sortQuestions("asc")} style={{ cursor: 'pointer' }}>▲</TableHeader>
<TableHeader onClick={() => sortQuestions("desc")} style={{ cursor: 'pointer' }}>▼</TableHeader>
</syntaxhighlight>

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

=== 📊 7. Sort Reviews by Total Score ===
* '''Feature:''' Sort reviews '''in ascending/descending order''' based on '''total review score'''.

<syntaxhighlight lang="jsx">
<Button onClick={() => toggleSortByTotalScore()} style={{ backgroundColor: '#3F51B5', color: 'white', fontWeight: 'bold' }}>
Sort by Total Review Score
</Button>
</syntaxhighlight>

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

=== 👥 8. Dynamic Team Members ===
* '''Feature:''' Dynamically '''fetch and display team members' names'''.

<syntaxhighlight lang="jsx">
{teamMembers.map(member => (
<li key={member.id} style={{ fontWeight: 'bold', color: '#795548' }}>{member.name}</li>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Team Members](link-to-screenshot)

=== 💬 9. Bold & Underlined Comments with Hover Preview ===
* '''Feature:''' Review comments are now '''bold and underlined'''; hovering over them '''shows a preview'''.

<syntaxhighlight lang="jsx">
<span style={{ fontWeight: 'bold', textDecoration: 'underline', color: '#E91E63' }}>
{review.comment}
</span>
<Tooltip title={review.commentDetails}>
<span> ℹ️</span>
</Tooltip>
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comment Preview](link-to-screenshot)

=== 🔄 10. Refactored Heatgrid to Reusable Components ===
* '''Feature:''' The frontend was '''restructured''' using '''modular, reusable React components'''.

<syntaxhighlight lang="jsx">
const HeatGrid = ({ data }) => {
return (
<div>
{data.map(row => <HeatGridRow key={row.id} row={row} />)}
</div>
);
};
</syntaxhighlight>

[[File:HeatGridComponent.png|250px]]

=== 🔑 11. Role-Based Access Control ===
* '''Feature:''' Normal users see anonymous "Review 0, Review 1" labels, while '''admins see actual reviewer names'''.

<syntaxhighlight lang="jsx">
{userRole === 'admin' ? review.reviewerName : `Review ${index}`}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Role-Based Access](link-to-screenshot)

=== 🖥 12. Backend Integration & Database Configuration ===
* '''Feature:''' Integrated the frontend with the backend, configured the '''database''', and deployed it on '''VCL using Docker'''.
'''🖼 Screenshot:''' ![Backend Integration](link-to-screenshot)

== 🏗 Architecture & Flow Diagram ==
A '''visual representation''' of how the '''frontend interacts''' with the '''backend''' and '''database''', illustrating '''data flow and component structure'''.
'''📌 Diagram:''' ![Flow Diagram](link-to-flow-diagram)

== ✅ Deployment & Testing ==
* '''Deployment:''' Successfully deployed on '''Virtual Computing Lab (VCL)''' using '''Docker'''.
* '''Testing:''' Conducted thorough '''manual test cases''' for all new functionalities.

== 🎯 Future Enhancements & Best Practices ==
* Implement automated tests to '''improve maintainability'''.
* Enhance '''responsiveness''' for better mobile support.
* Optimize '''performance''' for larger datasets.
* Follow '''best coding practices''' including '''DRY''' and '''Single Responsibility Principle'''.

== 🏁 Conclusion ==
This project significantly '''enhances the Heatgrid UI''' for reviews, improving '''usability, accessibility, and data handling''' while maintaining an '''intuitive design'''. These newly added features ensure a '''seamless experience''' for students, faculty, and administrators.

== Team ==

=== Mentor ===
* '''Prathyusha Kodali''' (pkodali@ncsu.edu)

=== Members ===
* '''Raj Patel''' (rbpatel4@ncsu.edu)
* '''Aditya Pai''' (aapai@ncsu.edu)
* '''Parth Kulkarni''' (pnkulka2@ncsu.edu)

== Contributors to this project ==
* '''Raj Patel''' (unityid: rbpatel4, github: Raj-mac24)
* '''Aditya Pai''' (unityid: aapai, github: aditya-pai-nc)
* '''Parth Kulkarni''' (unityid: pnkulka2, github: ParthK7)
* '''Github repo''' https://github.com/aditya-pai-nc/reimplementation-front-end
* '''Link to PR'''
* '''Video of UI/UX Improvements'''

File:Hide tags ss.png

2025-03-25T00:57:37Z

Pnkulka2:

CSC/ECE 517 Spring 2025 - E2520. Reimplement heatgrid UI for reviews

2025-03-25T00:56:03Z

Pnkulka2:

= E2520: Reimplement Heatgrid UI for Reviews =

== 🌟 Introduction ==
The '''Heatgrid UI for Reviews''' is a '''React-based''' component designed to visually represent review scores in a '''structured and user-friendly manner'''. This project enhances usability, data handling, and efficiency while introducing new features to improve the review experience. The component ensures '''seamless interaction and role-based access control''' for different users.

== 🚀 Key Enhancements & Features ==

=== 🎛 1. Toggle Question List ===
* '''Feature:''' Added a '''"Toggle Question List"''' button to display or hide all review questions.
* '''Implementation:''' Users can '''click the button''' to dynamically expand/collapse the list of questions.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowQuestions(!showQuestions)} style={{ backgroundColor: '#4CAF50', color: 'white', fontWeight: 'bold' }}>
Toggle Question List
</Button>
{showQuestions && <QuestionList questions={questions} />}
</syntaxhighlight>

[[File:Toggle questions before.png | 1000px]]
[[File:Toggle questions after.png | 1000px]]

=== 🏷 2. Hide Tags Button ===
* '''Feature:''' Added a '''"Hide Tags"''' button to toggle the visibility of tags.
* '''Implementation:''' Clicking the button '''hides/shows''' tagging information dynamically.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowTags(!showTags)} style={{ backgroundColor: '#FF5722', color: 'white', fontWeight: 'bold' }}>
Hide Tags
</Button>
{showTags && <TagList tags={tags} />}
</syntaxhighlight>

[[File:Hide tags.png | 1000px]]

=== 🎨 3. Color Legend Tooltip ===
* '''Feature:''' Hovering over the color legend displays a tooltip explaining the '''color scale from poor to excellent'''.

<syntaxhighlight lang="jsx">
<Tooltip title="Colors are scaled from poor to excellent: red, orange, yellow, light-green, dark-green">
<LegendIcon style={{ color: 'blue' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Color legend ss.png| 1000px]]

=== 📌 4. Interaction Legend Tooltip ===
* '''Feature:''' Hovering over the interaction legend now displays a '''tooltip''' with a detailed explanation.

<syntaxhighlight lang="jsx">
<Tooltip title={t("interaction_legend_tooltip")}>
<InteractionLegendIcon style={{ color: 'purple' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Interaction legend ss.png| 1000px]]

=== 📝 5. Renamed Comment Categories & Added Word Count Column ===
* '''Feature:''' Changed '''"> 10 Word Comments"''' to '''"Short Comments"''' and '''"> 20 Word Comments"''' to '''"Long Comments"'''. A '''new column''' displays '''word count''' for each review comment.

<syntaxhighlight lang="jsx">
{reviews.map(review => (
<TableRow>
<TableCell style={{ fontWeight: 'bold' }}>{review.shortComments}</TableCell>
<TableCell style={{ fontWeight: 'bold' }}>{review.longComments}</TableCell>
</TableRow>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comments Column](link-to-screenshot)

=== 🔼 6. Sorting Questions with Ascending & Descending Arrows ===
* '''Feature:''' Users can now '''sort questions''' using ascending/descending arrows.

<syntaxhighlight lang="jsx">
<TableHeader onClick={() => sortQuestions("asc")} style={{ cursor: 'pointer' }}>▲</TableHeader>
<TableHeader onClick={() => sortQuestions("desc")} style={{ cursor: 'pointer' }}>▼</TableHeader>
</syntaxhighlight>

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

=== 📊 7. Sort Reviews by Total Score ===
* '''Feature:''' Sort reviews '''in ascending/descending order''' based on '''total review score'''.

<syntaxhighlight lang="jsx">
<Button onClick={() => toggleSortByTotalScore()} style={{ backgroundColor: '#3F51B5', color: 'white', fontWeight: 'bold' }}>
Sort by Total Review Score
</Button>
</syntaxhighlight>

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

=== 👥 8. Dynamic Team Members ===
* '''Feature:''' Dynamically '''fetch and display team members' names'''.

<syntaxhighlight lang="jsx">
{teamMembers.map(member => (
<li key={member.id} style={{ fontWeight: 'bold', color: '#795548' }}>{member.name}</li>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Team Members](link-to-screenshot)

=== 💬 9. Bold & Underlined Comments with Hover Preview ===
* '''Feature:''' Review comments are now '''bold and underlined'''; hovering over them '''shows a preview'''.

<syntaxhighlight lang="jsx">
<span style={{ fontWeight: 'bold', textDecoration: 'underline', color: '#E91E63' }}>
{review.comment}
</span>
<Tooltip title={review.commentDetails}>
<span> ℹ️</span>
</Tooltip>
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comment Preview](link-to-screenshot)

=== 🔄 10. Refactored Heatgrid to Reusable Components ===
* '''Feature:''' The frontend was '''restructured''' using '''modular, reusable React components'''.

<syntaxhighlight lang="jsx">
const HeatGrid = ({ data }) => {
return (
<div>
{data.map(row => <HeatGridRow key={row.id} row={row} />)}
</div>
);
};
</syntaxhighlight>

[[File:HeatGridComponent.png|250px]]

=== 🔑 11. Role-Based Access Control ===
* '''Feature:''' Normal users see anonymous "Review 0, Review 1" labels, while '''admins see actual reviewer names'''.

<syntaxhighlight lang="jsx">
{userRole === 'admin' ? review.reviewerName : `Review ${index}`}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Role-Based Access](link-to-screenshot)

=== 🖥 12. Backend Integration & Database Configuration ===
* '''Feature:''' Integrated the frontend with the backend, configured the '''database''', and deployed it on '''VCL using Docker'''.
'''🖼 Screenshot:''' ![Backend Integration](link-to-screenshot)

== 🏗 Architecture & Flow Diagram ==
A '''visual representation''' of how the '''frontend interacts''' with the '''backend''' and '''database''', illustrating '''data flow and component structure'''.
'''📌 Diagram:''' ![Flow Diagram](link-to-flow-diagram)

== ✅ Deployment & Testing ==
* '''Deployment:''' Successfully deployed on '''Virtual Computing Lab (VCL)''' using '''Docker'''.
* '''Testing:''' Conducted thorough '''manual test cases''' for all new functionalities.

== 🎯 Future Enhancements & Best Practices ==
* Implement automated tests to '''improve maintainability'''.
* Enhance '''responsiveness''' for better mobile support.
* Optimize '''performance''' for larger datasets.
* Follow '''best coding practices''' including '''DRY''' and '''Single Responsibility Principle'''.

== 🏁 Conclusion ==
This project significantly '''enhances the Heatgrid UI''' for reviews, improving '''usability, accessibility, and data handling''' while maintaining an '''intuitive design'''. These newly added features ensure a '''seamless experience''' for students, faculty, and administrators.

== Team ==

=== Mentor ===
* '''Prathyusha Kodali''' (pkodali@ncsu.edu)

=== Members ===
* '''Raj Patel''' (rbpatel4@ncsu.edu)
* '''Aditya Pai''' (aapai@ncsu.edu)
* '''Parth Kulkarni''' (pnkulka2@ncsu.edu)

== Contributors to this project ==
* '''Raj Patel''' (unityid: rbpatel4, github: Raj-mac24)
* '''Aditya Pai''' (unityid: aapai, github: aditya-pai-nc)
* '''Parth Kulkarni''' (unityid: pnkulka2, github: ParthK7)
* '''Github repo''' https://github.com/aditya-pai-nc/reimplementation-front-end
* '''Link to PR'''
* '''Video of UI/UX Improvements'''

File:Interaction legend ss.png

2025-03-25T00:54:04Z

Pnkulka2:

File:Color legend ss.png

2025-03-25T00:53:34Z

Pnkulka2:

CSC/ECE 517 Spring 2025 - E2520. Reimplement heatgrid UI for reviews

2025-03-25T00:53:01Z

Pnkulka2:

= E2520: Reimplement Heatgrid UI for Reviews =

== 🌟 Introduction ==
The '''Heatgrid UI for Reviews''' is a '''React-based''' component designed to visually represent review scores in a '''structured and user-friendly manner'''. This project enhances usability, data handling, and efficiency while introducing new features to improve the review experience. The component ensures '''seamless interaction and role-based access control''' for different users.

== 🚀 Key Enhancements & Features ==

=== 🎛 1. Toggle Question List ===
* '''Feature:''' Added a '''"Toggle Question List"''' button to display or hide all review questions.
* '''Implementation:''' Users can '''click the button''' to dynamically expand/collapse the list of questions.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowQuestions(!showQuestions)} style={{ backgroundColor: '#4CAF50', color: 'white', fontWeight: 'bold' }}>
Toggle Question List
</Button>
{showQuestions && <QuestionList questions={questions} />}
</syntaxhighlight>

[[File:Toggle questions before.png | 1000px]]
[[File:Toggle questions after.png | 1000px]]

=== 🏷 2. Hide Tags Button ===
* '''Feature:''' Added a '''"Hide Tags"''' button to toggle the visibility of tags.
* '''Implementation:''' Clicking the button '''hides/shows''' tagging information dynamically.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowTags(!showTags)} style={{ backgroundColor: '#FF5722', color: 'white', fontWeight: 'bold' }}>
Hide Tags
</Button>
{showTags && <TagList tags={tags} />}
</syntaxhighlight>

[[File:Hide tags.png | 1000px]]

=== 🎨 3. Color Legend Tooltip ===
* '''Feature:''' Hovering over the color legend displays a tooltip explaining the '''color scale from poor to excellent'''.

<syntaxhighlight lang="jsx">
<Tooltip title="Colors are scaled from poor to excellent: red, orange, yellow, light-green, dark-green">
<LegendIcon style={{ color: 'blue' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Color legend.png| 1000px]]

=== 📌 4. Interaction Legend Tooltip ===
* '''Feature:''' Hovering over the interaction legend now displays a '''tooltip''' with a detailed explanation.

<syntaxhighlight lang="jsx">
<Tooltip title={t("interaction_legend_tooltip")}>
<InteractionLegendIcon style={{ color: 'purple' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Interaciton legend.png| 1000px]]

=== 📝 5. Renamed Comment Categories & Added Word Count Column ===
* '''Feature:''' Changed '''"> 10 Word Comments"''' to '''"Short Comments"''' and '''"> 20 Word Comments"''' to '''"Long Comments"'''. A '''new column''' displays '''word count''' for each review comment.

<syntaxhighlight lang="jsx">
{reviews.map(review => (
<TableRow>
<TableCell style={{ fontWeight: 'bold' }}>{review.shortComments}</TableCell>
<TableCell style={{ fontWeight: 'bold' }}>{review.longComments}</TableCell>
</TableRow>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comments Column](link-to-screenshot)

=== 🔼 6. Sorting Questions with Ascending & Descending Arrows ===
* '''Feature:''' Users can now '''sort questions''' using ascending/descending arrows.

<syntaxhighlight lang="jsx">
<TableHeader onClick={() => sortQuestions("asc")} style={{ cursor: 'pointer' }}>▲</TableHeader>
<TableHeader onClick={() => sortQuestions("desc")} style={{ cursor: 'pointer' }}>▼</TableHeader>
</syntaxhighlight>

'''🖼 Screenshot:''' ![Sorting Questions](link-to-screenshot)

=== 📊 7. Sort Reviews by Total Score ===
* '''Feature:''' Sort reviews '''in ascending/descending order''' based on '''total review score'''.

<syntaxhighlight lang="jsx">
<Button onClick={() => toggleSortByTotalScore()} style={{ backgroundColor: '#3F51B5', color: 'white', fontWeight: 'bold' }}>
Sort by Total Review Score
</Button>
</syntaxhighlight>

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

=== 👥 8. Dynamic Team Members ===
* '''Feature:''' Dynamically '''fetch and display team members' names'''.

<syntaxhighlight lang="jsx">
{teamMembers.map(member => (
<li key={member.id} style={{ fontWeight: 'bold', color: '#795548' }}>{member.name}</li>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Team Members](link-to-screenshot)

=== 💬 9. Bold & Underlined Comments with Hover Preview ===
* '''Feature:''' Review comments are now '''bold and underlined'''; hovering over them '''shows a preview'''.

<syntaxhighlight lang="jsx">
<span style={{ fontWeight: 'bold', textDecoration: 'underline', color: '#E91E63' }}>
{review.comment}
</span>
<Tooltip title={review.commentDetails}>
<span> ℹ️</span>
</Tooltip>
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comment Preview](link-to-screenshot)

=== 🔄 10. Refactored Heatgrid to Reusable Components ===
* '''Feature:''' The frontend was '''restructured''' using '''modular, reusable React components'''.

<syntaxhighlight lang="jsx">
const HeatGrid = ({ data }) => {
return (
<div>
{data.map(row => <HeatGridRow key={row.id} row={row} />)}
</div>
);
};
</syntaxhighlight>

[[File:HeatGridComponent.png|250px]]

=== 🔑 11. Role-Based Access Control ===
* '''Feature:''' Normal users see anonymous "Review 0, Review 1" labels, while '''admins see actual reviewer names'''.

<syntaxhighlight lang="jsx">
{userRole === 'admin' ? review.reviewerName : `Review ${index}`}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Role-Based Access](link-to-screenshot)

=== 🖥 12. Backend Integration & Database Configuration ===
* '''Feature:''' Integrated the frontend with the backend, configured the '''database''', and deployed it on '''VCL using Docker'''.
'''🖼 Screenshot:''' ![Backend Integration](link-to-screenshot)

== 🏗 Architecture & Flow Diagram ==
A '''visual representation''' of how the '''frontend interacts''' with the '''backend''' and '''database''', illustrating '''data flow and component structure'''.
'''📌 Diagram:''' ![Flow Diagram](link-to-flow-diagram)

== ✅ Deployment & Testing ==
* '''Deployment:''' Successfully deployed on '''Virtual Computing Lab (VCL)''' using '''Docker'''.
* '''Testing:''' Conducted thorough '''manual test cases''' for all new functionalities.

== 🎯 Future Enhancements & Best Practices ==
* Implement automated tests to '''improve maintainability'''.
* Enhance '''responsiveness''' for better mobile support.
* Optimize '''performance''' for larger datasets.
* Follow '''best coding practices''' including '''DRY''' and '''Single Responsibility Principle'''.

== 🏁 Conclusion ==
This project significantly '''enhances the Heatgrid UI''' for reviews, improving '''usability, accessibility, and data handling''' while maintaining an '''intuitive design'''. These newly added features ensure a '''seamless experience''' for students, faculty, and administrators.

== Team ==

=== Mentor ===
* '''Prathyusha Kodali''' (pkodali@ncsu.edu)

=== Members ===
* '''Raj Patel''' (rbpatel4@ncsu.edu)
* '''Aditya Pai''' (aapai@ncsu.edu)
* '''Parth Kulkarni''' (pnkulka2@ncsu.edu)

== Contributors to this project ==
* '''Raj Patel''' (unityid: rbpatel4, github: Raj-mac24)
* '''Aditya Pai''' (unityid: aapai, github: aditya-pai-nc)
* '''Parth Kulkarni''' (unityid: pnkulka2, github: ParthK7)
* '''Github repo''' https://github.com/aditya-pai-nc/reimplementation-front-end
* '''Link to PR'''
* '''Video of UI/UX Improvements'''

File:Interaction legend.png

2025-03-25T00:47:08Z

Pnkulka2:

File:Color legend.png

2025-03-25T00:46:38Z

Pnkulka2: Pnkulka2 uploaded a new version of File:Color legend.png

File:Toggle questions after.png

2025-03-25T00:45:50Z

Pnkulka2:

File:Toggle questions before.png

2025-03-25T00:45:30Z

Pnkulka2:

CSC/ECE 517 Spring 2025 - E2520. Reimplement heatgrid UI for reviews

2025-03-24T14:31:00Z

Pnkulka2:

= E2520: Reimplement Heatgrid UI for Reviews =

== 🌟 Introduction ==
The '''Heatgrid UI for Reviews''' is a '''React-based''' component designed to visually represent review scores in a '''structured and user-friendly manner'''. This project enhances usability, data handling, and efficiency while introducing new features to improve the review experience. The component ensures '''seamless interaction and role-based access control''' for different users.

== 🚀 Key Enhancements & Features ==

=== 🎛 1. Toggle Question List ===
* '''Feature:''' Added a '''"Toggle Question List"''' button to display or hide all review questions.
* '''Implementation:''' Users can '''click the button''' to dynamically expand/collapse the list of questions.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowQuestions(!showQuestions)} style={{ backgroundColor: '#4CAF50', color: 'white', fontWeight: 'bold' }}>
Toggle Question List
</Button>
{showQuestions && <QuestionList questions={questions} />}
</syntaxhighlight>

[[File:Toggle question.png | 1000px]]

=== 🏷 2. Hide Tags Button ===
* '''Feature:''' Added a '''"Hide Tags"''' button to toggle the visibility of tags.
* '''Implementation:''' Clicking the button '''hides/shows''' tagging information dynamically.

<syntaxhighlight lang="jsx">
<Button onClick={() => setShowTags(!showTags)} style={{ backgroundColor: '#FF5722', color: 'white', fontWeight: 'bold' }}>
Hide Tags
</Button>
{showTags && <TagList tags={tags} />}
</syntaxhighlight>

[[File:Hide tags.png | 1000px]]

=== 🎨 3. Color Legend Tooltip ===
* '''Feature:''' Hovering over the color legend displays a tooltip explaining the '''color scale from poor to excellent'''.

<syntaxhighlight lang="jsx">
<Tooltip title="Colors are scaled from poor to excellent: red, orange, yellow, light-green, dark-green">
<LegendIcon style={{ color: 'blue' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Color legend.png| 1000px]]

=== 📌 4. Interaction Legend Tooltip ===
* '''Feature:''' Hovering over the interaction legend now displays a '''tooltip''' with a detailed explanation.

<syntaxhighlight lang="jsx">
<Tooltip title={t("interaction_legend_tooltip")}>
<InteractionLegendIcon style={{ color: 'purple' }}/>
</Tooltip>
</syntaxhighlight>

[[File:Interaciton legend.png| 1000px]]

=== 📝 5. Renamed Comment Categories & Added Word Count Column ===
* '''Feature:''' Changed '''"> 10 Word Comments"''' to '''"Short Comments"''' and '''"> 20 Word Comments"''' to '''"Long Comments"'''. A '''new column''' displays '''word count''' for each review comment.

<syntaxhighlight lang="jsx">
{reviews.map(review => (
<TableRow>
<TableCell style={{ fontWeight: 'bold' }}>{review.shortComments}</TableCell>
<TableCell style={{ fontWeight: 'bold' }}>{review.longComments}</TableCell>
</TableRow>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comments Column](link-to-screenshot)

=== 🔼 6. Sorting Questions with Ascending & Descending Arrows ===
* '''Feature:''' Users can now '''sort questions''' using ascending/descending arrows.

<syntaxhighlight lang="jsx">
<TableHeader onClick={() => sortQuestions("asc")} style={{ cursor: 'pointer' }}>▲</TableHeader>
<TableHeader onClick={() => sortQuestions("desc")} style={{ cursor: 'pointer' }}>▼</TableHeader>
</syntaxhighlight>

'''🖼 Screenshot:''' ![Sorting Questions](link-to-screenshot)

=== 📊 7. Sort Reviews by Total Score ===
* '''Feature:''' Sort reviews '''in ascending/descending order''' based on '''total review score'''.

<syntaxhighlight lang="jsx">
<Button onClick={() => toggleSortByTotalScore()} style={{ backgroundColor: '#3F51B5', color: 'white', fontWeight: 'bold' }}>
Sort by Total Review Score
</Button>
</syntaxhighlight>

'''🖼 Screenshot:''' ![Sort by Score](link-to-screenshot)

=== 👥 8. Dynamic Team Members ===
* '''Feature:''' Dynamically '''fetch and display team members' names'''.

<syntaxhighlight lang="jsx">
{teamMembers.map(member => (
<li key={member.id} style={{ fontWeight: 'bold', color: '#795548' }}>{member.name}</li>
))}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Team Members](link-to-screenshot)

=== 💬 9. Bold & Underlined Comments with Hover Preview ===
* '''Feature:''' Review comments are now '''bold and underlined'''; hovering over them '''shows a preview'''.

<syntaxhighlight lang="jsx">
<span style={{ fontWeight: 'bold', textDecoration: 'underline', color: '#E91E63' }}>
{review.comment}
</span>
<Tooltip title={review.commentDetails}>
<span> ℹ️</span>
</Tooltip>
</syntaxhighlight>

'''🖼 Screenshot:''' ![Comment Preview](link-to-screenshot)

=== 🔄 10. Refactored Heatgrid to Reusable Components ===
* '''Feature:''' The frontend was '''restructured''' using '''modular, reusable React components'''.

<syntaxhighlight lang="jsx">
const HeatGrid = ({ data }) => {
return (
<div>
{data.map(row => <HeatGridRow key={row.id} row={row} />)}
</div>
);
};
</syntaxhighlight>

'''🖼 Screenshot:''' ![Refactored Code](link-to-screenshot)

=== 🔑 11. Role-Based Access Control ===
* '''Feature:''' Normal users see anonymous "Review 0, Review 1" labels, while '''admins see actual reviewer names'''.

<syntaxhighlight lang="jsx">
{userRole === 'admin' ? review.reviewerName : `Review ${index}`}
</syntaxhighlight>

'''🖼 Screenshot:''' ![Role-Based Access](link-to-screenshot)

=== 🖥 12. Backend Integration & Database Configuration ===
* '''Feature:''' Integrated the frontend with the backend, configured the '''database''', and deployed it on '''VCL using Docker'''.
'''🖼 Screenshot:''' ![Backend Integration](link-to-screenshot)

== 🏗 Architecture & Flow Diagram ==
A '''visual representation''' of how the '''frontend interacts''' with the '''backend''' and '''database''', illustrating '''data flow and component structure'''.
'''📌 Diagram:''' ![Flow Diagram](link-to-flow-diagram)

== ✅ Deployment & Testing ==
* '''Deployment:''' Successfully deployed on '''Virtual Computing Lab (VCL)''' using '''Docker'''.
* '''Testing:''' Conducted thorough '''manual test cases''' for all new functionalities.

== 🎯 Future Enhancements & Best Practices ==
* Implement automated tests to '''improve maintainability'''.
* Enhance '''responsiveness''' for better mobile support.
* Optimize '''performance''' for larger datasets.
* Follow '''best coding practices''' including '''DRY''' and '''Single Responsibility Principle'''.

== 🏁 Conclusion ==
This project significantly '''enhances the Heatgrid UI''' for reviews, improving '''usability, accessibility, and data handling''' while maintaining an '''intuitive design'''. These newly added features ensure a '''seamless experience''' for students, faculty, and administrators.

== Team ==

=== Mentor ===
* '''Prathyusha Kodali''' (pkodali@ncsu.edu)

=== Members ===
* '''Raj Patel''' (rbpatel4@ncsu.edu)
* '''Aditya Pai''' (aapai@ncsu.edu)
* '''Parth Kulkarni''' (pnkulka2@ncsu.edu)

== Contributors to this project ==
* '''Raj Patel''' (unityid: rbpatel4, github: Raj-mac24)
* '''Aditya Pai''' (unityid: aapai, github: aditya-pai-nc)
* '''Parth Kulkarni''' (unityid: pnkulka2, github: ParthK7)
* '''Github repo''' https://github.com/aditya-pai-nc/reimplementation-front-end
* '''Link to PR'''
* '''Video of UI/UX Improvements'''

File:Interaciton legend.png

2025-03-24T14:08:52Z

Pnkulka2:

File:Color legend.png

2025-03-24T14:08:38Z

Pnkulka2:

File:Hide tags.png

2025-03-24T14:08:25Z

Pnkulka2:

File:Toggle question.png

2025-03-24T14:08:11Z

Pnkulka2: