feat: enhance minimum visits configuration and add edge count calculation

- Introduced a new input field for setting the minimum number of students required for edge visibility, allowing for more precise control over graph display.
- Updated the App component to calculate the minimum visits percentage based on the new input and maximum edge count.
- Added a new function, calculateMaxMinEdgeCount, to determine the minimum number of students on any edge in the selected sequence.
- Modified GraphvizParent to handle the new maximum minimum edge count and update the parent component accordingly.

These changes improve the configurability of the graph visualization and provide users with better insights into the data.

Author: tzacks-cl

src/App.tsx

@@ -1,5 +1,5 @@
 import './App.css';
-import { useContext, useMemo, useState } from 'react';
+import { useContext, useMemo, useState, useEffect } from 'react';
 import { Button } from './components/ui/button';
 import Upload from "@/components/Upload.tsx";
 import GraphvizParent from "@/components/GraphvizParent.tsx";
@@ -13,6 +13,7 @@ import {
     PopoverContent,
     PopoverTrigger,
 } from "@/components/ui/popover"
+import { Input } from "@/components/ui/input"
 
 import Loading from './components/Loading.tsx';
 
@@ -24,9 +25,18 @@ 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 [minVisitsPercentage, setMinVisitsPercentage] = useState<number>(10);
+    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 [maxMinEdgeCount, setMaxMinEdgeCount] = useState<number>(0);
+
+    // Update minVisitsPercentage when maxMinEdgeCount changes
+    useEffect(() => {
+        if (maxMinEdgeCount > 0) {
+            const percentage = ((maxMinEdgeCount - 1) / maxEdgeCount) * 100;
+            setMinVisitsPercentage(Math.max(0, Math.min(100, percentage)));
+        }
+    }, [maxMinEdgeCount, maxEdgeCount]);
 
     const showControls = useMemo(() => {
         return !loading && csvData.length > 0;
@@ -62,6 +72,19 @@ function App() {
     // Calculate actual min visits from percentage
     const minVisits = Math.round((minVisitsPercentage / 100) * maxEdgeCount);
 
+    /**
+     * Updates the minimum visits percentage when the input value changes.
+     *
+     * @param {string} value - The new value from the input.
+     */
+    const handleInputChange = (value: string) => {
+        const numValue = parseInt(value);
+        if (!isNaN(numValue)) {
+            const percentage = Math.min(100, Math.max(0, (numValue / maxEdgeCount) * 100));
+            setMinVisitsPercentage(percentage);
+        }
+    };
+
     /**
      * Updates the loading state when the file upload or processing begins or ends.
      *
@@ -137,15 +160,42 @@ function App() {
                                         </div>
 
                                         <div className="space-y-2">
-                                            <label className="text-sm font-medium text-gray-700">Edge Visits</label>
-                                            <Slider
-                                                step={1}
-                                                min={0}
-                                                max={100}
-                                                value={minVisitsPercentage}
-                                                onChange={handleSlider}
-                                                maxEdgeCount={maxEdgeCount}
-                                            />
+                                            <label className="text-sm font-medium text-gray-700">Minimum Students</label>
+                                            <div className="space-y-4">
+                                                <div>
+                                                    <div className="flex justify-between mb-1">
+                                                        {/* <span className="text-sm text-gray-500">Percentage</span>
+                                                        <span className="text-sm text-gray-500">{minVisitsPercentage}%</span> */}
+                                                    </div>
+                                                    <div className="flex items-center gap-2">
+                                                        <Slider
+                                                            step={1}
+                                                            min={0}
+                                                            max={100}
+                                                            value={minVisitsPercentage}
+                                                            onChange={handleSlider}
+                                                            maxEdgeCount={maxEdgeCount}
+                                                        />
+                                                        <span className="text-sm text-gray-500">%</span>
+                                                    </div>
+                                                </div>
+                                                <div>
+                                                    <div className="flex justify-between mb-1">
+                                                        <span className="text-sm text-gray-500">Students</span>
+                                                    </div>
+                                                    <Input
+                                                        type="number"
+                                                        value={minVisits}
+                                                        onChange={(e) => handleInputChange(e.target.value)}
+                                                        className="w-full"
+                                                        min={0}
+                                                        max={maxEdgeCount}
+                                                    />
+                                                </div>
+                                            </div>
+                                            <p className="text-xs text-gray-500">
+                                                Maximum threshold before any node becomes disconnected: {maxMinEdgeCount} students
+                                            </p>
                                         </div>
                                     </div>
                                 </div>
@@ -165,6 +215,7 @@ function App() {
                                             selfLoops={selfLoops}
                                             minVisits={minVisits}
                                             onMaxEdgeCountChange={setMaxEdgeCount}
+                                            onMaxMinEdgeCountChange={setMaxMinEdgeCount}
                                         />
                                     </div>
                                 </div>

src/Context.tsx

@@ -11,19 +11,29 @@ interface ContextInterface {
 
     loading: boolean;
     top5Sequences: SequenceCount[] | null;
+    f3L3: boolean;
     selectedSequence: string[] | undefined; // string[] or SequenceCount[].sequence?
     setLoading: (loading: boolean) => void;
     setData: (data: GlobalDataType[] | null) => void;
+    setF3L3: (f3L3: boolean) => void;
     setGraphData: (graphData: GraphData | null) => void;
     setTop5Sequences: (top5Sequences: SequenceCount[] | null) => void;
     setSelectedSequence: (selectedSequence: string[] | undefined) => void;
-
     setCSVData: (csvData: string) => void;
 
     resetData: () => void;
 
 }
-
+export interface CSVRow {
+    'Session Id'?: string;
+    'Time': string;
+    'Step Name': string;
+    'Outcome': string;
+    'CF (Workspace Progress Status)': string;
+    'Problem Name': string;
+    'Anon Student Id': string;
+    'first or last'?: string;
+}
 export interface SequenceCount {
     sequence: string[] | undefined;
     count: number;//| null;
@@ -37,6 +47,7 @@ const initialState = {
     top5Sequences: null,
     selectedSequence: undefined,
     csvData:'',
+    f3L3: false,
 }
 
 interface ProviderProps {
@@ -51,9 +62,10 @@ export const Provider = ({children}: ProviderProps) => {
     const [error, setError] = useState<string | null>(null)
 
     const [csvData, setCSVData] = useState<string>(initialState.csvData)
-
-
-    // const queryClient = useQueryClient();
+    const [top5Sequences, setTop5Sequences] = useState<SequenceCount[] | null>(initialState.top5Sequences)
+    const [selectedSequence, setSelectedSequence] = useState<SequenceCount["sequence"] | undefined>(initialState.selectedSequence);
+    const [f3L3, setF3L3] = useState<boolean | null>(initialState.f3L3)
+   // const queryClient = useQueryClient();
 
     // const { data: uploadedData } = useQuery<GlobalDataType[]>({
     //     queryKey: ['uploadedData'],
@@ -68,9 +80,6 @@ export const Provider = ({children}: ProviderProps) => {
     //     },
     // });
 
-    const [top5Sequences, setTop5Sequences] = useState<SequenceCount[] | null>(initialState.top5Sequences)
-    const [selectedSequence, setSelectedSequence] = useState<SequenceCount["sequence"] | undefined>(initialState.selectedSequence);
-
     const resetData = () => {
         setData(null)
         setCSVData('')
@@ -95,11 +104,13 @@ export const Provider = ({children}: ProviderProps) => {
                 setError,
                 setLoading,
                 setData,
+                f3L3,
                 setGraphData,
                 setTop5Sequences,
                 setSelectedSequence,
                 setCSVData,
                 resetData,
+                setF3L3
             }}
         >
             {children}

src/components/GraphvizParent.tsx

@@ -7,7 +7,8 @@ import {
     countEdges,
     createStepSequences,
     createOutcomeSequences,
-    loadAndSortData
+    loadAndSortData,
+    calculateMaxMinEdgeCount
 } from './GraphvizProcessing';
 import ErrorBoundary from "@/components/errorBoundary.tsx";
 import '../GraphvizContainer.css';
@@ -20,14 +21,16 @@ interface GraphvizParentProps {
     selfLoops: boolean;
     minVisits: number;
     onMaxEdgeCountChange: (count: number) => void;
+    onMaxMinEdgeCountChange: (count: number) => void;
 }
 
 const GraphvizParent: React.FC<GraphvizParentProps> = ({
     csvData,
     filter,
     selfLoops,
     minVisits,
-    onMaxEdgeCountChange
+    onMaxEdgeCountChange,
+    onMaxMinEdgeCountChange
 }) => {
     const [dotString, setDotString] = useState<string | null>(null);
     const [filteredDotString, setFilteredDotString] = useState<string | null>(null);
@@ -58,11 +61,18 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
 
             // Update the maxEdgeCount in the parent component
             onMaxEdgeCountChange(maxEdgeCount);
+            
+            // Calculate and update the maximum minimum-edge count
+            const sequenceToUse = selectedSequence || topSequences[0]?.sequence;
+            if (sequenceToUse) {
+                const maxMinEdgeCount = calculateMaxMinEdgeCount(edgeCounts, sequenceToUse);
+                onMaxMinEdgeCountChange(maxMinEdgeCount);
+            }
 
             if (JSON.stringify(top5Sequences) !== JSON.stringify(topSequences) || top5Sequences === null) {
                 setTop5Sequences(topSequences);
                 if (topSequences && selectedSequence === undefined) {
-                    setSelectedSequence(topSequences![0].sequence);
+                    setSelectedSequence(topSequences[0].sequence);
                 }
             }
 
@@ -77,7 +87,7 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                     totalNodeEdges,
                     1,
                     minVisits,
-                    selectedSequence,
+                    selectedSequence || topSequences[0].sequence,
                     false,
                     totalVisits,
                     repeatVisits
@@ -93,14 +103,14 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
                     totalNodeEdges,
                     1,
                     minVisits,
-                    selectedSequence,
+                    selectedSequence || topSequences[0].sequence,
                     true,
                     totalVisits,
                     repeatVisits
                 )
             );
         }
-    }, [csvData, selfLoops, minVisits, selectedSequence, setTop5Sequences, top5Sequences, onMaxEdgeCountChange]);
+    }, [csvData, selfLoops, minVisits, selectedSequence, setTop5Sequences, top5Sequences, onMaxEdgeCountChange, onMaxMinEdgeCountChange]);
 
     useEffect(() => {
         if (filter) {

src/components/GraphvizProcessing.ts

@@ -486,4 +486,43 @@ export function generateDotString(
 
     dotString += '}';
     return dotString;
+}
+
+/**
+ * Calculates the minimum number of students on any edge in the selected sequence.
+ * This is the smallest number of unique students that traverse any edge in the sequence.
+ * @param edgeCounts - Dictionary mapping edge keys to the number of unique students
+ * @param selectedSequence - The selected sequence of steps
+ * @returns The minimum number of students on any edge in the sequence
+ */
+export function calculateMaxMinEdgeCount(
+    edgeCounts: { [key: string]: number },
+    selectedSequence: string[]
+): number {
+    if (!selectedSequence || selectedSequence.length < 2) {
+        console.log("No valid sequence provided");
+        return 0;
+    }
+
+    let minStudentCount = Infinity;
+    console.log("Edge counts:", edgeCounts);
+    console.log("Selected sequence:", selectedSequence);
+
+    // Check each edge in the sequence
+    for (let i = 0; i < selectedSequence.length - 1; i++) {
+        const currentStep = selectedSequence[i];
+        const nextStep = selectedSequence[i + 1];
+        const edgeKey = `${currentStep}->${nextStep}`;
+        
+        // Get the number of unique students on this edge
+        const studentCount = edgeCounts[edgeKey] || 0;
+        console.log(`Edge ${edgeKey}: ${studentCount} students`);
+        
+        if (studentCount < minStudentCount) {
+            minStudentCount = studentCount;
+        }
+    }
+
+    console.log("Final min student count:", minStudentCount);
+    return minStudentCount === Infinity ? 0 : minStudentCount;
 }

src/components/slider.tsx

@@ -28,7 +28,7 @@ const Slider: React.FC<SliderProps> = ({min, max, step = 1, value, onChange, max
     return (
         <div className="space-y-2">
         <label className="block text-sm font-medium text-gray-700">
-            Minimum Edge Visits: {value}% ({actualStudents} students)
+            Minimum Students: {actualStudents} ({value.toFixed(2)}% of {maxEdgeCount})
         </label>
         <div className="flex items-center space-x-4">
             <input