Fix course colors not persisting across pages

The graph API now stamps each node with its enrollment color
(course_color) and normalizes the subject field from course_id,
so the frontend no longer relies solely on a separately-fetched
courseColorMap keyed by course_name. The KnowledgeGraph component
now prefers the node's own course_color, falling back to the map.
Dashboard refreshes graph data after a color change so the
embedded graph reflects the update immediately.

Author: Jose Cruz

backend/services/graph_service.py

@@ -137,40 +137,60 @@ def get_graph(user_id: str) -> dict:
         "avg_learning_velocity": avg_velocity,
     }
 
+    # Build a course_id → color + name lookup from enrollments
+    course_color_map: dict[str, str | None] = {}
+    course_name_map: dict[str, str] = {}
+    for enrollment in enrolled_courses:
+        cid = enrollment["course_id"]
+        course = enrollment.get("courses", {}) if isinstance(enrollment.get("courses"), dict) else {}
+        course_color_map[cid] = enrollment.get("color")
+        course_name_map[cid] = course.get("course_name", "")
+
+    # Stamp each node's subject from its course_id so the frontend has a
+    # consistent key, and attach the enrollment color directly.
+    for n in nodes:
+        cid = n.get("course_id")
+        if cid and cid in course_name_map:
+            n["subject"] = course_name_map[cid]
+        if cid and cid in course_color_map:
+            n["course_color"] = course_color_map[cid]
+
     # Build subject root hubs from enrolled courses
     subject_nodes = []
     subject_edges = []
-    
+
     for enrollment in enrolled_courses:
         course_id = enrollment["course_id"]
         course = enrollment.get("courses", {}) if isinstance(enrollment.get("courses"), dict) else {}
         course_code = course.get("course_code", "")
         course_name = course.get("course_name", "")
-        
+
         # Use "Course Code - Course Name" as the subject label
         subject_label = f"{course_code} - {course_name}" if course_code else course_name
-        
+
         # Find all nodes belonging to this course
         subj_nodes = [n for n in nodes if n.get("course_id") == course_id]
-        
+
         root_id = f"subject_root__{course_id}"
         if subj_nodes:
             avg_mastery = sum(n["mastery_score"] for n in subj_nodes) / len(subj_nodes)
         else:
             avg_mastery = 0.0
-            
+
         subject_nodes.append({
             "id": root_id,
             "user_id": user_id,
             "concept_name": subject_label,
             "mastery_score": round(avg_mastery, 4),
             "mastery_tier": "subject_root",
             "course_id": course_id,
+            "subject": course_name,
+            "course_color": course_color_map.get(course_id),
             "times_studied": sum(n.get("times_studied", 0) for n in subj_nodes),
             "last_studied_at": None,
             "is_subject_root": True,
         })
-        
+
         for n in subj_nodes:
             subject_edges.append({
                 "id": f"subject_edge__{root_id}__{n['id']}",

frontend/src/app/dashboard/page.tsx

@@ -339,6 +339,10 @@ function DashboardInner() {
       setCourseList(prev => prev.map(c => (c.course_id === courseId ? { ...c, color: newHex } : c)));
       setCourseColorMap(prev => ({ ...prev, [courseName]: newHex }));
       setEditingColorFor(null);
+      // Refresh graph so nodes carry the updated course_color
+      const graphData = await getGraph(userId);
+      setNodes(graphData.nodes);
+      setEdges(graphData.edges);
     } catch (e) {
       console.error(e);
     }

frontend/src/components/KnowledgeGraph.tsx

@@ -26,6 +26,7 @@ interface SimNode extends d3.SimulationNodeDatum {
   mastery_score: number;
   mastery_tier: string;
   subject: string;
+  course_color?: string | null;
   is_subject_root?: boolean;
 }
 
@@ -38,6 +39,12 @@ const ROOT_RADIUS = 22;
 const getSimRadius = (d: SimNode) =>
   d.is_subject_root ? ROOT_RADIUS : getNodeRadius(d.mastery_score);
 
+/** Resolve the color override for a node: prefer the node's own course_color,
+ *  then fall back to the courseColorMap lookup by subject name. */
+function nodeColorOverride(d: SimNode, colorMap: Record<string, string>): string | undefined {
+  return d.course_color ?? colorMap[d.subject] ?? undefined;
+}
+
 /** Opacity encodes mastery tier — full colour = mastered, ghost = unexplored. */
 function masteryOpacity(tier: string): number {
   switch (tier) {
@@ -192,7 +199,7 @@ function KnowledgeGraph({
       .attr('font-size', d => d.is_subject_root ? '13px' : '11px')
       .attr('font-weight', d => d.is_subject_root ? '600' : '400')
       .attr('font-family', "'DM Sans', Inter, system-ui, sans-serif")
-      .attr('fill', d => d.is_subject_root ? getCourseColor(d.subject, courseColorMapRef.current[d.subject]).text : '#374151')
+      .attr('fill', d => d.is_subject_root ? getCourseColor(d.subject, nodeColorOverride(d, courseColorMapRef.current)).text : '#374151')
       .attr('pointer-events', 'none')
       .style('user-select', 'none');
 
@@ -224,9 +231,9 @@ function KnowledgeGraph({
     const circles = nodeSel.append('circle')
       .attr('class', 'main-circle')
       .attr('r', d => getSimRadius(d))
-      .attr('fill', d => getCourseColor(d.subject, courseColorMapRef.current[d.subject]).fill)
+      .attr('fill', d => getCourseColor(d.subject, nodeColorOverride(d, courseColorMapRef.current)).fill)
       .attr('fill-opacity', d => masteryOpacity(d.mastery_tier))
-      .attr('stroke', d => getCourseColor(d.subject, courseColorMapRef.current[d.subject]).fill)
+      .attr('stroke', d => getCourseColor(d.subject, nodeColorOverride(d, courseColorMapRef.current)).fill)
       .attr('stroke-opacity', d => d.is_subject_root ? 0.7 : 0.4)
       .attr('stroke-width', d => d.is_subject_root ? 2.5 : 1.5);
 
@@ -263,7 +270,7 @@ function KnowledgeGraph({
           const lastStudied = sourceNode.last_studied_at
             ? new Date(sourceNode.last_studied_at).toLocaleDateString()
             : 'Never';
-          const cc = getCourseColor(sourceNode.subject, courseColorMapRef.current[sourceNode.subject]);
+          const cc = getCourseColor(sourceNode.subject, sourceNode.course_color ?? courseColorMapRef.current[sourceNode.subject]);
           tooltip.innerHTML = `
             <div style="font-weight:600;color:#111827;margin-bottom:4px">${sourceNode.concept_name}</div>
             <div style="display:flex;align-items:center;gap:5px;margin-bottom:4px">
@@ -370,17 +377,25 @@ function KnowledgeGraph({
     const svg = d3.select(svgRef.current);
     svg.selectAll<SVGCircleElement, SimNode>('.main-circle')
       .attr('fill', d => {
-        const subj = nodeMap.get(d.id)?.subject ?? d.subject;
-        return getCourseColor(subj, courseColorMap[subj]).fill;
+        const n = nodeMap.get(d.id);
+        const subj = n?.subject ?? d.subject;
+        const override = n?.course_color ?? d.course_color ?? courseColorMap[subj];
+        return getCourseColor(subj, override).fill;
       })
       .attr('fill-opacity', d => masteryOpacity(nodeMap.get(d.id)?.mastery_tier ?? d.mastery_tier))
       .attr('stroke', d => {
-        const subj = nodeMap.get(d.id)?.subject ?? d.subject;
-        return getCourseColor(subj, courseColorMap[subj]).fill;
+        const n = nodeMap.get(d.id);
+        const subj = n?.subject ?? d.subject;
+        const override = n?.course_color ?? d.course_color ?? courseColorMap[subj];
+        return getCourseColor(subj, override).fill;
       });
     svg.selectAll<SVGTextElement, SimNode>('text')
       .filter(d => !!d.is_subject_root)
-      .attr('fill', d => getCourseColor(d.subject, courseColorMap[d.subject]).text);
+      .attr('fill', d => {
+        const n = nodeMap.get(d.id);
+        const override = n?.course_color ?? d.course_color ?? courseColorMap[d.subject];
+        return getCourseColor(d.subject, override).text;
+      });
   }, [nodes, courseColorMap]);
 
   // Separate lightweight effect: only add/remove the highlight ring.

frontend/src/lib/types.ts

@@ -7,6 +7,7 @@ export interface GraphNode {
   last_studied_at: string | null;
   subject: string;
   course_id?: string | null;
+  course_color?: string | null;
   is_subject_root?: boolean;
   x?: number;
   y?: number;