npm - @tetrascience-npm/tetrascience-react-ui - Versions diffs - 0.6.0-beta.83.1 → 0.6.0-beta.84.1 - Mend

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

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

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