feat: add filters to search results page

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

@@ -16,6 +16,7 @@ import { usePostHog } from 'posthog-js/react';
 import { useCallback, useMemo, useState } from 'react';
 
 import { NotificationsDialog } from '$components/RightPane/AddedCourses/Notifications/NotificationsDialog';
+import { SearchFilter } from '$components/RightPane/SectionTable/SearchFilter';
 import analyticsEnum, { logAnalytics } from '$lib/analytics/analytics';
 import { useColumnStore, SECTION_TABLE_COLUMNS, type SectionTableColumn } from '$stores/ColumnStore';
 
@@ -180,6 +181,7 @@ export function CoursePaneButtonRow(props: CoursePaneButtonRowProps) {
 
             <ColumnToggleDropdown />
             <NotificationsDialog buttonSx={buttonSx} />
+            <SearchFilter buttonSx={buttonSx} />
         </Box>
     );
 }

apps/antalmanac/src/components/RightPane/SectionTable/SearchFilter.tsx

@@ -0,0 +1,55 @@
+import { Sort } from '@mui/icons-material';
+import { IconButton, Menu, MenuItem, Tooltip, type SxProps } from '@mui/material';
+import { useCallback, useState } from 'react';
+
+import { SORT_OPTIONS, useSectionFilterStore, type SortOption } from '$stores/SectionFilterStore';
+
+interface SearchFilterProps {
+    buttonSx?: SxProps;
+}
+
+export function SearchFilter({ buttonSx }: SearchFilterProps) {
+    const { sortBy, setSortBy } = useSectionFilterStore();
+    const [anchorEl, setAnchorEl] = useState<HTMLElement>();
+    const open = Boolean(anchorEl);
+
+    const handleClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+
+    const handleClose = useCallback(() => {
+        setAnchorEl(undefined);
+    }, []);
+
+    const handleSelect = useCallback(
+        (value: SortOption) => {
+            setSortBy(value);
+            handleClose();
+        },
+        [setSortBy, handleClose]
+    );
+
+    const currentLabel = SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Default';
+
+    return (
+        <>
+            <Tooltip title={`Sort: ${currentLabel}`}>
+                <IconButton onClick={handleClick} sx={buttonSx}>
+                    <Sort />
+                </IconButton>
+            </Tooltip>
+
+            <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+                {SORT_OPTIONS.map((option) => (
+                    <MenuItem
+                        key={option.value}
+                        selected={option.value === sortBy}
+                        onClick={() => handleSelect(option.value)}
+                    >
+                        {option.label}
+                    </MenuItem>
+                ))}
+            </Menu>
+        </>
+    );
+}

apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx

@@ -105,6 +105,7 @@ function SectionTable(props: SectionTableProps) {
             <Box
                 sx={{
                     display: 'flex',
+                    alignItems: 'center',
                     gap: '4px',
                     marginBottom: '8px',
                     marginTop: '4px',

apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBody.tsx

@@ -1,12 +1,50 @@
 import { TableBody } from '@mui/material';
 import { AACourse, AASection } from '@packages/antalmanac-types';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useMemo } from 'react';
 
+import { getGpaData } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/GpaCell';
 import { SectionTableBodyRow } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBodyRow';
 import { AnalyticsCategory } from '$lib/analytics/analytics';
 import AppStore from '$stores/AppStore';
+import { type SortOption, useSectionFilterStore } from '$stores/SectionFilterStore';
 import { normalizeTime, parseDaysString } from '$stores/calendarizeHelpers';
 
+export type GpaEntry = { gpa: string; instructor: string };
+export type GpaMap = Map<string, GpaEntry>;
+
+function getMeetingStartMinutes(section: AASection): number {
+    const meeting = section.meetings[0];
+    if (!meeting || meeting.timeIsTBA) return Infinity;
+    return meeting.startTime.hour * 60 + meeting.startTime.minute;
+}
+
+const STATUS_ORDER: Record<string, number> = { OPEN: 0, NewOnly: 1, Waitl: 2, FULL: 3, '': 4 };
+
+function sortSections(sections: AASection[], sortBy: SortOption, gpaMap: GpaMap): AASection[] {
+    if (sortBy === 'default') return sections;
+
+    return [...sections].sort((a, b) => {
+        switch (sortBy) {
+            case 'status':
+                return (STATUS_ORDER[a.status] ?? 4) - (STATUS_ORDER[b.status] ?? 4);
+
+            case 'time_asc':
+                return getMeetingStartMinutes(a) - getMeetingStartMinutes(b);
+
+            case 'gpa_descending': {
+                const aGpa = parseFloat(gpaMap.get(a.sectionCode)?.gpa ?? '');
+                const bGpa = parseFloat(gpaMap.get(b.sectionCode)?.gpa ?? '');
+                const aValue = Number.isNaN(aGpa) ? -Infinity : aGpa;
+                const bValue = Number.isNaN(bGpa) ? -Infinity : bGpa;
+                return bValue - aValue;
+            }
+
+            default:
+                return 0;
+        }
+    });
+}
+
 interface SectionTableBodyProps {
     courseDetails: AACourse;
     term: string;
@@ -25,6 +63,30 @@ export function SectionTableBody({
     formattedTime,
 }: SectionTableBodyProps) {
     const [calendarEvents, setCalendarEvents] = useState(() => AppStore.getCourseEventsInCalendar());
+    const [gpaMap, setGpaMap] = useState<GpaMap>(() => new Map());
+    const sortBy = useSectionFilterStore((state) => state.sortBy);
+
+    useEffect(() => {
+        let cancelled = false;
+
+        Promise.all(
+            courseDetails.sections.map(async (section) => {
+                const data = await getGpaData(courseDetails.deptCode, courseDetails.courseNumber, section.instructors);
+                return [section.sectionCode, data] as const;
+            })
+        ).then((entries) => {
+            if (cancelled) return;
+            const next: GpaMap = new Map();
+            for (const [code, data] of entries) {
+                if (data) next.set(code, data);
+            }
+            setGpaMap(next);
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [courseDetails]);
 
     /**
      * Additional information about the current section being rendered.
@@ -82,10 +144,16 @@ export function SectionTableBody({
         };
     }, [updateCalendarEvents]);
 
+    const sortedSections = useMemo(
+        () => sortSections(courseDetails.sections, sortBy, gpaMap),
+        [courseDetails.sections, sortBy, gpaMap]
+    );
+
     return (
         <TableBody>
-            {courseDetails.sections.map((section) => {
+            {sortedSections.map((section) => {
                 const conflict = scheduleConflict(section);
+                const gpaEntry = gpaMap.get(section.sectionCode);
 
                 return (
                     <SectionTableBodyRow
@@ -98,6 +166,8 @@ export function SectionTableBody({
                         scheduleConflict={conflict}
                         analyticsCategory={analyticsCategory}
                         formattedTime={formattedTime}
+                        gpa={gpaEntry?.gpa}
+                        gpaInstructor={gpaEntry?.instructor}
                     />
                 );
             })}

apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/GpaCell.tsx

@@ -1,13 +1,13 @@
 import { Button, Popover } from '@mui/material';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import GradesPopup from '$components/RightPane/SectionTable/GradesPopup';
 import { TableBodyCellContainer } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/TableBodyCellContainer';
 import { useIsMobile } from '$hooks/useIsMobile';
 import { useSecondaryColor } from '$hooks/useSecondaryColor';
 import { Grades } from '$lib/grades';
 
-async function getGpaData(deptCode: string, courseNumber: string, instructors: string[]) {
+export async function getGpaData(deptCode: string, courseNumber: string, instructors: string[]) {
     const namedInstructors = instructors.filter((instructor) => instructor !== 'STAFF');
 
     // Get the GPA of the first instructor of this section where data exists
@@ -27,15 +27,14 @@ async function getGpaData(deptCode: string, courseNumber: string, instructors: s
 interface GpaCellProps {
     deptCode: string;
     courseNumber: string;
-    instructors: string[];
+    gpa?: string;
+    gpaInstructor?: string;
 }
 
-export const GpaCell = ({ deptCode, courseNumber, instructors }: GpaCellProps) => {
+export const GpaCell = ({ deptCode, courseNumber, gpa, gpaInstructor }: GpaCellProps) => {
     const isMobile = useIsMobile();
     const secondaryColor = useSecondaryColor();
 
-    const [gpa, setGpa] = useState('');
-    const [instructor, setInstructor] = useState('');
     const [anchorEl, setAnchorEl] = useState<Element>();
 
     const handleClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
@@ -46,17 +45,6 @@ export const GpaCell = ({ deptCode, courseNumber, instructors }: GpaCellProps) =
         setAnchorEl(undefined);
     }, []);
 
-    useEffect(() => {
-        getGpaData(deptCode, courseNumber, instructors)
-            .then((data) => {
-                if (data) {
-                    setGpa(data.gpa);
-                    setInstructor(data.instructor);
-                }
-            })
-            .catch(console.log);
-    }, [deptCode, courseNumber, instructors]);
-
     return (
         <TableBodyCellContainer>
             <Button
@@ -71,7 +59,7 @@ export const GpaCell = ({ deptCode, courseNumber, instructors }: GpaCellProps) =
                 onClick={handleClick}
                 variant="text"
             >
-                {gpa}
+                {gpa ?? ''}
             </Button>
             <Popover
                 open={Boolean(anchorEl)}
@@ -82,7 +70,7 @@ export const GpaCell = ({ deptCode, courseNumber, instructors }: GpaCellProps) =
                 <GradesPopup
                     deptCode={deptCode}
                     courseNumber={courseNumber}
-                    instructor={instructor}
+                    instructor={gpaInstructor ?? ''}
                     isMobile={isMobile}
                 />
             </Popover>

apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyRow.tsx

@@ -29,6 +29,8 @@ interface SectionTableBodyRowProps {
     scheduleConflict: boolean;
     analyticsCategory: AnalyticsCategory;
     formattedTime: string | null;
+    gpa?: string;
+    gpaInstructor?: string;
 }
 
 // These components have too varied of types, any is fine here
@@ -57,6 +59,8 @@ export const SectionTableBodyRow = memo((props: SectionTableBodyRowProps) => {
         scheduleConflict,
         analyticsCategory,
         formattedTime,
+        gpa,
+        gpaInstructor,
     } = props;
 
     const theme = useTheme();
@@ -155,6 +159,8 @@ export const SectionTableBodyRow = memo((props: SectionTableBodyRowProps) => {
                             {...courseDetails}
                             analyticsCategory={analyticsCategory}
                             formattedTime={formattedTime}
+                            gpa={gpa}
+                            gpaInstructor={gpaInstructor}
                         />
                     );
                 })}

apps/antalmanac/src/lib/grades.ts

@@ -24,14 +24,19 @@ class _Grades {
     // We need this because gradesCache destructures the data and doesn't retain whether we looked at one course or a whole department/GE
     cachedQueries: Set<string>;
 
+    // Deduplicates concurrent queryGrades calls for the same key so N parallel callers share one network request.
+    pendingQueries: Map<string, Promise<GradesProps | null>>;
+
     constructor() {
         this.gradesCache = {};
         this.cachedQueries = new Set<string>();
+        this.pendingQueries = new Map();
     }
 
     clearCache() {
         Object.keys(this.gradesCache).forEach((key) => delete this.gradesCache[key]); //https://stackoverflow.com/a/19316873/14587004
         this.cachedQueries = new Set<string>();
+        this.pendingQueries.clear();
     }
 
     /*
@@ -115,13 +120,25 @@ class _Grades {
 
         if (cacheOnly) return null;
 
-        const resp = await trpc.grades.aggregateGrades
-            .query({ department, courseNumber, instructor })
-            .then((x) => x?.gradeDistribution ?? null);
+        const inFlight = this.pendingQueries.get(cacheKey);
+        if (inFlight) return inFlight;
+
+        const promise = (async () => {
+            try {
+                const resp = await trpc.grades.aggregateGrades
+                    .query({ department, courseNumber, instructor })
+                    .then((x) => x?.gradeDistribution ?? null);
+
+                if (resp) this.gradesCache[cacheKey] = resp;
 
-        if (resp) this.gradesCache[cacheKey] = resp;
+                return resp;
+            } finally {
+                this.pendingQueries.delete(cacheKey);
+            }
+        })();
 
-        return resp;
+        this.pendingQueries.set(cacheKey, promise);
+        return promise;
     };
 }
 

apps/antalmanac/src/stores/SectionFilterStore.ts

@@ -0,0 +1,20 @@
+import { create } from 'zustand';
+
+export const SORT_OPTIONS = [
+    { value: 'default', label: 'Default' },
+    { value: 'status', label: 'Status' },
+    { value: 'time_asc', label: 'Time' },
+    { value: 'gpa_descending', label: 'GPA' },
+] as const;
+
+export type SortOption = (typeof SORT_OPTIONS)[number]['value'];
+
+interface SectionFilterStore {
+    sortBy: SortOption;
+    setSortBy: (option: SortOption) => void;
+}
+
+export const useSectionFilterStore = create<SectionFilterStore>((set) => ({
+    sortBy: 'default',
+    setSortBy: (sortBy) => set({ sortBy }),
+}));