Feature/core courses toggle 21 (#30)

* Default Explorer to core courses with toggle for full graph

The full course graph is overwhelming on first load with heavy edge
fan-out. Default to showing only core CS-program courses, with a
toggle in the Explorer view to switch to the full course set.

Filtering happens outside computeLayout: the visible course set is
derived first (core vs all), edges are filtered to those with both
endpoints visible, and layout is recomputed over that set so later
filter modes can follow the same pattern.

* test

---------

Co-authored-by: AJaccP <paditya1708@gmail.com>

Author: zaidahmad16

.gitignore

@@ -26,4 +26,5 @@ package-lock.json
 
 # Output
 scripts/output/*.json
-coverage/
+coverage
+coverage/

src/components/ExplorerLegend.tsx

@@ -9,7 +9,7 @@ export default function ExplorerLegend() {
   const boxClass = 'w-9 h-4 border-2 self-center rounded';
 
   return (
-    <div className="text-sm absolute left-4 top-16 w-72 bg-white border border-gray-300 px-3 py-2 rounded-lg shadow-md z-1">
+    <div className="text-sm pointer-events-auto w-full bg-white border border-gray-300 px-3 py-2 rounded-lg shadow-md">
       <button
         type="button"
         onClick={() => setOpen(!open)}

src/components/ExplorerSearch.tsx

@@ -77,7 +77,7 @@ export default function ExplorerSearch() {
   const open = results.length > 0;
 
   return (
-    <div className="absolute left-4 top-4 z-10 w-72">
+    <div className="pointer-events-auto relative z-10 w-full">
       <input
         ref={inputRef}
         type="search"
@@ -102,7 +102,7 @@ export default function ExplorerSearch() {
           ref={listRef}
           id="explorer-search-results"
           role="listbox"
-          className="mt-1 max-h-64 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg"
+          className="absolute top-full left-0 mt-1 max-h-64 w-full overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg"
         >
           {results.map((r, i) => (
             <li

src/pages/Explorer.tsx

@@ -19,8 +19,14 @@ import {
   type Edge,
 } from '@xyflow/react';
 import dagre from '@dagrejs/dagre';
-import { courseList, courses, prereqEdges } from '@/data/loadCourses';
+import {
+  courseList,
+  coreCourseList,
+  courses,
+  prereqEdges,
+} from '@/data/loadCourses';
 import { useExplorerStore } from '@/store/explorerStore';
+import type { Course } from '@/types/course';
 import CourseNode from '@/components/CourseNode';
 import type { CourseNodeData } from '@/components/CourseNode';
 import CourseDetailPanel from '@/components/CourseDetailPanel';
@@ -30,22 +36,18 @@ import ExplorerLegend from '@/components/ExplorerLegend';
 const NODE_W = 180;
 const NODE_H = 60;
 
-// Only draw edges where both endpoints are in our course set; SYSC courses that
-// appear in COMP 3004's prereqs are not nodes yet (see TODO #3 above).
-const knownCodes = new Set(courseList.map((c) => c.code));
-const visibleEdges = prereqEdges.filter(
-  (e) => knownCodes.has(e.from) && knownCodes.has(e.to),
-);
-
-function computeLayout(): {
+function computeLayout(
+  visibleCourses: Course[],
+  visibleEdges: { from: string; to: string }[],
+): {
   nodes: Node<CourseNodeData>[];
   edges: Edge[];
 } {
   const g = new dagre.graphlib.Graph();
   g.setDefaultEdgeLabel(() => ({}));
   g.setGraph({ rankdir: 'TB', ranksep: 80, nodesep: 40 });
 
-  for (const course of courseList) {
+  for (const course of visibleCourses) {
     g.setNode(course.code, { width: NODE_W, height: NODE_H });
   }
 
@@ -57,7 +59,7 @@ function computeLayout(): {
 
   dagre.layout(g);
 
-  const nodes: Node<CourseNodeData>[] = courseList.map((course) => {
+  const nodes: Node<CourseNodeData>[] = visibleCourses.map((course) => {
     const pos = g.node(course.code);
     return {
       id: course.code,
@@ -80,11 +82,35 @@ function computeLayout(): {
 const nodeTypes: NodeTypes = { courseNode: CourseNode };
 
 export default function Explorer() {
-  const { selectedCourse, highlightedSet, setSelectedCourse } =
-    useExplorerStore();
+  const {
+    selectedCourse,
+    highlightedSet,
+    setSelectedCourse,
+    showAllCourses,
+    toggleShowAllCourses,
+  } = useExplorerStore();
+
+  // The single source of truth for "what's shown" — later filter modes
+  // (reachable-on-click, department/year, search) should derive their own
+  // visible set the same way, upstream of layout.
+  const visibleCourses = showAllCourses ? courseList : coreCourseList;
+  const visibleCodes = useMemo(
+    () => new Set(visibleCourses.map((c) => c.code)),
+    [visibleCourses],
+  );
+  const visibleEdges = useMemo(
+    () =>
+      prereqEdges.filter(
+        (e) => visibleCodes.has(e.from) && visibleCodes.has(e.to),
+      ),
+    [visibleCodes],
+  );
 
-  // Layout is derived entirely from static import-time data; deps array is empty.
-  const { nodes, edges: layoutEdges } = useMemo(() => computeLayout(), []);
+  // Layout is recomputed whenever the visible course set changes.
+  const { nodes, edges: layoutEdges } = useMemo(
+    () => computeLayout(visibleCourses, visibleEdges),
+    [visibleCourses, visibleEdges],
+  );
 
   // Re-derive edge styles when selection changes.
   const edges = useMemo(
@@ -108,9 +134,9 @@ export default function Explorer() {
 
   return (
     <div className="relative h-full w-full">
-      <ExplorerSearch />
-      <ExplorerLegend />
       <ReactFlow
+        // Remounting on toggle lets React Flow's `fitView` re-fit to the new set.
+        key={showAllCourses ? 'all' : 'core'}
         nodes={nodes}
         edges={edges}
         nodeTypes={nodeTypes}
@@ -122,6 +148,20 @@ export default function Explorer() {
         <Background />
         <Controls />
       </ReactFlow>
+      {/* Graph controls stack here so they can't collide; the column ignores
+          pointer events so canvas panning works through the gaps. */}
+      <div className="pointer-events-none absolute top-4 left-4 z-10 flex w-72 max-w-[calc(100%-2rem)] flex-col gap-2">
+        <button
+          type="button"
+          onClick={toggleShowAllCourses}
+          aria-pressed={showAllCourses}
+          className="pointer-events-auto self-start rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
+        >
+          {showAllCourses ? 'Show core only' : 'Show all courses'}
+        </button>
+        <ExplorerSearch />
+        <ExplorerLegend />
+      </div>
       <CourseDetailPanel
         course={selected}
         onClose={() => setSelectedCourse(null)}

src/store/explorerStore.ts

@@ -6,6 +6,8 @@ interface ExplorerState {
   selectedCourse: string | null;
   highlightedSet: Set<string>;
   setSelectedCourse: (code: string | null) => void;
+  showAllCourses: boolean;
+  toggleShowAllCourses: () => void;
 }
 
 export const useExplorerStore = create<ExplorerState>((set) => ({
@@ -23,4 +25,7 @@ export const useExplorerStore = create<ExplorerState>((set) => ({
               ...getDescendants(code, prereqEdges),
             ]),
     }),
+  showAllCourses: false,
+  toggleShowAllCourses: () =>
+    set((state) => ({ showAllCourses: !state.showAllCourses })),
 }));