feat: show actual student count in edge visit threshold slider

tzacks-cl · tzacks-cl · commit 7cd37274d31e · 2025-03-24T10:22:03.000-05:00
- Add maxEdgeCount prop to Slider component
- Display both percentage and actual student count in slider label
- Update App component to pass maxEdgeCount to Slider
- Calculate actual student count from percentage and maxEdgeCount
- Added a new studentEdgeCounts object that uses Sets to track unique students per edge

This change makes the edge visit threshold more intuitive by showing
the actual number of students that would be required for an edge to
be displayed, rather than just showing the percentage.
diff --git a/README.md b/README.md
@@ -16,7 +16,6 @@ React + TypeScript + Vite + SWC (with Rust compiler)
 The application accepts the following file formats:
 - CSV (Comma Separated Values)
 - TSV (Tab Separated Values)
-- JSON
 
 ### Required Fields
 Your data file must include the following fields:
diff --git a/src/App.tsx b/src/App.tsx
@@ -24,28 +24,19 @@ function App() {
     // State to toggle whether self-loops (transitions back to the same node) should be included
     const [selfLoops, setSelfLoops] = useState<boolean>(true);
     // State to manage the minimum number of visits for displaying edges in the graph
-    const [minVisits, setMinVisits] = useState<number>(0);
+    const [minVisitsPercentage, setMinVisitsPercentage] = useState<number>(0);
     const { resetData, loading, error, top5Sequences, setSelectedSequence, selectedSequence, csvData, setCSVData } = useContext(Context);
+    const [maxEdgeCount, setMaxEdgeCount] = useState<number>(100); // Default value
+
     const showControls = useMemo(() => {
         return !loading && csvData.length > 0;
-
     }, [loading, csvData]);
 
-
     const handleSelectSequence = (selectedSequence: SequenceCount["sequence"]) => {
-        console.log("SS: ", top5Sequences, selectedSequence);
-
         if (top5Sequences) {
-            // Update the selected sequence in the context
             setSelectedSequence(selectedSequence);
-            console.log(`Selected sequence: ${selectedSequence}`);
         }
-
     };
-    // TODO: Implement error handling
-    // const handleError = (errorMessage: string) => {
-    //     setError(errorMessage);
-    // }
 
     /**
      * Toggles the self-loops inclusion in the graph by switching the state.
@@ -57,7 +48,9 @@ function App() {
      *
      * @param {number} value - The new value for minimum visits.
      */
-    const handleSlider = (value: number) => setMinVisits(value);
+    const handleSlider = (value: number) => {
+        setMinVisitsPercentage(value);
+    };
 
     /**
      * Updates the `csvData` state with the uploaded CSV data when the file is processed.
@@ -66,6 +59,9 @@ function App() {
      */
     const handleDataProcessed = (uploadedCsvData: string) => setCSVData(uploadedCsvData);
 
+    // Calculate actual min visits from percentage
+    const minVisits = Math.round((minVisitsPercentage / 100) * maxEdgeCount);
+
     /**
      * Updates the loading state when the file upload or processing begins or ends.
      *
@@ -143,11 +139,12 @@ function App() {
                                         <div className="space-y-2">
                                             <label className="text-sm font-medium text-gray-700">Edge Visits</label>
                                             <Slider
-                                                step={5}
+                                                step={1}
                                                 min={0}
-                                                max={5000}
-                                                value={minVisits}
+                                                max={100}
+                                                value={minVisitsPercentage}
                                                 onChange={handleSlider}
+                                                maxEdgeCount={maxEdgeCount}
                                             />
                                         </div>
                                     </div>
@@ -167,6 +164,7 @@ function App() {
                                             filter={filter}
                                             selfLoops={selfLoops}
                                             minVisits={minVisits}
+                                            onMaxEdgeCountChange={setMaxEdgeCount}
                                         />
                                     </div>
                                 </div>
diff --git a/src/components/GraphvizParent.tsx b/src/components/GraphvizParent.tsx
@@ -19,13 +19,15 @@ interface GraphvizParentProps {
     filter: string | null;
     selfLoops: boolean;
     minVisits: number;
+    onMaxEdgeCountChange: (count: number) => void;
 }
 
 const GraphvizParent: React.FC<GraphvizParentProps> = ({
     csvData,
     filter,
     selfLoops,
     minVisits,
+    onMaxEdgeCountChange
 }) => {
     const [dotString, setDotString] = useState<string | null>(null);
     const [filteredDotString, setFilteredDotString] = useState<string | null>(null);
@@ -52,6 +54,9 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                 topSequences
             } = countEdges(stepSequences, outcomeSequences);
 
+            // Update the maxEdgeCount in the parent component
+            onMaxEdgeCountChange(maxEdgeCount);
+
             if (JSON.stringify(top5Sequences) !== JSON.stringify(topSequences) || top5Sequences === null) {
                 setTop5Sequences(topSequences);
                 if (topSequences && selectedSequence === undefined) {
@@ -89,7 +94,7 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                 )
             );
         }
-    }, [csvData, selfLoops, minVisits, selectedSequence, setTop5Sequences, top5Sequences]);
+    }, [csvData, selfLoops, minVisits, selectedSequence, setTop5Sequences, top5Sequences, onMaxEdgeCountChange]);
 
     useEffect(() => {
         if (filter) {
diff --git a/src/components/GraphvizProcessing.ts b/src/components/GraphvizProcessing.ts
@@ -170,35 +170,47 @@ export const countEdges = (
     edgeOutcomeCounts: { [p: string]: { [p: string]: number } };
     maxEdgeCount: number;
     ratioEdges: { [p: string]: number };
-    edgeCounts: { [p: string]: number };
+    edgeCounts: { [key: string]: number };
     topSequences: SequenceCount[];
 } => {
     const totalNodeEdges: { [key: string]: number } = {};
     const edgeOutcomeCounts: { [key: string]: { [outcome: string]: number } } = {};
     let maxEdgeCount = 0;
     const ratioEdges: { [key: string]: number } = {};
     const edgeCounts: { [key: string]: number } = {};
+    const studentEdgeCounts: { [key: string]: Set<string> } = {}; // Track unique students per edge
     const top5Sequences = getTopSequences(stepSequences, 5);
 
-    // Iterate over first-level keys (e.g., student ID, problem, etc.)
+    // Iterate over first-level keys (student IDs)
     Object.keys(stepSequences).forEach((studentId) => {
-        const innerStepSequences = stepSequences[studentId]; // { [key: string]: string[] }
-        const innerOutcomeSequences = outcomeSequences[studentId] || {}; // Handle missing outcome sequences
+        const innerStepSequences = stepSequences[studentId];
+        const innerOutcomeSequences = outcomeSequences[studentId] || {};
 
-        // Iterate over second-level keys (actual step sequences)
+        // Iterate over second-level keys (problem names)
         Object.keys(innerStepSequences).forEach((problemName) => {
-            const steps = innerStepSequences[problemName]; // string[]
-            const outcomes = innerOutcomeSequences[problemName] || []; // string[] (fallback to empty array)
+            const steps = innerStepSequences[problemName];
+            const outcomes = innerOutcomeSequences[problemName] || [];
 
-            if (steps.length < 2) return; // Ignore sequences with < 2 steps
+            if (steps.length < 2) return;
 
             for (let i = 0; i < steps.length - 1; i++) {
                 const currentStep = steps[i];
                 const nextStep = steps[i + 1];
                 const outcome = outcomes[i + 1];
 
                 const edgeKey = `${currentStep}->${nextStep}`;
-                edgeCounts[edgeKey] = (edgeCounts[edgeKey] || 0) + 1;
+                
+                // Initialize the Set for this edge if it doesn't exist
+                if (!studentEdgeCounts[edgeKey]) {
+                    studentEdgeCounts[edgeKey] = new Set();
+                }
+                
+                // Add this student to the Set for this edge
+                studentEdgeCounts[edgeKey].add(studentId);
+                
+                // Update edge counts based on unique students
+                edgeCounts[edgeKey] = studentEdgeCounts[edgeKey].size;
+                
                 edgeOutcomeCounts[edgeKey] = edgeOutcomeCounts[edgeKey] || {};
                 edgeOutcomeCounts[edgeKey][outcome] = (edgeOutcomeCounts[edgeKey][outcome] || 0) + 1;
                 totalNodeEdges[currentStep] = (totalNodeEdges[currentStep] || 0) + 1;
@@ -213,7 +225,7 @@ export const countEdges = (
     // Compute ratioEdges based on totalNodeEdges
     Object.keys(edgeCounts).forEach((edge) => {
         const [start] = edge.split('->');
-        ratioEdges[edge] = edgeCounts[edge] / (totalNodeEdges[start] || 1); // Avoid division by zero
+        ratioEdges[edge] = edgeCounts[edge] / (totalNodeEdges[start] || 1);
     });
 
     return {
@@ -377,8 +389,8 @@ function calculateEdgeColors(outcomes: { [outcome: string]: number }): string {
 
             if (edgeCount > min_visits) {
                 const tooltip = `${currentStep} to ${nextStep}\n`
-                    + `- Edge Count: \n\t\t ${edgeCount}\n`
-                    + `- Total Count for ${currentStep}: \n\t\t${totalCount}\n`
+                    + `- Unique Students: \n\t\t ${edgeCount}\n`
+                    + `- Total Students at ${currentStep}: \n\t\t${totalNodeEdges[currentStep] || 0}\n`
                     + `- Ratio: \n\t\t${((ratioEdges[edgeKey] || 0) * 100).toFixed(2)}% of students at ${currentStep} go to ${nextStep}\n`
                     + `- Outcomes: \n\t\t ${Object.entries(outcomes).map(([outcome, count]) => `${outcome}: ${count}`).join('\n\t\t ')}\n`
                     + `- Color Codes: \n\t\t Hex: ${color}`;
@@ -411,8 +423,8 @@ function calculateEdgeColors(outcomes: { [outcome: string]: number }): string {
 
                 if (edgeCount > min_visits) {
                     const tooltip = `${currentStep} to ${nextStep}\n`
-                        + `- Edge Count: \n\t\t ${edgeCount}\n`
-                        + `- Total Count for ${currentStep}: \n\t\t${totalCount}\n`
+                        + `- Unique Students: \n\t\t ${edgeCount}\n`
+                        + `- Total Students at ${currentStep}: \n\t\t${totalNodeEdges[currentStep] || 0}\n`
                         + `- Ratio: \n\t\t${((ratioEdges[edge] || 0) * 100).toFixed(2)}% of students at ${currentStep} go to ${nextStep}\n`
                         + `- Outcomes: \n\t\t ${outcomesStr}\n`
                         + `- Color Codes: \n\t\t Hex: ${color}\n\t\t RGB: ${[parseInt(color.substring(1, 3), 16), parseInt(color.substring(3, 5), 16), parseInt(color.substring(5, 7), 16)]}`;
diff --git a/src/components/slider.tsx b/src/components/slider.tsx
@@ -6,9 +6,10 @@ interface SliderProps {
     step?: number;
     value: number;
     onChange: (value: number) => void;
+    maxEdgeCount?: number;
 }
 
-const Slider: React.FC<SliderProps> = ({min, max, step = 1, value, onChange}) => {
+const Slider: React.FC<SliderProps> = ({min, max, step = 1, value, onChange, maxEdgeCount = 100}) => {
     const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         const newValue = Number(event.target.value);
         onChange(newValue);
@@ -21,10 +22,13 @@ const Slider: React.FC<SliderProps> = ({min, max, step = 1, value, onChange}) =>
         }
     };
 
+    // Calculate actual number of students from percentage
+    const actualStudents = Math.round((value / 100) * maxEdgeCount);
+
     return (
         <div className="space-y-2">
         <label className="block text-sm font-medium text-gray-700">
-            Minimum Edge Visits: {value}
+            Minimum Edge Visits: {value}% ({actualStudents} students)
         </label>
         <div className="flex items-center space-x-4">
             <input
