Redesign Avenger dashboard

[zhyuhan]

Description

This is a major redesign of the dashboard at /grading to improve performance and speedup the workflow of Avengers. This is down by migrating the existing submissions table from AG Grid to the headless TanStack Table and components from Tremor.

The demo video recorded for the final Show-and-Tell can be found here.

Changes

The changes in this PR include:

• Rewrite submissions table using TanStack Table and Tremor
• Improve column and global filtering
  • Persist filters in Redux state (closes Grading table: remember state #2298, closes Grading table should remember and run last filter setting #737)
• Add grading statistics (number of graded/ungraded submission and ungraded assessments)
• Refactor pages/academy/grading/Grading.tsx to a functional component
• Implement custom exportCSV function (previously part of AG Grid API)
  • A few columns that don't exist in the data but exported to CSV with empty values (initialGrade, gradeAdjustment, currentGrade, maxGrade`) are removed, is this okay @martin-henz?

Future improvements

There are still a few existing issues that can be improved:

• The submission/grading statuses cannot be used to tell whether a submission has been unsubmitted by the Avenger (see Visibility of grading icons for resubmissions #2189)
  • Currently when a submission is unsubmitted, the submission status stays as submitted and the grading status stays as graded, while the XP adjustments get reverted. There should be a better way to tell whether a submission has been unsubmitted or not.
• Allow filtering by assessments through clicking items in the "Ungraded assessments" list
  • The new grading stats allow an Avenger to see which assessments still have ungraded submission. It will be good if they can click on one of them to add a filter.
• Migrate Tremor to v2 (see changelog)
  • Tremor v1 uses internal Tailwind stylesheets for styling. In v2, the recommended styling solution is to install our own Tailwind. We will have to resolve a lot of style conflicts if we were to upgrade to v2.
• This redesign is also a first step to migrating away from ag-grid-community and ag-grid-react, which have a combined bundle size of 33MB.

[coveralls]

Pull Request Test Coverage Report for Build 4673565577

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 16 of 131 (12.21%) changed or added relevant lines in 11 files are covered.
• 4 unchanged lines in 2 files lost coverage.
• Overall coverage increased (+0.02%) to 34.637%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/pages/academy/Academy.tsx	0	1	0.0%
src/pages/academy/grading/subcomponents/GradingSubmissionFilters.tsx	1	3	33.33%
src/pages/academy/grading/subcomponents/GradingBadges.tsx	3	11	27.27%
src/pages/academy/grading/subcomponents/GradingDashboard.tsx	1	11	9.09%
src/pages/academy/grading/subcomponents/GradingActions.tsx	1	15	6.67%
src/pages/academy/grading/subcomponents/GradingSummary.tsx	1	17	5.88%
src/pages/academy/grading/Grading.tsx	1	26	3.85%
src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx	4	43	9.3%

Files with Coverage Reduction	New Missed Lines	%
src/commons/workspace/WorkspaceReducer.ts	1	94.9%
src/pages/academy/grading/Grading.tsx	3	2.17%

Totals
Change from base Build 4672994200:	0.02%
Covered Lines:	4834
Relevant Lines:	13013

---

💛 - Coveralls

[RichDom2185]

Thanks for the hard work! I really like the abstractions and the organization of your code, and of course, the UI looks amazing 🎉🎊! There's just a few minor comments as below.

Well done and keep up the great work :)

[zhyuhan]

• Implement custom exportCSV function (previously part of AG Grid API)
  • A few columns that don't exist in the data but exported to CSV with empty values (initialGrade, gradeAdjustment, currentGrade, maxGrade`) are removed, is this okay @martin-henz?

Here are the changes to the csv columns.

Before:

"Assessment Name","Student Name","Group","Status","Grading","Question Count","Questions Graded","Initial Grade","Grade Adjustment","Current Grade","Max Grade","Initial XP","XP Adjustment","Current XP (excl. bonus)","Max XP","Bonus XP"
"Mission 1","Dee Sign","1F","submitted","grading","6","2","","","","","0","-2","-2","400","12"
"Mission 0","May Trix","1F","submitted","none","6","0","","","","","996","4","1000","1000","12"
"Mission 0 ","Al Gorithm","1D","submitted","graded","6","6","","","","","69","0","69","100","10"

After:

"Assessment Name","Student Name","Group","Status","Grading","Question Count","Questions Graded","Initial XP","XP Adjustment","Current XP (excl. bonus)","Max XP","Bonus XP"
"Mission 1","Dee Sign","1F","submitted","grading","6","2","0","-2","-2","400","12"
"Mission 0","May Trix","1F","submitted","none","6","0","996","4","1000","1000","12"
"Mission 0 ","Al Gorithm","1D","submitted","graded","6","6","69","0","69","100","10"

[martin-henz]

• Implement custom exportCSV function (previously part of AG Grid API)

  • A few columns that don't exist in the data but exported to CSV with empty values (initialGrade, gradeAdjustment, currentGrade, maxGrade`) are removed, is this okay @martin-henz?

Here are the changes to the csv columns.

Before:

"Assessment Name","Student Name","Group","Status","Grading","Question Count","Questions Graded","Initial Grade","Grade Adjustment","Current Grade","Max Grade","Initial XP","XP Adjustment","Current XP (excl. bonus)","Max XP","Bonus XP"
"Mission 1","Dee Sign","1F","submitted","grading","6","2","","","","","0","-2","-2","400","12"
"Mission 0","May Trix","1F","submitted","none","6","0","","","","","996","4","1000","1000","12"
"Mission 0 ","Al Gorithm","1D","submitted","graded","6","6","","","","","69","0","69","100","10"

After:

"Assessment Name","Student Name","Group","Status","Grading","Question Count","Questions Graded","Initial XP","XP Adjustment","Current XP (excl. bonus)","Max XP","Bonus XP"
"Mission 1","Dee Sign","1F","submitted","grading","6","2","0","-2","-2","400","12"
"Mission 0","May Trix","1F","submitted","none","6","0","996","4","1000","1000","12"
"Mission 0 ","Al Gorithm","1D","submitted","graded","6","6","69","0","69","100","10"

I vaguely remember that we need to distinguish between "initial grade" and "adjusted grade" so that we don't lose the result of autograding. Could you check that @zhyuhan ?

[martin-henz]

I vaguely remember that we need to distinguish between "initial grade" and "adjusted grade" so that we don't lose the result of autograding. Could you check that @zhyuhan ?

[zhyuhan]

I vaguely remember that we need to distinguish between "initial grade" and "adjusted grade" so that we don't lose the result of autograding. Could you check that @zhyuhan ?

@martin-henz @shenyih0ng Looks like Grade was deprecated and replaced with XP in #1878 , so it should be safe to remove the Grade fields as long as we still have the submission's XP.

[martin-henz]

I vaguely remember that we need to distinguish between "initial grade" and "adjusted grade" so that we don't lose the result of autograding. Could you check that @zhyuhan ?

@martin-henz @shenyih0ng Looks like Grade was deprecated and replaced with XP in #1878 , so it should be safe to remove the Grade fields as long as we still have the submission's XP.

OK, got it.