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

package/dist/components/charts/PlateMap/utils.d.ts

@@ -0,0 +1,133 @@
+import { WellData, WellDataGridResult, LayerConfig, LegendPosition } from './types';
+/**
+ * Generate row labels (A, B, C, ... for 96-well; A-P for 384-well; A-AF for 1536-well)
+ * For rows beyond Z (26), uses AA, AB, AC, etc.
+ */
+export declare function generateRowLabels(count: number): string[];
+/**
+ * Generate column labels (1, 2, 3, ...)
+ */
+export declare function generateColumnLabels(count: number): number[];
+/**
+ * Parse well ID to row and column indices
+ * @param wellId - Well identifier (e.g., "A1", "H12", "P24", "AA1", "AF48")
+ * @returns { row, col } zero-indexed
+ */
+export declare function parseWellId(wellId: string): {
+    row: number;
+    col: number;
+} | null;
+/**
+ * Convert WellData array to 2D grids for a specific layer
+ */
+export declare function wellDataToGrid(wells: WellData[], rows: number, columns: number, layerId?: string): WellDataGridResult;
+/**
+ * Calculate min/max values from grid, ignoring nulls
+ */
+export declare function calculateValueRange(grid: (number | null)[][]): {
+    min: number;
+    max: number;
+};
+/**
+ * Check if WellData array contains multi-value wells (has `values` property)
+ */
+export declare function hasMultiValueWells(data: WellData[]): boolean;
+/**
+ * Extract unique layer IDs from WellData array with `values`
+ */
+export declare function extractLayerIds(data: WellData[]): string[];
+/**
+ * Check if a layer contains string values (categorical) or numeric values (heatmap)
+ */
+export declare function isStringValueLayer(data: WellData[], layerId: string): boolean;
+/**
+ * Extract layer configs from multi-value WellData array.
+ * Creates a layer entry for each unique key found in the `values` objects.
+ * Merges with user-provided layerConfigs to apply custom settings.
+ */
+export declare function extractLayers(data: WellData[], layerConfigs?: LayerConfig[]): LayerConfig[];
+/**
+ * Parse region wells from range notation like "A1:B6"
+ * Returns the bounding box coordinates for overlay rendering
+ */
+export declare function parseRegionWells(wells: string, rowLabels: readonly (string | number)[], colLabels: readonly (string | number)[]): {
+    minRow: number;
+    maxRow: number;
+    minCol: number;
+    maxCol: number;
+} | null;
+/** Options for building hover text for a well */
+export interface BuildHoverTextOptions {
+    wellId: string;
+    value: number | null;
+    allValues: Record<string, number | string | null> | undefined;
+    tooltipExtra: Record<string, unknown> | undefined;
+    activeLayerId: string | undefined;
+    layerConfigMap: Map<string, LayerConfig>;
+    precision: number;
+    valueUnit: string;
+}
+/**
+ * Builds the hover text HTML for a single well.
+ * Shows all layer values with the active layer marked.
+ */
+export declare function buildWellHoverText({ wellId, value, allValues, tooltipExtra, activeLayerId, layerConfigMap, precision, valueUnit, }: BuildHoverTextOptions): string;
+/** Colorbar configuration for a specific position */
+export interface ColorbarConfig {
+    orientation?: "h" | "v";
+    thickness: number;
+    len: number;
+    outlinewidth: number;
+    ticksuffix: string;
+    x: number;
+    xanchor: "left" | "center" | "right";
+    y: number;
+    yanchor: "top" | "middle" | "bottom";
+    title?: {
+        text: string;
+        side: "top" | "bottom" | "right";
+    };
+}
+/**
+ * Builds the colorbar configuration based on legend position.
+ */
+export declare function buildColorbarConfig(position: LegendPosition, valueUnit: string, legendTitle?: string): ColorbarConfig;
+/** Margin configuration for the plot */
+export interface PlotMargins {
+    l: number;
+    r: number;
+    b: number;
+    t: number;
+    pad: number;
+}
+/**
+ * Builds the margin configuration based on legend position and title presence.
+ */
+export declare function buildPlotMargins(position: LegendPosition, hasTitle: boolean, hasYTitle: boolean): PlotMargins;
+/**
+ * Calculates the title X position based on legend position.
+ */
+export declare function calculateTitleX(position: LegendPosition): number;
+/**
+ * Calculates the X-axis domain based on legend position.
+ */
+export declare function calculateAxisDomain(position: LegendPosition): [number, number];
+/** Data arrays for scatter plot */
+export interface ScatterPlotData {
+    xData: number[];
+    yData: string[];
+    colorData: number[];
+    textData: string[];
+}
+/**
+ * Flattens 2D grid data into arrays for scatter plot rendering.
+ */
+export declare function flattenGridData(plotZ: (number | null)[][], rowLabels: (string | number)[], hoverText: string[][], rows: number, columns: number, plotZMin: number): ScatterPlotData;
+/** Marker size calculation result */
+export interface MarkerSizeResult {
+    markerSize: number;
+}
+/**
+ * Calculates the marker size based on plot dimensions and marker shape.
+ */
+export declare function calculateMarkerSize(width: number, height: number, rows: number, columns: number, markerShape: "circle" | "square", hasTitle: boolean, hasYTitle: boolean): number;

package/dist/components/charts/ScatterPlot/ScatterPlot.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react/jsx-runtime"),n=require("react"),Q=require("../ChartTooltip/ChartTooltip.cjs"),b=require("../plotly-loader.cjs"),V=require("../../../hooks/use-element-size.cjs"),f=require("../../../hooks/use-plotly-theme.cjs"),Z=require("../../../lib/utils.cjs"),$=require("../../../utils/colors.cjs"),D=["circle","square","diamond","triangle-up","triangle-down","star"],ee=({dataSeries:x,width:F,height:z,xRange:p,yRange:g,xTitle:_,yTitle:C,title:P="Scatter Plot",variant:E="default",markerSize:I=10})=>{const h=n.useRef(null),o=f.usePlotlyTheme(),{bindTooltip:R,tooltipElement:W}=Q.useChartTooltip({xLabel:_,yLabel:C}),[U,S]=V.useElementSize(),s=F??S.width,a=z??S.height,Y=s>0&&a>0,G=F===void 0,J=z===void 0,w=n.useRef({width:s,height:a});w.current={width:s,height:a};const T=n.useRef(!1),v=n.useRef({width:0,height:0}),k=n.useMemo(()=>Array.isArray(x)?x:[x],[x]),{xMin:q,xMax:O,yMin:H,yMax:N}=n.useMemo(()=>{let t=1/0,e=-1/0,l=1/0,r=-1/0;k.forEach(c=>{c.x.forEach(u=>{t=Math.min(t,u),e=Math.max(e,u)}),c.y.forEach(u=>{l=Math.min(l,u),r=Math.max(r,u)})});const m=(e-t)*.1,i=(r-l)*.1;return{xMin:t-m,xMax:e+m,yMin:l-i,yMax:r+i}},[k]),d=n.useMemo(()=>p||[q,O],[p,q,O]),y=n.useMemo(()=>g||[H,N],[g,H,N]),A=n.useMemo(()=>{const t=d[1]-d[0];let e=Math.pow(10,Math.floor(Math.log10(t)));t/e>10&&(e=e*2),t/e<4&&(e=e/2);const l=[];let r=Math.ceil(d[0]/e)*e;for(;r<=d[1];)l.push(r),r+=e;return l},[d]),B=n.useMemo(()=>{const t=y[1]-y[0];let e=Math.pow(10,Math.floor(Math.log10(t)));t/e>10&&(e=e*2),t/e<4&&(e=e/2);const l=[];let r=Math.ceil(y[0]/e)*e;for(;r<=y[1];)l.push(r),r+=e;return l},[y]),L=n.useMemo(()=>({tickcolor:o.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:o.textColor,family:f.CHART_FONT_FAMILY,weight:400},linecolor:o.lineColor,linewidth:1,position:0,zeroline:!1}),[o]);return n.useEffect(()=>{if(!h.current||!Y)return;const t=k.map((i,c)=>({x:i.x,y:i.y,type:"scatter",mode:"markers",name:i.name,marker:{color:$.seriesColor(c,i.color),size:i.size??I,symbol:i.symbol??(E==="stacked"?D[c%D.length]:"circle"),line:{color:o.paperBg,width:1}},hoverinfo:"none"})),e={title:{text:P,font:{size:32,family:f.CHART_FONT_FAMILY,color:o.textColor}},width:w.current.width,height:w.current.height,margin:{l:80,r:30,b:96,t:60,pad:10},paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg,font:{family:f.CHART_FONT_FAMILY},dragmode:!1,xaxis:{title:{text:_,font:{size:16,color:o.textSecondary,family:f.CHART_FONT_FAMILY,weight:400},standoff:32},gridcolor:o.gridColor,range:p,autorange:!p,tickmode:"array",tickvals:A,ticktext:A.map(String),showgrid:!0,automargin:!0,...L},yaxis:{title:{text:C,font:{size:16,color:o.textSecondary,family:f.CHART_FONT_FAMILY,weight:400},standoff:30},gridcolor:o.gridColor,range:g,autorange:!g,tickmode:"array",tickvals:B,showgrid:!0,automargin:!0,...L},legend:{x:.5,y:0,xanchor:"center",yanchor:"bottom",yref:"container",orientation:"h",font:{size:16,color:o.legendColor,family:f.CHART_FONT_FAMILY,weight:500}},showlegend:!0,hovermode:"closest"},l={responsive:!1,displayModeBar:!1,displaylogo:!1};let r=!1,m=null;return b.loadPlotly().then(i=>{if(r||!h.current)return;i.newPlot(h.current,t,e,l),R(h.current);const c=h.current;m=c,T.current=!0,v.current={...w.current};const u=c,j={color:o.spikeColor,width:2};u.on("plotly_hover",K=>{const M=K.points[0];M&&i.relayout(c,{shapes:[{type:"line",xref:"x",yref:"paper",x0:M.x,x1:M.x,y0:0,y1:1,line:j,layer:"below"},{type:"line",xref:"paper",yref:"y",x0:0,x1:1,y0:M.y,y1:M.y,line:j,layer:"below"}]})}),u.on("plotly_unhover",()=>{i.relayout(c,{shapes:[]})})}),()=>{r=!0,m&&(b.getLoadedPlotly().purge(m),T.current=!1)}},[k,Y,p,g,_,C,P,E,I,d,y,A,B,L,o,R]),n.useEffect(()=>{const t=h.current;!t||!T.current||s<=0||a<=0||v.current.width===s&&v.current.height===a||(v.current={width:s,height:a},b.getLoadedPlotly().relayout(t,{width:s,height:a}).catch(()=>{}))},[s,a]),X.jsxs("div",{ref:U,className:Z.cn("relative",G&&"w-full",J&&"h-full"),children:[X.jsx("div",{ref:h,style:{width:"100%",height:"100%"}}),W]})};exports.ScatterPlot=ee;
+//# sourceMappingURL=ScatterPlot.cjs.map

package/dist/components/charts/ScatterPlot/ScatterPlot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterPlot.cjs","sources":["../../../../src/components/charts/ScatterPlot/ScatterPlot.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport type Plotly from \"plotly.js-dist\";\n\nimport { useElementSize } from \"@/hooks/use-element-size\";\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { cn } from \"@/lib/utils\";\nimport { seriesColor } from \"@/utils/colors\";\n\ntype MarkerSymbol =\n  | \"circle\"\n  | \"square\"\n  | \"diamond\"\n  | \"triangle-up\"\n  | \"triangle-down\"\n  | \"star\";\n\ninterface ScatterPlotDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\n  /** Optional color override (auto-assigned from CHART_COLORS if not provided) */\n  color?: string;\n  /** Optional marker symbol override (auto-assigned in the `stacked` variant) */\n  symbol?: MarkerSymbol;\n  /** Optional per-series marker size override (falls back to `markerSize`) */\n  size?: number;\n}\n\ntype ScatterPlotVariant = \"default\" | \"stacked\";\n\ninterface ScatterPlotProps {\n  /** One or more data series to plot */\n  dataSeries: ScatterPlotDataSeries | ScatterPlotDataSeries[];\n  /**\n   * Fixed width in pixels. When omitted, the chart fills its container and\n   * tracks the container's width via a `ResizeObserver`.\n   */\n  width?: number;\n  /**\n   * Fixed height in pixels. When omitted, the chart fills its container and\n   * tracks the container's height via a `ResizeObserver`.\n   */\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n  /**\n   * `default` renders every series as circles; `stacked` cycles through\n   * distinct marker symbols per series so overlapping series stay legible.\n   */\n  variant?: ScatterPlotVariant;\n  /** Default marker size in pixels (per-series `size` takes precedence) */\n  markerSize?: number;\n}\n\nconst DEFAULT_SYMBOLS: MarkerSymbol[] = [\n  \"circle\",\n  \"square\",\n  \"diamond\",\n  \"triangle-up\",\n  \"triangle-down\",\n  \"star\",\n];\n\nconst ScatterPlot: React.FC<ScatterPlotProps> = ({\n  dataSeries,\n  width,\n  height,\n  xRange,\n  yRange,\n  xTitle,\n  yTitle,\n  title = \"Scatter Plot\",\n  variant = \"default\",\n  markerSize = 10,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  // Omitted width/height → fill the container and track its measured size;\n  // explicit pixel values override. See AreaPlot for the reference pattern.\n  const [containerRef, measured] = useElementSize<HTMLDivElement>();\n  const resolvedWidth = width ?? measured.width;\n  const resolvedHeight = height ?? measured.height;\n  const hasSize = resolvedWidth > 0 && resolvedHeight > 0;\n  // Fill is per-dimension: omit width to fill the container width, omit height\n  // to fill its height (so e.g. a fixed width with a container-driven height works).\n  const fillWidth = width === undefined;\n  const fillHeight = height === undefined;\n  const sizeRef = useRef({ width: resolvedWidth, height: resolvedHeight });\n  sizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n  const plotInitedRef = useRef(false);\n  // Size last applied to the plot, so the resize effect can skip a redundant\n  // relayout right after newPlot already drew at that size.\n  const appliedSizeRef = useRef({ width: 0, height: 0 });\n\n  const seriesArray = useMemo(\n    () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n    [dataSeries],\n  );\n\n  const { xMin, xMax, yMin, yMax } = useMemo(() => {\n    // Seed with ±Infinity, not MAX_VALUE/MIN_VALUE — MIN_VALUE is the smallest\n    // positive number, so it would clamp the max for all-negative data.\n    let minX = Infinity;\n    let maxX = -Infinity;\n    let minY = Infinity;\n    let maxY = -Infinity;\n\n    seriesArray.forEach((series) => {\n      series.x.forEach((x) => {\n        minX = Math.min(minX, x);\n        maxX = Math.max(maxX, x);\n      });\n      series.y.forEach((y) => {\n        minY = Math.min(minY, y);\n        maxY = Math.max(maxY, y);\n      });\n    });\n\n    const xPadding = (maxX - minX) * 0.1;\n    const yPadding = (maxY - minY) * 0.1;\n\n    return {\n      xMin: minX - xPadding,\n      xMax: maxX + xPadding,\n      yMin: minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [seriesArray]);\n\n  const effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\n  );\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const xTicks = useMemo(() => {\n    const range = effectiveXRange[1] - effectiveXRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveXRange[0] / step) * step;\n    while (current <= effectiveXRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveXRange]);\n\n  const yTicks = useMemo(() => {\n    const range = effectiveYRange[1] - effectiveYRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveYRange[0] / step) * step;\n    while (current <= effectiveYRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveYRange]);\n\n  const tickOptions = useMemo(\n    () => ({\n      tickcolor: theme.tickColor,\n      ticklen: 12,\n      tickwidth: 1,\n      ticks: \"outside\" as const,\n      tickfont: {\n        size: 16,\n        color: theme.textColor,\n        family: CHART_FONT_FAMILY,\n        weight: 400,\n      },\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      position: 0,\n      zeroline: false,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || !hasSize) return;\n\n    const plotData = seriesArray.map((series, index) => ({\n      x: series.x,\n      y: series.y,\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      name: series.name,\n      marker: {\n        color: seriesColor(index, series.color),\n        size: series.size ?? markerSize,\n        symbol:\n          series.symbol ??\n          (variant === \"stacked\"\n            ? DEFAULT_SYMBOLS[index % DEFAULT_SYMBOLS.length]\n            : (\"circle\" as const)),\n        line: {\n          color: theme.paperBg,\n          width: 1,\n        },\n      },\n      hoverinfo: \"none\" as const,\n    }));\n\n    const layout = {\n      title: {\n        text: title,\n        font: {\n          size: 32,\n          family: CHART_FONT_FAMILY,\n          color: theme.textColor,\n        },\n      },\n      width: sizeRef.current.width,\n      height: sizeRef.current.height,\n      // Bottom margin reserves room for tick labels, the x-axis title, and the\n      // container-anchored bottom legend stacked beneath them.\n      margin: { l: 80, r: 30, b: 96, t: 60, pad: 10 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: CHART_FONT_FAMILY,\n      },\n      dragmode: false as const,\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 32,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\n        ticktext: xTicks.map(String),\n        showgrid: true,\n        // Reserve space for tick labels + the axis title so the bottom legend\n        // can't overlap them at small sizes (SW-2157).\n        automargin: true,\n        ...tickOptions,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 30,\n        },\n        gridcolor: theme.gridColor,\n        range: yRange,\n        autorange: !yRange,\n        tickmode: \"array\" as const,\n        tickvals: yTicks,\n        showgrid: true,\n        automargin: true,\n        ...tickOptions,\n      },\n      legend: {\n        // Anchor to the bottom of the container (not the plot area) so the\n        // legend always clears the x-axis tick labels + title — a paper-relative\n        // fractional offset collapses into the ticks at small heights (SW-2157).\n        x: 0.5,\n        y: 0,\n        xanchor: \"center\" as const,\n        yanchor: \"bottom\" as const,\n        yref: \"container\" as const,\n        orientation: \"h\" as const,\n        font: {\n          size: 16,\n          color: theme.legendColor,\n          family: CHART_FONT_FAMILY,\n          weight: 500,\n        },\n      },\n      showlegend: true,\n      hovermode: \"closest\" as const,\n    };\n\n    const config = {\n      // Sizing is driven from the measured container; disable Plotly's own\n      // window-resize responsiveness (it can't see container resizes).\n      responsive: false,\n      displayModeBar: false,\n      displaylogo: false,\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 plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      const element = plotRef.current;\n      plotElement = element;\n      plotInitedRef.current = true;\n      appliedSizeRef.current = { ...sizeRef.current };\n\n      // Crosshair guide lines through the hovered point. Drawn as layout shapes\n      // with `layer: \"below\"` so they sit behind the markers — native Plotly\n      // spikelines always render on top and can't be moved behind.\n      const emitter = element as unknown as Plotly.PlotlyHTMLElement;\n      const crosshairLine = { color: theme.spikeColor, width: 2 };\n      emitter.on(\"plotly_hover\", (eventData) => {\n        const point = eventData.points[0];\n        if (!point) return;\n        void plotly.relayout(element, {\n          shapes: [\n            {\n              type: \"line\",\n              xref: \"x\",\n              yref: \"paper\",\n              x0: point.x,\n              x1: point.x,\n              y0: 0,\n              y1: 1,\n              line: crosshairLine,\n              layer: \"below\",\n            },\n            {\n              type: \"line\",\n              xref: \"paper\",\n              yref: \"y\",\n              x0: 0,\n              x1: 1,\n              y0: point.y,\n              y1: point.y,\n              line: crosshairLine,\n              layer: \"below\",\n            },\n          ],\n        });\n      });\n      emitter.on(\"plotly_unhover\", () => {\n        void plotly.relayout(element, { shapes: [] });\n      });\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n        plotInitedRef.current = false;\n      }\n    };\n  }, [seriesArray, hasSize, xRange, yRange, xTitle, yTitle, title, variant, markerSize, effectiveXRange, effectiveYRange, xTicks, yTicks, tickOptions, theme, bindTooltip]);\n\n  // Resize in place when the measured/overridden size changes — cheaper than\n  // recreating the plot, and it preserves the hover/crosshair event bindings.\n  useEffect(() => {\n    const plotElement = plotRef.current;\n    if (!plotElement || !plotInitedRef.current || resolvedWidth <= 0 || resolvedHeight <= 0) {\n      return;\n    }\n    // newPlot already drew at the current size; skip the redundant relayout\n    // (it would queue an automargin redraw that can reject if we unmount first).\n    if (\n      appliedSizeRef.current.width === resolvedWidth &&\n      appliedSizeRef.current.height === resolvedHeight\n    ) {\n      return;\n    }\n    appliedSizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n    // Swallow rejections from a relayout that races an unmount/purge.\n    // plotInitedRef guarantees Plotly finished loading, so sync access is safe.\n    void getLoadedPlotly()\n      .relayout(plotElement, { width: resolvedWidth, height: resolvedHeight })\n      .catch(() => {});\n  }, [resolvedWidth, resolvedHeight]);\n\n  return (\n    <div ref={containerRef} className={cn(\"relative\", fillWidth && \"w-full\", fillHeight && \"h-full\")}>\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { ScatterPlot };\nexport type {\n  MarkerSymbol,\n  ScatterPlotDataSeries,\n  ScatterPlotProps,\n  ScatterPlotVariant,\n};\n"],"names":["DEFAULT_SYMBOLS","ScatterPlot","dataSeries","width","height","xRange","yRange","xTitle","yTitle","title","variant","markerSize","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","containerRef","measured","useElementSize","resolvedWidth","resolvedHeight","hasSize","fillWidth","fillHeight","sizeRef","plotInitedRef","appliedSizeRef","seriesArray","useMemo","xMin","xMax","yMin","yMax","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","CHART_FONT_FAMILY","useEffect","plotData","index","seriesColor","layout","config","cancelled","plotElement","loadPlotly","plotly","element","emitter","crosshairLine","eventData","point","getLoadedPlotly","jsxs","cn","jsx"],"mappings":"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"}

package/dist/components/charts/ScatterPlot/ScatterPlot.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+type MarkerSymbol = "circle" | "square" | "diamond" | "triangle-up" | "triangle-down" | "star";
+interface ScatterPlotDataSeries {
+    x: number[];
+    y: number[];
+    name: string;
+    /** Optional color override (auto-assigned from CHART_COLORS if not provided) */
+    color?: string;
+    /** Optional marker symbol override (auto-assigned in the `stacked` variant) */
+    symbol?: MarkerSymbol;
+    /** Optional per-series marker size override (falls back to `markerSize`) */
+    size?: number;
+}
+type ScatterPlotVariant = "default" | "stacked";
+interface ScatterPlotProps {
+    /** One or more data series to plot */
+    dataSeries: ScatterPlotDataSeries | ScatterPlotDataSeries[];
+    /**
+     * Fixed width in pixels. When omitted, the chart fills its container and
+     * tracks the container's width via a `ResizeObserver`.
+     */
+    width?: number;
+    /**
+     * Fixed height in pixels. When omitted, the chart fills its container and
+     * tracks the container's height via a `ResizeObserver`.
+     */
+    height?: number;
+    xRange?: [number, number];
+    yRange?: [number, number];
+    xTitle?: string;
+    yTitle?: string;
+    title?: string;
+    /**
+     * `default` renders every series as circles; `stacked` cycles through
+     * distinct marker symbols per series so overlapping series stay legible.
+     */
+    variant?: ScatterPlotVariant;
+    /** Default marker size in pixels (per-series `size` takes precedence) */
+    markerSize?: number;
+}
+declare const ScatterPlot: React.FC<ScatterPlotProps>;
+export { ScatterPlot };
+export type { MarkerSymbol, ScatterPlotDataSeries, ScatterPlotProps, ScatterPlotVariant, };

package/dist/components/charts/ScatterPlot/ScatterPlot.js

@@ -0,0 +1,252 @@
+import { jsxs as V, jsx as Z } from "react/jsx-runtime";
+import { useRef as b, useMemo as f, useEffect as W } from "react";
+import { useChartTooltip as $ } from "../ChartTooltip/ChartTooltip.js";
+import { loadPlotly as tt, getLoadedPlotly as q } from "../plotly-loader.js";
+import { useElementSize as et } from "../../../hooks/use-element-size.js";
+import { usePlotlyTheme as ot, CHART_FONT_FAMILY as p } from "../../../hooks/use-plotly-theme.js";
+import { cn as rt } from "../../../lib/utils.js";
+import { seriesColor as it } from "../../../utils/colors.js";
+const R = [
+  "circle",
+  "square",
+  "diamond",
+  "triangle-up",
+  "triangle-down",
+  "star"
+], ut = ({
+  dataSeries: w,
+  width: _,
+  height: A,
+  xRange: y,
+  yRange: g,
+  xTitle: z,
+  yTitle: C,
+  title: I = "Scatter Plot",
+  variant: S = "default",
+  markerSize: B = 10
+}) => {
+  const h = b(null), o = ot(), { bindTooltip: Y, tooltipElement: U } = $({ xLabel: z, yLabel: C }), [G, T] = et(), c = _ ?? T.width, a = A ?? T.height, F = c > 0 && a > 0, J = _ === void 0, K = A === void 0, M = b({ width: c, height: a });
+  M.current = { width: c, height: a };
+  const E = b(!1), k = b({ width: 0, height: 0 }), v = f(
+    () => Array.isArray(w) ? w : [w],
+    [w]
+  ), { xMin: H, xMax: O, yMin: X, yMax: j } = f(() => {
+    let e = 1 / 0, t = -1 / 0, n = 1 / 0, r = -1 / 0;
+    v.forEach((l) => {
+      l.x.forEach((s) => {
+        e = Math.min(e, s), t = Math.max(t, s);
+      }), l.y.forEach((s) => {
+        n = Math.min(n, s), r = Math.max(r, s);
+      });
+    });
+    const m = (t - e) * 0.1, i = (r - n) * 0.1;
+    return {
+      xMin: e - m,
+      xMax: t + m,
+      yMin: n - i,
+      yMax: r + i
+    };
+  }, [v]), d = f(
+    () => y || [H, O],
+    [y, H, O]
+  ), u = f(
+    () => g || [X, j],
+    [g, X, j]
+  ), P = f(() => {
+    const e = d[1] - d[0];
+    let t = Math.pow(10, Math.floor(Math.log10(e)));
+    e / t > 10 && (t = t * 2), e / t < 4 && (t = t / 2);
+    const n = [];
+    let r = Math.ceil(d[0] / t) * t;
+    for (; r <= d[1]; )
+      n.push(r), r += t;
+    return n;
+  }, [d]), D = f(() => {
+    const e = u[1] - u[0];
+    let t = Math.pow(10, Math.floor(Math.log10(e)));
+    e / t > 10 && (t = t * 2), e / t < 4 && (t = t / 2);
+    const n = [];
+    let r = Math.ceil(u[0] / t) * t;
+    for (; r <= u[1]; )
+      n.push(r), r += t;
+    return n;
+  }, [u]), L = f(
+    () => ({
+      tickcolor: o.tickColor,
+      ticklen: 12,
+      tickwidth: 1,
+      ticks: "outside",
+      tickfont: {
+        size: 16,
+        color: o.textColor,
+        family: p,
+        weight: 400
+      },
+      linecolor: o.lineColor,
+      linewidth: 1,
+      position: 0,
+      zeroline: !1
+    }),
+    [o]
+  );
+  return W(() => {
+    if (!h.current || !F) return;
+    const e = v.map((i, l) => ({
+      x: i.x,
+      y: i.y,
+      type: "scatter",
+      mode: "markers",
+      name: i.name,
+      marker: {
+        color: it(l, i.color),
+        size: i.size ?? B,
+        symbol: i.symbol ?? (S === "stacked" ? R[l % R.length] : "circle"),
+        line: {
+          color: o.paperBg,
+          width: 1
+        }
+      },
+      hoverinfo: "none"
+    })), t = {
+      title: {
+        text: I,
+        font: {
+          size: 32,
+          family: p,
+          color: o.textColor
+        }
+      },
+      width: M.current.width,
+      height: M.current.height,
+      // Bottom margin reserves room for tick labels, the x-axis title, and the
+      // container-anchored bottom legend stacked beneath them.
+      margin: { l: 80, r: 30, b: 96, t: 60, pad: 10 },
+      paper_bgcolor: o.paperBg,
+      plot_bgcolor: o.plotBg,
+      font: {
+        family: p
+      },
+      dragmode: !1,
+      xaxis: {
+        title: {
+          text: z,
+          font: {
+            size: 16,
+            color: o.textSecondary,
+            family: p,
+            weight: 400
+          },
+          standoff: 32
+        },
+        gridcolor: o.gridColor,
+        range: y,
+        autorange: !y,
+        tickmode: "array",
+        tickvals: P,
+        ticktext: P.map(String),
+        showgrid: !0,
+        // Reserve space for tick labels + the axis title so the bottom legend
+        // can't overlap them at small sizes (SW-2157).
+        automargin: !0,
+        ...L
+      },
+      yaxis: {
+        title: {
+          text: C,
+          font: {
+            size: 16,
+            color: o.textSecondary,
+            family: p,
+            weight: 400
+          },
+          standoff: 30
+        },
+        gridcolor: o.gridColor,
+        range: g,
+        autorange: !g,
+        tickmode: "array",
+        tickvals: D,
+        showgrid: !0,
+        automargin: !0,
+        ...L
+      },
+      legend: {
+        // Anchor to the bottom of the container (not the plot area) so the
+        // legend always clears the x-axis tick labels + title — a paper-relative
+        // fractional offset collapses into the ticks at small heights (SW-2157).
+        x: 0.5,
+        y: 0,
+        xanchor: "center",
+        yanchor: "bottom",
+        yref: "container",
+        orientation: "h",
+        font: {
+          size: 16,
+          color: o.legendColor,
+          family: p,
+          weight: 500
+        }
+      },
+      showlegend: !0,
+      hovermode: "closest"
+    }, n = {
+      // Sizing is driven from the measured container; disable Plotly's own
+      // window-resize responsiveness (it can't see container resizes).
+      responsive: !1,
+      displayModeBar: !1,
+      displaylogo: !1
+    };
+    let r = !1, m = null;
+    return tt().then((i) => {
+      if (r || !h.current) return;
+      i.newPlot(h.current, e, t, n), Y(h.current);
+      const l = h.current;
+      m = l, E.current = !0, k.current = { ...M.current };
+      const s = l, N = { color: o.spikeColor, width: 2 };
+      s.on("plotly_hover", (Q) => {
+        const x = Q.points[0];
+        x && i.relayout(l, {
+          shapes: [
+            {
+              type: "line",
+              xref: "x",
+              yref: "paper",
+              x0: x.x,
+              x1: x.x,
+              y0: 0,
+              y1: 1,
+              line: N,
+              layer: "below"
+            },
+            {
+              type: "line",
+              xref: "paper",
+              yref: "y",
+              x0: 0,
+              x1: 1,
+              y0: x.y,
+              y1: x.y,
+              line: N,
+              layer: "below"
+            }
+          ]
+        });
+      }), s.on("plotly_unhover", () => {
+        i.relayout(l, { shapes: [] });
+      });
+    }), () => {
+      r = !0, m && (q().purge(m), E.current = !1);
+    };
+  }, [v, F, y, g, z, C, I, S, B, d, u, P, D, L, o, Y]), W(() => {
+    const e = h.current;
+    !e || !E.current || c <= 0 || a <= 0 || k.current.width === c && k.current.height === a || (k.current = { width: c, height: a }, q().relayout(e, { width: c, height: a }).catch(() => {
+    }));
+  }, [c, a]), /* @__PURE__ */ V("div", { ref: G, className: rt("relative", J && "w-full", K && "h-full"), children: [
+    /* @__PURE__ */ Z("div", { ref: h, style: { width: "100%", height: "100%" } }),
+    U
+  ] });
+};
+export {
+  ut as ScatterPlot
+};
+//# sourceMappingURL=ScatterPlot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterPlot.js","sources":["../../../../src/components/charts/ScatterPlot/ScatterPlot.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport type Plotly from \"plotly.js-dist\";\n\nimport { useElementSize } from \"@/hooks/use-element-size\";\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { cn } from \"@/lib/utils\";\nimport { seriesColor } from \"@/utils/colors\";\n\ntype MarkerSymbol =\n  | \"circle\"\n  | \"square\"\n  | \"diamond\"\n  | \"triangle-up\"\n  | \"triangle-down\"\n  | \"star\";\n\ninterface ScatterPlotDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\n  /** Optional color override (auto-assigned from CHART_COLORS if not provided) */\n  color?: string;\n  /** Optional marker symbol override (auto-assigned in the `stacked` variant) */\n  symbol?: MarkerSymbol;\n  /** Optional per-series marker size override (falls back to `markerSize`) */\n  size?: number;\n}\n\ntype ScatterPlotVariant = \"default\" | \"stacked\";\n\ninterface ScatterPlotProps {\n  /** One or more data series to plot */\n  dataSeries: ScatterPlotDataSeries | ScatterPlotDataSeries[];\n  /**\n   * Fixed width in pixels. When omitted, the chart fills its container and\n   * tracks the container's width via a `ResizeObserver`.\n   */\n  width?: number;\n  /**\n   * Fixed height in pixels. When omitted, the chart fills its container and\n   * tracks the container's height via a `ResizeObserver`.\n   */\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n  /**\n   * `default` renders every series as circles; `stacked` cycles through\n   * distinct marker symbols per series so overlapping series stay legible.\n   */\n  variant?: ScatterPlotVariant;\n  /** Default marker size in pixels (per-series `size` takes precedence) */\n  markerSize?: number;\n}\n\nconst DEFAULT_SYMBOLS: MarkerSymbol[] = [\n  \"circle\",\n  \"square\",\n  \"diamond\",\n  \"triangle-up\",\n  \"triangle-down\",\n  \"star\",\n];\n\nconst ScatterPlot: React.FC<ScatterPlotProps> = ({\n  dataSeries,\n  width,\n  height,\n  xRange,\n  yRange,\n  xTitle,\n  yTitle,\n  title = \"Scatter Plot\",\n  variant = \"default\",\n  markerSize = 10,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  // Omitted width/height → fill the container and track its measured size;\n  // explicit pixel values override. See AreaPlot for the reference pattern.\n  const [containerRef, measured] = useElementSize<HTMLDivElement>();\n  const resolvedWidth = width ?? measured.width;\n  const resolvedHeight = height ?? measured.height;\n  const hasSize = resolvedWidth > 0 && resolvedHeight > 0;\n  // Fill is per-dimension: omit width to fill the container width, omit height\n  // to fill its height (so e.g. a fixed width with a container-driven height works).\n  const fillWidth = width === undefined;\n  const fillHeight = height === undefined;\n  const sizeRef = useRef({ width: resolvedWidth, height: resolvedHeight });\n  sizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n  const plotInitedRef = useRef(false);\n  // Size last applied to the plot, so the resize effect can skip a redundant\n  // relayout right after newPlot already drew at that size.\n  const appliedSizeRef = useRef({ width: 0, height: 0 });\n\n  const seriesArray = useMemo(\n    () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n    [dataSeries],\n  );\n\n  const { xMin, xMax, yMin, yMax } = useMemo(() => {\n    // Seed with ±Infinity, not MAX_VALUE/MIN_VALUE — MIN_VALUE is the smallest\n    // positive number, so it would clamp the max for all-negative data.\n    let minX = Infinity;\n    let maxX = -Infinity;\n    let minY = Infinity;\n    let maxY = -Infinity;\n\n    seriesArray.forEach((series) => {\n      series.x.forEach((x) => {\n        minX = Math.min(minX, x);\n        maxX = Math.max(maxX, x);\n      });\n      series.y.forEach((y) => {\n        minY = Math.min(minY, y);\n        maxY = Math.max(maxY, y);\n      });\n    });\n\n    const xPadding = (maxX - minX) * 0.1;\n    const yPadding = (maxY - minY) * 0.1;\n\n    return {\n      xMin: minX - xPadding,\n      xMax: maxX + xPadding,\n      yMin: minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [seriesArray]);\n\n  const effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\n  );\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const xTicks = useMemo(() => {\n    const range = effectiveXRange[1] - effectiveXRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveXRange[0] / step) * step;\n    while (current <= effectiveXRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveXRange]);\n\n  const yTicks = useMemo(() => {\n    const range = effectiveYRange[1] - effectiveYRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveYRange[0] / step) * step;\n    while (current <= effectiveYRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveYRange]);\n\n  const tickOptions = useMemo(\n    () => ({\n      tickcolor: theme.tickColor,\n      ticklen: 12,\n      tickwidth: 1,\n      ticks: \"outside\" as const,\n      tickfont: {\n        size: 16,\n        color: theme.textColor,\n        family: CHART_FONT_FAMILY,\n        weight: 400,\n      },\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      position: 0,\n      zeroline: false,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || !hasSize) return;\n\n    const plotData = seriesArray.map((series, index) => ({\n      x: series.x,\n      y: series.y,\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      name: series.name,\n      marker: {\n        color: seriesColor(index, series.color),\n        size: series.size ?? markerSize,\n        symbol:\n          series.symbol ??\n          (variant === \"stacked\"\n            ? DEFAULT_SYMBOLS[index % DEFAULT_SYMBOLS.length]\n            : (\"circle\" as const)),\n        line: {\n          color: theme.paperBg,\n          width: 1,\n        },\n      },\n      hoverinfo: \"none\" as const,\n    }));\n\n    const layout = {\n      title: {\n        text: title,\n        font: {\n          size: 32,\n          family: CHART_FONT_FAMILY,\n          color: theme.textColor,\n        },\n      },\n      width: sizeRef.current.width,\n      height: sizeRef.current.height,\n      // Bottom margin reserves room for tick labels, the x-axis title, and the\n      // container-anchored bottom legend stacked beneath them.\n      margin: { l: 80, r: 30, b: 96, t: 60, pad: 10 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: CHART_FONT_FAMILY,\n      },\n      dragmode: false as const,\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 32,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\n        ticktext: xTicks.map(String),\n        showgrid: true,\n        // Reserve space for tick labels + the axis title so the bottom legend\n        // can't overlap them at small sizes (SW-2157).\n        automargin: true,\n        ...tickOptions,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 30,\n        },\n        gridcolor: theme.gridColor,\n        range: yRange,\n        autorange: !yRange,\n        tickmode: \"array\" as const,\n        tickvals: yTicks,\n        showgrid: true,\n        automargin: true,\n        ...tickOptions,\n      },\n      legend: {\n        // Anchor to the bottom of the container (not the plot area) so the\n        // legend always clears the x-axis tick labels + title — a paper-relative\n        // fractional offset collapses into the ticks at small heights (SW-2157).\n        x: 0.5,\n        y: 0,\n        xanchor: \"center\" as const,\n        yanchor: \"bottom\" as const,\n        yref: \"container\" as const,\n        orientation: \"h\" as const,\n        font: {\n          size: 16,\n          color: theme.legendColor,\n          family: CHART_FONT_FAMILY,\n          weight: 500,\n        },\n      },\n      showlegend: true,\n      hovermode: \"closest\" as const,\n    };\n\n    const config = {\n      // Sizing is driven from the measured container; disable Plotly's own\n      // window-resize responsiveness (it can't see container resizes).\n      responsive: false,\n      displayModeBar: false,\n      displaylogo: false,\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 plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      const element = plotRef.current;\n      plotElement = element;\n      plotInitedRef.current = true;\n      appliedSizeRef.current = { ...sizeRef.current };\n\n      // Crosshair guide lines through the hovered point. Drawn as layout shapes\n      // with `layer: \"below\"` so they sit behind the markers — native Plotly\n      // spikelines always render on top and can't be moved behind.\n      const emitter = element as unknown as Plotly.PlotlyHTMLElement;\n      const crosshairLine = { color: theme.spikeColor, width: 2 };\n      emitter.on(\"plotly_hover\", (eventData) => {\n        const point = eventData.points[0];\n        if (!point) return;\n        void plotly.relayout(element, {\n          shapes: [\n            {\n              type: \"line\",\n              xref: \"x\",\n              yref: \"paper\",\n              x0: point.x,\n              x1: point.x,\n              y0: 0,\n              y1: 1,\n              line: crosshairLine,\n              layer: \"below\",\n            },\n            {\n              type: \"line\",\n              xref: \"paper\",\n              yref: \"y\",\n              x0: 0,\n              x1: 1,\n              y0: point.y,\n              y1: point.y,\n              line: crosshairLine,\n              layer: \"below\",\n            },\n          ],\n        });\n      });\n      emitter.on(\"plotly_unhover\", () => {\n        void plotly.relayout(element, { shapes: [] });\n      });\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n        plotInitedRef.current = false;\n      }\n    };\n  }, [seriesArray, hasSize, xRange, yRange, xTitle, yTitle, title, variant, markerSize, effectiveXRange, effectiveYRange, xTicks, yTicks, tickOptions, theme, bindTooltip]);\n\n  // Resize in place when the measured/overridden size changes — cheaper than\n  // recreating the plot, and it preserves the hover/crosshair event bindings.\n  useEffect(() => {\n    const plotElement = plotRef.current;\n    if (!plotElement || !plotInitedRef.current || resolvedWidth <= 0 || resolvedHeight <= 0) {\n      return;\n    }\n    // newPlot already drew at the current size; skip the redundant relayout\n    // (it would queue an automargin redraw that can reject if we unmount first).\n    if (\n      appliedSizeRef.current.width === resolvedWidth &&\n      appliedSizeRef.current.height === resolvedHeight\n    ) {\n      return;\n    }\n    appliedSizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n    // Swallow rejections from a relayout that races an unmount/purge.\n    // plotInitedRef guarantees Plotly finished loading, so sync access is safe.\n    void getLoadedPlotly()\n      .relayout(plotElement, { width: resolvedWidth, height: resolvedHeight })\n      .catch(() => {});\n  }, [resolvedWidth, resolvedHeight]);\n\n  return (\n    <div ref={containerRef} className={cn(\"relative\", fillWidth && \"w-full\", fillHeight && \"h-full\")}>\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { ScatterPlot };\nexport type {\n  MarkerSymbol,\n  ScatterPlotDataSeries,\n  ScatterPlotProps,\n  ScatterPlotVariant,\n};\n"],"names":["DEFAULT_SYMBOLS","ScatterPlot","dataSeries","width","height","xRange","yRange","xTitle","yTitle","title","variant","markerSize","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","containerRef","measured","useElementSize","resolvedWidth","resolvedHeight","hasSize","fillWidth","fillHeight","sizeRef","plotInitedRef","appliedSizeRef","seriesArray","useMemo","xMin","xMax","yMin","yMax","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","CHART_FONT_FAMILY","useEffect","plotData","index","seriesColor","layout","config","cancelled","plotElement","loadPlotly","plotly","element","emitter","crosshairLine","eventData","point","getLoadedPlotly","jsxs","cn","jsx"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { ScatterPlot } from './ScatterPlot';
+export type { ScatterPlotDataSeries, ScatterPlotProps, ScatterPlotVariant, } from './ScatterPlot';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterPlotInteractive.cjs","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/ScatterPlotInteractive.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { ScatterPlotInteractiveProps } from './types';
+/**
+ * ScatterPlotInteractive component for visualizing scatter plot data with advanced interactions.
+ *
+ * **Features:**
+ * - Data-driven and static styling (color, shape, size)
+ * - Interactive selection (click, box, lasso)
+ * - Keyboard modifiers for click-selection modes (Shift/Ctrl)
+ * - Customizable tooltips with rich content support
+ * - Axis customization (ranges, log/linear scales)
+ * - Performance optimizations for large datasets
+ * - Selection propagation via callbacks
+ *
+ * **Selection Modes (click selection only):**
+ * - Default click: Replace selection
+ * - Shift + click: Add to selection
+ * - Ctrl/Cmd + click: Remove from selection
+ * - Shift + Ctrl + click: Toggle selection
+ *
+ * Box/lasso selection always replaces the current selection because
+ * Plotly does not expose the original keyboard event for drag operations.
+ */
+declare const ScatterPlotInteractive: React.FC<ScatterPlotInteractiveProps>;
+export { ScatterPlotInteractive };