Fix: plot dimensions in Correlation heatmap, Parallel coordinates, sc…

…atter plot nodes
mahesh-gfx · Sep 7, 2024 · fe97410 · fe97410
1 parent 20af37b
commit fe97410
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 22 deletions.
diff --git a/packages/frontend/src/components/nodes/CorrelationHeatmapNode.tsx b/packages/frontend/src/components/nodes/CorrelationHeatmapNode.tsx
@@ -48,16 +48,16 @@ const CorrelationHeatmap = ({ id, data, def, type }: any) => {
     renderCorrelationHeatmap(
       data.output?.data?.json,
       miniChartRef.current,
-      600,
-      600
+      550,
+      550
     );
   };
   const renderExpandedChart = () => {
     renderCorrelationHeatmap(
       data.output?.data?.json,
       expandedChartRef.current,
-      600,
-      600
+      550,
+      550
     );
   };
 
@@ -215,8 +215,6 @@ const CorrelationHeatmap = ({ id, data, def, type }: any) => {
             bottom: "auto",
             marginRight: "-50%",
             transform: "translate(-50%, -50%)",
-            width: "600px",
-            height: "600px",
             display: "flex",
             flexDirection: "column",
             borderRadius: "8px",

diff --git a/packages/frontend/src/components/nodes/ParallelCoordinatesNode.tsx b/packages/frontend/src/components/nodes/ParallelCoordinatesNode.tsx
@@ -53,8 +53,8 @@ const ParallelCoordinates = ({ id, data, def, type }: any) => {
       data.properties?.variables,
       data.properties?.colorBy,
       miniChartRef.current,
-      600,
-      600
+      550,
+      550
     );
   };
   const renderExpandedChart = () => {
@@ -63,8 +63,8 @@ const ParallelCoordinates = ({ id, data, def, type }: any) => {
       data.properties?.variables,
       data.properties?.colorBy,
       expandedChartRef.current,
-      600,
-      600
+      550,
+      550
     );
   };
 
@@ -78,7 +78,7 @@ const ParallelCoordinates = ({ id, data, def, type }: any) => {
   ) => {
     d3.select(container).selectAll("*").remove();
 
-    const margin = { top: 30, right: 10, bottom: 10, left: 10 };
+    const margin = { top: 30, right: 2, bottom: 10, left: 2 };
     const width = renderWidth - margin.left - margin.right;
     const height = renderHeight - margin.top - margin.bottom;
 
@@ -192,8 +192,6 @@ const ParallelCoordinates = ({ id, data, def, type }: any) => {
             bottom: "auto",
             marginRight: "-50%",
             transform: "translate(-50%, -50%)",
-            width: "600px",
-            height: "600px",
             display: "flex",
             flexDirection: "column",
             borderRadius: "8px",

diff --git a/packages/frontend/src/components/nodes/ScatterPlotMatrixNode.tsx b/packages/frontend/src/components/nodes/ScatterPlotMatrixNode.tsx
@@ -65,7 +65,7 @@ const ScatterPlotMatrixNode = ({ id, data, def, type }: any) => {
     // Clear previous SVG
     d3.select(container).selectAll("*").remove();
 
-    const size = 200; // Size of each scatter plot
+    // const size = 200; // Size of each scatter plot
     const padding = 20; // Padding between plots
 
     // Determine variables to use
@@ -80,6 +80,12 @@ const ScatterPlotMatrixNode = ({ id, data, def, type }: any) => {
     const varsToUse =
       variablesArray.length > 0 ? variablesArray : Object.keys(data[0]);
 
+    // Calculate size dynamically based on renderWidth and renderHeight
+    const size = Math.min(
+      (renderWidth - padding * (varsToUse.length - 1)) / varsToUse.length,
+      (renderHeight - padding * (varsToUse.length - 1)) / varsToUse.length
+    );
+
     // Adjust margins for smaller containers
     const margin = { top: 10, right: 10, bottom: 30, left: 30 };
     const width = renderWidth - margin.left - margin.right;
@@ -143,7 +149,7 @@ const ScatterPlotMatrixNode = ({ id, data, def, type }: any) => {
           .append("circle")
           .attr("cx", (d: any) => x(d[xVar]))
           .attr("cy", (d: any) => y(d[yVar]))
-          .attr("r", 3)
+          .attr("r", 2)
           .attr("fill", (d: any) => color(d[colorBy]))
           .on("mouseover", function (event, d) {
             tooltip
@@ -166,7 +172,7 @@ const ScatterPlotMatrixNode = ({ id, data, def, type }: any) => {
           g.append("text")
             .attr("x", size / 2)
             .attr("y", size / 2)
-            .attr("dy", ".35em")
+            .attr("dy", ".05em")
             .attr("text-anchor", "middle")
             .text(xVar);
         }
@@ -180,8 +186,8 @@ const ScatterPlotMatrixNode = ({ id, data, def, type }: any) => {
       data.properties?.variables,
       data.properties?.colorBy,
       miniChartRef.current,
-      600,
-      600
+      550,
+      550
     );
   };
   const renderExpandedChart = () => {
@@ -190,8 +196,8 @@ const ScatterPlotMatrixNode = ({ id, data, def, type }: any) => {
       data.properties?.variables,
       data.properties?.colorBy,
       expandedChartRef.current,
-      600,
-      600
+      550,
+      550
     );
   };
 
@@ -236,8 +242,6 @@ const ScatterPlotMatrixNode = ({ id, data, def, type }: any) => {
             bottom: "auto",
             marginRight: "-50%",
             transform: "translate(-50%, -50%)",
-            width: "600px",
-            height: "600px",
             display: "flex",
             flexDirection: "column",
             borderRadius: "8px",