@tetrascience-npm/tetrascience-react-ui 0.7.0 → 1.0.0

package/dist/components/charts/ScatterPlotInteractive/ScatterPlotInteractive.js

@@ -0,0 +1,215 @@
+import { jsxs as ve, jsx as Re } from "react/jsx-runtime";
+import { useRef as S, useState as Se, useMemo as o, useEffect as de } from "react";
+/* empty css                            */
+import { useChartTooltip as Te } from "../ChartTooltip/ChartTooltip.js";
+import { loadPlotly as ue, getLoadedPlotly as ge } from "../plotly-loader.js";
+import { PLOT_CONSTANTS as ae, DEFAULT_COLOR_SCALE as _e, COLORS as he } from "./constants.js";
+import { downsampleData as Ce, mapColors as Pe, mapShapes as we, mapSizes as Ee, calculateAxisRange as fe, generateTooltipContent as Oe, calculateRange as Ne, getPlotlyLayoutConfig as ke, getSelectionMode as Le, applySelection as Be } from "./utils.js";
+import { usePlotlyTheme as De } from "../../../hooks/use-plotly-theme.js";
+const me = {}, Fe = { enabled: !0 }, Xe = ({
+  data: p,
+  title: x,
+  xAxis: l = me,
+  yAxis: i = me,
+  colorMapping: n,
+  shapeMapping: A,
+  sizeMapping: V,
+  tooltip: d = Fe,
+  enableClickSelection: X = !0,
+  enableBoxSelection: T = !0,
+  enableLassoSelection: g = !0,
+  selectedIds: $,
+  onSelectionChange: q,
+  onPointClick: H,
+  downsampling: E,
+  width: O = 800,
+  height: N = 600,
+  showColorBar: J = !0,
+  className: K
+}) => {
+  const y = S(null), Q = De(), _ = S(q), W = S(H), Y = S(/* @__PURE__ */ new Set()), h = S(!1);
+  _.current = q, W.current = H;
+  const [pe, k] = Se(/* @__PURE__ */ new Set()), Z = $ !== void 0, L = Z ? $ : pe;
+  Y.current = L, h.current = Z;
+  const M = o(() => new Set([...L].map(String)), [L]), ee = o(() => new Map(p.map((e) => [String(e.id), e.id])), [p]), t = o(() => E ? Ce(p, E) : p, [p, E]), C = o(() => Pe(t, n), [t, n]), te = o(() => we(t, A), [t, A]), ne = o(() => Ee(t, V), [t, V]), re = o(() => {
+    if (l.range) return l.range;
+    if (l.autoRange !== !1)
+      return fe(t, "x", l.autoRangePadding ?? ae.AUTO_RANGE_PADDING, l.scale);
+  }, [t, l]), oe = o(() => {
+    if (i.range) return i.range;
+    if (i.autoRange !== !1)
+      return fe(t, "y", i.autoRangePadding ?? ae.AUTO_RANGE_PADDING, i.scale);
+  }, [t, i]), a = d.enabled !== !1, P = d.native === !0, B = o(() => a ? t.map(
+    (e) => d.content ? d.content(e) : Oe(e, d.fields)
+  ) : [], [t, d, a]), { bindTooltip: se, tooltipElement: ye } = Te({
+    getLines: (e) => {
+      const r = e[0]?.pointIndex;
+      return r === void 0 ? [] : (B[r] ?? "").split("<br>").filter(Boolean);
+    }
+  }), ce = o(() => n?.type === "continuous" && n.field && t.length > 0 ? t.map((e) => {
+    const r = e.metadata?.[n.field];
+    return typeof r == "number" && Number.isFinite(r) ? r : 0;
+  }) : C, [t, n, C]), D = o(() => {
+    if (n?.type === "continuous") {
+      const e = n.colorScale || _e;
+      return e;
+    }
+  }, [n]), le = o(() => {
+    const e = {
+      size: ne,
+      symbol: te,
+      // Points carry no outline; depth comes from a CSS drop-shadow
+      // (see ScatterPlotInteractive.scss). Selected points re-add a line below.
+      line: {
+        width: 0
+      }
+    };
+    if (n?.type === "continuous" && D) {
+      if (e.color = ce, e.colorscale = D, e.showscale = J, n.field) {
+        const r = n.min !== void 0 && n.max !== void 0 ? { min: n.min, max: n.max } : Ne(t, n.field);
+        e.cmin = r.min, e.cmax = r.max, e.colorbar = {
+          title: { text: n.field, side: "right" },
+          thickness: 20,
+          len: 0.7
+        };
+      }
+    } else
+      e.color = C;
+    return e;
+  }, [ne, te, n, D, ce, J, t, C]);
+  de(() => {
+    const e = y.current;
+    if (!e || t.length === 0) return;
+    const r = t.map((u) => u.x), I = t.map((u) => u.y), w = t.map((u) => String(u.id)), v = [{
+      x: r,
+      y: I,
+      ids: w,
+      mode: "markers",
+      type: "scatter",
+      marker: le,
+      // "none" keeps hover events firing for the HTML tooltip without
+      // showing Plotly's hover label; "skip" disables hover entirely
+      hoverinfo: a ? P ? "text" : "none" : "skip",
+      text: B,
+      hovertemplate: a && P ? "%{text}<extra></extra>" : void 0,
+      showlegend: !1,
+      unselected: {
+        marker: {
+          opacity: 0.3
+        }
+      },
+      selected: {
+        marker: {
+          opacity: 1,
+          line: {
+            color: he.selected,
+            width: 2
+          }
+        }
+      }
+    }], G = ke({
+      title: x,
+      xAxis: l,
+      yAxis: i,
+      width: O,
+      height: N,
+      xRange: re,
+      yRange: oe,
+      enableLassoSelection: g,
+      enableBoxSelection: T,
+      theme: Q
+    }), U = {
+      responsive: !0,
+      displayModeBar: !0,
+      displaylogo: !1,
+      modeBarButtonsToAdd: [],
+      modeBarButtonsToRemove: ["toImage"]
+    };
+    T && U.modeBarButtonsToAdd?.push("select2d"), g && U.modeBarButtonsToAdd?.push("lasso2d");
+    let ie = !1, z = null;
+    return ue().then((u) => {
+      if (ie || !y.current) return;
+      u.newPlot(e, v, G, U);
+      const b = e;
+      X && b.on("plotly_click", (c) => {
+        const f = c.points[0];
+        if (f && f.data.ids) {
+          const j = f.data.ids[f.pointIndex], m = t.find((s) => String(s.id) === j);
+          if (m) {
+            W.current?.(m, c.event);
+            const s = Le(c.event), R = Be(Y.current, /* @__PURE__ */ new Set([m.id]), s);
+            h.current || k(R), _.current?.(R, s);
+          }
+        }
+      }), (T || g) && (b.on("plotly_selected", (c) => {
+        if (c && c.points) {
+          const f = c.points.map((s) => {
+            if (s.data.ids && s.pointIndex !== void 0) {
+              const R = s.data.ids[s.pointIndex];
+              return ee.get(R) ?? R;
+            }
+            return null;
+          }).filter((s) => s !== null), j = "replace", m = new Set(f);
+          h.current || k(m), _.current?.(m, j);
+        }
+      }), b.on("plotly_deselect", () => {
+        const c = /* @__PURE__ */ new Set();
+        h.current || k(c), _.current?.(c, "replace");
+      })), a && !P && se(e), z = e;
+    }), () => {
+      ie = !0, z && ge().purge(z);
+    };
+  }, [
+    t,
+    le,
+    l,
+    i,
+    re,
+    oe,
+    x,
+    O,
+    N,
+    d,
+    B,
+    X,
+    T,
+    g,
+    ee,
+    a,
+    P,
+    se,
+    Q
+  ]), de(() => {
+    if (!y.current || t.length === 0) return;
+    let e = !1;
+    return ue().then((r) => {
+      const I = y.current;
+      if (e || !I || !I._fullLayout) return;
+      const w = I, F = t.map((v, G) => M.has(String(v.id)) ? G : null).filter((v) => v !== null);
+      F.length > 0 ? r.restyle(
+        w,
+        {
+          selectedpoints: [F]
+        },
+        [0]
+      ) : r.restyle(
+        w,
+        {
+          selectedpoints: [null]
+        },
+        [0]
+      );
+    }), () => {
+      e = !0;
+    };
+  }, [M, t]);
+  const Ie = K ? `scatter-plot-interactive relative ${K}` : "scatter-plot-interactive relative";
+  return /* @__PURE__ */ ve("div", { className: Ie, children: [
+    /* @__PURE__ */ Re("div", { ref: y, className: "scatter-plot-interactive__plot", style: { width: O, height: N } }),
+    ye
+  ] });
+};
+export {
+  Xe as ScatterPlotInteractive
+};
+//# sourceMappingURL=ScatterPlotInteractive.js.map

package/dist/components/charts/ScatterPlotInteractive/ScatterPlotInteractive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterPlotInteractive.js","sources":["../../../../src/components/charts/ScatterPlotInteractive/ScatterPlotInteractive.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport \"./ScatterPlotInteractive.scss\";\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport { COLORS, DEFAULT_COLOR_SCALE, PLOT_CONSTANTS } from \"./constants\";\nimport {\n  applySelection,\n  calculateAxisRange,\n  calculateRange,\n  downsampleData,\n  generateTooltipContent,\n  getPlotlyLayoutConfig,\n  getSelectionMode,\n  mapColors,\n  mapShapes,\n  mapSizes,\n} from \"./utils\";\n\nimport type { AxisConfig, ScatterPlotInteractiveProps, SelectionMode, TooltipConfig } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n// Stable default prop objects — inline defaults would create a new identity\n// on every render, retriggering the plot effect (and tearing down the\n// tooltip) whenever internal state changes\nconst DEFAULT_AXIS_CONFIG: AxisConfig = {};\nconst DEFAULT_TOOLTIP_CONFIG: TooltipConfig = { enabled: true };\n\n/**\n * ScatterPlotInteractive component for visualizing scatter plot data with advanced interactions.\n *\n * **Features:**\n * - Data-driven and static styling (color, shape, size)\n * - Interactive selection (click, box, lasso)\n * - Keyboard modifiers for click-selection modes (Shift/Ctrl)\n * - Customizable tooltips with rich content support\n * - Axis customization (ranges, log/linear scales)\n * - Performance optimizations for large datasets\n * - Selection propagation via callbacks\n *\n * **Selection Modes (click selection only):**\n * - Default click: Replace selection\n * - Shift + click: Add to selection\n * - Ctrl/Cmd + click: Remove from selection\n * - Shift + Ctrl + click: Toggle selection\n *\n * Box/lasso selection always replaces the current selection because\n * Plotly does not expose the original keyboard event for drag operations.\n */\nconst ScatterPlotInteractive: React.FC<ScatterPlotInteractiveProps> = ({\n  data,\n  title,\n  xAxis = DEFAULT_AXIS_CONFIG,\n  yAxis = DEFAULT_AXIS_CONFIG,\n  colorMapping,\n  shapeMapping,\n  sizeMapping,\n  tooltip = DEFAULT_TOOLTIP_CONFIG,\n  enableClickSelection = true,\n  enableBoxSelection = true,\n  enableLassoSelection = true,\n  selectedIds: controlledSelectedIds,\n  onSelectionChange,\n  onPointClick,\n  downsampling,\n  width = 800,\n  height = 600,\n  showColorBar = true,\n  className,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const onSelectionChangeRef = useRef(onSelectionChange);\n  const onPointClickRef = useRef(onPointClick);\n  const selectedIdsRef = useRef<Set<string | number>>(new Set());\n  const isControlledRef = useRef(false);\n\n  // Keep refs updated\n  onSelectionChangeRef.current = onSelectionChange;\n  onPointClickRef.current = onPointClick;\n\n  // Internal selection state (only used in uncontrolled mode)\n  const [internalSelectedIds, setInternalSelectedIds] = useState<Set<string | number>>(new Set());\n\n  // Use controlled or uncontrolled selection\n  const isControlled = controlledSelectedIds !== undefined;\n  const selectedIds = isControlled ? controlledSelectedIds : internalSelectedIds;\n  selectedIdsRef.current = selectedIds;\n  isControlledRef.current = isControlled;\n\n  // Normalize to strings so numeric IDs passed by consumers always match the\n  // string IDs that Plotly stores (we always do String(p.id) when building the trace).\n  const normalizedSelectedIds = useMemo(() => new Set([...selectedIds].map(String)), [selectedIds]);\n\n  // Reverse-lookup: Plotly string ID → original (possibly numeric) ScatterPoint ID.\n  // Used to restore original ID types when echoing selections back to consumers.\n  const originalIdLookup = useMemo(() => new Map(data.map((p) => [String(p.id), p.id])), [data]);\n\n  // Apply downsampling if configured\n  const processedData = useMemo(() => {\n    if (!downsampling) {\n      return data;\n    }\n    return downsampleData(data, downsampling);\n  }, [data, downsampling]);\n\n  // Map colors, shapes, and sizes based on configuration\n  const colors = useMemo(() => mapColors(processedData, colorMapping), [processedData, colorMapping]);\n\n  const shapes = useMemo(() => mapShapes(processedData, shapeMapping), [processedData, shapeMapping]);\n\n  const sizes = useMemo(() => mapSizes(processedData, sizeMapping), [processedData, sizeMapping]);\n\n  // Calculate axis ranges\n  const xRange = useMemo(() => {\n    if (xAxis.range) return xAxis.range;\n    if (xAxis.autoRange === false) return;\n    return calculateAxisRange(processedData, \"x\", xAxis.autoRangePadding ?? PLOT_CONSTANTS.AUTO_RANGE_PADDING, xAxis.scale);\n  }, [processedData, xAxis]);\n\n  const yRange = useMemo(() => {\n    if (yAxis.range) return yAxis.range;\n    if (yAxis.autoRange === false) return;\n    return calculateAxisRange(processedData, \"y\", yAxis.autoRangePadding ?? PLOT_CONSTANTS.AUTO_RANGE_PADDING, yAxis.scale);\n  }, [processedData, yAxis]);\n\n  const tooltipEnabled = tooltip.enabled !== false;\n  const nativeTooltip = tooltip.native === true;\n\n  // Build tooltip text\n  const tooltipText = useMemo(() => {\n    if (!tooltipEnabled) return [];\n\n    return processedData.map((point) =>\n      tooltip.content ? tooltip.content(point) : generateTooltipContent(point, tooltip.fields),\n    );\n  }, [processedData, tooltip, tooltipEnabled]);\n\n  // Design-system tooltip driven by Plotly hover events\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    getLines: (points) => {\n      const index = points[0]?.pointIndex;\n      if (index === undefined) return [];\n      return (tooltipText[index] ?? \"\").split(\"<br>\").filter(Boolean);\n    },\n  });\n\n  // Prepare Plotly-compatible color data\n  const plotlyColors = useMemo(() => {\n    if (colorMapping?.type === \"continuous\" && colorMapping.field && processedData.length > 0) {\n      // For continuous mapping, extract the numeric values\n      return processedData.map((point) => {\n        const value = point.metadata?.[colorMapping.field!];\n        return typeof value === \"number\" && Number.isFinite(value) ? value : 0;\n      });\n    }\n    return colors;\n  }, [processedData, colorMapping, colors]);\n\n  // Build colorscale for continuous mapping\n  const plotlyColorscale = useMemo(() => {\n    if (colorMapping?.type === \"continuous\") {\n      const scale = colorMapping.colorScale || DEFAULT_COLOR_SCALE;\n      return typeof scale === \"string\" ? scale : scale;\n    }\n  }, [colorMapping]);\n\n  // Build marker configuration for Plotly\n  const markerConfig = useMemo((): Partial<Plotly.PlotMarker> => {\n    const config: Partial<Plotly.PlotMarker> = {\n      size: sizes,\n      symbol: shapes,\n      // Points carry no outline; depth comes from a CSS drop-shadow\n      // (see ScatterPlotInteractive.scss). Selected points re-add a line below.\n      line: {\n        width: 0,\n      },\n    };\n\n    // Configure color mapping\n    if (colorMapping?.type === \"continuous\" && plotlyColorscale) {\n      config.color = plotlyColors as number[];\n      config.colorscale = plotlyColorscale;\n      config.showscale = showColorBar;\n\n      if (colorMapping.field) {\n        const range =\n          colorMapping.min !== undefined && colorMapping.max !== undefined\n            ? { min: colorMapping.min, max: colorMapping.max }\n            : calculateRange(processedData, colorMapping.field);\n        config.cmin = range.min;\n        config.cmax = range.max;\n        config.colorbar = {\n          title: { text: colorMapping.field, side: \"right\" },\n          thickness: 20,\n          len: 0.7,\n        };\n      }\n    } else {\n      config.color = colors;\n    }\n\n    return config;\n  }, [sizes, shapes, colorMapping, plotlyColorscale, plotlyColors, showColorBar, processedData, colors]);\n\n  // Create Plotly plot\n  useEffect(() => {\n    const currentRef = plotRef.current;\n    if (!currentRef || processedData.length === 0) return;\n\n    const xValues = processedData.map((p) => p.x);\n    const yValues = processedData.map((p) => p.y);\n    const ids = processedData.map((p) => String(p.id));\n\n    // Create base trace\n    const trace: Partial<Plotly.PlotData> & {\n      unselected?: { marker?: { opacity?: number } };\n      selected?: { marker?: { opacity?: number; line?: { color?: string; width?: number } } };\n    } = {\n      x: xValues,\n      y: yValues,\n      ids,\n      mode: \"markers\",\n      type: \"scatter\",\n      marker: markerConfig,\n      // \"none\" keeps hover events firing for the HTML tooltip without\n      // showing Plotly's hover label; \"skip\" disables hover entirely\n      hoverinfo: tooltipEnabled ? (nativeTooltip ? \"text\" : \"none\") : \"skip\",\n      text: tooltipText,\n      hovertemplate: tooltipEnabled && nativeTooltip ? \"%{text}<extra></extra>\" : undefined,\n      showlegend: false,\n      unselected: {\n        marker: {\n          opacity: 0.3,\n        },\n      },\n      selected: {\n        marker: {\n          opacity: 1,\n          line: {\n            color: COLORS.selected,\n            width: 2,\n          },\n        },\n      },\n    };\n\n    const plotData: Plotly.Data[] = [trace as Plotly.Data];\n\n    // Configure layout\n    const layout: Partial<Plotly.Layout> = getPlotlyLayoutConfig({\n      title,\n      xAxis,\n      yAxis,\n      width,\n      height,\n      xRange,\n      yRange,\n      enableLassoSelection,\n      enableBoxSelection,\n      theme,\n    });\n\n    const config: Partial<Plotly.Config> = {\n      responsive: true,\n      displayModeBar: true,\n      displaylogo: false,\n      modeBarButtonsToAdd: [],\n      modeBarButtonsToRemove: [\"toImage\"],\n    };\n\n    // Add selection mode buttons if enabled\n    if (enableBoxSelection) {\n      config.modeBarButtonsToAdd?.push(\"select2d\" as never);\n    }\n    if (enableLassoSelection) {\n      config.modeBarButtonsToAdd?.push(\"lasso2d\" as never);\n    }\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let drawnElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(currentRef, plotData, layout, config);\n\n      // Attach event handlers\n      const plotElement = currentRef as unknown as Plotly.PlotlyHTMLElement;\n\n      // Handle point click\n      if (enableClickSelection) {\n        plotElement.on(\"plotly_click\", (eventData: Plotly.PlotMouseEvent) => {\n          const point = eventData.points[0];\n          if (point && point.data.ids) {\n            const clickedId = point.data.ids[point.pointIndex];\n            const clickedPoint = processedData.find((p) => String(p.id) === clickedId);\n\n            if (clickedPoint) {\n              // Call point click handler if provided\n              onPointClickRef.current?.(clickedPoint, eventData.event as MouseEvent);\n\n              // Handle selection. Use the original-typed ID from the matched point so\n              // numeric IDs (e.g., 123) are preserved instead of being coerced to \"123\".\n              const mode = getSelectionMode(eventData.event as MouseEvent);\n              const newSelection = applySelection(selectedIdsRef.current, new Set([clickedPoint.id]), mode);\n\n              if (!isControlledRef.current) {\n                setInternalSelectedIds(newSelection);\n              }\n              onSelectionChangeRef.current?.(newSelection, mode);\n            }\n          }\n        });\n      }\n\n      // Handle box/lasso selection\n      if (enableBoxSelection || enableLassoSelection) {\n        plotElement.on(\"plotly_selected\", (eventData: Plotly.PlotSelectionEvent) => {\n          if (eventData && eventData.points) {\n            const selectedPointIds = eventData.points\n              .map((p): string | number | null => {\n                if (p.data.ids && p.pointIndex !== undefined) {\n                  const strId = p.data.ids[p.pointIndex] as string;\n                  // Restore the original ID type (string or number) via the lookup.\n                  return originalIdLookup.get(strId) ?? strId;\n                }\n                return null;\n              })\n              .filter((id: string | number | null): id is string | number => id !== null);\n\n            // Get selection mode from keyboard state\n            // Note: Plotly doesn't pass the original event, so we can't detect modifiers\n            // For now, box/lasso selection always replaces\n            const mode: SelectionMode = \"replace\";\n            const newSelection = new Set<string | number>(selectedPointIds);\n\n            if (!isControlledRef.current) {\n              setInternalSelectedIds(newSelection);\n            }\n            onSelectionChangeRef.current?.(newSelection, mode);\n          }\n        });\n\n        // Handle deselect (clicking on background)\n        plotElement.on(\"plotly_deselect\", () => {\n          const newSelection = new Set<string | number>();\n          if (!isControlledRef.current) {\n            setInternalSelectedIds(newSelection);\n          }\n          onSelectionChangeRef.current?.(newSelection, \"replace\");\n        });\n      }\n\n      // Design-system tooltip driven by Plotly hover events\n      if (tooltipEnabled && !nativeTooltip) {\n        bindTooltip(currentRef);\n      }\n\n      // Capture ref value for cleanup\n      drawnElement = currentRef;\n    });\n\n    return () => {\n      cancelled = true;\n      if (drawnElement) {\n        getLoadedPlotly().purge(drawnElement);\n      }\n    };\n  }, [\n    processedData,\n    markerConfig,\n    xAxis,\n    yAxis,\n    xRange,\n    yRange,\n    title,\n    width,\n    height,\n    tooltip,\n    tooltipText,\n    enableClickSelection,\n    enableBoxSelection,\n    enableLassoSelection,\n    originalIdLookup,\n    tooltipEnabled,\n    nativeTooltip,\n    bindTooltip,\n    theme,\n  ]);\n\n  // Apply selection state to Plotly\n  useEffect(() => {\n    if (!plotRef.current || processedData.length === 0) return;\n\n    // Wait for the lazily-loaded Plotly module: the draw effect registers its\n    // loadPlotly().then first, so by the time this callback runs the plot has\n    // been drawn — preserving the original \"restyle right after newPlot\"\n    // ordering on initial mount.\n    let cancelled = false;\n    void loadPlotly().then((plotly) => {\n      const currentRef = plotRef.current;\n      if (cancelled || !currentRef) return;\n      // Guard: skip if the chart hasn't been drawn (e.g. the draw was cancelled).\n      if (!(currentRef as { _fullLayout?: unknown })._fullLayout) return;\n\n      const plotElement = currentRef as unknown as Plotly.PlotlyHTMLElement;\n\n      // Find indices of selected points. Use the string-normalized set to match the string IDs Plotly stores\n      const selectedIndices = processedData\n        .map((point, index) => (normalizedSelectedIds.has(String(point.id)) ? index : null))\n        .filter((index): index is number => index !== null);\n\n      // Update Plotly selection\n      if (selectedIndices.length > 0) {\n        plotly.restyle(\n          plotElement,\n          {\n            selectedpoints: [selectedIndices],\n          },\n          [0],\n        );\n      } else {\n        plotly.restyle(\n          plotElement,\n          {\n            selectedpoints: [null],\n          },\n          [0],\n        );\n      }\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [normalizedSelectedIds, processedData]);\n\n  const containerClassName = className\n    ? `scatter-plot-interactive relative ${className}`\n    : \"scatter-plot-interactive relative\";\n\n  return (\n    <div className={containerClassName}>\n      <div ref={plotRef} className=\"scatter-plot-interactive__plot\" style={{ width, height }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { ScatterPlotInteractive };\n"],"names":["DEFAULT_AXIS_CONFIG","DEFAULT_TOOLTIP_CONFIG","ScatterPlotInteractive","data","title","xAxis","yAxis","colorMapping","shapeMapping","sizeMapping","tooltip","enableClickSelection","enableBoxSelection","enableLassoSelection","controlledSelectedIds","onSelectionChange","onPointClick","downsampling","width","height","showColorBar","className","plotRef","useRef","theme","usePlotlyTheme","onSelectionChangeRef","onPointClickRef","selectedIdsRef","isControlledRef","internalSelectedIds","setInternalSelectedIds","useState","isControlled","selectedIds","normalizedSelectedIds","useMemo","originalIdLookup","p","processedData","downsampleData","colors","mapColors","shapes","mapShapes","sizes","mapSizes","xRange","calculateAxisRange","PLOT_CONSTANTS","yRange","tooltipEnabled","nativeTooltip","tooltipText","point","generateTooltipContent","bindTooltip","tooltipElement","useChartTooltip","points","index","plotlyColors","value","plotlyColorscale","scale","DEFAULT_COLOR_SCALE","markerConfig","config","range","calculateRange","useEffect","currentRef","xValues","yValues","ids","plotData","COLORS","layout","getPlotlyLayoutConfig","cancelled","drawnElement","loadPlotly","plotly","plotElement","eventData","clickedId","clickedPoint","mode","getSelectionMode","newSelection","applySelection","selectedPointIds","strId","id","getLoadedPlotly","selectedIndices","containerClassName","jsxs","jsx"],"mappings":"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"}

package/dist/components/charts/ScatterPlotInteractive/constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("../../../hooks/use-plotly-theme.cjs"),_=require("../../../utils/colors.cjs"),O={primary:_.CHART_COLORS[0],selected:_.CHART_COLORS[3]},E=_.toPlotlyColorscale(_.CHART_DIVERGING.blueOrange),A=_.CHART_COLORS,I=8,L=[4,20],R=5e3,S={MARGIN_LEFT:80,MARGIN_RIGHT:30,MARGIN_TOP:80,MARGIN_BOTTOM:80,TITLE_FONT_SIZE:20,AXIS_TITLE_FONT_SIZE:16,AXIS_TICK_FONT_SIZE:12,LEGEND_FONT_SIZE:12,FONT_FAMILY:T.CHART_FONT_FAMILY,GRID_WIDTH:1,AXIS_LINE_WIDTH:1,AUTO_RANGE_PADDING:.1},N={ADD:"shiftKey",REMOVE:"ctrlKey",TOGGLE:"both"};exports.COLORS=O;exports.DEFAULT_CATEGORY_COLORS=A;exports.DEFAULT_COLOR_SCALE=E;exports.DEFAULT_MARKER_SIZE=I;exports.DEFAULT_MAX_POINTS=R;exports.DEFAULT_SIZE_RANGE=L;exports.PLOT_CONSTANTS=S;exports.SELECTION_MODIFIERS=N;
+//# sourceMappingURL=constants.cjs.map

package/dist/components/charts/ScatterPlotInteractive/constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.cjs","sources":["../../../../src/components/charts/ScatterPlotInteractive/constants.ts"],"sourcesContent":["import { CHART_FONT_FAMILY } from \"@/hooks/use-plotly-theme\";\nimport {\n  CHART_COLORS,\n  CHART_DIVERGING,\n  toPlotlyColorscale,\n} from \"@/utils/colors\";\n\n/**\n * Default colors for the scatter plot. Background, grid, and axis colors\n * come from the active theme via `usePlotlyTheme`.\n */\nexport const COLORS = {\n  primary: CHART_COLORS[0],\n  selected: CHART_COLORS[3],\n};\n\n/**\n * Default color scale for continuous color mapping (CVD-friendly diverging ramp)\n */\nexport const DEFAULT_COLOR_SCALE: Array<[number, string]> =\n  toPlotlyColorscale(CHART_DIVERGING.blueOrange);\n\n/**\n * Default category colors (cycle through these)\n */\nexport const DEFAULT_CATEGORY_COLORS = CHART_COLORS;\n\n/**\n * Default sizes\n */\nexport const DEFAULT_MARKER_SIZE = 8;\nexport const DEFAULT_SIZE_RANGE: [number, number] = [4, 20];\n\n/**\n * Default downsampling configuration\n */\nexport const DEFAULT_MAX_POINTS = 5000;\n\n/**\n * Constants for plot layout\n */\nexport const PLOT_CONSTANTS = {\n  MARGIN_LEFT: 80,\n  MARGIN_RIGHT: 30,\n  MARGIN_TOP: 80,\n  MARGIN_BOTTOM: 80,\n  TITLE_FONT_SIZE: 20,\n  AXIS_TITLE_FONT_SIZE: 16,\n  AXIS_TICK_FONT_SIZE: 12,\n  LEGEND_FONT_SIZE: 12,\n  FONT_FAMILY: CHART_FONT_FAMILY,\n  GRID_WIDTH: 1,\n  AXIS_LINE_WIDTH: 1,\n  AUTO_RANGE_PADDING: 0.1, // 10% padding\n};\n\n/**\n * Selection mode keyboard modifiers\n */\nexport const SELECTION_MODIFIERS = {\n  ADD: \"shiftKey\", // Shift\n  REMOVE: \"ctrlKey\", // Ctrl/Cmd\n  TOGGLE: \"both\", // Shift + Ctrl/Cmd\n} as const;\n"],"names":["COLORS","CHART_COLORS","DEFAULT_COLOR_SCALE","toPlotlyColorscale","CHART_DIVERGING","DEFAULT_CATEGORY_COLORS","DEFAULT_MARKER_SIZE","DEFAULT_SIZE_RANGE","DEFAULT_MAX_POINTS","PLOT_CONSTANTS","CHART_FONT_FAMILY","SELECTION_MODIFIERS"],"mappings":"8KAWaA,EAAS,CACpB,QAASC,EAAAA,aAAa,CAAC,EACvB,SAAUA,EAAAA,aAAa,CAAC,CAC1B,EAKaC,EACXC,EAAAA,mBAAmBC,EAAAA,gBAAgB,UAAU,EAKlCC,EAA0BJ,EAAAA,aAK1BK,EAAsB,EACtBC,EAAuC,CAAC,EAAG,EAAE,EAK7CC,EAAqB,IAKrBC,EAAiB,CAC5B,YAAa,GACb,aAAc,GACd,WAAY,GACZ,cAAe,GACf,gBAAiB,GACjB,qBAAsB,GACtB,oBAAqB,GACrB,iBAAkB,GAClB,YAAaC,EAAAA,kBACb,WAAY,EACZ,gBAAiB,EACjB,mBAAoB,EACtB,EAKaC,EAAsB,CACjC,IAAK,WACL,OAAQ,UACR,OAAQ,MACV"}

package/dist/components/charts/ScatterPlotInteractive/constants.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Default colors for the scatter plot. Background, grid, and axis colors
+ * come from the active theme via `usePlotlyTheme`.
+ */
+export declare const COLORS: {
+    primary: string;
+    selected: string;
+};
+/**
+ * Default color scale for continuous color mapping (CVD-friendly diverging ramp)
+ */
+export declare const DEFAULT_COLOR_SCALE: Array<[number, string]>;
+/**
+ * Default category colors (cycle through these)
+ */
+export declare const DEFAULT_CATEGORY_COLORS: readonly [string, string, string, string, string, string, string, string, string, string, string, string];
+/**
+ * Default sizes
+ */
+export declare const DEFAULT_MARKER_SIZE = 8;
+export declare const DEFAULT_SIZE_RANGE: [number, number];
+/**
+ * Default downsampling configuration
+ */
+export declare const DEFAULT_MAX_POINTS = 5000;
+/**
+ * Constants for plot layout
+ */
+export declare const PLOT_CONSTANTS: {
+    MARGIN_LEFT: number;
+    MARGIN_RIGHT: number;
+    MARGIN_TOP: number;
+    MARGIN_BOTTOM: number;
+    TITLE_FONT_SIZE: number;
+    AXIS_TITLE_FONT_SIZE: number;
+    AXIS_TICK_FONT_SIZE: number;
+    LEGEND_FONT_SIZE: number;
+    FONT_FAMILY: string;
+    GRID_WIDTH: number;
+    AXIS_LINE_WIDTH: number;
+    AUTO_RANGE_PADDING: number;
+};
+/**
+ * Selection mode keyboard modifiers
+ */
+export declare const SELECTION_MODIFIERS: {
+    readonly ADD: "shiftKey";
+    readonly REMOVE: "ctrlKey";
+    readonly TOGGLE: "both";
+};

package/dist/components/charts/ScatterPlotInteractive/constants.js

@@ -0,0 +1,38 @@
+import { CHART_FONT_FAMILY as T } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as _, toPlotlyColorscale as I, CHART_DIVERGING as E } from "../../../utils/colors.js";
+const R = {
+  primary: _[0],
+  selected: _[3]
+}, L = I(E.blueOrange), N = _, o = 8, S = [4, 20], t = 5e3, D = {
+  MARGIN_LEFT: 80,
+  MARGIN_RIGHT: 30,
+  MARGIN_TOP: 80,
+  MARGIN_BOTTOM: 80,
+  TITLE_FONT_SIZE: 20,
+  AXIS_TITLE_FONT_SIZE: 16,
+  AXIS_TICK_FONT_SIZE: 12,
+  LEGEND_FONT_SIZE: 12,
+  FONT_FAMILY: T,
+  GRID_WIDTH: 1,
+  AXIS_LINE_WIDTH: 1,
+  AUTO_RANGE_PADDING: 0.1
+  // 10% padding
+}, F = {
+  ADD: "shiftKey",
+  // Shift
+  REMOVE: "ctrlKey",
+  // Ctrl/Cmd
+  TOGGLE: "both"
+  // Shift + Ctrl/Cmd
+};
+export {
+  R as COLORS,
+  N as DEFAULT_CATEGORY_COLORS,
+  L as DEFAULT_COLOR_SCALE,
+  o as DEFAULT_MARKER_SIZE,
+  t as DEFAULT_MAX_POINTS,
+  S as DEFAULT_SIZE_RANGE,
+  D as PLOT_CONSTANTS,
+  F as SELECTION_MODIFIERS
+};
+//# sourceMappingURL=constants.js.map

package/dist/components/charts/ScatterPlotInteractive/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/components/charts/ScatterPlotInteractive/constants.ts"],"sourcesContent":["import { CHART_FONT_FAMILY } from \"@/hooks/use-plotly-theme\";\nimport {\n  CHART_COLORS,\n  CHART_DIVERGING,\n  toPlotlyColorscale,\n} from \"@/utils/colors\";\n\n/**\n * Default colors for the scatter plot. Background, grid, and axis colors\n * come from the active theme via `usePlotlyTheme`.\n */\nexport const COLORS = {\n  primary: CHART_COLORS[0],\n  selected: CHART_COLORS[3],\n};\n\n/**\n * Default color scale for continuous color mapping (CVD-friendly diverging ramp)\n */\nexport const DEFAULT_COLOR_SCALE: Array<[number, string]> =\n  toPlotlyColorscale(CHART_DIVERGING.blueOrange);\n\n/**\n * Default category colors (cycle through these)\n */\nexport const DEFAULT_CATEGORY_COLORS = CHART_COLORS;\n\n/**\n * Default sizes\n */\nexport const DEFAULT_MARKER_SIZE = 8;\nexport const DEFAULT_SIZE_RANGE: [number, number] = [4, 20];\n\n/**\n * Default downsampling configuration\n */\nexport const DEFAULT_MAX_POINTS = 5000;\n\n/**\n * Constants for plot layout\n */\nexport const PLOT_CONSTANTS = {\n  MARGIN_LEFT: 80,\n  MARGIN_RIGHT: 30,\n  MARGIN_TOP: 80,\n  MARGIN_BOTTOM: 80,\n  TITLE_FONT_SIZE: 20,\n  AXIS_TITLE_FONT_SIZE: 16,\n  AXIS_TICK_FONT_SIZE: 12,\n  LEGEND_FONT_SIZE: 12,\n  FONT_FAMILY: CHART_FONT_FAMILY,\n  GRID_WIDTH: 1,\n  AXIS_LINE_WIDTH: 1,\n  AUTO_RANGE_PADDING: 0.1, // 10% padding\n};\n\n/**\n * Selection mode keyboard modifiers\n */\nexport const SELECTION_MODIFIERS = {\n  ADD: \"shiftKey\", // Shift\n  REMOVE: \"ctrlKey\", // Ctrl/Cmd\n  TOGGLE: \"both\", // Shift + Ctrl/Cmd\n} as const;\n"],"names":["COLORS","CHART_COLORS","DEFAULT_COLOR_SCALE","toPlotlyColorscale","CHART_DIVERGING","DEFAULT_CATEGORY_COLORS","DEFAULT_MARKER_SIZE","DEFAULT_SIZE_RANGE","DEFAULT_MAX_POINTS","PLOT_CONSTANTS","CHART_FONT_FAMILY","SELECTION_MODIFIERS"],"mappings":";;AAWO,MAAMA,IAAS;AAAA,EACpB,SAASC,EAAa,CAAC;AAAA,EACvB,UAAUA,EAAa,CAAC;AAC1B,GAKaC,IACXC,EAAmBC,EAAgB,UAAU,GAKlCC,IAA0BJ,GAK1BK,IAAsB,GACtBC,IAAuC,CAAC,GAAG,EAAE,GAK7CC,IAAqB,KAKrBC,IAAiB;AAAA,EAC5B,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,aAAaC;AAAA,EACb,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,oBAAoB;AAAA;AACtB,GAKaC,IAAsB;AAAA,EACjC,KAAK;AAAA;AAAA,EACL,QAAQ;AAAA;AAAA,EACR,QAAQ;AAAA;AACV;"}

package/dist/components/charts/ScatterPlotInteractive/index.d.ts

@@ -0,0 +1,3 @@
+export { ScatterPlotInteractive } from './ScatterPlotInteractive';
+export * from './types';
+export * from './constants';

package/dist/components/charts/ScatterPlotInteractive/types.d.ts

@@ -0,0 +1,226 @@
+/**
+ * A single data point in the scatter plot
+ */
+export interface ScatterPoint {
+    /** Unique identifier for the point */
+    id: string | number;
+    /** X-axis value */
+    x: number;
+    /** Y-axis value */
+    y: number;
+    /** Optional label for the point */
+    label?: string;
+    /** Additional metadata for tooltips and styling */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Scale type for axes
+ */
+export type ScaleType = "linear" | "log";
+/**
+ * Marker shape for scatter points
+ */
+export type MarkerShape = "circle" | "square" | "diamond" | "cross" | "x" | "triangle-up" | "triangle-down" | "star";
+/**
+ * Selection mode for interactive selection
+ */
+export type SelectionMode = "replace" | "add" | "remove" | "toggle";
+/**
+ * Color mapping configuration
+ */
+export interface ColorMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "continuous" | "categorical";
+    /** Static color value (for type: "static") */
+    value?: string;
+    /** Data field to map (for type: "continuous" | "categorical") */
+    field?: string;
+    /** Color scale for continuous mapping */
+    colorScale?: string | Array<[number, string]>;
+    /** Discrete colors for categorical mapping */
+    categoryColors?: Record<string, string>;
+    /** Min/max values for continuous mapping (auto-calculated if not provided) */
+    min?: number;
+    max?: number;
+}
+/**
+ * Shape mapping configuration
+ */
+export interface ShapeMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "categorical";
+    /** Static shape value (for type: "static") */
+    value?: MarkerShape;
+    /** Data field to map (for type: "categorical") */
+    field?: string;
+    /** Shape mapping for categorical values */
+    categoryShapes?: Record<string, MarkerShape>;
+}
+/**
+ * Size mapping configuration
+ */
+export interface SizeMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "continuous" | "categorical";
+    /** Static size value (for type: "static") */
+    value?: number;
+    /** Data field to map (for type: "continuous" | "categorical") */
+    field?: string;
+    /** Size range for continuous mapping */
+    sizeRange?: [number, number];
+    /** Discrete sizes for categorical mapping */
+    categorySizes?: Record<string, number>;
+    /** Min/max values for continuous mapping (auto-calculated if not provided) */
+    min?: number;
+    max?: number;
+}
+/**
+ * Axis configuration
+ */
+export interface AxisConfig {
+    /** Axis label */
+    title?: string;
+    /** Scale type (linear or log) */
+    scale?: ScaleType;
+    /** Fixed axis range [min, max] */
+    range?: [number, number];
+    /** Auto-range with optional padding percentage (0-1) */
+    autoRange?: boolean;
+    /** Padding percentage for auto-range (default: 0.1 = 10%) */
+    autoRangePadding?: number;
+}
+/**
+ * Tooltip configuration
+ */
+export interface TooltipConfig {
+    /** Enable/disable tooltips */
+    enabled?: boolean;
+    /** Custom tooltip content function. Lines are separated with `<br>`. */
+    content?: (point: ScatterPoint) => string;
+    /** Fields to display in default tooltip */
+    fields?: string[];
+    /**
+     * Use Plotly's built-in hover labels instead of the theme-styled
+     * HTML tooltip rendered by the component.
+     * @default false
+     */
+    native?: boolean;
+}
+/**
+ * Selection state
+ */
+export interface SelectionState {
+    /** Array of selected point IDs */
+    selectedIds: Set<string | number>;
+}
+/**
+ * Downsampling configuration for performance optimization
+ */
+export interface DownsamplingConfig {
+    /** Enable downsampling */
+    enabled: boolean;
+    /** Target number of points to display */
+    maxPoints?: number;
+    /** Downsampling strategy */
+    strategy?: "lttb";
+}
+/**
+ * Props for ScatterPlotInteractive component
+ */
+export interface ScatterPlotInteractiveProps {
+    /**
+     * Array of data points to plot
+     */
+    data: ScatterPoint[];
+    /**
+     * Chart title
+     */
+    title?: string;
+    /**
+     * X-axis configuration
+     */
+    xAxis?: AxisConfig;
+    /**
+     * Y-axis configuration
+     */
+    yAxis?: AxisConfig;
+    /**
+     * Color mapping configuration
+     */
+    colorMapping?: ColorMapping;
+    /**
+     * Shape mapping configuration
+     */
+    shapeMapping?: ShapeMapping;
+    /**
+     * Size mapping configuration
+     */
+    sizeMapping?: SizeMapping;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipConfig;
+    /**
+     * Enable click selection
+     * @default true
+     */
+    enableClickSelection?: boolean;
+    /**
+     * Enable box selection (drag to select rectangular region)
+     * @default true
+     */
+    enableBoxSelection?: boolean;
+    /**
+     * Enable lasso selection (freeform selection)
+     * @default true
+     */
+    enableLassoSelection?: boolean;
+    /**
+     * Controlled selection state.
+     * If provided, component operates in controlled mode.
+     */
+    selectedIds?: Set<string | number>;
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange?: (selectedIds: Set<string | number>, mode: SelectionMode) => void;
+    /**
+     * Callback when a point is clicked
+     */
+    onPointClick?: (point: ScatterPoint, event: MouseEvent) => void;
+    /**
+     * Downsampling configuration for large datasets
+     */
+    downsampling?: DownsamplingConfig;
+    /**
+     * Chart width in pixels
+     * @default 800
+     */
+    width?: number;
+    /**
+     * Chart height in pixels
+     * @default 600
+     */
+    height?: number;
+    /**
+     * Show the continuous color-scale bar when using a continuous `colorMapping`.
+     * Has no effect for categorical or static mappings.
+     * @default true
+     */
+    showColorBar?: boolean;
+    /**
+     * Custom CSS class name
+     */
+    className?: string;
+}
+/**
+ * Data format for selection propagation between components
+ */
+export interface SelectionEvent {
+    /** Array of selected point IDs */
+    selectedIds: Set<string | number>;
+    /** Selection mode used */
+    mode: SelectionMode;
+    /** Source component identifier (optional) */
+    source?: string;
+}

package/dist/components/charts/ScatterPlotInteractive/utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./constants.cjs");function I(t,e){let r=Number.POSITIVE_INFINITY,n=Number.NEGATIVE_INFINITY;for(const o of t){const l=o.metadata?.[e];typeof l=="number"&&Number.isFinite(l)&&(r=Math.min(r,l),n=Math.max(n,l))}return!Number.isFinite(r)||!Number.isFinite(n)?{min:0,max:1}:r===n?{min:r-1,max:n+1}:{min:r,max:n}}function S(t,e){const r=t.map(n=>n.metadata?.[e]).filter(n=>typeof n=="string");return[...new Set(r)].sort()}function d(t,e){if(!e||e.type==="static"){const r=e?.value||c.COLORS.primary;return new Array(t.length).fill(r)}if(e.type==="categorical"&&e.field){const r=S(t,e.field),n=e.categoryColors||{},o={};return r.forEach((l,i)=>{o[l]=n[l]||c.DEFAULT_CATEGORY_COLORS[i%c.DEFAULT_CATEGORY_COLORS.length]}),t.map(l=>{const i=l.metadata?.[e.field];return o[String(i)]||c.DEFAULT_CATEGORY_COLORS[0]})}return new Array(t.length).fill(c.COLORS.primary)}function P(t,e){if(!e||e.type==="static"){const r=e?.value||"circle";return new Array(t.length).fill(r)}if(e.type==="categorical"&&e.field){const r=S(t,e.field),n=e.categoryShapes||{},o=["circle","square","diamond","cross","x","triangle-up","triangle-down","star"],l={};return r.forEach((i,s)=>{l[i]=n[i]||o[s%o.length]}),t.map(i=>{const s=i.metadata?.[e.field];return l[String(s)]||"circle"})}return new Array(t.length).fill("circle")}function R(t,e){if(!e||e.type==="static"){const r=e?.value||c.DEFAULT_MARKER_SIZE;return new Array(t.length).fill(r)}if(e.type==="categorical"&&e.field){const r=S(t,e.field),n=e.categorySizes||{},o={};return r.forEach((l,i)=>{o[l]=n[l]||c.DEFAULT_MARKER_SIZE+i*2}),t.map(l=>{const i=l.metadata?.[e.field];return o[String(i)]||c.DEFAULT_MARKER_SIZE})}if(e.type==="continuous"&&e.field){const r=e.min!==void 0&&e.max!==void 0?{min:e.min,max:e.max}:I(t,e.field),n=e.sizeRange||c.DEFAULT_SIZE_RANGE,[o,l]=n;return t.map(i=>{const s=i.metadata?.[e.field];if(typeof s=="number"&&Number.isFinite(s)){const f=(s-r.min)/(r.max-r.min);return o+f*(l-o)}return c.DEFAULT_MARKER_SIZE})}return new Array(t.length).fill(c.DEFAULT_MARKER_SIZE)}function b(t,e){if(!e.enabled||t.length<=(e.maxPoints||c.DEFAULT_MAX_POINTS))return t;const r=e.maxPoints||c.DEFAULT_MAX_POINTS;return(e.strategy||"lttb")==="lttb"?g(t,r):t}function v(t,e,r,n){const o=r-e;if(o>0){let i=0,s=0;for(let f=e;f<r;f++)i+=t[f].x,s+=t[f].y;return{x:i/o,y:s/o}}const l=Math.max(0,Math.min(e,n-1));return{x:t[l].x,y:t[l].y}}function g(t,e){const r=t.length;if(e<=0||r===0)return[];if(e>=r)return t;if(e===1)return[t[0]];if(e===2)return[t[0],t[r-1]];const n=(r-2)/(e-2),{floor:o,abs:l,min:i}=Math,s=[t[0]];let f=0;for(let a=0;a<e-2;a++){const u=i(o((a+1)*n)+1,r-1),C=i(o((a+2)*n)+1,r),{x:E,y:x}=v(t,u,C,r),m=i(o(a*n)+1,r-1),F=i(o((a+1)*n)+1,r-1),_=t[f].x,N=t[f].y;let O=-1,A=t[m],y=m;for(let T=m;T<F;T++){const L=l((_-E)*(t[T].y-N)-(_-t[T].x)*(x-N))*.5;L>O&&(O=L,A=t[T],y=T)}s.push(A),f=y}return s.push(t[r-1]),s}function D(t,e){const r=[];if(r.push(`X: ${t.x.toFixed(2)}`),r.push(`Y: ${t.y.toFixed(2)}`),t.label&&r.push(`Label: ${t.label}`),e&&t.metadata){for(const n of e)if(n in t.metadata){const o=t.metadata[n];r.push(`${n}: ${o}`)}}else if(t.metadata&&!e)for(const[n,o]of Object.entries(t.metadata))r.push(`${n}: ${o}`);return r.join("<br>")}function h(t){const e=t.ctrlKey||t.metaKey;return t.shiftKey&&e?"toggle":t.shiftKey?"add":e?"remove":"replace"}function Y(t,e,r=.1,n="linear"){const o=n==="log";let l=1/0,i=-1/0;for(const f of t){const a=f[e];if(!Number.isFinite(a)||o&&a<=0)continue;const u=o?Math.log10(a):a;u<l&&(l=u),u>i&&(i=u)}if(!Number.isFinite(l))return[0,1];if(l===i)return[l-1,i+1];const s=i-l;return[l-s*r,i+s*r]}function w(t,e,r){const n=new Set(t);switch(r){case"replace":return new Set(e);case"add":for(const o of e)n.add(o);return n;case"remove":for(const o of e)n.delete(o);return n;case"toggle":for(const o of e)n.has(o)?n.delete(o):n.add(o);return n;default:return n}}const U=({title:t,xAxis:e,yAxis:r,width:n,height:o,xRange:l,yRange:i,enableLassoSelection:s,enableBoxSelection:f,theme:a})=>({autosize:!1,width:n,height:o,title:t?{text:t,font:{family:c.PLOT_CONSTANTS.FONT_FAMILY,size:c.PLOT_CONSTANTS.TITLE_FONT_SIZE,color:a.textColor},x:.5,xanchor:"center"}:void 0,margin:{l:c.PLOT_CONSTANTS.MARGIN_LEFT,r:c.PLOT_CONSTANTS.MARGIN_RIGHT,t:t?c.PLOT_CONSTANTS.MARGIN_TOP:c.PLOT_CONSTANTS.MARGIN_TOP-c.PLOT_CONSTANTS.TITLE_FONT_SIZE,b:c.PLOT_CONSTANTS.MARGIN_BOTTOM},xaxis:{title:{text:e.title||"",font:{family:c.PLOT_CONSTANTS.FONT_FAMILY,size:c.PLOT_CONSTANTS.AXIS_TITLE_FONT_SIZE,color:a.textSecondary}},type:e.scale==="log"?"log":"linear",range:l,autorange:!l,gridcolor:a.gridColor,linecolor:a.lineColor,linewidth:c.PLOT_CONSTANTS.AXIS_LINE_WIDTH,tickfont:{family:c.PLOT_CONSTANTS.FONT_FAMILY,size:c.PLOT_CONSTANTS.AXIS_TICK_FONT_SIZE,color:a.textColor},zeroline:!1},yaxis:{title:{text:r.title||"",font:{family:c.PLOT_CONSTANTS.FONT_FAMILY,size:c.PLOT_CONSTANTS.AXIS_TITLE_FONT_SIZE,color:a.textSecondary}},type:r.scale==="log"?"log":"linear",range:i,autorange:!i,gridcolor:a.gridColor,linecolor:a.lineColor,linewidth:c.PLOT_CONSTANTS.AXIS_LINE_WIDTH,tickfont:{family:c.PLOT_CONSTANTS.FONT_FAMILY,size:c.PLOT_CONSTANTS.AXIS_TICK_FONT_SIZE,color:a.textColor},zeroline:!1},paper_bgcolor:a.paperBg,plot_bgcolor:a.plotBg,font:{family:c.PLOT_CONSTANTS.FONT_FAMILY,color:a.textColor},hovermode:"closest",dragmode:s?"lasso":f?"select":!1});exports.applySelection=w;exports.calculateAxisRange=Y;exports.calculateRange=I;exports.downsampleData=b;exports.generateTooltipContent=D;exports.getPlotlyLayoutConfig=U;exports.getSelectionMode=h;exports.getUniqueCategories=S;exports.lttbDownsample=g;exports.mapColors=d;exports.mapShapes=P;exports.mapSizes=R;
+//# sourceMappingURL=utils.cjs.map