fix(StudentGradesPerQuestionTable): add RubricPanel to past answer display for RubricBasedResponse

Author: craigtonlian

app/views/course/assessment/answer/forum_post_responses/_forum_post_response.json.jbuilder

@@ -1,4 +1,6 @@
 # frozen_string_literal: true
+json.questionType answer.question.question_type
+
 json.fields do
   json.questionId answer.question_id
   json.id answer.acting_as.id

app/views/course/assessment/answer/multiple_responses/_multiple_response.json.jbuilder

@@ -1,4 +1,6 @@
 # frozen_string_literal: true
+json.questionType answer.question.question_type
+
 json.fields do
   json.questionId answer.question_id
   json.id answer.acting_as.id

app/views/course/assessment/answer/programming/_programming.json.jbuilder

@@ -20,6 +20,8 @@ if is_current_answer && !latest_answer.current_answer?
   end
 end
 
+json.questionType answer.question.question_type
+
 json.fields do
   json.questionId answer.question_id
   json.id answer.acting_as.id

app/views/course/assessment/answer/rubric_based_responses/_rubric_based_response.json.jbuilder

@@ -1,4 +1,6 @@
 # frozen_string_literal: true
+json.questionType answer.question.question_type
+
 json.fields do
   json.questionId answer.question_id
   json.id answer.acting_as.id

app/views/course/assessment/answer/scribing/_scribing.json.jbuilder

@@ -1,4 +1,6 @@
 # frozen_string_literal: true
+json.questionType answer.question.question_type
+
 json.scribing_answer do
   json.image_url answer.question.actable.attachment_reference.generate_public_url
   json.user_id current_user.id

app/views/course/assessment/answer/text_responses/_text_response.json.jbuilder

@@ -1,4 +1,6 @@
 # frozen_string_literal: true
+json.questionType answer.question.question_type
+
 json.fields do
   json.questionId answer.question_id
   json.id answer.acting_as.id

app/views/course/assessment/answer/voice_responses/_voice_response.json.jbuilder

@@ -1,4 +1,6 @@
 # frozen_string_literal: true
+json.questionType answer.question.question_type
+
 json.fields do
   json.questionId answer.question_id
   json.id answer.acting_as.id

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

@@ -43,7 +43,6 @@ const StudentGradesPerQuestionTable: FC<Props> = (props) => {
   const { t } = useTranslation();
   const { courseId, assessmentId } = useParams();
   const { includePhantom } = props;
-
   const statistics = useAppSelector(getAssessmentStatistics);
   const [openAnswer, setOpenAnswer] = useState(false);
   const [answerDisplayInfo, setAnswerDisplayInfo] = useState<AnswerInfoState>({

client/app/bundles/course/assessment/submission/components/AnswerDetails/RubricBasedResponseDetails.tsx

@@ -1,20 +1,26 @@
 import { Typography } from '@mui/material';
 import { QuestionType } from 'types/course/assessment/question';
 
+import RubricPanel from '../../containers/RubricPanel';
 import { AnswerDetailsProps } from '../../types';
 
-import AttachmentDetails from './AttachmentDetails';
-
 const RubricBasedResponseDetails = (
   props: AnswerDetailsProps<QuestionType.RubricBasedResponse>,
 ): JSX.Element => {
   const { question, answer } = props;
-
   return (
-    <Typography
-      dangerouslySetInnerHTML={{ __html: answer.fields.answer_text }}
-      variant="body2"
-    />
+    <>
+      <Typography
+        dangerouslySetInnerHTML={{ __html: answer.fields.answer_text }}
+        variant="body2"
+      />
+      <RubricPanel
+        answerCategoryGrades={answer.categoryGrades}
+        answerId={answer.id}
+        question={question}
+        setIsFirstRendering={() => {}} // Placeholder function since RubricPanel is not editable here
+      />
+    </>
   );
 };
 

client/app/bundles/course/assessment/submission/containers/QuestionGrade.tsx

@@ -1,7 +1,10 @@
 import { FC, useState } from 'react';
 import { Chip, Paper, TextField, Tooltip, Typography } from '@mui/material';
 import { QuestionType } from 'types/course/assessment/question';
-import { SubmissionQuestionBaseData } from 'types/course/assessment/submission/question/types';
+import {
+  SubmissionQuestionBaseData,
+  SubmissionQuestionData,
+} from 'types/course/assessment/submission/question/types';
 
 import { FIELD_LONG_DEBOUNCE_DELAY_MS } from 'lib/constants/sharedConstants';
 import { getSubmissionId } from 'lib/helpers/url-helpers';
@@ -13,6 +16,7 @@ import { saveGrade, updateGrade } from '../actions/answers';
 import { workflowStates } from '../constants';
 import { computeExp } from '../reducers/grading';
 import { QuestionGradeData } from '../reducers/grading/types';
+import { getRubricCategoryGradesForAnswerId } from '../selectors/answers';
 import { getAssessment } from '../selectors/assessments';
 import {
   getBasePoints,
@@ -23,6 +27,7 @@ import {
 import { getQuestions } from '../selectors/questions';
 import { getSubmission } from '../selectors/submissions';
 import translations from '../translations';
+import { AnswerDetailsMap } from '../types';
 
 import RubricPanel from './RubricPanel';
 
@@ -55,7 +60,6 @@ const QuestionGrade: FC<QuestionGradeProps> = (props) => {
   const submission = useAppSelector(getSubmission);
   const questions = useAppSelector(getQuestions);
   const questionWithGrades = useAppSelector(getQuestionWithGrades);
-
   const submissionId = getSubmissionId();
 
   const { submittedAt, bonusEndAt, graderView, bonusPoints, workflowState } =
@@ -69,21 +73,24 @@ const QuestionGrade: FC<QuestionGradeProps> = (props) => {
   const basePoints = useAppSelector(getBasePoints);
   const expMultiplier = useAppSelector(getExpMultiplier);
   const maximumGrade = useAppSelector(getMaximumGrade);
+  const answerCategoryGradesFromStore = useAppSelector((state) =>
+    grading ? getRubricCategoryGradesForAnswerId(state, grading.id) : [],
+  );
 
   const attempting = workflowState === workflowStates.Attempting;
   const published = workflowState === workflowStates.Published;
 
-  const isRubricBasedResponse =
-    question.type === QuestionType.RubricBasedResponse;
-
   const editable = !attempting && graderView;
 
   const isNotGradedAndNotPublished =
     workflowState !== workflowStates.Graded &&
     workflowState !== workflowStates.Published;
 
+  const isRubricBasedResponse =
+    question.type === QuestionType.RubricBasedResponse;
   const isRubricVisible =
-    !submission.isStudent || assessment.showRubricToStudents;
+    isRubricBasedResponse &&
+    (!submission.isStudent || assessment.showRubricToStudents);
 
   const handleSaveGrade = (
     newGrade: string | number | null,
@@ -278,12 +285,18 @@ const QuestionGrade: FC<QuestionGradeProps> = (props) => {
     </Typography>
   );
 
+  const answerCategoryGrades = (
+    isRubricVisible && grading ? answerCategoryGradesFromStore : undefined
+  ) as AnswerDetailsMap['RubricBasedResponse']['categoryGrades'] | undefined;
+
   return (
     (editable || published) && (
       <>
-        {isRubricBasedResponse && isRubricVisible && (
+        {isRubricVisible && answerCategoryGrades && (
           <RubricPanel
-            questionId={questionId}
+            answerCategoryGrades={answerCategoryGrades!}
+            answerId={grading.id}
+            question={question as SubmissionQuestionData<'RubricBasedResponse'>}
             setIsFirstRendering={setIsFirstRendering}
           />
         )}

client/app/bundles/course/assessment/submission/containers/RubricPanel.tsx

@@ -9,40 +9,27 @@ import {
 } from '@mui/material';
 import { SubmissionQuestionData } from 'types/course/assessment/submission/question/types';
 
-import { useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
-import { getRubricCategoryGradesForAnswerId } from '../selectors/answers';
-import { getQuestionWithGrades } from '../selectors/grading';
-import { getQuestions } from '../selectors/questions';
 import translations from '../translations';
+import { AnswerDetailsMap } from '../types';
 
 import RubricPanelRow from './RubricPanelRow';
 
 interface RubricPanelProps {
+  answerId: number;
+  answerCategoryGrades: AnswerDetailsMap['RubricBasedResponse']['categoryGrades'];
+  question: SubmissionQuestionData<'RubricBasedResponse'>;
   setIsFirstRendering: (isFirstRendering: boolean) => void;
-  questionId: number;
 }
 
 const RubricPanel: FC<RubricPanelProps> = (props) => {
-  const { setIsFirstRendering, questionId } = props;
-
   const { t } = useTranslation();
-  const questions = useAppSelector(getQuestions);
-
-  const question = questions[
-    questionId
-  ] as SubmissionQuestionData<'RubricBasedResponse'>;
-  const questionWithGrades = useAppSelector(getQuestionWithGrades);
-
-  const answerId = questionWithGrades[questionId].id;
-
-  const categoryGrade = useAppSelector((state) =>
-    getRubricCategoryGradesForAnswerId(state, answerId),
-  );
+  const { answerId, answerCategoryGrades, question, setIsFirstRendering } =
+    props;
 
   const categoryGrades = useMemo(() => {
-    const categoryGradeHash = categoryGrade.reduce(
+    const categoryGradeHash = answerCategoryGrades.reduce(
       (obj, category) => ({
         ...obj,
         [category.categoryId]: {
@@ -68,7 +55,7 @@ const RubricPanel: FC<RubricPanelProps> = (props) => {
       }),
       {},
     );
-  }, [categoryGrade, question.categories]);
+  }, [answerCategoryGrades, question.categories]);
 
   return (
     <div className="w-full p-2">
@@ -91,13 +78,13 @@ const RubricPanel: FC<RubricPanelProps> = (props) => {
         </TableHead>
 
         <TableBody>
-          {question.categories.map((category) => (
+          {question?.categories.map((category) => (
             <RubricPanelRow
               key={category.id}
               answerId={answerId}
               category={category}
               categoryGrades={categoryGrades}
-              questionId={questionId}
+              question={question}
               setIsFirstRendering={setIsFirstRendering}
             />
           ))}

client/app/bundles/course/assessment/submission/containers/RubricPanelRow.tsx

@@ -19,7 +19,6 @@ import {
   getExpMultiplier,
   getMaximumGrade,
 } from '../selectors/grading';
-import { getQuestions } from '../selectors/questions';
 import { getSubmission } from '../selectors/submissions';
 import { GradeWithPrefilledStatus } from '../types';
 
@@ -28,25 +27,20 @@ import RubricGrade from './RubricGrade';
 
 interface RubricPanelRowProps {
   answerId: number;
-  questionId: number;
+  question: SubmissionQuestionData<'RubricBasedResponse'>;
   category: RubricBasedResponseCategoryQuestionData;
   categoryGrades: Record<number, AnswerRubricGradeData>;
   setIsFirstRendering: (isFirstRendering: boolean) => void;
 }
 
 const RubricPanelRow: FC<RubricPanelRowProps> = (props) => {
-  const { answerId, questionId, category, categoryGrades } = props;
+  const { answerId, question, category, categoryGrades } = props;
 
+  // For editable rubric grades
   const dispatch = useAppDispatch();
-
   const submission = useAppSelector(getSubmission);
-  const questions = useAppSelector(getQuestions);
-
-  const { graderView, workflowState } = submission;
-  const question = questions[
-    questionId
-  ] as SubmissionQuestionData<'RubricBasedResponse'>;
-
+  const { graderView, workflowState, submittedAt, bonusEndAt, bonusPoints } =
+    submission;
   const submissionId = getSubmissionId();
 
   const maximumGrade = useAppSelector(getMaximumGrade);
@@ -57,11 +51,10 @@ const RubricPanelRow: FC<RubricPanelRowProps> = (props) => {
   const published = workflowState === workflowStates.Published;
   const editable = !attempting && graderView;
 
-  const { submittedAt, bonusEndAt, bonusPoints } = submission;
-
   const bonusAwarded =
     new Date(submittedAt) < new Date(bonusEndAt) ? bonusPoints : 0;
 
+  const categoryIds = question.categories.map((cat) => cat.id);
   const categoryGradeExplanationMap = question.categories.reduce(
     (acc, cat) => ({
       ...acc,
@@ -76,8 +69,6 @@ const RubricPanelRow: FC<RubricPanelRowProps> = (props) => {
     {},
   );
 
-  const categoryIds = question.categories.map((cat) => cat.id);
-
   const handleSaveRubricAndGrade = (
     catGrades: Record<number, AnswerRubricGradeData>,
     qId: number,
@@ -108,12 +99,12 @@ const RubricPanelRow: FC<RubricPanelRowProps> = (props) => {
       saveRubricAndGrade(
         submissionId,
         answerId,
-        questionId,
+        question.id,
         categoryIds,
         newExpPoints,
         published,
         catGrades,
-        question.maximumGrade,
+        question?.maximumGrade,
       ),
     );
   };
@@ -131,6 +122,7 @@ const RubricPanelRow: FC<RubricPanelRowProps> = (props) => {
         {editable ? (
           <RubricExplanation
             key={category.id}
+            questionId={question.id}
             updateGrade={debouncedUpdateRubricGrade}
             {...props}
           />
@@ -150,6 +142,7 @@ const RubricPanelRow: FC<RubricPanelRowProps> = (props) => {
         {editable ? (
           <RubricGrade
             key={category.id}
+            questionId={question.id}
             updateGrade={debouncedUpdateRubricGrade}
             {...props}
           />

client/app/types/course/assessment/submission/answer/rubricBasedResponse.ts

@@ -25,11 +25,12 @@ export interface RubricBasedResponseAnswerData extends AnswerBaseData {
     path?: string;
   };
   latestAnswer?: RubricBasedResponseAnswerData;
-  categoryScores: {
-    canReadRubric: boolean;
+  categoryGrades: {
     id: number | null | undefined;
     categoryId: number;
-    score: number;
+    grade: number;
+    gradeId: number;
+    explanation: string | null;
   }[];
 }
 

client/app/types/course/assessment/submission/question/types.ts

@@ -99,6 +99,7 @@ export interface SubmissionQuestionBaseData extends QuestionData {
   questionTitle: string;
   submissionQuestionId: number;
   topicId: number;
+  type: QuestionType;
   answerId?: number;
   isCodaveri?: boolean;
   // Derived within redux reducer