From 4ac881fef44a241c811392f42395839c9a407edc Mon Sep 17 00:00:00 2001
From: Ben Lerner <blerner@ccs.neu.edu>
Date: Wed, 22 Nov 2023 10:12:56 -0500
Subject: [PATCH] clean up links to point to specific questions/parts where
 possible (and only do the string-interpolation once, to ensure they're all
 consistent)

---
 .../components/workflows/grading/index.tsx    | 47 +++++++++++++++----
 .../professor/exams/stats/ShowLinks.tsx       |  9 ++--
 .../workflows/professor/exams/stats/index.tsx | 28 +++++------
 3 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/app/packs/components/workflows/grading/index.tsx b/app/packs/components/workflows/grading/index.tsx
index d457866e4..3aedccf90 100644
--- a/app/packs/components/workflows/grading/index.tsx
+++ b/app/packs/components/workflows/grading/index.tsx
@@ -1800,7 +1800,7 @@ const RenderQnumTree : React.FC<{
   info: GradingLockInfo[][][],
   examId: string,
   qpPairs: QPInfo,
-  RenderItem: React.FC<{ item: GradingLockInfo, examId: string }>,
+  RenderItem: React.FC<{ item: GradingLockInfo, examId: string, singlePart: boolean }>,
 }> = (props) => {
   const {
     className,
@@ -1851,7 +1851,7 @@ const CollapsibleQnumTree : React.FC<{
   info: GradingLockInfo[][],
   examId: string,
   multipart: boolean,
-  RenderItem: React.FC<{ item: GradingLockInfo, examId: string }>,
+  RenderItem: React.FC<{ item: GradingLockInfo, examId: string, singlePart: boolean }>,
 }> = (props) => {
   const {
     qnum,
@@ -1889,7 +1889,7 @@ const RenderPnumTree : React.FC<{
   info: GradingLockInfo[][],
   examId: string,
   multipart: boolean,
-  RenderItem: React.FC<{ item: GradingLockInfo, examId: string }>,
+  RenderItem: React.FC<{ item: GradingLockInfo, examId: string, singlePart: boolean }>,
 }> = (props) => {
   const {
     className,
@@ -1906,6 +1906,7 @@ const RenderPnumTree : React.FC<{
             key={`reg-${item.registration.id}-q${item.qnum}-p${item.pnum}`}
             item={item}
             examId={examId}
+            singlePart
           />
         ))}
       </ul>
@@ -1932,7 +1933,7 @@ const CollapsiblePnumTree : React.FC<{
   pnum: number,
   items: GradingLockInfo[],
   examId: string,
-  RenderItem: React.FC<{ item: GradingLockInfo, examId: string }>,
+  RenderItem: React.FC<{ item: GradingLockInfo, examId: string, singlePart: boolean }>,
 }> = (props) => {
   const {
     pnum,
@@ -1954,13 +1955,29 @@ const CollapsiblePnumTree : React.FC<{
       </span>
       <Collapse in={open}>
         <ul>
-          {items.map((item) => <RenderItem key={item.id} item={item} examId={examId} />)}
+          {items.map((item) => (
+            <RenderItem
+              key={item.id}
+              item={item}
+              examId={examId}
+              singlePart={false}
+            />
+          ))}
         </ul>
       </Collapse>
     </>
   );
 };
 
+export function gradingLink(
+  examId: string,
+  registrationId: string,
+  qnum: number,
+  pnum: number,
+): string {
+  return `/exams/${examId}/grading/${registrationId}/${qnum}/${pnum}`;
+}
+
 const RenderLinkToGrading : React.FC<{
   item: GradingLockInfo,
   examId: string,
@@ -1978,7 +1995,7 @@ const RenderLinkToGrading : React.FC<{
         <Link
           className="ml-2"
           target="_blank"
-          to={`/exams/${examId}/grading/${registration.id}/${qnum}/${pnum}`}
+          to={gradingLink(examId, registration.id, qnum, pnum)}
         >
           {describeTime(DateTime.fromISO(updatedAt))}
         </Link>
@@ -1987,11 +2004,23 @@ const RenderLinkToGrading : React.FC<{
   );
 };
 
+export function submissionLink(
+  examId: string,
+  registrationId: string,
+  singlePart: boolean,
+  qnum: number,
+  pnum: number,
+): string {
+  const anchor = singlePart ? `question-${qnum}` : `question-${qnum}-part-${pnum}`;
+  return `/exams/${examId}/submissions/${registrationId}#${anchor}`;
+}
+
 const RenderLinkToSubmission : React.FC<{
   item: GradingLockInfo,
   examId: string,
+  singlePart: boolean,
 }> = (props) => {
-  const { item, examId } = props;
+  const { item, examId, singlePart } = props;
   const {
     registration,
     updatedAt,
@@ -2005,7 +2034,7 @@ const RenderLinkToSubmission : React.FC<{
         <Link
           className="ml-2"
           target="_blank"
-          to={`/exams/${examId}/submissions/${registration.id}`}
+          to={submissionLink(examId, registration.id, singlePart, qnum, pnum)}
         >
           <span className="mr-2">{describeTime(DateTime.fromISO(updatedAt))}</span>
         </Link>
@@ -2146,7 +2175,7 @@ const BeginGradingButton: React.FC<{
           qnum,
           pnum,
         } = gradeNext;
-        history.push(`/exams/${examId}/grading/${registrationId}/${qnum}/${pnum}`);
+        history.push(gradingLink(examId, registrationId, qnum, pnum));
       },
       onError: (err) => {
         if (err.cause?.[0]?.extensions && !err.cause[0].extensions.anyRemaining) {
diff --git a/app/packs/components/workflows/professor/exams/stats/ShowLinks.tsx b/app/packs/components/workflows/professor/exams/stats/ShowLinks.tsx
index d45e2540a..1714b4561 100644
--- a/app/packs/components/workflows/professor/exams/stats/ShowLinks.tsx
+++ b/app/packs/components/workflows/professor/exams/stats/ShowLinks.tsx
@@ -6,7 +6,7 @@ import {
 } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import Icon from '@student/exams/show/components/Icon';
-import { iconForPoints, variantForPoints } from '@hourglass/workflows/grading';
+import { iconForPoints, submissionLink, variantForPoints } from '@hourglass/workflows/grading';
 import { pluralize } from '@hourglass/common/helpers';
 import { IconType } from 'react-icons';
 import { RiMessage2Line } from 'react-icons/ri';
@@ -62,15 +62,14 @@ export const ShowLinks: React.FC<{
       <Modal.Body>
         <table>
           {comments.map(({ comment, registration }) => {
-            const anchor = singlePart ? `question-${qnum}` : `question-${qnum}-part-${pnum}`;
-            const submissionLink = `/exams/${examId}/submissions/${registration.id}#${anchor}`;
+            const link = submissionLink(examId, registration.id, singlePart, qnum, pnum);
             return (
               <tr>
                 <td style={{ whiteSpace: 'nowrap' }} className="pr-3">
                   <Link
                     key={comment.id}
                     target="blank"
-                    to={submissionLink}
+                    to={link}
                   >
                     {`${registration.user.displayName}:`}
                   </Link>
@@ -79,7 +78,7 @@ export const ShowLinks: React.FC<{
                   <Link
                     key={comment.id}
                     target="blank"
-                    to={submissionLink}
+                    to={link}
                   >
                     <Alert
                       variant={variantForPoints(comment.points)}
diff --git a/app/packs/components/workflows/professor/exams/stats/index.tsx b/app/packs/components/workflows/professor/exams/stats/index.tsx
index af3d38ffb..12d633f3a 100644
--- a/app/packs/components/workflows/professor/exams/stats/index.tsx
+++ b/app/packs/components/workflows/professor/exams/stats/index.tsx
@@ -20,6 +20,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
+import { submissionLink } from '@hourglass/workflows/grading';
 import { pluralize } from '@hourglass/common/helpers';
 import { QuestionName } from '@student/exams/show/components/ShowQuestion';
 import { PartName } from '@student/exams/show/components/Part';
@@ -303,21 +304,18 @@ const GradingAnomalies: React.FC<{
                   />
                 </b>
                 <table>
-                  {anomalies.map((a) => {
-                    const anchor = singlePart ? `question-${qnum}` : `question-${qnum}-part-${pnum}`;
-                    return (
-                      <tr>
-                        <Link
-                          key={a.registration.id}
-                          target="blank"
-                          to={`/exams/${examId}/submissions/${a.registration.id}#${anchor}`}
-                        >
-                          {a.registration.user.displayName}
-                        </Link>
-                        {` (${a.scores[qnum][pnum]} / ${pluralize(dbQuestions[qnum].parts[pnum].points, 'point', 'points')})`}
-                      </tr>
-                    );
-                  })}
+                  {anomalies.map((a) => (
+                    <tr>
+                      <Link
+                        key={a.registration.id}
+                        target="blank"
+                        to={submissionLink(examId, a.registration.id, singlePart, qnum, pnum)}
+                      >
+                        {a.registration.user.displayName}
+                      </Link>
+                      {` (${a.scores[qnum][pnum]} / ${pluralize(dbQuestions[qnum].parts[pnum].points, 'point', 'points')})`}
+                    </tr>
+                  ))}
                 </table>
               </div>
             );