Fixed svg type error and graph size issue

Author: tzacks-cl

bun.lockb

@@ -32,7 +32,7 @@
     "@types/lodash": "^4.17.1",
     "@types/papaparse": "^5.3.14",
     "@types/timsort": "^0.3.3",
-    "caniuse-lite": "^1.0.30001688",
+    "caniuse-lite": "^1.0.30001699",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "d3": "^7.9.0",

package.json

@@ -1,5 +1,5 @@
 // React component code
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {RefObject, useContext, useEffect, useRef, useState} from 'react';
 import {graphviz} from 'd3-graphviz';
 import {
     generateDotString,
@@ -125,33 +125,7 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
             setFilteredDotString(null);
         }
     }, [csvData, filter, selfLoops, minVisits, selectedSequence]);
-
-    // Render Graphviz graphs using d3-graphviz
-    const renderGraph = (
-        dot: string | null,
-        ref: React.RefObject<HTMLDivElement>,
-        filename: string,
-        numberOfGraphs: number
-    ) => {
-        if (dot && ref.current) {
-            // Dynamically adjust width based on the number of graphs
-            const width = numberOfGraphs === 3 ? 325 : 425; // Adjust the width for 3 graphs or 2 graphs
-            const height = 530; // Fixed height (or adjust dynamically if needed)
-
-            graphviz(ref.current)
-                .width(width)
-                .height(height)
-                .renderDot(dot)
-                .on('end', () => {
-                    const svgElement = ref.current?.querySelector('svg');
-                    if (svgElement) {
-                        exportGraphAsPNG(svgElement, filename);
-                    }
-                });
-        }
-    };
-
-    // Export a graph as high-quality PNG
+// Export a graph as high-quality PNG
     const exportGraphAsPNG = (graphRef: React.RefObject<HTMLDivElement>, filename: string) => {
         if (!graphRef.current) return;
 
@@ -202,17 +176,43 @@ const GraphvizParent: React.FC<GraphvizParentProps> = ({
 
     const numberOfGraphs = [topDotString, dotString, filteredDotString].filter(Boolean).length;
 
+    // Render Graphviz graphs using d3-graphviz
+    const renderGraph = (
+        dot: string | null,
+        ref: React.RefObject<HTMLDivElement>,
+        filename: string,
+        numberOfGraphs: number
+    ) => {
+        if (dot && ref.current) {
+            // Dynamically adjust width based on the number of graphs
+            const width = numberOfGraphs === 3 ? 325 : 425; // Adjust the width for 3 graphs or 2 graphs
+            const height = 530; // Fixed height (or adjust dynamically if needed)
+
+            graphviz(ref.current)
+                .width(width)
+                .height(height)
+                .renderDot(dot)
+                .on('end', () => {
+                    const svgElement:RefObject<HTMLDivElement>|SVGSVGElement|null|undefined= ref.current?.querySelector('svg');
+                    if (svgElement) {
+                        exportGraphAsPNG(svgElement as unknown as RefObject<HTMLDivElement>, filename);
+                    }
+                });
+        }
+    };
+
+
     useEffect(() => {
         renderGraph(filteredDotString, graphRefFiltered, 'filtered_graph', numberOfGraphs);
-    }, [topDotString]);
+    }, [filteredDotString]);
 
     useEffect(() => {
         renderGraph(topDotString, graphRefTop, 'selected_sequence', numberOfGraphs);
-    }, [dotString]);
+    }, [topDotString]);
 
     useEffect(() => {
         renderGraph(dotString, graphRefMain, 'all_students', numberOfGraphs);
-    }, [filteredDotString]);
+    }, [dotString]);
 
 
 
@@ -270,4 +270,4 @@ function ExportButton({onClick, label = "Export Image"}: ExportButtonProps) {
             {label}
         </Button>
     );
-};
+}

src/components/GraphvizParent.tsx

@@ -1,5 +1,6 @@
 import Papa from 'papaparse';
 import {SequenceCount} from "@/Context";
+// import {autoType} from "d3";
 
 interface CSVRow {
     'Session Id': string;
@@ -20,7 +21,8 @@ interface CSVRow {
 export const loadAndSortData = (csvData: string): CSVRow[] => {
     const parsedData = Papa.parse<CSVRow>(csvData, {
         header: true,
-        skipEmptyLines: true
+        skipEmptyLines: true,
+        delimiter: ',',
     }).data;
 
     const transformedData = parsedData.map(row => ({