Skip to content

Color-code course nodes by year #6

@AJaccP

Description

@AJaccP

As a student using the Explorer, I want course nodes to be color-coded by year level so I can quickly see the progression of the curriculum.


🧠 Context

src/components/CourseNode.tsx renders each node in the prerequisite graph. All nodes currently have the same border-gray-300 border regardless of course level.

Course codes follow the pattern DEPT XXXX (e.g. COMP 1405, COMP 3004) — the first digit of the numeric part indicates the year level: 1xxx, 2xxx, 3xxx, 4xxx.

The change is purely visual and isolated to CourseNode.tsx — no store changes, no new components.


🛠️ Implementation Plan

  1. Open src/components/CourseNode.tsx.

  2. Derive the year level from data.code by extracting the first digit of the numeric portion of the course code.

  3. Replace the static border-gray-300 with a border color that varies by year level. Pick four visually distinct colors — one per level. Keep them readable against the white node background.

  4. Run pnpm dev, open the Explorer, and verify nodes at each year level display a distinct border color.


✅ Acceptance Criteria

  • 1xxx, 2xxx, 3xxx and 4xxx courses have distinct border colors
  • All four colors are visually distinct from each other and readable against the white background
  • Existing node behaviour (click to highlight, dim on selection) is unchanged
  • pnpm typecheck and pnpm test still pass

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

Status
For Review

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions