heatmap wip

Author: devhelpr

src/assets/synthetic-data.tsx

@@ -165,6 +165,13 @@ def run():
         {'type': 'heading', 'data': 'Output file:'}
     ))
     setResult(json.dumps({'type': 'table', 'data': synthetic_data.to_json(orient="records")}))
+
+    np.random.seed(42)
+    heatmap = np.random.rand(100, 10)
+
+    # Compute the correlation matrix
+    correlation_matrix = np.corrcoef(heatmap, rowvar=False)
+    setResult(json.dumps({'type': 'heatmap', 'data': correlation_matrix.tolist()}))
     return 
     
 

src/components/componentMapper.tsx

@@ -8,6 +8,7 @@ import { CSVData } from './bias-detection-interfaces/csv-data';
 import { Fragment } from 'react/jsx-runtime';
 import { Accordion } from './ui/accordion';
 import { useTranslation } from 'react-i18next';
+import HeatMapChart from './graphs/HeatMap';
 
 const createArrayFromPythonDictionary = (dict: Record<string, number>) => {
     const resultArray = [];
@@ -127,6 +128,25 @@ export default function ComponentMapper({
                             </ErrorBoundary>
                         );
                     }
+                    case 'heatmap': {
+                        console.log('heatmap data', resultItem.data);
+                        /*
+                            Array in Array
+
+                            [
+                                [1,2,3],
+                                [4,5,6],
+                                [7,8,9]
+                            ]
+                        */
+                        return (
+                            <HeatMapChart
+                                key={index}
+                                data={resultItem.data}
+                                title={resultItem.title ?? ''}
+                            />
+                        );
+                    }
                     case 'barchart': {
                         const barchartData = JSON.parse(resultItem.data)?.map(
                             (x: Record<string, number>, index: number) => {

src/components/graphs/HeatMap.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useRef, useState } from 'react';
+import * as d3 from 'd3';
+
+interface HeatMapChartProps {
+    title: string;
+    data: number[][];
+}
+
+// Define margins for the chart
+const margin = { top: 10, right: 50, bottom: 40, left: 50 };
+// Define height for the chart, adjusting for margins
+const height = 300 - margin.top - margin.bottom;
+
+// Define width of bars and adjust for screenwidth
+const barWidth = 0.05 * window.innerWidth < 40 ? 40 : 0.05 * window.innerWidth;
+const barGap = 5;
+
+const HeatMapChart = ({ title, data }: HeatMapChartProps) => {
+    const svgRef = useRef<SVGSVGElement>(null); // Reference to the SVG element
+    const containerRef = useRef<HTMLDivElement>(null); // Reference to the container div
+    const [containerWidth, setContainerWidth] = useState(800); // Default container width
+
+    useEffect(() => {
+        // Clear any previous SVG content to avoid overlapping elements
+        d3.select(svgRef.current).selectAll('*').remove();
+
+        // Create the SVG container and set its dimensions
+        const svg = d3
+            .select(svgRef.current)
+            .attr('class', `min-h-[${height}px]`)
+            .attr(
+                'width',
+                Math.max(
+                    containerWidth,
+                    margin.left + data.length * (barWidth + barGap)
+                )
+            )
+            .attr(
+                'height',
+                data.length * (barWidth + barGap) + margin.top + margin.bottom
+            )
+            .append('g')
+            .attr('transform', `translate(${margin.left},${margin.top})`);
+
+        svg.append('defs')
+            .append('style')
+            .attr('type', 'text/css')
+            .text(
+                "@import url('https://fonts.googleapis.com/css2?family=Avenir:wght@600');"
+            );
+
+        const colorScale = d3
+            .scaleSequential()
+            .domain([-1, 1])
+            .interpolator(d3.interpolateBlues);
+        data.forEach((dataRow, rowIndex) => {
+            dataRow.forEach((dataCell, cellIndex) => {
+                svg.append('rect')
+                    .attr('x', cellIndex * barWidth)
+                    .attr('y', rowIndex * barWidth)
+                    .attr('width', barWidth)
+                    .attr('height', barWidth)
+                    .style('fill', function () {
+                        return colorScale(dataCell);
+                    });
+            });
+        });
+    }, [data, title, containerWidth]);
+
+    useEffect(() => {
+        // Set up the ResizeObserver to track changes in the container's size
+        const resizeObserver = new ResizeObserver(entries => {
+            if (!entries || entries.length === 0) return;
+            const { width } = entries[0].contentRect;
+            setContainerWidth(width); // Update the state with the new container width
+        });
+
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current); // Start observing the container
+        }
+
+        return () => {
+            if (containerRef.current) {
+                resizeObserver.unobserve(containerRef.current); // Cleanup on component unmount
+            }
+        };
+    }, []);
+
+    // Render the chart container and SVG element with horizontal scroll if needed
+    return (
+        <div
+            ref={containerRef}
+            style={{ width: '100%', display: 'flex', overflowX: 'auto' }}
+            className={`min-h-[${height}px] flex-col`}
+        >
+            <svg ref={svgRef}></svg>
+        </div>
+    );
+};
+
+export default HeatMapChart;