GPA and Grade Distribution in Search Results

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

@@ -104,10 +104,7 @@ function EnrollmentColumnHeader(props: EnrollmentColumnHeaderProps) {
 function SectionTable(props: SectionTableProps) {
     const { courseDetails, term, allowHighlight, scheduleNames, analyticsCategory } = props;
 
-    const [selectedColumns, getActiveColumns] = useColumnStore((store) => [
-        store.selectedColumns,
-        store.getActiveColumns,
-    ]);
+    const [selectedColumns, activeColumns] = useColumnStore((store) => [store.selectedColumns, store.activeColumns]);
 
     const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`);
 
@@ -124,7 +121,7 @@ function SectionTable(props: SectionTableProps) {
      */
     const tableMinWidth = useMemo(() => {
         const width = isMobileScreen ? 600 : 780;
-        const numActiveColumns = getActiveColumns().length;
+        const numActiveColumns = activeColumns.length;
         return (width * numActiveColumns) / TOTAL_NUM_COLUMNS;
     }, [isMobileScreen, selectedColumns]);
 
@@ -180,7 +177,7 @@ function SectionTable(props: SectionTableProps) {
                             <TableCell padding="none" />
 
                             {tableHeaderColumnEntries
-                                .filter(([column]) => getActiveColumns().includes(column as SectionTableColumn))
+                                .filter(([column]) => activeColumns.includes(column as SectionTableColumn))
                                 .map(([column, { label, width }]) => (
                                     <TableCell
                                         key={column}

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

@@ -316,11 +316,7 @@ const LocationsCell = withStyles(styles)((props: LocationsCellProps) => {
                         const buildingId = locationIds[buildingName];
                         return (
                             <Fragment key={meeting.timeIsTBA + bldg}>
-                                <Link
-                                    className={classes.mapLink}
-                                    to={`/map?location=${buildingId}`}
-                                    onClick={focusMap}
-                                >
+                                <Link className={classes.mapLink} to={`/map?location=${buildingId}`} onClick={focusMap}>
                                     {bldg}
                                 </Link>
                                 <br />
@@ -498,7 +494,7 @@ const tableBodyCells: Record<SectionTableColumn, React.ComponentType<any>> = {
 const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => {
     const { classes, section, courseDetails, term, allowHighlight, scheduleNames } = props;
 
-    const getActiveColumns = useColumnStore(store => store.getActiveColumns);
+    const activeColumns = useColumnStore((store) => store.activeColumns);
 
     const [addedCourse, setAddedCourse] = useState(
         AppStore.getAddedSectionCodes().has(`${section.sectionCode} ${term}`)
@@ -616,7 +612,7 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => {
             )}
 
             {Object.entries(tableBodyCells)
-                .filter(([column]) => getActiveColumns().includes(column as SectionTableColumn))
+                .filter(([column]) => activeColumns.includes(column as SectionTableColumn))
                 .map(([column, Component]) => {
                     return (
                         // All of this is a little bulky, so if the props can be added specifically to activeTableBodyColumns, LMK!

apps/antalmanac/src/stores/ColumnStore.ts

@@ -30,11 +30,9 @@ interface ColumnStore {
     // Columns that are selected in the dropdown
     selectedColumns: boolean[];
 
-    /**
-     *
-     * @returns The columns that should be displayed in the section table. They need to be both selected and enabled.
-     */
-    getActiveColumns: () => SectionTableColumn[];
+    // Columns that should be displayed in the section table. They need to be both selected and enabled.
+    // This is updated whenever enabledColumns or selectedColumns are updated.
+    activeColumns: SectionTableColumn[];
 
     /**
      * Used by the Select menu in CoursePaneButtonRow to toggle columns on/off.
@@ -57,15 +55,16 @@ interface ColumnStore {
  */
 export const useColumnStore = create<ColumnStore>((set, get) => {
     return {
-        activeColumns: Array.from(SECTION_TABLE_COLUMNS),
         enabledColumns: SECTION_TABLE_COLUMNS.map(() => true),
         selectedColumns: SECTION_TABLE_COLUMNS.map(() => true),
-        getActiveColumns: () =>
-            SECTION_TABLE_COLUMNS.filter((_, index) => get().enabledColumns[index] && get().selectedColumns[index]),
+        activeColumns: Array.from(SECTION_TABLE_COLUMNS),
         setSelectedColumns: (columns: SectionTableColumn[]) => {
             set(() => {
                 const selectedColumns = SECTION_TABLE_COLUMNS.map((column) => columns.includes(column));
-                return { selectedColumns: selectedColumns };
+                const activeColumns = SECTION_TABLE_COLUMNS.filter(
+                    (_, index) => get().enabledColumns[index] && get().selectedColumns[index]
+                );
+                return { selectedColumns: selectedColumns, activeColumns: activeColumns };
             });
             logAnalytics({
                 category: analyticsEnum.classSearch.title,
@@ -75,7 +74,10 @@ export const useColumnStore = create<ColumnStore>((set, get) => {
         setColumnEnabled: (column: SectionTableColumn, state: boolean) => {
             set((prevState) => {
                 prevState.enabledColumns[SECTION_TABLE_COLUMNS.indexOf(column)] = state;
-                return { enabledColumns: prevState.enabledColumns };
+                const activeColumns = SECTION_TABLE_COLUMNS.filter(
+                    (_, index) => prevState.enabledColumns[index] && prevState.selectedColumns[index]
+                );
+                return { enabledColumns: prevState.enabledColumns, activeColumns: activeColumns };
             });
         },
     };