@milaboratories/miplots4 1.0.176 → 1.0.177

package/dist/scatterplot-umap/components/LowerSVG.js

@@ -1,173 +1,160 @@
-import { j as o } from "../../_virtual/jsx-runtime.js";
-import N, { r as g } from "../../_virtual/index.js";
-import { ChartsTitle as O } from "../../common/ChartsTitle.js";
-import { ContinuousGrid as R } from "../../common/ContinuousGrid.js";
-import M from "../../common/fonts.js";
-import { Legend as U } from "../../common/Legend.js";
-import { Tooltip as V } from "../../common/Tooltip.js";
-import { useDataFrame as Z } from "../../common/useDataFrame.js";
-import { BLACK as q } from "../../constants.js";
-import { ContinuousAxis as E } from "../../common/ContinuousAxis.js";
-import { formatColumnValue as G } from "../../scatterplot/utils/formatColumnValue.js";
-import { DEFAULT_TICKS_SIZE as L, TITLE_LINE as u, LEGEND_OFFSET as J } from "../constants.js";
-import Q from "../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/line.js";
-import S from "../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/curve/basis.js";
-import { format as z } from "../../node_modules/.pnpm/d3-format@3.1.0/node_modules/d3-format/src/defaultLocale.js";
-function tt(e, d, p = []) {
-  const c = [];
-  for (const i of p) {
-    const t = i != null && i.format ? z(i.format) : void 0;
-    c.push(`${i.label}: ${G(e, d.idx, i, t)}`);
-  }
-  return c;
+import { BLACK as e } from "../../constants.js";
+import t from "../../common/fonts.js";
+import { Tooltip as n } from "../../common/Tooltip.js";
+import { useDataFrame as r } from "../../common/useDataFrame.js";
+import { ChartsTitle as i } from "../../common/ChartsTitle.js";
+import { Legend as a } from "../../common/Legend.js";
+import { ContinuousAxis as o } from "../../common/ContinuousAxis.js";
+import { ContinuousGrid as s } from "../../common/ContinuousGrid.js";
+import { formatColumnValue as c } from "../../scatterplot/utils/formatColumnValue.js";
+import l, { useEffect as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { format as m } from "d3-format";
+import { curveBasis as h, line as g } from "d3-shape";
+function _(e, t, n = []) {
+	let r = [];
+	for (let i of n) {
+		let n = i?.format ? m(i.format) : void 0;
+		r.push(`${i.label}: ${c(e, t.idx, i, n)}`);
+	}
+	return r;
 }
-function b(e) {
-  return typeof e == "string" ? e : e.label ?? e.value;
+function v(e) {
+	return typeof e == "string" ? e : e.label ?? e.value;
 }
-const H = Q().curve(S);
-function ot({
-  scales: e,
-  chartSettings: d,
-  mainTitle: p,
-  keyColumn: c,
-  margins: i,
-  chartSizes: t,
-  container: j,
-  zoomStateKey: y,
-  legendData: F,
-  dotsByGrouping: P,
-  layers: A,
-  aesGetters: x,
-  tooltipData: h
-}) {
-  var $;
-  const D = Z(), { title: w, xAxis: a, yAxis: m, frame: _, legend: B } = d, I = a.showTicks ? L : 0, X = m.showTicks ? L : 0, T = a.title, W = m.title, Y = {
-    left: 0,
-    right: t.chartWidth,
-    top: 0,
-    bottom: t.chartHeight
-  };
-  if (!j)
-    return null;
-  const n = A.find((r) => r.type === "curve"), [k, K] = g.useState([]);
-  function C() {
-    const f = Object.entries(P).map(([s, l]) => ({
-      key: s,
-      d: n != null && n.smoothing ? H(l) ?? "" : l.map((v) => `${e.x(v.x)},${e.y(v.y)}`).join(" "),
-      dot: l[0]
-    }));
-    K(f);
-  }
-  return g.useEffect(() => {
-    n && (H.x((r) => e.x(r.x)).y((r) => e.y(r.y)), C());
-  }, [y, t.chartWidth, t.chartHeight]), g.useEffect(() => {
-    n && C();
-  }, [n == null ? void 0 : n.smoothing]), /* @__PURE__ */ o.jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: `0 0 ${t.totalWidth} ${t.totalHeight}`,
-      width: t.totalWidth,
-      height: t.totalHeight,
-      style: { pointerEvents: "none" },
-      children: [
-        /* @__PURE__ */ o.jsx("defs", { children: M }),
-        /* @__PURE__ */ o.jsxs("g", { transform: `translate(${i.left},${i.top})`, fontFamily: "Manrope", children: [
-          /* @__PURE__ */ o.jsx("clipPath", { id: "viewportClipPath", children: /* @__PURE__ */ o.jsx("rect", { x: "0", y: "0", width: t.chartWidth, height: t.chartHeight }) }),
-          /* @__PURE__ */ o.jsx(
-            O,
-            {
-              title: p,
-              show: w.show,
-              position: w.position,
-              leftPadding: -i.left,
-              rightPadding: i.right,
-              chartsWidth: t.totalWidth
-            }
-          ),
-          /* @__PURE__ */ o.jsxs("g", { dominantBaseline: "central", textAnchor: "middle", fontWeight: "500", fontSize: "14px", fill: q, children: [
-            T && /* @__PURE__ */ o.jsx(
-              "text",
-              {
-                x: t.chartWidth / 2,
-                y: t.chartHeight + i.bottom - u / 2,
-                children: b(T)
-              }
-            ),
-            W && /* @__PURE__ */ o.jsx(
-              "text",
-              {
-                x: -i.left + u / 2,
-                y: t.chartHeight / 2,
-                transform: `rotate(-90,${-i.left + u / 2},${t.chartHeight / 2})`,
-                children: b(W)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ o.jsx(
-            R,
-            {
-              width: t.chartWidth,
-              height: t.chartHeight,
-              scaleX: e.x,
-              scaleY: e.y,
-              axisX: a,
-              axisY: m,
-              updatingKey: y,
-              frameType: _.type
-            }
-          ),
-          /* @__PURE__ */ o.jsx("g", { transform: `translate(0,${t.chartHeight})`, children: /* @__PURE__ */ o.jsx(E, { scale: e.x, orient: "bottom", tickSize: I, hiddenLabels: a.hiddenLabels }) }),
-          /* @__PURE__ */ o.jsx("g", { children: /* @__PURE__ */ o.jsx(E, { scale: e.y, orient: "left", tickSize: X, hiddenLabels: m.hiddenLabels }) }),
-          n && n.smoothing && /* @__PURE__ */ o.jsx("g", { clipPath: "url(#viewportClipPath)", children: k.map(({ key: r, d: f, dot: s }) => {
-            var l;
-            return /* @__PURE__ */ o.jsx(
-              "path",
-              {
-                d: f,
-                fill: "none",
-                stroke: x.dotFill(s.idx),
-                strokeWidth: (l = n.aes) == null ? void 0 : l.lineWidth,
-                strokeDasharray: x.lineType(s.idx)
-              },
-              r
-            );
-          }) }),
-          n && !n.smoothing && /* @__PURE__ */ o.jsx("g", { clipPath: "url(#viewportClipPath)", children: k.map(({ key: r, d: f, dot: s }) => {
-            var l;
-            return /* @__PURE__ */ o.jsx(
-              "polyline",
-              {
-                points: f,
-                fill: "none",
-                stroke: x.dotFill(s.idx),
-                strokeWidth: (l = n.aes) == null ? void 0 : l.lineWidth,
-                strokeDasharray: x.lineType(s.idx)
-              },
-              r
-            );
-          }) }),
-          d.tooltips.show && h.selectedData && /* @__PURE__ */ o.jsx(
-            V,
-            {
-              content: tt(D, h.selectedData, ($ = d.tooltips) == null ? void 0 : $.content),
-              x: e.x(h.selectedData.x),
-              y: e.y(h.selectedData.y),
-              active: !0,
-              fixed: h.fixed,
-              sideDistances: Y,
-              container: j,
-              onClose: h.onClose
-            }
-          ),
-          B.show && /* @__PURE__ */ o.jsx("g", { transform: `translate(${t.chartWidth + J},0)`, children: /* @__PURE__ */ o.jsx(U, { legendData: F }) })
-        ] })
-      ]
-    }
-  );
+var y = g().curve(h);
+function b({ scales: c, chartSettings: l, mainTitle: m, keyColumn: h, margins: g, chartSizes: b, container: x, zoomStateKey: S, legendData: C, dotsByGrouping: w, layers: T, aesGetters: E, tooltipData: D }) {
+	let O = r(), { title: k, xAxis: A, yAxis: j, frame: M, legend: N } = l, P = A.showTicks ? 4 : 0, F = j.showTicks ? 4 : 0, I = A.title, L = j.title, R = {
+		left: 0,
+		right: b.chartWidth,
+		top: 0,
+		bottom: b.chartHeight
+	};
+	if (!x) return null;
+	let z = T.find((e) => e.type === "curve"), [B, V] = d([]);
+	function H() {
+		V(Object.entries(w).map(([e, t]) => ({
+			key: e,
+			d: z?.smoothing ? y(t) ?? "" : t.map((e) => `${c.x(e.x)},${c.y(e.y)}`).join(" "),
+			dot: t[0]
+		})));
+	}
+	return u(() => {
+		z && (y.x((e) => c.x(e.x)).y((e) => c.y(e.y)), H());
+	}, [
+		S,
+		b.chartWidth,
+		b.chartHeight
+	]), u(() => {
+		z && H();
+	}, [z?.smoothing]), /* @__PURE__ */ p("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: `0 0 ${b.totalWidth} ${b.totalHeight}`,
+		width: b.totalWidth,
+		height: b.totalHeight,
+		style: { pointerEvents: "none" },
+		children: [/* @__PURE__ */ f("defs", { children: t }), /* @__PURE__ */ p("g", {
+			transform: `translate(${g.left},${g.top})`,
+			fontFamily: "Manrope",
+			children: [
+				/* @__PURE__ */ f("clipPath", {
+					id: "viewportClipPath",
+					children: /* @__PURE__ */ f("rect", {
+						x: "0",
+						y: "0",
+						width: b.chartWidth,
+						height: b.chartHeight
+					})
+				}),
+				/* @__PURE__ */ f(i, {
+					title: m,
+					show: k.show,
+					position: k.position,
+					leftPadding: -g.left,
+					rightPadding: g.right,
+					chartsWidth: b.totalWidth
+				}),
+				/* @__PURE__ */ p("g", {
+					dominantBaseline: "central",
+					textAnchor: "middle",
+					fontWeight: "500",
+					fontSize: "14px",
+					fill: e,
+					children: [I && /* @__PURE__ */ f("text", {
+						x: b.chartWidth / 2,
+						y: b.chartHeight + g.bottom - 20 / 2,
+						children: v(I)
+					}), L && /* @__PURE__ */ f("text", {
+						x: -g.left + 20 / 2,
+						y: b.chartHeight / 2,
+						transform: `rotate(-90,${-g.left + 20 / 2},${b.chartHeight / 2})`,
+						children: v(L)
+					})]
+				}),
+				/* @__PURE__ */ f(s, {
+					width: b.chartWidth,
+					height: b.chartHeight,
+					scaleX: c.x,
+					scaleY: c.y,
+					axisX: A,
+					axisY: j,
+					updatingKey: S,
+					frameType: M.type
+				}),
+				/* @__PURE__ */ f("g", {
+					transform: `translate(0,${b.chartHeight})`,
+					children: /* @__PURE__ */ f(o, {
+						scale: c.x,
+						orient: "bottom",
+						tickSize: P,
+						hiddenLabels: A.hiddenLabels
+					})
+				}),
+				/* @__PURE__ */ f("g", { children: /* @__PURE__ */ f(o, {
+					scale: c.y,
+					orient: "left",
+					tickSize: F,
+					hiddenLabels: j.hiddenLabels
+				}) }),
+				z && z.smoothing && /* @__PURE__ */ f("g", {
+					clipPath: "url(#viewportClipPath)",
+					children: B.map(({ key: e, d: t, dot: n }) => /* @__PURE__ */ f("path", {
+						d: t,
+						fill: "none",
+						stroke: E.dotFill(n.idx),
+						strokeWidth: z.aes?.lineWidth,
+						strokeDasharray: E.lineType(n.idx)
+					}, e))
+				}),
+				z && !z.smoothing && /* @__PURE__ */ f("g", {
+					clipPath: "url(#viewportClipPath)",
+					children: B.map(({ key: e, d: t, dot: n }) => /* @__PURE__ */ f("polyline", {
+						points: t,
+						fill: "none",
+						stroke: E.dotFill(n.idx),
+						strokeWidth: z.aes?.lineWidth,
+						strokeDasharray: E.lineType(n.idx)
+					}, e))
+				}),
+				l.tooltips.show && D.selectedData && /* @__PURE__ */ f(n, {
+					content: _(O, D.selectedData, l.tooltips?.content),
+					x: c.x(D.selectedData.x),
+					y: c.y(D.selectedData.y),
+					active: !0,
+					fixed: D.fixed,
+					sideDistances: R,
+					container: x,
+					onClose: D.onClose
+				}),
+				N.show && /* @__PURE__ */ f("g", {
+					transform: `translate(${b.chartWidth + 24},0)`,
+					children: /* @__PURE__ */ f(a, { legendData: C })
+				})
+			]
+		})]
+	});
 }
-const ut = N.memo(ot);
-export {
-  ut as default
-};
-//# sourceMappingURL=LowerSVG.js.map
+var x = l.memo(b);
+export { x as default };
+
+//# sourceMappingURL=LowerSVG.js.map

package/dist/scatterplot-umap/components/LowerSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"LowerSVG.js","sources":["../../../src/scatterplot-umap/components/LowerSVG.tsx"],"sourcesContent":["import {format} from 'd3-format';\nimport { curveBasis, line } from 'd3-shape';\nimport React, { useEffect, useState } from 'react';\nimport { ChartsTitle } from '../../common/ChartsTitle';\nimport { ContinuousGrid } from '../../common/ContinuousGrid';\nimport fonts from '../../common/fonts';\nimport { Legend } from '../../common/Legend';\nimport type { TooltipsData } from '../../common/Tooltip';\nimport { Tooltip } from '../../common/Tooltip';\nimport type { LegendData } from '../../common/types';\nimport { useDataFrame } from '../../common/useDataFrame';\nimport { BLACK } from '../../constants';\nimport type { DataFrame } from '../../DataFrame';\nimport { ContinuousAxis } from '../../common/ContinuousAxis';\nimport {formatColumnValue} from '../../scatterplot/utils/formatColumnValue';\nimport type { ColumnName } from '../../types';\nimport type { CurveUmapLayer } from '../../types/scatterplot-umap';\nimport { DEFAULT_TICKS_SIZE, LEGEND_OFFSET, TITLE_LINE } from '../constants';\nimport type { ScatterplotUmapSettingsImpl } from '../SettingsImpl';\nimport type { CaptionsSizes, ChartScales, ChartSizes, Dot, DotInfo, Margins, SVGLayerProps } from '../types';\n\nfunction getTooltipContent(dataFrame: DataFrame, dot: DotInfo, columnsList: ColumnName[] = []) {\n    const lines: string[] = [];\n    for (const column of columnsList) {\n        const columnFormatter = column?.format ? format(column.format) : undefined;\n        lines.push(`${column.label}: ${formatColumnValue(dataFrame, dot.idx, column, columnFormatter)}`);\n    }\n    return lines;\n}\n\nfunction getTitle(title: string | ColumnName): string {\n    if (typeof title === 'string') {\n        return title;\n    }\n    return title.label ?? title.value;\n}\n\nconst lineGenerator = line<Dot>().curve(curveBasis);\n\nfunction LowerSvg({\n    scales,\n    chartSettings,\n    mainTitle,\n    keyColumn: _,\n    margins,\n    chartSizes,\n    container,\n    zoomStateKey,\n    legendData,\n    dotsByGrouping,\n    layers,\n    aesGetters,\n    tooltipData\n}: {\n    aesGetters: SVGLayerProps['aesGetters'];\n    scales: ChartScales;\n    chartSettings: ScatterplotUmapSettingsImpl['chartSettings'];\n    mainTitle: string[];\n    keyColumn: ColumnName | null;\n    margins: Margins;\n    chartSizes: ChartSizes;\n    captionsSizes: CaptionsSizes;\n    selectedDot?: DotInfo | null;\n    container: SVGElement | null;\n    zoomStateKey: string;\n    legendData: LegendData;\n    dotsByGrouping: Record<string, Dot[]>;\n    layers: ScatterplotUmapSettingsImpl['layers'];\n    tooltipData: TooltipsData<DotInfo>;\n}) {\n    const dataFrame = useDataFrame();\n    const {title, xAxis, yAxis, frame, legend} = chartSettings;\n    const tickSizeX = xAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const tickSizeY = yAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const xTitle = xAxis.title;\n    const yTitle = yAxis.title;\n    const needLeftAxis = true;\n    const needBottomAxis = true;\n\n    const sideDistances = {\n        left: 0,\n        right: chartSizes.chartWidth,\n        top: 0,\n        bottom: chartSizes.chartHeight,\n    };\n\n    if (!container) {\n        return null;\n    }\n\n    const curveLayer = layers.find(layer => layer.type === 'curve') as CurveUmapLayer | undefined;\n    const [lines, setLines] = useState<{key: string, d:string, dot: Dot}[]>([]);\n\n    function updateLines() {\n        const data = Object.entries(dotsByGrouping);\n        const nextLines = data.map(([key, dots]) => ({\n            key,\n            d: curveLayer?.smoothing ? lineGenerator(dots) ?? '' : dots.map(d => `${scales.x(d.x)},${scales.y(d.y)}`).join(' '),\n            dot: dots[0]\n        }));\n        setLines(nextLines);\n    }\n    useEffect(() => {\n        if (!curveLayer) {\n            return;\n        }\n        lineGenerator\n            .x((d: Dot) => scales.x(d.x))\n            .y((d: Dot) => scales.y(d.y));\n        updateLines();\n    }, [zoomStateKey, chartSizes.chartWidth, chartSizes.chartHeight]);\n\n    useEffect(() => {\n        if (!curveLayer) {\n            return;\n        }\n        updateLines();\n    }, [curveLayer?.smoothing]);\n\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox={`0 0 ${chartSizes.totalWidth} ${chartSizes.totalHeight}`}\n            width={chartSizes.totalWidth}\n            height={chartSizes.totalHeight}\n            style={{pointerEvents: 'none'}}\n        >\n            <defs>{fonts}</defs>\n            <g transform={`translate(${margins.left},${margins.top})`} fontFamily=\"Manrope\">\n                <clipPath id=\"viewportClipPath\">\n                    <rect x=\"0\" y=\"0\" width={chartSizes.chartWidth} height={chartSizes.chartHeight}/>\n                </clipPath>\n                <ChartsTitle\n                    title={mainTitle}\n                    show={title.show}\n                    position={title.position}\n                    leftPadding={-margins.left}\n                    rightPadding={margins.right}\n                    chartsWidth={chartSizes.totalWidth}\n                />\n                <g dominantBaseline=\"central\" textAnchor=\"middle\" fontWeight=\"500\" fontSize=\"14px\" fill={BLACK}>\n                    {xTitle && (\n                        <text\n                            x={chartSizes.chartWidth / 2}\n                            y={chartSizes.chartHeight + margins.bottom - TITLE_LINE / 2}\n                        >\n                            {getTitle(xTitle)}\n                        </text>\n                    )}\n                    {yTitle && (\n                        <text\n                            x={-margins.left + TITLE_LINE / 2}\n                            y={chartSizes.chartHeight / 2}\n                            transform={`rotate(-90,${-margins.left + TITLE_LINE / 2},${\n                                chartSizes.chartHeight / 2\n                            })`}\n                        >\n                            {getTitle(yTitle)}\n                        </text>\n                    )}\n                </g>\n                <ContinuousGrid\n                    width={chartSizes.chartWidth}\n                    height={chartSizes.chartHeight}\n                    scaleX={scales.x}\n                    scaleY={scales.y}\n                    axisX={xAxis}\n                    axisY={yAxis}\n                    updatingKey={zoomStateKey}\n                    frameType={frame.type}\n                />\n                {needBottomAxis && (\n                    <g transform={`translate(0,${chartSizes.chartHeight})`}>\n                        <ContinuousAxis scale={scales.x} orient=\"bottom\" tickSize={tickSizeX} hiddenLabels={xAxis.hiddenLabels} />\n                    </g>\n                )}\n                {needLeftAxis && (\n                    <g>\n                        <ContinuousAxis scale={scales.y} orient=\"left\" tickSize={tickSizeY} hiddenLabels={yAxis.hiddenLabels} />\n                    </g>\n                )}\n                {curveLayer && curveLayer.smoothing && (\n                    <g clipPath=\"url(#viewportClipPath)\">\n                        {lines.map(({key, d, dot}) => (\n                            <path\n                                key={key}\n                                d={d}\n                                fill=\"none\"\n                                stroke={aesGetters.dotFill(dot.idx)}\n                                strokeWidth={curveLayer.aes?.lineWidth}\n                                strokeDasharray={aesGetters.lineType(dot.idx)}\n                            />\n                        ))}\n                    </g>\n                )}\n                {curveLayer && !curveLayer.smoothing && (\n                    <g clipPath=\"url(#viewportClipPath)\">\n                        {lines.map(({key, d, dot}) => (\n                            <polyline\n                                key={key}\n                                points={d}\n                                fill=\"none\"\n                                stroke={aesGetters.dotFill(dot.idx)}\n                                strokeWidth={curveLayer.aes?.lineWidth}\n                                strokeDasharray={aesGetters.lineType(dot.idx)}\n                            />\n                        ))}\n                    </g>\n                )}\n                {chartSettings.tooltips.show && tooltipData.selectedData && (\n                    <Tooltip\n                        content={getTooltipContent(dataFrame, tooltipData.selectedData, chartSettings.tooltips?.content)}\n                        x={scales.x(tooltipData.selectedData.x)}\n                        y={scales.y(tooltipData.selectedData.y)}\n                        active={true}\n                        fixed={tooltipData.fixed}\n                        sideDistances={sideDistances}\n                        container={container}\n                        onClose={tooltipData.onClose}\n                    />\n                )}\n                {legend.show && (\n                    <g transform={`translate(${chartSizes.chartWidth + LEGEND_OFFSET},0)`}>\n                        <Legend legendData={legendData} />\n                    </g>\n                )}\n            </g>\n        </svg>\n    );\n}\n\nexport default React.memo(LowerSvg);\n"],"names":["getTooltipContent","dataFrame","dot","columnsList","lines","column","columnFormatter","format","formatColumnValue","getTitle","title","lineGenerator","line","curveBasis","LowerSvg","scales","chartSettings","mainTitle","_","margins","chartSizes","container","zoomStateKey","legendData","dotsByGrouping","layers","aesGetters","tooltipData","useDataFrame","xAxis","yAxis","frame","legend","tickSizeX","DEFAULT_TICKS_SIZE","tickSizeY","xTitle","yTitle","sideDistances","curveLayer","layer","setLines","useState","updateLines","nextLines","key","dots","d","useEffect","jsxs","jsx","fonts","ChartsTitle","BLACK","TITLE_LINE","ContinuousGrid","ContinuousAxis","_a","Tooltip","LEGEND_OFFSET","Legend","LowerSvg$1","React"],"mappings":"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"}
+{"version":3,"file":"LowerSVG.js","names":[],"sources":["../../../src/scatterplot-umap/components/LowerSVG.tsx"],"sourcesContent":["import {format} from 'd3-format';\nimport { curveBasis, line } from 'd3-shape';\nimport React, { useEffect, useState } from 'react';\nimport { ChartsTitle } from '../../common/ChartsTitle';\nimport { ContinuousGrid } from '../../common/ContinuousGrid';\nimport fonts from '../../common/fonts';\nimport { Legend } from '../../common/Legend';\nimport type { TooltipsData } from '../../common/Tooltip';\nimport { Tooltip } from '../../common/Tooltip';\nimport type { LegendData } from '../../common/types';\nimport { useDataFrame } from '../../common/useDataFrame';\nimport { BLACK } from '../../constants';\nimport type { DataFrame } from '../../DataFrame';\nimport { ContinuousAxis } from '../../common/ContinuousAxis';\nimport {formatColumnValue} from '../../scatterplot/utils/formatColumnValue';\nimport type { ColumnName } from '../../types';\nimport type { CurveUmapLayer } from '../../types/scatterplot-umap';\nimport { DEFAULT_TICKS_SIZE, LEGEND_OFFSET, TITLE_LINE } from '../constants';\nimport type { ScatterplotUmapSettingsImpl } from '../SettingsImpl';\nimport type { CaptionsSizes, ChartScales, ChartSizes, Dot, DotInfo, Margins, SVGLayerProps } from '../types';\n\nfunction getTooltipContent(dataFrame: DataFrame, dot: DotInfo, columnsList: ColumnName[] = []) {\n    const lines: string[] = [];\n    for (const column of columnsList) {\n        const columnFormatter = column?.format ? format(column.format) : undefined;\n        lines.push(`${column.label}: ${formatColumnValue(dataFrame, dot.idx, column, columnFormatter)}`);\n    }\n    return lines;\n}\n\nfunction getTitle(title: string | ColumnName): string {\n    if (typeof title === 'string') {\n        return title;\n    }\n    return title.label ?? title.value;\n}\n\nconst lineGenerator = line<Dot>().curve(curveBasis);\n\nfunction LowerSvg({\n    scales,\n    chartSettings,\n    mainTitle,\n    keyColumn: _,\n    margins,\n    chartSizes,\n    container,\n    zoomStateKey,\n    legendData,\n    dotsByGrouping,\n    layers,\n    aesGetters,\n    tooltipData\n}: {\n    aesGetters: SVGLayerProps['aesGetters'];\n    scales: ChartScales;\n    chartSettings: ScatterplotUmapSettingsImpl['chartSettings'];\n    mainTitle: string[];\n    keyColumn: ColumnName | null;\n    margins: Margins;\n    chartSizes: ChartSizes;\n    captionsSizes: CaptionsSizes;\n    selectedDot?: DotInfo | null;\n    container: SVGElement | null;\n    zoomStateKey: string;\n    legendData: LegendData;\n    dotsByGrouping: Record<string, Dot[]>;\n    layers: ScatterplotUmapSettingsImpl['layers'];\n    tooltipData: TooltipsData<DotInfo>;\n}) {\n    const dataFrame = useDataFrame();\n    const {title, xAxis, yAxis, frame, legend} = chartSettings;\n    const tickSizeX = xAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const tickSizeY = yAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const xTitle = xAxis.title;\n    const yTitle = yAxis.title;\n    const needLeftAxis = true;\n    const needBottomAxis = true;\n\n    const sideDistances = {\n        left: 0,\n        right: chartSizes.chartWidth,\n        top: 0,\n        bottom: chartSizes.chartHeight,\n    };\n\n    if (!container) {\n        return null;\n    }\n\n    const curveLayer = layers.find(layer => layer.type === 'curve') as CurveUmapLayer | undefined;\n    const [lines, setLines] = useState<{key: string, d:string, dot: Dot}[]>([]);\n\n    function updateLines() {\n        const data = Object.entries(dotsByGrouping);\n        const nextLines = data.map(([key, dots]) => ({\n            key,\n            d: curveLayer?.smoothing ? lineGenerator(dots) ?? '' : dots.map(d => `${scales.x(d.x)},${scales.y(d.y)}`).join(' '),\n            dot: dots[0]\n        }));\n        setLines(nextLines);\n    }\n    useEffect(() => {\n        if (!curveLayer) {\n            return;\n        }\n        lineGenerator\n            .x((d: Dot) => scales.x(d.x))\n            .y((d: Dot) => scales.y(d.y));\n        updateLines();\n    }, [zoomStateKey, chartSizes.chartWidth, chartSizes.chartHeight]);\n\n    useEffect(() => {\n        if (!curveLayer) {\n            return;\n        }\n        updateLines();\n    }, [curveLayer?.smoothing]);\n\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox={`0 0 ${chartSizes.totalWidth} ${chartSizes.totalHeight}`}\n            width={chartSizes.totalWidth}\n            height={chartSizes.totalHeight}\n            style={{pointerEvents: 'none'}}\n        >\n            <defs>{fonts}</defs>\n            <g transform={`translate(${margins.left},${margins.top})`} fontFamily=\"Manrope\">\n                <clipPath id=\"viewportClipPath\">\n                    <rect x=\"0\" y=\"0\" width={chartSizes.chartWidth} height={chartSizes.chartHeight}/>\n                </clipPath>\n                <ChartsTitle\n                    title={mainTitle}\n                    show={title.show}\n                    position={title.position}\n                    leftPadding={-margins.left}\n                    rightPadding={margins.right}\n                    chartsWidth={chartSizes.totalWidth}\n                />\n                <g dominantBaseline=\"central\" textAnchor=\"middle\" fontWeight=\"500\" fontSize=\"14px\" fill={BLACK}>\n                    {xTitle && (\n                        <text\n                            x={chartSizes.chartWidth / 2}\n                            y={chartSizes.chartHeight + margins.bottom - TITLE_LINE / 2}\n                        >\n                            {getTitle(xTitle)}\n                        </text>\n                    )}\n                    {yTitle && (\n                        <text\n                            x={-margins.left + TITLE_LINE / 2}\n                            y={chartSizes.chartHeight / 2}\n                            transform={`rotate(-90,${-margins.left + TITLE_LINE / 2},${\n                                chartSizes.chartHeight / 2\n                            })`}\n                        >\n                            {getTitle(yTitle)}\n                        </text>\n                    )}\n                </g>\n                <ContinuousGrid\n                    width={chartSizes.chartWidth}\n                    height={chartSizes.chartHeight}\n                    scaleX={scales.x}\n                    scaleY={scales.y}\n                    axisX={xAxis}\n                    axisY={yAxis}\n                    updatingKey={zoomStateKey}\n                    frameType={frame.type}\n                />\n                {needBottomAxis && (\n                    <g transform={`translate(0,${chartSizes.chartHeight})`}>\n                        <ContinuousAxis scale={scales.x} orient=\"bottom\" tickSize={tickSizeX} hiddenLabels={xAxis.hiddenLabels} />\n                    </g>\n                )}\n                {needLeftAxis && (\n                    <g>\n                        <ContinuousAxis scale={scales.y} orient=\"left\" tickSize={tickSizeY} hiddenLabels={yAxis.hiddenLabels} />\n                    </g>\n                )}\n                {curveLayer && curveLayer.smoothing && (\n                    <g clipPath=\"url(#viewportClipPath)\">\n                        {lines.map(({key, d, dot}) => (\n                            <path\n                                key={key}\n                                d={d}\n                                fill=\"none\"\n                                stroke={aesGetters.dotFill(dot.idx)}\n                                strokeWidth={curveLayer.aes?.lineWidth}\n                                strokeDasharray={aesGetters.lineType(dot.idx)}\n                            />\n                        ))}\n                    </g>\n                )}\n                {curveLayer && !curveLayer.smoothing && (\n                    <g clipPath=\"url(#viewportClipPath)\">\n                        {lines.map(({key, d, dot}) => (\n                            <polyline\n                                key={key}\n                                points={d}\n                                fill=\"none\"\n                                stroke={aesGetters.dotFill(dot.idx)}\n                                strokeWidth={curveLayer.aes?.lineWidth}\n                                strokeDasharray={aesGetters.lineType(dot.idx)}\n                            />\n                        ))}\n                    </g>\n                )}\n                {chartSettings.tooltips.show && tooltipData.selectedData && (\n                    <Tooltip\n                        content={getTooltipContent(dataFrame, tooltipData.selectedData, chartSettings.tooltips?.content)}\n                        x={scales.x(tooltipData.selectedData.x)}\n                        y={scales.y(tooltipData.selectedData.y)}\n                        active={true}\n                        fixed={tooltipData.fixed}\n                        sideDistances={sideDistances}\n                        container={container}\n                        onClose={tooltipData.onClose}\n                    />\n                )}\n                {legend.show && (\n                    <g transform={`translate(${chartSizes.chartWidth + LEGEND_OFFSET},0)`}>\n                        <Legend legendData={legendData} />\n                    </g>\n                )}\n            </g>\n        </svg>\n    );\n}\n\nexport default React.memo(LowerSvg);\n"],"mappings":"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"}

package/dist/scatterplot-umap/components/SVGLayer.js

@@ -1,79 +1,47 @@
-import { j as m } from "../../_virtual/jsx-runtime.js";
-import { r as y } from "../../_virtual/index.js";
-import { r as B } from "../../_virtual/index2.js";
-import { ErrorBoundary as G } from "../../common/ErrorBoundary.js";
-import { useTooltip as I } from "../../common/Tooltip.js";
-import P from "./LowerSVG.js";
-import R from "./UpperSVG.js";
-function A({
-  settingsId: x,
-  scales: f,
-  chartSettings: i,
-  mainTitle: l,
-  keyColumn: n,
-  margins: a,
-  chartSizes: t,
-  captionsSizes: j,
-  container: r,
-  zoomStateKey: u,
-  aesGetters: s,
-  legendData: E,
-  labels: d,
-  onPolygonUpdate: e,
-  onTooltipHintSwitch: v,
-  onLassoControlsStateUpdate: L,
-  dotsByGrouping: M,
-  layers: V,
-  defaultPolygons: w,
-  selectedDot: o = null
-}) {
-  if (!r)
-    return null;
-  const p = I(v, i.tooltips);
-  return y.useEffect(() => {
-    o ? p.onMouseEnter(o) : p.onMouseLeave();
-  }, [o]), /* @__PURE__ */ m.jsx("div", { children: /* @__PURE__ */ m.jsxs(G, { dataId: x, children: [
-    /* @__PURE__ */ m.jsx(
-      P,
-      {
-        aesGetters: s,
-        dotsByGrouping: M,
-        layers: V,
-        scales: f,
-        keyColumn: n,
-        margins: a,
-        mainTitle: l,
-        captionsSizes: j,
-        chartSettings: i,
-        chartSizes: t,
-        container: r,
-        zoomStateKey: u,
-        legendData: E,
-        tooltipData: p
-      }
-    ),
-    B.createPortal(
-      /* @__PURE__ */ m.jsx(
-        R,
-        {
-          scales: f,
-          container: r,
-          aesGetters: s,
-          labels: d,
-          chartSizes: t,
-          zoomStateKey: u,
-          selectedDot: o,
-          defaultPolygons: w,
-          onPolygonUpdate: e,
-          onLassoControlsStateUpdate: L,
-          tooltipData: p
-        }
-      ),
-      r
-    )
-  ] }) });
+import { useTooltip as e } from "../../common/Tooltip.js";
+import { ErrorBoundary as t } from "../../common/ErrorBoundary.js";
+import n from "./LowerSVG.js";
+import r from "./UpperSVG.js";
+import { useEffect as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
+function c({ settingsId: c, scales: l, chartSettings: u, mainTitle: d, keyColumn: f, margins: p, chartSizes: m, captionsSizes: h, container: g, zoomStateKey: _, aesGetters: v, legendData: y, labels: b, onPolygonUpdate: x, onTooltipHintSwitch: S, onLassoControlsStateUpdate: C, dotsByGrouping: w, layers: T, defaultPolygons: E, selectedDot: D = null }) {
+	if (!g) return null;
+	let O = e(S, u.tooltips);
+	return i(() => {
+		D ? O.onMouseEnter(D) : O.onMouseLeave();
+	}, [D]), /* @__PURE__ */ a("div", { children: /* @__PURE__ */ o(t, {
+		dataId: c,
+		children: [/* @__PURE__ */ a(n, {
+			aesGetters: v,
+			dotsByGrouping: w,
+			layers: T,
+			scales: l,
+			keyColumn: f,
+			margins: p,
+			mainTitle: d,
+			captionsSizes: h,
+			chartSettings: u,
+			chartSizes: m,
+			container: g,
+			zoomStateKey: _,
+			legendData: y,
+			tooltipData: O
+		}), s(/* @__PURE__ */ a(r, {
+			scales: l,
+			container: g,
+			aesGetters: v,
+			labels: b,
+			chartSizes: m,
+			zoomStateKey: _,
+			selectedDot: D,
+			defaultPolygons: E,
+			onPolygonUpdate: x,
+			onLassoControlsStateUpdate: C,
+			tooltipData: O
+		}), g)]
+	}) });
 }
-export {
-  A as SVGLayer
-};
-//# sourceMappingURL=SVGLayer.js.map
+export { c as SVGLayer };
+
+//# sourceMappingURL=SVGLayer.js.map

package/dist/scatterplot-umap/components/SVGLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SVGLayer.js","sources":["../../../src/scatterplot-umap/components/SVGLayer.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ErrorBoundary } from '../../common/ErrorBoundary';\nimport { useTooltip } from '../../common/Tooltip';\nimport type { DotInfo, SVGLayerProps } from '../types';\nimport LowerSvg from './LowerSVG';\nimport UpperSVG from './UpperSVG';\n\nexport function SVGLayer({\n    settingsId,\n    scales,\n    chartSettings,\n    mainTitle,\n    keyColumn,\n    margins,\n    chartSizes,\n    captionsSizes,\n    container,\n    zoomStateKey,\n    aesGetters,\n    legendData,\n    labels,\n    onPolygonUpdate,\n    onTooltipHintSwitch,\n    onLassoControlsStateUpdate,\n    dotsByGrouping,\n    layers,\n    defaultPolygons,\n    selectedDot = null,\n}: SVGLayerProps) {\n    if (!container) {\n        return null;\n    }\n    const tooltipData = useTooltip<DotInfo>(onTooltipHintSwitch, chartSettings.tooltips);\n    useEffect(() => {\n        if (selectedDot) {\n            tooltipData.onMouseEnter(selectedDot);\n        } else {\n            tooltipData.onMouseLeave();\n        }\n    }, [selectedDot]);\n\n    return (\n        <div>\n        <ErrorBoundary dataId={settingsId}>\n            <LowerSvg\n                aesGetters={aesGetters}\n                dotsByGrouping={dotsByGrouping}\n                layers={layers}\n                scales={scales}\n                keyColumn={keyColumn}\n                margins={margins}\n                mainTitle={mainTitle}\n                captionsSizes={captionsSizes}\n                chartSettings={chartSettings}\n                chartSizes={chartSizes}\n                container={container}\n                zoomStateKey={zoomStateKey}\n                legendData={legendData}\n                tooltipData={tooltipData}\n            />\n            {createPortal(\n                <UpperSVG\n                    scales={scales}\n                    container={container}\n                    aesGetters={aesGetters}\n                    labels={labels}\n                    chartSizes={chartSizes}\n                    zoomStateKey={zoomStateKey}\n                    selectedDot={selectedDot}\n                    defaultPolygons={defaultPolygons}\n                    onPolygonUpdate={onPolygonUpdate}\n                    onLassoControlsStateUpdate={onLassoControlsStateUpdate}\n                    tooltipData={tooltipData}\n                />,\n                container\n            )}\n        </ErrorBoundary>\n        </div>\n    );\n}\n"],"names":["SVGLayer","settingsId","scales","chartSettings","mainTitle","keyColumn","margins","chartSizes","captionsSizes","container","zoomStateKey","aesGetters","legendData","labels","onPolygonUpdate","onTooltipHintSwitch","onLassoControlsStateUpdate","dotsByGrouping","layers","defaultPolygons","selectedDot","tooltipData","useTooltip","useEffect","jsx","jsxs","ErrorBoundary","LowerSvg","createPortal","UpperSVG"],"mappings":";;;;;;;AAQO,SAASA,EAAS;AAAA,EACrB,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,4BAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC,IAAc;AAClB,GAAkB;AACd,MAAI,CAACX;AACD,WAAO;AAEX,QAAMY,IAAcC,EAAoBP,GAAqBZ,EAAc,QAAQ;AACnFoB,SAAAA,EAAAA,UAAU,MAAM;AACZ,IAAIH,IACAC,EAAY,aAAaD,CAAW,IAEpCC,EAAY,aAAA;AAAA,EAEpB,GAAG,CAACD,CAAW,CAAC,GAGZI,gBAAAA,EAAAA,IAAC,OAAA,EACD,UAAAC,gBAAAA,EAAAA,KAACC,GAAA,EAAc,QAAQzB,GACnB,UAAA;AAAA,IAAAuB,gBAAAA,EAAAA;AAAAA,MAACG;AAAA,MAAA;AAAA,QACG,YAAAhB;AAAA,QACA,gBAAAM;AAAA,QACA,QAAAC;AAAA,QACA,QAAAhB;AAAA,QACA,WAAAG;AAAA,QACA,SAAAC;AAAA,QACA,WAAAF;AAAA,QACA,eAAAI;AAAA,QACA,eAAAL;AAAA,QACA,YAAAI;AAAA,QACA,WAAAE;AAAA,QACA,cAAAC;AAAA,QACA,YAAAE;AAAA,QACA,aAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHO,EAAAA;AAAAA,MACGJ,gBAAAA,EAAAA;AAAAA,QAACK;AAAA,QAAA;AAAA,UACG,QAAA3B;AAAA,UACA,WAAAO;AAAA,UACA,YAAAE;AAAA,UACA,QAAAE;AAAA,UACA,YAAAN;AAAA,UACA,cAAAG;AAAA,UACA,aAAAU;AAAA,UACA,iBAAAD;AAAA,UACA,iBAAAL;AAAA,UACA,4BAAAE;AAAA,UACA,aAAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJZ;AAAA,IAAA;AAAA,EACJ,EAAA,CACJ,EAAA,CACA;AAER;"}
+{"version":3,"file":"SVGLayer.js","names":[],"sources":["../../../src/scatterplot-umap/components/SVGLayer.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ErrorBoundary } from '../../common/ErrorBoundary';\nimport { useTooltip } from '../../common/Tooltip';\nimport type { DotInfo, SVGLayerProps } from '../types';\nimport LowerSvg from './LowerSVG';\nimport UpperSVG from './UpperSVG';\n\nexport function SVGLayer({\n    settingsId,\n    scales,\n    chartSettings,\n    mainTitle,\n    keyColumn,\n    margins,\n    chartSizes,\n    captionsSizes,\n    container,\n    zoomStateKey,\n    aesGetters,\n    legendData,\n    labels,\n    onPolygonUpdate,\n    onTooltipHintSwitch,\n    onLassoControlsStateUpdate,\n    dotsByGrouping,\n    layers,\n    defaultPolygons,\n    selectedDot = null,\n}: SVGLayerProps) {\n    if (!container) {\n        return null;\n    }\n    const tooltipData = useTooltip<DotInfo>(onTooltipHintSwitch, chartSettings.tooltips);\n    useEffect(() => {\n        if (selectedDot) {\n            tooltipData.onMouseEnter(selectedDot);\n        } else {\n            tooltipData.onMouseLeave();\n        }\n    }, [selectedDot]);\n\n    return (\n        <div>\n        <ErrorBoundary dataId={settingsId}>\n            <LowerSvg\n                aesGetters={aesGetters}\n                dotsByGrouping={dotsByGrouping}\n                layers={layers}\n                scales={scales}\n                keyColumn={keyColumn}\n                margins={margins}\n                mainTitle={mainTitle}\n                captionsSizes={captionsSizes}\n                chartSettings={chartSettings}\n                chartSizes={chartSizes}\n                container={container}\n                zoomStateKey={zoomStateKey}\n                legendData={legendData}\n                tooltipData={tooltipData}\n            />\n            {createPortal(\n                <UpperSVG\n                    scales={scales}\n                    container={container}\n                    aesGetters={aesGetters}\n                    labels={labels}\n                    chartSizes={chartSizes}\n                    zoomStateKey={zoomStateKey}\n                    selectedDot={selectedDot}\n                    defaultPolygons={defaultPolygons}\n                    onPolygonUpdate={onPolygonUpdate}\n                    onLassoControlsStateUpdate={onLassoControlsStateUpdate}\n                    tooltipData={tooltipData}\n                />,\n                container\n            )}\n        </ErrorBoundary>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,EAAS,EACrB,eACA,WACA,kBACA,cACA,cACA,YACA,eACA,kBACA,cACA,iBACA,eACA,eACA,WACA,oBACA,wBACA,+BACA,mBACA,WACA,oBACA,iBAAc,QACA;AACd,KAAI,CAAC,EACD,QAAO;CAEX,IAAM,IAAc,EAAoB,GAAqB,EAAc,SAAS;AASpF,QARA,QAAgB;AACZ,EAAI,IACA,EAAY,aAAa,EAAY,GAErC,EAAY,cAAc;IAE/B,CAAC,EAAY,CAAC,EAGb,kBAAC,OAAD,EAAA,UACA,kBAAC,GAAD;EAAe,QAAQ;YAAvB,CACI,kBAAC,GAAD;GACgB;GACI;GACR;GACA;GACG;GACF;GACE;GACI;GACA;GACH;GACD;GACG;GACF;GACC;GACf,CAAA,EACD,EACG,kBAAC,GAAD;GACY;GACG;GACC;GACJ;GACI;GACE;GACD;GACI;GACA;GACW;GACf;GACf,CAAA,EACF,EACH,CACW;KACV,CAAA"}