From 7679a63d53b4185a6ae9105b0ba22754aefd2471 Mon Sep 17 00:00:00 2001
From: jakeaturner <jturner@cosmistack.com>
Date: Tue, 16 Jul 2024 20:48:08 -0700
Subject: [PATCH] fix: various minor ui improvements

---
 components/EarlyWarningCourseMetrics.tsx      |  6 +--
 components/EarlyWarningStudentRow.tsx         | 22 ++++++-----
 components/InstructorDashboard.tsx            | 14 +++----
 components/InstructorQuickMetrics.tsx         |  8 ++--
 components/LearningCurveDescriptor.tsx        | 37 ++++++++++++++++++-
 components/LearningObjectiveLevel.tsx         |  8 ++--
 components/SmallMetricCard.tsx                |  4 +-
 components/Visualizations/StudentActivity.tsx | 30 +++++++++++++++
 components/Visualizations/TimeInReview.tsx    |  2 +-
 components/Visualizations/TimeOnTask.tsx      |  2 +-
 10 files changed, 98 insertions(+), 35 deletions(-)

diff --git a/components/EarlyWarningCourseMetrics.tsx b/components/EarlyWarningCourseMetrics.tsx
index bb8e781..817e799 100644
--- a/components/EarlyWarningCourseMetrics.tsx
+++ b/components/EarlyWarningCourseMetrics.tsx
@@ -10,15 +10,13 @@ const EarlyWarningCourseMetrics = ({
   return (
     <div className="tw-flex tw-flex-row tw-justify-center">
       <SmallMetricCard
-        title="Course Avg"
+        title="Average of Predicted Scores"
         value={`${course_avg ?? 0}%`}
-        unit="By Predicted Scores"
         loading={false}
       />
       <SmallMetricCard
-        title="Course Std Dev"
+        title="Std. Dev. of Predicted Scores"
         value={course_std_dev ?? 0}
-        unit="By Predicted Scores"
         loading={false}
         className="tw-ml-36"
       />
diff --git a/components/EarlyWarningStudentRow.tsx b/components/EarlyWarningStudentRow.tsx
index 4bbcf65..9e0b45f 100644
--- a/components/EarlyWarningStudentRow.tsx
+++ b/components/EarlyWarningStudentRow.tsx
@@ -25,14 +25,14 @@ const Metric = ({
   unit: string;
   percent: boolean;
   absolute?: boolean;
-  color?: "red" | "green";
+  color?: "red" | "dark-red" | "black";
 }) => {
   const textColorClass =
     color === "red"
       ? "tw-text-red-500"
-      : color === "green"
-      ? "tw-text-black"
-      : "";
+      : color === "dark-red"
+      ? "tw-text-red-700"
+      : "tw-text-black";
 
   return (
     <div className="tw-rounded-md tw-border tw-border-slate-300 tw-border-solid tw-w-52 xl:tw-w-72 tw-p-1 xl:tw-p-2 tw-shadow-sm">
@@ -93,18 +93,20 @@ const EarlyWarningStudentRow: React.FC<EarlyWarningStudentRowProps> = ({
               value={data.estimated_final}
               unit="Predicted Final Score"
               percent={true}
-              color={data.estimated_final > 70 ? "green" : "red"}
+              color={
+                data.estimated_final < 50
+                  ? "dark-red"
+                  : data.estimated_final < 70
+                  ? "red"
+                  : "black"
+              }
             />
             <Metric
               value={data.course_avg_diff}
               unit={`${direction} Class Average`}
               percent={true}
             />
-            <Metric
-              value={data.z_score}
-              unit="Z-Score"
-              percent={false}
-            />
+            <Metric value={data.z_score} unit="Z-Score" percent={false} />
           </div>
         </Card.Body>
       </Card.Body>
diff --git a/components/InstructorDashboard.tsx b/components/InstructorDashboard.tsx
index e0badd9..ecc6505 100644
--- a/components/InstructorDashboard.tsx
+++ b/components/InstructorDashboard.tsx
@@ -30,11 +30,11 @@ const InstructorDashboard = ({
     <GenericPageContainer>
       <PageHeader
         title="Instructor Dashboard"
-        subtitle="View analytics and data visualizations for your course. Click on a visualization to view more details."
+        subtitle="View analytics and data visualizations for your course."
       />
       <InstructorQuickMetrics course_id={course_id} />
       <VisualizationContainer
-        title="Performance"
+        title="Performance per Assignment"
         description="Class average vs. selected student's scores"
         tooltipDescription="Performance per assignment is the student's score on each assignment, compared to the class average."
       >
@@ -45,8 +45,8 @@ const InstructorDashboard = ({
         />
       </VisualizationContainer>
       <VisualizationContainer
-        title="Student Activity Per Assignment"
-        description="Comparison of student activity on the selected assignment"
+        title="Student Activity on Assignment"
+        description="Submitted vs. unsubmitted questions for selected student"
       >
         <ActivityAccessed
           getData={(student_id, assignment_id) =>
@@ -63,7 +63,7 @@ const InstructorDashboard = ({
       </VisualizationContainer> */}
       <VisualizationContainer
         title="Time on Task"
-        description="Class average vs. selected student's cumulative time on task"
+        description="Class average vs. selected student's cumulative time on task per question"
         tooltipDescription="Time on task is the student's time spent working on a question before they submit it."
       >
         <TimeOnTask
@@ -74,7 +74,7 @@ const InstructorDashboard = ({
       </VisualizationContainer>
       <VisualizationContainer
         title="Time in Review"
-        description="Class average vs. selected student's cumulative time in review"
+        description="Class average vs. selected student's cumulative time in review per question"
         tooltipDescription="Time in review is the student's time spent reviewing questions after they have been submitted."
       >
         <TimeInReview
@@ -90,7 +90,7 @@ const InstructorDashboard = ({
         <NoData width={1200} height={400} />
       </VisualizationContainer> */}
       <VisualizationContainer
-        title="Submission Activity"
+        title="Submission Activity (All Students)"
         description="Timeline of student submissions for selected assignment"
         tooltipDescription="A histogram of student submissions over time for the selected assignment."
       >
diff --git a/components/InstructorQuickMetrics.tsx b/components/InstructorQuickMetrics.tsx
index 2f4beeb..47cbed5 100644
--- a/components/InstructorQuickMetrics.tsx
+++ b/components/InstructorQuickMetrics.tsx
@@ -17,13 +17,13 @@ const InstructorQuickMetrics = ({ course_id }: { course_id: string }) => {
       <SmallMetricCard
         title="Assignments"
         value={data?.assignments}
-        unit="Assignments in Course"
+        //unit="Assignments in Course"
         loading={isFetching}
       />
       <SmallMetricCard
         title="Total Questions"
         value={data?.totalQuestions}
-        unit="Questions in Course"
+        // unit="Questions in Course"
         className="tw-ml-4"
         loading={isFetching}
       />
@@ -31,7 +31,7 @@ const InstructorQuickMetrics = ({ course_id }: { course_id: string }) => {
         <SmallMetricCard
           title="Textbook Page Views"
           value={data?.totalPageViews}
-          unit="Textbook Total Page Views"
+          // unit="Textbook Total Page Views"
           className="tw-ml-4"
           loading={isFetching}
         />
@@ -39,7 +39,7 @@ const InstructorQuickMetrics = ({ course_id }: { course_id: string }) => {
       <SmallMetricCard
         title="Enrolled Students"
         value={data?.enrolled}
-        unit="Active Students in Course"
+        // unit="Active Students in Course"
         className="tw-ml-4"
         loading={isFetching}
       />
diff --git a/components/LearningCurveDescriptor.tsx b/components/LearningCurveDescriptor.tsx
index 4b7eadb..744b2d3 100644
--- a/components/LearningCurveDescriptor.tsx
+++ b/components/LearningCurveDescriptor.tsx
@@ -64,14 +64,17 @@ const LearningCurveDescriptor: React.FC<LearningCurveDescriptorProps> = ({
       return calculated > DEFAULT_MAX ? calculated : DEFAULT_MAX;
     };
 
+    const xMax = maxAttempts();
+    const yMax = maxScore();
+
     const x = d3
       .scaleLinear()
-      .domain([0, maxAttempts()])
+      .domain([0, xMax])
       .range([MARGIN.left, width - MARGIN.right]);
 
     const y = d3
       .scaleLinear()
-      .domain([0, maxScore()])
+      .domain([0, yMax])
       .range([height - MARGIN.bottom, MARGIN.top]);
 
     svg
@@ -97,6 +100,36 @@ const LearningCurveDescriptor: React.FC<LearningCurveDescriptorProps> = ({
       .attr("transform", `translate(${MARGIN.left}, 0)`)
       .call(d3.axisLeft(y));
 
+    // Calculate the regression line
+    const n = cleaned.length;
+    const sumX = cleaned.reduce((sum, d) => sum + d.num_attempts, 0);
+    const sumY = cleaned.reduce((sum, d) => sum + d.score, 0);
+    const sumXY = cleaned.reduce((sum, d) => sum + d.num_attempts * d.score, 0);
+    const sumXX = cleaned.reduce(
+      (sum, d) => sum + d.num_attempts * d.num_attempts,
+      0
+    );
+
+    const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX * sumX);
+    const intercept = (sumY - slope * sumX) / n;
+
+    // Define the regression line data
+    const regressionLine = [
+      { num_attempts: 0, score: intercept },
+      { num_attempts: xMax, score: slope * xMax + intercept },
+    ];
+
+    // Add the regression line to the SVG
+    svg
+      .append("line")
+      .datum(regressionLine)
+      .attr("x1", (d) => x(d[0].num_attempts))
+      .attr("y1", (d) => y(d[0].score))
+      .attr("x2", (d) => x(d[1].num_attempts))
+      .attr("y2", (d) => y(d[1].score))
+      .attr("stroke", "red")
+      .attr("stroke-width", 2);
+
     setLoading(false);
   }
 
diff --git a/components/LearningObjectiveLevel.tsx b/components/LearningObjectiveLevel.tsx
index 28dd87c..18d7033 100644
--- a/components/LearningObjectiveLevel.tsx
+++ b/components/LearningObjectiveLevel.tsx
@@ -11,7 +11,10 @@ import {
 } from "react-bootstrap-icons";
 import LearningObjectiveQuestionsAligned from "./LearningObjectiveQuestionsAligned";
 
-const MARGIN = DEFAULT_MARGINS;
+const MARGIN = {
+  ...DEFAULT_MARGINS,
+  bottom: 50,
+};
 const DEFAULT_HEIGHT = 150;
 
 interface LearningObjectiveLevelProps {
@@ -144,9 +147,6 @@ const LearningObjectiveLevel: React.FC<LearningObjectiveLevelProps> = ({
         .append("g")
         .call(d3.axisBottom(x).ticks(5))
         .attr("transform", `translate(0, 0)`);
-
-      // remove the text from the axis
-      group.append("g").call(d3.axisLeft(y)).selectAll("text").remove();
     });
 
     setLoading(false);
diff --git a/components/SmallMetricCard.tsx b/components/SmallMetricCard.tsx
index e83f659..e30b2da 100644
--- a/components/SmallMetricCard.tsx
+++ b/components/SmallMetricCard.tsx
@@ -4,7 +4,7 @@ import classNames from "classnames";
 interface SmallMetricCardProps {
   title: string;
   value?: number | string;
-  unit: string;
+  unit?: string;
   className?: string;
   loading?: boolean;
 }
@@ -40,7 +40,7 @@ const SmallMetricCard: React.FC<SmallMetricCardProps> = ({
             : new Intl.NumberFormat().format(value)}
         </p>
       )}
-      <p className="tw-text-sm tw-mb-0 tw-text-slate-400">{unit}</p>
+      {unit && <p className="tw-text-sm tw-mb-0 tw-text-slate-400">{unit}</p>}
     </Card>
   );
 };
diff --git a/components/Visualizations/StudentActivity.tsx b/components/Visualizations/StudentActivity.tsx
index 138472d..ef0c5c2 100644
--- a/components/Visualizations/StudentActivity.tsx
+++ b/components/Visualizations/StudentActivity.tsx
@@ -130,6 +130,11 @@ const StudentActivity: React.FC<StudentActivityProps> = ({
       .scaleOrdinal()
       .domain(subgroups)
       .range(["#1f77b4", "#ff7f0e"]);
+    
+    const labelScale = d3
+      .scaleOrdinal()
+      .domain(subgroups)
+      .range([0, 1]);
 
     const pie = d3.pie().value((d: any) => {
       return d[1];
@@ -142,6 +147,10 @@ const StudentActivity: React.FC<StudentActivityProps> = ({
       ) as any
     );
     const arcGenerator = d3.arc().innerRadius(0).outerRadius(radius);
+    const labelArcGenerator = d3
+      .arc()
+      .innerRadius(radius * 0.5)
+      .outerRadius(radius * 0.5);
 
     svg
       .selectAll("slices")
@@ -157,6 +166,27 @@ const StudentActivity: React.FC<StudentActivityProps> = ({
       .style("opacity", 0.7)
       .attr("transform", `translate(${width / 2}, ${height / 2})`);
 
+    // Add labels
+    svg
+      .selectAll("slices")
+      .data(dataReady)
+      .enter()
+      .append("text")
+      // @ts-ignore
+      .text((d) => labelScale(d.data) === 0 ? "Submitted" : unsubmitted.length > 0 ? "Not Submitted" : "") // Only show "Not Submitted" if there are unsubmitted questions
+      // @ts-ignore
+      .attr("transform", (d) => `translate(${labelArcGenerator.centroid(d)})`)
+      .style("text-anchor", "middle")
+      .style("font-size", "12px")
+      .style("font-weight", "semibold")
+      .attr("transform", (d) => {
+        // @ts-ignore
+        const pos = labelArcGenerator.centroid(d);
+        pos[0] = pos[0] * 2; // Change the 1.5 to another value to move the label further or closer
+        pos[1] = pos[1] * 1.5;
+        return `translate(${pos}) translate(${width / 2}, ${height / 2})`;
+      });
+
     if (unsubmitted.length > 0) {
       // Add "Not Submitted" to the legend
       svg
diff --git a/components/Visualizations/TimeInReview.tsx b/components/Visualizations/TimeInReview.tsx
index 67264bb..aa589f5 100644
--- a/components/Visualizations/TimeInReview.tsx
+++ b/components/Visualizations/TimeInReview.tsx
@@ -199,7 +199,7 @@ const TimeInReview: React.FC<TimeInReviewProps> = ({
       .attr("text-anchor", "middle")
       .style("font-size", "12px")
       .style("font-weight", "semibold")
-      .text(`Assignment: ${getName(selectedAssignmentId)}`);
+      .text(`Questions in Assignment: ${getName(selectedAssignmentId)}`);
 
     // Add one dot in the legend for each name.
     svg
diff --git a/components/Visualizations/TimeOnTask.tsx b/components/Visualizations/TimeOnTask.tsx
index d30b3cf..4085235 100644
--- a/components/Visualizations/TimeOnTask.tsx
+++ b/components/Visualizations/TimeOnTask.tsx
@@ -201,7 +201,7 @@ const TimeOnTask: React.FC<TimeOnTaskProps> = ({
       .attr("text-anchor", "middle")
       .style("font-size", "12px")
       .style("font-weight", "semibold")
-      .text(`Assignment: ${getName(selectedAssignmentId)}`);
+      .text(`Questions in Assignment: ${getName(selectedAssignmentId)}`);
 
     // Add one dot in the legend for each name.
     svg