@milaboratories/miplots4 1.0.176 → 1.0.177

package/dist/dendro/components/Chart.js

@@ -1,156 +1,119 @@
-import { j as e } from "../../_virtual/jsx-runtime.js";
-import T, { r as d } from "../../_virtual/index.js";
-import Y from "../../common/fonts.js";
-import { USER_UPDATE_EVENT as F, DIMMED_OPACITY as q, HEATMAP_LEFT_OFFSET as m } from "../constants.js";
-import { Heatmap as J } from "./Heatmap.js";
-import { Legend as K } from "./Legend.js";
-import { LinksGroup as R } from "./LinksGroup.js";
-import { NodesGroup as $ } from "./NodesGroup.js";
-function C(l) {
-  if (!l)
-    return null;
-  const n = /* @__PURE__ */ new Set();
-  let s = l;
-  for (; s; )
-    n.add(s.id), s = s.parent;
-  return n;
+import e from "../../common/fonts.js";
+import { DIMMED_OPACITY as t, USER_UPDATE_EVENT as n } from "../constants.js";
+import { Heatmap as r } from "./Heatmap.js";
+import { Legend as i } from "./Legend.js";
+import { LinksGroup as a } from "./LinksGroup.js";
+import { NodesGroup as o } from "./NodesGroup.js";
+import s, { useEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+function p(e) {
+	if (!e) return null;
+	let t = /* @__PURE__ */ new Set(), n = e;
+	for (; n;) t.add(n.id), n = n.parent;
+	return t;
 }
-function ot({
-  chartSettings: l,
-  chartSizes: n,
-  nodes: s,
-  links: p,
-  connectionType: W,
-  rootPosition: x,
-  edgeInheritance: _,
-  showNodes: g,
-  showEdges: j,
-  showLeavesLabels: A,
-  showNodesLabels: H,
-  aesGetters: h,
-  labels: I,
-  heatmapData: E,
-  heatmapScales: M,
-  heatmapStep: O,
-  heatmapColor: y,
-  heatmapLabels: N,
-  legendData: P,
-  onClick: S
-}) {
-  const U = d.useRef(null), [b, D] = d.useState(null), c = d.useRef(null);
-  d.useEffect(() => {
-    c.current && D(c.current);
-    function t() {
-      u(null), f(null);
-    }
-    function o(i) {
-      Object.entries(i.detail).forEach(([B, G]) => {
-        if (B === "selectedNode") {
-          const L = s.find((V) => V.data.rawIndexes[0] === G) ?? null;
-          u(C(L)), f(L);
-        }
-      });
-    }
-    return document.addEventListener("click", t), document.addEventListener(F, o), () => {
-      document.removeEventListener("click", t), document.removeEventListener(F, o);
-    };
-  }, []);
-  const [r, u] = T.useState(null), [a, f] = T.useState(null), v = r !== null, k = {
-    connectionType: W,
-    rootPosition: x,
-    edgeInheritance: _,
-    aesGetters: h
-  }, w = {
-    rootPosition: x,
-    showLeavesLabels: A,
-    showNodesLabels: H,
-    aesGetters: h,
-    labels: I,
-    onClick: S,
-    selectedNodeId: a == null ? void 0 : a.id,
-    onSelectedUpdate: (t) => {
-      u(C(t)), f(t);
-    }
-  };
-  return /* @__PURE__ */ e.jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: `0 0 ${n.totalWidth} ${n.totalHeight}`,
-      ref: U,
-      width: n.totalWidth,
-      height: n.totalHeight,
-      children: [
-        /* @__PURE__ */ e.jsx("defs", { children: Y }),
-        /* @__PURE__ */ e.jsxs("g", { transform: `translate(${n.marginLeft},${n.marginTop})`, fontFamily: "Manrope", children: [
-          /* @__PURE__ */ e.jsx("text", { x: "0", y: "-12", fontSize: "20", children: l.title.name }),
-          /* @__PURE__ */ e.jsxs("g", { opacity: v ? q : 1, children: [
-            j && /* @__PURE__ */ e.jsx(
-              R,
-              {
-                links: p.filter((t) => {
-                  const { source: o, target: i } = t;
-                  return !r || !(r.has(o.id ?? "") && r.has(i.id ?? ""));
-                }),
-                selected: !1,
-                ...k
-              }
-            ),
-            g && /* @__PURE__ */ e.jsx(
-              $,
-              {
-                nodes: s.filter((t) => !t.data.isFake && !(r != null && r.has(t.id ?? ""))),
-                ...w
-              }
-            )
-          ] }),
-          v && /* @__PURE__ */ e.jsxs("g", { children: [
-            j && /* @__PURE__ */ e.jsx(
-              R,
-              {
-                links: p.filter((t) => {
-                  const { source: o, target: i } = t;
-                  return r.has(o.id ?? "") && r.has(i.id ?? "");
-                }),
-                selected: !0,
-                ...k
-              }
-            ),
-            g && /* @__PURE__ */ e.jsx(
-              $,
-              {
-                nodes: s.filter((t) => !t.data.isFake && (r == null ? void 0 : r.has(t.id ?? ""))),
-                ...w
-              }
-            )
-          ] }),
-          E !== null && /* @__PURE__ */ e.jsx("g", { transform: `translate(${n.treeWidth + m},0)`, children: /* @__PURE__ */ e.jsx(
-            J,
-            {
-              heatmapData: E,
-              scales: M,
-              step: O,
-              colorScale: y,
-              chartSizes: n,
-              labels: N,
-              selectedNode: a,
-              tooltipsContainer: b
-            }
-          ) }),
-          l.legend.show && /* @__PURE__ */ e.jsx(
-            "g",
-            {
-              transform: `translate(${n.treeWidth + m + n.heatmapWidth + m},0)`,
-              children: /* @__PURE__ */ e.jsx(K, { legendData: P })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e.jsx("g", { ref: c })
-      ]
-    }
-  );
+function m({ chartSettings: m, chartSizes: h, nodes: g, links: _, connectionType: v, rootPosition: y, edgeInheritance: b, showNodes: x, showEdges: S, showLeavesLabels: C, showNodesLabels: w, aesGetters: T, labels: E, heatmapData: D, heatmapScales: O, heatmapStep: k, heatmapColor: A, heatmapLabels: j, legendData: M, onClick: N }) {
+	let P = l(null), [F, I] = u(null), L = l(null);
+	c(() => {
+		L.current && I(L.current);
+		function e() {
+			z(null), V(null);
+		}
+		function t(e) {
+			Object.entries(e.detail).forEach(([e, t]) => {
+				if (e === "selectedNode") {
+					let e = g.find((e) => e.data.rawIndexes[0] === t) ?? null;
+					z(p(e)), V(e);
+				}
+			});
+		}
+		return document.addEventListener("click", e), document.addEventListener(n, t), () => {
+			document.removeEventListener("click", e), document.removeEventListener(n, t);
+		};
+	}, []);
+	let [R, z] = s.useState(null), [B, V] = s.useState(null), H = R !== null, U = {
+		connectionType: v,
+		rootPosition: y,
+		edgeInheritance: b,
+		aesGetters: T
+	}, W = {
+		rootPosition: y,
+		showLeavesLabels: C,
+		showNodesLabels: w,
+		aesGetters: T,
+		labels: E,
+		onClick: N,
+		selectedNodeId: B?.id,
+		onSelectedUpdate: (e) => {
+			z(p(e)), V(e);
+		}
+	};
+	return /* @__PURE__ */ f("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: `0 0 ${h.totalWidth} ${h.totalHeight}`,
+		ref: P,
+		width: h.totalWidth,
+		height: h.totalHeight,
+		children: [
+			/* @__PURE__ */ d("defs", { children: e }),
+			/* @__PURE__ */ f("g", {
+				transform: `translate(${h.marginLeft},${h.marginTop})`,
+				fontFamily: "Manrope",
+				children: [
+					/* @__PURE__ */ d("text", {
+						x: "0",
+						y: "-12",
+						fontSize: "20",
+						children: m.title.name
+					}),
+					/* @__PURE__ */ f("g", {
+						opacity: H ? t : 1,
+						children: [S && /* @__PURE__ */ d(a, {
+							links: _.filter((e) => {
+								let { source: t, target: n } = e;
+								return !R || !(R.has(t.id ?? "") && R.has(n.id ?? ""));
+							}),
+							selected: !1,
+							...U
+						}), x && /* @__PURE__ */ d(o, {
+							nodes: g.filter((e) => !e.data.isFake && !R?.has(e.id ?? "")),
+							...W
+						})]
+					}),
+					H && /* @__PURE__ */ f("g", { children: [S && /* @__PURE__ */ d(a, {
+						links: _.filter((e) => {
+							let { source: t, target: n } = e;
+							return R.has(t.id ?? "") && R.has(n.id ?? "");
+						}),
+						selected: !0,
+						...U
+					}), x && /* @__PURE__ */ d(o, {
+						nodes: g.filter((e) => !e.data.isFake && R?.has(e.id ?? "")),
+						...W
+					})] }),
+					D !== null && /* @__PURE__ */ d("g", {
+						transform: `translate(${h.treeWidth + 30},0)`,
+						children: /* @__PURE__ */ d(r, {
+							heatmapData: D,
+							scales: O,
+							step: k,
+							colorScale: A,
+							chartSizes: h,
+							labels: j,
+							selectedNode: B,
+							tooltipsContainer: F
+						})
+					}),
+					m.legend.show && /* @__PURE__ */ d("g", {
+						transform: `translate(${h.treeWidth + 30 + h.heatmapWidth + 30},0)`,
+						children: /* @__PURE__ */ d(i, { legendData: M })
+					})
+				]
+			}),
+			/* @__PURE__ */ d("g", { ref: L })
+		]
+	});
 }
-export {
-  ot as Chart
-};
-//# sourceMappingURL=Chart.js.map
+export { m as Chart };
+
+//# sourceMappingURL=Chart.js.map

package/dist/dendro/components/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","sources":["../../../src/dendro/components/Chart.tsx"],"sourcesContent":["import type { HierarchyPointLink, HierarchyPointNode } from 'd3-hierarchy';\nimport React, { useEffect, useRef, useState } from 'react';\nimport fonts from '../../common/fonts';\nimport type { ClickEventData, ColumnName, DataValue } from '../../types';\nimport { DIMMED_OPACITY, HEATMAP_LEFT_OFFSET, USER_UPDATE_EVENT } from '../constants';\nimport type { DendroSettingsImpl } from '../DendroSettingsImpl';\nimport type { HeatmapData } from '../getHeatmapData';\nimport type { TreeNodeData } from '../getHierarchyData';\nimport { Heatmap } from './Heatmap';\nimport { Legend } from './Legend';\nimport { LinksGroup } from './LinksGroup';\nimport { NodesGroup } from './NodesGroup';\nimport type { ChartScales, ChartSizes, LegendData } from './types';\n\nfunction getSelectedPath(node: HierarchyPointNode<TreeNodeData> | null) {\n    if (!node) {\n        return null;\n    }\n    const set = new Set<string>();\n    let current: HierarchyPointNode<TreeNodeData> | null = node;\n    while (current) {\n        set.add(current.id as string);\n        current = current.parent;\n    }\n    return set;\n}\n\ninterface ChartProps {\n    chartSettings: DendroSettingsImpl['chartSettings'];\n    chartSizes: ChartSizes;\n    nodes: HierarchyPointNode<TreeNodeData>[];\n    links: HierarchyPointLink<TreeNodeData>[];\n    connectionType: DendroSettingsImpl['connectionType'];\n    rootPosition: DendroSettingsImpl['rootPosition'];\n    edgeInheritance: DendroSettingsImpl['edgeInheritance'];\n    showNodes: DendroSettingsImpl['showNodes'];\n    showEdges: DendroSettingsImpl['showEdges'];\n    showLeavesLabels: DendroSettingsImpl['showLeavesLabels'];\n    showNodesLabels: DendroSettingsImpl['showNodesLabels'];\n    aesGetters: {\n        nodeShape: (idx: number) => string;\n        nodeColor: (idx: number) => string;\n        nodeSize: (idx: number) => number;\n        lineShape: (idx: number) => string;\n        lineColor: (idx: number) => string;\n    };\n    labels: ColumnName;\n    heatmapData: HeatmapData | null;\n    heatmapScales: ChartScales;\n    heatmapStep: {x: number; y: number};\n    heatmapColor: (v: DataValue) => string;\n    heatmapLabels: string[];\n    legendData: LegendData;\n    onClick: (data: ClickEventData) => void;\n}\n\nexport function Chart({\n    chartSettings,\n    chartSizes,\n    nodes,\n    links,\n    connectionType,\n    rootPosition,\n    edgeInheritance,\n    showNodes,\n    showEdges,\n    showLeavesLabels,\n    showNodesLabels,\n    aesGetters,\n    labels,\n    heatmapData,\n    heatmapScales,\n    heatmapStep,\n    heatmapColor,\n    heatmapLabels,\n    legendData,\n    onClick,\n}: ChartProps) {\n    const ref = useRef(null);\n    const [tooltipsContainer, setTooltipsContainer] = useState<SVGGElement|null>(null);\n    const tooltipsRef = useRef<SVGGElement>(null);\n    useEffect(() => {\n        if (tooltipsRef.current) {\n            setTooltipsContainer(tooltipsRef.current);\n        }\n        function onClick () {\n            setSelectedPath(null);\n            setSelectedNode(null);\n        }\n        function onOuterEvent (e: CustomEvent<Record<string, unknown>>) {\n            const data = Object.entries(e.detail) as [string, unknown][];\n            \n            data.forEach(([key, value]) => {\n                if (key === 'selectedNode') {\n                    // TODO: what is value ???? should be row index\n                    const node = nodes.find((node) => node.data.rawIndexes[0] === value) ?? null;\n                    setSelectedPath(getSelectedPath(node));\n                    setSelectedNode(node);\n                }\n            });\n        }\n        document.addEventListener('click', onClick);\n        // @ts-ignore\n        document.addEventListener(USER_UPDATE_EVENT, onOuterEvent);\n        return () => {\n            document.removeEventListener('click', onClick);\n            // @ts-ignore\n            document.removeEventListener(USER_UPDATE_EVENT, onOuterEvent);\n        };\n    }, []);\n\n    const [selectedPath, setSelectedPath] = React.useState<Set<string> | null>(null);\n    const [selectedNode, setSelectedNode] = React.useState<HierarchyPointNode<TreeNodeData> | null>(null);\n    const somethingSelected = selectedPath !== null;\n\n    const linksProps = {\n        connectionType,\n        rootPosition,\n        edgeInheritance,\n        aesGetters,\n    };\n    const nodesProps = {\n        rootPosition,\n        showLeavesLabels,\n        showNodesLabels,\n        aesGetters,\n        labels,\n        onClick,\n        selectedNodeId: selectedNode?.id,\n        onSelectedUpdate: (node: HierarchyPointNode<TreeNodeData>) => {\n            setSelectedPath(getSelectedPath(node));\n            setSelectedNode(node);\n        }\n    };\n\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox={`0 0 ${chartSizes.totalWidth} ${chartSizes.totalHeight}`}\n            ref={ref}\n            width={chartSizes.totalWidth}\n            height={chartSizes.totalHeight}\n        >\n            <defs>{fonts}</defs>\n            <g transform={`translate(${chartSizes.marginLeft},${chartSizes.marginTop})`} fontFamily=\"Manrope\">\n                <text x=\"0\" y=\"-12\" fontSize=\"20\">\n                    {chartSettings.title.name}\n                </text>\n                <g opacity={somethingSelected ? DIMMED_OPACITY : 1}>\n                    {showEdges && (\n                        <LinksGroup\n                            links={links.filter(link => {  // dimmed links if something selected or all links\n                                const {source, target} = link;\n                                return (\n                                    !selectedPath ||\n                                    !(selectedPath.has(source.id ?? '') && selectedPath.has(target.id ?? ''))\n                                );\n                            })}\n                            selected={false}\n                            {...linksProps}\n                        />\n                    )}\n                    {showNodes && (\n                        <NodesGroup\n                            nodes={nodes.filter(node => !node.data.isFake && !selectedPath?.has(node.id ?? ''))}\n                            {...nodesProps}\n                        />\n                    )}\n                </g>\n                {somethingSelected && (\n                    <g>\n                        {showEdges && (\n                            <LinksGroup\n                                links={links.filter(link => {\n                                    const {source, target} = link;\n                                    return selectedPath.has(source.id ?? '') && selectedPath.has(target.id ?? '');\n                                })}\n                                selected={true}\n                                {...linksProps}\n                            />\n                        )}\n                        {showNodes && (\n                            <NodesGroup\n                                nodes={nodes.filter(node => !node.data.isFake && selectedPath?.has(node.id ?? ''))}\n                                {...nodesProps}\n                            />\n                        )}\n                    </g>\n                )}\n                {heatmapData !== null && (\n                    <g transform={`translate(${chartSizes.treeWidth + HEATMAP_LEFT_OFFSET},0)`}>\n                        <Heatmap\n                            heatmapData={heatmapData}\n                            scales={heatmapScales}\n                            step={heatmapStep}\n                            colorScale={heatmapColor}\n                            chartSizes={chartSizes}\n                            labels={heatmapLabels}\n                            selectedNode={selectedNode}\n                            tooltipsContainer={tooltipsContainer}\n                        />\n                    </g>\n                )}\n                {chartSettings.legend.show && (\n                    <g\n                        transform={`translate(${\n                            chartSizes.treeWidth + HEATMAP_LEFT_OFFSET + chartSizes.heatmapWidth + HEATMAP_LEFT_OFFSET\n                        },0)`}\n                    >\n                        <Legend legendData={legendData} />\n                    </g>\n                )}\n            </g>\n            <g ref={tooltipsRef} />\n        </svg>\n    );\n}\n"],"names":["getSelectedPath","node","set","current","Chart","chartSettings","chartSizes","nodes","links","connectionType","rootPosition","edgeInheritance","showNodes","showEdges","showLeavesLabels","showNodesLabels","aesGetters","labels","heatmapData","heatmapScales","heatmapStep","heatmapColor","heatmapLabels","legendData","onClick","ref","useRef","tooltipsContainer","setTooltipsContainer","useState","tooltipsRef","useEffect","setSelectedPath","setSelectedNode","onOuterEvent","e","key","value","USER_UPDATE_EVENT","selectedPath","React","selectedNode","somethingSelected","linksProps","nodesProps","jsxs","jsx","fonts","DIMMED_OPACITY","LinksGroup","link","source","target","NodesGroup","HEATMAP_LEFT_OFFSET","Heatmap","Legend"],"mappings":"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"}
+{"version":3,"file":"Chart.js","names":[],"sources":["../../../src/dendro/components/Chart.tsx"],"sourcesContent":["import type { HierarchyPointLink, HierarchyPointNode } from 'd3-hierarchy';\nimport React, { useEffect, useRef, useState } from 'react';\nimport fonts from '../../common/fonts';\nimport type { ClickEventData, ColumnName, DataValue } from '../../types';\nimport { DIMMED_OPACITY, HEATMAP_LEFT_OFFSET, USER_UPDATE_EVENT } from '../constants';\nimport type { DendroSettingsImpl } from '../DendroSettingsImpl';\nimport type { HeatmapData } from '../getHeatmapData';\nimport type { TreeNodeData } from '../getHierarchyData';\nimport { Heatmap } from './Heatmap';\nimport { Legend } from './Legend';\nimport { LinksGroup } from './LinksGroup';\nimport { NodesGroup } from './NodesGroup';\nimport type { ChartScales, ChartSizes, LegendData } from './types';\n\nfunction getSelectedPath(node: HierarchyPointNode<TreeNodeData> | null) {\n    if (!node) {\n        return null;\n    }\n    const set = new Set<string>();\n    let current: HierarchyPointNode<TreeNodeData> | null = node;\n    while (current) {\n        set.add(current.id as string);\n        current = current.parent;\n    }\n    return set;\n}\n\ninterface ChartProps {\n    chartSettings: DendroSettingsImpl['chartSettings'];\n    chartSizes: ChartSizes;\n    nodes: HierarchyPointNode<TreeNodeData>[];\n    links: HierarchyPointLink<TreeNodeData>[];\n    connectionType: DendroSettingsImpl['connectionType'];\n    rootPosition: DendroSettingsImpl['rootPosition'];\n    edgeInheritance: DendroSettingsImpl['edgeInheritance'];\n    showNodes: DendroSettingsImpl['showNodes'];\n    showEdges: DendroSettingsImpl['showEdges'];\n    showLeavesLabels: DendroSettingsImpl['showLeavesLabels'];\n    showNodesLabels: DendroSettingsImpl['showNodesLabels'];\n    aesGetters: {\n        nodeShape: (idx: number) => string;\n        nodeColor: (idx: number) => string;\n        nodeSize: (idx: number) => number;\n        lineShape: (idx: number) => string;\n        lineColor: (idx: number) => string;\n    };\n    labels: ColumnName;\n    heatmapData: HeatmapData | null;\n    heatmapScales: ChartScales;\n    heatmapStep: {x: number; y: number};\n    heatmapColor: (v: DataValue) => string;\n    heatmapLabels: string[];\n    legendData: LegendData;\n    onClick: (data: ClickEventData) => void;\n}\n\nexport function Chart({\n    chartSettings,\n    chartSizes,\n    nodes,\n    links,\n    connectionType,\n    rootPosition,\n    edgeInheritance,\n    showNodes,\n    showEdges,\n    showLeavesLabels,\n    showNodesLabels,\n    aesGetters,\n    labels,\n    heatmapData,\n    heatmapScales,\n    heatmapStep,\n    heatmapColor,\n    heatmapLabels,\n    legendData,\n    onClick,\n}: ChartProps) {\n    const ref = useRef(null);\n    const [tooltipsContainer, setTooltipsContainer] = useState<SVGGElement|null>(null);\n    const tooltipsRef = useRef<SVGGElement>(null);\n    useEffect(() => {\n        if (tooltipsRef.current) {\n            setTooltipsContainer(tooltipsRef.current);\n        }\n        function onClick () {\n            setSelectedPath(null);\n            setSelectedNode(null);\n        }\n        function onOuterEvent (e: CustomEvent<Record<string, unknown>>) {\n            const data = Object.entries(e.detail) as [string, unknown][];\n            \n            data.forEach(([key, value]) => {\n                if (key === 'selectedNode') {\n                    // TODO: what is value ???? should be row index\n                    const node = nodes.find((node) => node.data.rawIndexes[0] === value) ?? null;\n                    setSelectedPath(getSelectedPath(node));\n                    setSelectedNode(node);\n                }\n            });\n        }\n        document.addEventListener('click', onClick);\n        // @ts-ignore\n        document.addEventListener(USER_UPDATE_EVENT, onOuterEvent);\n        return () => {\n            document.removeEventListener('click', onClick);\n            // @ts-ignore\n            document.removeEventListener(USER_UPDATE_EVENT, onOuterEvent);\n        };\n    }, []);\n\n    const [selectedPath, setSelectedPath] = React.useState<Set<string> | null>(null);\n    const [selectedNode, setSelectedNode] = React.useState<HierarchyPointNode<TreeNodeData> | null>(null);\n    const somethingSelected = selectedPath !== null;\n\n    const linksProps = {\n        connectionType,\n        rootPosition,\n        edgeInheritance,\n        aesGetters,\n    };\n    const nodesProps = {\n        rootPosition,\n        showLeavesLabels,\n        showNodesLabels,\n        aesGetters,\n        labels,\n        onClick,\n        selectedNodeId: selectedNode?.id,\n        onSelectedUpdate: (node: HierarchyPointNode<TreeNodeData>) => {\n            setSelectedPath(getSelectedPath(node));\n            setSelectedNode(node);\n        }\n    };\n\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox={`0 0 ${chartSizes.totalWidth} ${chartSizes.totalHeight}`}\n            ref={ref}\n            width={chartSizes.totalWidth}\n            height={chartSizes.totalHeight}\n        >\n            <defs>{fonts}</defs>\n            <g transform={`translate(${chartSizes.marginLeft},${chartSizes.marginTop})`} fontFamily=\"Manrope\">\n                <text x=\"0\" y=\"-12\" fontSize=\"20\">\n                    {chartSettings.title.name}\n                </text>\n                <g opacity={somethingSelected ? DIMMED_OPACITY : 1}>\n                    {showEdges && (\n                        <LinksGroup\n                            links={links.filter(link => {  // dimmed links if something selected or all links\n                                const {source, target} = link;\n                                return (\n                                    !selectedPath ||\n                                    !(selectedPath.has(source.id ?? '') && selectedPath.has(target.id ?? ''))\n                                );\n                            })}\n                            selected={false}\n                            {...linksProps}\n                        />\n                    )}\n                    {showNodes && (\n                        <NodesGroup\n                            nodes={nodes.filter(node => !node.data.isFake && !selectedPath?.has(node.id ?? ''))}\n                            {...nodesProps}\n                        />\n                    )}\n                </g>\n                {somethingSelected && (\n                    <g>\n                        {showEdges && (\n                            <LinksGroup\n                                links={links.filter(link => {\n                                    const {source, target} = link;\n                                    return selectedPath.has(source.id ?? '') && selectedPath.has(target.id ?? '');\n                                })}\n                                selected={true}\n                                {...linksProps}\n                            />\n                        )}\n                        {showNodes && (\n                            <NodesGroup\n                                nodes={nodes.filter(node => !node.data.isFake && selectedPath?.has(node.id ?? ''))}\n                                {...nodesProps}\n                            />\n                        )}\n                    </g>\n                )}\n                {heatmapData !== null && (\n                    <g transform={`translate(${chartSizes.treeWidth + HEATMAP_LEFT_OFFSET},0)`}>\n                        <Heatmap\n                            heatmapData={heatmapData}\n                            scales={heatmapScales}\n                            step={heatmapStep}\n                            colorScale={heatmapColor}\n                            chartSizes={chartSizes}\n                            labels={heatmapLabels}\n                            selectedNode={selectedNode}\n                            tooltipsContainer={tooltipsContainer}\n                        />\n                    </g>\n                )}\n                {chartSettings.legend.show && (\n                    <g\n                        transform={`translate(${\n                            chartSizes.treeWidth + HEATMAP_LEFT_OFFSET + chartSizes.heatmapWidth + HEATMAP_LEFT_OFFSET\n                        },0)`}\n                    >\n                        <Legend legendData={legendData} />\n                    </g>\n                )}\n            </g>\n            <g ref={tooltipsRef} />\n        </svg>\n    );\n}\n"],"mappings":"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"}

package/dist/dendro/components/Heatmap.js

@@ -1,81 +1,78 @@
-import { j as i } from "../../_virtual/jsx-runtime.js";
-import { r as E } from "../../_virtual/index.js";
-import { Tooltip as O } from "../../common/Tooltip.js";
-import { BLACK as L } from "../../constants.js";
-import { MARGIN as m, HEATMAP_LEFT_OFFSET as c, DIMMED_OPACITY as C, COLOR_EMPTY as W } from "../constants.js";
-function A(e) {
-  if (e === null)
-    return "null";
-  if (typeof e == "number") {
-    const o = Math.floor(e), n = e - o;
-    return o + Number(n.toPrecision(2));
-  }
-  return e;
+import "../../constants.js";
+import { COLOR_EMPTY as e, DIMMED_OPACITY as t, MARGIN as n } from "../constants.js";
+import { Tooltip as r } from "../../common/Tooltip.js";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+function s(e) {
+	if (e === null) return "null";
+	if (typeof e == "number") {
+		let t = Math.floor(e), n = e - t;
+		return t + Number(n.toPrecision(2));
+	}
+	return e;
 }
-function I(e, o) {
-  return [`X: ${o[e.x]}`, `Node: ${e.y}`, `Value: ${A(e.value)}`];
+function c(e, t) {
+	return [
+		`X: ${t[e.x]}`,
+		`Node: ${e.y}`,
+		`Value: ${s(e.value)}`
+	];
 }
-function H({
-  heatmapData: e,
-  scales: o,
-  step: n,
-  colorScale: g,
-  tooltipsContainer: l,
-  chartSizes: u,
-  selectedNode: p,
-  labels: f
-}) {
-  const { xKeys: s, yKeys: j, cells: d, meta: M } = e, [a, h] = E.useState(null), y = {
-    left: u.treeWidth + c + m.LEFT,
-    right: u.heatmapWidth + m.RIGHT,
-    top: m.TOP,
-    bottom: u.heatmapHeight + m.BOTTOM
-  };
-  return /* @__PURE__ */ i.jsxs("g", { onMouseLeave: () => h(null), children: [
-    f.length && /* @__PURE__ */ i.jsx("g", { transform: "translate(0,-8)", children: s.map((r, x) => /* @__PURE__ */ i.jsxs("text", { x: o.x(r) + 2, fontWeight: "500", children: [
-      /* @__PURE__ */ i.jsx("title", { children: M.xLabels[r] }),
-      f[x]
-    ] }, r)) }),
-    s.map(
-      (r) => j.map((x) => {
-        var T;
-        const t = (T = d == null ? void 0 : d[r]) == null ? void 0 : T[x];
-        return /* @__PURE__ */ i.jsx(
-          "rect",
-          {
-            x: o.x(r),
-            y: o.y(x),
-            width: n.x,
-            height: n.y,
-            stroke: "white",
-            strokeWidth: "1px",
-            fill: t ? g(t == null ? void 0 : t.value) : W,
-            onMouseOver: () => {
-              (t == null ? void 0 : t.value) !== null && typeof (t == null ? void 0 : t.value) < "u" ? h(t) : h(null);
-            },
-            opacity: p && p.data.rawIndexes[0] !== (t == null ? void 0 : t.idx) ? C : 1
-          },
-          t ? t.id : `${r}_${x}`
-        );
-      })
-    ),
-    f.length && /* @__PURE__ */ i.jsx("line", { x1: "0", x2: u.heatmapWidth, y1: "0", y2: "0", stroke: L, strokeWidth: "1px" }),
-    a && l && /* @__PURE__ */ i.jsx(
-      O,
-      {
-        content: I(a, e.meta.xLabels),
-        x: o.x(a.x) + n.x / 2,
-        y: o.y(a.y) + n.y / 2,
-        offset: s.length > 1 ? n.x / 2 : 0,
-        active: !0,
-        fixed: !1,
-        sideDistances: y,
-        container: l
-      }
-    )
-  ] });
+function l({ heatmapData: s, scales: l, step: u, colorScale: d, tooltipsContainer: f, chartSizes: p, selectedNode: m, labels: h }) {
+	let { xKeys: g, yKeys: _, cells: v, meta: y } = s, [b, x] = i(null), S = {
+		left: p.treeWidth + 30 + n.LEFT,
+		right: p.heatmapWidth + n.RIGHT,
+		top: n.TOP,
+		bottom: p.heatmapHeight + n.BOTTOM
+	};
+	return /* @__PURE__ */ o("g", {
+		onMouseLeave: () => x(null),
+		children: [
+			h.length && /* @__PURE__ */ a("g", {
+				transform: "translate(0,-8)",
+				children: g.map((e, t) => /* @__PURE__ */ o("text", {
+					x: l.x(e) + 2,
+					fontWeight: "500",
+					children: [/* @__PURE__ */ a("title", { children: y.xLabels[e] }), h[t]]
+				}, e))
+			}),
+			g.map((n) => _.map((r) => {
+				let i = v?.[n]?.[r];
+				return /* @__PURE__ */ a("rect", {
+					x: l.x(n),
+					y: l.y(r),
+					width: u.x,
+					height: u.y,
+					stroke: "white",
+					strokeWidth: "1px",
+					fill: i ? d(i?.value) : e,
+					onMouseOver: () => {
+						i?.value !== null && i?.value !== void 0 ? x(i) : x(null);
+					},
+					opacity: m && m.data.rawIndexes[0] !== i?.idx ? t : 1
+				}, i ? i.id : `${n}_${r}`);
+			})),
+			h.length && /* @__PURE__ */ a("line", {
+				x1: "0",
+				x2: p.heatmapWidth,
+				y1: "0",
+				y2: "0",
+				stroke: "#110529",
+				strokeWidth: "1px"
+			}),
+			b && f && /* @__PURE__ */ a(r, {
+				content: c(b, s.meta.xLabels),
+				x: l.x(b.x) + u.x / 2,
+				y: l.y(b.y) + u.y / 2,
+				offset: g.length > 1 ? u.x / 2 : 0,
+				active: !0,
+				fixed: !1,
+				sideDistances: S,
+				container: f
+			})
+		]
+	});
 }
-export {
-  H as Heatmap
-};
-//# sourceMappingURL=Heatmap.js.map
+export { l as Heatmap };
+
+//# sourceMappingURL=Heatmap.js.map

package/dist/dendro/components/Heatmap.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heatmap.js","sources":["../../../src/dendro/components/Heatmap.tsx"],"sourcesContent":["import type { HierarchyPointNode } from 'd3-hierarchy';\nimport { useState } from 'react';\nimport { Tooltip } from '../../common/Tooltip';\nimport { BLACK } from '../../constants';\nimport type { DataValue } from '../../types';\nimport { COLOR_EMPTY, DIMMED_OPACITY, HEATMAP_LEFT_OFFSET, MARGIN } from '../constants';\nimport type { HeatmapData } from '../getHeatmapData';\nimport type { TreeNodeData } from '../getHierarchyData';\nimport type { Cell, ChartScales, ChartSizes } from './types';\n\nfunction formatCellValue(v: DataValue): number | string {\n    if (v === null) {\n        return 'null';\n    }\n    if (typeof v === 'number') {\n        const whole = Math.floor(v);\n        const decimal = v - whole;\n        return whole + Number(decimal.toPrecision(2));\n    }\n    return v;\n}\n\nfunction getTooltipContent(cell: Cell, labels:Record<string, string>) {\n    return [`X: ${labels[cell.x]}`, `Node: ${cell.y}`, `Value: ${formatCellValue(cell.value)}`];\n}\n\nexport function Heatmap({\n    heatmapData,\n    scales,\n    step,\n    colorScale,\n    tooltipsContainer,\n    chartSizes,\n    selectedNode,\n    labels\n}: {\n    heatmapData: HeatmapData;\n    scales: ChartScales;\n    step: {x: number; y: number};\n    colorScale: (value: DataValue) => string;\n    chartSizes: ChartSizes;\n    tooltipsContainer: Element | null;\n    selectedNode: HierarchyPointNode<TreeNodeData> | null,\n    labels: string[]\n}) {\n    const {xKeys, yKeys, cells, meta} = heatmapData;\n    const [selectedCell, setSelectedCell] = useState<Cell | null>(null);\n    const sideDistances = {\n        left: chartSizes.treeWidth + HEATMAP_LEFT_OFFSET + MARGIN.LEFT,\n        right: chartSizes.heatmapWidth + MARGIN.RIGHT,\n        top: MARGIN.TOP,\n        bottom: chartSizes.heatmapHeight + MARGIN.BOTTOM,\n    };\n    return (\n        <g onMouseLeave={() => setSelectedCell(null)}>\n            {labels.length && (\n                <g transform={'translate(0,-8)'} >\n                    {xKeys.map((key, idx) => (\n                        <text x={scales.x(key) + 2} key={key} fontWeight=\"500\">\n                            <title>{meta.xLabels[key]}</title>\n                            {labels[idx]}\n                        </text>\n                    ))}\n                </g>\n            )}\n            {/* cells */}\n            {xKeys.map(xKey =>\n                yKeys.map(yKey => {\n                    const cell = cells?.[xKey]?.[yKey];\n                    return (\n                        <rect\n                            key={cell ? cell.id : `${xKey}_${yKey}`}\n                            x={scales.x(xKey)}\n                            y={scales.y(yKey)}\n                            width={step.x}\n                            height={step.y}\n                            stroke=\"white\"\n                            strokeWidth=\"1px\"\n                            fill={cell ? colorScale(cell?.value) : COLOR_EMPTY}\n                            onMouseOver={() => {\n                                if (cell?.value !== null && typeof cell?.value !== 'undefined') {\n                                    setSelectedCell(cell);\n                                } else {\n                                    setSelectedCell(null);\n                                }\n                            }}\n                            opacity={selectedNode && selectedNode.data.rawIndexes[0] !== cell?.idx ? DIMMED_OPACITY : 1}\n                        />\n                    );\n                })\n            )}\n            {labels.length && (\n                <line x1=\"0\" x2={chartSizes.heatmapWidth} y1=\"0\" y2=\"0\" stroke={BLACK} strokeWidth=\"1px\"/>\n            )}\n            {selectedCell && tooltipsContainer && (\n                <Tooltip\n                    content={getTooltipContent(selectedCell, heatmapData.meta.xLabels)}\n                    x={scales.x(selectedCell.x) + step.x / 2}\n                    y={scales.y(selectedCell.y) + step.y / 2}\n                    offset={xKeys.length > 1 ? step.x / 2 : 0}\n                    active={true}\n                    fixed={false}\n                    sideDistances={sideDistances}\n                    container={tooltipsContainer}\n                />\n            )}\n        </g>\n    );\n}\n"],"names":["formatCellValue","v","whole","decimal","getTooltipContent","cell","labels","Heatmap","heatmapData","scales","step","colorScale","tooltipsContainer","chartSizes","selectedNode","xKeys","yKeys","cells","meta","selectedCell","setSelectedCell","useState","sideDistances","HEATMAP_LEFT_OFFSET","MARGIN","jsx","key","idx","jsxs","xKey","yKey","_a","COLOR_EMPTY","DIMMED_OPACITY","BLACK","Tooltip"],"mappings":"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"}
+{"version":3,"file":"Heatmap.js","names":[],"sources":["../../../src/dendro/components/Heatmap.tsx"],"sourcesContent":["import type { HierarchyPointNode } from 'd3-hierarchy';\nimport { useState } from 'react';\nimport { Tooltip } from '../../common/Tooltip';\nimport { BLACK } from '../../constants';\nimport type { DataValue } from '../../types';\nimport { COLOR_EMPTY, DIMMED_OPACITY, HEATMAP_LEFT_OFFSET, MARGIN } from '../constants';\nimport type { HeatmapData } from '../getHeatmapData';\nimport type { TreeNodeData } from '../getHierarchyData';\nimport type { Cell, ChartScales, ChartSizes } from './types';\n\nfunction formatCellValue(v: DataValue): number | string {\n    if (v === null) {\n        return 'null';\n    }\n    if (typeof v === 'number') {\n        const whole = Math.floor(v);\n        const decimal = v - whole;\n        return whole + Number(decimal.toPrecision(2));\n    }\n    return v;\n}\n\nfunction getTooltipContent(cell: Cell, labels:Record<string, string>) {\n    return [`X: ${labels[cell.x]}`, `Node: ${cell.y}`, `Value: ${formatCellValue(cell.value)}`];\n}\n\nexport function Heatmap({\n    heatmapData,\n    scales,\n    step,\n    colorScale,\n    tooltipsContainer,\n    chartSizes,\n    selectedNode,\n    labels\n}: {\n    heatmapData: HeatmapData;\n    scales: ChartScales;\n    step: {x: number; y: number};\n    colorScale: (value: DataValue) => string;\n    chartSizes: ChartSizes;\n    tooltipsContainer: Element | null;\n    selectedNode: HierarchyPointNode<TreeNodeData> | null,\n    labels: string[]\n}) {\n    const {xKeys, yKeys, cells, meta} = heatmapData;\n    const [selectedCell, setSelectedCell] = useState<Cell | null>(null);\n    const sideDistances = {\n        left: chartSizes.treeWidth + HEATMAP_LEFT_OFFSET + MARGIN.LEFT,\n        right: chartSizes.heatmapWidth + MARGIN.RIGHT,\n        top: MARGIN.TOP,\n        bottom: chartSizes.heatmapHeight + MARGIN.BOTTOM,\n    };\n    return (\n        <g onMouseLeave={() => setSelectedCell(null)}>\n            {labels.length && (\n                <g transform={'translate(0,-8)'} >\n                    {xKeys.map((key, idx) => (\n                        <text x={scales.x(key) + 2} key={key} fontWeight=\"500\">\n                            <title>{meta.xLabels[key]}</title>\n                            {labels[idx]}\n                        </text>\n                    ))}\n                </g>\n            )}\n            {/* cells */}\n            {xKeys.map(xKey =>\n                yKeys.map(yKey => {\n                    const cell = cells?.[xKey]?.[yKey];\n                    return (\n                        <rect\n                            key={cell ? cell.id : `${xKey}_${yKey}`}\n                            x={scales.x(xKey)}\n                            y={scales.y(yKey)}\n                            width={step.x}\n                            height={step.y}\n                            stroke=\"white\"\n                            strokeWidth=\"1px\"\n                            fill={cell ? colorScale(cell?.value) : COLOR_EMPTY}\n                            onMouseOver={() => {\n                                if (cell?.value !== null && typeof cell?.value !== 'undefined') {\n                                    setSelectedCell(cell);\n                                } else {\n                                    setSelectedCell(null);\n                                }\n                            }}\n                            opacity={selectedNode && selectedNode.data.rawIndexes[0] !== cell?.idx ? DIMMED_OPACITY : 1}\n                        />\n                    );\n                })\n            )}\n            {labels.length && (\n                <line x1=\"0\" x2={chartSizes.heatmapWidth} y1=\"0\" y2=\"0\" stroke={BLACK} strokeWidth=\"1px\"/>\n            )}\n            {selectedCell && tooltipsContainer && (\n                <Tooltip\n                    content={getTooltipContent(selectedCell, heatmapData.meta.xLabels)}\n                    x={scales.x(selectedCell.x) + step.x / 2}\n                    y={scales.y(selectedCell.y) + step.y / 2}\n                    offset={xKeys.length > 1 ? step.x / 2 : 0}\n                    active={true}\n                    fixed={false}\n                    sideDistances={sideDistances}\n                    container={tooltipsContainer}\n                />\n            )}\n        </g>\n    );\n}\n"],"mappings":";;;;;AAUA,SAAS,EAAgB,GAA+B;AACpD,KAAI,MAAM,KACN,QAAO;AAEX,KAAI,OAAO,KAAM,UAAU;EACvB,IAAM,IAAQ,KAAK,MAAM,EAAE,EACrB,IAAU,IAAI;AACpB,SAAO,IAAQ,OAAO,EAAQ,YAAY,EAAE,CAAC;;AAEjD,QAAO;;AAGX,SAAS,EAAkB,GAAY,GAA+B;AAClE,QAAO;EAAC,MAAM,EAAO,EAAK;EAAM,SAAS,EAAK;EAAK,UAAU,EAAgB,EAAK,MAAM;EAAG;;AAG/F,SAAgB,EAAQ,EACpB,gBACA,WACA,SACA,eACA,sBACA,eACA,iBACA,aAUD;CACC,IAAM,EAAC,UAAO,UAAO,UAAO,YAAQ,GAC9B,CAAC,GAAc,KAAmB,EAAsB,KAAK,EAC7D,IAAgB;EAClB,MAAM,EAAW,YAAA,KAAkC,EAAO;EAC1D,OAAO,EAAW,eAAe,EAAO;EACxC,KAAK,EAAO;EACZ,QAAQ,EAAW,gBAAgB,EAAO;EAC7C;AACD,QACI,kBAAC,KAAD;EAAG,oBAAoB,EAAgB,KAAK;YAA5C;GACK,EAAO,UACJ,kBAAC,KAAD;IAAG,WAAW;cACT,EAAM,KAAK,GAAK,MACb,kBAAC,QAAD;KAAM,GAAG,EAAO,EAAE,EAAI,GAAG;KAAa,YAAW;eAAjD,CACI,kBAAC,SAAD,EAAA,UAAQ,EAAK,QAAQ,IAAa,CAAA,EACjC,EAAO,GACL;OAH0B,EAG1B,CACT;IACF,CAAA;GAGP,EAAM,KAAI,MACP,EAAM,KAAI,MAAQ;IACd,IAAM,IAAO,IAAQ,KAAQ;AAC7B,WACI,kBAAC,QAAD;KAEI,GAAG,EAAO,EAAE,EAAK;KACjB,GAAG,EAAO,EAAE,EAAK;KACjB,OAAO,EAAK;KACZ,QAAQ,EAAK;KACb,QAAO;KACP,aAAY;KACZ,MAAM,IAAO,EAAW,GAAM,MAAM,GAAG;KACvC,mBAAmB;AACf,MAAI,GAAM,UAAU,QAAe,GAAM,UAAU,SAC/C,EAAgB,EAAK,GAErB,EAAgB,KAAK;;KAG7B,SAAS,KAAgB,EAAa,KAAK,WAAW,OAAO,GAAM,MAAM,IAAiB;KAC5F,EAhBO,IAAO,EAAK,KAAK,GAAG,EAAK,GAAG,IAgBnC;KAER,CACL;GACA,EAAO,UACJ,kBAAC,QAAD;IAAM,IAAG;IAAI,IAAI,EAAW;IAAc,IAAG;IAAI,IAAG;IAAI,QAAA;IAAe,aAAY;IAAO,CAAA;GAE7F,KAAgB,KACb,kBAAC,GAAD;IACI,SAAS,EAAkB,GAAc,EAAY,KAAK,QAAQ;IAClE,GAAG,EAAO,EAAE,EAAa,EAAE,GAAG,EAAK,IAAI;IACvC,GAAG,EAAO,EAAE,EAAa,EAAE,GAAG,EAAK,IAAI;IACvC,QAAQ,EAAM,SAAS,IAAI,EAAK,IAAI,IAAI;IACxC,QAAQ;IACR,OAAO;IACQ;IACf,WAAW;IACb,CAAA;GAEN"}