@milaboratories/miplots4 1.0.176 → 1.0.178

package/dist/heatmap/components/Annotations/AnnotationCellsCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationCellsCanvas.js","sources":["../../../../src/heatmap/components/Annotations/AnnotationCellsCanvas.tsx"],"sourcesContent":["\nimport type { AnnotationColorScales, AnnotationTooltipData, ChartScales } from '../types';\nimport { ANNOTATION_WIDTH } from '../../constants';\nimport type { DataValue } from '../../../types/common';\nimport type { HeatmapSettingsImpl } from '../../HeatmapSettingsImpl';\nimport type { CellHeatmap } from '../../getCells';\nimport type { TooltipsData } from '../../../common/Tooltip';\nimport type { MouseEventHandler } from 'react';\nimport { useEffect, useRef } from 'react';\nimport { useFunction } from '../../../utils/hooks/useFunction';\n\ninterface AnnotationCellsCanvasProps {\n    facetKey: string,\n    scales: ChartScales,\n    keys: string[],\n    x: number,\n    y: number,\n    stepX: number,\n    stepY: number,\n    vertical: boolean,\n    aes: HeatmapSettingsImpl['aes'];\n    colorScale: AnnotationColorScales[keyof AnnotationColorScales],\n    data: Record<string, DataValue>;\n    annotation: HeatmapSettingsImpl['annotations'][0];\n    tooltipsData: TooltipsData<CellHeatmap | AnnotationTooltipData>;\n}\n\nfunction renderCells(\n    ctx: CanvasRenderingContext2D | null,\n    scales: ChartScales,\n    data: Record<string, DataValue>,\n    keys: string[],\n    vertical: boolean,\n    strokeColor: string,\n    colorScale: AnnotationColorScales[keyof AnnotationColorScales],\n    width: number,\n    height: number\n) {\n    if (!ctx) {\n        return;\n    }\n    ctx.beginPath(); // Start a new path\n    ctx.clearRect(0, 0, width, height);\n    for (const key of keys) {\n        const value = data?.[key];\n        const fillColor = colorScale.type === 'continuous'\n            ? colorScale.scale(Number(value))\n            : colorScale.scale(String(value));\n        const x = (vertical ? 0 : scales.x(key));\n        const y = (vertical ? scales.y(key) : 0);\n\n        ctx.fillStyle = fillColor;\n        ctx.fillRect(x, y, width, height); // Add a rectangle to the current path\n    }\n}\n\nfunction binarySearch(arr: number[], val: number, step: number) {\n    let start = 0;\n    let end = arr.length - 1;\n\n    while (start <= end) {\n        const mid = Math.floor((start + end) / 2);\n        if (Math.abs(arr[mid] - val) < step) {\n            return arr[mid] >= val ? mid - 1 : mid;\n        }\n\n        if (val < arr[mid]) {\n            end = mid - 1;\n        } else {\n            start = mid + 1;\n        }\n    }\n    return -1;\n}\nfunction searchKey(px: number, positions: number[], keys: string[], step: number) {\n    const pos = binarySearch(positions, px, step);\n    if (pos === -1) {\n        return -1;\n    }\n    return keys[pos];\n}\n\nexport function AnnotationCellsCanvas({\n    facetKey,\n    scales,\n    data,\n    keys,\n    vertical,\n    annotation,\n    x, y, stepX, stepY,\n    aes,\n    colorScale,\n    tooltipsData,\n}: AnnotationCellsCanvasProps) {\n    const { valueColumn } = annotation;\n    const cellWidth = vertical ? ANNOTATION_WIDTH : stepX;\n    const cellHeight = vertical ? stepY : ANNOTATION_WIDTH;\n    const annotationWidth = vertical ? cellWidth : cellWidth * keys.length;\n    const annotationHeight = vertical ? cellHeight * keys.length : cellHeight;\n    const canvasRef = useRef<HTMLCanvasElement | null>(null);\n    const canvasRatio = window.devicePixelRatio || 1;\n    const ctx = useRef<CanvasRenderingContext2D | null>(null);\n    const render = () => {\n        renderCells(\n            ctx.current,\n            scales,\n            data,\n            keys,\n            vertical,\n            aes.cellStrokeColor,\n            colorScale,\n            cellWidth,\n            cellHeight\n        );\n    };\n    useEffect(() => {\n        const canvasEl = canvasRef.current;\n        if (!ctx.current) {\n            ctx.current = canvasEl?.getContext('2d') ?? null;\n        }\n        if (canvasEl && ctx.current) {\n            canvasEl.style.width = annotationWidth + 'px';\n            canvasEl.style.height = annotationHeight + 'px';\n            ctx.current.scale(canvasRatio, canvasRatio);\n        }\n        render();\n    }, [annotationWidth, annotationHeight]);\n    render();\n\n    const moveOnCanvas: MouseEventHandler<HTMLCanvasElement> = useFunction((e: React.MouseEvent) => {\n        const mouseX = e.nativeEvent.offsetX;\n        const mouseY = e.nativeEvent.offsetY;\n        const key = vertical\n            ? searchKey(mouseY, scales.y.range(), scales.y.domain(), stepY)\n            : searchKey(mouseX, scales.x.range(), scales.x.domain(), stepX);\n        if (key !== -1) {\n            const innerX = (vertical ? 0 : scales.x(key));\n            const innerY = (vertical ? scales.y(key) : 0);\n            const value = data[key];\n            const fillColor = colorScale.type === 'continuous'\n                ? colorScale.scale(Number(value))\n                : colorScale.scale(String(value));\n            tooltipsData.onMouseEnter({\n                isAnnotation: true,\n                x: x + innerX + cellWidth,\n                y: y + innerY + cellHeight / 2,\n                cell: {\n                    x: x + innerX,\n                    y: y + innerY,\n                    width: cellWidth,\n                    height: cellHeight,\n                    fill: fillColor,\n                    stroke: aes.cellStrokeColor\n                },\n                xKey: vertical ? null : key,\n                yKey: vertical ? key : null,\n                value,\n                title: valueColumn.label ?? valueColumn.value,\n                column: annotation.valueColumn\n            } satisfies AnnotationTooltipData, facetKey);\n        } else {\n            tooltipsData.onMouseLeave();\n        }\n    });\n    return (\n        <foreignObject x={x} y={y} width={annotationWidth} height={annotationHeight}>\n            <canvas\n                ref={canvasRef}\n                width={canvasRatio * annotationWidth}\n                height={canvasRatio * annotationHeight}\n                onMouseMove={moveOnCanvas}\n                onMouseLeave={() => tooltipsData.onMouseLeave()}\n            />\n        </foreignObject>\n    );\n}"],"names":["renderCells","ctx","scales","data","keys","vertical","strokeColor","colorScale","width","height","key","value","fillColor","x","y","binarySearch","arr","val","step","start","end","mid","searchKey","px","positions","pos","AnnotationCellsCanvas","facetKey","annotation","stepX","stepY","aes","tooltipsData","valueColumn","cellWidth","ANNOTATION_WIDTH","cellHeight","annotationWidth","annotationHeight","canvasRef","useRef","canvasRatio","render","useEffect","canvasEl","moveOnCanvas","useFunction","e","mouseX","mouseY","innerX","innerY","jsx"],"mappings":"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"}
+{"version":3,"file":"AnnotationCellsCanvas.js","names":[],"sources":["../../../../src/heatmap/components/Annotations/AnnotationCellsCanvas.tsx"],"sourcesContent":["\nimport type { AnnotationColorScales, AnnotationTooltipData, ChartScales } from '../types';\nimport { ANNOTATION_WIDTH } from '../../constants';\nimport type { DataValue } from '../../../types/common';\nimport type { HeatmapSettingsImpl } from '../../HeatmapSettingsImpl';\nimport type { CellHeatmap } from '../../getCells';\nimport type { TooltipsData } from '../../../common/Tooltip';\nimport type { MouseEventHandler } from 'react';\nimport { useEffect, useRef } from 'react';\nimport { useFunction } from '../../../utils/hooks/useFunction';\n\ninterface AnnotationCellsCanvasProps {\n    facetKey: string,\n    scales: ChartScales,\n    keys: string[],\n    x: number,\n    y: number,\n    stepX: number,\n    stepY: number,\n    vertical: boolean,\n    aes: HeatmapSettingsImpl['aes'];\n    colorScale: AnnotationColorScales[keyof AnnotationColorScales],\n    data: Record<string, DataValue>;\n    annotation: HeatmapSettingsImpl['annotations'][0];\n    tooltipsData: TooltipsData<CellHeatmap | AnnotationTooltipData>;\n}\n\nfunction renderCells(\n    ctx: CanvasRenderingContext2D | null,\n    scales: ChartScales,\n    data: Record<string, DataValue>,\n    keys: string[],\n    vertical: boolean,\n    strokeColor: string,\n    colorScale: AnnotationColorScales[keyof AnnotationColorScales],\n    width: number,\n    height: number\n) {\n    if (!ctx) {\n        return;\n    }\n    ctx.beginPath(); // Start a new path\n    ctx.clearRect(0, 0, width, height);\n    for (const key of keys) {\n        const value = data?.[key];\n        const fillColor = colorScale.type === 'continuous'\n            ? colorScale.scale(Number(value))\n            : colorScale.scale(String(value));\n        const x = (vertical ? 0 : scales.x(key));\n        const y = (vertical ? scales.y(key) : 0);\n\n        ctx.fillStyle = fillColor;\n        ctx.fillRect(x, y, width, height); // Add a rectangle to the current path\n    }\n}\n\nfunction binarySearch(arr: number[], val: number, step: number) {\n    let start = 0;\n    let end = arr.length - 1;\n\n    while (start <= end) {\n        const mid = Math.floor((start + end) / 2);\n        if (Math.abs(arr[mid] - val) < step) {\n            return arr[mid] >= val ? mid - 1 : mid;\n        }\n\n        if (val < arr[mid]) {\n            end = mid - 1;\n        } else {\n            start = mid + 1;\n        }\n    }\n    return -1;\n}\nfunction searchKey(px: number, positions: number[], keys: string[], step: number) {\n    const pos = binarySearch(positions, px, step);\n    if (pos === -1) {\n        return -1;\n    }\n    return keys[pos];\n}\n\nexport function AnnotationCellsCanvas({\n    facetKey,\n    scales,\n    data,\n    keys,\n    vertical,\n    annotation,\n    x, y, stepX, stepY,\n    aes,\n    colorScale,\n    tooltipsData,\n}: AnnotationCellsCanvasProps) {\n    const { valueColumn } = annotation;\n    const cellWidth = vertical ? ANNOTATION_WIDTH : stepX;\n    const cellHeight = vertical ? stepY : ANNOTATION_WIDTH;\n    const annotationWidth = vertical ? cellWidth : cellWidth * keys.length;\n    const annotationHeight = vertical ? cellHeight * keys.length : cellHeight;\n    const canvasRef = useRef<HTMLCanvasElement | null>(null);\n    const canvasRatio = window.devicePixelRatio || 1;\n    const ctx = useRef<CanvasRenderingContext2D | null>(null);\n    const render = () => {\n        renderCells(\n            ctx.current,\n            scales,\n            data,\n            keys,\n            vertical,\n            aes.cellStrokeColor,\n            colorScale,\n            cellWidth,\n            cellHeight\n        );\n    };\n    useEffect(() => {\n        const canvasEl = canvasRef.current;\n        if (!ctx.current) {\n            ctx.current = canvasEl?.getContext('2d') ?? null;\n        }\n        if (canvasEl && ctx.current) {\n            canvasEl.style.width = annotationWidth + 'px';\n            canvasEl.style.height = annotationHeight + 'px';\n            ctx.current.scale(canvasRatio, canvasRatio);\n        }\n        render();\n    }, [annotationWidth, annotationHeight]);\n    render();\n\n    const moveOnCanvas: MouseEventHandler<HTMLCanvasElement> = useFunction((e: React.MouseEvent) => {\n        const mouseX = e.nativeEvent.offsetX;\n        const mouseY = e.nativeEvent.offsetY;\n        const key = vertical\n            ? searchKey(mouseY, scales.y.range(), scales.y.domain(), stepY)\n            : searchKey(mouseX, scales.x.range(), scales.x.domain(), stepX);\n        if (key !== -1) {\n            const innerX = (vertical ? 0 : scales.x(key));\n            const innerY = (vertical ? scales.y(key) : 0);\n            const value = data[key];\n            const fillColor = colorScale.type === 'continuous'\n                ? colorScale.scale(Number(value))\n                : colorScale.scale(String(value));\n            tooltipsData.onMouseEnter({\n                isAnnotation: true,\n                x: x + innerX + cellWidth,\n                y: y + innerY + cellHeight / 2,\n                cell: {\n                    x: x + innerX,\n                    y: y + innerY,\n                    width: cellWidth,\n                    height: cellHeight,\n                    fill: fillColor,\n                    stroke: aes.cellStrokeColor\n                },\n                xKey: vertical ? null : key,\n                yKey: vertical ? key : null,\n                value,\n                title: valueColumn.label ?? valueColumn.value,\n                column: annotation.valueColumn\n            } satisfies AnnotationTooltipData, facetKey);\n        } else {\n            tooltipsData.onMouseLeave();\n        }\n    });\n    return (\n        <foreignObject x={x} y={y} width={annotationWidth} height={annotationHeight}>\n            <canvas\n                ref={canvasRef}\n                width={canvasRatio * annotationWidth}\n                height={canvasRatio * annotationHeight}\n                onMouseMove={moveOnCanvas}\n                onMouseLeave={() => tooltipsData.onMouseLeave()}\n            />\n        </foreignObject>\n    );\n}"],"mappings":"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"}

package/dist/heatmap/components/Annotations/AnnotationCellsSvg.js

@@ -1,57 +1,37 @@
-import { j as T } from "../../../_virtual/jsx-runtime.js";
-import { ANNOTATION_WIDTH as y } from "../../constants.js";
-function K({
-  facetKey: A,
-  scales: x,
-  data: e,
-  keys: I,
-  vertical: n,
-  annotation: c,
-  x: M,
-  y: N,
-  stepX: g,
-  stepY: h,
-  aes: i,
-  colorScale: l,
-  tooltipsData: f
-}) {
-  const { valueColumn: C } = c;
-  return I.map((o) => {
-    const t = e == null ? void 0 : e[o], p = l.type === "continuous" ? l.scale(Number(t)) : l.scale(String(t)), u = M + (n ? 0 : x.x(o)), s = N + (n ? x.y(o) : 0), r = n ? y : g, m = n ? h : y, j = n ? null : o, E = n ? o : null;
-    return /* @__PURE__ */ T.jsx(
-      "rect",
-      {
-        x: u,
-        y: s,
-        width: r,
-        height: m,
-        fill: p,
-        stroke: i.cellStrokeColor,
-        onMouseEnter: () => f.onMouseEnter({
-          isAnnotation: !0,
-          x: u + r,
-          y: s + m / 2,
-          cell: {
-            x: u,
-            y: s,
-            width: r,
-            height: m,
-            fill: p,
-            stroke: i.cellStrokeColor
-          },
-          xKey: j,
-          yKey: E,
-          value: t,
-          title: C.label ?? C.value,
-          column: c.valueColumn
-        }, A),
-        onMouseLeave: () => f.onMouseLeave()
-      },
-      o
-    );
-  });
+import { jsx as e } from "react/jsx-runtime";
+function t({ facetKey: t, scales: n, data: r, keys: i, vertical: a, annotation: o, x: s, y: c, stepX: l, stepY: u, aes: d, colorScale: f, tooltipsData: p }) {
+	let { valueColumn: m } = o;
+	return i.map((i) => {
+		let h = r?.[i], g = f.type === "continuous" ? f.scale(Number(h)) : f.scale(String(h)), _ = s + (a ? 0 : n.x(i)), v = c + (a ? n.y(i) : 0), y = a ? 16 : l, b = a ? u : 16, x = a ? null : i, S = a ? i : null;
+		return /* @__PURE__ */ e("rect", {
+			x: _,
+			y: v,
+			width: y,
+			height: b,
+			fill: g,
+			stroke: d.cellStrokeColor,
+			onMouseEnter: () => p.onMouseEnter({
+				isAnnotation: !0,
+				x: _ + y,
+				y: v + b / 2,
+				cell: {
+					x: _,
+					y: v,
+					width: y,
+					height: b,
+					fill: g,
+					stroke: d.cellStrokeColor
+				},
+				xKey: x,
+				yKey: S,
+				value: h,
+				title: m.label ?? m.value,
+				column: o.valueColumn
+			}, t),
+			onMouseLeave: () => p.onMouseLeave()
+		}, i);
+	});
 }
-export {
-  K as AnnotationCellsSvg
-};
-//# sourceMappingURL=AnnotationCellsSvg.js.map
+export { t as AnnotationCellsSvg };
+
+//# sourceMappingURL=AnnotationCellsSvg.js.map

package/dist/heatmap/components/Annotations/AnnotationCellsSvg.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationCellsSvg.js","sources":["../../../../src/heatmap/components/Annotations/AnnotationCellsSvg.tsx"],"sourcesContent":["\nimport type { AnnotationColorScales, AnnotationTooltipData, ChartScales } from '../types';\nimport { ANNOTATION_WIDTH } from '../../constants';\nimport type { DataValue } from '../../../types/common';\nimport type { HeatmapSettingsImpl } from '../../HeatmapSettingsImpl';\nimport type { CellHeatmap } from '../../getCells';\nimport type { TooltipsData } from '../../../common/Tooltip';\n\ninterface AnnotationCellsSvgProps {\n    facetKey: string,\n    scales: ChartScales,\n    keys: string[],\n    x: number,\n    y: number,\n    stepX: number,\n    stepY: number,\n    vertical: boolean,\n    aes: HeatmapSettingsImpl['aes'];\n    colorScale: AnnotationColorScales[keyof AnnotationColorScales],\n    data: Record<string, DataValue>;\n    annotation: HeatmapSettingsImpl['annotations'][0];\n    tooltipsData: TooltipsData<CellHeatmap | AnnotationTooltipData>;\n}\n\nexport function AnnotationCellsSvg({\n    facetKey,\n    scales,\n    data,\n    keys,\n    vertical,\n    annotation,\n    x, y, stepX, stepY,\n    aes,\n    colorScale,\n    tooltipsData,\n}: AnnotationCellsSvgProps) {\n    const { valueColumn } = annotation;\n    return keys.map(key => {\n        const value = data?.[key];\n        const fillColor = colorScale.type === 'continuous'\n            ? colorScale.scale(Number(value))\n            : colorScale.scale(String(value));\n        const xInner = x + (vertical ? 0 : scales.x(key));\n        const yInner = y + (vertical ? scales.y(key) : 0);\n        const width = vertical ? ANNOTATION_WIDTH : stepX;\n        const height = vertical ? stepY : ANNOTATION_WIDTH;\n        const xKey = vertical ? null : key;\n        const yKey = vertical ? key : null;\n        return (\n            <rect\n                key={key}\n                x={xInner}\n                y={yInner}\n                width={width}\n                height={height}\n                fill={fillColor}\n                stroke={aes.cellStrokeColor}\n                onMouseEnter={() => tooltipsData.onMouseEnter({\n                    isAnnotation: true,\n                    x: xInner + width,\n                    y: yInner + height / 2,\n                    cell: {\n                        x: xInner,\n                        y: yInner,\n                        width,\n                        height,\n                        fill: fillColor,\n                        stroke: aes.cellStrokeColor\n                    },\n                    xKey,\n                    yKey,\n                    value,\n                    title: valueColumn.label ?? valueColumn.value,\n                    column: annotation.valueColumn\n                } satisfies AnnotationTooltipData, facetKey)}\n                onMouseLeave={() => tooltipsData.onMouseLeave()}\n            />\n        );\n    });\n}"],"names":["AnnotationCellsSvg","facetKey","scales","data","keys","vertical","annotation","x","y","stepX","stepY","aes","colorScale","tooltipsData","valueColumn","key","value","fillColor","xInner","yInner","width","ANNOTATION_WIDTH","height","xKey","yKey","jsx"],"mappings":";;AAwBO,SAASA,EAAmB;AAAA,EAC/B,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAAC;AAAA,EAAG,GAAAC;AAAA,EAAG,OAAAC;AAAA,EAAO,OAAAC;AAAA,EACb,KAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AACJ,GAA4B;AACxB,QAAM,EAAE,aAAAC,MAAgBR;AACxB,SAAOF,EAAK,IAAI,CAAAW,MAAO;AACnB,UAAMC,IAAQb,KAAA,gBAAAA,EAAOY,IACfE,IAAYL,EAAW,SAAS,eAChCA,EAAW,MAAM,OAAOI,CAAK,CAAC,IAC9BJ,EAAW,MAAM,OAAOI,CAAK,CAAC,GAC9BE,IAASX,KAAKF,IAAW,IAAIH,EAAO,EAAEa,CAAG,IACzCI,IAASX,KAAKH,IAAWH,EAAO,EAAEa,CAAG,IAAI,IACzCK,IAAQf,IAAWgB,IAAmBZ,GACtCa,IAASjB,IAAWK,IAAQW,GAC5BE,IAAOlB,IAAW,OAAOU,GACzBS,IAAOnB,IAAWU,IAAM;AAC9B,WACIU,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEG,GAAGP;AAAA,QACH,GAAGC;AAAA,QACH,OAAAC;AAAA,QACA,QAAAE;AAAA,QACA,MAAML;AAAA,QACN,QAAQN,EAAI;AAAA,QACZ,cAAc,MAAME,EAAa,aAAa;AAAA,UAC1C,cAAc;AAAA,UACd,GAAGK,IAASE;AAAA,UACZ,GAAGD,IAASG,IAAS;AAAA,UACrB,MAAM;AAAA,YACF,GAAGJ;AAAA,YACH,GAAGC;AAAA,YACH,OAAAC;AAAA,YACA,QAAAE;AAAA,YACA,MAAML;AAAA,YACN,QAAQN,EAAI;AAAA,UAAA;AAAA,UAEhB,MAAAY;AAAA,UACA,MAAAC;AAAA,UACA,OAAAR;AAAA,UACA,OAAOF,EAAY,SAASA,EAAY;AAAA,UACxC,QAAQR,EAAW;AAAA,QAAA,GACYL,CAAQ;AAAA,QAC3C,cAAc,MAAMY,EAAa,aAAA;AAAA,MAAa;AAAA,MAzBzCE;AAAA,IAAA;AAAA,EA4BjB,CAAC;AACL;"}
+{"version":3,"file":"AnnotationCellsSvg.js","names":[],"sources":["../../../../src/heatmap/components/Annotations/AnnotationCellsSvg.tsx"],"sourcesContent":["\nimport type { AnnotationColorScales, AnnotationTooltipData, ChartScales } from '../types';\nimport { ANNOTATION_WIDTH } from '../../constants';\nimport type { DataValue } from '../../../types/common';\nimport type { HeatmapSettingsImpl } from '../../HeatmapSettingsImpl';\nimport type { CellHeatmap } from '../../getCells';\nimport type { TooltipsData } from '../../../common/Tooltip';\n\ninterface AnnotationCellsSvgProps {\n    facetKey: string,\n    scales: ChartScales,\n    keys: string[],\n    x: number,\n    y: number,\n    stepX: number,\n    stepY: number,\n    vertical: boolean,\n    aes: HeatmapSettingsImpl['aes'];\n    colorScale: AnnotationColorScales[keyof AnnotationColorScales],\n    data: Record<string, DataValue>;\n    annotation: HeatmapSettingsImpl['annotations'][0];\n    tooltipsData: TooltipsData<CellHeatmap | AnnotationTooltipData>;\n}\n\nexport function AnnotationCellsSvg({\n    facetKey,\n    scales,\n    data,\n    keys,\n    vertical,\n    annotation,\n    x, y, stepX, stepY,\n    aes,\n    colorScale,\n    tooltipsData,\n}: AnnotationCellsSvgProps) {\n    const { valueColumn } = annotation;\n    return keys.map(key => {\n        const value = data?.[key];\n        const fillColor = colorScale.type === 'continuous'\n            ? colorScale.scale(Number(value))\n            : colorScale.scale(String(value));\n        const xInner = x + (vertical ? 0 : scales.x(key));\n        const yInner = y + (vertical ? scales.y(key) : 0);\n        const width = vertical ? ANNOTATION_WIDTH : stepX;\n        const height = vertical ? stepY : ANNOTATION_WIDTH;\n        const xKey = vertical ? null : key;\n        const yKey = vertical ? key : null;\n        return (\n            <rect\n                key={key}\n                x={xInner}\n                y={yInner}\n                width={width}\n                height={height}\n                fill={fillColor}\n                stroke={aes.cellStrokeColor}\n                onMouseEnter={() => tooltipsData.onMouseEnter({\n                    isAnnotation: true,\n                    x: xInner + width,\n                    y: yInner + height / 2,\n                    cell: {\n                        x: xInner,\n                        y: yInner,\n                        width,\n                        height,\n                        fill: fillColor,\n                        stroke: aes.cellStrokeColor\n                    },\n                    xKey,\n                    yKey,\n                    value,\n                    title: valueColumn.label ?? valueColumn.value,\n                    column: annotation.valueColumn\n                } satisfies AnnotationTooltipData, facetKey)}\n                onMouseLeave={() => tooltipsData.onMouseLeave()}\n            />\n        );\n    });\n}"],"mappings":";AAwBA,SAAgB,EAAmB,EAC/B,aACA,WACA,SACA,SACA,aACA,eACA,MAAG,MAAG,UAAO,UACb,QACA,eACA,mBACwB;CACxB,IAAM,EAAE,mBAAgB;AACxB,QAAO,EAAK,KAAI,MAAO;EACnB,IAAM,IAAQ,IAAO,IACf,IAAY,EAAW,SAAS,eAChC,EAAW,MAAM,OAAO,EAAM,CAAC,GAC/B,EAAW,MAAM,OAAO,EAAM,CAAC,EAC/B,IAAS,KAAK,IAAW,IAAI,EAAO,EAAE,EAAI,GAC1C,IAAS,KAAK,IAAW,EAAO,EAAE,EAAI,GAAG,IACzC,IAAQ,IAAA,KAA8B,GACtC,IAAS,IAAW,IAAA,IACpB,IAAO,IAAW,OAAO,GACzB,IAAO,IAAW,IAAM;AAC9B,SACI,kBAAC,QAAD;GAEI,GAAG;GACH,GAAG;GACI;GACC;GACR,MAAM;GACN,QAAQ,EAAI;GACZ,oBAAoB,EAAa,aAAa;IAC1C,cAAc;IACd,GAAG,IAAS;IACZ,GAAG,IAAS,IAAS;IACrB,MAAM;KACF,GAAG;KACH,GAAG;KACH;KACA;KACA,MAAM;KACN,QAAQ,EAAI;KACf;IACD;IACA;IACA;IACA,OAAO,EAAY,SAAS,EAAY;IACxC,QAAQ,EAAW;IACtB,EAAkC,EAAS;GAC5C,oBAAoB,EAAa,cAAc;GACjD,EA1BO,EA0BP;GAER"}

package/dist/heatmap/components/Annotations/index.js

@@ -1,104 +1,65 @@
-import { j as l } from "../../../_virtual/jsx-runtime.js";
-import { Annotation as p } from "./Annotation.js";
-import { ANNOTATION_WIDTH as c, ANNOTATIONS_OFFSET as T } from "../../constants.js";
-function v(u, n) {
-  return u.showTitle && n.includes(u.titlePosition);
+import { Annotation as e } from "./Annotation.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+function r(e, t) {
+	return e.showTitle && t.includes(e.titlePosition);
 }
-function G({
-  facetKey: u,
-  sideElementBBoxes: n,
-  annotations: A,
-  annotationColorScales: s,
-  cellsMeta: x,
-  chartEdgeSides: a,
-  sharedX: b,
-  sharedY: h,
-  width: j,
-  height: w,
-  scales: N,
-  stepX: C,
-  stepY: O,
-  aes: L,
-  frame: d,
-  xGroupKeys: D,
-  yGroupKeys: I,
-  xKeysByGroups: g,
-  yKeysByGroups: F,
-  tooltipsData: K,
-  cellsRenderingMode: P
-}) {
-  const i = A.filter((o) => a.includes(o.position) || !b && ["left", "right"].includes(o.position) || !h && ["top", "bottom"].includes(o.position)), _ = i.filter((o) => o.position === "left"), H = i.filter((o) => o.position === "right"), R = i.filter((o) => o.position === "top"), W = i.filter((o) => o.position === "bottom"), { xDataByKeys: f, yDataByKeys: y } = x, r = {
-    facetKey: u,
-    scales: N,
-    stepX: C,
-    stepY: O,
-    width: j,
-    height: w,
-    aes: L,
-    frame: d,
-    xGroupKeys: D,
-    yGroupKeys: I,
-    xKeysByGroups: g,
-    yKeysByGroups: F,
-    tooltipsData: K,
-    cellsRenderingMode: P
-  };
-  return /* @__PURE__ */ l.jsxs("g", { children: [
-    _.map((o, t) => /* @__PURE__ */ l.jsx(
-      p,
-      {
-        annotation: o,
-        colorScale: s[o.id],
-        data: y[o.valueColumn.valueLabels ?? o.valueColumn.value],
-        showTitle: v(o, a),
-        x: n.left.annotations.x + t * c,
-        y: n.left.annotations.y,
-        ...r
-      },
-      o.id
-    )),
-    H.map((o, t) => /* @__PURE__ */ l.jsx(
-      p,
-      {
-        annotation: o,
-        colorScale: s[o.id],
-        data: y[o.valueColumn.valueLabels ?? o.valueColumn.value],
-        showTitle: v(o, a),
-        x: n.right.annotations.x + t * c + T,
-        y: n.right.annotations.y,
-        ...r
-      },
-      o.id
-    )),
-    R.map((o, t) => /* @__PURE__ */ l.jsx(
-      p,
-      {
-        annotation: o,
-        colorScale: s[o.id],
-        data: f[o.valueColumn.valueLabels ?? o.valueColumn.value],
-        showTitle: v(o, a),
-        x: n.top.annotations.x,
-        y: n.top.annotations.y + t * c,
-        ...r
-      },
-      o.id
-    )),
-    W.map((o, t) => /* @__PURE__ */ l.jsx(
-      p,
-      {
-        annotation: o,
-        colorScale: s[o.id],
-        data: f[o.valueColumn.valueLabels ?? o.valueColumn.value],
-        showTitle: v(o, a),
-        x: n.bottom.annotations.x,
-        y: n.bottom.annotations.y + t * c + T,
-        ...r
-      },
-      o.id
-    ))
-  ] });
+function i({ facetKey: i, sideElementBBoxes: a, annotations: o, annotationColorScales: s, cellsMeta: c, chartEdgeSides: l, sharedX: u, sharedY: d, width: f, height: p, scales: m, stepX: h, stepY: g, aes: _, frame: v, xGroupKeys: y, yGroupKeys: b, xKeysByGroups: x, yKeysByGroups: S, tooltipsData: C, cellsRenderingMode: w }) {
+	let T = o.filter((e) => l.includes(e.position) || !u && ["left", "right"].includes(e.position) || !d && ["top", "bottom"].includes(e.position)), E = T.filter((e) => e.position === "left"), D = T.filter((e) => e.position === "right"), O = T.filter((e) => e.position === "top"), k = T.filter((e) => e.position === "bottom"), { xDataByKeys: A, yDataByKeys: j } = c, M = {
+		facetKey: i,
+		scales: m,
+		stepX: h,
+		stepY: g,
+		width: f,
+		height: p,
+		aes: _,
+		frame: v,
+		xGroupKeys: y,
+		yGroupKeys: b,
+		xKeysByGroups: x,
+		yKeysByGroups: S,
+		tooltipsData: C,
+		cellsRenderingMode: w
+	};
+	return /* @__PURE__ */ n("g", { children: [
+		E.map((n, i) => /* @__PURE__ */ t(e, {
+			annotation: n,
+			colorScale: s[n.id],
+			data: j[n.valueColumn.valueLabels ?? n.valueColumn.value],
+			showTitle: r(n, l),
+			x: a.left.annotations.x + i * 16,
+			y: a.left.annotations.y,
+			...M
+		}, n.id)),
+		D.map((n, i) => /* @__PURE__ */ t(e, {
+			annotation: n,
+			colorScale: s[n.id],
+			data: j[n.valueColumn.valueLabels ?? n.valueColumn.value],
+			showTitle: r(n, l),
+			x: a.right.annotations.x + i * 16 + 8,
+			y: a.right.annotations.y,
+			...M
+		}, n.id)),
+		O.map((n, i) => /* @__PURE__ */ t(e, {
+			annotation: n,
+			colorScale: s[n.id],
+			data: A[n.valueColumn.valueLabels ?? n.valueColumn.value],
+			showTitle: r(n, l),
+			x: a.top.annotations.x,
+			y: a.top.annotations.y + i * 16,
+			...M
+		}, n.id)),
+		k.map((n, i) => /* @__PURE__ */ t(e, {
+			annotation: n,
+			colorScale: s[n.id],
+			data: A[n.valueColumn.valueLabels ?? n.valueColumn.value],
+			showTitle: r(n, l),
+			x: a.bottom.annotations.x,
+			y: a.bottom.annotations.y + i * 16 + 8,
+			...M
+		}, n.id))
+	] });
 }
-export {
-  G as Annotations
-};
-//# sourceMappingURL=index.js.map
+export { i as Annotations };
+
+//# sourceMappingURL=index.js.map

package/dist/heatmap/components/Annotations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/heatmap/components/Annotations/index.tsx"],"sourcesContent":["import type {TooltipsData} from '../../../common/Tooltip';\nimport {Annotation} from './Annotation';\nimport type {\n    AnnotationColorScales,\n    AnnotationTooltipData,\n    ChartDimensionsData,\n    ChartScales,\n} from '../types';\nimport {ANNOTATION_WIDTH, ANNOTATIONS_OFFSET} from '../../constants';\nimport type {CellHeatmap, GroupedCellsHeatmap} from '../../getCells';\nimport type {HeatmapSettingsImpl} from '../../HeatmapSettingsImpl';\nimport React from 'react';\n\nfunction showTitle(item: HeatmapSettingsImpl['annotations'][0], chartEdgeSides: ChartDimensionsData['chartEdgeSides']) {\n    return item.showTitle && chartEdgeSides.includes(item.titlePosition);\n}\n\ninterface AnnotationProps {\n    facetKey: string;\n    sideElementBBoxes: ChartDimensionsData['sideElementBBoxes'];\n    annotations: HeatmapSettingsImpl['annotations'];\n    cellsMeta: GroupedCellsHeatmap['meta'];\n    annotationColorScales: AnnotationColorScales;\n    sharedX: boolean;\n    sharedY: boolean;\n    chartEdgeSides: ChartDimensionsData['chartEdgeSides'];\n    width: number;\n    height: number;\n    scales: ChartScales;\n    stepX: number;\n    stepY: number;\n    aes: HeatmapSettingsImpl['aes'];\n    frame: HeatmapSettingsImpl['chartSettings']['frame'];\n    xGroupKeys: string[];\n    yGroupKeys: string[];\n    xKeysByGroups: GroupedCellsHeatmap['facets'][keyof GroupedCellsHeatmap['facets']]['xKeysByGroups'];\n    yKeysByGroups: GroupedCellsHeatmap['facets'][keyof GroupedCellsHeatmap['facets']]['yKeysByGroups'];\n    tooltipsData: TooltipsData<CellHeatmap|AnnotationTooltipData>;\n    cellsRenderingMode: 'canvas' | 'svg';\n}\n\nexport function Annotations({\n    facetKey,\n    sideElementBBoxes,\n    annotations,\n    annotationColorScales,\n    cellsMeta,\n    chartEdgeSides,\n    sharedX,\n    sharedY,\n    width,\n    height,\n    scales,\n    stepX,\n    stepY,\n    aes,\n    frame,\n    xGroupKeys,\n    yGroupKeys,\n    xKeysByGroups,\n    yKeysByGroups,\n    tooltipsData,\n    cellsRenderingMode,\n}: AnnotationProps) {\n    const usedAnnotations = annotations.filter(item => {\n        return (\n            chartEdgeSides.includes(item.position) ||\n            (!sharedX && ['left', 'right'].includes(item.position)) ||\n            (!sharedY && ['top', 'bottom'].includes(item.position))\n        );\n    });\n    const leftAnnotations = usedAnnotations.filter(item => item.position === 'left');\n    const rightAnnotations = usedAnnotations.filter(item => item.position === 'right');\n    const topAnnotations = usedAnnotations.filter(item => item.position === 'top');\n    const bottomAnnotations = usedAnnotations.filter(item => item.position === 'bottom');\n    const {xDataByKeys, yDataByKeys} = cellsMeta;\n\n    const commonProps = {\n        facetKey,\n        scales,\n        stepX,\n        stepY,\n        width,\n        height,\n        aes,\n        frame,\n        xGroupKeys,\n        yGroupKeys,\n        xKeysByGroups,\n        yKeysByGroups,\n        tooltipsData,\n        cellsRenderingMode,\n    };\n    return (\n        <g>\n            {leftAnnotations.map((item, idx) => {\n                return (\n                    <Annotation\n                        key={item.id}\n                        annotation={item}\n                        colorScale={annotationColorScales[item.id]}\n                        data={yDataByKeys[item.valueColumn.valueLabels ?? item.valueColumn.value]}\n                        showTitle={showTitle(item, chartEdgeSides)}\n                        x={sideElementBBoxes.left.annotations.x + idx * ANNOTATION_WIDTH}\n                        y={sideElementBBoxes.left.annotations.y}\n                        {...commonProps}\n                    />\n                );\n            })}\n            {rightAnnotations.map((item, idx) => {\n                return (\n                    <Annotation\n                        key={item.id}\n                        annotation={item}\n                        colorScale={annotationColorScales[item.id]}\n                        data={yDataByKeys[item.valueColumn.valueLabels ?? item.valueColumn.value]}\n                        showTitle={showTitle(item, chartEdgeSides)}\n                        x={sideElementBBoxes.right.annotations.x + idx * ANNOTATION_WIDTH + ANNOTATIONS_OFFSET}\n                        y={sideElementBBoxes.right.annotations.y}\n                        {...commonProps}\n                    />\n                );\n            })}\n            {topAnnotations.map((item, idx) => {\n                return (\n                    <Annotation\n                        key={item.id}\n                        annotation={item}\n                        colorScale={annotationColorScales[item.id]}\n                        data={xDataByKeys[item.valueColumn.valueLabels ?? item.valueColumn.value]}\n                        showTitle={showTitle(item, chartEdgeSides)}\n                        x={sideElementBBoxes.top.annotations.x}\n                        y={sideElementBBoxes.top.annotations.y + idx * ANNOTATION_WIDTH}\n                        {...commonProps}\n                    />\n                );\n            })}\n            {bottomAnnotations.map((item, idx) => {\n                return (\n                    <Annotation\n                        key={item.id}\n                        annotation={item}\n                        colorScale={annotationColorScales[item.id]}\n                        data={xDataByKeys[item.valueColumn.valueLabels ?? item.valueColumn.value]}\n                        showTitle={showTitle(item, chartEdgeSides)}\n                        x={sideElementBBoxes.bottom.annotations.x}\n                        y={sideElementBBoxes.bottom.annotations.y + idx * ANNOTATION_WIDTH + ANNOTATIONS_OFFSET}\n                        {...commonProps}\n                    />\n                );\n            })}\n        </g>\n    );\n}\n"],"names":["showTitle","item","chartEdgeSides","Annotations","facetKey","sideElementBBoxes","annotations","annotationColorScales","cellsMeta","sharedX","sharedY","width","height","scales","stepX","stepY","aes","frame","xGroupKeys","yGroupKeys","xKeysByGroups","yKeysByGroups","tooltipsData","cellsRenderingMode","usedAnnotations","leftAnnotations","rightAnnotations","topAnnotations","bottomAnnotations","xDataByKeys","yDataByKeys","commonProps","idx","jsx","Annotation","ANNOTATION_WIDTH","ANNOTATIONS_OFFSET"],"mappings":";;;AAaA,SAASA,EAAUC,GAA6CC,GAAuD;AACnH,SAAOD,EAAK,aAAaC,EAAe,SAASD,EAAK,aAAa;AACvE;AA0BO,SAASE,EAAY;AAAA,EACxB,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAN;AAAA,EACA,SAAAO;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,oBAAAC;AACJ,GAAoB;AAChB,QAAMC,IAAkBlB,EAAY,OAAO,CAAAL,MAEnCC,EAAe,SAASD,EAAK,QAAQ,KACpC,CAACQ,KAAW,CAAC,QAAQ,OAAO,EAAE,SAASR,EAAK,QAAQ,KACpD,CAACS,KAAW,CAAC,OAAO,QAAQ,EAAE,SAAST,EAAK,QAAQ,CAE5D,GACKwB,IAAkBD,EAAgB,OAAO,CAAAvB,MAAQA,EAAK,aAAa,MAAM,GACzEyB,IAAmBF,EAAgB,OAAO,CAAAvB,MAAQA,EAAK,aAAa,OAAO,GAC3E0B,IAAiBH,EAAgB,OAAO,CAAAvB,MAAQA,EAAK,aAAa,KAAK,GACvE2B,IAAoBJ,EAAgB,OAAO,CAAAvB,MAAQA,EAAK,aAAa,QAAQ,GAC7E,EAAC,aAAA4B,GAAa,aAAAC,EAAA,IAAetB,GAE7BuB,IAAc;AAAA,IAChB,UAAA3B;AAAA,IACA,QAAAS;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAJ;AAAA,IACA,QAAAC;AAAA,IACA,KAAAI;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA;AAEJ,gCACK,KAAA,EACI,UAAA;AAAA,IAAAE,EAAgB,IAAI,CAACxB,GAAM+B,MAEpBC,gBAAAA,EAAAA;AAAAA,MAACC;AAAA,MAAA;AAAA,QAEG,YAAYjC;AAAA,QACZ,YAAYM,EAAsBN,EAAK,EAAE;AAAA,QACzC,MAAM6B,EAAY7B,EAAK,YAAY,eAAeA,EAAK,YAAY,KAAK;AAAA,QACxE,WAAWD,EAAUC,GAAMC,CAAc;AAAA,QACzC,GAAGG,EAAkB,KAAK,YAAY,IAAI2B,IAAMG;AAAA,QAChD,GAAG9B,EAAkB,KAAK,YAAY;AAAA,QACrC,GAAG0B;AAAA,MAAA;AAAA,MAPC9B,EAAK;AAAA,IAAA,CAUrB;AAAA,IACAyB,EAAiB,IAAI,CAACzB,GAAM+B,MAErBC,gBAAAA,EAAAA;AAAAA,MAACC;AAAA,MAAA;AAAA,QAEG,YAAYjC;AAAA,QACZ,YAAYM,EAAsBN,EAAK,EAAE;AAAA,QACzC,MAAM6B,EAAY7B,EAAK,YAAY,eAAeA,EAAK,YAAY,KAAK;AAAA,QACxE,WAAWD,EAAUC,GAAMC,CAAc;AAAA,QACzC,GAAGG,EAAkB,MAAM,YAAY,IAAI2B,IAAMG,IAAmBC;AAAA,QACpE,GAAG/B,EAAkB,MAAM,YAAY;AAAA,QACtC,GAAG0B;AAAA,MAAA;AAAA,MAPC9B,EAAK;AAAA,IAAA,CAUrB;AAAA,IACA0B,EAAe,IAAI,CAAC1B,GAAM+B,MAEnBC,gBAAAA,EAAAA;AAAAA,MAACC;AAAA,MAAA;AAAA,QAEG,YAAYjC;AAAA,QACZ,YAAYM,EAAsBN,EAAK,EAAE;AAAA,QACzC,MAAM4B,EAAY5B,EAAK,YAAY,eAAeA,EAAK,YAAY,KAAK;AAAA,QACxE,WAAWD,EAAUC,GAAMC,CAAc;AAAA,QACzC,GAAGG,EAAkB,IAAI,YAAY;AAAA,QACrC,GAAGA,EAAkB,IAAI,YAAY,IAAI2B,IAAMG;AAAA,QAC9C,GAAGJ;AAAA,MAAA;AAAA,MAPC9B,EAAK;AAAA,IAAA,CAUrB;AAAA,IACA2B,EAAkB,IAAI,CAAC3B,GAAM+B,MAEtBC,gBAAAA,EAAAA;AAAAA,MAACC;AAAA,MAAA;AAAA,QAEG,YAAYjC;AAAA,QACZ,YAAYM,EAAsBN,EAAK,EAAE;AAAA,QACzC,MAAM4B,EAAY5B,EAAK,YAAY,eAAeA,EAAK,YAAY,KAAK;AAAA,QACxE,WAAWD,EAAUC,GAAMC,CAAc;AAAA,QACzC,GAAGG,EAAkB,OAAO,YAAY;AAAA,QACxC,GAAGA,EAAkB,OAAO,YAAY,IAAI2B,IAAMG,IAAmBC;AAAA,QACpE,GAAGL;AAAA,MAAA;AAAA,MAPC9B,EAAK;AAAA,IAAA,CAUrB;AAAA,EAAA,GACL;AAER;"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/heatmap/components/Annotations/index.tsx"],"sourcesContent":["import type {TooltipsData} from '../../../common/Tooltip';\nimport {Annotation} from './Annotation';\nimport type {\n    AnnotationColorScales,\n    AnnotationTooltipData,\n    ChartDimensionsData,\n    ChartScales,\n} from '../types';\nimport {ANNOTATION_WIDTH, ANNOTATIONS_OFFSET} from '../../constants';\nimport type {CellHeatmap, GroupedCellsHeatmap} from '../../getCells';\nimport type {HeatmapSettingsImpl} from '../../HeatmapSettingsImpl';\nimport React from 'react';\n\nfunction showTitle(item: HeatmapSettingsImpl['annotations'][0], chartEdgeSides: ChartDimensionsData['chartEdgeSides']) {\n    return item.showTitle && chartEdgeSides.includes(item.titlePosition);\n}\n\ninterface AnnotationProps {\n    facetKey: string;\n    sideElementBBoxes: ChartDimensionsData['sideElementBBoxes'];\n    annotations: HeatmapSettingsImpl['annotations'];\n    cellsMeta: GroupedCellsHeatmap['meta'];\n    annotationColorScales: AnnotationColorScales;\n    sharedX: boolean;\n    sharedY: boolean;\n    chartEdgeSides: ChartDimensionsData['chartEdgeSides'];\n    width: number;\n    height: number;\n    scales: ChartScales;\n    stepX: number;\n    stepY: number;\n    aes: HeatmapSettingsImpl['aes'];\n    frame: HeatmapSettingsImpl['chartSettings']['frame'];\n    xGroupKeys: string[];\n    yGroupKeys: string[];\n    xKeysByGroups: GroupedCellsHeatmap['facets'][keyof GroupedCellsHeatmap['facets']]['xKeysByGroups'];\n    yKeysByGroups: GroupedCellsHeatmap['facets'][keyof GroupedCellsHeatmap['facets']]['yKeysByGroups'];\n    tooltipsData: TooltipsData<CellHeatmap|AnnotationTooltipData>;\n    cellsRenderingMode: 'canvas' | 'svg';\n}\n\nexport function Annotations({\n    facetKey,\n    sideElementBBoxes,\n    annotations,\n    annotationColorScales,\n    cellsMeta,\n    chartEdgeSides,\n    sharedX,\n    sharedY,\n    width,\n    height,\n    scales,\n    stepX,\n    stepY,\n    aes,\n    frame,\n    xGroupKeys,\n    yGroupKeys,\n    xKeysByGroups,\n    yKeysByGroups,\n    tooltipsData,\n    cellsRenderingMode,\n}: AnnotationProps) {\n    const usedAnnotations = annotations.filter(item => {\n        return (\n            chartEdgeSides.includes(item.position) ||\n            (!sharedX && ['left', 'right'].includes(item.position)) ||\n            (!sharedY && ['top', 'bottom'].includes(item.position))\n        );\n    });\n    const leftAnnotations = usedAnnotations.filter(item => item.position === 'left');\n    const rightAnnotations = usedAnnotations.filter(item => item.position === 'right');\n    const topAnnotations = usedAnnotations.filter(item => item.position === 'top');\n    const bottomAnnotations = usedAnnotations.filter(item => item.position === 'bottom');\n    const {xDataByKeys, yDataByKeys} = cellsMeta;\n\n    const commonProps = {\n        facetKey,\n        scales,\n        stepX,\n        stepY,\n        width,\n        height,\n        aes,\n        frame,\n        xGroupKeys,\n        yGroupKeys,\n        xKeysByGroups,\n        yKeysByGroups,\n        tooltipsData,\n        cellsRenderingMode,\n    };\n    return (\n        <g>\n            {leftAnnotations.map((item, idx) => {\n                return (\n                    <Annotation\n                        key={item.id}\n                        annotation={item}\n                        colorScale={annotationColorScales[item.id]}\n                        data={yDataByKeys[item.valueColumn.valueLabels ?? item.valueColumn.value]}\n                        showTitle={showTitle(item, chartEdgeSides)}\n                        x={sideElementBBoxes.left.annotations.x + idx * ANNOTATION_WIDTH}\n                        y={sideElementBBoxes.left.annotations.y}\n                        {...commonProps}\n                    />\n                );\n            })}\n            {rightAnnotations.map((item, idx) => {\n                return (\n                    <Annotation\n                        key={item.id}\n                        annotation={item}\n                        colorScale={annotationColorScales[item.id]}\n                        data={yDataByKeys[item.valueColumn.valueLabels ?? item.valueColumn.value]}\n                        showTitle={showTitle(item, chartEdgeSides)}\n                        x={sideElementBBoxes.right.annotations.x + idx * ANNOTATION_WIDTH + ANNOTATIONS_OFFSET}\n                        y={sideElementBBoxes.right.annotations.y}\n                        {...commonProps}\n                    />\n                );\n            })}\n            {topAnnotations.map((item, idx) => {\n                return (\n                    <Annotation\n                        key={item.id}\n                        annotation={item}\n                        colorScale={annotationColorScales[item.id]}\n                        data={xDataByKeys[item.valueColumn.valueLabels ?? item.valueColumn.value]}\n                        showTitle={showTitle(item, chartEdgeSides)}\n                        x={sideElementBBoxes.top.annotations.x}\n                        y={sideElementBBoxes.top.annotations.y + idx * ANNOTATION_WIDTH}\n                        {...commonProps}\n                    />\n                );\n            })}\n            {bottomAnnotations.map((item, idx) => {\n                return (\n                    <Annotation\n                        key={item.id}\n                        annotation={item}\n                        colorScale={annotationColorScales[item.id]}\n                        data={xDataByKeys[item.valueColumn.valueLabels ?? item.valueColumn.value]}\n                        showTitle={showTitle(item, chartEdgeSides)}\n                        x={sideElementBBoxes.bottom.annotations.x}\n                        y={sideElementBBoxes.bottom.annotations.y + idx * ANNOTATION_WIDTH + ANNOTATIONS_OFFSET}\n                        {...commonProps}\n                    />\n                );\n            })}\n        </g>\n    );\n}\n"],"mappings":";;;AAaA,SAAS,EAAU,GAA6C,GAAuD;AACnH,QAAO,EAAK,aAAa,EAAe,SAAS,EAAK,cAAc;;AA2BxE,SAAgB,EAAY,EACxB,aACA,sBACA,gBACA,0BACA,cACA,mBACA,YACA,YACA,UACA,WACA,WACA,UACA,UACA,QACA,UACA,eACA,eACA,kBACA,kBACA,iBACA,yBACgB;CAChB,IAAM,IAAkB,EAAY,QAAO,MAEnC,EAAe,SAAS,EAAK,SAAS,IACrC,CAAC,KAAW,CAAC,QAAQ,QAAQ,CAAC,SAAS,EAAK,SAAS,IACrD,CAAC,KAAW,CAAC,OAAO,SAAS,CAAC,SAAS,EAAK,SAAS,CAE5D,EACI,IAAkB,EAAgB,QAAO,MAAQ,EAAK,aAAa,OAAO,EAC1E,IAAmB,EAAgB,QAAO,MAAQ,EAAK,aAAa,QAAQ,EAC5E,IAAiB,EAAgB,QAAO,MAAQ,EAAK,aAAa,MAAM,EACxE,IAAoB,EAAgB,QAAO,MAAQ,EAAK,aAAa,SAAS,EAC9E,EAAC,gBAAa,mBAAe,GAE7B,IAAc;EAChB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACH;AACD,QACI,kBAAC,KAAD,EAAA,UAAA;EACK,EAAgB,KAAK,GAAM,MAEpB,kBAAC,GAAD;GAEI,YAAY;GACZ,YAAY,EAAsB,EAAK;GACvC,MAAM,EAAY,EAAK,YAAY,eAAe,EAAK,YAAY;GACnE,WAAW,EAAU,GAAM,EAAe;GAC1C,GAAG,EAAkB,KAAK,YAAY,IAAI,IAAA;GAC1C,GAAG,EAAkB,KAAK,YAAY;GACtC,GAAI;GACN,EARO,EAAK,GAQZ,CAER;EACD,EAAiB,KAAK,GAAM,MAErB,kBAAC,GAAD;GAEI,YAAY;GACZ,YAAY,EAAsB,EAAK;GACvC,MAAM,EAAY,EAAK,YAAY,eAAe,EAAK,YAAY;GACnE,WAAW,EAAU,GAAM,EAAe;GAC1C,GAAG,EAAkB,MAAM,YAAY,IAAI,IAAA,KAAA;GAC3C,GAAG,EAAkB,MAAM,YAAY;GACvC,GAAI;GACN,EARO,EAAK,GAQZ,CAER;EACD,EAAe,KAAK,GAAM,MAEnB,kBAAC,GAAD;GAEI,YAAY;GACZ,YAAY,EAAsB,EAAK;GACvC,MAAM,EAAY,EAAK,YAAY,eAAe,EAAK,YAAY;GACnE,WAAW,EAAU,GAAM,EAAe;GAC1C,GAAG,EAAkB,IAAI,YAAY;GACrC,GAAG,EAAkB,IAAI,YAAY,IAAI,IAAA;GACzC,GAAI;GACN,EARO,EAAK,GAQZ,CAER;EACD,EAAkB,KAAK,GAAM,MAEtB,kBAAC,GAAD;GAEI,YAAY;GACZ,YAAY,EAAsB,EAAK;GACvC,MAAM,EAAY,EAAK,YAAY,eAAe,EAAK,YAAY;GACnE,WAAW,EAAU,GAAM,EAAe;GAC1C,GAAG,EAAkB,OAAO,YAAY;GACxC,GAAG,EAAkB,OAAO,YAAY,IAAI,IAAA,KAAA;GAC5C,GAAI;GACN,EARO,EAAK,GAQZ,CAER;EACF,EAAA,CAAA"}

package/dist/heatmap/components/CanvasCells.js

@@ -1,85 +1,54 @@
-import { j } from "../../_virtual/jsx-runtime.js";
-import { r as M } from "../../_virtual/index.js";
-import { useFunction as L } from "../../utils/hooks/useFunction.js";
-function h(e, n, c, o, t, r, x, m, y, v, d, a) {
-  var l;
-  if (e) {
-    e.beginPath(), e.clearRect(0, 0, d, a);
-    for (const s of o)
-      for (const f of t) {
-        const i = (l = c == null ? void 0 : c[s]) == null ? void 0 : l[f];
-        if (!i)
-          continue;
-        const C = n.x(s), u = n.y(f);
-        e.fillStyle = i.value.dataSource === null ? y : v(i.normalizedValue.dataSource), e.fillRect(C, u, r, x);
-      }
-  }
+import { useFunction as e } from "../../utils/hooks/useFunction.js";
+import { useEffect as t, useRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+function i(e, t, n, r, i, a, o, s, c, l, u, d) {
+	if (e) {
+		e.beginPath(), e.clearRect(0, 0, u, d);
+		for (let s of r) for (let r of i) {
+			let i = n?.[s]?.[r];
+			if (!i) continue;
+			let u = t.x(s), d = t.y(r);
+			e.fillStyle = i.value.dataSource === null ? c : l(i.normalizedValue.dataSource), e.fillRect(u, d, a, o);
+		}
+	}
 }
-function k(e, n, c) {
-  let o = 0, t = e.length - 1;
-  for (; o <= t; ) {
-    const r = Math.floor((o + t) / 2);
-    if (Math.abs(e[r] - n) < c)
-      return e[r] >= n ? r - 1 : r;
-    n < e[r] ? t = r - 1 : o = r + 1;
-  }
-  return -1;
+function a(e, t, n) {
+	let r = 0, i = e.length - 1;
+	for (; r <= i;) {
+		let a = Math.floor((r + i) / 2);
+		if (Math.abs(e[a] - t) < n) return e[a] >= t ? a - 1 : a;
+		t < e[a] ? i = a - 1 : r = a + 1;
+	}
+	return -1;
 }
-function E(e, n, c, o) {
-  const t = k(n, e, o);
-  return t === -1 ? -1 : c[t];
+function o(e, t, n, r) {
+	let i = a(t, e, r);
+	return i === -1 ? -1 : n[i];
 }
-function z({
-  width: e,
-  height: n,
-  facetKey: c,
-  scales: o,
-  cells: t,
-  xKeys: r,
-  yKeys: x,
-  stepX: m,
-  stepY: y,
-  aes: v,
-  colorScale: d,
-  tooltipsData: a
-}) {
-  const l = M.useRef(null), s = window.devicePixelRatio || 1, f = M.useRef(null), i = () => {
-    h(
-      f.current,
-      o,
-      t,
-      r,
-      x,
-      m,
-      y,
-      v.cellStrokeColor,
-      v.emptyCellColor,
-      d,
-      e,
-      n
-    );
-  };
-  M.useEffect(() => {
-    const u = l.current;
-    f.current || (f.current = (u == null ? void 0 : u.getContext("2d")) ?? null), u && f.current && (u.style.width = e + "px", u.style.height = n + "px", f.current.scale(s, s)), i();
-  }, [e, n]), i();
-  const C = L((u) => {
-    var p;
-    const K = u.nativeEvent.offsetX, S = u.nativeEvent.offsetY, b = E(K, o.x.range(), o.x.domain(), m), g = E(S, o.y.range(), o.y.domain(), y), R = (p = t[b]) == null ? void 0 : p[g];
-    R ? a.onMouseEnter(R, c) : a.onMouseLeave();
-  });
-  return /* @__PURE__ */ j.jsx("foreignObject", { width: e, height: n, children: /* @__PURE__ */ j.jsx(
-    "canvas",
-    {
-      ref: l,
-      width: s * e,
-      height: s * n,
-      onMouseMove: C,
-      onMouseLeave: () => a.onMouseLeave()
-    }
-  ) });
+function s({ width: a, height: s, facetKey: c, scales: l, cells: u, xKeys: d, yKeys: f, stepX: p, stepY: m, aes: h, colorScale: g, tooltipsData: _ }) {
+	let v = n(null), y = window.devicePixelRatio || 1, b = n(null), x = () => {
+		i(b.current, l, u, d, f, p, m, h.cellStrokeColor, h.emptyCellColor, g, a, s);
+	};
+	t(() => {
+		let e = v.current;
+		b.current ||= e?.getContext("2d") ?? null, e && b.current && (e.style.width = a + "px", e.style.height = s + "px", b.current.scale(y, y)), x();
+	}, [a, s]), x();
+	let S = e((e) => {
+		let t = e.nativeEvent.offsetX, n = e.nativeEvent.offsetY, r = o(t, l.x.range(), l.x.domain(), p), i = o(n, l.y.range(), l.y.domain(), m), a = u[r]?.[i];
+		a ? _.onMouseEnter(a, c) : _.onMouseLeave();
+	});
+	return /* @__PURE__ */ r("foreignObject", {
+		width: a,
+		height: s,
+		children: /* @__PURE__ */ r("canvas", {
+			ref: v,
+			width: y * a,
+			height: y * s,
+			onMouseMove: S,
+			onMouseLeave: () => _.onMouseLeave()
+		})
+	});
 }
-export {
-  z as CanvasCells
-};
-//# sourceMappingURL=CanvasCells.js.map
+export { s as CanvasCells };
+
+//# sourceMappingURL=CanvasCells.js.map

package/dist/heatmap/components/CanvasCells.js.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasCells.js","sources":["../../../src/heatmap/components/CanvasCells.tsx"],"sourcesContent":["import type { CellHeatmap, GroupedCellsHeatmap } from '../getCells';\nimport type { AnnotationTooltipData, ChartScales } from './types';\nimport type { TooltipsData } from '../../common/Tooltip';\nimport type { HeatmapSettingsImpl } from '../HeatmapSettingsImpl';\nimport type { MouseEventHandler } from 'react';\nimport { useEffect, useRef } from 'react';\nimport { useFunction } from '../../utils/hooks/useFunction';\n\nfunction renderCells<T>(\n    ctx: CanvasRenderingContext2D | null,\n    scales: ChartScales,\n    cells: GroupedCellsHeatmap['facets'][keyof GroupedCellsHeatmap['facets']]['cells'],\n    xKeys: string[],\n    yKeys: string[],\n    stepX: number,\n    stepY: number,\n    strokeColor: string,\n    emptyCellColor: string,\n    colorScale: (value: T) => string,\n    width: number,\n    height: number\n) {\n    if (!ctx) {\n        return;\n    }\n    ctx.beginPath(); // Start a new path\n    ctx.clearRect(0, 0, width, height);\n    for (const xKey of xKeys) {\n        for (const yKey of yKeys) {\n            const cell = cells?.[xKey]?.[yKey];\n            if (!cell) {\n                continue;\n            }\n            const x = scales.x(xKey);\n            const y = scales.y(yKey);\n            ctx.fillStyle = cell.value.dataSource === null ? emptyCellColor : colorScale(cell.normalizedValue.dataSource as T);\n            ctx.fillRect(x, y, stepX, stepY); // Add a rectangle to the current path\n        }\n    }\n}\n\nfunction binarySearch(arr: number[], val: number, step: number) {\n    let start = 0;\n    let end = arr.length - 1;\n\n    while (start <= end) {\n        const mid = Math.floor((start + end) / 2);\n        if (Math.abs(arr[mid] - val) < step) {\n            return arr[mid] >= val ? mid - 1 : mid;\n        }\n\n        if (val < arr[mid]) {\n            end = mid - 1;\n        } else {\n            start = mid + 1;\n        }\n    }\n    return -1;\n}\nfunction searchKey(px: number, positions: number[], keys: string[], step: number) {\n    const pos = binarySearch(positions, px, step);\n    if (pos === -1) {\n        return -1;\n    }\n    return keys[pos];\n}\n\ninterface CanvasCellsProps<T> {\n    width: number,\n    height: number,\n    facetKey: string,\n    scales: ChartScales,\n    cells: GroupedCellsHeatmap['facets'][keyof GroupedCellsHeatmap['facets']]['cells'],\n    xKeys: string[],\n    yKeys: string[],\n    stepX: number,\n    stepY: number,\n    aes: HeatmapSettingsImpl['aes'];\n    colorScale: (value: T) => string,\n    tooltipsData: TooltipsData<CellHeatmap | AnnotationTooltipData>;\n}\n\nexport function CanvasCells<ValueType>({\n    width,\n    height,\n    facetKey,\n    scales,\n    cells,\n    xKeys,\n    yKeys,\n    stepX,\n    stepY,\n    aes,\n    colorScale,\n    tooltipsData,\n}: CanvasCellsProps<ValueType>) {\n    const canvasRef = useRef<HTMLCanvasElement | null>(null);\n    const canvasRatio = window.devicePixelRatio || 1;\n    const ctx = useRef<CanvasRenderingContext2D | null>(null);\n    const render = () => {\n        renderCells<ValueType>(\n            ctx.current,\n            scales,\n            cells,\n            xKeys,\n            yKeys, stepX, stepY,\n            aes.cellStrokeColor,\n            aes.emptyCellColor,\n            colorScale,\n            width,\n            height\n        );\n    };\n    useEffect(() => {\n        const canvasEl = canvasRef.current;\n        if (!ctx.current) {\n            ctx.current = canvasEl?.getContext('2d') ?? null;\n        }\n        if (canvasEl && ctx.current) {\n            canvasEl.style.width = width + 'px';\n            canvasEl.style.height = height + 'px';\n            ctx.current.scale(canvasRatio, canvasRatio);\n        }\n        render();\n    }, [width, height]);\n    render();\n\n    const moveOnCanvas: MouseEventHandler<HTMLCanvasElement> = useFunction((e: React.MouseEvent) => {\n        const x = e.nativeEvent.offsetX;\n        const y = e.nativeEvent.offsetY;\n        const xKey = searchKey(x, scales.x.range(), scales.x.domain(), stepX);\n        const yKey = searchKey(y, scales.y.range(), scales.y.domain(), stepY);\n        const activeCell = cells[xKey]?.[yKey];\n        if (activeCell) {\n            tooltipsData.onMouseEnter(activeCell, facetKey);\n        } else {\n            tooltipsData.onMouseLeave();\n        }\n    });\n\n    return (\n        <foreignObject width={width} height={height}>\n            <canvas\n                ref={canvasRef}\n                width={canvasRatio * width}\n                height={canvasRatio * height}\n                onMouseMove={moveOnCanvas}\n                onMouseLeave={() => tooltipsData.onMouseLeave()}\n            />\n        </foreignObject>\n    );\n}"],"names":["renderCells","ctx","scales","cells","xKeys","yKeys","stepX","stepY","strokeColor","emptyCellColor","colorScale","width","height","xKey","yKey","cell","_a","x","y","binarySearch","arr","val","step","start","end","mid","searchKey","px","positions","keys","pos","CanvasCells","facetKey","aes","tooltipsData","canvasRef","useRef","canvasRatio","render","useEffect","canvasEl","moveOnCanvas","useFunction","e","activeCell","jsx"],"mappings":";;;AAQA,SAASA,EACLC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACF;;AACE,MAAKX,GAGL;AAAA,IAAAA,EAAI,UAAA,GACJA,EAAI,UAAU,GAAG,GAAGU,GAAOC,CAAM;AACjC,eAAWC,KAAQT;AACf,iBAAWU,KAAQT,GAAO;AACtB,cAAMU,KAAOC,IAAAb,KAAA,gBAAAA,EAAQU,OAAR,gBAAAG,EAAgBF;AAC7B,YAAI,CAACC;AACD;AAEJ,cAAME,IAAIf,EAAO,EAAEW,CAAI,GACjBK,IAAIhB,EAAO,EAAEY,CAAI;AACvB,QAAAb,EAAI,YAAYc,EAAK,MAAM,eAAe,OAAON,IAAiBC,EAAWK,EAAK,gBAAgB,UAAe,GACjHd,EAAI,SAASgB,GAAGC,GAAGZ,GAAOC,CAAK;AAAA,MACnC;AAAA;AAER;AAEA,SAASY,EAAaC,GAAeC,GAAaC,GAAc;AAC5D,MAAIC,IAAQ,GACRC,IAAMJ,EAAI,SAAS;AAEvB,SAAOG,KAASC,KAAK;AACjB,UAAMC,IAAM,KAAK,OAAOF,IAAQC,KAAO,CAAC;AACxC,QAAI,KAAK,IAAIJ,EAAIK,CAAG,IAAIJ,CAAG,IAAIC;AAC3B,aAAOF,EAAIK,CAAG,KAAKJ,IAAMI,IAAM,IAAIA;AAGvC,IAAIJ,IAAMD,EAAIK,CAAG,IACbD,IAAMC,IAAM,IAEZF,IAAQE,IAAM;AAAA,EAEtB;AACA,SAAO;AACX;AACA,SAASC,EAAUC,GAAYC,GAAqBC,GAAgBP,GAAc;AAC9E,QAAMQ,IAAMX,EAAaS,GAAWD,GAAIL,CAAI;AAC5C,SAAIQ,MAAQ,KACD,KAEJD,EAAKC,CAAG;AACnB;AAiBO,SAASC,EAAuB;AAAA,EACnC,OAAApB;AAAA,EACA,QAAAC;AAAA,EACA,UAAAoB;AAAA,EACA,QAAA9B;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAA0B;AAAA,EACA,YAAAvB;AAAA,EACA,cAAAwB;AACJ,GAAgC;AAC5B,QAAMC,IAAYC,EAAAA,OAAiC,IAAI,GACjDC,IAAc,OAAO,oBAAoB,GACzCpC,IAAMmC,EAAAA,OAAwC,IAAI,GAClDE,IAAS,MAAM;AACjB,IAAAtC;AAAA,MACIC,EAAI;AAAA,MACJC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MAAOC;AAAA,MAAOC;AAAA,MACd0B,EAAI;AAAA,MACJA,EAAI;AAAA,MACJvB;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EAER;AACA2B,EAAAA,EAAAA,UAAU,MAAM;AACZ,UAAMC,IAAWL,EAAU;AAC3B,IAAKlC,EAAI,YACLA,EAAI,WAAUuC,KAAA,gBAAAA,EAAU,WAAW,UAAS,OAE5CA,KAAYvC,EAAI,YAChBuC,EAAS,MAAM,QAAQ7B,IAAQ,MAC/B6B,EAAS,MAAM,SAAS5B,IAAS,MACjCX,EAAI,QAAQ,MAAMoC,GAAaA,CAAW,IAE9CC,EAAA;AAAA,EACJ,GAAG,CAAC3B,GAAOC,CAAM,CAAC,GAClB0B,EAAA;AAEA,QAAMG,IAAqDC,EAAY,CAACC,MAAwB;;AAC5F,UAAM1B,IAAI0B,EAAE,YAAY,SAClBzB,IAAIyB,EAAE,YAAY,SAClB9B,IAAOa,EAAUT,GAAGf,EAAO,EAAE,MAAA,GAASA,EAAO,EAAE,OAAA,GAAUI,CAAK,GAC9DQ,IAAOY,EAAUR,GAAGhB,EAAO,EAAE,MAAA,GAASA,EAAO,EAAE,OAAA,GAAUK,CAAK,GAC9DqC,KAAa5B,IAAAb,EAAMU,CAAI,MAAV,gBAAAG,EAAcF;AACjC,IAAI8B,IACAV,EAAa,aAAaU,GAAYZ,CAAQ,IAE9CE,EAAa,aAAA;AAAA,EAErB,CAAC;AAED,SACIW,gBAAAA,EAAAA,IAAC,iBAAA,EAAc,OAAAlC,GAAc,QAAAC,GACzB,UAAAiC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKV;AAAA,MACL,OAAOE,IAAc1B;AAAA,MACrB,QAAQ0B,IAAczB;AAAA,MACtB,aAAa6B;AAAA,MACb,cAAc,MAAMP,EAAa,aAAA;AAAA,IAAa;AAAA,EAAA,GAEtD;AAER;"}
+{"version":3,"file":"CanvasCells.js","names":[],"sources":["../../../src/heatmap/components/CanvasCells.tsx"],"sourcesContent":["import type { CellHeatmap, GroupedCellsHeatmap } from '../getCells';\nimport type { AnnotationTooltipData, ChartScales } from './types';\nimport type { TooltipsData } from '../../common/Tooltip';\nimport type { HeatmapSettingsImpl } from '../HeatmapSettingsImpl';\nimport type { MouseEventHandler } from 'react';\nimport { useEffect, useRef } from 'react';\nimport { useFunction } from '../../utils/hooks/useFunction';\n\nfunction renderCells<T>(\n    ctx: CanvasRenderingContext2D | null,\n    scales: ChartScales,\n    cells: GroupedCellsHeatmap['facets'][keyof GroupedCellsHeatmap['facets']]['cells'],\n    xKeys: string[],\n    yKeys: string[],\n    stepX: number,\n    stepY: number,\n    strokeColor: string,\n    emptyCellColor: string,\n    colorScale: (value: T) => string,\n    width: number,\n    height: number\n) {\n    if (!ctx) {\n        return;\n    }\n    ctx.beginPath(); // Start a new path\n    ctx.clearRect(0, 0, width, height);\n    for (const xKey of xKeys) {\n        for (const yKey of yKeys) {\n            const cell = cells?.[xKey]?.[yKey];\n            if (!cell) {\n                continue;\n            }\n            const x = scales.x(xKey);\n            const y = scales.y(yKey);\n            ctx.fillStyle = cell.value.dataSource === null ? emptyCellColor : colorScale(cell.normalizedValue.dataSource as T);\n            ctx.fillRect(x, y, stepX, stepY); // Add a rectangle to the current path\n        }\n    }\n}\n\nfunction binarySearch(arr: number[], val: number, step: number) {\n    let start = 0;\n    let end = arr.length - 1;\n\n    while (start <= end) {\n        const mid = Math.floor((start + end) / 2);\n        if (Math.abs(arr[mid] - val) < step) {\n            return arr[mid] >= val ? mid - 1 : mid;\n        }\n\n        if (val < arr[mid]) {\n            end = mid - 1;\n        } else {\n            start = mid + 1;\n        }\n    }\n    return -1;\n}\nfunction searchKey(px: number, positions: number[], keys: string[], step: number) {\n    const pos = binarySearch(positions, px, step);\n    if (pos === -1) {\n        return -1;\n    }\n    return keys[pos];\n}\n\ninterface CanvasCellsProps<T> {\n    width: number,\n    height: number,\n    facetKey: string,\n    scales: ChartScales,\n    cells: GroupedCellsHeatmap['facets'][keyof GroupedCellsHeatmap['facets']]['cells'],\n    xKeys: string[],\n    yKeys: string[],\n    stepX: number,\n    stepY: number,\n    aes: HeatmapSettingsImpl['aes'];\n    colorScale: (value: T) => string,\n    tooltipsData: TooltipsData<CellHeatmap | AnnotationTooltipData>;\n}\n\nexport function CanvasCells<ValueType>({\n    width,\n    height,\n    facetKey,\n    scales,\n    cells,\n    xKeys,\n    yKeys,\n    stepX,\n    stepY,\n    aes,\n    colorScale,\n    tooltipsData,\n}: CanvasCellsProps<ValueType>) {\n    const canvasRef = useRef<HTMLCanvasElement | null>(null);\n    const canvasRatio = window.devicePixelRatio || 1;\n    const ctx = useRef<CanvasRenderingContext2D | null>(null);\n    const render = () => {\n        renderCells<ValueType>(\n            ctx.current,\n            scales,\n            cells,\n            xKeys,\n            yKeys, stepX, stepY,\n            aes.cellStrokeColor,\n            aes.emptyCellColor,\n            colorScale,\n            width,\n            height\n        );\n    };\n    useEffect(() => {\n        const canvasEl = canvasRef.current;\n        if (!ctx.current) {\n            ctx.current = canvasEl?.getContext('2d') ?? null;\n        }\n        if (canvasEl && ctx.current) {\n            canvasEl.style.width = width + 'px';\n            canvasEl.style.height = height + 'px';\n            ctx.current.scale(canvasRatio, canvasRatio);\n        }\n        render();\n    }, [width, height]);\n    render();\n\n    const moveOnCanvas: MouseEventHandler<HTMLCanvasElement> = useFunction((e: React.MouseEvent) => {\n        const x = e.nativeEvent.offsetX;\n        const y = e.nativeEvent.offsetY;\n        const xKey = searchKey(x, scales.x.range(), scales.x.domain(), stepX);\n        const yKey = searchKey(y, scales.y.range(), scales.y.domain(), stepY);\n        const activeCell = cells[xKey]?.[yKey];\n        if (activeCell) {\n            tooltipsData.onMouseEnter(activeCell, facetKey);\n        } else {\n            tooltipsData.onMouseLeave();\n        }\n    });\n\n    return (\n        <foreignObject width={width} height={height}>\n            <canvas\n                ref={canvasRef}\n                width={canvasRatio * width}\n                height={canvasRatio * height}\n                onMouseMove={moveOnCanvas}\n                onMouseLeave={() => tooltipsData.onMouseLeave()}\n            />\n        </foreignObject>\n    );\n}"],"mappings":";;;AAQA,SAAS,EACL,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACF;AACO,QAIL;EADA,EAAI,WAAW,EACf,EAAI,UAAU,GAAG,GAAG,GAAO,EAAO;AAClC,OAAK,IAAM,KAAQ,EACf,MAAK,IAAM,KAAQ,GAAO;GACtB,IAAM,IAAO,IAAQ,KAAQ;AAC7B,OAAI,CAAC,EACD;GAEJ,IAAM,IAAI,EAAO,EAAE,EAAK,EAClB,IAAI,EAAO,EAAE,EAAK;AAExB,GADA,EAAI,YAAY,EAAK,MAAM,eAAe,OAAO,IAAiB,EAAW,EAAK,gBAAgB,WAAgB,EAClH,EAAI,SAAS,GAAG,GAAG,GAAO,EAAM;;;;AAK5C,SAAS,EAAa,GAAe,GAAa,GAAc;CAC5D,IAAI,IAAQ,GACR,IAAM,EAAI,SAAS;AAEvB,QAAO,KAAS,IAAK;EACjB,IAAM,IAAM,KAAK,OAAO,IAAQ,KAAO,EAAE;AACzC,MAAI,KAAK,IAAI,EAAI,KAAO,EAAI,GAAG,EAC3B,QAAO,EAAI,MAAQ,IAAM,IAAM,IAAI;AAGvC,EAAI,IAAM,EAAI,KACV,IAAM,IAAM,IAEZ,IAAQ,IAAM;;AAGtB,QAAO;;AAEX,SAAS,EAAU,GAAY,GAAqB,GAAgB,GAAc;CAC9E,IAAM,IAAM,EAAa,GAAW,GAAI,EAAK;AAI7C,QAHI,MAAQ,KACD,KAEJ,EAAK;;AAkBhB,SAAgB,EAAuB,EACnC,UACA,WACA,aACA,WACA,UACA,UACA,UACA,UACA,UACA,QACA,eACA,mBAC4B;CAC5B,IAAM,IAAY,EAAiC,KAAK,EAClD,IAAc,OAAO,oBAAoB,GACzC,IAAM,EAAwC,KAAK,EACnD,UAAe;AACjB,IACI,EAAI,SACJ,GACA,GACA,GACA,GAAO,GAAO,GACd,EAAI,iBACJ,EAAI,gBACJ,GACA,GACA,EACH;;AAcL,CAZA,QAAgB;EACZ,IAAM,IAAW,EAAU;AAS3B,EARA,AACI,EAAI,YAAU,GAAU,WAAW,KAAK,IAAI,MAE5C,KAAY,EAAI,YAChB,EAAS,MAAM,QAAQ,IAAQ,MAC/B,EAAS,MAAM,SAAS,IAAS,MACjC,EAAI,QAAQ,MAAM,GAAa,EAAY,GAE/C,GAAQ;IACT,CAAC,GAAO,EAAO,CAAC,EACnB,GAAQ;CAER,IAAM,IAAqD,GAAa,MAAwB;EAC5F,IAAM,IAAI,EAAE,YAAY,SAClB,IAAI,EAAE,YAAY,SAClB,IAAO,EAAU,GAAG,EAAO,EAAE,OAAO,EAAE,EAAO,EAAE,QAAQ,EAAE,EAAM,EAC/D,IAAO,EAAU,GAAG,EAAO,EAAE,OAAO,EAAE,EAAO,EAAE,QAAQ,EAAE,EAAM,EAC/D,IAAa,EAAM,KAAQ;AACjC,EAAI,IACA,EAAa,aAAa,GAAY,EAAS,GAE/C,EAAa,cAAc;GAEjC;AAEF,QACI,kBAAC,iBAAD;EAAsB;EAAe;YACjC,kBAAC,UAAD;GACI,KAAK;GACL,OAAO,IAAc;GACrB,QAAQ,IAAc;GACtB,aAAa;GACb,oBAAoB,EAAa,cAAc;GACjD,CAAA;EACU,CAAA"}