InfoPanel.jsx + RelationLines.jsx UI components

InfoPanel is a bottom drawer that slides up when a course is selected, showing all its metadata, prerequisites, and relationships. RelationLines is a full-viewport SVG overlay that draws colored lines between the selected course and its prerequisites/corequisites.

Parent

ui/ (both rendered in PlannerApp)

Trigger

selectedId !== null in PlannerContext

Lines

InfoPanel ~400; RelationLines ~100

InfoPanel sections

graph TD IP["InfoPanel (slides up when selectedId is set)"] IP --> HDR["Header: course code + ✕ close + resize handle"] IP --> INFO["Course info: title, SH, NUPath chips, offered semesters"] IP --> DESC["Description: parsed text with clickable course links"] IP --> PREREQ["Prerequisites: draggable chips (drag directly into timeline)"] IP --> COREQ["Corequisites: draggable chips"] IP --> REL["Relationship list: all edges with type icons"] IP --> OFF["Offered toggles: fall/spring/sumA/sumB checkboxes (user-overridable)"]

Description parsing

The catalog description often mentions other course codes inline (e.g., "Students must have completed CS 2500."). InfoPanel parses these with a regex and renders them as clickable chips. Clicking a chip sets selectedId to that course, effectively navigating to it.

A local navigation history stack (navHistory, navIdx) tracks the sequence of viewed courses. Cmd+Z goes back, Cmd+Shift+Z goes forward — note this is separate from the undo/redo system.

Draggable prerequisite chips

Each prerequisite shown in InfoPanel is also a draggable element. You can drag a prereq chip directly from the panel into a semester row, placing it without searching for it in the bank. This is especially useful when building a plan from the InfoPanel view.

Offered toggles (user overrides)

The four checkboxes (fall/spring/sumA/sumB) show the scraped offering schedule. The user can toggle them to override the data — useful when a course is offered in an unusual semester not captured by the scraper. Overrides are stored per-course in context (not persisted across plans — this is a known gap).

Resize handle

A drag handle at the top of the panel lets users adjust its height. Height is stored in panelHeight (context state). On phone, the panel covers more screen real estate; on desktop it floats at the bottom.

RelationLines.jsx

A position: fixed SVG element covering the entire viewport. Rendered at all times but only draws lines when selectedId !== null and showViolLines === true.

When a course is selected, a useEffect in PlannerContext queries the DOM for all rendered course card elements using document.querySelectorAll('[data-course-id="..."]'), reads their bounding rectangles via getBoundingClientRect(), and stores the line endpoint coordinates. RelationLines reads these and draws SVG lines.

Lines are re-drawn:

When selectedId changes
When placements changes (a course moved)
On scroll (via a scrollTick counter that increments on scroll events)

Line styles (color, dash pattern, arrowhead) are defined per relationship type in constants.js → REL_STYLE.