React Polar Heatmap | B-Mode Image Ultrasound | Medical Heatmap

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    PolarNumericAxis,
6    SciChartPolarSurface,
7    EPolarAxisMode, 
8    EAxisAlignment, 
9    HeatmapColorMap,
10    UniformHeatmapDataSeries,
11    PolarUniformHeatmapRenderableSeries,
12    LineArrowAnnotation,
13    EArrowHeadPosition,
14} from "scichart";
15import { appTheme } from "../../../theme";
16
17const FETAL_DATA_PATH = "heatmap_data.csv";
18
19async function parseCSV(): Promise<number[][]> {
20    const fileData = await fetch(FETAL_DATA_PATH);
21    const rows = (await fileData.text()).split("\n");
22
23    const zValues = rows.map(row => {
24        return row.split(",")
25            // from base 16 to decimal value
26            .map(value => parseInt(value, 16))
27    });
28
29    return zValues;
30}
31
32export const drawExample = async (rootElement: string | HTMLDivElement) => {
33    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
34        theme: appTheme.SciChartJsTheme,
35        title: "Fetal ultrasound at 31 weeks",
36        titleStyle: {
37            fontSize: 32
38        }
39    });
40
41    const angularAxisX = new PolarNumericAxis(wasmContext, {
42        polarAxisMode: EPolarAxisMode.Angular,
43        axisAlignment: EAxisAlignment.Top,
44        useNativeText: false,
45        labelPrecision: 0,
46        drawMajorBands: false,
47        drawMajorGridLines: false,
48        drawMinorGridLines: false,
49        totalAngle: Math.PI / 3,
50        startAngle: (Math.PI * 3 / 2) - (Math.PI / 6), 
51        // (start at 270deg) - (half of totalAngle) = 240deg
52        // could be simplified to `Math.PI * 4 / 3`
53    });
54    sciChartSurface.xAxes.add(angularAxisX);
55
56    const radialAxisY = new PolarNumericAxis(wasmContext, {
57        polarAxisMode: EPolarAxisMode.Radial,
58        axisAlignment: EAxisAlignment.Left,
59        useNativeText: false,
60        labelPrecision: 0,
61        drawMajorBands: false,
62        drawMajorGridLines: false,
63        drawMinorGridLines: false,
64        innerRadius: 0.4,
65        startAngle: Math.PI * 3 / 2 - Math.PI / 6, 
66    });
67    sciChartSurface.yAxes.add(radialAxisY);
68
69    // Heatmap
70    const heatmapSeries = new PolarUniformHeatmapRenderableSeries(wasmContext, {
71        opacity: 0.8,
72        dataSeries: new UniformHeatmapDataSeries(wasmContext, {
73            xStart: 0,
74            xStep: 1,
75            yStart: 0,
76            yStep: 1,
77            zValues: await parseCSV()
78        }),
79        colorMap: new HeatmapColorMap({
80            minimum: 0,
81            maximum: 255,
82            gradientStops: [
83                { offset: 0, color: "transparent" },
84                { offset: 1, color: "white" }
85            ]
86        })
87    });
88    sciChartSurface.renderableSeries.add(heatmapSeries);
89
90    // Optional Annotations
91    const headLine = new LineArrowAnnotation({
92        x1: 165.9,
93        y1: 74.5,
94        x2: 219.2,
95        y2: 136.5,
96        stroke: "white",
97        strokeThickness: 2,
98        arrowHeadPosition: EArrowHeadPosition.StartEnd,
99        arrowStyle: {
100            headWidth: 18,
101            headLength: 14
102        },
103        isEditable: true,
104        // strokeDashArray: [6, 30],
105        // labelValue: "Head diameter",
106        // axisLabelFill: appTheme.VividTeal,
107        // labelPlacement: ELabelPlacement.Auto,
108    });
109    const femurLine = new LineArrowAnnotation({
110        x1: 61, 
111        y1: 166,
112        x2: 82,
113        y2: 127,
114        stroke: "white",
115        strokeThickness: 2,
116        arrowHeadPosition: EArrowHeadPosition.StartEnd,
117        arrowStyle: {
118            headWidth: 10
119        },
120        // strokeDashArray: [6, 30],
121        // labelValue: "Head diameter",
122        // axisLabelFill: appTheme.VividTeal,
123        // labelPlacement: ELabelPlacement.Auto,
124    });
125    sciChartSurface.annotations.add(
126        headLine, 
127        femurLine
128    );
129
130    sciChartSurface.chartModifiers.add(
131        new PolarMouseWheelZoomModifier(),
132        new PolarZoomExtentsModifier(),
133        new PolarPanModifier()
134    );
135
136    return { sciChartSurface, wasmContext };
137};