CSC/ECE 517 Spring 2025 - E2519. Implement view for results of bidding

From Expertiza_Wiki
Jump to navigation Jump to search

Introduction

Expertiza is an open-source platform that educational institutions use to create, assign, and manage assignments and peer assessments. To enhance its functionality, our team improved the existing implementation of the topic bidding results feature.

The original implementation (E2459) attempted to address the issue where instructors could only monitor topic bidding by impersonating students, making it difficult to verify whether the bidding assignment algorithm correctly assigned teams to topics. However, the previous solution did not function as intended.

This project focuses on developing the bidding page again with a better view, enhancing usability, and ensuring better code maintainability. Key improvements making the user interface better, showing vital information that would help the user analyze the projected data easily, optimizing the topic bidding table layout for readability, adding info buttons for better context, improving test cases, and refactoring the code for efficiency.

With these enhancements, instructors and students will have a seamless experience navigating the topic bidding results, making the process more transparent, accessible, and easier to interpret. This project significantly improves the usability of the platform, empowering users with better tools for decision-making.

Problem Statement

The existing topic bidding results feature in Expertiza lacks usability and effectiveness, making it difficult for instructors to monitor and analyze the bidding process efficiently. The current implementation requires instructors to impersonate students to view bidding statuses, which is cumbersome and does not provide a clear overview of how topics are assigned. Additionally, the previous attempt (E2459) to address this issue failed to function as intended, leaving gaps in usability and functionality.

Key issues with the current system include:

1. Lack of visibility – Instructors cannot easily track topic allocations and bidding outcomes.

2. Poor data presentation – The information displayed is not structured in a way that facilitates easy analysis.

3. Limited context – Users do not receive sufficient guidance or explanations for the bidding process.

4. Code inefficiencies – The existing implementation lacks maintainability, making future enhancements difficult.

This project aims to come up with an entirely new design and improve the topic bidding results feature by addressing these challenges, ensuring a more user-friendly, informative, and efficient experience for both instructors and students.

Objectives

The primary objective of this project is to enhance the topic bidding results feature in Expertiza by improving its usability, accessibility, and maintainability. Specifically, our goals include:

1. Improve User Interface & Experience – Redesign the bidding results page with a structured layout that presents information clearly and intuitively.

2. Enhance Data Visualization – Display essential bidding-related data in a format that is easy to interpret, allowing users to analyze assignments effectively.

3. Optimize Table Layout – Improve the readability of the topic bidding table to facilitate better decision-making.

4. Provide Contextual Information – Introduce info buttons and tooltips to help users understand the bidding process and related data.

5. Develop and Document Code for Maintainability – Enhance the efficiency and structure of the codebase to support future updates and scalability.

By achieving these objectives, this project aims to provide instructors and students with a seamless and transparent way to view and analyze topic bidding results, improving their overall experience on the platform.

Steps To Run The Project

In order to run the application, one should have Node.js installed in their local.

In order to run the application, run the below commands.

1. npm install - this installs all dependencies listed in the package.json file for a Node.js project

2. npm start - This runs the app in the development mode.

Our Changes

As part of our efforts to enhance the topic bidding results feature in Expertiza, we introduced several improvements focusing on usability, visualization, and accessibility. The following key enhancements were implemented: 

User Interface Enhancements
1. Replaced the traditional table format with a modern card-based view for improved readability and a visually appealing interface.
2. The updated format displays bidding statistics for each topic in a structured card format. It includes:
  1. The number of first, second, and third-priority bids.
  2. A list of participating bidding teams along with the topic ID and name.
  3. Bidding teams displayed with distinct badges.
3. Made the cards clickable to open a detailed modal view for an in-depth breakdown of bids.
4. Styled the card view with improved layouts, ensuring a more intuitive display of bidding details using percentage variants.
5. Integrated modals to present detailed bid and team information upon selecting a card, enhancing user experience. The modal includes:
  1. A bar chart representing bid distribution across priorities.
  2. A tabular view of bidding details.
  3. Methods: `handleCardClick` opens the modal with topic details, and `handleCloseModal` closes the modal.
Data Visualization Improvements
1. Implemented bar graphs to visually represent bidding trends, making it easier to analyze topic popularity and bid distributions.
2. Styled the graphs for clear data representation and seamless integration with the UI. The graph functionality includes:
  1. `getChartData`: Defines the dataset and labels.
  2. `chartOptions`: Configures chart behavior, tooltips, and animations.
Download Functionality
1. Added a "Download CSV" button to allow users to export bidding results for external analysis.
2. Implemented a "Download PDF" button to generate well-structured PDF reports of bidding results. This feature:
  1. Captures chart images using `html2canvas`.
  2. Formats reports with `jsPDF` and `autoTable`.
  3. Includes bidding statistics and detailed tables.
  4. Uses `handleDownloadPDF` to generate and download the report.
Navigation and Accessibility Enhancements
1. Introduced a direct link from the assignment details page to the bidding results, eliminating the need for manual navigation.

These enhancements significantly improve the usability and efficiency of the topic bidding results feature, making it easier for instructors and students to analyze bidding outcomes and make informed decisions.

Testing

This document details the test suite for the View Bid functionality, which allows students to access bidding information for projects. The tests ensure that:

  1. Only users with the Student role can see and access the View Bid link in the navigation, while the instructors and the admin have to access the view bid page through a different method.
  2. The BiddingPage component renders correctly and displays project bidding data
  3. The role-based access controls are working properly

Test Framework and Structure 

The tests are organized into three main files:
  1. BiddingPage.test.tsx: Unit tests for the BiddingPage component
  2. Header.test.tsx: Unit tests for the header component with focus on the View Bid link
  3. ViewBid.integration.test.tsx: Integration tests for View Bid functionality across components
BiddingPage Component Tests (src/pages/Bidding/BiddingPage.test.tsx)

These tests focus on the UI and functionality of the BiddingPage component.

  1. renders the page title correctly - Ensures that components like main heading "Assignment Bidding Summary by Priority" appears on the page without crashing
  2. renders all topic cards from the data - Verifies that all topics from the mock data are rendered as cards and their details are displayed correctly
  3. displays bid statistics in each card - Tests that each topic card displays the expected bidding statistics
  4. Verifies the total bids count is displayed - Verifies that the PDF download button is present in the modal
Header Component Tests (src/layout/Header.test.tsx)

These tests focus on the role-based visibility of the View Bid link in the header.

  1. Should show "View Bid" link for users with Student role
  2. Should not show "View Bid" link for users with Instructor and Admin role
Integration Tests (src/tests/ViewBid.integration.test.tsx)

These tests verify the interaction between components and role-based access controls.

  1. Non-student users should not see View Bid link
  2. Protected route redirects non-students trying to access bidding page directly
Steps to Run all tests
npm test
Run specific test files
npm test src/pages/Bidding/BiddingPage.test.tsx - Tests BiddingPage Components 

npm test src/layout/Header.test.tsx - Header Component

npm test src/tests/ViewBid.integration.test.tsx - Performs Integration Tests

Opportunities for Additional Future Enhancements

There are several areas where the current implementation can be improved or extended in the future:

  1. Integrate Actual API Call: Currently, the data used is static. Integrating the frontend with the actual backend API will ensure real-time and dynamic data population.
  2. Implement RBAC Control for Download Functionality: To enhance security and maintain data privacy, Role-Based Access Control (RBAC) can be enforced on the PDF download feature. This ensures only authorized users can access sensitive information.
  3. Support Dynamic Priority Handling: At present, the system assumes exactly three priority levels. To make the implementation more robust, it should be refactored to handle any number of priority levels dynamically, based on the data received.

Team

Mentors

  • Mitesh Anil Agarwal
  • Kartiki Bhandakkar

Members

Links

Contains the code changes and discussion related to the implemented feature.

Walkthrough of the functionality implemented in the PR.

Outlines the requirements and scope for the feature.

References

  • html2canvas – A JavaScript library that allows you to take "screenshots" of webpages or parts of them, rendering HTML content to canvas.
  • jsPDF – A client-side JavaScript library used to generate PDF documents.
  • jsPDF-AutoTable – A plugin for jsPDF that enables generation of tables with support for styling, column spanning, and automatic page breaking.
Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2025_-_E2519._Implement_view_for_results_of_bidding&oldid=162576"