GPA and Grade Distribution in Search Results

apps/antalmanac/src/components/RightPane/CoursePane/CoursePaneButtonRow.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
     Box,
     Checkbox,
@@ -12,8 +12,7 @@ import {
     type SxProps,
 } from '@mui/material';
 import { ArrowBack, Visibility, Refresh } from '@mui/icons-material';
-import RightPaneStore, { type SectionTableColumn } from '../RightPaneStore';
-import analyticsEnum, { logAnalytics } from '$lib/analytics';
+import { useColumnStore, SECTION_TABLE_COLUMNS, type SectionTableColumn } from '$stores/ColumnStore';
 
 /**
  * All the interactive buttons have the same styles.
@@ -34,6 +33,7 @@ const columnLabels: Record<SectionTableColumn, string> = {
     sectionCode: 'Code',
     sectionDetails: 'Type',
     instructors: 'Instructors',
+    gpa: 'GPA',
     dayAndTime: 'Times',
     location: 'Places',
     sectionEnrollment: 'Enrollment',
@@ -53,51 +53,38 @@ function renderEmptySelectValue() {
     return '';
 }
 
+const COLUMN_LABEL_ENTRIES = Object.entries(columnLabels);
+
 /**
  * Toggles certain columns on/off.
  *
  * e.g. show/hide the section code, instructors, etc.
  */
 export function ColumnToggleButton() {
-    const [activeColumns, setActiveColumns] = useState(RightPaneStore.getActiveColumns());
+    const [selectedColumns, setSelectedColumns] = useColumnStore((store) => [
+        store.selectedColumns,
+        store.setSelectedColumns,
+    ]);
     const [open, setOpen] = useState(false);
 
-    const handleColumnChange = useCallback(
-        (newActiveColumns: SectionTableColumn[]) => {
-            logAnalytics({
-                category: analyticsEnum.classSearch.title,
-                action: analyticsEnum.classSearch.actions.TOGGLE_COLUMNS,
-            });
-
-            setActiveColumns(newActiveColumns);
-        },
-        [setActiveColumns]
-    );
-
-    const handleChange = useCallback(
-        (e: SelectChangeEvent<SectionTableColumn[]>) => {
-            if (typeof e.target.value !== 'string') {
-                RightPaneStore.setActiveColumns(e.target.value);
-            }
-        },
-        [RightPaneStore.setActiveColumns]
-    );
+    const handleChange = useCallback((e: SelectChangeEvent<SectionTableColumn[]>) => {
+        if (typeof e.target.value !== 'string') {
+            setSelectedColumns(e.target.value);
+        }
+    }, []);
 
     const handleOpen = useCallback(() => {
         setOpen(true);
     }, [setOpen]);
 
     const handleClose = useCallback(() => {
         setOpen(false);
-    }, [setOpen]);
+    }, []);
 
-    useEffect(() => {
-        RightPaneStore.on('columnChange', handleColumnChange);
-
-        return () => {
-            RightPaneStore.removeListener('columnChange', handleColumnChange);
-        };
-    }, [handleColumnChange]);
+    const selectedColumnNames = useMemo(
+        () => SECTION_TABLE_COLUMNS.filter((_, index) => selectedColumns[index]),
+        [selectedColumns]
+    );
 
     return (
         <>
@@ -109,19 +96,16 @@ export function ColumnToggleButton() {
             <FormControl>
                 <Select
                     multiple
-                    value={activeColumns}
+                    value={selectedColumnNames}
                     open={open}
                     onChange={handleChange}
                     onClose={handleClose}
                     renderValue={renderEmptySelectValue}
                     sx={{ visibility: 'hidden', position: 'absolute' }}
                 >
-                    {Object.entries(columnLabels).map(([column, label]) => (
+                    {COLUMN_LABEL_ENTRIES.map(([column, label], index) => (
                         <MenuItem key={column} value={column}>
-                            <Checkbox
-                                checked={activeColumns.indexOf(column as SectionTableColumn) > -1}
-                                color="default"
-                            />
+                            <Checkbox checked={selectedColumns[index]} color="default" />
                             <ListItemText primary={label} />
                         </MenuItem>
                     ))}

apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx

@@ -5,7 +5,7 @@ import LazyLoad from 'react-lazyload';
 
 import { Alert } from '@mui/material';
 import { AACourse, AASection } from '@packages/antalmanac-types';
-import { WebsocDepartment, WebsocSchool, WebsocAPIResponse } from 'peterportal-api-next-types';
+import { WebsocDepartment, WebsocSchool, WebsocAPIResponse, GE } from 'peterportal-api-next-types';
 import RightPaneStore from '../RightPaneStore';
 import GeDataFetchProvider from '../SectionTable/GEDataFetchProvider';
 import SectionTableLazyWrapper from '../SectionTable/SectionTableLazyWrapper';
@@ -15,9 +15,9 @@ import loadingGif from './SearchForm/Gifs/loading.gif';
 import darkNoNothing from './static/dark-no_results.png';
 import noNothing from './static/no_results.png';
 import AppStore from '$stores/AppStore';
-import { isDarkMode, queryWebsocMultiple } from '$lib/helpers';
+import { isDarkMode, queryWebsoc, queryWebsocMultiple } from '$lib/helpers';
+import Grades from '$lib/grades';
 import analyticsEnum from '$lib/analytics';
-import { queryWebsoc } from '$lib/course-helpers';
 
 function flattenSOCObject(SOCObject: WebsocAPIResponse): (WebsocSchool | WebsocDepartment | AACourse)[] {
     const courseColors = AppStore.getAddedCourses().reduce((accumulator, { section }) => {
@@ -162,14 +162,38 @@ export function CourseRenderPane() {
             division: formData.division,
         };
 
+        const websocQueryParams = {
+            department: formData.deptValue,
+            term: formData.term,
+            ge: formData.ge,
+            courseNumber: formData.courseNumber,
+            sectionCodes: formData.sectionCode,
+            instructorName: formData.instructor,
+            units: formData.units,
+            endTime: formData.endTime,
+            startTime: formData.startTime,
+            fullCourses: formData.coursesFull,
+            building: formData.building,
+            room: formData.room,
+            division: formData.division,
+        };
+
+        const gradesQueryParams = {
+            department: formData.deptValue,
+            ge: formData.ge as GE,
+        };
+
         try {
-            // If params has a comma, it means that we are searching for multiple units.
-            const socObject = params.units.includes(',')
-                ? await queryWebsocMultiple(params, 'units')
-                : await queryWebsoc(params);
+            // Query websoc for course information and populate gradescache
+            const [websocJsonResp, _] = await Promise.all([
+                websocQueryParams.units.includes(',')
+                    ? queryWebsocMultiple(websocQueryParams, 'units')
+                    : queryWebsoc(websocQueryParams),
+                Grades.populateGradesCache(gradesQueryParams),
+            ]);
 
             setError(false);
-            setCourseData(flattenSOCObject(socObject));
+            setCourseData(flattenSOCObject(websocJsonResp));
         } catch (error) {
             setError(true);
         } finally {

apps/antalmanac/src/components/RightPane/RightPaneStore.ts

@@ -2,27 +2,6 @@ import { EventEmitter } from 'events';
 
 import { getDefaultTerm } from '$lib/termData';
 
-/**
- * Search results are displayed in a tabular format.
- *
- * Users can toggle certain columns on/off.
- */
-export const SECTION_TABLE_COLUMNS = [
-    // These two are omitted since they're not iterated over in the template.
-    // 'scheduleAdd',
-    // 'colorAndDelete',
-    'sectionCode',
-    'sectionDetails',
-    'instructors',
-    'dayAndTime',
-    'location',
-    'sectionEnrollment',
-    'restrictions',
-    'status',
-] as const;
-
-export type SectionTableColumn = (typeof SECTION_TABLE_COLUMNS)[number];
-
 const defaultFormValues: Record<string, string> = {
     deptValue: 'ALL',
     deptLabel: 'ALL: Include All Departments',
@@ -47,7 +26,6 @@ export interface BuildingFocusInfo {
 
 class RightPaneStore extends EventEmitter {
     private formData: Record<string, string>;
-    private activeTab: number;
     private doDisplaySearch: boolean;
     private openSpotAlertPopoverActive: boolean;
     private urlCourseCodeValue: string;
@@ -57,16 +35,10 @@ class RightPaneStore extends EventEmitter {
     private urlDeptLabel: string;
     private urlDeptValue: string;
 
-    /**
-     * The columns that are currently being displayed in the search results.
-     */
-    private activeColumns: SectionTableColumn[] = [...SECTION_TABLE_COLUMNS];
-
     constructor() {
         super();
         this.setMaxListeners(15);
         this.formData = structuredClone(defaultFormValues);
-        this.activeTab = 0;
         this.doDisplaySearch = true;
         this.openSpotAlertPopoverActive = false;
         const search = new URLSearchParams(window.location.search);
@@ -96,7 +68,6 @@ class RightPaneStore extends EventEmitter {
     getUrlCourseNumValue = () => this.urlCourseNumValue;
     getUrlDeptLabel = () => this.urlDeptLabel;
     getUrlDeptValue = () => this.urlDeptValue;
-    getActiveColumns = () => this.activeColumns;
 
     updateFormValue = (field: string, value: string) => {
         this.formData[field] = value;
@@ -115,12 +86,7 @@ class RightPaneStore extends EventEmitter {
     toggleOpenSpotAlert = () => {
         this.openSpotAlertPopoverActive = !this.openSpotAlertPopoverActive;
     };
-
-    setActiveColumns = (newActiveColumns: SectionTableColumn[]) => {
-        this.activeColumns = newActiveColumns;
-        this.emit('columnChange', newActiveColumns);
-    };
 }
 
 const store = new RightPaneStore();
-export default store;
+export default store;