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

From Expertiza_Wiki
Jump to navigation Jump to search

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

After


🏷 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.




📌 4. Interaction Legend Tooltip

  • Feature: Hovering over the interaction legend now displays a tooltip with a detailed explanation.



📝 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.


🔼 6. Sorting Questions with Ascending & Descending Arrows

  • Feature: Users can now sort questions using ascending/descending arrows.


📊 7. Sort Reviews by Total Score

  • Feature: Sort reviews in ascending/descending order based on total review score.


👥 8. Dynamic Team Members

  • Feature: Dynamically fetch and display team members' names.


💬 9. Bold & Underlined Comments with Hover Preview

  • Feature: Review comments are now bold and underlined; hovering over them shows a preview.



🔄 10. Refactored Heatgrid to Reusable Components

  • Feature: The frontend was restructured using modular, reusable React components.



🔑 11. Role-Based Access Control

  • Feature: Normal users see anonymous "Review 0, Review 1" labels, while admins see actual reviewer names.


Student view

Admin view



🖥 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 (Included Login Credentials)

  • Deployment Platform: Successfully deployed on Virtual Computing Lab (VCL).
  • Deployment Method: Used Docker for containerized setup and consistent environment replication.
  • Username: instructor6
  • Password: password

🧪 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. 

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);
  });
});

🎯 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

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2025_-_E2520._Reimplement_heatgrid_UI_for_reviews&oldid=162888"