Complete Implementation of Global CMU Course DAG Visualization

[nniknam1]

Summary

This PR introduces a full rewrite of the course requisites visualization, replacing the old single-course viewer with a global, comprehensive DAG showing all CMU courses and their prerequisite relationships.

1. Backend Updates

• Updated the /courses/requisites-graph endpoint to return all courses and all prerequisite edges.
• Ensured consistent node data (courseID, name, department, units).
• Normalized output for compatibility with ReactFlow.

2. Frontend Redesign

• Replaced the previous viewer with a global DAG that renders all courses at once.
• Removed the search bar and highlight functionality.
• Added a clear legend for departments.
• Simplified the UI and improved layout spacing.

3. New Layout Engine

• Implemented a complete layout system using Kahn’s topological sorting.
• Courses are placed left-to-right based on prerequisite depth.
• Handles missing nodes, disconnected subgraphs, and malformed edges safely.

4. Visual Improvements

• New bold color palette for departments (CS, Math, SE, HCII, Stats, Policy, IS, and others).
• Thicker borders and cleaner text for readability.
• Smooth prerequisite arrows with improved styling.

5. Stability Fixes

• Resolved crashes caused by edges referencing undefined nodes.
• Added validation to ensure all graph structures are initialized correctly.
• Filtered invalid edges and prevented undefined .push operations.

6. Code Cleanup

• Consolidated graph logic into one organized useMemo block.
• Removed unused state variables and components.
• Standardized ReactFlow config and layout structure.

Result

The requisites feature is now stable, visually clear, and capable of displaying a full-course dependency graph. The new implementation is significantly more readable, maintainable, and aligned with production needs.

closes #253

[vercel]

@nniknam1 is attempting to deploy a commit to the ScottyLabs Team on Vercel.

A member of the Team first needs to authorize it.

[IndyaG]

We need to reach out about the authorization of Vercel. But other than that looks good.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
cmucourses	Ready	Preview	Dec 10, 2025 2:05pm

[ap-1]

Judging from the image, the horizontal lines in this visualization make it look very noisy and hard to parse.

Do you think it would look better if they were colored according to the course, or a slightly more muted gray to make them blend into the background better? Then you can implement a hover effect so that only what the user's trying to see stands out.

[nniknam1]

Would you like each course box to be colored fully according to the department? I can make it so when the user hovers over the course, the box is colored. Additionally, would you like courses to be more spaced out so the graph is clearer?

[ap-1]

Would you like each course box to be colored fully according to the department? I can make it so when the user hovers over the course, the box is colored. Additionally, would you like courses to be more spaced out so the graph is clearer?

Coloring the course box fully might be a little too much, but I don't know. Maybe it would look good on hover, as you're suggesting. To reduce visual noise, I was thinking either

a) Hiding the horizontal lines, and only showing them when a relevant course box is hovered, or
b) Making them duller / harder to see, and then restoring the default (current) styles only for the relevant ones when a course is hovered (what I described earlier).

As for spacing, I think it looks good as is.