As a student using the Explorer, I want to search for a course by code or title and have the graph jump to and highlight it, so I can find a course quickly in a dense graph.
🧠 Context
The Explorer (src/pages/Explorer.tsx) renders the prerequisite DAG. Clicking a node calls setSelectedCourse(code) on the explorer store (src/store/explorerStore.ts), which computes the highlight set (the course plus its ancestors and descendants) and dims everything else.
This ticket adds a type-ahead search bar that finds a course and selects it — reusing the exact same selection mechanism, so a search hit highlights identically to a click. No new store state is needed.
Two guardrails:
- Render the search inside the Explorer view, not the global
Header. The nav in src/components/Header.tsx appears on both routes; a search bar there would show on the Planner where it's meaningless. Put it in the Explorer (e.g. an absolute-positioned overlay).
- Reuse
setSelectedCourse — do not reinvent highlighting. Selecting a result should behave exactly like clicking the node.
🛠️ Implementation Plan
- Create
src/components/ExplorerSearch.tsx with local input state.
- Filter
courseList (exported from src/data/loadCourses.ts) by both code and title, normalized (lowercase, strip spaces) so comp2402, COMP 2402, and abstract data all match. Rank code-prefix matches first if you like.
- Show a dropdown of matches (
CODE — Title); update it as the user types.
- On selecting a result, call
setSelectedCourse(code) from the explorer store and close the dropdown. That reuses all the existing highlight behaviour.
- Render
<ExplorerSearch /> inside Explorer.tsx as an overlay (top corner of the graph area). You can decide the exact placement/styling, just keep it out of the shared Header.
- Keyboard niceties (arrow keys to move through results, Enter to select, Esc to clear) are nice-to-have.
- Run
pnpm dev, then pnpm typecheck, pnpm test, pnpm lint.
🚫 Out of scope (separate ticket)
- Pan / zoom to the selected node. Making the graph re-center on the picked course (via React Flow's
setCenter / fitView) is a follow-up enhancement — keep this first PR focused on search + select + highlight. If it's a small addition with the rest of your changes, feel free to tackle it, but it's not required.
✅ Acceptance Criteria
As a student using the Explorer, I want to search for a course by code or title and have the graph jump to and highlight it, so I can find a course quickly in a dense graph.
🧠 Context
The Explorer (
src/pages/Explorer.tsx) renders the prerequisite DAG. Clicking a node callssetSelectedCourse(code)on the explorer store (src/store/explorerStore.ts), which computes the highlight set (the course plus its ancestors and descendants) and dims everything else.This ticket adds a type-ahead search bar that finds a course and selects it — reusing the exact same selection mechanism, so a search hit highlights identically to a click. No new store state is needed.
Two guardrails:
Header. The nav insrc/components/Header.tsxappears on both routes; a search bar there would show on the Planner where it's meaningless. Put it in the Explorer (e.g. an absolute-positioned overlay).setSelectedCourse— do not reinvent highlighting. Selecting a result should behave exactly like clicking the node.🛠️ Implementation Plan
src/components/ExplorerSearch.tsxwith local input state.courseList(exported fromsrc/data/loadCourses.ts) by both code and title, normalized (lowercase, strip spaces) socomp2402,COMP 2402, andabstract dataall match. Rank code-prefix matches first if you like.CODE — Title); update it as the user types.setSelectedCourse(code)from the explorer store and close the dropdown. That reuses all the existing highlight behaviour.<ExplorerSearch />insideExplorer.tsxas an overlay (top corner of the graph area). You can decide the exact placement/styling, just keep it out of the sharedHeader.pnpm dev, thenpnpm typecheck,pnpm test,pnpm lint.🚫 Out of scope (separate ticket)
setCenter/fitView) is a follow-up enhancement — keep this first PR focused on search + select + highlight. If it's a small addition with the rest of your changes, feel free to tackle it, but it's not required.✅ Acceptance Criteria
Header)setSelectedCourse)pnpm typecheck,pnpm test, andpnpm lintpass