Add ability to sort courses and clear filters (v2)

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

apps/backend/src/controllers/courses.ts

@@ -10,6 +10,8 @@ import {
 } from "~/util";
 import { RequestHandler } from "express";
 import db, { Prisma } from "@cmucourses/db";
+import { SortOption, type Sort } from "~/../../apps/frontend/src/app/sorts";
+import { initialState } from "~/../../apps/frontend/src/app/user";
 
 const projection = { _id: false, __v: false };
 const MAX_LIMIT = 10;
@@ -96,6 +98,11 @@ export interface GetFilteredCourses {
     levels?: string;
     session?: SingleOrArray<string>;
     fces?: BoolLiteral;
+    sort?: SingleOrArray<string>;
+    numSemesters?: string;
+    spring?: BoolLiteral;
+    summer?: BoolLiteral;
+    fall?: BoolLiteral;
   };
 }
 
@@ -115,12 +122,10 @@ export const getFilteredCourses: RequestHandler<
   const pipeline: Prisma.InputJsonValue[] = [];
 
   const matchStage: Record<string, unknown> = {};
-  const sortKeys: [string, unknown][] = [];
   const addedFields: Record<string, unknown> = {};
 
   if (req.query.keywords !== undefined) {
     matchStage.$text = { $search: req.query.keywords };
-    sortKeys.push(["score", { $meta: "textScore" }]);
     addedFields.relevance = { $meta: "textScore" };
   }
 
@@ -141,23 +146,51 @@ export const getFilteredCourses: RequestHandler<
   if (unitsMin !== undefined || unitsMax !== undefined) {
     pipeline.push({
       $addFields: {
-        unitsDecimal: {
-          $convert: {
-            input: "$units",
-            to: "decimal",
-            onError: null,
-            onNull: null,
+        unitRangeMin: {
+          $cond: {
+            if: { $or: [{ $eq: ["$units", ""] }, { $eq: ["$units", "VAR"] }] },
+            then: 0,
+            else: {
+              $toDouble: {
+                $trim: {
+                  input: {
+                    // Some courses have units listed as 0-48 for example
+                    // We don't want to complicate the pipeline, so just take the lower bound
+                    $arrayElemAt: [{ $split: [{ $arrayElemAt: [{ $split: ["$units", "-"] }, 0] }, ","] }, 0],
+                  },
+                },
+              },
+            },
+          },
+        },
+        unitRangeMax: {
+          $cond: {
+            if: { $or: [{ $eq: ["$units", ""] }, { $eq: ["$units", "VAR"] }] },
+            then: 50, // Default max units if not specified
+            else: {
+              $toDouble: {
+                $trim: {
+                  input: {
+                    // Some courses have units listed as 0-48 for example
+                    // We don't want to complicate the pipeline, so just take the lower bound
+                    $arrayElemAt: [{ $split: [{ $arrayElemAt: [{ $split: ["$units", "-"] }, -1] }, ","] }, -1],
+                  },
+                },
+              },
+            },
           },
         },
       },
     });
 
     pipeline.push({
       $match: {
-        unitsDecimal: {
+        unitRangeMax: {
           $gte: unitsMin,
-          $lte: unitsMax,
         },
+        unitRangeMin: {
+          $lte: unitsMax,
+        }
       },
     });
   }
@@ -195,16 +228,190 @@ export const getFilteredCourses: RequestHandler<
 
   pipeline.push({ $addFields: addedFields as Prisma.InputJsonValue });
   pipeline.push({ $project: projection as Prisma.InputJsonValue });
-
-  if (sortKeys.length > 0) {
-    const sortOptions: Record<string, unknown> = {};
-    for (const [key, option] of sortKeys) {
-      sortOptions[key] = option;
+  // Sort by best relevance, with lowest priority vs other sorts
+  pipeline.push({
+    $sort: {
+      relevance: -1, 
     }
+  });
+  if (req.query.sort !== undefined) {
+    // const numSemesters = parseOptionalInt(req.query.numSemesters, initialState.fceAggregation.numSemesters);
+    const spring = !req.query.spring ? initialState.fceAggregation.counted.spring : fromBoolLiteral(req.query.spring);
+    const summer = !req.query.summer ? initialState.fceAggregation.counted.summer : fromBoolLiteral(req.query.summer);
+    const fall = !req.query.fall ? initialState.fceAggregation.counted.fall : fromBoolLiteral(req.query.fall);
+
+    // Add a $lookup stage to join the fces collection
+    pipeline.push({
+      $lookup: {
+        from: "fces",
+        localField: "courseID",
+        foreignField: "courseID",
+        as: "fces",
+      },
+    });
+
+    // Unwind the fces array to de-normalize the data
+    pipeline.push({
+      $unwind: {
+        path: "$fces",
+        preserveNullAndEmptyArrays: true,
+      },
+    });
 
-    pipeline.push({ $sort: sortOptions as Prisma.InputJsonValue });
+    // Filter FCEs based on the counted settings
+    pipeline.push({
+      $match: {
+        $expr: {
+          $or: [
+            { $and: [{ $eq: ["$fces.semester", "spring"] }, { $eq: [spring, true] }] },
+            { $and: [{ $eq: ["$fces.semester", "summer"] }, { $eq: [summer, true] }] },
+            { $and: [{ $eq: ["$fces.semester", "fall"] }, { $eq: [fall, true] }] },
+          ],
+        },
+      },
+    });
+
+    // TODO: These take a long time to run and then return a 304 with no results
+    // So only the seasons from fceAggregation.counted are respected for now
+
+    // Sort FCEs by year and semester to find the latest ones
+    // pipeline.push({
+    //   $addFields: {
+    //     numericYear: { $toInt: "$fces.year" },
+    //     numericSemester: {
+    //       $switch: {
+    //         branches: [
+    //           { case: { $eq: ["$fces.semester", "fall"] }, then: 3 },
+    //           { case: { $eq: ["$fces.semester", "summer"] }, then: 2 },
+    //           { case: { $eq: ["$fces.semester", "spring"] }, then: 1 },
+    //         ],
+    //         default: 0,
+    //       },
+    //     },
+    //   },
+    // });
+
+    // pipeline.push({
+    //   $sort: {
+    //     numericYear: SortType.Descending,
+    //     numericSemester: SortType.Descending,
+    //   },
+    // });
+
+    // Limit the number of FCEs to the specified numSemesters
+    // pipeline.push({
+    //   $group: {
+    //     _id: "$courseID",
+    //     fces: { $push: "$fces" },
+    //   },
+    // });
+
+    // pipeline.push({
+    //   $project: {
+    //     fces: { $slice: ["$fces", numSemesters] },
+    //   },
+    // });
+
+    // Group by courseID to calculate aggregated values
+    pipeline.push({
+      $group: {
+        _id: "$courseID",
+        doc: { $first: "$$ROOT" },
+        avgTeachingRate: { $avg: { $arrayElemAt: ["$fces.rating", 7] } },
+        avgCourseRate: { $avg: { $arrayElemAt: ["$fces.rating", 8] } },
+      },
+    });
+
+    // Add the aggregated fields back to the root document
+    pipeline.push({
+      $replaceRoot: {
+        newRoot: {
+          $mergeObjects: ["$doc", { avgTeachingRate: "$avgTeachingRate", avgCourseRate: "$avgCourseRate" }],
+        },
+      },
+    });
+
+    const sorts = singleToArray(req.query.sort)
+      .reverse()
+      .map((sort) => JSON.parse(sort) as Sort);
+
+    sorts.forEach((sort) => {
+      switch (sort.option) {
+        case SortOption.FCE:
+          pipeline.push({
+            $addFields: {
+              fce: {
+                $avg: "$fces.hrsPerWeek",
+              },
+            },
+          });
+          pipeline.push({
+            $sort: {
+              fce: sort.type,
+            },
+          });
+          break;
+        case SortOption.TeachingRate:
+          pipeline.push({
+            $sort: {
+              avgTeachingRate: sort.type,
+            },
+          });
+          break;
+        case SortOption.CourseRate:
+          pipeline.push({
+            $sort: {
+              avgCourseRate: sort.type,
+            },
+          });
+          break;
+        case SortOption.Units:
+          pipeline.push({
+            $addFields: {
+              numericUnits: {
+                $cond: {
+                  if: { $or: [{ $eq: ["$units", ""] }, { $eq: ["$units", "VAR"] }] },
+                  then: 0,
+                  else: {
+                    $toDouble: {
+                      $trim: {
+                        input: {
+                          // Some courses have units listed as 0-48 for example
+                          // We don't want to complicate the pipeline, so just take the lower bound
+                          $arrayElemAt: [{ $split: [{ $arrayElemAt: [{ $split: ["$units", "-"] }, 0] }, ","] }, 0],
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          });
+          pipeline.push({
+            $sort: {
+              numericUnits: sort.type,
+            },
+          });
+          break;
+        case SortOption.CourseNumber:
+          pipeline.push({
+            $addFields: {
+              numericCourseID: {
+                $toInt: { $arrayElemAt: [{ $split: ["$courseID", "-"] }, 1] },
+              },
+            },
+          });
+          pipeline.push({
+            $sort: {
+              numericCourseID: sort.type,
+            },
+          });
+          break;
+      }
+    });
   }
 
+
   const page = parseOptionalInt(req.query.page, 1);
   const pageSize = Math.min(parseOptionalInt(req.query.pageSize, MAX_LIMIT), MAX_LIMIT);
 

apps/frontend/package.json

@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@clerk/nextjs": "^5.0.6",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@headlessui/react": "^1.6.4",
     "@heroicons/react": "^2.0.8",
     "@radix-ui/react-slider": "^1.0.0",
@@ -26,6 +28,7 @@
     "@types/uuid": "^8.3.4",
     "@yornaath/batshit": "^0.10.1",
     "axios": "^0.24.0",
+    "clsx": "^2.1.1",
     "downshift": "^6.1.7",
     "fuse.js": "^7.0.0",
     "jose": "^4.8.1",

apps/frontend/src/app/api/course.ts

@@ -3,8 +3,10 @@ import { useQuery, useQueries, keepPreviousData } from "@tanstack/react-query";
 import { create, windowScheduler, keyResolver } from "@yornaath/batshit";
 import { Course, Session } from "~/app/types";
 import { STALE_TIME } from "~/app/constants";
-import { FiltersState } from "~/app/filters";
+import { type FiltersState } from "~/app/filters";
+import { type SortState } from "~/app/sorts";
 import { useAppSelector } from "~/app/hooks";
+import { UserState } from "../user";
 
 export type FetchCourseInfosByPageResult = {
   docs: Course[];
@@ -20,7 +22,9 @@ export type FetchCourseInfosByPageResult = {
 };
 
 const fetchCourseInfosByPage = async (
-  filters: FiltersState
+  filters: FiltersState,
+  { sorts }: SortState,
+  fceAggregation: UserState["fceAggregation"],
 ): Promise<FetchCourseInfosByPageResult> => {
   const url = `${process.env.NEXT_PUBLIC_BACKEND_URL || ""}/courses/search?`;
   const params = new URLSearchParams({
@@ -56,6 +60,17 @@ const fetchCourseInfosByPage = async (
     if (value) params.append("levels", value);
   }
 
+  if (sorts.length > 0) {
+    sorts.forEach((sort) => {
+      params.append("sort", JSON.stringify(sort));
+    });
+  }
+
+  params.append("numSemesters", fceAggregation.numSemesters.toString());
+  params.append("spring", fceAggregation.counted.spring.toString());
+  params.append("summer", fceAggregation.counted.summer.toString());
+  params.append("fall", fceAggregation.counted.fall.toString());
+
   const response = await axios.get(url, {
     headers: {
       "Content-Type": "application/json",
@@ -68,10 +83,12 @@ const fetchCourseInfosByPage = async (
 
 export const useFetchCourseInfosByPage = () => {
   const filters = useAppSelector((state) => state.filters);
+  const sorts = useAppSelector((state) => state.sorts);
+  const fceAggregation = useAppSelector((state) => state.user.fceAggregation);
 
   return useQuery({
-    queryKey: ["courseInfosByPage", filters],
-    queryFn: () => fetchCourseInfosByPage(filters),
+    queryKey: ["courseInfosByPage", filters, sorts, fceAggregation],
+    queryFn: () => fetchCourseInfosByPage(filters, sorts, fceAggregation),
     staleTime: STALE_TIME,
     placeholderData: keepPreviousData,
   });

apps/frontend/src/app/filters.ts

@@ -115,7 +115,17 @@ export const filtersSlice = createSlice({
         state.levels.selected[index] = false;
       }
     },
+    resetDepartments: (state) => {
+      state.departments = initialState.departments;
+    },
+    resetLevels: (state) => {
+      state.levels.selected = initialState.levels.selected;
+    },
+    resetSemesters: (state) => {
+      state.semesters.sessions = initialState.semesters.sessions;
+    },
     resetFilters: (state) => {
+      // this will also reset the query through departments
       state.departments = initialState.departments;
       state.levels = initialState.levels;
       state.units = initialState.units;