added option to not color nodes by selected sequence

Author: tzacks-cl

src/components/GraphMenu.tsx

@@ -12,6 +12,10 @@ interface GraphMenuProps {
     showSequenceFilter?: boolean;
     showOnlySequenceStudents?: boolean;
     onSequenceFilterChange?: (value: boolean) => void;
+    // Optional props for node coloring checkbox
+    showNodeColoringOption?: boolean;
+    colorNodesBySequence?: boolean;
+    onNodeColoringChange?: (value: boolean) => void;
 }
 
 const GraphMenu: React.FC<GraphMenuProps> = ({
@@ -22,7 +26,10 @@ const GraphMenu: React.FC<GraphMenuProps> = ({
     showSlider = true,
     showSequenceFilter = false,
     showOnlySequenceStudents = true,
-    onSequenceFilterChange
+    onSequenceFilterChange,
+    showNodeColoringOption = false,
+    colorNodesBySequence = true,
+    onNodeColoringChange
 }) => {
     const [isOpen, setIsOpen] = useState(false);
 
@@ -58,6 +65,22 @@ const GraphMenu: React.FC<GraphMenuProps> = ({
                         </div>
                     )}
 
+                    {showNodeColoringOption && onNodeColoringChange && (
+                        <div className="mb-4">
+                            <label className="flex items-center cursor-pointer">
+                                <input
+                                    type="checkbox"
+                                    checked={colorNodesBySequence}
+                                    onChange={(e) => onNodeColoringChange(e.target.checked)}
+                                    className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                                />
+                                <span className="ml-2 text-xs font-medium text-gray-700">
+                                    Color nodes by sequence position
+                                </span>
+                            </label>
+                        </div>
+                    )}
+
                     {showSlider && (
                         <>
                             <div className="flex justify-between items-center mb-3">

src/components/GraphvizParent.tsx

@@ -73,6 +73,9 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
     // State for selected sequence graph filtering
     const [showOnlySequenceStudents, setShowOnlySequenceStudents] = useState<boolean>(true);
 
+    // State for node coloring
+    const [colorNodesBySequence, setColorNodesBySequence] = useState<boolean>(true);
+
     // History state management
     const [activeTab, setActiveTab] = useState<'graphs' | 'history'>('graphs');
     const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
@@ -188,6 +191,7 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                 errorMode, // Use actual errorMode setting
                 mainGraphData.firstAttemptOutcomes,
                 uniqueStudentMode,
+                colorNodesBySequence,
             );
 
             setDotString(dotString);
@@ -223,10 +227,11 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                     false, // Force errorMode to false for static top graph
                     sequenceResults.firstAttemptOutcomes,
                     uniqueStudentMode,
+                    colorNodesBySequence,
                 )
             );
         }
-    }, [mainGraphData, selectedSequence, setTop5Sequences, top5Sequences, onMaxEdgeCountChange, onMaxMinEdgeCountChange, uniqueStudentMode, minVisits, errorMode, minVisitsPerGraph, showOnlySequenceStudents]); // Responds to uniqueStudentMode, minVisits, errorMode, minVisitsPerGraph, showOnlySequenceStudents and selectedSequence
+    }, [mainGraphData, selectedSequence, setTop5Sequences, top5Sequences, onMaxEdgeCountChange, onMaxMinEdgeCountChange, uniqueStudentMode, minVisits, errorMode, minVisitsPerGraph, showOnlySequenceStudents, colorNodesBySequence]); // Responds to uniqueStudentMode, minVisits, errorMode, minVisitsPerGraph, showOnlySequenceStudents, colorNodesBySequence and selectedSequence
 
     // Memoized filtered graph data for each filter
     const filteredGraphDataMap = useMemo(() => {
@@ -344,6 +349,7 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                     errorMode,
                     filteredGraphData.firstAttemptOutcomes,
                     uniqueStudentMode,
+                    colorNodesBySequence,
                 );
 
                 newFilteredDotStrings[filter] = filteredDotString;
@@ -375,19 +381,23 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
     }, []);
 
     // Export a graph as high-quality PNG with problem name
-    const exportGraphAsPNG = (graphRef: React.RefObject<HTMLDivElement>, graphName: string, minStudents?: number) => {
+    const exportGraphAsPNG = (graphRef: React.RefObject<HTMLDivElement>, graphName: string, minStudents?: number, isColored?: boolean) => {
         if (!graphRef.current) return;
 
         const svgElement = graphRef.current.querySelector('svg') as SVGSVGElement;
         if (!svgElement) return;
 
-        // Build filename: problemName_graphName_minXX
+        // Build filename: problemName_graphName_minXX_colored
         const sanitizedProblemName = problemName.replace(/[^a-zA-Z0-9]/g, '_');
         const sanitizedGraphName = graphName.replace(/[^a-zA-Z0-9]/g, '_');
         let filename = `${sanitizedProblemName}_${sanitizedGraphName}`;
         if (minStudents !== undefined) {
             filename += `_min${minStudents}`;
         }
+        if (isColored) {
+            filename += '_colored';
+        }
+        console.log('Export PNG - isColored:', isColored, 'filename:', filename);
 
         // Get the actual content bounding box to capture the entire visible graph
         const gElement = svgElement.querySelector('g') as SVGGElement;
@@ -484,10 +494,10 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
     // Helper function to calculate progress status statistics for students at a node
     const calculateNodeProgressStats = (nodeName: string): { graduated: number; promoted: number; other: number; total: number } => {
         if (!mainGraphData) return { graduated: 0, promoted: 0, other: 0, total: 0 };
-        
+
         const { stepSequences, sortedData } = mainGraphData;
         const studentsAtNode = new Set<string>();
-        
+
         // Find all students who visited this node
         // stepSequences has structure: { [studentId]: { [problemName]: string[] } }
         if (stepSequences && Object.keys(stepSequences).length > 0) {
@@ -502,26 +512,30 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                 }
             });
         }
-        
+
         // Count progress status for students who visited this node
+        // IMPORTANT: Filter by current problemName to get accurate progress status
         let graduatedCount = 0;
         let promotedCount = 0;
         let otherCount = 0;
-        
+
         if (sortedData && sortedData.length > 0) {
-            // Create a map of all students and their progress status
+            // Create a map of students and their progress status FOR THIS PROBLEM ONLY
             const studentProgressMap = new Map<string, string>();
             sortedData.forEach((row: any) => {
                 const studentId = row['Anon Student Id'];
+                const rowProblemName = row['Problem Name'];
                 const progressStatus = row['CF (Workspace Progress Status)'];
-                if (studentId && progressStatus) {
+
+                // Only use progress status from rows for the current problem
+                if (studentId && progressStatus && rowProblemName === problemName) {
                     studentProgressMap.set(studentId, progressStatus);
                 }
             });
-            
+
             studentsAtNode.forEach(studentId => {
                 const progressStatus = studentProgressMap.get(studentId);
-                
+
                 if (progressStatus === 'GRADUATED') {
                     graduatedCount++;
                 } else if (progressStatus === 'PROMOTED') {
@@ -531,7 +545,7 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                 }
             });
         }
-        
+
         return {
             graduated: graduatedCount,
             promoted: promotedCount,
@@ -728,21 +742,25 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
         }
 
         // Count exact progress status for students who took this transition
+        // IMPORTANT: Filter by current problemName to get accurate progress status
         let graduatedCount = 0;
         let promotedCount = 0;
         let otherCount = 0;
-        
+
         if (sortedData && sortedData.length > 0 && studentsOnEdge.size > 0) {
-            // Create a map of student progress status
+            // Create a map of student progress status FOR THIS PROBLEM ONLY
             const studentProgressMap = new Map<string, string>();
             sortedData.forEach((row: any) => {
                 const studentId = row['Anon Student Id'];
+                const rowProblemName = row['Problem Name'];
                 const progressStatus = row['CF (Workspace Progress Status)'];
-                if (studentId && progressStatus) {
+
+                // Only use progress status from rows for the current problem
+                if (studentId && progressStatus && rowProblemName === problemName) {
                     studentProgressMap.set(studentId, progressStatus);
                 }
             });
-            
+
             studentsOnEdge.forEach(studentId => {
                 const progressStatus = studentProgressMap.get(studentId);
                 if (progressStatus === 'GRADUATED') {
@@ -1449,11 +1467,14 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                                         showSequenceFilter={true}
                                         showOnlySequenceStudents={showOnlySequenceStudents}
                                         onSequenceFilterChange={(value: boolean) => setShowOnlySequenceStudents(value)}
+                                        showNodeColoringOption={true}
+                                        colorNodesBySequence={colorNodesBySequence}
+                                        onNodeColoringChange={(value: boolean) => setColorNodesBySequence(value)}
                                     />
                                     <div ref={graphRefTop} className="w-full h-full"></div>
                                 </div>
                                 <div className="w-full flex justify-center mt-2">
-                                    <ExportButton onClick={() => exportGraphAsPNG(graphRefTop, 'selected_sequence', minVisitsPerGraph['selected_sequence'])} />
+                                    <ExportButton onClick={() => exportGraphAsPNG(graphRefTop, 'selected_sequence', minVisitsPerGraph['selected_sequence'], colorNodesBySequence)} />
                                 </div>
                             </div>
                         )}
@@ -1471,7 +1492,7 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                                     <div ref={graphRefMain} className="w-full h-full"></div>
                                 </div>
                                 <div className="w-full flex justify-center mt-2">
-                                    <ExportButton onClick={() => exportGraphAsPNG(graphRefMain, 'all_students', minVisitsPerGraph['all_students'] ?? Math.round((mainGraphData?.maxEdgeCount || 100) * 0.1))} />
+                                    <ExportButton onClick={() => exportGraphAsPNG(graphRefMain, 'all_students', minVisitsPerGraph['all_students'] ?? Math.round((mainGraphData?.maxEdgeCount || 100) * 0.1), colorNodesBySequence)} />
                                 </div>
                             </div>
                         )}
@@ -1497,7 +1518,7 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                                         <div ref={ref} className="w-full h-full"></div>
                                     </div>
                                     <div className="w-full flex justify-center mt-2">
-                                        <ExportButton onClick={() => exportGraphAsPNG(ref, `filtered_graph_${filter}`, minVisitsPerGraph[graphKey] ?? Math.round((filteredGraphData?.maxEdgeCount || 100) * 0.1))} />
+                                        <ExportButton onClick={() => exportGraphAsPNG(ref, `filtered_graph_${filter}`, minVisitsPerGraph[graphKey] ?? Math.round((filteredGraphData?.maxEdgeCount || 100) * 0.1), colorNodesBySequence)} />
                                     </div>
                                 </div>
                             );

src/components/GraphvizProcessing.ts

@@ -376,6 +376,7 @@ const initializeEdgeTracking = (
 const updateEdgeMetrics = (
     edgeKey: string,
     currentStep: string,
+    _nextStep: string,
     studentId: string,
     outcome: string,
     maps: EdgeTrackingMaps,
@@ -434,6 +435,7 @@ const processStudentPaths = (
             maxEdgeCount = updateEdgeMetrics(
                 edgeKey,
                 currentStep,
+                nextStep,
                 studentId,
                 outcome,
                 maps,
@@ -655,6 +657,7 @@ export const countEdgesForSelectedSequence = (
                                 maxEdgeCount = updateEdgeMetrics(
                                     edgeKey,
                                     currentStep,
+                                    nextStep,
                                     studentId,
                                     outcome,
                                     trackingMaps,
@@ -701,6 +704,7 @@ export const countEdgesForSelectedSequence = (
                             maxEdgeCount = updateEdgeMetrics(
                                 edgeKey,
                                 currentStep,
+                                nextStep,
                                 studentId,
                                 outcome,
                                 trackingMaps,
@@ -1261,14 +1265,15 @@ const generateTopSequenceVisualization = (
     repeatVisits: { [key: string]: { [studentId: string]: number } },
     minVisits: number,
     errorMode: boolean,
-    uniqueStudentMode: boolean = false
+    uniqueStudentMode: boolean = false,
+    colorNodesBySequence: boolean = true
 ): string => {
     let dotContent = '';
     const totalSteps = selectedSequence.length;
 
     for (let rank = 0; rank < totalSteps; rank++) {
         const currentStep = selectedSequence[rank];
-        const color = calculateColor(rank, totalSteps);
+        const color = colorNodesBySequence ? calculateColor(rank, totalSteps) : '#ffffff';
         const studentCount = totalNodeEdges[currentStep] || 0;
         const nodeTooltip = createNodeTooltip(rank, color, studentCount);
 
@@ -1333,7 +1338,8 @@ const generateFullGraphVisualization = (
     threshold: number,
     minVisits: number,
     errorMode: boolean,
-    uniqueStudentMode: boolean = false
+    uniqueStudentMode: boolean = false,
+    colorNodesBySequence: boolean = true
 ): string => {
     let dotContent = '';
     const totalSteps = selectedSequence.length;
@@ -1358,7 +1364,7 @@ const generateFullGraphVisualization = (
 
     for (const nodeName of allNodesInEdges) {
         const sequenceRank = selectedSequence.indexOf(nodeName);
-        const color = sequenceRank >= 0 ? calculateColor(sequenceRank, totalSteps) : '#ffffff';
+        const color = (colorNodesBySequence && sequenceRank >= 0) ? calculateColor(sequenceRank, totalSteps) : '#ffffff';
         const rank = sequenceRank >= 0 ? sequenceRank + 1 : 0;
         const studentCount = totalNodeEdges[nodeName] || 0;
         const nodeTooltip = createNodeTooltip(sequenceRank, color, studentCount);
@@ -1438,7 +1444,8 @@ export function generateDotString(
     repeatVisits: { [key: string]: { [studentId: string]: number } },
     errorMode: boolean,
     firstAttemptOutcomes: { [key: string]: { [outcome: string]: number } },
-    uniqueStudentMode: boolean = false
+    uniqueStudentMode: boolean = false,
+    colorNodesBySequence: boolean = true
 ): string {
     if (!selectedSequence || selectedSequence.length === 0) {
         return 'digraph G {\n"Error" [label="No valid sequences found to display."];\n}';
@@ -1468,7 +1475,8 @@ export function generateDotString(
             repeatVisits,
             minVisits,
             errorMode,
-            uniqueStudentMode
+            uniqueStudentMode,
+            colorNodesBySequence
         );
     } else {
         dotString += generateFullGraphVisualization(
@@ -1484,7 +1492,8 @@ export function generateDotString(
             threshold,
             minVisits,
             errorMode,
-            uniqueStudentMode
+            uniqueStudentMode,
+            colorNodesBySequence
         );
     }