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

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

@@ -1 +1 @@
-{"version":3,"file":"PlateMap.js","sources":["../../../../src/components/charts/PlateMap/PlateMap.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport \"./PlateMap.scss\";\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport {\n  PLATE_CONFIGS,\n  DEFAULT_COLOR_SCALE,\n  COLORS,\n  DEFAULT_CATEGORY_COLORS,\n  PLATEMAP_CONSTANTS,\n  NAMED_COLORSCALES,\n} from \"./constants\";\nimport {\n  PLATE_FORMAT_96,\n  PLATE_FORMAT_CUSTOM,\n} from \"./types\";\nimport {\n  generateRowLabels,\n  generateColumnLabels,\n  wellDataToGrid,\n  calculateValueRange,\n  hasMultiValueWells,\n  extractLayers,\n  parseRegionWells,\n  buildWellHoverText,\n  buildColorbarConfig,\n  buildPlotMargins,\n  calculateTitleX,\n  calculateAxisDomain,\n  flattenGridData,\n  calculateMarkerSize,\n} from \"./utils\";\n\nimport type {\n  PlateMapProps,\n  LayerConfig,\n  WellData,\n} from \"./types\";\n\n// Re-export types and constants for external consumers\nexport * from \"./types\";\nexport { DEFAULT_CATEGORY_COLORS } from \"./constants\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n/**\n * PlateMap component for visualizing well plate data as a heatmap or categorical display.\n *\n * **Supported Plate Formats:**\n * - 96-well (8 rows × 12 columns, wells A1-H12)\n * - 384-well (16 rows × 24 columns, wells A1-P24)\n * - 1536-well (32 rows × 48 columns, wells A1-AF48)\n * - Custom dimensions with user-specified rows/columns\n *\n * **Visualization Modes:**\n * - `\"heatmap\"`: Continuous color gradient for quantitative values\n * - `\"categorical\"`: Discrete colors for well types (sample, control, empty)\n *\n * **Features:**\n * - Multiple data layers with independent visualization settings\n * - Control region highlighting with borders and fill colors\n * - Configurable color scales, tooltips, and click interactions\n * - Support for WellData arrays with multi-layer visualization\n *\n * **Data Format:**\n * - **WellData array**: `[{ wellId: \"A1\", values: { RFU: 100 }, tooltipData: {...} }, ...]`\n *\n */\nconst PlateMap: React.FC<PlateMapProps> = ({\n  data,\n  layerConfigs,\n  initialLayerId,\n  onLayerChange,\n  plateFormat = PLATE_FORMAT_96,\n  rows: customRows,\n  columns: customColumns,\n  visualizationMode: propVisualizationMode = \"heatmap\",\n  categoryColors: customCategoryColors,\n  regions,\n  title,\n  xTitle,\n  yTitle,\n  xLabels: customXLabels,\n  yLabels: customYLabels,\n  colorScale: propColorScale = DEFAULT_COLOR_SCALE,\n  valueMin: propValueMin,\n  valueMax: propValueMax,\n  emptyWellColor = COLORS.emptyWell,\n  showColorBar = true,\n  showLegend = true,\n  legendConfig,\n  width = 800,\n  height = 500,\n  precision = 0,\n  markerShape = \"circle\",\n  onWellClick,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const onWellClickRef = useRef(onWellClick);\n  onWellClickRef.current = onWellClick;\n\n  // Internal state for layer toggling, initialized with initialLayerId\n  const [activeLayerId, setActiveLayerId] = useState<string | undefined>(initialLayerId);\n\n  // Determine plate dimensions\n  let rows: number;\n  let columns: number;\n\n  if (plateFormat === PLATE_FORMAT_CUSTOM) {\n    rows = customRows ?? 8;\n    columns = customColumns ?? 12;\n  } else {\n    const config = PLATE_CONFIGS[plateFormat];\n    rows = config.rows;\n    columns = config.columns;\n  }\n\n  // Diameter (px) of each well marker; also drives the hover hit radius so the\n  // whole circle is hoverable instead of just a small zone around its center\n  const markerSize = useMemo(\n    () => calculateMarkerSize(width, height, rows, columns, markerShape, !!title, !!yTitle),\n    [width, height, rows, columns, markerShape, title, yTitle],\n  );\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    hoverDistance: Math.ceil(markerSize / 2),\n  });\n\n  // Auto-generate layers from multi-value WellData\n  const effectiveLayers = useMemo((): LayerConfig[] | null => {\n    // Check if data contains multi-value wells\n    if (Array.isArray(data) && data.length > 0 && \"wellId\" in (data[0] as WellData)) {\n      const wellDataArray = data as WellData[];\n      if (hasMultiValueWells(wellDataArray)) {\n        return extractLayers(wellDataArray, layerConfigs);\n      }\n    }\n\n    return null;\n  }, [data, layerConfigs]);\n\n  // Handle layer toggling - determine active layer\n  const activeLayer = useMemo((): LayerConfig | null => {\n    if (!effectiveLayers || effectiveLayers.length === 0) return null;\n    if (activeLayerId) {\n      return effectiveLayers.find((l) => l.id === activeLayerId) ?? effectiveLayers[0];\n    }\n    return effectiveLayers[0];\n  }, [effectiveLayers, activeLayerId]);\n\n  // Get effective props from active layer or default props\n  // Data is always the same - we just change which layer is being visualized\n  const visualizationMode = activeLayer?.visualizationMode ?? propVisualizationMode;\n  const colorScale = activeLayer?.colorScale ?? propColorScale;\n  const valueMin = activeLayer?.valueMin ?? propValueMin;\n  const valueMax = activeLayer?.valueMax ?? propValueMax;\n  // Derive valueUnit from layer config\n  const valueUnit = activeLayer?.valueUnit ? ` ${activeLayer.valueUnit}` : \"\";\n\n  // Merge custom category colors with defaults, including layer-specific colors\n  const categoryColors = useMemo(\n    () => ({ ...DEFAULT_CATEGORY_COLORS, ...customCategoryColors, ...activeLayer?.categoryColors }),\n    [customCategoryColors, activeLayer?.categoryColors]\n  );\n\n  // Convert data to grid format - memoize to prevent re-render issues\n  // Use activeLayer.id to extract the appropriate value from multi-value wells\n  const activeLayerId_ = activeLayer?.id;\n  const { grid, categoriesGrid, allValuesMap, tooltipDataMap } = useMemo(() => {\n    let resultGrid: (number | null)[][];\n    let resultCategories: (string | null)[][] = Array.from({ length: rows }, () =>\n      Array(columns).fill(null)\n    );\n    let resultAllValues = new Map<string, Record<string, string | number | null>>();\n    let resultTooltipData = new Map<string, Record<string, unknown>>();\n\n    if (Array.isArray(data) && data.length > 0) {\n      // WellData array format - pass activeLayerId to extract the right layer\n      const result = wellDataToGrid(data, rows, columns, activeLayerId_);\n      resultGrid = result.grid;\n      resultCategories = result.categories;\n      resultAllValues = result.allValues;\n      resultTooltipData = result.tooltipData;\n    } else {\n      // Generate random data for demonstration when no data provided\n      resultGrid = Array.from({ length: rows }, () =>\n        Array.from({ length: columns }, () => Math.random() * PLATEMAP_CONSTANTS.MAX_RANDOM_VALUE)\n      );\n    }\n\n    return { grid: resultGrid, categoriesGrid: resultCategories, allValuesMap: resultAllValues, tooltipDataMap: resultTooltipData };\n  }, [data, rows, columns, activeLayerId_]);\n\n  // Generate labels - use custom labels if provided, otherwise auto-generate.\n  // Memoized so a tooltip-driven re-render doesn't change their identity and\n  // needlessly rebuild the plot (which would clear the open tooltip).\n  const rowLabels = useMemo(\n    () => customYLabels ?? generateRowLabels(rows),\n    [customYLabels, rows],\n  );\n  const colLabels = useMemo(\n    () => customXLabels ?? generateColumnLabels(columns),\n    [customXLabels, columns],\n  );\n\n  // Calculate value range if not provided\n  const range = calculateValueRange(grid);\n  const zMin = valueMin ?? range.min;\n  const zMax = valueMax ?? range.max;\n\n  // Check if grid has any null values\n  const hasNullValues = grid.some(row => row.includes(null));\n\n  // Create sentinel value for empty wells (below the data range)\n  // This allows us to show emptyWellColor for null cells\n  const sentinelValue = zMin - (zMax - zMin) * PLATEMAP_CONSTANTS.SENTINEL_RATIO - 1;\n\n  // Replace null values with sentinel for Plotly rendering\n  const displayGrid = useMemo(\n    () =>\n      hasNullValues\n        ? grid.map((row) => row.map((val) => (val === null ? sentinelValue : val)))\n        : grid,\n    [hasNullValues, grid, sentinelValue],\n  );\n\n  // Extend colorscale to include emptyWellColor at the bottom for null values\n  const effectiveColorScale = useMemo(() => {\n    if (!hasNullValues) return colorScale;\n\n    // Convert colorScale to array format if it's a named string scale\n    let arrayColorScale: Array<[number, string]>;\n    if (typeof colorScale === \"string\") {\n      // Look up the named scale in our mapping\n      const namedScale = NAMED_COLORSCALES[colorScale];\n      if (namedScale) {\n        arrayColorScale = namedScale;\n      } else {\n        // Unknown named scale - can't extend it, return as-is\n        // This is a fallback for custom/unknown Plotly scale names\n        return colorScale;\n      }\n    } else {\n      arrayColorScale = colorScale;\n    }\n\n    // For array colorscales, prepend emptyWellColor at position 0\n    // and shift all other positions proportionally\n    const totalRange = zMax - sentinelValue;\n    const dataStartRatio = (zMin - sentinelValue) / totalRange;\n\n    // Create new colorscale with emptyWellColor at the bottom\n    const extendedScale: Array<[number, string]> = [\n      [0, emptyWellColor],\n      [dataStartRatio * PLATEMAP_CONSTANTS.COLOR_SCALE_THRESHOLD, emptyWellColor], // Small band for empty wells\n    ];\n\n    // Remap original colorscale positions to the remaining range\n    for (const [pos, color] of arrayColorScale) {\n      const newPos = dataStartRatio + pos * (1 - dataStartRatio);\n      extendedScale.push([newPos, color]);\n    }\n\n    return extendedScale;\n  }, [colorScale, hasNullValues, zMin, zMax, sentinelValue, emptyWellColor]);\n\n  // Effective zMin includes sentinel value if we have nulls\n  const effectiveZMin = hasNullValues ? sentinelValue : zMin;\n\n  // Create a lookup map for layer configs to get valueUnit for each layer\n  const layerConfigMap = useMemo(() => {\n    const map = new Map<string, LayerConfig>();\n    if (effectiveLayers) {\n      for (const layer of effectiveLayers) {\n        map.set(layer.id, layer);\n      }\n    }\n    return map;\n  }, [effectiveLayers]);\n\n  // Build custom hover text matrix - shows ALL values regardless of active layer.\n  // Memoized so its identity is stable across tooltip-driven re-renders.\n  const hoverText = useMemo<string[][]>(\n    () =>\n      grid.map((row, rowIdx) =>\n        row.map((val, colIdx) => {\n          const wellId = `${rowLabels[rowIdx]}${colLabels[colIdx]}`;\n          const wellIdUpper = String(wellId).toUpperCase();\n          return buildWellHoverText({\n            wellId,\n            value: val,\n            allValues: allValuesMap.get(wellIdUpper),\n            tooltipExtra: tooltipDataMap.get(wellIdUpper),\n            activeLayerId: activeLayer?.id,\n            layerConfigMap,\n            precision,\n            valueUnit,\n          });\n        })\n      ),\n    [grid, rowLabels, colLabels, allValuesMap, tooltipDataMap, activeLayer?.id, layerConfigMap, precision, valueUnit],\n  );\n\n  // Build categorical data for categorical mode\n  const { categoricalGrid, categoricalColorScale, uniqueTypes, catMax } = useMemo(() => {\n    if (visualizationMode !== \"categorical\") {\n      return { categoricalGrid: null, categoricalColorScale: null, uniqueTypes: [], catMax: 0 };\n    }\n\n    // Collect unique categories from the categoriesGrid\n    const typesSet = new Set<string>();\n    let hasNullCategory = false;\n    for (const row of categoriesGrid) {\n      for (const category of row) {\n        if (category) {\n          typesSet.add(category);\n        } else {\n          hasNullCategory = true;\n        }\n      }\n    }\n    // Only include \"empty\" if there are actual null wells\n    if (hasNullCategory) {\n      typesSet.add(\"empty\");\n    }\n    const types = [...typesSet].sort();\n\n    // Create numeric grid where each category maps to an index\n    const typeToIndex = new Map<string, number>();\n    types.forEach((type, idx) => typeToIndex.set(type, idx));\n\n    const catGrid: number[][] = categoriesGrid.map((row) =>\n      row.map((category) => {\n        if (category === null) {\n          return typeToIndex.get(\"empty\") ?? 0;\n        }\n        return typeToIndex.get(category) ?? typeToIndex.get(\"empty\") ?? 0;\n      })\n    );\n\n    // Build discrete colorscale for categories\n    // The grid contains integer indices 0, 1, 2, ... (numTypes - 1)\n    // With cmin=0 and cmax=numTypes-1, Plotly maps:\n    //   index 0 -> normalized 0.0\n    //   index (numTypes-1) -> normalized 1.0\n    // We need each index to map to a distinct color band\n    const numTypes = types.length;\n    const catColorScale: Array<[number, string]> = [];\n\n    if (numTypes === 1) {\n      // Single type: entire range is one color\n      const color = categoryColors[types[0]] || emptyWellColor;\n      catColorScale.push([0, color]);\n      catColorScale.push([1, color]);\n    } else {\n      // Multiple types: create bands for each index\n      // Index i maps to normalized value i / (numTypes - 1)\n      types.forEach((type, idx) => {\n        const color = categoryColors[type] || emptyWellColor;\n        const normalizedPos = idx / (numTypes - 1);\n        // Create a small band around each position\n        const bandHalf = 0.5 / (numTypes - 1);\n        const start = Math.max(0, normalizedPos - bandHalf);\n        const end = Math.min(1, normalizedPos + bandHalf - PLATEMAP_CONSTANTS.COLOR_SCALE_EPSILON);\n        catColorScale.push([start, color]);\n        catColorScale.push([end, color]);\n      });\n    }\n\n    // cmax should be numTypes - 1 to match the index range\n    return { categoricalGrid: catGrid, categoricalColorScale: catColorScale, uniqueTypes: types, catMax: numTypes - 1 };\n  }, [visualizationMode, categoriesGrid, categoryColors, emptyWellColor]);\n\n  // Build Plotly shapes for highlighted regions\n  const regionShapes = useMemo(() => {\n    if (!regions || regions.length === 0) {\n      return [];\n    }\n\n    const shapes: Array<Partial<Plotly.Shape>> = [];\n\n    for (const region of regions) {\n      const bounds = parseRegionWells(region.wells, rowLabels, colLabels);\n      if (!bounds) continue;\n\n      // Plotly heatmap uses the actual label values for positioning.\n      // colLabels are 1-indexed (1, 2, 3, ...), so we need to convert from 0-indexed bounds.\n      // Each cell is centered on its label, so we offset by inset to cover the cell.\n      // For columns: bounds.minCol=0 means column label 1, so x0 = 1 - inset\n      // For rows: bounds.minRow=0 means row index 0, which is correct for y-axis\n      //\n      // Use 0.49 inset to place boundary just inside cell edge,\n      // avoiding line doubling when adjacent regions share a border\n      const inset = 0.49;\n      const x0 = (bounds.minCol + 1) - inset;\n      const x1 = (bounds.maxCol + 1) + inset;\n      const y0 = bounds.minRow - inset;\n      const y1 = bounds.maxRow + inset;\n\n      shapes.push({\n        type: \"rect\",\n        xref: \"x\",\n        yref: \"y\",\n        x0,\n        x1,\n        y0,\n        y1,\n        line: {\n          color: region.borderColor || COLORS.textDark,\n          width: region.borderWidth ?? 2,\n        },\n        fillcolor: region.fillColor || \"transparent\",\n        layer: \"above\",\n      });\n    }\n\n    return shapes;\n  }, [regions, rowLabels, colLabels]);\n\n  useEffect(() => {\n    const currentRef = plotRef.current;\n    if (!currentRef) return;\n\n    // Determine which grid and colorscale to use based on mode\n    const isCategorical = visualizationMode === \"categorical\";\n    const plotZ = isCategorical && categoricalGrid ? categoricalGrid : displayGrid;\n    const plotColorScale = isCategorical && categoricalColorScale ? categoricalColorScale : effectiveColorScale;\n    const plotZMin = isCategorical ? 0 : effectiveZMin;\n    const plotZMax = isCategorical ? (catMax || 1) : zMax;\n    const plotShowScale = isCategorical ? false : showColorBar;\n\n    // Flatten 2D grid data into arrays for scatter plot\n    const { xData, yData, colorData, textData } = flattenGridData(\n      plotZ,\n      rowLabels,\n      hoverText,\n      rows,\n      columns,\n      plotZMin\n    );\n\n    // Create scatter plot with markers\n    const plotData: Plotly.Data[] = [\n      {\n        x: xData,\n        y: yData,\n        mode: \"markers\" as const,\n        type: \"scatter\" as const,\n        marker: {\n          symbol: markerShape,\n          size: markerSize,\n          color: colorData,\n          colorscale: plotColorScale,\n          cmin: plotZMin,\n          cmax: plotZMax,\n          showscale: plotShowScale,\n          colorbar: buildColorbarConfig(\n            legendConfig?.position ?? \"right\",\n            valueUnit,\n            legendConfig?.title\n          ),\n          line: {\n            color: theme.gridColor,\n            width: 1,\n          },\n        },\n        hoverinfo: \"none\" as const,\n        text: textData,\n      },\n    ];\n\n    const legendPosition = legendConfig?.position ?? \"right\";\n\n    const layout = {\n      autosize: false, // Prevent auto-sizing to maintain consistent layout\n      title: title\n        ? {\n            text: title,\n            font: {\n              family: \"Inter, sans-serif\",\n              size: 20,\n              color: theme.textSecondary,\n            },\n            x: calculateTitleX(legendPosition),\n            xanchor: \"center\" as const,\n            y: 0.98,\n            yanchor: \"top\" as const,\n          }\n        : undefined,\n      width,\n      height,\n      margin: buildPlotMargins(legendPosition, !!title, !!yTitle),\n      xaxis: {\n        title: {\n          text: xTitle || \"\",\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n          },\n          standoff: 15,\n        },\n        side: \"top\" as const,\n        fixedrange: true,\n        dtick: 1,\n        range: [0.5, columns + 0.5], // Explicit range to prevent auto-padding\n        automargin: false, // Prevent auto margin adjustment\n        tickmode: \"array\" as const,\n        tickvals: Array.from({ length: columns }, (_, i) => i + 1),\n        ticktext: colLabels.map(String),\n        tickangle: 0, // Keep labels horizontal\n        tickfont: { size: columns > 24 ? 8 : PLATEMAP_CONSTANTS.FONT_SIZE_LARGE }, // Smaller font for high-density plates\n        // Adjust domain based on legend position to prevent colorbar overlap\n        domain: calculateAxisDomain(legendPosition),\n      },\n      yaxis: {\n        title: {\n          text: yTitle || \"\",\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n          },\n          standoff: 15,\n        },\n        fixedrange: true,\n        dtick: 1,\n        range: [rows + PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET, PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET], // Reversed range: high to low puts row A at top\n        automargin: false, // Prevent auto margin adjustment\n        tickmode: \"array\" as const,\n        tickvals: Array.from({ length: rows }, (_, i) => i),\n        ticktext: rowLabels.map(String),\n        tickfont: { size: rows > 16 ? 8 : PLATEMAP_CONSTANTS.FONT_SIZE_LARGE }, // Smaller font for high-density plates\n      },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n        color: theme.textSecondary,\n      },\n      shapes: regionShapes,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(currentRef, plotData, layout, config);\n    bindTooltip(currentRef);\n\n    // Always attach click handler - check onWellClickRef.current inside callback\n    // This ensures handler is registered even if onWellClick is provided after initial render\n    (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\"plotly_click\", (eventData: Plotly.PlotMouseEvent) => {\n      if (!onWellClickRef.current) return;\n      const point = eventData.points[0];\n      if (point) {\n        // Cast labels to handle union type\n        const rowLabelsArr = rowLabels as (string | number)[];\n        const colLabelsArr = colLabels as (string | number)[];\n        const rowIdx = rowLabelsArr.indexOf(point.y as string | number);\n        const colIdx = colLabelsArr.indexOf(point.x as string | number);\n        if (rowIdx >= 0 && colIdx >= 0) {\n          const wellId = `${rowLabelsArr[rowIdx]}${colLabelsArr[colIdx]}`;\n          const wellIdUpper = String(wellId).toUpperCase();\n          // Get all values and tooltipData for this well\n          const allValues = allValuesMap.get(wellIdUpper);\n          const tooltipData = tooltipDataMap.get(wellIdUpper);\n          const wellData: WellData = {\n            wellId,\n            values: allValues,\n            tooltipData,\n          };\n          onWellClickRef.current?.(wellData);\n        }\n      }\n    });\n\n    return () => {\n      if (currentRef) {\n        Plotly.purge(currentRef);\n      }\n    };\n  }, [\n    displayGrid,\n    colLabels,\n    rowLabels,\n    effectiveColorScale,\n    showColorBar,\n    effectiveZMin,\n    zMax,\n    valueUnit,\n    title,\n    xTitle,\n    yTitle,\n    width,\n    height,\n    hoverText,\n    precision,\n    tooltipDataMap,\n    allValuesMap,\n    grid,\n    visualizationMode,\n    categoricalGrid,\n    categoricalColorScale,\n    uniqueTypes.length,\n    catMax,\n    regionShapes,\n    rows,\n    columns,\n    legendConfig,\n    markerShape,\n    markerSize,\n    theme,\n    bindTooltip,\n  ]);\n\n  // Render layer selector tabs\n  const renderLayerSelector = () => {\n    if (!effectiveLayers || effectiveLayers.length <= 1) {\n      return null;\n    }\n\n    return (\n      <div className=\"platemap-layer-selector\">\n        {effectiveLayers.map((layer) => {\n          const isActive = activeLayer?.id === layer.id;\n          return (\n            <Button\n              key={layer.id}\n              variant={isActive ? \"default\" : \"outline\"}\n              size=\"sm\"\n              onClick={() => {\n                setActiveLayerId(layer.id);\n                onLayerChange?.(layer.id);\n              }}\n            >\n              {layer.name}\n            </Button>\n          );\n        })}\n      </div>\n    );\n  };\n\n  // Legend configuration with defaults\n  const legendPosition = legendConfig?.position ?? \"right\";\n  const legendFontSize = legendConfig?.fontSize ?? 12;\n  const legendItemSpacing = legendConfig?.itemSpacing ?? 4;\n  const legendSwatchSize = legendConfig?.swatchSize ?? 16;\n  const legendTitle = legendConfig?.title;\n\n  // Fixed width for categorical legend to prevent layout shift\n  const legendWidth = 120;\n\n  // Determine if legend is horizontal (top/bottom) or vertical (left/right)\n  const isHorizontalLegend = legendPosition === \"top\" || legendPosition === \"bottom\";\n\n  // Render legend (categorical types and/or regions)\n  const renderLegend = () => {\n    const hasCategoricalItems = visualizationMode === \"categorical\" && uniqueTypes.length > 0;\n    const hasRegions = regions && regions.length > 0;\n\n    if (!showLegend || (!hasCategoricalItems && !hasRegions)) {\n      // Return empty placeholder to maintain consistent width (only for vertical legends)\n      if (!isHorizontalLegend) {\n        return <div className=\"platemap-legend-placeholder\" style={{ width: legendWidth }} />;\n      }\n      return null;\n    }\n\n    // Build legend class names\n    const legendClassNames = [\"platemap-legend\"];\n    if (isHorizontalLegend) {\n      legendClassNames.push(\"platemap-legend--horizontal\");\n    } else if (legendPosition === \"left\") {\n      legendClassNames.push(\"platemap-legend--left\");\n    } else if (legendPosition === \"right\") {\n      legendClassNames.push(\"platemap-legend--right\");\n    }\n\n    // Dynamic styles that depend on props\n    const legendStyle: React.CSSProperties = {\n      gap: `${legendItemSpacing}px`,\n      width: isHorizontalLegend ? undefined : legendWidth,\n    };\n\n    return (\n      <div className={legendClassNames.join(\" \")} style={legendStyle}>\n        {legendTitle && (\n          <div\n            className={`platemap-legend__title${isHorizontalLegend ? \" platemap-legend__title--horizontal\" : \"\"}`}\n            style={{ fontSize: `${legendFontSize}px` }}\n          >\n            {legendTitle}\n          </div>\n        )}\n        {/* Categorical type items */}\n        {hasCategoricalItems &&\n          uniqueTypes.map((type) => (\n            <div key={type} className=\"platemap-legend__item\">\n              <div\n                className=\"platemap-legend__swatch\"\n                style={{\n                  width: `${legendSwatchSize}px`,\n                  height: `${legendSwatchSize}px`,\n                  backgroundColor: categoryColors[type] || emptyWellColor,\n                }}\n              />\n              <span\n                className=\"platemap-legend__label platemap-legend__label--capitalize\"\n                style={{ fontSize: `${legendFontSize}px` }}\n              >\n                {type}\n              </span>\n            </div>\n          ))}\n        {/* Region items */}\n        {hasRegions &&\n          regions.map((region) => (\n            <div key={region.id} className=\"platemap-legend__item\">\n              <div\n                className=\"platemap-legend__swatch platemap-legend__swatch--region\"\n                style={{\n                  width: `${legendSwatchSize}px`,\n                  height: `${legendSwatchSize}px`,\n                  backgroundColor: region.fillColor || \"transparent\",\n                  border: `${region.borderWidth || 2}px solid ${region.borderColor || COLORS.regionBorder}`,\n                }}\n              />\n              <span\n                className=\"platemap-legend__label\"\n                style={{ fontSize: `${legendFontSize}px` }}\n              >\n                {region.name}\n              </span>\n            </div>\n          ))}\n      </div>\n    );\n  };\n\n  // Build the plot content based on legend position\n  const plotContent = (\n    <div className=\"relative\">\n      <div ref={plotRef} className=\"platemap-plot\" style={{ width, height }} />\n      {tooltipElement}\n    </div>\n  );\n  const legendContent = renderLegend();\n\n  const renderPlotWithLegend = () => {\n    switch (legendPosition) {\n      case \"left\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--vertical\">\n            {legendContent}\n            {plotContent}\n          </div>\n        );\n      case \"top\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--horizontal\">\n            {legendContent}\n            {plotContent}\n          </div>\n        );\n      case \"bottom\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--horizontal\">\n            {plotContent}\n            {legendContent}\n          </div>\n        );\n      case \"right\":\n      default:\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--vertical\">\n            {plotContent}\n            {legendContent}\n          </div>\n        );\n    }\n  };\n\n  return (\n    <div className=\"platemap-container\" style={{ width: isHorizontalLegend ? undefined : width }}>\n      {renderLayerSelector()}\n      {renderPlotWithLegend()}\n    </div>\n  );\n};\n\nexport { PlateMap };"],"names":["PlateMap","data","layerConfigs","initialLayerId","onLayerChange","plateFormat","PLATE_FORMAT_96","customRows","customColumns","propVisualizationMode","customCategoryColors","regions","title","xTitle","yTitle","customXLabels","customYLabels","propColorScale","DEFAULT_COLOR_SCALE","propValueMin","propValueMax","emptyWellColor","COLORS","showColorBar","showLegend","legendConfig","width","height","precision","markerShape","onWellClick","plotRef","useRef","theme","usePlotlyTheme","onWellClickRef","activeLayerId","setActiveLayerId","useState","rows","columns","PLATE_FORMAT_CUSTOM","config","PLATE_CONFIGS","markerSize","useMemo","calculateMarkerSize","bindTooltip","tooltipElement","useChartTooltip","effectiveLayers","wellDataArray","hasMultiValueWells","extractLayers","activeLayer","l","visualizationMode","colorScale","valueMin","valueMax","valueUnit","categoryColors","DEFAULT_CATEGORY_COLORS","activeLayerId_","grid","categoriesGrid","allValuesMap","tooltipDataMap","resultGrid","resultCategories","resultAllValues","resultTooltipData","result","wellDataToGrid","PLATEMAP_CONSTANTS","rowLabels","generateRowLabels","colLabels","generateColumnLabels","range","calculateValueRange","zMin","zMax","hasNullValues","row","sentinelValue","displayGrid","val","effectiveColorScale","arrayColorScale","namedScale","NAMED_COLORSCALES","totalRange","dataStartRatio","extendedScale","pos","color","newPos","effectiveZMin","layerConfigMap","map","layer","hoverText","rowIdx","colIdx","wellId","wellIdUpper","buildWellHoverText","categoricalGrid","categoricalColorScale","uniqueTypes","catMax","typesSet","hasNullCategory","category","types","typeToIndex","type","idx","catGrid","numTypes","catColorScale","normalizedPos","bandHalf","start","end","regionShapes","shapes","region","bounds","parseRegionWells","inset","x0","x1","y0","y1","useEffect","currentRef","isCategorical","plotZ","plotColorScale","plotZMin","plotZMax","plotShowScale","xData","yData","colorData","textData","flattenGridData","plotData","buildColorbarConfig","legendPosition","layout","calculateTitleX","buildPlotMargins","_","i","calculateAxisDomain","Plotly","eventData","point","rowLabelsArr","colLabelsArr","allValues","tooltipData","wellData","renderLayerSelector","isActive","jsx","Button","legendFontSize","legendItemSpacing","legendSwatchSize","legendTitle","legendWidth","isHorizontalLegend","renderLegend","hasCategoricalItems","hasRegions","legendClassNames","legendStyle","jsxs","plotContent","legendContent","renderPlotWithLegend"],"mappings":"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"}
+{"version":3,"file":"PlateMap.js","sources":["../../../../src/components/charts/PlateMap/PlateMap.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport \"./PlateMap.scss\";\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport {\n  PLATE_CONFIGS,\n  DEFAULT_COLOR_SCALE,\n  COLORS,\n  DEFAULT_CATEGORY_COLORS,\n  PLATEMAP_CONSTANTS,\n  NAMED_COLORSCALES,\n} from \"./constants\";\nimport {\n  PLATE_FORMAT_96,\n  PLATE_FORMAT_CUSTOM,\n} from \"./types\";\nimport {\n  generateRowLabels,\n  generateColumnLabels,\n  wellDataToGrid,\n  calculateValueRange,\n  hasMultiValueWells,\n  extractLayers,\n  parseRegionWells,\n  buildWellHoverText,\n  buildColorbarConfig,\n  buildPlotMargins,\n  calculateTitleX,\n  calculateAxisDomain,\n  flattenGridData,\n  calculateMarkerSize,\n} from \"./utils\";\n\nimport type {\n  PlateMapProps,\n  LayerConfig,\n  WellData,\n} from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\n// Re-export types and constants for external consumers\nexport * from \"./types\";\nexport { DEFAULT_CATEGORY_COLORS } from \"./constants\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n/**\n * PlateMap component for visualizing well plate data as a heatmap or categorical display.\n *\n * **Supported Plate Formats:**\n * - 96-well (8 rows × 12 columns, wells A1-H12)\n * - 384-well (16 rows × 24 columns, wells A1-P24)\n * - 1536-well (32 rows × 48 columns, wells A1-AF48)\n * - Custom dimensions with user-specified rows/columns\n *\n * **Visualization Modes:**\n * - `\"heatmap\"`: Continuous color gradient for quantitative values\n * - `\"categorical\"`: Discrete colors for well types (sample, control, empty)\n *\n * **Features:**\n * - Multiple data layers with independent visualization settings\n * - Control region highlighting with borders and fill colors\n * - Configurable color scales, tooltips, and click interactions\n * - Support for WellData arrays with multi-layer visualization\n *\n * **Data Format:**\n * - **WellData array**: `[{ wellId: \"A1\", values: { RFU: 100 }, tooltipData: {...} }, ...]`\n *\n */\nconst PlateMap: React.FC<PlateMapProps> = ({\n  data,\n  layerConfigs,\n  initialLayerId,\n  onLayerChange,\n  plateFormat = PLATE_FORMAT_96,\n  rows: customRows,\n  columns: customColumns,\n  visualizationMode: propVisualizationMode = \"heatmap\",\n  categoryColors: customCategoryColors,\n  regions,\n  title,\n  xTitle,\n  yTitle,\n  xLabels: customXLabels,\n  yLabels: customYLabels,\n  colorScale: propColorScale = DEFAULT_COLOR_SCALE,\n  valueMin: propValueMin,\n  valueMax: propValueMax,\n  emptyWellColor = COLORS.emptyWell,\n  showColorBar = true,\n  showLegend = true,\n  legendConfig,\n  width = 800,\n  height = 500,\n  precision = 0,\n  markerShape = \"circle\",\n  onWellClick,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const onWellClickRef = useRef(onWellClick);\n  onWellClickRef.current = onWellClick;\n\n  // Internal state for layer toggling, initialized with initialLayerId\n  const [activeLayerId, setActiveLayerId] = useState<string | undefined>(initialLayerId);\n\n  // Determine plate dimensions\n  let rows: number;\n  let columns: number;\n\n  if (plateFormat === PLATE_FORMAT_CUSTOM) {\n    rows = customRows ?? 8;\n    columns = customColumns ?? 12;\n  } else {\n    const config = PLATE_CONFIGS[plateFormat];\n    rows = config.rows;\n    columns = config.columns;\n  }\n\n  // Diameter (px) of each well marker; also drives the hover hit radius so the\n  // whole circle is hoverable instead of just a small zone around its center\n  const markerSize = useMemo(\n    () => calculateMarkerSize(width, height, rows, columns, markerShape, !!title, !!yTitle),\n    [width, height, rows, columns, markerShape, title, yTitle],\n  );\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    hoverDistance: Math.ceil(markerSize / 2),\n  });\n\n  // Auto-generate layers from multi-value WellData\n  const effectiveLayers = useMemo((): LayerConfig[] | null => {\n    // Check if data contains multi-value wells\n    if (Array.isArray(data) && data.length > 0 && \"wellId\" in (data[0] as WellData)) {\n      const wellDataArray = data as WellData[];\n      if (hasMultiValueWells(wellDataArray)) {\n        return extractLayers(wellDataArray, layerConfigs);\n      }\n    }\n\n    return null;\n  }, [data, layerConfigs]);\n\n  // Handle layer toggling - determine active layer\n  const activeLayer = useMemo((): LayerConfig | null => {\n    if (!effectiveLayers || effectiveLayers.length === 0) return null;\n    if (activeLayerId) {\n      return effectiveLayers.find((l) => l.id === activeLayerId) ?? effectiveLayers[0];\n    }\n    return effectiveLayers[0];\n  }, [effectiveLayers, activeLayerId]);\n\n  // Get effective props from active layer or default props\n  // Data is always the same - we just change which layer is being visualized\n  const visualizationMode = activeLayer?.visualizationMode ?? propVisualizationMode;\n  const colorScale = activeLayer?.colorScale ?? propColorScale;\n  const valueMin = activeLayer?.valueMin ?? propValueMin;\n  const valueMax = activeLayer?.valueMax ?? propValueMax;\n  // Derive valueUnit from layer config\n  const valueUnit = activeLayer?.valueUnit ? ` ${activeLayer.valueUnit}` : \"\";\n\n  // Merge custom category colors with defaults, including layer-specific colors\n  const categoryColors = useMemo(\n    () => ({ ...DEFAULT_CATEGORY_COLORS, ...customCategoryColors, ...activeLayer?.categoryColors }),\n    [customCategoryColors, activeLayer?.categoryColors]\n  );\n\n  // Convert data to grid format - memoize to prevent re-render issues\n  // Use activeLayer.id to extract the appropriate value from multi-value wells\n  const activeLayerId_ = activeLayer?.id;\n  const { grid, categoriesGrid, allValuesMap, tooltipDataMap } = useMemo(() => {\n    let resultGrid: (number | null)[][];\n    let resultCategories: (string | null)[][] = Array.from({ length: rows }, () =>\n      Array(columns).fill(null)\n    );\n    let resultAllValues = new Map<string, Record<string, string | number | null>>();\n    let resultTooltipData = new Map<string, Record<string, unknown>>();\n\n    if (Array.isArray(data) && data.length > 0) {\n      // WellData array format - pass activeLayerId to extract the right layer\n      const result = wellDataToGrid(data, rows, columns, activeLayerId_);\n      resultGrid = result.grid;\n      resultCategories = result.categories;\n      resultAllValues = result.allValues;\n      resultTooltipData = result.tooltipData;\n    } else {\n      // Generate random data for demonstration when no data provided\n      resultGrid = Array.from({ length: rows }, () =>\n        Array.from({ length: columns }, () => Math.random() * PLATEMAP_CONSTANTS.MAX_RANDOM_VALUE)\n      );\n    }\n\n    return { grid: resultGrid, categoriesGrid: resultCategories, allValuesMap: resultAllValues, tooltipDataMap: resultTooltipData };\n  }, [data, rows, columns, activeLayerId_]);\n\n  // Generate labels - use custom labels if provided, otherwise auto-generate.\n  // Memoized so a tooltip-driven re-render doesn't change their identity and\n  // needlessly rebuild the plot (which would clear the open tooltip).\n  const rowLabels = useMemo(\n    () => customYLabels ?? generateRowLabels(rows),\n    [customYLabels, rows],\n  );\n  const colLabels = useMemo(\n    () => customXLabels ?? generateColumnLabels(columns),\n    [customXLabels, columns],\n  );\n\n  // Calculate value range if not provided\n  const range = calculateValueRange(grid);\n  const zMin = valueMin ?? range.min;\n  const zMax = valueMax ?? range.max;\n\n  // Check if grid has any null values\n  const hasNullValues = grid.some(row => row.includes(null));\n\n  // Create sentinel value for empty wells (below the data range)\n  // This allows us to show emptyWellColor for null cells\n  const sentinelValue = zMin - (zMax - zMin) * PLATEMAP_CONSTANTS.SENTINEL_RATIO - 1;\n\n  // Replace null values with sentinel for Plotly rendering\n  const displayGrid = useMemo(\n    () =>\n      hasNullValues\n        ? grid.map((row) => row.map((val) => (val === null ? sentinelValue : val)))\n        : grid,\n    [hasNullValues, grid, sentinelValue],\n  );\n\n  // Extend colorscale to include emptyWellColor at the bottom for null values\n  const effectiveColorScale = useMemo(() => {\n    if (!hasNullValues) return colorScale;\n\n    // Convert colorScale to array format if it's a named string scale\n    let arrayColorScale: Array<[number, string]>;\n    if (typeof colorScale === \"string\") {\n      // Look up the named scale in our mapping\n      const namedScale = NAMED_COLORSCALES[colorScale];\n      if (namedScale) {\n        arrayColorScale = namedScale;\n      } else {\n        // Unknown named scale - can't extend it, return as-is\n        // This is a fallback for custom/unknown Plotly scale names\n        return colorScale;\n      }\n    } else {\n      arrayColorScale = colorScale;\n    }\n\n    // For array colorscales, prepend emptyWellColor at position 0\n    // and shift all other positions proportionally\n    const totalRange = zMax - sentinelValue;\n    const dataStartRatio = (zMin - sentinelValue) / totalRange;\n\n    // Create new colorscale with emptyWellColor at the bottom\n    const extendedScale: Array<[number, string]> = [\n      [0, emptyWellColor],\n      [dataStartRatio * PLATEMAP_CONSTANTS.COLOR_SCALE_THRESHOLD, emptyWellColor], // Small band for empty wells\n    ];\n\n    // Remap original colorscale positions to the remaining range\n    for (const [pos, color] of arrayColorScale) {\n      const newPos = dataStartRatio + pos * (1 - dataStartRatio);\n      extendedScale.push([newPos, color]);\n    }\n\n    return extendedScale;\n  }, [colorScale, hasNullValues, zMin, zMax, sentinelValue, emptyWellColor]);\n\n  // Effective zMin includes sentinel value if we have nulls\n  const effectiveZMin = hasNullValues ? sentinelValue : zMin;\n\n  // Create a lookup map for layer configs to get valueUnit for each layer\n  const layerConfigMap = useMemo(() => {\n    const map = new Map<string, LayerConfig>();\n    if (effectiveLayers) {\n      for (const layer of effectiveLayers) {\n        map.set(layer.id, layer);\n      }\n    }\n    return map;\n  }, [effectiveLayers]);\n\n  // Build custom hover text matrix - shows ALL values regardless of active layer.\n  // Memoized so its identity is stable across tooltip-driven re-renders.\n  const hoverText = useMemo<string[][]>(\n    () =>\n      grid.map((row, rowIdx) =>\n        row.map((val, colIdx) => {\n          const wellId = `${rowLabels[rowIdx]}${colLabels[colIdx]}`;\n          const wellIdUpper = String(wellId).toUpperCase();\n          return buildWellHoverText({\n            wellId,\n            value: val,\n            allValues: allValuesMap.get(wellIdUpper),\n            tooltipExtra: tooltipDataMap.get(wellIdUpper),\n            activeLayerId: activeLayer?.id,\n            layerConfigMap,\n            precision,\n            valueUnit,\n          });\n        })\n      ),\n    [grid, rowLabels, colLabels, allValuesMap, tooltipDataMap, activeLayer?.id, layerConfigMap, precision, valueUnit],\n  );\n\n  // Build categorical data for categorical mode\n  const { categoricalGrid, categoricalColorScale, uniqueTypes, catMax } = useMemo(() => {\n    if (visualizationMode !== \"categorical\") {\n      return { categoricalGrid: null, categoricalColorScale: null, uniqueTypes: [], catMax: 0 };\n    }\n\n    // Collect unique categories from the categoriesGrid\n    const typesSet = new Set<string>();\n    let hasNullCategory = false;\n    for (const row of categoriesGrid) {\n      for (const category of row) {\n        if (category) {\n          typesSet.add(category);\n        } else {\n          hasNullCategory = true;\n        }\n      }\n    }\n    // Only include \"empty\" if there are actual null wells\n    if (hasNullCategory) {\n      typesSet.add(\"empty\");\n    }\n    const types = [...typesSet].sort();\n\n    // Create numeric grid where each category maps to an index\n    const typeToIndex = new Map<string, number>();\n    types.forEach((type, idx) => typeToIndex.set(type, idx));\n\n    const catGrid: number[][] = categoriesGrid.map((row) =>\n      row.map((category) => {\n        if (category === null) {\n          return typeToIndex.get(\"empty\") ?? 0;\n        }\n        return typeToIndex.get(category) ?? typeToIndex.get(\"empty\") ?? 0;\n      })\n    );\n\n    // Build discrete colorscale for categories\n    // The grid contains integer indices 0, 1, 2, ... (numTypes - 1)\n    // With cmin=0 and cmax=numTypes-1, Plotly maps:\n    //   index 0 -> normalized 0.0\n    //   index (numTypes-1) -> normalized 1.0\n    // We need each index to map to a distinct color band\n    const numTypes = types.length;\n    const catColorScale: Array<[number, string]> = [];\n\n    if (numTypes === 1) {\n      // Single type: entire range is one color\n      const color = categoryColors[types[0]] || emptyWellColor;\n      catColorScale.push([0, color]);\n      catColorScale.push([1, color]);\n    } else {\n      // Multiple types: create bands for each index\n      // Index i maps to normalized value i / (numTypes - 1)\n      types.forEach((type, idx) => {\n        const color = categoryColors[type] || emptyWellColor;\n        const normalizedPos = idx / (numTypes - 1);\n        // Create a small band around each position\n        const bandHalf = 0.5 / (numTypes - 1);\n        const start = Math.max(0, normalizedPos - bandHalf);\n        const end = Math.min(1, normalizedPos + bandHalf - PLATEMAP_CONSTANTS.COLOR_SCALE_EPSILON);\n        catColorScale.push([start, color]);\n        catColorScale.push([end, color]);\n      });\n    }\n\n    // cmax should be numTypes - 1 to match the index range\n    return { categoricalGrid: catGrid, categoricalColorScale: catColorScale, uniqueTypes: types, catMax: numTypes - 1 };\n  }, [visualizationMode, categoriesGrid, categoryColors, emptyWellColor]);\n\n  // Build Plotly shapes for highlighted regions\n  const regionShapes = useMemo(() => {\n    if (!regions || regions.length === 0) {\n      return [];\n    }\n\n    const shapes: Array<Partial<Plotly.Shape>> = [];\n\n    for (const region of regions) {\n      const bounds = parseRegionWells(region.wells, rowLabels, colLabels);\n      if (!bounds) continue;\n\n      // Plotly heatmap uses the actual label values for positioning.\n      // colLabels are 1-indexed (1, 2, 3, ...), so we need to convert from 0-indexed bounds.\n      // Each cell is centered on its label, so we offset by inset to cover the cell.\n      // For columns: bounds.minCol=0 means column label 1, so x0 = 1 - inset\n      // For rows: bounds.minRow=0 means row index 0, which is correct for y-axis\n      //\n      // Use 0.49 inset to place boundary just inside cell edge,\n      // avoiding line doubling when adjacent regions share a border\n      const inset = 0.49;\n      const x0 = (bounds.minCol + 1) - inset;\n      const x1 = (bounds.maxCol + 1) + inset;\n      const y0 = bounds.minRow - inset;\n      const y1 = bounds.maxRow + inset;\n\n      shapes.push({\n        type: \"rect\",\n        xref: \"x\",\n        yref: \"y\",\n        x0,\n        x1,\n        y0,\n        y1,\n        line: {\n          color: region.borderColor || COLORS.textDark,\n          width: region.borderWidth ?? 2,\n        },\n        fillcolor: region.fillColor || \"transparent\",\n        layer: \"above\",\n      });\n    }\n\n    return shapes;\n  }, [regions, rowLabels, colLabels]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    // Determine which grid and colorscale to use based on mode\n    const isCategorical = visualizationMode === \"categorical\";\n    const plotZ = isCategorical && categoricalGrid ? categoricalGrid : displayGrid;\n    const plotColorScale = isCategorical && categoricalColorScale ? categoricalColorScale : effectiveColorScale;\n    const plotZMin = isCategorical ? 0 : effectiveZMin;\n    const plotZMax = isCategorical ? (catMax || 1) : zMax;\n    const plotShowScale = isCategorical ? false : showColorBar;\n\n    // Flatten 2D grid data into arrays for scatter plot\n    const { xData, yData, colorData, textData } = flattenGridData(\n      plotZ,\n      rowLabels,\n      hoverText,\n      rows,\n      columns,\n      plotZMin\n    );\n\n    // Create scatter plot with markers\n    const plotData: Plotly.Data[] = [\n      {\n        x: xData,\n        y: yData,\n        mode: \"markers\" as const,\n        type: \"scatter\" as const,\n        marker: {\n          symbol: markerShape,\n          size: markerSize,\n          color: colorData,\n          colorscale: plotColorScale,\n          cmin: plotZMin,\n          cmax: plotZMax,\n          showscale: plotShowScale,\n          colorbar: buildColorbarConfig(\n            legendConfig?.position ?? \"right\",\n            valueUnit,\n            legendConfig?.title\n          ),\n          line: {\n            color: theme.gridColor,\n            width: 1,\n          },\n        },\n        hoverinfo: \"none\" as const,\n        text: textData,\n      },\n    ];\n\n    const legendPosition = legendConfig?.position ?? \"right\";\n\n    const layout = {\n      autosize: false, // Prevent auto-sizing to maintain consistent layout\n      title: title\n        ? {\n            text: title,\n            font: {\n              family: CHART_FONT_FAMILY,\n              size: 20,\n              color: theme.textSecondary,\n            },\n            x: calculateTitleX(legendPosition),\n            xanchor: \"center\" as const,\n            y: 0.98,\n            yanchor: \"top\" as const,\n          }\n        : undefined,\n      width,\n      height,\n      margin: buildPlotMargins(legendPosition, !!title, !!yTitle),\n      xaxis: {\n        title: {\n          text: xTitle || \"\",\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n          },\n          standoff: 15,\n        },\n        side: \"top\" as const,\n        fixedrange: true,\n        dtick: 1,\n        range: [0.5, columns + 0.5], // Explicit range to prevent auto-padding\n        automargin: false, // Prevent auto margin adjustment\n        tickmode: \"array\" as const,\n        tickvals: Array.from({ length: columns }, (_, i) => i + 1),\n        ticktext: colLabels.map(String),\n        tickangle: 0, // Keep labels horizontal\n        tickfont: { size: columns > 24 ? 8 : PLATEMAP_CONSTANTS.FONT_SIZE_LARGE }, // Smaller font for high-density plates\n        // Adjust domain based on legend position to prevent colorbar overlap\n        domain: calculateAxisDomain(legendPosition),\n      },\n      yaxis: {\n        title: {\n          text: yTitle || \"\",\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n          },\n          standoff: 15,\n        },\n        fixedrange: true,\n        dtick: 1,\n        range: [rows + PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET, PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET], // Reversed range: high to low puts row A at top\n        automargin: false, // Prevent auto margin adjustment\n        tickmode: \"array\" as const,\n        tickvals: Array.from({ length: rows }, (_, i) => i),\n        ticktext: rowLabels.map(String),\n        tickfont: { size: rows > 16 ? 8 : PLATEMAP_CONSTANTS.FONT_SIZE_LARGE }, // Smaller font for high-density plates\n      },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: CHART_FONT_FAMILY,\n        color: theme.textSecondary,\n      },\n      shapes: regionShapes,\n    };\n\n    const config = {\n      responsive: true,\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      const currentRef = plotRef.current;\n      plotly.newPlot(currentRef, plotData, layout, config);\n      bindTooltip(currentRef);\n\n      // Always attach click handler - check onWellClickRef.current inside callback\n      // This ensures handler is registered even if onWellClick is provided after initial render\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\"plotly_click\", (eventData: Plotly.PlotMouseEvent) => {\n        if (!onWellClickRef.current) return;\n        const point = eventData.points[0];\n        if (point) {\n          // Cast labels to handle union type\n          const rowLabelsArr = rowLabels as (string | number)[];\n          const colLabelsArr = colLabels as (string | number)[];\n          const rowIdx = rowLabelsArr.indexOf(point.y as string | number);\n          const colIdx = colLabelsArr.indexOf(point.x as string | number);\n          if (rowIdx >= 0 && colIdx >= 0) {\n            const wellId = `${rowLabelsArr[rowIdx]}${colLabelsArr[colIdx]}`;\n            const wellIdUpper = String(wellId).toUpperCase();\n            // Get all values and tooltipData for this well\n            const allValues = allValuesMap.get(wellIdUpper);\n            const tooltipData = tooltipDataMap.get(wellIdUpper);\n            const wellData: WellData = {\n              wellId,\n              values: allValues,\n              tooltipData,\n            };\n            onWellClickRef.current?.(wellData);\n          }\n        }\n      });\n\n      plotElement = currentRef;\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n      }\n    };\n  }, [\n    displayGrid,\n    colLabels,\n    rowLabels,\n    effectiveColorScale,\n    showColorBar,\n    effectiveZMin,\n    zMax,\n    valueUnit,\n    title,\n    xTitle,\n    yTitle,\n    width,\n    height,\n    hoverText,\n    precision,\n    tooltipDataMap,\n    allValuesMap,\n    grid,\n    visualizationMode,\n    categoricalGrid,\n    categoricalColorScale,\n    uniqueTypes.length,\n    catMax,\n    regionShapes,\n    rows,\n    columns,\n    legendConfig,\n    markerShape,\n    markerSize,\n    theme,\n    bindTooltip,\n  ]);\n\n  // Render layer selector tabs\n  const renderLayerSelector = () => {\n    if (!effectiveLayers || effectiveLayers.length <= 1) {\n      return null;\n    }\n\n    return (\n      <div className=\"platemap-layer-selector\">\n        {effectiveLayers.map((layer) => {\n          const isActive = activeLayer?.id === layer.id;\n          return (\n            <Button\n              key={layer.id}\n              variant={isActive ? \"default\" : \"outline\"}\n              size=\"sm\"\n              onClick={() => {\n                setActiveLayerId(layer.id);\n                onLayerChange?.(layer.id);\n              }}\n            >\n              {layer.name}\n            </Button>\n          );\n        })}\n      </div>\n    );\n  };\n\n  // Legend configuration with defaults\n  const legendPosition = legendConfig?.position ?? \"right\";\n  const legendFontSize = legendConfig?.fontSize ?? 12;\n  const legendItemSpacing = legendConfig?.itemSpacing ?? 4;\n  const legendSwatchSize = legendConfig?.swatchSize ?? 16;\n  const legendTitle = legendConfig?.title;\n\n  // Fixed width for categorical legend to prevent layout shift\n  const legendWidth = 120;\n\n  // Determine if legend is horizontal (top/bottom) or vertical (left/right)\n  const isHorizontalLegend = legendPosition === \"top\" || legendPosition === \"bottom\";\n\n  // Render legend (categorical types and/or regions)\n  const renderLegend = () => {\n    const hasCategoricalItems = visualizationMode === \"categorical\" && uniqueTypes.length > 0;\n    const hasRegions = regions && regions.length > 0;\n\n    if (!showLegend || (!hasCategoricalItems && !hasRegions)) {\n      // Return empty placeholder to maintain consistent width (only for vertical legends)\n      if (!isHorizontalLegend) {\n        return <div className=\"platemap-legend-placeholder\" style={{ width: legendWidth }} />;\n      }\n      return null;\n    }\n\n    // Build legend class names\n    const legendClassNames = [\"platemap-legend\"];\n    if (isHorizontalLegend) {\n      legendClassNames.push(\"platemap-legend--horizontal\");\n    } else if (legendPosition === \"left\") {\n      legendClassNames.push(\"platemap-legend--left\");\n    } else if (legendPosition === \"right\") {\n      legendClassNames.push(\"platemap-legend--right\");\n    }\n\n    // Dynamic styles that depend on props\n    const legendStyle: React.CSSProperties = {\n      gap: `${legendItemSpacing}px`,\n      width: isHorizontalLegend ? undefined : legendWidth,\n    };\n\n    return (\n      <div className={legendClassNames.join(\" \")} style={legendStyle}>\n        {legendTitle && (\n          <div\n            className={`platemap-legend__title${isHorizontalLegend ? \" platemap-legend__title--horizontal\" : \"\"}`}\n            style={{ fontSize: `${legendFontSize}px` }}\n          >\n            {legendTitle}\n          </div>\n        )}\n        {/* Categorical type items */}\n        {hasCategoricalItems &&\n          uniqueTypes.map((type) => (\n            <div key={type} className=\"platemap-legend__item\">\n              <div\n                className=\"platemap-legend__swatch\"\n                style={{\n                  width: `${legendSwatchSize}px`,\n                  height: `${legendSwatchSize}px`,\n                  backgroundColor: categoryColors[type] || emptyWellColor,\n                }}\n              />\n              <span\n                className=\"platemap-legend__label platemap-legend__label--capitalize\"\n                style={{ fontSize: `${legendFontSize}px` }}\n              >\n                {type}\n              </span>\n            </div>\n          ))}\n        {/* Region items */}\n        {hasRegions &&\n          regions.map((region) => (\n            <div key={region.id} className=\"platemap-legend__item\">\n              <div\n                className=\"platemap-legend__swatch platemap-legend__swatch--region\"\n                style={{\n                  width: `${legendSwatchSize}px`,\n                  height: `${legendSwatchSize}px`,\n                  backgroundColor: region.fillColor || \"transparent\",\n                  border: `${region.borderWidth || 2}px solid ${region.borderColor || COLORS.regionBorder}`,\n                }}\n              />\n              <span\n                className=\"platemap-legend__label\"\n                style={{ fontSize: `${legendFontSize}px` }}\n              >\n                {region.name}\n              </span>\n            </div>\n          ))}\n      </div>\n    );\n  };\n\n  // Build the plot content based on legend position\n  const plotContent = (\n    <div className=\"relative\">\n      <div ref={plotRef} className=\"platemap-plot\" style={{ width, height }} />\n      {tooltipElement}\n    </div>\n  );\n  const legendContent = renderLegend();\n\n  const renderPlotWithLegend = () => {\n    switch (legendPosition) {\n      case \"left\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--vertical\">\n            {legendContent}\n            {plotContent}\n          </div>\n        );\n      case \"top\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--horizontal\">\n            {legendContent}\n            {plotContent}\n          </div>\n        );\n      case \"bottom\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--horizontal\">\n            {plotContent}\n            {legendContent}\n          </div>\n        );\n      case \"right\":\n      default:\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--vertical\">\n            {plotContent}\n            {legendContent}\n          </div>\n        );\n    }\n  };\n\n  return (\n    <div className=\"platemap-container\" style={{ width: isHorizontalLegend ? undefined : width }}>\n      {renderLayerSelector()}\n      {renderPlotWithLegend()}\n    </div>\n  );\n};\n\nexport { PlateMap };"],"names":["PlateMap","data","layerConfigs","initialLayerId","onLayerChange","plateFormat","PLATE_FORMAT_96","customRows","customColumns","propVisualizationMode","customCategoryColors","regions","title","xTitle","yTitle","customXLabels","customYLabels","propColorScale","DEFAULT_COLOR_SCALE","propValueMin","propValueMax","emptyWellColor","COLORS","showColorBar","showLegend","legendConfig","width","height","precision","markerShape","onWellClick","plotRef","useRef","theme","usePlotlyTheme","onWellClickRef","activeLayerId","setActiveLayerId","useState","rows","columns","PLATE_FORMAT_CUSTOM","config","PLATE_CONFIGS","markerSize","useMemo","calculateMarkerSize","bindTooltip","tooltipElement","useChartTooltip","effectiveLayers","wellDataArray","hasMultiValueWells","extractLayers","activeLayer","l","visualizationMode","colorScale","valueMin","valueMax","valueUnit","categoryColors","DEFAULT_CATEGORY_COLORS","activeLayerId_","grid","categoriesGrid","allValuesMap","tooltipDataMap","resultGrid","resultCategories","resultAllValues","resultTooltipData","result","wellDataToGrid","PLATEMAP_CONSTANTS","rowLabels","generateRowLabels","colLabels","generateColumnLabels","range","calculateValueRange","zMin","zMax","hasNullValues","row","sentinelValue","displayGrid","val","effectiveColorScale","arrayColorScale","namedScale","NAMED_COLORSCALES","totalRange","dataStartRatio","extendedScale","pos","color","newPos","effectiveZMin","layerConfigMap","map","layer","hoverText","rowIdx","colIdx","wellId","wellIdUpper","buildWellHoverText","categoricalGrid","categoricalColorScale","uniqueTypes","catMax","typesSet","hasNullCategory","category","types","typeToIndex","type","idx","catGrid","numTypes","catColorScale","normalizedPos","bandHalf","start","end","regionShapes","shapes","region","bounds","parseRegionWells","inset","x0","x1","y0","y1","useEffect","isCategorical","plotZ","plotColorScale","plotZMin","plotZMax","plotShowScale","xData","yData","colorData","textData","flattenGridData","plotData","buildColorbarConfig","legendPosition","layout","CHART_FONT_FAMILY","calculateTitleX","buildPlotMargins","_","i","calculateAxisDomain","cancelled","plotElement","loadPlotly","plotly","currentRef","eventData","point","rowLabelsArr","colLabelsArr","allValues","tooltipData","wellData","getLoadedPlotly","renderLayerSelector","isActive","jsx","Button","legendFontSize","legendItemSpacing","legendSwatchSize","legendTitle","legendWidth","isHorizontalLegend","renderLegend","hasCategoricalItems","hasRegions","legendClassNames","legendStyle","jsxs","plotContent","legendContent","renderPlotWithLegend"],"mappings":";;;;;;;;;;;AAwEA,MAAMA,KAAoC,CAAC;AAAA,EACzC,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC,KAAcC;AAAA,EACd,MAAMC;AAAA,EACN,SAASC;AAAA,EACT,mBAAmBC,KAAwB;AAAA,EAC3C,gBAAgBC;AAAA,EAChB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAASC;AAAA,EACT,SAASC;AAAA,EACT,YAAYC,KAAiBC;AAAA,EAC7B,UAAUC;AAAA,EACV,UAAUC;AAAA,EACV,gBAAAC,IAAiBC,GAAO;AAAA,EACxB,cAAAC,KAAe;AAAA,EACf,YAAAC,KAAa;AAAA,EACb,cAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAM;AACJ,QAAMC,IAAUC,GAAuB,IAAI,GACrCC,IAAQC,GAAA,GACRC,IAAiBH,GAAOF,EAAW;AACzC,EAAAK,EAAe,UAAUL;AAGzB,QAAM,CAACM,GAAeC,EAAgB,IAAIC,GAA6BnC,EAAc;AAGrF,MAAIoC,GACAC;AAEJ,MAAInC,OAAgBoC;AAClB,IAAAF,IAAOhC,MAAc,GACrBiC,IAAUhC,MAAiB;AAAA,OACtB;AACL,UAAMkC,IAASC,GAActC,EAAW;AACxC,IAAAkC,IAAOG,EAAO,MACdF,IAAUE,EAAO;AAAA,EACnB;AAIA,QAAME,KAAaC;AAAA,IACjB,MAAMC,GAAoBpB,GAAOC,GAAQY,GAAMC,GAASX,GAAa,CAAC,CAACjB,GAAO,CAAC,CAACE,CAAM;AAAA,IACtF,CAACY,GAAOC,GAAQY,GAAMC,GAASX,GAAajB,GAAOE,CAAM;AAAA,EAAA,GAErD,EAAE,aAAAiC,IAAa,gBAAAC,GAAA,IAAmBC,GAAgB;AAAA,IACtD,eAAe,KAAK,KAAKL,KAAa,CAAC;AAAA,EAAA,CACxC,GAGKM,IAAkBL,EAAQ,MAA4B;AAE1D,QAAI,MAAM,QAAQ5C,CAAI,KAAKA,EAAK,SAAS,KAAK,YAAaA,EAAK,CAAC,GAAgB;AAC/E,YAAMkD,IAAgBlD;AACtB,UAAImD,GAAmBD,CAAa;AAClC,eAAOE,GAAcF,GAAejD,EAAY;AAAA,IAEpD;AAEA,WAAO;AAAA,EACT,GAAG,CAACD,GAAMC,EAAY,CAAC,GAGjBoD,IAAcT,EAAQ,MACtB,CAACK,KAAmBA,EAAgB,WAAW,IAAU,OACzDd,IACKc,EAAgB,KAAK,CAACK,MAAMA,EAAE,OAAOnB,CAAa,KAAKc,EAAgB,CAAC,IAE1EA,EAAgB,CAAC,GACvB,CAACA,GAAiBd,CAAa,CAAC,GAI7BoB,IAAoBF,GAAa,qBAAqB7C,IACtDgD,IAAaH,GAAa,cAAcrC,IACxCyC,KAAWJ,GAAa,YAAYnC,IACpCwC,KAAWL,GAAa,YAAYlC,IAEpCwC,IAAYN,GAAa,YAAY,IAAIA,EAAY,SAAS,KAAK,IAGnEO,IAAiBhB;AAAA,IACrB,OAAO,EAAE,GAAGiB,IAAyB,GAAGpD,IAAsB,GAAG4C,GAAa;IAC9E,CAAC5C,IAAsB4C,GAAa,cAAc;AAAA,EAAA,GAK9CS,KAAiBT,GAAa,IAC9B,EAAE,MAAAU,GAAM,gBAAAC,IAAgB,cAAAC,GAAc,gBAAAC,EAAA,IAAmBtB,EAAQ,MAAM;AAC3E,QAAIuB,GACAC,IAAwC,MAAM;AAAA,MAAK,EAAE,QAAQ9B,EAAA;AAAA,MAAQ,MACvE,MAAMC,CAAO,EAAE,KAAK,IAAI;AAAA,IAAA,GAEtB8B,wBAAsB,IAAA,GACtBC,wBAAwB,IAAA;AAE5B,QAAI,MAAM,QAAQtE,CAAI,KAAKA,EAAK,SAAS,GAAG;AAE1C,YAAMuE,IAASC,GAAexE,GAAMsC,GAAMC,GAASuB,EAAc;AACjE,MAAAK,IAAaI,EAAO,MACpBH,IAAmBG,EAAO,YAC1BF,IAAkBE,EAAO,WACzBD,IAAoBC,EAAO;AAAA,IAC7B;AAEE,MAAAJ,IAAa,MAAM;AAAA,QAAK,EAAE,QAAQ7B,EAAA;AAAA,QAAQ,MACxC,MAAM,KAAK,EAAE,QAAQC,KAAW,MAAM,KAAK,WAAWkC,EAAmB,gBAAgB;AAAA,MAAA;AAI7F,WAAO,EAAE,MAAMN,GAAY,gBAAgBC,GAAkB,cAAcC,GAAiB,gBAAgBC,EAAA;AAAA,EAC9G,GAAG,CAACtE,GAAMsC,GAAMC,GAASuB,EAAc,CAAC,GAKlCY,IAAY9B;AAAA,IAChB,MAAM7B,MAAiB4D,GAAkBrC,CAAI;AAAA,IAC7C,CAACvB,IAAeuB,CAAI;AAAA,EAAA,GAEhBsC,IAAYhC;AAAA,IAChB,MAAM9B,MAAiB+D,GAAqBtC,CAAO;AAAA,IACnD,CAACzB,IAAeyB,CAAO;AAAA,EAAA,GAInBuC,KAAQC,GAAoBhB,CAAI,GAChCiB,IAAOvB,MAAYqB,GAAM,KACzBG,IAAOvB,MAAYoB,GAAM,KAGzBI,IAAgBnB,EAAK,KAAK,OAAOoB,EAAI,SAAS,IAAI,CAAC,GAInDC,IAAgBJ,KAAQC,IAAOD,KAAQP,EAAmB,iBAAiB,GAG3EY,KAAczC;AAAA,IAClB,MACEsC,IACInB,EAAK,IAAI,CAACoB,MAAQA,EAAI,IAAI,CAACG,MAASA,MAAQ,OAAOF,IAAgBE,CAAI,CAAC,IACxEvB;AAAA,IACN,CAACmB,GAAenB,GAAMqB,CAAa;AAAA,EAAA,GAI/BG,KAAsB3C,EAAQ,MAAM;AACxC,QAAI,CAACsC,EAAe,QAAO1B;AAG3B,QAAIgC;AACJ,QAAI,OAAOhC,KAAe,UAAU;AAElC,YAAMiC,IAAaC,GAAkBlC,CAAU;AAC/C,UAAIiC;AACF,QAAAD,IAAkBC;AAAA;AAIlB,eAAOjC;AAAA,IAEX;AACE,MAAAgC,IAAkBhC;AAKpB,UAAMmC,IAAaV,IAAOG,GACpBQ,KAAkBZ,IAAOI,KAAiBO,GAG1CE,IAAyC;AAAA,MAC7C,CAAC,GAAGzE,CAAc;AAAA,MAClB,CAACwE,IAAiBnB,EAAmB,uBAAuBrD,CAAc;AAAA;AAAA,IAAA;AAI5E,eAAW,CAAC0E,GAAKC,CAAK,KAAKP,GAAiB;AAC1C,YAAMQ,IAASJ,IAAiBE,KAAO,IAAIF;AAC3C,MAAAC,EAAc,KAAK,CAACG,GAAQD,CAAK,CAAC;AAAA,IACpC;AAEA,WAAOF;AAAA,EACT,GAAG,CAACrC,GAAY0B,GAAeF,GAAMC,GAAMG,GAAehE,CAAc,CAAC,GAGnE6E,KAAgBf,IAAgBE,IAAgBJ,GAGhDkB,KAAiBtD,EAAQ,MAAM;AACnC,UAAMuD,wBAAU,IAAA;AAChB,QAAIlD;AACF,iBAAWmD,KAASnD;AAClB,QAAAkD,EAAI,IAAIC,EAAM,IAAIA,CAAK;AAG3B,WAAOD;AAAA,EACT,GAAG,CAAClD,CAAe,CAAC,GAIdoD,KAAYzD;AAAA,IAChB,MACEmB,EAAK;AAAA,MAAI,CAACoB,GAAKmB,MACbnB,EAAI,IAAI,CAACG,GAAKiB,MAAW;AACvB,cAAMC,IAAS,GAAG9B,EAAU4B,CAAM,CAAC,GAAG1B,EAAU2B,CAAM,CAAC,IACjDE,IAAc,OAAOD,CAAM,EAAE,YAAA;AACnC,eAAOE,GAAmB;AAAA,UACxB,QAAAF;AAAA,UACA,OAAOlB;AAAA,UACP,WAAWrB,EAAa,IAAIwC,CAAW;AAAA,UACvC,cAAcvC,EAAe,IAAIuC,CAAW;AAAA,UAC5C,eAAepD,GAAa;AAAA,UAC5B,gBAAA6C;AAAA,UACA,WAAAvE;AAAA,UACA,WAAAgC;AAAA,QAAA,CACD;AAAA,MACH,CAAC;AAAA,IAAA;AAAA,IAEL,CAACI,GAAMW,GAAWE,GAAWX,GAAcC,GAAgBb,GAAa,IAAI6C,IAAgBvE,GAAWgC,CAAS;AAAA,EAAA,GAI5G,EAAE,iBAAAgD,IAAiB,uBAAAC,IAAuB,aAAAC,IAAa,QAAAC,GAAA,IAAWlE,EAAQ,MAAM;AACpF,QAAIW,MAAsB;AACxB,aAAO,EAAE,iBAAiB,MAAM,uBAAuB,MAAM,aAAa,CAAA,GAAI,QAAQ,EAAA;AAIxF,UAAMwD,wBAAe,IAAA;AACrB,QAAIC,IAAkB;AACtB,eAAW7B,KAAOnB;AAChB,iBAAWiD,KAAY9B;AACrB,QAAI8B,IACFF,EAAS,IAAIE,CAAQ,IAErBD,IAAkB;AAKxB,IAAIA,KACFD,EAAS,IAAI,OAAO;AAEtB,UAAMG,IAAQ,CAAC,GAAGH,CAAQ,EAAE,KAAA,GAGtBI,wBAAkB,IAAA;AACxB,IAAAD,EAAM,QAAQ,CAACE,GAAMC,MAAQF,EAAY,IAAIC,GAAMC,CAAG,CAAC;AAEvD,UAAMC,IAAsBtD,GAAe;AAAA,MAAI,CAACmB,MAC9CA,EAAI,IAAI,CAAC8B,MACHA,MAAa,OACRE,EAAY,IAAI,OAAO,KAAK,IAE9BA,EAAY,IAAIF,CAAQ,KAAKE,EAAY,IAAI,OAAO,KAAK,CACjE;AAAA,IAAA,GASGI,IAAWL,EAAM,QACjBM,IAAyC,CAAA;AAE/C,QAAID,MAAa,GAAG;AAElB,YAAMxB,IAAQnC,EAAesD,EAAM,CAAC,CAAC,KAAK9F;AAC1C,MAAAoG,EAAc,KAAK,CAAC,GAAGzB,CAAK,CAAC,GAC7ByB,EAAc,KAAK,CAAC,GAAGzB,CAAK,CAAC;AAAA,IAC/B;AAGE,MAAAmB,EAAM,QAAQ,CAACE,GAAMC,MAAQ;AAC3B,cAAMtB,IAAQnC,EAAewD,CAAI,KAAKhG,GAChCqG,IAAgBJ,KAAOE,IAAW,IAElCG,IAAW,OAAOH,IAAW,IAC7BI,KAAQ,KAAK,IAAI,GAAGF,IAAgBC,CAAQ,GAC5CE,KAAM,KAAK,IAAI,GAAGH,IAAgBC,IAAWjD,EAAmB,mBAAmB;AACzF,QAAA+C,EAAc,KAAK,CAACG,IAAO5B,CAAK,CAAC,GACjCyB,EAAc,KAAK,CAACI,IAAK7B,CAAK,CAAC;AAAA,MACjC,CAAC;AAIH,WAAO,EAAE,iBAAiBuB,GAAS,uBAAuBE,GAAe,aAAaN,GAAO,QAAQK,IAAW,EAAA;AAAA,EAClH,GAAG,CAAChE,GAAmBS,IAAgBJ,GAAgBxC,CAAc,CAAC,GAGhEyG,KAAejF,EAAQ,MAAM;AACjC,QAAI,CAAClC,KAAWA,EAAQ,WAAW;AACjC,aAAO,CAAA;AAGT,UAAMoH,IAAuC,CAAA;AAE7C,eAAWC,KAAUrH,GAAS;AAC5B,YAAMsH,IAASC,GAAiBF,EAAO,OAAOrD,GAAWE,CAAS;AAClE,UAAI,CAACoD,EAAQ;AAUb,YAAME,IAAQ,MACRC,IAAMH,EAAO,SAAS,IAAKE,GAC3BE,IAAMJ,EAAO,SAAS,IAAKE,GAC3BG,IAAKL,EAAO,SAASE,GACrBI,IAAKN,EAAO,SAASE;AAE3B,MAAAJ,EAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAAK;AAAA,QACA,IAAAC;AAAA,QACA,IAAAC;AAAA,QACA,IAAAC;AAAA,QACA,MAAM;AAAA,UACJ,OAAOP,EAAO,eAAe1G,GAAO;AAAA,UACpC,OAAO0G,EAAO,eAAe;AAAA,QAAA;AAAA,QAE/B,WAAWA,EAAO,aAAa;AAAA,QAC/B,OAAO;AAAA,MAAA,CACR;AAAA,IACH;AAEA,WAAOD;AAAA,EACT,GAAG,CAACpH,GAASgE,GAAWE,CAAS,CAAC;AAElC,EAAA2D,GAAU,MAAM;AACd,QAAI,CAACzG,EAAQ,QAAS;AAGtB,UAAM0G,IAAgBjF,MAAsB,eACtCkF,IAAQD,KAAiB7B,KAAkBA,KAAkBtB,IAC7DqD,IAAiBF,KAAiB5B,KAAwBA,KAAwBrB,IAClFoD,IAAWH,IAAgB,IAAIvC,IAC/B2C,IAAWJ,IAAiB1B,MAAU,IAAK7B,GAC3C4D,IAAgBL,IAAgB,KAAQlH,IAGxC,EAAE,OAAAwH,GAAO,OAAAC,GAAO,WAAAC,GAAW,UAAAC,MAAaC;AAAA,MAC5CT;AAAA,MACA/D;AAAA,MACA2B;AAAA,MACA/D;AAAA,MACAC;AAAA,MACAoG;AAAA,IAAA,GAIIQ,IAA0B;AAAA,MAC9B;AAAA,QACE,GAAGL;AAAA,QACH,GAAGC;AAAA,QACH,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ;AAAA,UACN,QAAQnH;AAAA,UACR,MAAMe;AAAA,UACN,OAAOqG;AAAA,UACP,YAAYN;AAAA,UACZ,MAAMC;AAAA,UACN,MAAMC;AAAA,UACN,WAAWC;AAAA,UACX,UAAUO;AAAA,YACR5H,GAAc,YAAY;AAAA,YAC1BmC;AAAA,YACAnC,GAAc;AAAA,UAAA;AAAA,UAEhB,MAAM;AAAA,YACJ,OAAOQ,EAAM;AAAA,YACb,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAEF,WAAW;AAAA,QACX,MAAMiH;AAAA,MAAA;AAAA,IACR,GAGII,IAAiB7H,GAAc,YAAY,SAE3C8H,KAAS;AAAA,MACb,UAAU;AAAA;AAAA,MACV,OAAO3I,IACH;AAAA,QACE,MAAMA;AAAA,QACN,MAAM;AAAA,UACJ,QAAQ4I;AAAA,UACR,MAAM;AAAA,UACN,OAAOvH,EAAM;AAAA,QAAA;AAAA,QAEf,GAAGwH,GAAgBH,CAAc;AAAA,QACjC,SAAS;AAAA,QACT,GAAG;AAAA,QACH,SAAS;AAAA,MAAA,IAEX;AAAA,MACJ,OAAA5H;AAAA,MACA,QAAAC;AAAA,MACA,QAAQ+H,GAAiBJ,GAAgB,CAAC,CAAC1I,GAAO,CAAC,CAACE,CAAM;AAAA,MAC1D,OAAO;AAAA,QACL,OAAO;AAAA,UACL,MAAMD,MAAU;AAAA,UAChB,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,OAAOoB,EAAM;AAAA,YACb,QAAQuH;AAAA,UAAA;AAAA,UAEV,UAAU;AAAA,QAAA;AAAA,QAEZ,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,OAAO,CAAC,KAAKhH,IAAU,GAAG;AAAA;AAAA,QAC1B,YAAY;AAAA;AAAA,QACZ,UAAU;AAAA,QACV,UAAU,MAAM,KAAK,EAAE,QAAQA,KAAW,CAACmH,IAAGC,MAAMA,IAAI,CAAC;AAAA,QACzD,UAAU/E,EAAU,IAAI,MAAM;AAAA,QAC9B,WAAW;AAAA;AAAA,QACX,UAAU,EAAE,MAAMrC,IAAU,KAAK,IAAIkC,EAAmB,gBAAA;AAAA;AAAA;AAAA,QAExD,QAAQmF,GAAoBP,CAAc;AAAA,MAAA;AAAA,MAE5C,OAAO;AAAA,QACL,OAAO;AAAA,UACL,MAAMxI,KAAU;AAAA,UAChB,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,OAAOmB,EAAM;AAAA,YACb,QAAQuH;AAAA,UAAA;AAAA,UAEV,UAAU;AAAA,QAAA;AAAA,QAEZ,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,OAAO,CAACjH,IAAOmC,EAAmB,qBAAqBA,EAAmB,mBAAmB;AAAA;AAAA,QAC7F,YAAY;AAAA;AAAA,QACZ,UAAU;AAAA,QACV,UAAU,MAAM,KAAK,EAAE,QAAQnC,KAAQ,CAACoH,IAAGC,MAAMA,CAAC;AAAA,QAClD,UAAUjF,EAAU,IAAI,MAAM;AAAA,QAC9B,UAAU,EAAE,MAAMpC,IAAO,KAAK,IAAImC,EAAmB,gBAAA;AAAA;AAAA,MAAgB;AAAA,MAEvE,eAAezC,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,MACpB,MAAM;AAAA,QACJ,QAAQuH;AAAA,QACR,OAAOvH,EAAM;AAAA,MAAA;AAAA,MAEf,QAAQ6F;AAAA,IAAA,GAGJpF,KAAS;AAAA,MACb,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,IAAA;AAKf,QAAIoH,KAAY,IACZC,KAAqC;AACzC,WAAKC,GAAA,EAAa,KAAK,CAACC,OAAW;AACjC,UAAIH,MAAa,CAAC/H,EAAQ,QAAS;AACnC,YAAMmI,IAAanI,EAAQ;AAC3B,MAAAkI,GAAO,QAAQC,GAAYd,GAAUG,IAAQ7G,EAAM,GACnDK,GAAYmH,CAAU,GAIrBA,EAAmD,GAAG,gBAAgB,CAACC,OAAqC;AAC3G,YAAI,CAAChI,EAAe,QAAS;AAC7B,cAAMiI,KAAQD,GAAU,OAAO,CAAC;AAChC,YAAIC,IAAO;AAET,gBAAMC,KAAe1F,GACf2F,KAAezF,GACf0B,KAAS8D,GAAa,QAAQD,GAAM,CAAoB,GACxD5D,KAAS8D,GAAa,QAAQF,GAAM,CAAoB;AAC9D,cAAI7D,MAAU,KAAKC,MAAU,GAAG;AAC9B,kBAAMC,KAAS,GAAG4D,GAAa9D,EAAM,CAAC,GAAG+D,GAAa9D,EAAM,CAAC,IACvDE,KAAc,OAAOD,EAAM,EAAE,YAAA,GAE7B8D,KAAYrG,EAAa,IAAIwC,EAAW,GACxC8D,KAAcrG,EAAe,IAAIuC,EAAW,GAC5C+D,KAAqB;AAAA,cACzB,QAAAhE;AAAA,cACA,QAAQ8D;AAAA,cACR,aAAAC;AAAA,YAAA;AAEF,YAAArI,EAAe,UAAUsI,EAAQ;AAAA,UACnC;AAAA,QACF;AAAA,MACF,CAAC,GAEDV,KAAcG;AAAA,IAChB,CAAC,GAEM,MAAM;AACX,MAAAJ,KAAY,IACRC,MACFW,GAAA,EAAkB,MAAMX,EAAW;AAAA,IAEvC;AAAA,EACF,GAAG;AAAA,IACDzE;AAAA,IACAT;AAAA,IACAF;AAAA,IACAa;AAAA,IACAjE;AAAA,IACA2E;AAAA,IACAhB;AAAA,IACAtB;AAAA,IACAhD;AAAA,IACAC;AAAA,IACAC;AAAA,IACAY;AAAA,IACAC;AAAA,IACA2E;AAAA,IACA1E;AAAA,IACAuC;AAAA,IACAD;AAAA,IACAF;AAAA,IACAR;AAAA,IACAoD;AAAA,IACAC;AAAA,IACAC,GAAY;AAAA,IACZC;AAAA,IACAe;AAAA,IACAvF;AAAA,IACAC;AAAA,IACAf;AAAA,IACAI;AAAA,IACAe;AAAA,IACAX;AAAA,IACAc;AAAA,EAAA,CACD;AAGD,QAAM4H,KAAsB,MACtB,CAACzH,KAAmBA,EAAgB,UAAU,IACzC,yBAIN,OAAA,EAAI,WAAU,2BACZ,UAAAA,EAAgB,IAAI,CAACmD,MAAU;AAC9B,UAAMuE,IAAWtH,GAAa,OAAO+C,EAAM;AAC3C,WACE,gBAAAwE;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,SAASF,IAAW,YAAY;AAAA,QAChC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,UAAAvI,GAAiBgE,EAAM,EAAE,GACzBjG,KAAgBiG,EAAM,EAAE;AAAA,QAC1B;AAAA,QAEC,UAAAA,EAAM;AAAA,MAAA;AAAA,MARFA,EAAM;AAAA,IAAA;AAAA,EAWjB,CAAC,EAAA,CACH,GAKEiD,IAAiB7H,GAAc,YAAY,SAC3CsJ,KAAiBtJ,GAAc,YAAY,IAC3CuJ,KAAoBvJ,GAAc,eAAe,GACjDwJ,IAAmBxJ,GAAc,cAAc,IAC/CyJ,KAAczJ,GAAc,OAG5B0J,KAAc,KAGdC,IAAqB9B,MAAmB,SAASA,MAAmB,UAGpE+B,KAAe,MAAM;AACzB,UAAMC,IAAsB9H,MAAsB,iBAAiBsD,GAAY,SAAS,GAClFyE,IAAa5K,KAAWA,EAAQ,SAAS;AAE/C,QAAI,CAACa,MAAe,CAAC8J,KAAuB,CAACC;AAE3C,aAAKH,IAGE,OAFE,gBAAAP,EAAC,SAAI,WAAU,+BAA8B,OAAO,EAAE,OAAOM,MAAe;AAMvF,UAAMK,IAAmB,CAAC,iBAAiB;AAC3C,IAAIJ,IACFI,EAAiB,KAAK,6BAA6B,IAC1ClC,MAAmB,SAC5BkC,EAAiB,KAAK,uBAAuB,IACpClC,MAAmB,WAC5BkC,EAAiB,KAAK,wBAAwB;AAIhD,UAAMC,IAAmC;AAAA,MACvC,KAAK,GAAGT,EAAiB;AAAA,MACzB,OAAOI,IAAqB,SAAYD;AAAA,IAAA;AAG1C,WACE,gBAAAO,EAAC,SAAI,WAAWF,EAAiB,KAAK,GAAG,GAAG,OAAOC,GAChD,UAAA;AAAA,MAAAP,MACC,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,yBAAyBO,IAAqB,wCAAwC,EAAE;AAAA,UACnG,OAAO,EAAE,UAAU,GAAGL,EAAc,KAAA;AAAA,UAEnC,UAAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAIJI,KACCxE,GAAY,IAAI,CAACO,MACf,gBAAAqE,EAAC,OAAA,EAAe,WAAU,yBACxB,UAAA;AAAA,QAAA,gBAAAb;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,GAAGI,CAAgB;AAAA,cAC1B,QAAQ,GAAGA,CAAgB;AAAA,cAC3B,iBAAiBpH,EAAewD,CAAI,KAAKhG;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,QAEF,gBAAAwJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,UAAU,GAAGE,EAAc,KAAA;AAAA,YAEnC,UAAA1D;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,GAdQA,CAeV,CACD;AAAA,MAEFkE,KACC5K,EAAQ,IAAI,CAACqH,MACX,gBAAA0D,EAAC,OAAA,EAAoB,WAAU,yBAC7B,UAAA;AAAA,QAAA,gBAAAb;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,GAAGI,CAAgB;AAAA,cAC1B,QAAQ,GAAGA,CAAgB;AAAA,cAC3B,iBAAiBjD,EAAO,aAAa;AAAA,cACrC,QAAQ,GAAGA,EAAO,eAAe,CAAC,YAAYA,EAAO,eAAe1G,GAAO,YAAY;AAAA,YAAA;AAAA,UACzF;AAAA,QAAA;AAAA,QAEF,gBAAAuJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,UAAU,GAAGE,EAAc,KAAA;AAAA,YAEnC,UAAA/C,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACV,EAAA,GAfQA,EAAO,EAgBjB,CACD;AAAA,IAAA,GACL;AAAA,EAEJ,GAGM2D,IACJ,gBAAAD,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA,gBAAAb,EAAC,OAAA,EAAI,KAAK9I,GAAS,WAAU,iBAAgB,OAAO,EAAE,OAAAL,GAAO,QAAAC,EAAA,EAAO,CAAG;AAAA,IACtEqB;AAAA,EAAA,GACH,GAEI4I,IAAgBP,GAAA,GAEhBQ,KAAuB,MAAM;AACjC,YAAQvC,GAAA;AAAA,MACN,KAAK;AACH,eACE,gBAAAoC,EAAC,OAAA,EAAI,WAAU,yDACZ,UAAA;AAAA,UAAAE;AAAA,UACAD;AAAA,QAAA,GACH;AAAA,MAEJ,KAAK;AACH,eACE,gBAAAD,EAAC,OAAA,EAAI,WAAU,2DACZ,UAAA;AAAA,UAAAE;AAAA,UACAD;AAAA,QAAA,GACH;AAAA,MAEJ,KAAK;AACH,eACE,gBAAAD,EAAC,OAAA,EAAI,WAAU,2DACZ,UAAA;AAAA,UAAAC;AAAA,UACAC;AAAA,QAAA,GACH;AAAA,MAGJ;AACE,eACE,gBAAAF,EAAC,OAAA,EAAI,WAAU,yDACZ,UAAA;AAAA,UAAAC;AAAA,UACAC;AAAA,QAAA,GACH;AAAA,IAAA;AAAA,EAGR;AAEA,SACE,gBAAAF,EAAC,OAAA,EAAI,WAAU,sBAAqB,OAAO,EAAE,OAAON,IAAqB,SAAY1J,EAAA,GAClF,UAAA;AAAA,IAAAiJ,GAAA;AAAA,IACAkB,GAAA;AAAA,EAAqB,GACxB;AAEJ;"}

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

@@ -0,0 +1,75 @@
+import { PLATE_FORMAT_96, PLATE_FORMAT_384, PLATE_FORMAT_1536 } from './types';
+/**
+ * Default category colors for well types in categorical visualization mode.
+ * Override these by passing custom colors via the `categoryColors` prop.
+ */
+export declare const DEFAULT_CATEGORY_COLORS: Record<string, string>;
+/**
+ * Plate dimension configurations
+ */
+export declare const PLATE_CONFIGS: Record<typeof PLATE_FORMAT_96 | typeof PLATE_FORMAT_384 | typeof PLATE_FORMAT_1536, {
+    rows: number;
+    columns: number;
+}>;
+/**
+ * Default color scale (CVD-friendly blue → orange diverging ramp
+ * suitable for plate data)
+ */
+export declare const DEFAULT_COLOR_SCALE: Array<[number, string]>;
+/**
+ * UI color constants for PlateMap component styling
+ */
+export declare const COLORS: {
+    /** Primary blue color for active states */
+    readonly primary: string;
+    /** White background */
+    readonly white: "#fff";
+    /** Light gray for borders */
+    readonly borderLight: "#ccc";
+    /** Dark gray for text */
+    readonly textDark: "#333";
+    /** Default region border color */
+    readonly regionBorder: "#000";
+    /** Default empty well color (light gray) */
+    readonly emptyWell: "#f0f0f0";
+};
+/**
+ * Named Plotly colorscales converted to array format.
+ * Used to extend colorscales with emptyWellColor when there are null values.
+ * Reference: https://plotly.com/javascript/colorscales/
+ */
+export declare const NAMED_COLORSCALES: Record<string, Array<[number, string]>>;
+/**
+ * Numeric constants for PlateMap calculations and layout
+ */
+export declare const PLATEMAP_CONSTANTS: {
+    /** Maximum random data value for demonstration */
+    readonly MAX_RANDOM_VALUE: 50000;
+    /** Sentinel value ratio for empty wells below data range */
+    readonly SENTINEL_RATIO: 0.01;
+    /** Color scale data start ratio for extended scales */
+    readonly COLOR_SCALE_THRESHOLD: 0.99;
+    /** Small epsilon for color scale band calculations */
+    readonly COLOR_SCALE_EPSILON: 0.001;
+    /** Proportions for multi-value well display */
+    readonly MULTI_VALUE_PRIMARY_RATIO: 0.575;
+    readonly MULTI_VALUE_SECONDARY_RATIO: 0.425;
+    /** Font sizes */
+    readonly FONT_SIZE_LARGE: 11;
+    /** Offset for centering labels */
+    readonly LABEL_CENTER_OFFSET: -0.5;
+    /** Opacity values */
+    readonly HOVER_OPACITY_FAINT: 0.15;
+    readonly HOVER_OPACITY_VISIBLE: 0.85;
+    /** Layout margins */
+    readonly MARGIN_TOP: 70;
+    readonly MARGIN_RIGHT: 50;
+    readonly MARGIN_BOTTOM: 40;
+    readonly MARGIN_LEFT: 80;
+    /** Colorbar dimensions */
+    readonly COLORBAR_LENGTH: 130;
+    readonly COLORBAR_X_OFFSET: 70;
+    /** Domain position constants for legend placement */
+    readonly DOMAIN_COLORBAR_OFFSET: 0.15;
+    readonly DOMAIN_COLORBAR_END: 0.85;
+};

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

@@ -0,0 +1,2 @@
+export { PlateMap } from './PlateMap';
+export type { PlateMapProps, WellData, PlateFormat, ColorScale } from './PlateMap';

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

@@ -0,0 +1,322 @@
+/**
+ * Plate format string constants for standard microplate configurations.
+ */
+export declare const PLATE_FORMAT_96: "96";
+export declare const PLATE_FORMAT_384: "384";
+export declare const PLATE_FORMAT_1536: "1536";
+export declare const PLATE_FORMAT_CUSTOM: "custom";
+/**
+ * Plate format presets for standard microplate configurations.
+ * - `"96"`: 8 rows × 12 columns (wells A1-H12)
+ * - `"384"`: 16 rows × 24 columns (wells A1-P24)
+ * - `"1536"`: 32 rows × 48 columns (wells A1-AF48)
+ * - `"custom"`: User-defined dimensions via `rows` and `columns` props
+ */
+export type PlateFormat = typeof PLATE_FORMAT_96 | typeof PLATE_FORMAT_384 | typeof PLATE_FORMAT_1536 | typeof PLATE_FORMAT_CUSTOM;
+/**
+ * Visualization mode for the plate map.
+ * - `"heatmap"`: Displays quantitative values as a continuous color gradient.
+ *   Use for OD readings, fluorescence intensity, or other numeric measurements.
+ * - `"categorical"`: Displays well types with discrete colors.
+ *   Use for showing sample types, control positions, or experimental conditions.
+ */
+export type VisualizationMode = "heatmap" | "categorical";
+/**
+ * Well type for categorical visualization.
+ * Common types include:
+ * - `"sample"`: Test samples (blue by default)
+ * - `"control"`: Positive/negative controls (red by default)
+ * - `"empty"`: Unused wells (light gray by default)
+ *
+ * Custom types can be added and colored via the `categoryColors` prop.
+ */
+export type WellType = "sample" | "control" | "empty" | string;
+/**
+ * Color scale definition for the heatmap visualization mode.
+ *
+ * Can be:
+ * - A named Plotly colorscale (e.g., "Viridis", "Blues", "Hot")
+ * - An array of [position, color] tuples where position is 0-1
+ *
+ * @example
+ * // Named colorscale
+ * colorScale="Viridis"
+ *
+ * @example
+ * // Custom gradient
+ * colorScale={[
+ *   [0, "#313695"],   // Dark blue at min
+ *   [0.5, "#ffffbf"], // Yellow at midpoint
+ *   [1, "#a50026"],   // Dark red at max
+ * ]}
+ */
+export type ColorScale = string | Array<[number, string]>;
+/**
+ * Position for the legend display.
+ * - `"right"`: Legend appears to the right of the plate (default)
+ * - `"bottom"`: Legend appears below the plate
+ * - `"left"`: Legend appears to the left of the plate
+ * - `"top"`: Legend appears above the plate
+ */
+export type LegendPosition = "right" | "bottom" | "left" | "top";
+/**
+ * Well data for individual wells.
+ *
+ * @example
+ * // Well with a single numeric value
+ * { wellId: "A1", values: { "Fluorescence": 1500 } }
+ *
+ * @example
+ * // Well with multiple values (creates multiple layers)
+ * { wellId: "A1", values: { "Raw": 1500, "Normalized": 0.85, "Status": "positive" } }
+ *
+ * @example
+ * // Well with tooltip-only data
+ * { wellId: "A1", values: { "Value": 500 }, tooltipData: { compound: "Drug A", concentration: "10µM" } }
+ */
+export interface WellData {
+    /**
+     * Well identifier in standard microplate notation.
+     * - Single letter + number for 96/384-well: "A1", "H12", "P24"
+     * - Double letter + number for 1536-well: "A1", "AA1", "AF48"
+     * Case-insensitive ("a1" and "A1" are equivalent).
+     */
+    wellId: string;
+    /**
+     * Named values for the well. Each key can become a visualization layer.
+     *
+     * - Numeric values: Displayed using heatmap visualization
+     * - String values: Displayed using categorical visualization
+     * - null: Empty/no data for that property
+     *
+     * All values are shown in the tooltip regardless of which layer is active.
+     *
+     * @example
+     * // Well with multiple measurement values (numeric)
+     * { wellId: "A1", values: { "Raw": 1500, "Normalized": 0.85, "Z-Score": 1.2 } }
+     *
+     * @example
+     * // Well with categorical values (string)
+     * { wellId: "A1", values: { "Status": "positive", "QC": "pass" } }
+     *
+     * @example
+     * // Mixed numeric and categorical
+     * { wellId: "A1", values: { "Fluorescence": 1500, "Status": "positive" } }
+     */
+    values?: Record<string, string | number | null>;
+    /**
+     * Optional data for tooltip display only (not visualized as layers).
+     * Keys become labels, values are displayed.
+     *
+     * @example
+     * { tooltipData: { sampleId: "S001", compound: "Drug A", concentration: "10µM" } }
+     */
+    tooltipData?: Record<string, unknown>;
+}
+/**
+ * Configuration for auto-generated layers when using WellData with `values`.
+ *
+ * When wells have multiple values (via the `values` property), layers are
+ * auto-generated from the unique keys. Use LayerConfig to customize the
+ * display name, visualization mode, and color scale for each layer.
+ *
+ * @example
+ * // Configure layers for wells with { values: { "Raw": 100, "Normalized": 0.5 } }
+ * const layerConfigs: LayerConfig[] = [
+ *   { id: "Raw", name: "Raw Data", colorScale: "Blues" },
+ *   { id: "Normalized", name: "Normalized Values", valueMin: 0, valueMax: 1 },
+ * ];
+ */
+export interface LayerConfig {
+    /** Layer ID (must match a key in WellData.values) */
+    id: string;
+    /** Display name for the layer (defaults to id if not provided) */
+    name?: string;
+    /** Visualization mode for this layer */
+    visualizationMode?: VisualizationMode;
+    /** Color scale for this layer (for heatmap mode) */
+    colorScale?: ColorScale;
+    /** Minimum value for color scaling */
+    valueMin?: number;
+    /** Maximum value for color scaling */
+    valueMax?: number;
+    /** Value unit suffix for tooltips and colorbar (e.g., "RFU", "%"). A space is automatically added before the unit. */
+    valueUnit?: string;
+    /**
+     * Custom colors for categorical visualization mode.
+     * Keys are category values (strings from `values`), values are hex colors.
+     * Merged with DEFAULT_CATEGORY_COLORS.
+     */
+    categoryColors?: Record<string, string>;
+}
+/**
+ * Configuration for legend styling and positioning.
+ *
+ * @example
+ * // Legend on the bottom with custom styling
+ * legendConfig={{
+ *   position: "bottom",
+ *   fontSize: 14,
+ *   itemSpacing: 12,
+ *   swatchSize: 20,
+ * }}
+ */
+export interface LegendConfig {
+    /**
+     * Position of the legend relative to the plate.
+     * @default "right"
+     */
+    position?: LegendPosition;
+    /**
+     * Font size for legend labels in pixels.
+     * @default 12
+     */
+    fontSize?: number;
+    /**
+     * Spacing between legend items in pixels.
+     * @default 4
+     */
+    itemSpacing?: number;
+    /**
+     * Size of the color swatch in pixels.
+     * @default 16
+     */
+    swatchSize?: number;
+    /**
+     * Title to display above the legend.
+     */
+    title?: string;
+}
+/**
+ * A region to highlight on the plate (e.g., controls, sample areas, empty wells)
+ */
+export interface PlateRegion {
+    /** Unique identifier for the region */
+    id: string;
+    /** Display name for the region (shown in legend) */
+    name: string;
+    /**
+     * Wells included in this region using range notation.
+     * Format: "StartWell:EndWell" (e.g., "A1:B6" for a rectangular block from A1 to B6)
+     */
+    wells: string;
+    /** Border color for the region highlight */
+    borderColor?: string;
+    /** Border width in pixels (default: 2) */
+    borderWidth?: number;
+    /** Optional fill color with transparency (e.g., "rgba(255, 0, 0, 0.1)") */
+    fillColor?: string;
+}
+/**
+ * Props for PlateMap component
+ */
+export interface PlateMapProps {
+    /**
+     * Well data array as WellData objects with wellId and values.
+     *
+     * If wells have multiple values (via `values` property), layers are
+     * auto-generated for each unique key, enabling layer toggling.
+     */
+    data?: WellData[];
+    /**
+     * Configuration for auto-generated layers when using WellData with `values`.
+     * Use this to customize display names, colors, and ranges for each layer.
+     * Only used when `data` contains wells with `values` property.
+     */
+    layerConfigs?: LayerConfig[];
+    /**
+     * Initial layer ID to display when the component mounts.
+     * If not provided, defaults to the first layer.
+     */
+    initialLayerId?: string;
+    /**
+     * Optional callback notified when the active layer changes.
+     * This is purely informational - the component manages layer state internally.
+     * Use this for logging, analytics, or syncing with external state.
+     */
+    onLayerChange?: (layerId: string) => void;
+    /** Plate format preset (default: "96") */
+    plateFormat?: PlateFormat;
+    /** Number of rows for custom format (default: 8 for 96-well, 16 for 384-well) */
+    rows?: number;
+    /** Number of columns for custom format (default: 12 for 96-well, 24 for 384-well) */
+    columns?: number;
+    /**
+     * Visualization mode (default: "heatmap")
+     * - "heatmap": Display quantitative values with color gradient
+     * - "categorical": Display well types with discrete colors
+     */
+    visualizationMode?: VisualizationMode;
+    /**
+     * Custom colors for categorical visualization mode.
+     * Keys are well types, values are hex colors.
+     * Merged with DEFAULT_CATEGORY_COLORS.
+     */
+    categoryColors?: Record<string, string>;
+    /**
+     * Regions to highlight on the plate (e.g., controls, sample areas, empty wells).
+     * Each region can specify wells and styling for visual distinction.
+     */
+    regions?: PlateRegion[];
+    /** Chart title */
+    title?: string;
+    /** X-axis title (e.g., "Columns") */
+    xTitle?: string;
+    /** Y-axis title (e.g., "Rows") */
+    yTitle?: string;
+    /** Custom x-axis labels (overrides auto-generated column numbers) */
+    xLabels?: string[] | number[];
+    /** Custom y-axis labels (overrides auto-generated row letters) */
+    yLabels?: string[] | number[];
+    /** Color scale for the heatmap (only used in heatmap mode) */
+    colorScale?: ColorScale;
+    /** Minimum value for color scale (auto-calculated if not provided) */
+    valueMin?: number;
+    /** Maximum value for color scale (auto-calculated if not provided) */
+    valueMax?: number;
+    /** Color for empty/null wells (default: "#f0f0f0") */
+    emptyWellColor?: string;
+    /** Show color bar legend for heatmap mode (default: true) */
+    showColorBar?: boolean;
+    /** Show categorical legend for categorical mode (default: true) */
+    showLegend?: boolean;
+    /**
+     * Configuration for legend positioning and styling.
+     * Applies to both heatmap colorbar and categorical legend.
+     *
+     * @example
+     * // Position legend at bottom with larger text
+     * legendConfig={{ position: "bottom", fontSize: 14 }}
+     */
+    legendConfig?: LegendConfig;
+    /** Chart width in pixels (default: 800) */
+    width?: number;
+    /** Chart height in pixels (default: 500) */
+    height?: number;
+    /** Number of decimal places for values (default: 0) */
+    precision?: number;
+    /**
+     * Marker shape for wells (default: "circle")
+     * - "circle": Round markers, ideal for plate-based data
+     * - "square": Square markers, ideal for generic heatmaps
+     */
+    markerShape?: "circle" | "square";
+    /**
+     * Callback when a well/cell is clicked.
+     * @param wellData - The full well data object including wellId, values, and tooltipData
+     */
+    onWellClick?: (wellData: WellData) => void;
+}
+/**
+ * Result of converting WellData array to grids
+ */
+export interface WellDataGridResult {
+    /** 2D grid of numeric values for the active layer */
+    grid: (number | null)[][];
+    /** 2D grid of string values for categorical visualization */
+    categories: (string | null)[][];
+    /** Map of wellId -> all values (for tooltip display) */
+    allValues: Map<string, Record<string, string | number | null>>;
+    /** Map of wellId -> tooltipData */
+    tooltipData: Map<string, Record<string, unknown>>;
+}