feat: Add file specifications display and fix total visits mode

  - Add file info display with formatted titles for Astra-generated files
  - Show file source (Astra App, File Upload, URL Parameter) with appropriate icons
  - Fix total visits mode: arrows now properly reflect total visit counts
  - Fix maximum minimum threshold calculation to use appropriate data source
  - Update menu text to be dynamic based on mode (Students vs Visits)
  - Enhance export button with download icon and improved styling
  - Fix filtered graph alignment by standardizing header margins
  - Remove quick workflow box from upload interface
  - Add comprehensive connectivity checking for selected sequence

  🤖 Generated with [Claude Code](https://claude.ai/code)

  Co-Authored-By: Claude <noreply@anthropic.com>

Author: tzacks-cl

src/App.tsx

@@ -18,6 +18,54 @@ import Loading from './components/Loading.tsx';
 import Switch from "./components/switch.tsx";
 import { useSearchParams } from 'react-router-dom';
 
+// Helper function to parse and format filename for display
+const formatFileTitle = (filename: string): string => {
+    // Remove file extension
+    const nameWithoutExt = filename.replace(/\.(csv|CSV)$/, '');
+    
+    // Split by hyphens and process each part
+    const parts = nameWithoutExt.split('-').map(part => {
+        // Handle specific abbreviations and terms
+        switch (part.toLowerCase()) {
+            case 'er':
+                return 'Equivalent Ratios';
+            case 'me':
+                return 'Means & Extremes';
+            case 'groundtruth':
+            case 'ground_truth':
+                return 'Ground Truth';
+            case 'successful':
+                return 'Successful';
+            case 'unsuccessful':
+                return 'Unsuccessful';
+            case 'strategies':
+                return 'Strategies';
+            case 'match':
+                return 'Match';
+            case 'allstrategies':
+            case 'all_strategies':
+                return 'All Strategies';
+            case 'astra':
+                return 'ASTRA Generated';
+            default:
+                // Capitalize first letter of each word
+                return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase();
+        }
+    });
+    
+    return parts.join(' ');
+};
+
+// Helper function to get file type icon
+const getFileTypeIcon = (filename: string): string => {
+    if (filename.includes('astra')) return '🤖'; // AI/Astra generated
+    if (filename.includes('successful')) return '✅'; // Successful strategies
+    if (filename.includes('unsuccessful')) return '❌'; // Unsuccessful strategies
+    if (filename.includes('ER')) return '🔢'; // Equivalent Ratios
+    if (filename.includes('ME')) return '✖️'; // Means & Extremes
+    return '📄'; // Default file icon
+};
+
 function App() {
     // State to hold the uploaded CSV data as a string
     // const [csvData, setCsvData] = useState<string>('');
@@ -27,6 +75,7 @@ function App() {
     const [selfLoops, setSelfLoops] = useState<boolean>(true);
     const [errorMode, setErrorMode] = useState<boolean>(false);
     const [uniqueStudentMode, setUniqueStudentMode] = useState<boolean>(false);
+    const [fileInfo, setFileInfo] = useState<{filename: string, source: string} | null>(null);
     // State to manage the minimum number of visits for displaying edges in the graph
     const [minVisitsPercentage, setMinVisitsPercentage] = useState<number>(0);
     const {
@@ -64,6 +113,10 @@ function App() {
         // Only load from URL if no CSV data is currently loaded
         if (csvData.length === 0) {
             if (csvUrl) {
+                // Extract filename from URL
+                const filename = csvUrl.split('/').pop() || 'Unknown File';
+                setFileInfo({ filename, source: 'Astra App' });
+                
                 // Fetch CSV from URL
                 fetch(csvUrl)
                     .then(response => {
@@ -77,19 +130,29 @@ function App() {
                     })
                     .catch(error => {
                         console.error('Error fetching CSV from URL:', error);
+                        setFileInfo(null); // Clear file info on error
                     });
             } else if (csvDataParam) {
                 // Use CSV data directly from URL parameter
                 try {
                     const decodedData = decodeURIComponent(csvDataParam);
+                    setFileInfo({ filename: 'URL Data', source: 'URL Parameter' });
                     handleDataProcessed(decodedData);
                 } catch (error) {
                     console.error('Error decoding CSV data from URL:', error);
+                    setFileInfo(null);
                 }
             }
         }
     }, [searchParams]);
 
+    // Clear file info when CSV data is reset
+    useEffect(() => {
+        if (csvData.length === 0) {
+            setFileInfo(null);
+        }
+    }, [csvData]);
+
     const showControls = useMemo(() => {
         return !loading && csvData.length > 0;
     }, [loading, csvData]);
@@ -128,8 +191,15 @@ function App() {
      * Updates the `csvData` state with the uploaded CSV data when the file is processed.
      *
      * @param {string} uploadedCsvData - The CSV data from the uploaded file.
+     * @param {string} filename - Optional filename for display purposes.
      */
-    const handleDataProcessed = (uploadedCsvData: string) => setCSVData(uploadedCsvData);
+    const handleDataProcessed = (uploadedCsvData: string, filename?: string) => {
+        setCSVData(uploadedCsvData);
+        // If filename is provided (from file upload), update file info
+        if (filename) {
+            setFileInfo({ filename, source: 'File Upload' });
+        }
+    };
 
     // Calculate actual min visits from percentage
     const minVisits = Math.round((minVisitsPercentage / 100) * maxEdgeCount);
@@ -162,7 +232,10 @@ function App() {
                     <div className="flex items-center space-x-4">
                         <Button
                             variant="destructive"
-                            onClick={resetData}
+                            onClick={() => {
+                                resetData();
+                                setFileInfo(null);
+                            }}
                         >
                             Reset
                         </Button>
@@ -194,6 +267,28 @@ function App() {
                                 </h2>
                             )}
                         </div>
+                        
+                        {/* File Information Display */}
+                        {fileInfo && (
+                            <div className="file-info-bar bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
+                                <div className="flex items-center gap-3">
+                                    <span className="text-2xl">{getFileTypeIcon(fileInfo.filename)}</span>
+                                    <div className="flex-1">
+                                        <h3 className="text-lg font-semibold text-blue-900">
+                                            {formatFileTitle(fileInfo.filename)}
+                                        </h3>
+                                        <div className="flex items-center gap-4 text-sm text-blue-700 mt-1">
+                                            <span className="bg-blue-100 px-2 py-1 rounded text-xs font-medium">
+                                                {fileInfo.source}
+                                            </span>
+                                            <span className="font-mono text-xs">
+                                                {fileInfo.filename}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
                         {/* Properties Button */}
                         <Popover>
                             <PopoverTrigger

src/components/DataFileSelector.tsx

@@ -13,7 +13,7 @@ interface DataFile {
 }
 
 interface DataFilesSelectorProps {
-    onDataProcessed: (csvData: string) => void;
+    onDataProcessed: (csvData: string, filename?: string) => void;
 }
 
 function DataFileSelector({ onDataProcessed }: DataFilesSelectorProps) {
@@ -133,7 +133,7 @@ function DataFileSelector({ onDataProcessed }: DataFilesSelectorProps) {
                 throw new Error('File is empty or invalid');
             }
 
-            onDataProcessed(csvData);
+            onDataProcessed(csvData, selectedFile);
 
         } catch (err) {
             setError(err instanceof Error ? err.message : 'Failed to load file');

src/components/GraphvizParent.tsx

@@ -107,8 +107,10 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
 
             // Note: edgeCounts are now used directly from mainGraphData
 
-            // Update the maxEdgeCount in the parent component
-            onMaxEdgeCountChange(maxEdgeCount);
+            // Update the maxEdgeCount in the parent component based on mode
+            const maxCountToUse = uniqueStudentMode ? maxEdgeCount : Math.max(...Object.values(totalVisits), 1);
+            console.log("GraphvizParent: Setting maxEdgeCount to:", maxCountToUse, "for mode:", uniqueStudentMode ? "unique students" : "total visits");
+            onMaxEdgeCountChange(maxCountToUse);
 
             // Calculate and update the maximum minimum-edge count
             const sequenceToUse = selectedSequence || topSequences[0]?.sequence;