Skip to content

Implement search for explorer page #15

@AJaccP

Description

@AJaccP

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

  1. Create src/components/ExplorerSearch.tsx with local input state.
  2. 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.
  3. Show a dropdown of matches (CODE — Title); update it as the user types.
  4. On selecting a result, call setSelectedCourse(code) from the explorer store and close the dropdown. That reuses all the existing highlight behaviour.
  5. 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.
  6. Keyboard niceties (arrow keys to move through results, Enter to select, Esc to clear) are nice-to-have.
  7. 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

  • A search input appears in the Explorer view (not in the shared Header)
  • Typing filters a dropdown of matching courses by code and title, case- and space-insensitive
  • Selecting a result highlights it exactly as clicking the node does (reuses setSelectedCourse)
  • No new highlight/selection state is added to the store
  • Pan/zoom-to-node is not included (separate ticket)
  • pnpm typecheck, pnpm test, and pnpm lint pass

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status
    Ready

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions