GradPanel.jsx UI component

The most complex UI component. Fetches and renders a major's graduation requirement tree, showing which requirements are satisfied by the user's placed courses. Contains a recursive ReqNode renderer, NUPath grid, and General Electives section.

Parent

ui/ (rendered inside BankPanel)

Lines

~1,000+

Core logic used

allocateMajorWithElectives(), getNuPathCoverage(), checkReq()

Data loaded

majorLoader.loadMajor(), minorLoader.loadMinor()

Data flow through GradPanel

flowchart TD A["User selects major in SearchCombo"] --> B["loadMajor(path)"] B --> C["Major2 JSON fetched"] C --> D["buildPlacedKeySet(placements, placedOut, courseMap)"] D --> E["allocateMajorWithElectives(major, placedSet, courseMap)"] E --> F["SectionResult[] + generalElectives"] F --> G["SectionBlock renders each section"] G --> H["ReqNode renders each requirement recursively"] I["placements change"] --> D J["major changed"] --> B

Major / concentration / minor selectors

Three SearchCombo components — fuzzy-search comboboxes backed by getMajorOptionGroups() / getMinorOptionGroups(). Selecting a major triggers loadMajor(path) and updates major in context. The concentration and minor selectors are enabled after a major is chosen.

GradCtx — avoiding deep prop drilling within GradPanel

GradPanel creates its own internal GradCtx React context and provides it to SectionBlock and ReqNode children. This passes down placedSet, courseMap, allocatedSets, and drag handlers without threading them through every prop chain. It's a local context (not exported), used only within GradPanel's subtree.

ReqNode — recursive requirement renderer

The ReqNode component renders a single requirement node. It reads req.type and renders differently for each:

Type	UI label	Satisfaction display
COURSE	Course code + title chip	✓ (placed) / ○ (not placed) / → (planned)
AND	"All of (X/N)"	Count of satisfied children / total
OR	"One of (X/N)"	Any satisfied = done
XOM	"N SH / M SH"	Accumulated credit hours
RANGE	Subject range label (e.g. "CS 2500–9999")	Matching placed courses listed
SECTION	Section title with progress bar	N of M requirements satisfied

COURSE nodes are draggable — you can drag them directly from the GradPanel requirement tree into a semester row.

NUPath coverage grid

Below the major requirement sections, a 12-cell grid shows NUPath attribute coverage. Each cell shows the attribute code and name. Green = satisfied (at least one placed course carries this attribute). Dim = not yet satisfied. Computed by getNuPathCoverage(placements, courseMap, workPl).

General Electives section

Automatically appended at the end. Shows all placed courses that weren't allocated to any major requirement. Displays credit hours total. Built by buildGeneralElectivesSection() from gradRequirements.js. The creditHoursRequired comes from the major JSON's creditHoursRequired field (if present).