fix(error): fix the following bug

- accessing attribute from null object should return null instead of throwing error
- remove memo from BarChart
- resolve n+1 problem in generating group's name
- adding legend to the colors used in statistics table

app/views/course/statistics/assessments/main_statistics.json.jbuilder

@@ -9,8 +9,8 @@ json.submissions @student_submissions_hash.each do |course_user, (submission, an
   json.partial! 'course_user', course_user: course_user
   json.partial! 'submission', submission: submission, end_at: end_at
 
-  json.groups course_user.groups do |group|
-    json.name group.name
+  json.groups @group_names_hash[course_user.id] do |name|
+    json.name name
   end
 
   if !submission.nil? && submission.workflow_state == 'published' && submission.grader_ids

client/app/bundles/course/assessment/pages/AssessmentStatistics/StudentAttemptCountTable.tsx

@@ -146,7 +146,7 @@ const StudentAttemptCountTable: FC<Props> = (props) => {
         },
         title: t(translations.questionIndex, { index: index + 1 }),
         cell: (datum): ReactNode => {
-          return typeof datum.attemptStatus?.[index].attemptCount === 'number'
+          return typeof datum.attemptStatus?.[index]?.attemptCount === 'number'
             ? renderNonNullAttemptCountCell(datum.attemptStatus?.[index])
             : null;
         },

client/app/bundles/course/assessment/pages/AssessmentStatistics/StudentMarksPerQuestionTable.tsx

@@ -142,10 +142,10 @@ const StudentMarksPerQuestionTable: FC<Props> = (props) => {
         },
         title: t(translations.questionIndex, { index: index + 1 }),
         cell: (datum): ReactNode => {
-          return typeof datum.answers?.[index].grade === 'number'
+          return typeof datum.answers?.[index]?.grade === 'number'
             ? renderNonNullGradeCell(
-                datum.answers?.[index].grade,
-                datum.answers?.[index].maximumGrade,
+                datum.answers?.[index]?.grade,
+                datum.answers?.[index]?.maximumGrade,
               )
             : null;
         },
@@ -155,8 +155,8 @@ const StudentMarksPerQuestionTable: FC<Props> = (props) => {
         sortProps: {
           sort: (datum1, datum2): number => {
             return sortNullableGrade(
-              datum1.answers?.[index].grade ?? null,
-              datum2.answers?.[index].grade ?? null,
+              datum1.answers?.[index]?.grade ?? null,
+              datum2.answers?.[index]?.grade ?? null,
             );
           },
         },

client/app/bundles/course/assessment/pages/AssessmentStatistics/classNameUtils.ts

@@ -1,5 +1,6 @@
 import { AttemptInfo } from 'types/course/statistics/assessmentStatistics';
 
+// lower grade means obtaining the grade less than half the maximum possible grade
 const lowerGradeBackgroundColorClassName = {
   0: 'bg-red-50',
   100: 'bg-red-100',
@@ -9,6 +10,7 @@ const lowerGradeBackgroundColorClassName = {
   500: 'bg-red-500',
 };
 
+// higher grade means obtaining the grade at least half the maximum possible grade
 const higherGradeBackgroundColorClassName = {
   0: 'bg-green-50',
   100: 'bg-green-100',
@@ -29,6 +31,9 @@ const calculateColorGradientLevel = (
   return Math.round((Math.abs(grade - halfMaxGrade) / halfMaxGrade) * 5) * 100;
 };
 
+// for marks per question cell, the difference in color means the following:
+// 1. Green : the grade obtained is at least half the maximum possible grade
+// 2. Red : the grade obtained is less than half the maximum possible grade
 export const getClassNameForMarkCell = (
   grade: number,
   maxGrade: number,
@@ -39,6 +44,10 @@ export const getClassNameForMarkCell = (
     : `${lowerGradeBackgroundColorClassName[gradientLevel]} p-[1rem]`;
 };
 
+// for attempt count cell, the difference in color means the following:
+// 1. Gray : the final attempt by user has no judgment result (whether it's correct or not)
+// 2. Green : the final attempt by user is rendered correct
+// 3. Red : the final attempt by user is rendered wrong / incorrect
 export const getClassNameForAttemptCountCell = (
   attempt: AttemptInfo,
 ): string => {

client/app/lib/components/core/BarChart.jsx

@@ -1,7 +1,5 @@
-import { memo } from 'react';
 import { Tooltip } from 'react-tooltip';
 import { Typography } from '@mui/material';
-import { equal } from 'fast-deep-equal';
 import PropTypes from 'prop-types';
 
 const styles = {
@@ -57,4 +55,4 @@ BarChart.propTypes = {
   ).isRequired,
 };
 
-export default memo(BarChart, equal);
+export default BarChart;