Grades tab styling

apps/backend/src/modules/grade-distribution/controller.ts

@@ -300,14 +300,18 @@ export const getGradeDistributionByInstructorAndSemester = async (
     "class.session.term.name": name,
   });
 
+  const terms = await TermModel.find({
+    name: name,
+  });
+
   if (sections.length === 0) throw new Error("No classes found");
 
   const distributions = await GradeDistributionModel.find({
     classNumber: { $in: sections.map((section) => section.id) },
+    termId: { $in: terms.map((term) => term.id) },
   });
 
-  // if (distributions.length === 0)
-  //   throw new Error("No grade distributions found");
+  if (distributions.length === 0) throw new Error("No grades found");
 
   const distribution = getDistribution(distributions);
 

apps/backend/src/modules/grade-distribution/typedefs/grade-distribution.ts

@@ -3,7 +3,7 @@ import { gql } from "graphql-tag";
 export default gql`
   type GradeDistribution @cacheControl(maxAge: 1) {
     average: Float
-    distribution: [Grade!]!
+    distribution: [Grade!]
   }
 
   type Grade @cacheControl(maxAge: 1) {

apps/frontend/src/app/GradeDistributions/GradeDistributions.module.scss

@@ -15,11 +15,27 @@
     flex-direction: column;
     overflow: auto;
     gap: 24px;
+    position: relative;
 
     .grid {
       display: grid;
       gap: 24px;
       grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
     }
+    .legend {
+      margin-left: 30px;
+      color: var(--paragraph-color);
+    }
+  }
+  .empty {
+    position: absolute;
+    color: var(--label-color);
+    text-align: center;
+    font-size: 14px;
+    left: 0; 
+    right: 0; 
+    top: 25vh;
+    margin-inline: auto; 
+    width: fit-content;
   }
 }

apps/frontend/src/app/GradeDistributions/HoverInfo/HoverInfo.module.scss

@@ -0,0 +1,28 @@
+.info {
+  display: inline-block;
+  width: 250px;
+
+  .heading {
+    margin-bottom: 5px;
+
+    .color {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      margin-right: 10px;
+    }
+
+    .course {
+      color: var(--heading-color);
+      font-size: 18px;
+    }
+  }
+  .label {
+    font-family: Inter, sans-serif;
+    font-weight: 700;
+    color: var(--heading-color);
+    margin-top: 8px;
+    margin-bottom: 4px;
+    font-size: 14px;
+  }
+}

apps/frontend/src/app/GradeDistributions/HoverInfo/index.tsx

@@ -0,0 +1,168 @@
+import { useMemo } from "react";
+
+import { AverageGrade, ColoredGrade } from "@/components/AverageGrade";
+import { useReadCourseGradeDist } from "@/hooks/api";
+import { GradeDistribution, Semester } from "@/lib/api";
+
+import styles from "./HoverInfo.module.scss";
+
+interface HoverInfoProps {
+  color: string;
+  subject: string;
+  courseNumber: string;
+  gradeDistribution: GradeDistribution;
+  givenName?: string;
+  familyName?: string;
+  semester?: Semester;
+  year?: number;
+  hoveredLetter: string | null;
+}
+
+const GRADE_STYLE = { display: "inline-block", marginRight: "4px" };
+const GRADE_ORDER = [
+  "A+",
+  "A",
+  "A-",
+  "B+",
+  "B",
+  "B-",
+  "C+",
+  "C",
+  "C-",
+  "D+",
+  "D",
+  "D-",
+  "F",
+];
+
+function addOrdinalSuffix(n: string) {
+  if (n === "11" || n === "12" || n === "13") return n + "th";
+
+  switch (n.charAt(n.length - 1)) {
+    case "1":
+      return n + "st";
+    case "2":
+      return n + "nd";
+    case "3":
+      return n + "rd";
+    default:
+      return n + "th";
+  }
+}
+
+export default function HoverInfo({
+  color,
+  subject,
+  courseNumber,
+  gradeDistribution,
+  givenName,
+  familyName,
+  semester,
+  year,
+  hoveredLetter,
+}: HoverInfoProps) {
+  const { data: courseData } = useReadCourseGradeDist(subject, courseNumber);
+
+  const courseGradeDist = useMemo(
+    () => courseData?.gradeDistribution ?? null,
+    [courseData]
+  );
+
+  const {
+    lower: lowerPercentile,
+    upper: upperPercentile,
+    count: hoveredCount,
+    total: gradeDistTotal,
+  } = useMemo(() => {
+    const ret: {
+      lower: string | null;
+      upper: string | null;
+      count: number | null;
+      total: number;
+    } = { lower: null, upper: null, count: null, total: 0 };
+    if (!gradeDistribution || !hoveredLetter) return ret;
+    ret.total = gradeDistribution.distribution.reduce(
+      (acc, g) => acc + g.count,
+      0
+    );
+    if (hoveredLetter === "NP" || hoveredLetter === "P")
+      return {
+        lower: "N/A",
+        upper: "N/A",
+        count:
+          gradeDistribution.distribution.find((g) => g.letter === hoveredLetter)
+            ?.count ?? 0,
+        total: ret.total,
+      };
+    GRADE_ORDER.reduce((acc, grade) => {
+      if (grade === hoveredLetter)
+        ret.upper = addOrdinalSuffix(
+          (((ret.total - acc) * 100) / ret.total).toFixed(0)
+        );
+      const count =
+        gradeDistribution.distribution.find((g) => g.letter === grade)?.count ??
+        0;
+      acc += count;
+      if (grade === hoveredLetter) {
+        ret.lower = addOrdinalSuffix(
+          (((ret.total - acc) * 100) / ret.total).toFixed(0)
+        );
+        ret.count = count;
+      }
+      return acc;
+    }, 0);
+    return ret;
+  }, [hoveredLetter, gradeDistribution]);
+
+  return (
+    <div className={styles.info}>
+      <div className={styles.heading}>
+        <span style={{ backgroundColor: color }} className={styles.color} />
+        <span className={styles.course}>
+          {subject} {courseNumber}
+        </span>
+      </div>
+      <div className={styles.distType}>
+        {givenName && familyName
+          ? `${givenName} ${familyName} `
+          : "All Instructors "}
+        •{semester && year ? ` ${semester} ${year}` : " All Semesters"}
+      </div>
+      <div className={styles.label}>Course Average</div>
+      <div className={styles.value}>
+        {courseGradeDist ? (
+          <span>
+            <AverageGrade
+              style={GRADE_STYLE}
+              gradeDistribution={courseGradeDist}
+            />
+            ({gradeDistribution.average?.toFixed(3)})
+          </span>
+        ) : (
+          "(...)"
+        )}
+      </div>
+      <div className={styles.label}>Section Average</div>
+      <div className={styles.value}>
+        <AverageGrade
+          style={GRADE_STYLE}
+          gradeDistribution={gradeDistribution}
+          tooltip="for this instructor/semester combination"
+        />
+        ({gradeDistribution.average?.toFixed(3)})
+      </div>
+      {hoveredLetter && (
+        <div>
+          <div className={styles.label}>
+            {lowerPercentile} - {upperPercentile} Percentile
+          </div>
+          <div className={styles.value}>
+            <ColoredGrade style={GRADE_STYLE} grade={hoveredLetter} />(
+            {hoveredCount}/{gradeDistTotal},{" "}
+            {(((hoveredCount ?? 0) / gradeDistTotal) * 100).toFixed(1)}%)
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

apps/frontend/src/app/GradeDistributions/SideBar/GradesDrawer/GradesDrawer.module.scss

@@ -0,0 +1,45 @@
+.content {
+  width: 500px;
+  .header {
+    padding: 24px 30px;
+    padding-bottom: 0;
+    background-color: var(--foreground-color);
+    border-bottom: 1px solid var(--border-color);
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 24px;
+    }
+    .heading {
+      font-size: 24px;
+      font-weight: 660;
+      font-feature-settings:
+        "cv05" on,
+        "cv13" on,
+        "ss07" on,
+        "cv12" on,
+        "cv06" on;
+      color: var(--heading-color);
+      margin-bottom: 8px;
+    }
+    .description {
+      font-size: 16px;
+      line-height: 1.5;
+      color: var(--paragraph-color);
+      margin-bottom: 24px;
+    }
+  }
+  .body {
+    padding: 20px;
+    .select-cont {
+      margin-bottom: 10px;
+    }
+    .button {
+      height: 48px;
+      padding: 0 16px;
+      justify-content: space-between;
+      width: 100%;
+      margin-bottom: 10px;
+    }
+  }
+}