course whitelist toggle

Author: v-morlock

app/courses/[courseId]/media/[mediaId]/SimilarSegments.tsx

@@ -1,6 +1,12 @@
 import { SimilarSegmentsQuery } from "@/__generated__/SimilarSegmentsQuery.graphql";
 import SearchResultsBox from "@/components/search/SearchResultsBox";
-import { CircularProgress, Drawer } from "@mui/material";
+import {
+  CircularProgress,
+  Drawer,
+  FormControlLabel,
+  Switch,
+} from "@mui/material";
+import { useParams } from "next/navigation";
 import { useState, useTransition } from "react";
 import { graphql, useLazyLoadQuery } from "react-relay";
 import useBus from "use-bus";
@@ -15,16 +21,30 @@ export function SimilarSegments() {
     }
   });
 
+  const params = useParams();
+  const [onlySameCourse, setOnlySameCourse] = useState(true);
+
   const segments = useLazyLoadQuery<SimilarSegmentsQuery>(
     graphql`
-      query SimilarSegmentsQuery($segmentId: UUID!, $skip: Boolean!) {
-        getSemanticallySimilarEntities(segmentId: $segmentId, count: 10)
-          @skip(if: $skip) {
+      query SimilarSegmentsQuery(
+        $segmentId: UUID!
+        $skip: Boolean!
+        $whitelist: [UUID!]
+      ) {
+        getSemanticallySimilarEntities(
+          segmentId: $segmentId
+          count: 10
+          courseWhitelist: $whitelist
+        ) @skip(if: $skip) {
           ...SearchResultsBox
         }
       }
     `,
-    { segmentId: segmentId!, skip: !segmentId }
+    {
+      segmentId: segmentId!,
+      skip: !segmentId,
+      whitelist: onlySameCourse ? [params.courseId] : undefined,
+    }
   );
 
   return (
@@ -33,7 +53,20 @@ export function SimilarSegments() {
       onClose={() => setSegmentId(null)}
       anchor="right"
     >
-      <div className="w-[66vw] h-screen flex">
+      <div className="w-[66vw] h-screen flex flex-col">
+        {params.courseId && (
+          <FormControlLabel
+            className="px-4 pt-4"
+            control={
+              <Switch
+                checked={onlySameCourse}
+                onChange={(e) => setOnlySameCourse(e.target.checked)}
+              />
+            }
+            label="Only search the current course"
+          />
+        )}
+
         {isLoading && (
           <div className="flex items-center justify-center w-full h-full">
             <CircularProgress className="place-self-center justify-self-center" />