npm - @tetrascience-npm/tetrascience-react-ui - Versions diffs - 0.6.0 → 0.7.0-beta.101.1 - Mend

@tetrascience-npm/tetrascience-react-ui 0.6.0 → 0.7.0-beta.101.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (176) hide show

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

	@@ -1 +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 {\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 // 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 const rowLabels = customYLabels ?? generateRowLabels(rows);\n const colLabels = customXLabels ?? generateColumnLabels(columns);\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 = hasNullValues\n ? grid.map(row => row.map(val => val === null ? sentinelValue : val))\n : grid;\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 const hoverText: string[][] = 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\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 // Calculate marker size based on plot dimensions\n const markerSize = calculateMarkerSize(\n width,\n height,\n rows,\n columns,\n markerShape,\n !!title,\n !!yTitle\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: \"text\" 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\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 theme,\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 = <div ref={plotRef} className=\"platemap-plot\" style={{ width, height }} />;\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","effectiveLayers","useMemo","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","markerSize","calculateMarkerSize","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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"}
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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"}

package/dist/components/charts/PlateMap/constants.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("./types.cjs"),O={sample:"#4575b4",control:"#d73027",empty:"#f0f0f0"},A={[f.PLATE_FORMAT_96]:{rows:8,columns:12},[f.PLATE_FORMAT_384]:{rows:16,columns:24},[f.PLATE_FORMAT_1536]:{rows:32,columns:48}},_=[[0,"#313695"],[.1,"#4575b4"],[.2,"#74add1"],[.3,"#abd9e9"],[.4,"#e0f3f8"],[.5,"#ffffbf"],[.6,"#fee090"],[.7,"#fdae61"],[.8,"#f46d43"],[.9,"#d73027"],[1,"#a50026"]],L={textDark:"#333",regionBorder:"#000",emptyWell:"#f0f0f0"},e={Viridis:[[0,"#440154"],[.25,"#414487"],[.5,"#2a788e"],[.75,"#22a884"],[1,"#7ad151"]],Blues:[[0,"#f7fbff"],[.25,"#c6dbef"],[.5,"#6baed6"],[.75,"#2171b5"],[1,"#08306b"]],RdBu:[[0,"#67001f"],[.25,"#d6604d"],[.5,"#f7f7f7"],[.75,"#4393c3"],[1,"#053061"]],Greens:[[0,"#f7fcf5"],[.25,"#c7e9c0"],[.5,"#74c476"],[.75,"#238b45"],[1,"#00441b"]],Reds:[[0,"#fff5f0"],[.25,"#fcbba1"],[.5,"#fb6a4a"],[.75,"#cb181d"],[1,"#67000d"]],Greys:[[0,"#ffffff"],[.25,"#d9d9d9"],[.5,"#969696"],[.75,"#525252"],[1,"#000000"]],Hot:[[0,"#000000"],[.33,"#e60000"],[.66,"#ffff00"],[1,"#ffffff"]],YlGnBu:[[0,"#ffffd9"],[.25,"#c7e9b4"],[.5,"#41b6c4"],[.75,"#225ea8"],[1,"#081d58"]],YlOrRd:[[0,"#ffffcc"],[.25,"#fed976"],[.5,"#fd8d3c"],[.75,"#e31a1c"],[1,"#800026"]],Plasma:[[0,"#0d0887"],[.25,"#7e03a8"],[.5,"#cc4778"],[.75,"#f89540"],[1,"#f0f921"]]},E={MAX_RANDOM_VALUE:5e4,SENTINEL_RATIO:.01,COLOR_SCALE_THRESHOLD:.99,COLOR_SCALE_EPSILON:.001,MULTI_VALUE_PRIMARY_RATIO:.575,MULTI_VALUE_SECONDARY_RATIO:.425,FONT_SIZE_LARGE:11,LABEL_CENTER_OFFSET:-.5,MARGIN_TOP:70,MARGIN_RIGHT:50,MARGIN_BOTTOM:40,MARGIN_LEFT:80,COLORBAR_LENGTH:130,DOMAIN_COLORBAR_OFFSET:.15,DOMAIN_COLORBAR_END:.85};exports.COLORS=L;exports.DEFAULT_CATEGORY_COLORS=O;exports.DEFAULT_COLOR_SCALE=_;exports.NAMED_COLORSCALES=e;exports.PLATEMAP_CONSTANTS=E;exports.PLATE_CONFIGS=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("./types.cjs"),O=require("../../../utils/colors.cjs"),A={sample:O.CHART_COLORS[0],control:O.CHART_COLORS[3],empty:"#f0f0f0"},_={[f.PLATE_FORMAT_96]:{rows:8,columns:12},[f.PLATE_FORMAT_384]:{rows:16,columns:24},[f.PLATE_FORMAT_1536]:{rows:32,columns:48}},R=O.toPlotlyColorscale(O.CHART_DIVERGING.blueOrange),L={primary:O.CHART_COLORS[0],textDark:"#333",regionBorder:"#000",emptyWell:"#f0f0f0"},T={Viridis:[[0,"#440154"],[.25,"#414487"],[.5,"#2a788e"],[.75,"#22a884"],[1,"#7ad151"]],Blues:[[0,"#f7fbff"],[.25,"#c6dbef"],[.5,"#6baed6"],[.75,"#2171b5"],[1,"#08306b"]],RdBu:[[0,"#67001f"],[.25,"#d6604d"],[.5,"#f7f7f7"],[.75,"#4393c3"],[1,"#053061"]],Greens:[[0,"#f7fcf5"],[.25,"#c7e9c0"],[.5,"#74c476"],[.75,"#238b45"],[1,"#00441b"]],Reds:[[0,"#fff5f0"],[.25,"#fcbba1"],[.5,"#fb6a4a"],[.75,"#cb181d"],[1,"#67000d"]],Greys:[[0,"#ffffff"],[.25,"#d9d9d9"],[.5,"#969696"],[.75,"#525252"],[1,"#000000"]],Hot:[[0,"#000000"],[.33,"#e60000"],[.66,"#ffff00"],[1,"#ffffff"]],YlGnBu:[[0,"#ffffd9"],[.25,"#c7e9b4"],[.5,"#41b6c4"],[.75,"#225ea8"],[1,"#081d58"]],YlOrRd:[[0,"#ffffcc"],[.25,"#fed976"],[.5,"#fd8d3c"],[.75,"#e31a1c"],[1,"#800026"]],Plasma:[[0,"#0d0887"],[.25,"#7e03a8"],[.5,"#cc4778"],[.75,"#f89540"],[1,"#f0f921"]]},E={MAX_RANDOM_VALUE:5e4,SENTINEL_RATIO:.01,COLOR_SCALE_THRESHOLD:.99,COLOR_SCALE_EPSILON:.001,MULTI_VALUE_PRIMARY_RATIO:.575,MULTI_VALUE_SECONDARY_RATIO:.425,FONT_SIZE_LARGE:11,LABEL_CENTER_OFFSET:-.5,MARGIN_TOP:70,MARGIN_RIGHT:50,MARGIN_BOTTOM:40,MARGIN_LEFT:80,COLORBAR_LENGTH:130,DOMAIN_COLORBAR_OFFSET:.15,DOMAIN_COLORBAR_END:.85};exports.COLORS=L;exports.DEFAULT_CATEGORY_COLORS=A;exports.DEFAULT_COLOR_SCALE=R;exports.NAMED_COLORSCALES=T;exports.PLATEMAP_CONSTANTS=E;exports.PLATE_CONFIGS=_;
 //# sourceMappingURL=constants.cjs.map

package/dist/components/charts/PlateMap/constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.cjs","sources":["../../../../src/components/charts/PlateMap/constants.ts"],"sourcesContent":["import {\n PLATE_FORMAT_96,\n PLATE_FORMAT_384,\n PLATE_FORMAT_1536,\n} from \"./types\";\n\n/*\n Default category colors for well types in categorical visualization mode.\n * Override these by passing custom colors via the `categoryColors` prop.\n /\nexport const DEFAULT_CATEGORY_COLORS: Record<string, string> = {\n sample: ~~\"#4575b4\"~~, // Blue\n control: ~~\"#d73027\"~~, // Red\n empty: \"#f0f0f0\", // Light gray\n};\n\n/\n Plate dimension configurations\n /\nexport const PLATE_CONFIGS: Record<\n typeof PLATE_FORMAT_96 \| typeof PLATE_FORMAT_384 \| typeof PLATE_FORMAT_1536,\n { rows: number; columns: number }\n> = {\n [PLATE_FORMAT_96]: { rows: 8, columns: 12 },\n [PLATE_FORMAT_384]: { rows: 16, columns: 24 },\n [PLATE_FORMAT_1536]: { rows: 32, columns: 48 },\n};\n\n/\n Default color scale (blue to ~~red~~ ~~gradient~~ suitable for plate data)\n /\nexport const DEFAULT_COLOR_SCALE: Array<[number, string]> ~~= [\~~n ~~[0, \"#313695\"],\n [0~~.1, \"#4575b4\"],\n [0.2, \"#74add1\"],\n [0.3, \"#abd9e9\"],\n [0.4, \"#e0f3f8\"],\n [0.5, \"#ffffbf\"],\n [0.6, \"#fee090\"],\n [0.7, \"#fdae61\"],\n [0.8, \"#f46d43\"],\n [0.9, \"#d73027\"],\n [1, \"#a50026\"],\n];\n\n/\n UI color constants for PlateMap component styling\n /\nexport const COLORS = {\n /* Primary blue color for active states /\n primary: ~~\"#4575b4\"~~,\n /* White background /\n white: \"#fff\",\n /* Light gray for borders /\n borderLight: \"#ccc\",\n /* Dark gray for text /\n textDark: \"#333\",\n /* Default region border color /\n regionBorder: \"#000\",\n /* Default empty well color (light gray) /\n emptyWell: \"#f0f0f0\",\n} as const;\n\n/\n Named Plotly colorscales converted to array format.\n * Used to extend colorscales with emptyWellColor when there are null values.\n * Reference: https://plotly.com/javascript/colorscales/\n /\nexport const NAMED_COLORSCALES: Record<string, Array<[number, string]>> = {\n Viridis: [\n [0, \"#440154\"],\n [0.25, \"#414487\"],\n [0.5, \"#2a788e\"],\n [0.75, \"#22a884\"],\n [1, \"#7ad151\"],\n ],\n Blues: [\n [0, \"#f7fbff\"],\n [0.25, \"#c6dbef\"],\n [0.5, \"#6baed6\"],\n [0.75, \"#2171b5\"],\n [1, \"#08306b\"],\n ],\n RdBu: [\n [0, \"#67001f\"],\n [0.25, \"#d6604d\"],\n [0.5, \"#f7f7f7\"],\n [0.75, \"#4393c3\"],\n [1, \"#053061\"],\n ],\n Greens: [\n [0, \"#f7fcf5\"],\n [0.25, \"#c7e9c0\"],\n [0.5, \"#74c476\"],\n [0.75, \"#238b45\"],\n [1, \"#00441b\"],\n ],\n Reds: [\n [0, \"#fff5f0\"],\n [0.25, \"#fcbba1\"],\n [0.5, \"#fb6a4a\"],\n [0.75, \"#cb181d\"],\n [1, \"#67000d\"],\n ],\n Greys: [\n [0, \"#ffffff\"],\n [0.25, \"#d9d9d9\"],\n [0.5, \"#969696\"],\n [0.75, \"#525252\"],\n [1, \"#000000\"],\n ],\n Hot: [\n [0, \"#000000\"],\n [0.33, \"#e60000\"],\n [0.66, \"#ffff00\"],\n [1, \"#ffffff\"],\n ],\n YlGnBu: [\n [0, \"#ffffd9\"],\n [0.25, \"#c7e9b4\"],\n [0.5, \"#41b6c4\"],\n [0.75, \"#225ea8\"],\n [1, \"#081d58\"],\n ],\n YlOrRd: [\n [0, \"#ffffcc\"],\n [0.25, \"#fed976\"],\n [0.5, \"#fd8d3c\"],\n [0.75, \"#e31a1c\"],\n [1, \"#800026\"],\n ],\n Plasma: [\n [0, \"#0d0887\"],\n [0.25, \"#7e03a8\"],\n [0.5, \"#cc4778\"],\n [0.75, \"#f89540\"],\n [1, \"#f0f921\"],\n ],\n};\n\n/\n Numeric constants for PlateMap calculations and layout\n /\nexport const PLATEMAP_CONSTANTS = {\n /* Maximum random data value for demonstration /\n MAX_RANDOM_VALUE: 50000,\n /* Sentinel value ratio for empty wells below data range /\n SENTINEL_RATIO: 0.01,\n /* Color scale data start ratio for extended scales /\n COLOR_SCALE_THRESHOLD: 0.99,\n /* Small epsilon for color scale band calculations /\n COLOR_SCALE_EPSILON: 0.001,\n /* Proportions for multi-value well display /\n MULTI_VALUE_PRIMARY_RATIO: 0.575,\n MULTI_VALUE_SECONDARY_RATIO: 0.425,\n /* Font sizes /\n FONT_SIZE_LARGE: 11,\n /* Offset for centering labels /\n LABEL_CENTER_OFFSET: -0.5,\n /* Opacity values /\n HOVER_OPACITY_FAINT: 0.15,\n HOVER_OPACITY_VISIBLE: 0.85,\n /* Layout margins /\n MARGIN_TOP: 70,\n MARGIN_RIGHT: 50,\n MARGIN_BOTTOM: 40,\n MARGIN_LEFT: 80,\n /* Colorbar dimensions /\n COLORBAR_LENGTH: 130,\n COLORBAR_X_OFFSET: 70,\n /* Domain position constants for legend placement */\n DOMAIN_COLORBAR_OFFSET: 0.15,\n DOMAIN_COLORBAR_END: 0.85,\n} as const;\n"],"names":["DEFAULT_CATEGORY_COLORS","PLATE_CONFIGS","PLATE_FORMAT_96","PLATE_FORMAT_384","PLATE_FORMAT_1536","DEFAULT_COLOR_SCALE","COLORS","NAMED_COLORSCALES","PLATEMAP_CONSTANTS"],"mappings":"~~+GAUaA~~,EAAkD,CAC7D,~~OAAQ~~,~~UACR~~,~~QAAS~~,~~UACT~~,MAAO,SACT,EAKaC,EAGT,CACF,CAACC,EAAAA,eAAe,EAAG,CAAE,KAAM,EAAG,QAAS,EAAA,EACvC,CAACC,EAAAA,gBAAgB,EAAG,CAAE,KAAM,GAAI,QAAS,EAAA,EACzC,CAACC,EAAAA,iBAAiB,EAAG,CAAE,KAAM,GAAI,QAAS,EAAA,CAC5C,~~EAKaC~~,~~EAA+C~~,~~CAC1D~~,~~CAAC~~,~~EAAG~~,~~SAAS~~,~~EACb~~,~~CAAC~~,~~GAAK~~,~~SAAS~~,~~EACf~~,~~CAAC~~,~~GAAK~~,~~SAAS,EACf,~~CAAC,~~GAAK~~,~~SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,EAAG,SAAS,CACf,EAKaC,EAAS,CAQpB,~~SAAU,OAEV,aAAc,OAEd,UAAW,SACb,~~EAOaC~~,EAA6D,CACxE,QAAS,CACP,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,MAAO,CACL,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,KAAM,CACJ,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,KAAM,CACJ,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,MAAO,CACL,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,IAAK,CACH,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,CAEjB,EAKaC,EAAqB,CAEhC,iBAAkB,IAElB,eAAgB,IAEhB,sBAAuB,IAEvB,oBAAqB,KAErB,0BAA2B,KAC3B,4BAA6B,KAE7B,gBAAiB,GAEjB,oBAAqB,IAKrB,WAAY,GACZ,aAAc,GACd,cAAe,GACf,YAAa,GAEb,gBAAiB,IAGjB,uBAAwB,IACxB,oBAAqB,GACvB"}
1	+ {"version":3,"file":"constants.cjs","sources":["../../../../src/components/charts/PlateMap/constants.ts"],"sourcesContent":["import {\n PLATE_FORMAT_96,\n PLATE_FORMAT_384,\n PLATE_FORMAT_1536,\n} from \"./types\";\n\nimport {\n CHART_COLORS,\n CHART_DIVERGING,\n toPlotlyColorscale,\n} from \"@/utils/colors\";\n\n/*\n Default category colors for well types in categorical visualization mode.\n * Override these by passing custom colors via the `categoryColors` prop.\n /\nexport const DEFAULT_CATEGORY_COLORS: Record<string, string> = {\n sample: CHART_COLORS[0], // Blue\n control: CHART_COLORS[3], // Red\n empty: \"#f0f0f0\", // Light gray\n};\n\n/\n Plate dimension configurations\n /\nexport const PLATE_CONFIGS: Record<\n typeof PLATE_FORMAT_96 \| typeof PLATE_FORMAT_384 \| typeof PLATE_FORMAT_1536,\n { rows: number; columns: number }\n> = {\n [PLATE_FORMAT_96]: { rows: 8, columns: 12 },\n [PLATE_FORMAT_384]: { rows: 16, columns: 24 },\n [PLATE_FORMAT_1536]: { rows: 32, columns: 48 },\n};\n\n/\n Default color scale (CVD-friendly blue → orange diverging ramp\n * suitable for plate data)\n /\nexport const DEFAULT_COLOR_SCALE: Array<[number, string]> =\n toPlotlyColorscale(CHART_DIVERGING.blueOrange);\n\n/\n UI color constants for PlateMap component styling\n /\nexport const COLORS = {\n /* Primary blue color for active states /\n primary: CHART_COLORS[0],\n /* White background /\n white: \"#fff\",\n /* Light gray for borders /\n borderLight: \"#ccc\",\n /* Dark gray for text /\n textDark: \"#333\",\n /* Default region border color /\n regionBorder: \"#000\",\n /* Default empty well color (light gray) /\n emptyWell: \"#f0f0f0\",\n} as const;\n\n/\n Named Plotly colorscales converted to array format.\n * Used to extend colorscales with emptyWellColor when there are null values.\n * Reference: https://plotly.com/javascript/colorscales/\n /\nexport const NAMED_COLORSCALES: Record<string, Array<[number, string]>> = {\n Viridis: [\n [0, \"#440154\"],\n [0.25, \"#414487\"],\n [0.5, \"#2a788e\"],\n [0.75, \"#22a884\"],\n [1, \"#7ad151\"],\n ],\n Blues: [\n [0, \"#f7fbff\"],\n [0.25, \"#c6dbef\"],\n [0.5, \"#6baed6\"],\n [0.75, \"#2171b5\"],\n [1, \"#08306b\"],\n ],\n RdBu: [\n [0, \"#67001f\"],\n [0.25, \"#d6604d\"],\n [0.5, \"#f7f7f7\"],\n [0.75, \"#4393c3\"],\n [1, \"#053061\"],\n ],\n Greens: [\n [0, \"#f7fcf5\"],\n [0.25, \"#c7e9c0\"],\n [0.5, \"#74c476\"],\n [0.75, \"#238b45\"],\n [1, \"#00441b\"],\n ],\n Reds: [\n [0, \"#fff5f0\"],\n [0.25, \"#fcbba1\"],\n [0.5, \"#fb6a4a\"],\n [0.75, \"#cb181d\"],\n [1, \"#67000d\"],\n ],\n Greys: [\n [0, \"#ffffff\"],\n [0.25, \"#d9d9d9\"],\n [0.5, \"#969696\"],\n [0.75, \"#525252\"],\n [1, \"#000000\"],\n ],\n Hot: [\n [0, \"#000000\"],\n [0.33, \"#e60000\"],\n [0.66, \"#ffff00\"],\n [1, \"#ffffff\"],\n ],\n YlGnBu: [\n [0, \"#ffffd9\"],\n [0.25, \"#c7e9b4\"],\n [0.5, \"#41b6c4\"],\n [0.75, \"#225ea8\"],\n [1, \"#081d58\"],\n ],\n YlOrRd: [\n [0, \"#ffffcc\"],\n [0.25, \"#fed976\"],\n [0.5, \"#fd8d3c\"],\n [0.75, \"#e31a1c\"],\n [1, \"#800026\"],\n ],\n Plasma: [\n [0, \"#0d0887\"],\n [0.25, \"#7e03a8\"],\n [0.5, \"#cc4778\"],\n [0.75, \"#f89540\"],\n [1, \"#f0f921\"],\n ],\n};\n\n/\n Numeric constants for PlateMap calculations and layout\n /\nexport const PLATEMAP_CONSTANTS = {\n /* Maximum random data value for demonstration /\n MAX_RANDOM_VALUE: 50000,\n /* Sentinel value ratio for empty wells below data range /\n SENTINEL_RATIO: 0.01,\n /* Color scale data start ratio for extended scales /\n COLOR_SCALE_THRESHOLD: 0.99,\n /* Small epsilon for color scale band calculations /\n COLOR_SCALE_EPSILON: 0.001,\n /* Proportions for multi-value well display /\n MULTI_VALUE_PRIMARY_RATIO: 0.575,\n MULTI_VALUE_SECONDARY_RATIO: 0.425,\n /* Font sizes /\n FONT_SIZE_LARGE: 11,\n /* Offset for centering labels /\n LABEL_CENTER_OFFSET: -0.5,\n /* Opacity values /\n HOVER_OPACITY_FAINT: 0.15,\n HOVER_OPACITY_VISIBLE: 0.85,\n /* Layout margins /\n MARGIN_TOP: 70,\n MARGIN_RIGHT: 50,\n MARGIN_BOTTOM: 40,\n MARGIN_LEFT: 80,\n /* Colorbar dimensions /\n COLORBAR_LENGTH: 130,\n COLORBAR_X_OFFSET: 70,\n /* Domain position constants for legend placement */\n DOMAIN_COLORBAR_OFFSET: 0.15,\n DOMAIN_COLORBAR_END: 0.85,\n} as const;\n"],"names":["DEFAULT_CATEGORY_COLORS","CHART_COLORS","PLATE_CONFIGS","PLATE_FORMAT_96","PLATE_FORMAT_384","PLATE_FORMAT_1536","DEFAULT_COLOR_SCALE","toPlotlyColorscale","CHART_DIVERGING","COLORS","NAMED_COLORSCALES","PLATEMAP_CONSTANTS"],"mappings":"sJAgBaA,EAAkD,CAC7D,OAAQC,EAAAA,aAAa,CAAC,EACtB,QAASA,EAAAA,aAAa,CAAC,EACvB,MAAO,SACT,EAKaC,EAGT,CACF,CAACC,EAAAA,eAAe,EAAG,CAAE,KAAM,EAAG,QAAS,EAAA,EACvC,CAACC,EAAAA,gBAAgB,EAAG,CAAE,KAAM,GAAI,QAAS,EAAA,EACzC,CAACC,EAAAA,iBAAiB,EAAG,CAAE,KAAM,GAAI,QAAS,EAAA,CAC5C,EAMaC,EACXC,EAAAA,mBAAmBC,EAAAA,gBAAgB,UAAU,EAKlCC,EAAS,CAEpB,QAASR,EAAAA,aAAa,CAAC,EAMvB,SAAU,OAEV,aAAc,OAEd,UAAW,SACb,EAOaS,EAA6D,CACxE,QAAS,CACP,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,MAAO,CACL,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,KAAM,CACJ,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,KAAM,CACJ,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,MAAO,CACL,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,IAAK,CACH,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,CAEjB,EAKaC,EAAqB,CAEhC,iBAAkB,IAElB,eAAgB,IAEhB,sBAAuB,IAEvB,oBAAqB,KAErB,0BAA2B,KAC3B,4BAA6B,KAE7B,gBAAiB,GAEjB,oBAAqB,IAKrB,WAAY,GACZ,aAAc,GACd,cAAe,GACf,YAAa,GAEb,gBAAiB,IAGjB,uBAAwB,IACxB,oBAAqB,GACvB"}

package/dist/components/charts/PlateMap/constants.js CHANGED Viewed

@@ -1,35 +1,26 @@
-import { PLATE_FORMAT_1536 as f, PLATE_FORMAT_384 as O, PLATE_FORMAT_96 as A } from "./types.js";
-const R = {
-  sample: "#4575b4",
+import { PLATE_FORMAT_1536 as O, PLATE_FORMAT_384 as A, PLATE_FORMAT_96 as _ } from "./types.js";
+import { CHART_COLORS as f, toPlotlyColorscale as R, CHART_DIVERGING as L } from "../../../utils/colors.js";
+const e = {
+  sample: f[0],
   // Blue
-  control: "#d73027",
+  control: f[3],
   // Red
   empty: "#f0f0f0"
   // Light gray
-}, L = {
-  [A]: { rows: 8, columns: 12 },
-  [O]: { rows: 16, columns: 24 },
-  [f]: { rows: 32, columns: 48 }
-}, E = [
-  [0, "#313695"],
-  [0.1, "#4575b4"],
-  [0.2, "#74add1"],
-  [0.3, "#abd9e9"],
-  [0.4, "#e0f3f8"],
-  [0.5, "#ffffbf"],
-  [0.6, "#fee090"],
-  [0.7, "#fdae61"],
-  [0.8, "#f46d43"],
-  [0.9, "#d73027"],
-  [1, "#a50026"]
-], e = {
+}, c = {
+  [_]: { rows: 8, columns: 12 },
+  [A]: { rows: 16, columns: 24 },
+  [O]: { rows: 32, columns: 48 }
+}, o = R(L.blueOrange), C = {
+  /** Primary blue color for active states */
+  primary: f[0],
   /** Dark gray for text */
   textDark: "#333",
   /** Default region border color */
   regionBorder: "#000",
   /** Default empty well color (light gray) */
   emptyWell: "#f0f0f0"
-}, T = {
+}, d = {
   Viridis: [
     [0, "#440154"],
     [0.25, "#414487"],
@@ -99,7 +90,7 @@ const R = {
     [0.75, "#f89540"],
     [1, "#f0f921"]
   ]
-}, d = {
+}, r = {
   /** Maximum random data value for demonstration */
   MAX_RANDOM_VALUE: 5e4,
   /** Sentinel value ratio for empty wells below data range */
@@ -127,11 +118,11 @@ const R = {
   DOMAIN_COLORBAR_END: 0.85
 };
 export {
-  e as COLORS,
-  R as DEFAULT_CATEGORY_COLORS,
-  E as DEFAULT_COLOR_SCALE,
-  T as NAMED_COLORSCALES,
-  d as PLATEMAP_CONSTANTS,
-  L as PLATE_CONFIGS
+  C as COLORS,
+  e as DEFAULT_CATEGORY_COLORS,
+  o as DEFAULT_COLOR_SCALE,
+  d as NAMED_COLORSCALES,
+  r as PLATEMAP_CONSTANTS,
+  c as PLATE_CONFIGS
 };
 //# sourceMappingURL=constants.js.map

package/dist/components/charts/PlateMap/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","sources":["../../../../src/components/charts/PlateMap/constants.ts"],"sourcesContent":["import {\n PLATE_FORMAT_96,\n PLATE_FORMAT_384,\n PLATE_FORMAT_1536,\n} from \"./types\";\n\n/*\n Default category colors for well types in categorical visualization mode.\n * Override these by passing custom colors via the `categoryColors` prop.\n /\nexport const DEFAULT_CATEGORY_COLORS: Record<string, string> = {\n sample: ~~\"#4575b4\"~~, // Blue\n control: ~~\"#d73027\"~~, // Red\n empty: \"#f0f0f0\", // Light gray\n};\n\n/\n Plate dimension configurations\n /\nexport const PLATE_CONFIGS: Record<\n typeof PLATE_FORMAT_96 \| typeof PLATE_FORMAT_384 \| typeof PLATE_FORMAT_1536,\n { rows: number; columns: number }\n> = {\n [PLATE_FORMAT_96]: { rows: 8, columns: 12 },\n [PLATE_FORMAT_384]: { rows: 16, columns: 24 },\n [PLATE_FORMAT_1536]: { rows: 32, columns: 48 },\n};\n\n/\n Default color scale (blue to ~~red~~ ~~gradient~~ suitable for plate data)\n /\nexport const DEFAULT_COLOR_SCALE: Array<[number, string]> ~~= [\~~n ~~[0, \"#313695\"],\n [0~~.1, \"#4575b4\"],\n [0.2, \"#74add1\"],\n [0.3, \"#abd9e9\"],\n [0.4, \"#e0f3f8\"],\n [0.5, \"#ffffbf\"],\n [0.6, \"#fee090\"],\n [0.7, \"#fdae61\"],\n [0.8, \"#f46d43\"],\n [0.9, \"#d73027\"],\n [1, \"#a50026\"],\n];\n\n/\n UI color constants for PlateMap component styling\n /\nexport const COLORS = {\n /* Primary blue color for active states /\n primary: ~~\"#4575b4\"~~,\n /* White background /\n white: \"#fff\",\n /* Light gray for borders /\n borderLight: \"#ccc\",\n /* Dark gray for text /\n textDark: \"#333\",\n /* Default region border color /\n regionBorder: \"#000\",\n /* Default empty well color (light gray) /\n emptyWell: \"#f0f0f0\",\n} as const;\n\n/\n Named Plotly colorscales converted to array format.\n * Used to extend colorscales with emptyWellColor when there are null values.\n * Reference: https://plotly.com/javascript/colorscales/\n /\nexport const NAMED_COLORSCALES: Record<string, Array<[number, string]>> = {\n Viridis: [\n [0, \"#440154\"],\n [0.25, \"#414487\"],\n [0.5, \"#2a788e\"],\n [0.75, \"#22a884\"],\n [1, \"#7ad151\"],\n ],\n Blues: [\n [0, \"#f7fbff\"],\n [0.25, \"#c6dbef\"],\n [0.5, \"#6baed6\"],\n [0.75, \"#2171b5\"],\n [1, \"#08306b\"],\n ],\n RdBu: [\n [0, \"#67001f\"],\n [0.25, \"#d6604d\"],\n [0.5, \"#f7f7f7\"],\n [0.75, \"#4393c3\"],\n [1, \"#053061\"],\n ],\n Greens: [\n [0, \"#f7fcf5\"],\n [0.25, \"#c7e9c0\"],\n [0.5, \"#74c476\"],\n [0.75, \"#238b45\"],\n [1, \"#00441b\"],\n ],\n Reds: [\n [0, \"#fff5f0\"],\n [0.25, \"#fcbba1\"],\n [0.5, \"#fb6a4a\"],\n [0.75, \"#cb181d\"],\n [1, \"#67000d\"],\n ],\n Greys: [\n [0, \"#ffffff\"],\n [0.25, \"#d9d9d9\"],\n [0.5, \"#969696\"],\n [0.75, \"#525252\"],\n [1, \"#000000\"],\n ],\n Hot: [\n [0, \"#000000\"],\n [0.33, \"#e60000\"],\n [0.66, \"#ffff00\"],\n [1, \"#ffffff\"],\n ],\n YlGnBu: [\n [0, \"#ffffd9\"],\n [0.25, \"#c7e9b4\"],\n [0.5, \"#41b6c4\"],\n [0.75, \"#225ea8\"],\n [1, \"#081d58\"],\n ],\n YlOrRd: [\n [0, \"#ffffcc\"],\n [0.25, \"#fed976\"],\n [0.5, \"#fd8d3c\"],\n [0.75, \"#e31a1c\"],\n [1, \"#800026\"],\n ],\n Plasma: [\n [0, \"#0d0887\"],\n [0.25, \"#7e03a8\"],\n [0.5, \"#cc4778\"],\n [0.75, \"#f89540\"],\n [1, \"#f0f921\"],\n ],\n};\n\n/\n Numeric constants for PlateMap calculations and layout\n /\nexport const PLATEMAP_CONSTANTS = {\n /* Maximum random data value for demonstration /\n MAX_RANDOM_VALUE: 50000,\n /* Sentinel value ratio for empty wells below data range /\n SENTINEL_RATIO: 0.01,\n /* Color scale data start ratio for extended scales /\n COLOR_SCALE_THRESHOLD: 0.99,\n /* Small epsilon for color scale band calculations /\n COLOR_SCALE_EPSILON: 0.001,\n /* Proportions for multi-value well display /\n MULTI_VALUE_PRIMARY_RATIO: 0.575,\n MULTI_VALUE_SECONDARY_RATIO: 0.425,\n /* Font sizes /\n FONT_SIZE_LARGE: 11,\n /* Offset for centering labels /\n LABEL_CENTER_OFFSET: -0.5,\n /* Opacity values /\n HOVER_OPACITY_FAINT: 0.15,\n HOVER_OPACITY_VISIBLE: 0.85,\n /* Layout margins /\n MARGIN_TOP: 70,\n MARGIN_RIGHT: 50,\n MARGIN_BOTTOM: 40,\n MARGIN_LEFT: 80,\n /* Colorbar dimensions /\n COLORBAR_LENGTH: 130,\n COLORBAR_X_OFFSET: 70,\n /* Domain position constants for legend placement */\n DOMAIN_COLORBAR_OFFSET: 0.15,\n DOMAIN_COLORBAR_END: 0.85,\n} as const;\n"],"names":["DEFAULT_CATEGORY_COLORS","PLATE_CONFIGS","PLATE_FORMAT_96","PLATE_FORMAT_384","PLATE_FORMAT_1536","DEFAULT_COLOR_SCALE","COLORS","NAMED_COLORSCALES","PLATEMAP_CONSTANTS"],"mappings":"~~;AAUO~~,MAAMA,IAAkD;AAAA,EAC7D,~~QAAQ~~;AAAA;AAAA,~~EACR~~,~~SAAS~~;AAAA;AAAA,~~EACT~~,OAAO;AAAA;AACT,GAKaC,IAGT;AAAA,EACF,CAACC,CAAe,GAAG,EAAE,MAAM,GAAG,SAAS,GAAA;AAAA,EACvC,CAACC,CAAgB,GAAG,EAAE,MAAM,IAAI,SAAS,GAAA;AAAA,EACzC,CAACC,CAAiB,GAAG,EAAE,MAAM,IAAI,SAAS,GAAA;AAC5C,~~GAKaC~~,~~IAA+C;AAAA~~,~~EAC1D~~,~~CAAC~~,~~GAAG~~,~~SAAS;AAAA~~,~~EACb,CAAC,KAAK,SAAS~~;AAAA~~,EACf,CAAC,KAAK,SAAS~~;AAAA,~~EACf~~,~~CAAC~~,~~KAAK~~,~~SAAS;AAAA,EACf,~~CAAC~~,KAAK,SAAS~~;AAAA~~,EACf,CAAC,KAAK,SAAS~~;AAAA,~~EACf~~,~~CAAC,KAAK,SAAS;AAAA,EACf,CAAC,KAAK,SAAS;AAAA,EACf,CAAC,KAAK,SAAS;AAAA,EACf,CAAC,KAAK,SAAS;AAAA,EACf,CAAC,GAAG,SAAS;AACf,GAKaC,IAAS;AAAA;AAAA,EAQpB,~~UAAU;AAAA;AAAA,EAEV,cAAc;AAAA;AAAA,EAEd,WAAW;AACb,~~GAOaC~~,IAA6D;AAAA,EACxE,SAAS;AAAA,IACP,CAAC,GAAG,SAAS;AAAA,IACb,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,KAAK,SAAS;AAAA,IACf,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,GAAG,SAAS;AAAA,EAAA;AAAA,EAEf,OAAO;AAAA,IACL,CAAC,GAAG,SAAS;AAAA,IACb,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,KAAK,SAAS;AAAA,IACf,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,GAAG,SAAS;AAAA,EAAA;AAAA,EAEf,MAAM;AAAA,IACJ,CAAC,GAAG,SAAS;AAAA,IACb,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,KAAK,SAAS;AAAA,IACf,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,GAAG,SAAS;AAAA,EAAA;AAAA,EAEf,QAAQ;AAAA,IACN,CAAC,GAAG,SAAS;AAAA,IACb,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,KAAK,SAAS;AAAA,IACf,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,GAAG,SAAS;AAAA,EAAA;AAAA,EAEf,MAAM;AAAA,IACJ,CAAC,GAAG,SAAS;AAAA,IACb,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,KAAK,SAAS;AAAA,IACf,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,GAAG,SAAS;AAAA,EAAA;AAAA,EAEf,OAAO;AAAA,IACL,CAAC,GAAG,SAAS;AAAA,IACb,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,KAAK,SAAS;AAAA,IACf,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,GAAG,SAAS;AAAA,EAAA;AAAA,EAEf,KAAK;AAAA,IACH,CAAC,GAAG,SAAS;AAAA,IACb,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,GAAG,SAAS;AAAA,EAAA;AAAA,EAEf,QAAQ;AAAA,IACN,CAAC,GAAG,SAAS;AAAA,IACb,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,KAAK,SAAS;AAAA,IACf,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,GAAG,SAAS;AAAA,EAAA;AAAA,EAEf,QAAQ;AAAA,IACN,CAAC,GAAG,SAAS;AAAA,IACb,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,KAAK,SAAS;AAAA,IACf,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,GAAG,SAAS;AAAA,EAAA;AAAA,EAEf,QAAQ;AAAA,IACN,CAAC,GAAG,SAAS;AAAA,IACb,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,KAAK,SAAS;AAAA,IACf,CAAC,MAAM,SAAS;AAAA,IAChB,CAAC,GAAG,SAAS;AAAA,EAAA;AAEjB,GAKaC,IAAqB;AAAA;AAAA,EAEhC,kBAAkB;AAAA;AAAA,EAElB,gBAAgB;AAAA;AAAA,EAEhB,uBAAuB;AAAA;AAAA,EAEvB,qBAAqB;AAAA;AAAA,EAErB,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA;AAAA,EAE7B,iBAAiB;AAAA;AAAA,EAEjB,qBAAqB;AAAA;AAAA,EAKrB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AAAA;AAAA,EAEb,iBAAiB;AAAA;AAAA,EAGjB,wBAAwB;AAAA,EACxB,qBAAqB;AACvB;"}
1	+ {"version":3,"file":"constants.js","sources":["../../../../src/components/charts/PlateMap/constants.ts"],"sourcesContent":["import {\n PLATE_FORMAT_96,\n PLATE_FORMAT_384,\n PLATE_FORMAT_1536,\n} from \"./types\";\n\nimport {\n CHART_COLORS,\n CHART_DIVERGING,\n toPlotlyColorscale,\n} from \"@/utils/colors\";\n\n/*\n Default category colors for well types in categorical visualization mode.\n * Override these by passing custom colors via the `categoryColors` prop.\n /\nexport const DEFAULT_CATEGORY_COLORS: Record<string, string> = {\n sample: CHART_COLORS[0], // Blue\n control: CHART_COLORS[3], // Red\n empty: \"#f0f0f0\", // Light gray\n};\n\n/\n Plate dimension configurations\n /\nexport const PLATE_CONFIGS: Record<\n typeof PLATE_FORMAT_96 \| typeof PLATE_FORMAT_384 \| typeof PLATE_FORMAT_1536,\n { rows: number; columns: number }\n> = {\n [PLATE_FORMAT_96]: { rows: 8, columns: 12 },\n [PLATE_FORMAT_384]: { rows: 16, columns: 24 },\n [PLATE_FORMAT_1536]: { rows: 32, columns: 48 },\n};\n\n/\n Default color scale (CVD-friendly blue → orange diverging ramp\n * suitable for plate data)\n /\nexport const DEFAULT_COLOR_SCALE: Array<[number, string]> =\n toPlotlyColorscale(CHART_DIVERGING.blueOrange);\n\n/\n UI color constants for PlateMap component styling\n /\nexport const COLORS = {\n /* Primary blue color for active states /\n primary: CHART_COLORS[0],\n /* White background /\n white: \"#fff\",\n /* Light gray for borders /\n borderLight: \"#ccc\",\n /* Dark gray for text /\n textDark: \"#333\",\n /* Default region border color /\n regionBorder: \"#000\",\n /* Default empty well color (light gray) /\n emptyWell: \"#f0f0f0\",\n} as const;\n\n/\n Named Plotly colorscales converted to array format.\n * Used to extend colorscales with emptyWellColor when there are null values.\n * Reference: https://plotly.com/javascript/colorscales/\n /\nexport const NAMED_COLORSCALES: Record<string, Array<[number, string]>> = {\n Viridis: [\n [0, \"#440154\"],\n [0.25, \"#414487\"],\n [0.5, \"#2a788e\"],\n [0.75, \"#22a884\"],\n [1, \"#7ad151\"],\n ],\n Blues: [\n [0, \"#f7fbff\"],\n [0.25, \"#c6dbef\"],\n [0.5, \"#6baed6\"],\n [0.75, \"#2171b5\"],\n [1, \"#08306b\"],\n ],\n RdBu: [\n [0, \"#67001f\"],\n [0.25, \"#d6604d\"],\n [0.5, \"#f7f7f7\"],\n [0.75, \"#4393c3\"],\n [1, \"#053061\"],\n ],\n Greens: [\n [0, \"#f7fcf5\"],\n [0.25, \"#c7e9c0\"],\n [0.5, \"#74c476\"],\n [0.75, \"#238b45\"],\n [1, \"#00441b\"],\n ],\n Reds: [\n [0, \"#fff5f0\"],\n [0.25, \"#fcbba1\"],\n [0.5, \"#fb6a4a\"],\n [0.75, \"#cb181d\"],\n [1, \"#67000d\"],\n ],\n Greys: [\n [0, \"#ffffff\"],\n [0.25, \"#d9d9d9\"],\n [0.5, \"#969696\"],\n [0.75, \"#525252\"],\n [1, \"#000000\"],\n ],\n Hot: [\n [0, \"#000000\"],\n [0.33, \"#e60000\"],\n [0.66, \"#ffff00\"],\n [1, \"#ffffff\"],\n ],\n YlGnBu: [\n [0, \"#ffffd9\"],\n [0.25, \"#c7e9b4\"],\n [0.5, \"#41b6c4\"],\n [0.75, \"#225ea8\"],\n [1, \"#081d58\"],\n ],\n YlOrRd: [\n [0, \"#ffffcc\"],\n [0.25, \"#fed976\"],\n [0.5, \"#fd8d3c\"],\n [0.75, \"#e31a1c\"],\n [1, \"#800026\"],\n ],\n Plasma: [\n [0, \"#0d0887\"],\n [0.25, \"#7e03a8\"],\n [0.5, \"#cc4778\"],\n [0.75, \"#f89540\"],\n [1, \"#f0f921\"],\n ],\n};\n\n/\n Numeric constants for PlateMap calculations and layout\n /\nexport const PLATEMAP_CONSTANTS = {\n /* Maximum random data value for demonstration /\n MAX_RANDOM_VALUE: 50000,\n /* Sentinel value ratio for empty wells below data range /\n SENTINEL_RATIO: 0.01,\n /* Color scale data start ratio for extended scales /\n COLOR_SCALE_THRESHOLD: 0.99,\n /* Small epsilon for color scale band calculations /\n COLOR_SCALE_EPSILON: 0.001,\n /* Proportions for multi-value well display /\n MULTI_VALUE_PRIMARY_RATIO: 0.575,\n MULTI_VALUE_SECONDARY_RATIO: 0.425,\n /* Font sizes /\n FONT_SIZE_LARGE: 11,\n /* Offset for centering labels /\n LABEL_CENTER_OFFSET: -0.5,\n /* Opacity values /\n HOVER_OPACITY_FAINT: 0.15,\n HOVER_OPACITY_VISIBLE: 0.85,\n /* Layout margins /\n MARGIN_TOP: 70,\n MARGIN_RIGHT: 50,\n MARGIN_BOTTOM: 40,\n MARGIN_LEFT: 80,\n /* Colorbar dimensions /\n COLORBAR_LENGTH: 130,\n COLORBAR_X_OFFSET: 70,\n /* Domain position constants for legend placement */\n DOMAIN_COLORBAR_OFFSET: 0.15,\n DOMAIN_COLORBAR_END: 0.85,\n} as const;\n"],"names":["DEFAULT_CATEGORY_COLORS","CHART_COLORS","PLATE_CONFIGS","PLATE_FORMAT_96","PLATE_FORMAT_384","PLATE_FORMAT_1536","DEFAULT_COLOR_SCALE","toPlotlyColorscale","CHART_DIVERGING","COLORS","NAMED_COLORSCALES","PLATEMAP_CONSTANTS"],"mappings":"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"}

package/dist/components/charts/ScatterGraph/ScatterGraph.cjs CHANGED Viewed

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

package/dist/components/charts/ScatterGraph/ScatterGraph.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScatterGraph.cjs","sources":["../../../../src/components/charts/ScatterGraph/ScatterGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\ninterface ScatterDataPoint {\n x: number;\n y: number;\n additionalInfo?: Record<string, string \| number>;\n}\n\ninterface ScatterDataSeries {\n x: number[];\n y: number[];\n name: string;\n color: string;\n}\n\ninterface ScatterGraphProps {\n dataSeries: ScatterDataSeries[];\n width?: number;\n height?: number;\n xRange?: [number, number];\n yRange?: [number, number];\n xTitle?: string;\n yTitle?: string;\n title?: string;\n}\n\nconst ScatterGraph: React.FC<ScatterGraphProps> = ({\n dataSeries,\n width = 1000,\n height = 600,\n xRange,\n yRange,\n xTitle = \"Columns\",\n yTitle = \"Rows\",\n title = \"Scatter Plot\",\n}) => {\n const plotRef = useRef<HTMLDivElement>(null);\n const theme = usePlotlyTheme();\n\n const { xMin, xMax, yMin, yMax } = useMemo(() => {\n let minX = Number.MAX_VALUE;\n let maxX = Number.MIN_VALUE;\n let minY = Number.MAX_VALUE;\n let maxY = Number.MIN_VALUE;\n\n dataSeries.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 }, [dataSeries]);\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: \"Inter, sans-serif\",\n weight: 400,\n },\n linecolor: theme.lineColor,\n linewidth: 1,\n position: 0,\n zeroline: false,\n }),\n [theme],\n );\n\n const spikeOptions = useMemo(\n () => ({\n showspikes: true,\n spikemode: \"across\" as const,\n spikedash: \"solid\" as const,\n spikecolor: theme.spikeColor,\n spikethickness: 2,\n }),\n [theme],\n );\n\n useEffect(() => {\n if (!plotRef.current) return;\n\n const plotData = dataSeries.map((series) => ({\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: series.color,\n size: 10,\n symbol: \"circle\" as const,\n },\n hovertemplate: `${xTitle}: %{x}<br>${yTitle}: %{y}<extra>${series.name}</extra>`,\n }));\n\n const layout = {\n title: {\n text: title,\n font: {\n size: 32,\n family: \"Inter, sans-serif\",\n color: theme.textColor,\n },\n },\n width,\n height,\n margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },\n paper_bgcolor: theme.paperBg,\n plot_bgcolor: theme.plotBg,\n font: {\n family: \"Inter, sans-serif\",\n },\n dragmode: false as const,\n xaxis: {\n title: {\n text: xTitle,\n font: {\n size: 16,\n color: theme.textSecondary,\n family: \"Inter, sans-serif\",\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 ...spikeOptions,\n ...tickOptions,\n },\n yaxis: {\n title: {\n text: yTitle,\n font: {\n size: 16,\n color: theme.textSecondary,\n family: \"Inter, sans-serif\",\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 ...spikeOptions,\n ...tickOptions,\n },\n legend: {\n x: 0.5,\n y: -0.2,\n xanchor: \"center\" as const,\n yanchor: \"top\" as const,\n orientation: \"h\" as const,\n font: {\n size: 16,\n color: theme.legendColor,\n family: \"Inter, sans-serif\",\n weight: 500,\n },\n },\n showlegend: true,\n hovermode: \"closest\" as const,\n };\n\n const config = {\n responsive: true,\n displayModeBar: false,\n displaylogo: false,\n };\n\n Plotly.newPlot(plotRef.current, plotData, layout, config);\n\n // Capture ref value for cleanup\n const plotElement = plotRef.current;\n\n return () => {\n if (plotElement) {\n Plotly.purge(plotElement);\n }\n };\n }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, effectiveXRange, effectiveYRange, xTicks, yTicks, tickOptions, spikeOptions, theme]);\n\n return (\n <div className=\"chart-container\">\n <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n </div>\n );\n};\n\nexport { ScatterGraph };\nexport type { ScatterDataPoint, ScatterDataSeries, ScatterGraphProps };\n"],"names":["ScatterGraph","dataSeries","width","height","xRange","yRange","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","xMin","xMax","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","spikeOptions","useEffect","plotData","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"ScatterGraph.cjs","sources":["../../../../src/components/charts/ScatterGraph/ScatterGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport { useElementSize } from \"@/hooks/use-element-size\";\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { cn } from \"@/lib/utils\";\nimport { seriesColor } from \"@/utils/colors\";\n\ninterface ScatterDataPoint {\n x: number;\n y: number;\n additionalInfo?: Record<string, string \| number>;\n}\n\ninterface ScatterDataSeries {\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}\n\ninterface ScatterGraphProps {\n dataSeries: ScatterDataSeries[];\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\nconst ScatterGraph: React.FC<ScatterGraphProps> = ({\n dataSeries,\n width,\n height,\n xRange,\n yRange,\n xTitle,\n yTitle,\n title = \"Scatter Plot\",\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 AreaGraph 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 { xMin, xMax, yMin, yMax } = useMemo(() => {\n let minX = Number.MAX_VALUE;\n let maxX = Number.MIN_VALUE;\n let minY = Number.MAX_VALUE;\n let maxY = Number.MIN_VALUE;\n\n dataSeries.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 }, [dataSeries]);\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: \"Inter, sans-serif\",\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 = dataSeries.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: 10,\n symbol: \"circle\" as const,\n },\n hoverinfo: \"none\" as const,\n }));\n\n const layout = {\n title: {\n text: title,\n font: {\n size: 32,\n family: \"Inter, sans-serif\",\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: \"Inter, sans-serif\",\n },\n dragmode: false as const,\n xaxis: {\n title: {\n text: xTitle,\n font: {\n size: 16,\n color: theme.textSecondary,\n family: \"Inter, sans-serif\",\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: \"Inter, sans-serif\",\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: \"Inter, sans-serif\",\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.newPlot(plotRef.current, plotData, layout, config);\n bindTooltip(plotRef.current);\n\n // Capture ref value for cleanup\n const plotElement = plotRef.current;\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 = plotElement 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(plotElement, {\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(plotElement, { shapes: [] });\n });\n\n return () => {\n if (plotElement) {\n Plotly.purge(plotElement);\n plotInitedRef.current = false;\n }\n };\n }, [dataSeries, hasSize, xRange, yRange, xTitle, yTitle, title, 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 void Plotly.relayout(plotElement, { width: resolvedWidth, height: resolvedHeight }).catch(\n () => {},\n );\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 { ScatterGraph };\nexport type { ScatterDataPoint, ScatterDataSeries, ScatterGraphProps };\n"],"names":["ScatterGraph","dataSeries","width","height","xRange","yRange","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","containerRef","measured","useElementSize","resolvedWidth","resolvedHeight","hasSize","fillWidth","fillHeight","sizeRef","plotInitedRef","appliedSizeRef","xMin","xMax","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","useEffect","plotData","index","seriesColor","layout","config","Plotly","plotElement","emitter","crosshairLine","eventData","point","jsxs","cn","jsx"],"mappings":"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"}