@milaboratories/graph-maker 1.1.138 → 1.1.140

package/dist/node_modules/@milaboratories/miplots4/dist/scatterplot-umap/components/LowerSVG.js

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

package/dist/node_modules/@milaboratories/miplots4/dist/scatterplot-umap/components/LowerSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"LowerSVG.js","sources":["../../../../../../../node_modules/@milaboratories/miplots4/src/scatterplot-umap/components/LowerSVG.tsx"],"sourcesContent":["import { 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 { BLACK } from '../../constants';\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';\nimport { Axis } from '../../scatterplot/components/Axis';\nimport type { ColumnName } from '../../types';\nimport type { CurveUmapLayer } from '../../types/scatterplot-umap';\nimport { numberFormat } from '../../utils/numberFormat';\nimport { curveBasis, line } from 'd3-shape';\nimport React, { useEffect, useState } from 'react';\n\nfunction getTooltipContent(dot: DotInfo, keyColumn: ColumnName | null, columnsList: ColumnName[] = []) {\n    const row = dot.data;\n    const lines = [`x: ${numberFormat(dot.x)}`, `y: ${numberFormat(dot.y)}`];\n    if (keyColumn?.label) {\n        lines.unshift(`${keyColumn.label}: ${row[keyColumn.label]}`);\n    }\n    for (const column of columnsList) {\n        lines.push(`${column.label}: ${row[column.valueLabels ?? column.value]}`);\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 {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.chartWidth}\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                        <Axis scale={scales.x} orient=\"bottom\" tickSize={tickSizeX} />\n                    </g>\n                )}\n                {needLeftAxis && (\n                    <g>\n                        <Axis scale={scales.y} orient=\"left\" tickSize={tickSizeY} />\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.data)}\n                                strokeWidth={curveLayer.aes?.lineWidth}\n                                strokeDasharray={aesGetters.lineType(dot.data)}\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.data)}\n                                strokeWidth={curveLayer.aes?.lineWidth}\n                                strokeDasharray={aesGetters.lineType(dot.data)}\n                            />\n                        ))}\n                    </g>\n                )}\n                {tooltipData.selectedData && (\n                    <Tooltip\n                        content={getTooltipContent(tooltipData.selectedData, keyColumn, 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","dot","keyColumn","columnsList","row","lines","numberFormat","column","getTitle","title","lineGenerator","line","curveBasis","LowerSvg","scales","chartSettings","mainTitle","margins","chartSizes","container","zoomStateKey","legendData","dotsByGrouping","layers","aesGetters","tooltipData","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","Axis","_a","e","Tooltip","LEGEND_OFFSET","Legend","LowerSvg$1","React"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"LowerSVG.js","sources":["../../../../../../../node_modules/@milaboratories/miplots4/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 { Axis } from '../../scatterplot/components/Axis';\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.chartWidth}\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                        <Axis scale={scales.x} orient=\"bottom\" tickSize={tickSizeX} />\n                    </g>\n                )}\n                {needLeftAxis && (\n                    <g>\n                        <Axis scale={scales.y} orient=\"left\" tickSize={tickSizeY} />\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","keyColumn","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","Axis","_a","o","Tooltip","LEGEND_OFFSET","Legend","LowerSvg$1","React"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/node_modules/@milaboratories/miplots4/dist/scatterplot-umap/components/SVGLayer.js

@@ -2,10 +2,10 @@ import { j as a } from "../../node_modules/react/jsx-runtime.js";
 import { r as j } from "../../_virtual/index.js";
 import { r as x } from "../../node_modules/react-dom/index.js";
 import { ErrorBoundary as P } from "../../common/ErrorBoundary.js";
-import { useTooltip as k } from "../../common/Tooltip.js";
-import C from "./LowerSVG.js";
-import L from "./UpperSVG.js";
-function I({
+import { useTooltip as C } from "../../common/Tooltip.js";
+import L from "./LowerSVG.js";
+import T from "./UpperSVG.js";
+function w({
   settingsId: l,
   scales: s,
   chartSettings: m,
@@ -19,8 +19,8 @@ function I({
   aesGetters: i,
   legendData: y,
   labels: S,
-  onPolygonUpdate: f,
-  onTooltipHintSwitch: g,
+  onPolygonUpdate: g,
+  onTooltipHintSwitch: f,
   onLassoControlsStateUpdate: h,
   dotsByGrouping: z,
   layers: D,
@@ -29,12 +29,12 @@ function I({
 }) {
   if (!t)
     return null;
-  const o = k(g);
+  const o = C(f);
   return j.useEffect(() => {
     e ? o.onMouseEnter(e) : o.onMouseLeave();
   }, [e]), /* @__PURE__ */ a.jsx("div", { children: /* @__PURE__ */ a.jsxs(P, { dataId: l, children: [
     /* @__PURE__ */ a.jsx(
-      C,
+      L,
       {
         aesGetters: i,
         dotsByGrouping: z,
@@ -54,7 +54,7 @@ function I({
     ),
     x.createPortal(
       /* @__PURE__ */ a.jsx(
-        L,
+        T,
         {
           scales: s,
           container: t,
@@ -64,7 +64,7 @@ function I({
           zoomStateKey: r,
           selectedDot: e,
           defaultPolygons: G,
-          onPolygonUpdate: f,
+          onPolygonUpdate: g,
           onLassoControlsStateUpdate: h,
           tooltipData: o
         }
@@ -74,6 +74,6 @@ function I({
   ] }) });
 }
 export {
-  I as SVGLayer
+  w as SVGLayer
 };
 //# sourceMappingURL=SVGLayer.js.map

package/dist/node_modules/@milaboratories/miplots4/dist/scatterplot-umap/components/UpperSVG.js

@@ -1,10 +1,11 @@
 import { j as e } from "../../node_modules/react/jsx-runtime.js";
-import { Lasso as g } from "./Lasso.js";
-function u({
+import { getLabelMinX as y, getLabelMinY as g } from "../../scatterplot/utils/getVisibleLabels.js";
+import { Lasso as j } from "./Lasso.js";
+function D({
   scales: a,
   container: r,
   labels: i,
-  aesGetters: o,
+  aesGetters: n,
   chartSizes: s,
   zoomStateKey: d,
   defaultPolygons: c,
@@ -13,15 +14,15 @@ function u({
   tooltipData: t
 }) {
   return r ? /* @__PURE__ */ e.jsxs("g", { children: [
-    i.map((p, m) => {
-      const { name: y, height: n, bbox: l, width: f } = p;
-      return /* @__PURE__ */ e.jsx("g", { children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${l.minX},${l.minY})`, children: [
-        /* @__PURE__ */ e.jsx("rect", { x: "0", y: "0", width: f, height: n, fill: "transparent", stroke: "none" }),
+    i.map((o, p) => {
+      const { name: m, height: l, width: f } = o;
+      return /* @__PURE__ */ e.jsx("g", { children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${y(o)},${g(o)})`, children: [
+        /* @__PURE__ */ e.jsx("rect", { x: "0", y: "0", width: f, height: l, fill: "transparent", stroke: "none" }),
         /* @__PURE__ */ e.jsx(
           "text",
           {
             x: 0,
-            y: n / 2,
+            y: l / 2,
             stroke: "white",
             strokeWidth: 2,
             paintOrder: "stroke",
@@ -29,23 +30,23 @@ function u({
             fontFamily: "Manrope",
             fontSize: "16px",
             dominantBaseline: "middle",
-            children: y
+            children: m
           }
         )
-      ] }) }, m);
+      ] }) }, p);
     }),
     t.selectedData && /* @__PURE__ */ e.jsx(
       "circle",
       {
         cx: a.x(t.selectedData.x),
         cy: a.y(t.selectedData.y),
-        r: Math.max(o.dotSize(t.selectedData.data) * 1.2, 5),
-        fill: o.dotFill(t.selectedData.data),
+        r: Math.max(n.dotSize(t.selectedData.idx) * 1.2, 5),
+        fill: n.dotFill(t.selectedData.idx),
         style: { pointerEvents: "none" }
       }
     ),
     /* @__PURE__ */ e.jsx(
-      g,
+      j,
       {
         scales: a,
         chartSizes: s,
@@ -59,6 +60,6 @@ function u({
   ] }) : null;
 }
 export {
-  u as default
+  D as default
 };
 //# sourceMappingURL=UpperSVG.js.map

package/dist/node_modules/@milaboratories/miplots4/dist/scatterplot-umap/components/UpperSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"UpperSVG.js","sources":["../../../../../../../node_modules/@milaboratories/miplots4/src/scatterplot-umap/components/UpperSVG.tsx"],"sourcesContent":["import type { TooltipsData } from '../../common/Tooltip';\nimport type { Label } from '../../scatterplot/utils/getVisibleLabels';\nimport type { AesGetters, ChartScales, ChartSizes, DotInfo, LassoControlsState, Polygon } from '../types';\nimport { Lasso } from './Lasso';\n\nfunction UpperSVG({\n    scales,\n    container,\n    labels,\n    aesGetters,\n    chartSizes,\n    zoomStateKey,\n    defaultPolygons,\n    onPolygonUpdate,\n    onLassoControlsStateUpdate,\n    tooltipData\n}: {\n    scales: ChartScales;\n    container: SVGElement | null;\n    aesGetters: AesGetters;\n    labels: Label[];\n    chartSizes: ChartSizes;\n    zoomStateKey: string;\n    defaultPolygons: Polygon[];\n    onLassoControlsStateUpdate: (v:LassoControlsState) => void;\n    onPolygonUpdate: (data:Polygon[]) => void;\n    tooltipData: TooltipsData<DotInfo>;\n    selectedDot?: DotInfo | null;\n}) {\n    if (!container) {\n        return null;\n    }\n\n    return (\n        <g>\n            {labels.map((label, idx) => {\n                const {name, height, bbox, width} = label;\n                return (\n                    <g key={idx}>\n                        <g transform={`translate(${bbox.minX},${bbox.minY})`}>\n                            <rect x=\"0\" y=\"0\" width={width} height={height} fill=\"transparent\" stroke=\"none\" />\n                            <text\n                                x={0}\n                                y={height / 2}\n                                stroke=\"white\"\n                                strokeWidth={2}\n                                paintOrder=\"stroke\"\n                                style={{pointerEvents: 'none'}}\n                                fontFamily=\"Manrope\"\n                                fontSize=\"16px\"\n                                dominantBaseline=\"middle\"\n                            >\n                                {name}\n                            </text>\n                        </g>\n                    </g>\n                );\n            })}\n            {tooltipData.selectedData && (\n                <circle\n                    cx={scales.x(tooltipData.selectedData.x)}\n                    cy={scales.y(tooltipData.selectedData.y)}\n                    r={Math.max(aesGetters.dotSize(tooltipData.selectedData.data) * 1.2, 5)}\n                    fill={aesGetters.dotFill(tooltipData.selectedData.data)}\n                    style={{pointerEvents: 'none'}}\n                />\n            )}\n            <Lasso\n                scales={scales}\n                chartSizes={chartSizes}\n                zoomStateKey={zoomStateKey}\n                defaultPolygons={defaultPolygons}\n                onPolygonsApply={onPolygonUpdate}\n                onLassoControlsStateUpdate={onLassoControlsStateUpdate}\n            />\n            {tooltipData.fixed && <rect width={chartSizes.chartWidth} height={chartSizes.chartHeight} fill=\"rgba(255,255,255,0.8)\"/>}\n        </g>\n    );\n}\n\nexport default UpperSVG;\n"],"names":["UpperSVG","scales","container","labels","aesGetters","chartSizes","zoomStateKey","defaultPolygons","onPolygonUpdate","onLassoControlsStateUpdate","tooltipData","label","idx","name","height","bbox","width","jsx","jsxs","Lasso"],"mappings":";;AAKA,SAASA,EAAS;AAAA,EACd,QAAAC;AAAAA,EACA,WAAAC;AAAAA,EACA,QAAAC;AAAAA,EACA,YAAAC;AAAAA,EACA,YAAAC;AAAAA,EACA,cAAAC;AAAAA,EACA,iBAAAC;AAAAA,EACA,iBAAAC;AAAAA,EACA,4BAAAC;AAAAA,EACA,aAAAC;AACJ,GAYG;AACC,SAAKR,IAAAA,gBAAAA,EAAAA,KAKA,KAAA,EACI,UAAA;AAAA,IAAAC,EAAO,IAAI,CAACQ,GAAOC,MAAQ;AACxB,YAAM,EAAC,MAAAC,GAAM,QAAAC,GAAQ,MAAAC,GAAM,OAAAC,EAAAA,IAASL;AACpC,aACIM,gBAAAA,EAAAA,IAAC,KAAA,EACG,UAAAC,gBAAAA,EAAAA,KAAC,KAAA,EAAE,WAAW,aAAaH,EAAK,IAAI,IAAIA,EAAK,IAAI,KAC7C,UAAA;AAAA,QAAAE,gBAAAA,EAAAA,IAAC,QAAA,EAAK,GAAE,KAAI,GAAE,KAAI,OAAAD,GAAc,QAAAF,GAAgB,MAAK,eAAc,QAAO,QAAO;AAAA,QACjFG,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,GAAG;AAAA,YACH,GAAGH,IAAS;AAAA,YACZ,QAAO;AAAA,YACP,aAAa;AAAA,YACb,YAAW;AAAA,YACX,OAAO,EAAC,eAAe,OAAA;AAAA,YACvB,YAAW;AAAA,YACX,UAAS;AAAA,YACT,kBAAiB;AAAA,YAEhB,UAAAD;AAAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EACL,CACJ,EAAA,GAhBID,CAiBR;AAAA,IAER,CAAC;AAAA,IACAF,EAAY,gBACTO,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAIhB,EAAO,EAAES,EAAY,aAAa,CAAC;AAAA,QACvC,IAAIT,EAAO,EAAES,EAAY,aAAa,CAAC;AAAA,QACvC,GAAG,KAAK,IAAIN,EAAW,QAAQM,EAAY,aAAa,IAAI,IAAI,KAAK,CAAC;AAAA,QACtE,MAAMN,EAAW,QAAQM,EAAY,aAAa,IAAI;AAAA,QACtD,OAAO,EAAC,eAAe,OAAA;AAAA,MAAA;AAAA,IAAM;AAAA,IAGrCO,gBAAAA,EAAAA;AAAAA,MAACE;AAAAA,MAAA;AAAA,QACG,QAAAlB;AAAAA,QACA,YAAAI;AAAAA,QACA,cAAAC;AAAAA,QACA,iBAAAC;AAAAA,QACA,iBAAiBC;AAAAA,QACjB,4BAAAC;AAAAA,MAAA;AAAA,IAAA;AAAA,IAEHC,EAAY,SAASO,gBAAAA,EAAAA,IAAC,QAAA,EAAK,OAAOZ,EAAW,YAAY,QAAQA,EAAW,aAAa,MAAK,yBAAuB;AAAA,EAAA,GAC1H,IA9CO;AAgDf;","x_google_ignoreList":[0]}
+{"version":3,"file":"UpperSVG.js","sources":["../../../../../../../node_modules/@milaboratories/miplots4/src/scatterplot-umap/components/UpperSVG.tsx"],"sourcesContent":["import type { TooltipsData } from '../../common/Tooltip';\nimport { getLabelMinX, getLabelMinY, type Label } from '../../scatterplot/utils/getVisibleLabels';\nimport type { AesGetters, ChartScales, ChartSizes, DotInfo, LassoControlsState, Polygon } from '../types';\nimport { Lasso } from './Lasso';\n\nfunction UpperSVG({\n    scales,\n    container,\n    labels,\n    aesGetters,\n    chartSizes,\n    zoomStateKey,\n    defaultPolygons,\n    onPolygonUpdate,\n    onLassoControlsStateUpdate,\n    tooltipData\n}: {\n    scales: ChartScales;\n    container: SVGElement | null;\n    aesGetters: AesGetters;\n    labels: Label[];\n    chartSizes: ChartSizes;\n    zoomStateKey: string;\n    defaultPolygons: Polygon[];\n    onLassoControlsStateUpdate: (v:LassoControlsState) => void;\n    onPolygonUpdate: (data:Polygon[]) => void;\n    tooltipData: TooltipsData<DotInfo>;\n    selectedDot?: DotInfo | null;\n}) {\n    if (!container) {\n        return null;\n    }\n\n    return (\n        <g>\n            {labels.map((label, idx) => {\n                const {name, height, width} = label;\n                return (\n                    <g key={idx}>\n                        <g transform={`translate(${getLabelMinX(label)},${getLabelMinY(label)})`}>\n                            <rect x=\"0\" y=\"0\" width={width} height={height} fill=\"transparent\" stroke=\"none\" />\n                            <text\n                                x={0}\n                                y={height / 2}\n                                stroke=\"white\"\n                                strokeWidth={2}\n                                paintOrder=\"stroke\"\n                                style={{pointerEvents: 'none'}}\n                                fontFamily=\"Manrope\"\n                                fontSize=\"16px\"\n                                dominantBaseline=\"middle\"\n                            >\n                                {name}\n                            </text>\n                        </g>\n                    </g>\n                );\n            })}\n            {tooltipData.selectedData && (\n                <circle\n                    cx={scales.x(tooltipData.selectedData.x)}\n                    cy={scales.y(tooltipData.selectedData.y)}\n                    r={Math.max(aesGetters.dotSize(tooltipData.selectedData.idx) * 1.2, 5)}\n                    fill={aesGetters.dotFill(tooltipData.selectedData.idx)}\n                    style={{pointerEvents: 'none'}}\n                />\n            )}\n            <Lasso\n                scales={scales}\n                chartSizes={chartSizes}\n                zoomStateKey={zoomStateKey}\n                defaultPolygons={defaultPolygons}\n                onPolygonsApply={onPolygonUpdate}\n                onLassoControlsStateUpdate={onLassoControlsStateUpdate}\n            />\n            {tooltipData.fixed && <rect width={chartSizes.chartWidth} height={chartSizes.chartHeight} fill=\"rgba(255,255,255,0.8)\"/>}\n        </g>\n    );\n}\n\nexport default UpperSVG;\n"],"names":["UpperSVG","scales","container","labels","aesGetters","chartSizes","zoomStateKey","defaultPolygons","onPolygonUpdate","onLassoControlsStateUpdate","tooltipData","label","idx","name","height","width","jsx","jsxs","getLabelMinX","getLabelMinY","Lasso"],"mappings":";;;AAKA,SAASA,EAAS;AAAA,EACd,QAAAC;AAAAA,EACA,WAAAC;AAAAA,EACA,QAAAC;AAAAA,EACA,YAAAC;AAAAA,EACA,YAAAC;AAAAA,EACA,cAAAC;AAAAA,EACA,iBAAAC;AAAAA,EACA,iBAAAC;AAAAA,EACA,4BAAAC;AAAAA,EACA,aAAAC;AACJ,GAYG;AACC,SAAKR,IAAAA,gBAAAA,EAAAA,KAKA,KAAA,EACI,UAAA;AAAA,IAAAC,EAAO,IAAI,CAACQ,GAAOC,MAAQ;AACxB,YAAM,EAAC,MAAAC,GAAM,QAAAC,GAAQ,OAAAC,MAASJ;AAC9B,aACIK,gBAAAA,EAAAA,IAAC,KAAA,EACG,UAAAC,gBAAAA,EAAAA,KAAC,KAAA,EAAE,WAAW,aAAaC,EAAaP,CAAK,CAAC,IAAIQ,EAAaR,CAAK,CAAC,KACjE,UAAA;AAAA,QAAAK,gBAAAA,EAAAA,IAAC,QAAA,EAAK,GAAE,KAAI,GAAE,KAAI,OAAAD,GAAc,QAAAD,GAAgB,MAAK,eAAc,QAAO,QAAO;AAAA,QACjFE,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,GAAG;AAAA,YACH,GAAGF,IAAS;AAAA,YACZ,QAAO;AAAA,YACP,aAAa;AAAA,YACb,YAAW;AAAA,YACX,OAAO,EAAC,eAAe,OAAA;AAAA,YACvB,YAAW;AAAA,YACX,UAAS;AAAA,YACT,kBAAiB;AAAA,YAEhB,UAAAD;AAAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EACL,CACJ,EAAA,GAhBID,CAiBR;AAAA,IAER,CAAC;AAAA,IACAF,EAAY,gBACTM,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAIf,EAAO,EAAES,EAAY,aAAa,CAAC;AAAA,QACvC,IAAIT,EAAO,EAAES,EAAY,aAAa,CAAC;AAAA,QACvC,GAAG,KAAK,IAAIN,EAAW,QAAQM,EAAY,aAAa,GAAG,IAAI,KAAK,CAAC;AAAA,QACrE,MAAMN,EAAW,QAAQM,EAAY,aAAa,GAAG;AAAA,QACrD,OAAO,EAAC,eAAe,OAAA;AAAA,MAAA;AAAA,IAAM;AAAA,IAGrCM,gBAAAA,EAAAA;AAAAA,MAACI;AAAAA,MAAA;AAAA,QACG,QAAAnB;AAAAA,QACA,YAAAI;AAAAA,QACA,cAAAC;AAAAA,QACA,iBAAAC;AAAAA,QACA,iBAAiBC;AAAAA,QACjB,4BAAAC;AAAAA,MAAA;AAAA,IAAA;AAAA,IAEHC,EAAY,SAASM,gBAAAA,EAAAA,IAAC,QAAA,EAAK,OAAOX,EAAW,YAAY,QAAQA,EAAW,aAAa,MAAK,yBAAuB;AAAA,EAAA,GAC1H,IA9CO;AAgDf;","x_google_ignoreList":[0]}