feature-998 Design new interface for reviewing and grading student work

bases/rsptx/assignment_server_api/assignment_builder/src/App.css

@@ -9,6 +9,14 @@ html, body, #root {
   margin: auto;
 }
 
+.appGradientBg {
+  background:
+    radial-gradient(1200px 500px at 10% -10%, rgba(99, 102, 241, 0.18), transparent 60%),
+    radial-gradient(1000px 400px at 110% 20%, rgba(236, 72, 153, 0.14), transparent 60%),
+    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+  background-attachment: local;
+}
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;

bases/rsptx/assignment_server_api/assignment_builder/src/App.tsx

@@ -63,10 +63,10 @@ function OldAssignmentBuilder() {
   );
 }
 
-function AssignmentGrader() {
+function AssignmentGraderOld() {
   return (
     <div className="App">
-      <h1>Assignment Grader</h1>
+      <h1>Assignment Grader (legacy)</h1>
       <AssignmentPicker />
       <AssignmentSummary />
     </div>
@@ -89,6 +89,7 @@ function AppContent() {
     >
       <Menubar style={{ flexShrink: 0, flexWrap: "nowrap" }} model={items} start={start} />
       <div
+        className="appGradientBg"
         style={{
           flex: "1 1 auto",
           overflow: "auto",
@@ -268,7 +269,61 @@ function App() {
             },
             {
               path: "grader",
-              element: <AssignmentGrader />
+              async lazy() {
+                const { Grader } = await import("@components/routes/Grader");
+                return { Component: Grader };
+              },
+              children: [
+                {
+                  index: true,
+                  async lazy() {
+                    const { GraderAssignmentsPage } = await import(
+                      "@components/routes/Grader"
+                    );
+                    return { Component: GraderAssignmentsPage };
+                  }
+                },
+                {
+                  path: ":assignmentId",
+                  async lazy() {
+                    const { GraderQuestionsPage } = await import(
+                      "@components/routes/Grader"
+                    );
+                    return { Component: GraderQuestionsPage };
+                  }
+                },
+                {
+                  path: ":assignmentId/questions/:questionId",
+                  async lazy() {
+                    const { GraderQuestionPage } = await import(
+                      "@components/routes/Grader"
+                    );
+                    return { Component: GraderQuestionPage };
+                  }
+                },
+                {
+                  path: ":assignmentId/questions/:questionId/students/:sid",
+                  async lazy() {
+                    const { GraderQuestionPage } = await import(
+                      "@components/routes/Grader"
+                    );
+                    return { Component: GraderQuestionPage };
+                  }
+                },
+                {
+                  path: ":assignmentId/questions/:questionId/:sid",
+                  async lazy() {
+                    const { GraderQuestionPage } = await import(
+                      "@components/routes/Grader"
+                    );
+                    return { Component: GraderQuestionPage };
+                  }
+                }
+              ]
+            },
+            {
+              path: "graderOld",
+              element: <AssignmentGraderOld />
             },
             {
               path: "admin",

bases/rsptx/assignment_server_api/assignment_builder/src/componentFuncs.js

@@ -99,43 +99,49 @@ export async function renderRunestoneComponent(
             window.componentMap[res.divid] = res;
           }
         }
-        // add a button to the preview to allow the user to flag this compenent for review
-        let flagButton = document.createElement("button");
-        console.log("res", res);
-        flagButton.classList.add("flag-for-review");
-        flagButton.textContent = "Flag for Review";
-        flagButton.addEventListener("click", async function () {
-          let data = {
-            question_name: res.divid || res.selector_id || res.origOpts.orig.id
-          };
-          if (!data.question_name) {
-            alert("Error:  Cannot determine question name to flag for review");
-            return;
-          }
-          console.log("Flagging question for review", data.question_name);
-          // Send a POST request to the server to flag the question
-          let response = await fetch("/admin/instructor/flag_question", {
-            method: "POST",
-            body: JSON.stringify(data),
-            headers: {
-              "Content-Type": "application/json"
+        if (moreOpts.graderMode) {
+          window.componentMap = window.componentMap || {};
+          let key = moreOpts.gradingContainer
+            ? `${moreOpts.gradingContainer} ${res.divid}`
+            : res.divid;
+          window.componentMap[key] = res;
+        }
+        if (!moreOpts.suppressFlagForReview && !moreOpts.graderMode) {
+          let flagButton = document.createElement("button");
+          flagButton.classList.add("flag-for-review");
+          flagButton.textContent = "Flag for Review";
+          flagButton.addEventListener("click", async function () {
+            let data = {
+              question_name: res.divid || res.selector_id || res.origOpts.orig.id
+            };
+            if (!data.question_name) {
+              alert("Error:  Cannot determine question name to flag for review");
+              return;
             }
-          });
-          if (response.ok) {
-            let resp = await response.json();
-            if (resp.success === true) {
-              flagButton.textContent = "Question Flagged";
-              flagButton.style.backgroundColor = "#22c55e";
-              flagButton.style.color = "white";
-              flagButton.disabled = true;
+            console.log("Flagging question for review", data.question_name);
+            let response = await fetch("/admin/instructor/flag_question", {
+              method: "POST",
+              body: JSON.stringify(data),
+              headers: {
+                "Content-Type": "application/json"
+              }
+            });
+            if (response.ok) {
+              let resp = await response.json();
+              if (resp.success === true) {
+                flagButton.textContent = "Question Flagged";
+                flagButton.style.backgroundColor = "#22c55e";
+                flagButton.style.color = "white";
+                flagButton.disabled = true;
+              } else {
+                alert("Error: " + resp.message);
+              }
             } else {
-              alert("Error: " + resp.message);
+              alert("Error: " + response.statusText);
             }
-          } else {
-            alert("Error: " + response.statusText);
-          }
-        });
-        previewRef.current.appendChild(flagButton);
+          });
+          previewRef.current.appendChild(flagButton);
+        }
       } catch (e) {
         console.log(e);
         previewRef.current.innerHTML = `<p>An error occurred while trying to render a ${componentKind}</p>`;