hardcoded graphs on summary tab

Author: jasminesov

src/snapshots-app/client/bundles/components/submission/Graphs.jsx

@@ -94,45 +94,7 @@ function Graphs({
         allProblemDisplayNames={allProblemDisplayNames}
         numSolved={numQuestionsSolved[selectedBackup]}
       />
-      <LineChart
-        xAxis={xAxis}
-        series={[
-          {
-            curve: "linear",
-            data: fileMetadata.num_lines,
-            label: `# of lines in ${file}`,
-          },
-        ]}
-        height={height}
-      />
-      <LineChart
-        margin={{ top: 100 }}
-        xAxis={xAxis}
-        series={[
-          {
-            curve: "linear",
-            data: numQuestionsSolved,
-            label: "# of questions solved",
-          },
-          {
-            curve: "linear",
-            data: numQuestionsUnsolved,
-            label: "# of questions unsolved",
-          },
-        ]}
-        height={height}
-      />
-      <LineChart
-        xAxis={xAxis}
-        series={[
-          {
-            curve: "linear",
-            data: numAttempts,
-            label: "# of attempts",
-          },
-        ]}
-        height={height}
-      />
+      
     </div>
   );
 }

src/snapshots-app/client/bundles/components/submission/tabs/SummaryTab.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
+import { LineChart } from "@mui/x-charts/LineChart";
 import {
   Box,
   Container,
@@ -39,26 +40,54 @@ function SummaryTab({}) {
   const [activeIndex, setActiveIndex] = useState(0);
   const routeParams = useParams();
   const [summaryStats, setSummaryStats] = useState(null);
+  const [backupData, setBackupData] = useState(null);
+  const [fileMetadata, setFileMetadata] = useState(null);
 
   useEffect(() => {
     fetch(
       `/api/summary_statistics/${routeParams.courseId}/${routeParams.assignmentId}/${routeParams.studentId}`,
-      {
-        method: "GET",
-      },
+      { method: "GET" }
     )
       .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-        }
+        if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
         return response.json();
       })
-      .then((responseData) => {
-        console.log("response data", responseData);
-        setSummaryStats(responseData);
-      });
+      .then((data) => setSummaryStats(data));
   }, [routeParams]);
 
+  useEffect(() => {
+    fetch(
+      `/api/backups/${routeParams.courseId}/${routeParams.assignmentId}/${routeParams.studentId}`
+    )
+      .then((res) => res.json())
+      .then((data) => setBackupData(data));
+  }, [routeParams]);
+
+  useEffect(() => {
+    fetch(
+      `/api/backup_file_metadata/${routeParams.courseId}/${routeParams.assignmentId}/${routeParams.studentId}`
+    )
+      .then((res) => res.json())
+      .then((data) => setFileMetadata(data));
+  }, [routeParams]);
+
+  const backupTimestamps = backupData?.backups.map((b) => new Date(b.created)) ?? [];
+  const xAxis = [{ data: backupTimestamps, scaleType: "time", label: "Date" }];
+  const height = 300;
+
+  const firstFile = fileMetadata ? Object.keys(fileMetadata.files_to_metadata)[0] : null;
+  const numLines = firstFile ? fileMetadata.files_to_metadata[firstFile].num_lines : [];
+
+  const numQuestionsSolved = backupData?.backups.map((b) =>
+    b.history.filter((h) => h.solved).length
+  ) ?? [];
+  const numQuestionsUnsolved = backupData?.backups.map((b) =>
+    b.history.filter((h) => !h.solved).length
+  ) ?? [];
+  const numAttempts = backupData?.backups.map((b) =>
+    b.history.reduce((sum, h) => sum + (h.attempts ?? 0), 0)
+  ) ?? [];
+
   const menuItems = useMemo(
     () =>
       summaryStats
@@ -82,9 +111,7 @@ function SummaryTab({}) {
                 <StatisticsDashboard
                   title="Number of Problems Solved"
                   tooltip="Hover over chart for more details"
-                  studentValue={
-                    summaryStats.problems_solved_distribution.studentValue
-                  }
+                  studentValue={summaryStats.problems_solved_distribution.studentValue}
                   data={summaryStats.problems_solved_distribution.data}
                 />
               ),
@@ -96,41 +123,33 @@ function SummaryTab({}) {
                 <StatisticsDashboard
                   title="Number of Backups"
                   tooltip="Hover over chart for more details"
-                  studentValue={
-                    summaryStats.number_of_backups_distribution.studentValue
-                  }
+                  studentValue={summaryStats.number_of_backups_distribution.studentValue}
                   data={summaryStats.number_of_backups_distribution.data}
                 />
               ),
             },
             {
               text: "Total Time Spent",
               icon: <AccessTime />,
-              tooltip:
-                "Timestamp of last backup minus timestamp of first backup",
+              tooltip: "Timestamp of last backup minus timestamp of first backup",
               component: (
                 <StatisticsDashboard
                   title="Total Time Spent (min)"
                   tooltip="Hover over chart for more details"
-                  studentValue={
-                    summaryStats.total_time_spent_distribution.studentValue
-                  }
+                  studentValue={summaryStats.total_time_spent_distribution.studentValue}
                   data={summaryStats.total_time_spent_distribution.data}
                 />
               ),
             },
             {
               text: "Total Active Time Spent",
               icon: <Timer />,
-              tooltip:
-                "Total time spent on task. To compute this, we do not count large gaps in activity.",
+              tooltip: "Total time spent on task. To compute this, we do not count large gaps in activity.",
               component: (
                 <StatisticsDashboard
                   title="Total Active Time Spent (min)"
                   tooltip="Hover over chart for more details"
-                  studentValue={
-                    summaryStats.active_time_spent_distribution.studentValue
-                  }
+                  studentValue={summaryStats.active_time_spent_distribution.studentValue}
                   data={summaryStats.active_time_spent_distribution.data}
                 />
               ),
@@ -143,18 +162,18 @@ function SummaryTab({}) {
                 <StatisticsDashboard
                   title="Number of Lint Errors"
                   tooltip="Hover over chart for more details"
-                  studentValue={
-                    summaryStats.lint_errors_distribution.studentValue
-                  }
+                  studentValue={summaryStats.lint_errors_distribution.studentValue}
                   data={summaryStats.lint_errors_distribution.data}
                 />
               ),
             },
           ]
         : [],
-    [summaryStats],
+    [summaryStats]
   );
 
+  const chartsReady = backupData && fileMetadata && backupTimestamps.length > 0;
+
   return (
     <Container maxWidth="xl" sx={{ py: 4 }}>
       <div
@@ -170,17 +189,12 @@ function SummaryTab({}) {
       </div>
 
       {menuItems.length > 0 ? (
-        // TODO: generalize this left sidebar + main area into a component
+
         <Box sx={{ display: "flex", gap: 3, minHeight: "80vh" }}>
           {/* Left Sidebar */}
           <Paper
             elevation={2}
-            sx={{
-              width: 240,
-              flexShrink: 0,
-              borderRadius: 2,
-              overflow: "hidden",
-            }}
+            sx={{ width: 240, flexShrink: 0, borderRadius: 2, overflow: "hidden" }}
           >
             <List>
               {menuItems.map((item, index) => (
@@ -196,9 +210,7 @@ function SummaryTab({}) {
                       onClick={(e) => e.stopPropagation()}
                       sx={{ ml: "auto", display: "flex", alignItems: "center" }}
                     >
-                      {item.tooltip ? (
-                        <InfoTooltip info={item.tooltip} />
-                      ) : null}
+                      {item.tooltip ? <InfoTooltip info={item.tooltip} /> : null}
                     </Box>
                   </ListItemButton>
                 </ListItem>
@@ -209,14 +221,35 @@ function SummaryTab({}) {
           {/* Main Content Area */}
           <Paper
             elevation={1}
-            sx={{
-              flexGrow: 1,
-              p: 4,
-              borderRadius: 2,
-              backgroundColor: "#fafafa",
-            }}
+            sx={{ flexGrow: 1, p: 4, borderRadius: 2, backgroundColor: "#fafafa" }}
           >
             {menuItems[activeIndex].component}
+
+            {chartsReady ? (
+              <>
+                <LineChart
+                  xAxis={xAxis}
+                  series={[{ curve: "linear", data: numLines, label: `# of lines in ${firstFile}` }]}
+                  height={height}
+                />
+                <LineChart
+                  margin={{ top: 100 }}
+                  xAxis={xAxis}
+                  series={[
+                    { curve: "linear", data: numQuestionsSolved, label: "# of questions solved" },
+                    { curve: "linear", data: numQuestionsUnsolved, label: "# of questions unsolved" },
+                  ]}
+                  height={height}
+                />
+                <LineChart
+                  xAxis={xAxis}
+                  series={[{ curve: "linear", data: numAttempts, label: "# of attempts" }]}
+                  height={height}
+                />
+              </>
+            ) : (
+              <CircularProgress />
+            )}
           </Paper>
         </Box>
       ) : (