@morscherlab/mint-sdk 1.0.0-rc.2 → 1.0.0-rc.5

package/src/components/WellPlate.vue

@@ -4,6 +4,34 @@ import { ref, computed } from 'vue'
 import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition, WellSampleDropData, WellSampleDropParser } from '../types'
 import { useEventListener } from '../composables/useEventListener'
 import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
+import {
+  conditionGradientStyle,
+  formatConcentration as formatConc,
+  HEATMAP_COLORS,
+} from './WellPlate.colors'
+import {
+  createColumnConditionMap,
+  createColumnConditionSpans,
+  createRowConditionMap,
+  createRowConditionSpanByRow,
+  createRowConditionSpans,
+} from './WellPlate.conditions'
+import {
+  createPlateColumnLabels,
+  createPlateRowLabels,
+  createWellGrid,
+  PLATE_CONFIGS,
+  WELL_PLATE_SIZE_CONFIGS,
+} from './WellPlate.geometry'
+import { useWellPlateInteraction } from './WellPlate.interaction'
+import {
+  sampleTypeIndicator,
+  wellBadge,
+  wellClasses,
+  wellLabel,
+  wellStyle,
+} from './WellPlate.rendering'
+import { DEFAULT_WELL_LEGEND_ITEMS } from './WellPlate.legend'
 
 interface Props {
   modelValue?: string[]
@@ -33,10 +61,6 @@ interface Props {
   sampleDropParser?: WellSampleDropParser
 }
 
-// Drag state for moving wells
-const dragSourceWell = ref<string | null>(null)
-const dragTargetWell = ref<string | null>(null)
-
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => [],
   format: 96,
@@ -94,581 +118,109 @@ defineSlots<{
 
 const plateRef = ref<HTMLElement | null>(null)
 const tableRef = ref<HTMLElement | null>(null)
-const isDragging = ref(false)
-const dragStart = ref<{ row: number; col: number } | null>(null)
-const dragEnd = ref<{ row: number; col: number } | null>(null)
-const hoveredWell = ref<string | null>(null)
-
-// Edit popup state
-const editingWellId = ref<string | null>(null)
-const editPopupPosition = ref({ x: 0, y: 0 })
-
-const PLATE_CONFIGS: Record<WellPlateFormat, { rows: number; cols: number }> = {
-  6: { rows: 2, cols: 3 },
-  12: { rows: 3, cols: 4 },
-  24: { rows: 4, cols: 6 },
-  48: { rows: 6, cols: 8 },
-  54: { rows: 6, cols: 9 },
-  96: { rows: 8, cols: 12 },
-  384: { rows: 16, cols: 24 },
-}
 
 const plateConfig = computed(() => PLATE_CONFIGS[props.format])
 
-const rowLabels = computed(() =>
-  Array.from({ length: plateConfig.value.rows }, (_, i) => String.fromCharCode(65 + i))
-)
-
-const colLabels = computed(() =>
-  Array.from({ length: plateConfig.value.cols }, (_, i) => i + 1)
-)
-
-const wellGrid = computed(() => {
-  const grid: Well[][] = []
-  for (let row = 0; row < plateConfig.value.rows; row++) {
-    const rowWells: Well[] = []
-    for (let col = 0; col < plateConfig.value.cols; col++) {
-      const id = `${rowLabels.value[row]}${col + 1}`
-      const wellData = props.wells[id] || {}
-      rowWells.push({
-        id,
-        row,
-        col,
-        state: wellData.state || 'empty',
-        sampleType: wellData.sampleType,
-        value: wellData.value,
-        metadata: wellData.metadata,
-      })
-    }
-    grid.push(rowWells)
-  }
-  return grid
-})
-
-const selectedWellSet = computed(() => new Set(props.modelValue))
+const rowLabels = computed(() => createPlateRowLabels(plateConfig.value))
 
-const dragSelectedWells = computed(() => {
-  if (!isDragging.value || !dragStart.value || !dragEnd.value) return new Set<string>()
+const colLabels = computed(() => createPlateColumnLabels(plateConfig.value))
 
-  const minRow = Math.min(dragStart.value.row, dragEnd.value.row)
-  const maxRow = Math.max(dragStart.value.row, dragEnd.value.row)
-  const minCol = Math.min(dragStart.value.col, dragEnd.value.col)
-  const maxCol = Math.max(dragStart.value.col, dragEnd.value.col)
+const wellGrid = computed(() => createWellGrid(plateConfig.value, rowLabels.value, props.wells))
 
-  const wells = new Set<string>()
-  for (let row = minRow; row <= maxRow; row++) {
-    for (let col = minCol; col <= maxCol; col++) {
-      const id = `${rowLabels.value[row]}${col + 1}`
-      wells.add(id)
-    }
-  }
-  return wells
-})
-
-// Size presets with pixel values for reliable sizing
-const sizeConfig = computed(() => {
-  const sizes = {
-    sm: { cellWidth: '40px', cellHeight: '40px', headerWidth: '32px', headerHeight: '32px', fontSize: '0.625rem', gap: '2px' },
-    md: { cellWidth: '56px', cellHeight: '32px', headerWidth: '32px', headerHeight: '24px', fontSize: '0.75rem', gap: '3px' },
-    lg: { cellWidth: '80px', cellHeight: '40px', headerWidth: '40px', headerHeight: '32px', fontSize: '0.875rem', gap: '4px' },
-    xl: { cellWidth: '96px', cellHeight: '48px', headerWidth: '48px', headerHeight: '40px', fontSize: '1rem', gap: '4px' },
-    fill: { cellWidth: '100%', cellHeight: '32px', headerWidth: '32px', headerHeight: '24px', fontSize: '0.75rem', gap: '2px' },
-  }
-  return sizes[props.size]
-})
+const sizeConfig = computed(() => WELL_PLATE_SIZE_CONFIGS[props.size])
 
 const isFillMode = computed(() => props.size === 'fill')
 
-// Default legend items
-const defaultLegendItems: WellLegendItem[] = [
-  { type: 'sample', label: 'Sample', color: '#10b981' },
-  { type: 'blank', label: 'Blank', color: '#f97316' },
-  { type: 'qc', label: 'QC', color: '#8b5cf6' },
-  { type: 'iqc', label: 'IQC', color: '#ec4899' },
-]
-
-const activeLegendItems = computed(() => props.legendItems ?? defaultLegendItems)
+const activeLegendItems = computed(() => props.legendItems ?? DEFAULT_WELL_LEGEND_ITEMS)
 
 // --- Condition header helpers ---
 
 const hasColumnConditions = computed(() => props.columnConditions.length > 0)
 const hasRowConditions = computed(() => props.rowConditions.length > 0)
 
-// Map column index (1-based) → ColumnCondition
-const colConditionMap = computed(() => {
-  const map = new Map<number, { condition: ColumnCondition; indexInGroup: number }>()
-  for (const cond of props.columnConditions) {
-    cond.cols.forEach((col, i) => {
-      map.set(col, { condition: cond, indexInGroup: i })
-    })
-  }
-  return map
+const colConditionMap = computed(() => createColumnConditionMap(props.columnConditions))
+const rowConditionMap = computed(() => createRowConditionMap(props.rowConditions))
+const colConditionSpans = computed(() => createColumnConditionSpans(colLabels.value, colConditionMap.value))
+const rowConditionSpans = computed(() => createRowConditionSpans(rowLabels.value, rowConditionMap.value))
+const rowConditionSpanByRow = computed(() => createRowConditionSpanByRow(rowConditionSpans.value))
+
+const {
+  dragSourceWell,
+  dragTargetWell,
+  hoveredWell,
+  editingWellId,
+  editPopupPosition,
+  dragSelectedWells,
+  isSelected,
+  handleWellClick,
+  handleEditSave,
+  handleEditClear,
+  handleEditClose,
+  handleWellMouseDown,
+  handleWellMouseEnter,
+  handleWellMouseLeave,
+  handleMouseUp,
+  handleContextMenu,
+  handleDragStart,
+  handleDragOver,
+  handleDragLeave,
+  handleDrop,
+  handleDragEnd,
+  handleKeyDown,
+} = useWellPlateInteraction({
+  modelValue: () => props.modelValue,
+  selectionMode: () => props.selectionMode,
+  disabled: () => props.disabled,
+  readonly: () => props.readonly,
+  editable: () => props.editable,
+  allowSampleDrop: () => props.allowSampleDrop,
+  sampleDropParser: () => props.sampleDropParser,
+  rowLabels: () => rowLabels.value,
+  wellGrid: () => wellGrid.value,
+  emitSelected: (wellIds) => {
+    emit('update:modelValue', wellIds)
+    emit('selection-change', wellIds)
+  },
+  emitWellClick: (wellId, event) => emit('well-click', wellId, event),
+  emitWellHover: (wellId, event) => emit('well-hover', wellId, event),
+  emitContextMenu: (wellId, event) => emit('context-menu', wellId, event),
+  emitWellMove: (sourceWellId, targetWellId) => emit('well-move', sourceWellId, targetWellId),
+  emitWellEdit: (wellId, data) => emit('well-edit', wellId, data),
+  emitWellClear: wellId => emit('well-clear', wellId),
+  emitSampleDrop: (wellId, data, event) => emit('sample-drop', wellId, data, event),
 })
 
-// Map row letter → RowCondition
-const rowConditionMap = computed(() => {
-  const map = new Map<string, { condition: RowCondition; indexInGroup: number }>()
-  for (const cond of props.rowConditions) {
-    cond.rows.forEach((row, i) => {
-      map.set(row, { condition: cond, indexInGroup: i })
-    })
-  }
-  return map
-})
-
-type ColSpan = { condition: ColumnCondition; colspan: number } | { gap: true; colspan: number }
-type RowSpan = { condition: RowCondition; rowspan: number; startRow: number } | { gap: true; rowspan: number; startRow: number }
-
-// Build column condition header spans for the label row (drug name + unit)
-const colConditionSpans = computed<ColSpan[]>(() => {
-  const spans: ColSpan[] = []
-  const cols = colLabels.value
-  let i = 0
-  while (i < cols.length) {
-    const entry = colConditionMap.value.get(cols[i])
-    if (entry?.indexInGroup === 0) {
-      spans.push({ condition: entry.condition, colspan: entry.condition.cols.length })
-      i += entry.condition.cols.length
-    } else {
-      let gapCount = 0
-      while (i + gapCount < cols.length && !colConditionMap.value.has(cols[i + gapCount])) {
-        gapCount++
-      }
-      spans.push({ gap: true, colspan: gapCount || 1 })
-      i += gapCount || 1
-    }
-  }
-  return spans
-})
-
-// Build row condition spans for the label column (drug name rotated)
-const rowConditionSpans = computed<RowSpan[]>(() => {
-  const spans: RowSpan[] = []
-  const rows = rowLabels.value
-  let i = 0
-  while (i < rows.length) {
-    const entry = rowConditionMap.value.get(rows[i])
-    if (entry?.indexInGroup === 0) {
-      spans.push({ condition: entry.condition, rowspan: entry.condition.rows.length, startRow: i })
-      i += entry.condition.rows.length
-    } else {
-      let gapCount = 0
-      while (i + gapCount < rows.length && !rowConditionMap.value.has(rows[i + gapCount])) {
-        gapCount++
-      }
-      spans.push({ gap: true, rowspan: gapCount || 1, startRow: i })
-      i += gapCount || 1
-    }
-  }
-  return spans
-})
-
-// Map row index → span info (only contains entries for first row of each span)
-const rowConditionSpanByRow = computed(() => {
-  const map = new Map<number, RowSpan>()
-  for (const span of rowConditionSpans.value) {
-    map.set(span.startRow, span)
-  }
-  return map
-})
-
-// Compute gradient style for a condition cell: background opacity scales with concentration,
-// text color adapts based on effective luminance against white background
-function conditionGradientStyle(color: string, conc: number, concentrations: number[]): Record<string, string> {
-  const min = Math.min(...concentrations)
-  const max = Math.max(...concentrations)
-  const t = max <= min ? 1 : (conc - min) / (max - min)
-  const opacity = 0.25 + t * 0.50
-  const r = parseInt(color.slice(1, 3), 16)
-  const g = parseInt(color.slice(3, 5), 16)
-  const b = parseInt(color.slice(5, 7), 16)
-  // Blend with white to get effective RGB, then compute relative luminance
-  const er = 255 * (1 - opacity) + r * opacity
-  const eg = 255 * (1 - opacity) + g * opacity
-  const eb = 255 * (1 - opacity) + b * opacity
-  const luminance = (0.299 * er + 0.587 * eg + 0.114 * eb) / 255
-  return {
-    backgroundColor: `rgba(${r}, ${g}, ${b}, ${opacity})`,
-    color: luminance > 0.55 ? '#1e293b' : '#ffffff',
-  }
-}
-
-// Format concentration value (drop trailing zeros)
-function formatConc(value: number): string {
-  if (value >= 1000) return `${value / 1000}k`
-  if (value < 0.01) return value.toExponential(0)
-  return String(value)
-}
-
-// Sample type colors (matching MSExpDesigner)
-const defaultSampleTypeColors: Record<string, { bg: string; border: string }> = {
-  sample: { bg: 'rgba(16, 185, 129, 0.15)', border: 'rgba(16, 185, 129, 0.4)' },
-  control: { bg: 'rgba(59, 130, 246, 0.15)', border: 'rgba(59, 130, 246, 0.4)' },
-  blank: { bg: 'rgba(249, 115, 22, 0.15)', border: 'rgba(249, 115, 22, 0.4)' },
-  qc: { bg: 'rgba(139, 92, 246, 0.15)', border: 'rgba(139, 92, 246, 0.4)' },
-  iqc: { bg: 'rgba(236, 72, 153, 0.15)', border: 'rgba(236, 72, 153, 0.4)' },
-}
-
-const heatmapColors: Record<string, string[]> = {
-  viridis: ['#440154', '#482878', '#3e4989', '#31688e', '#26828e', '#1f9e89', '#35b779', '#6ece58', '#b5de2b', '#fde725'],
-  plasma: ['#0d0887', '#46039f', '#7201a8', '#9c179e', '#bd3786', '#d8576b', '#ed7953', '#fb9f3a', '#fdca26', '#f0f921'],
-  turbo: ['#30123b', '#4145ab', '#4675ed', '#39a2fc', '#1bcfd4', '#24e79e', '#71f05f', '#c1f034', '#f1c83c', '#f99538', '#e45a31', '#ba2512', '#7a0403'],
-}
-
-function getHeatmapColor(value: number | undefined): string | null {
-  if (!props.heatmap?.enabled || value === undefined) return null
-
-  const min = props.heatmap.min ?? 0
-  const max = props.heatmap.max ?? 1
-  const normalized = Math.max(0, Math.min(1, (value - min) / (max - min)))
-
-  const colors = props.heatmap.colorScale === 'custom' && props.heatmap.customColors?.length
-    ? props.heatmap.customColors
-    : heatmapColors[props.heatmap.colorScale || 'viridis']
-
-  const index = Math.min(Math.floor(normalized * (colors.length - 1)), colors.length - 1)
-  return colors[index]
-}
-
 function getWellClasses(well: Well): string[] {
-  const isWellSelected = isSelected(well.id)
-  const isDragOver = dragSelectedWells.value.has(well.id)
-  const isHovered = hoveredWell.value === well.id
-  const isDisabled = props.disabled || well.state === 'disabled'
-  const isDragSource = dragSourceWell.value === well.id
-  const isDragTarget = dragTargetWell.value === well.id
-
-  const classes = [
-    'mint-well-plate__well',
-    props.wellShape === 'circle' ? 'mint-well-plate__well--circle' : 'mint-well-plate__well--rounded',
-  ]
-
-  if (props.selectionMode === 'drag' && well.sampleType) {
-    classes.push('mint-well-plate__well--draggable')
-  }
-
-  if (isDragSource) classes.push('mint-well-plate__well--drag-source')
-  else if (isDragTarget) classes.push('mint-well-plate__well--drag-target')
-  else if (isWellSelected) classes.push('mint-well-plate__well--selected')
-  else if (isDragOver) classes.push('mint-well-plate__well--drag-over')
-  else if (isHovered && !props.readonly) classes.push('mint-well-plate__well--hovered')
-
-  if (isDisabled) classes.push('mint-well-plate__well--disabled')
-  if (well.state === 'filled') classes.push('mint-well-plate__well--filled')
-
-  return classes
+  return wellClasses(well, {
+    wellShape: props.wellShape,
+    selectionMode: props.selectionMode,
+    selected: isSelected(well.id),
+    dragOver: dragSelectedWells.value.has(well.id),
+    hovered: hoveredWell.value === well.id,
+    disabled: props.disabled || well.state === 'disabled',
+    readonly: props.readonly,
+    dragSource: dragSourceWell.value === well.id,
+    dragTarget: dragTargetWell.value === well.id,
+  })
 }
 
 function getWellStyle(well: Well): Record<string, string> {
-  const heatmapColor = getHeatmapColor(well.value)
-  if (heatmapColor) {
-    return { backgroundColor: heatmapColor, border: '1px solid transparent' }
-  }
-
-  if (well.sampleType && props.sampleColors[well.sampleType]) {
-    const color = props.sampleColors[well.sampleType]
-    return {
-      backgroundColor: `${color}26`,
-      border: `1px solid ${color}66`,
-    }
-  }
-
-  if (well.sampleType && defaultSampleTypeColors[well.sampleType]) {
-    const colors = defaultSampleTypeColors[well.sampleType]
-    return {
-      backgroundColor: colors.bg,
-      border: `1px solid ${colors.border}`,
-    }
-  }
-
-  const borderStyle = well.state === 'filled' ? 'solid' : 'dashed'
-  return {
-    backgroundColor: 'var(--bg-tertiary)',
-    border: `1px ${borderStyle} var(--border-color)`,
-  }
+  return wellStyle(well, {
+    heatmap: props.heatmap,
+    sampleColors: props.sampleColors,
+  })
 }
 
 function getSampleTypeIndicator(well: Well): string | null {
-  if (!props.showSampleTypeIndicator || !well.sampleType) return null
-  const typeMap: Record<string, string> = {
-    sample: 'S',
-    control: 'C',
-    blank: 'B',
-    qc: 'Q',
-    iqc: 'I',
-  }
-  return typeMap[well.sampleType] || well.sampleType.charAt(0).toUpperCase()
+  return sampleTypeIndicator(well, props.showSampleTypeIndicator)
 }
 
 function getWellLabel(well: Well): string | undefined {
-  if (!props.showWellLabels) return undefined
-  return well.metadata?.label as string | undefined
+  return wellLabel(well, props.showWellLabels)
 }
 
 function getWellBadge(well: Well): { text: string; color: string } | null {
-  if (!props.showBadges || !well.metadata) return null
-  const count = well.metadata.injectionCount as number | undefined
-  if (count && count > 1) {
-    return { text: String(count), color: '#6366f1' }
-  }
-  if (well.metadata.customMethod) {
-    return { text: '+', color: '#ec4899' }
-  }
-  return null
-}
-
-function isSelected(wellId: string): boolean {
-  return selectedWellSet.value.has(wellId) || dragSelectedWells.value.has(wellId)
-}
-
-function handleWellClick(well: Well, event: MouseEvent) {
-  if (props.disabled || props.readonly) return
-
-  emit('well-click', well.id, event)
-
-  // When editable, open popup instead of modifying selection
-  if (props.editable) {
-    openEditPopup(well.id, event)
-    return
-  }
-
-  if (props.selectionMode === 'none') return
-
-  const isCurrentlySelected = selectedWellSet.value.has(well.id)
-  const isMultiSelect = event.shiftKey || event.metaKey || event.ctrlKey
-
-  let newSelection: string[]
-  if (props.selectionMode === 'single') {
-    newSelection = isCurrentlySelected ? [] : [well.id]
-  } else if (isMultiSelect) {
-    newSelection = isCurrentlySelected
-      ? props.modelValue.filter(id => id !== well.id)
-      : [...props.modelValue, well.id]
-  } else {
-    newSelection = isCurrentlySelected && props.modelValue.length === 1 ? [] : [well.id]
-  }
-
-  emit('update:modelValue', newSelection)
-  emit('selection-change', newSelection)
-}
-
-function openEditPopup(wellId: string, event: MouseEvent) {
-  const target = event.currentTarget as HTMLElement
-  const rect = target.getBoundingClientRect()
-  editPopupPosition.value = {
-    x: rect.right + 8,
-    y: rect.top,
-  }
-  editingWellId.value = wellId
-}
-
-function handleEditSave(data: WellEditData) {
-  emit('well-edit', data.wellId, data)
-  editingWellId.value = null
-}
-
-function handleEditClear() {
-  if (editingWellId.value) {
-    emit('well-clear', editingWellId.value)
-  }
-  editingWellId.value = null
-}
-
-function handleEditClose() {
-  editingWellId.value = null
-}
-
-function handleWellMouseDown(well: Well, event: MouseEvent) {
-  if (props.disabled || props.readonly || props.selectionMode !== 'rectangle') return
-  if (props.editable) return
-  if (event.button !== 0) return
-
-  isDragging.value = true
-  dragStart.value = { row: well.row, col: well.col }
-  dragEnd.value = { row: well.row, col: well.col }
-}
-
-function handleWellMouseEnter(well: Well, event: MouseEvent) {
-  hoveredWell.value = well.id
-  emit('well-hover', well.id, event)
-
-  if (isDragging.value && props.selectionMode === 'rectangle') {
-    dragEnd.value = { row: well.row, col: well.col }
-  }
-}
-
-function handleWellMouseLeave() {
-  hoveredWell.value = null
-  emit('well-hover', null)
-}
-
-function handleMouseUp() {
-  if (!isDragging.value || props.selectionMode !== 'rectangle') return
-
-  const newSelection = Array.from(dragSelectedWells.value)
-  isDragging.value = false
-  dragStart.value = null
-  dragEnd.value = null
-
-  if (newSelection.length > 0) {
-    emit('update:modelValue', newSelection)
-    emit('selection-change', newSelection)
-  }
-}
-
-function handleContextMenu(well: Well, event: MouseEvent) {
-  event.preventDefault()
-  emit('context-menu', well.id, event)
-}
-
-// Drag handlers for moving well contents
-function handleDragStart(well: Well, event: DragEvent) {
-  if (props.disabled || props.readonly || props.selectionMode !== 'drag') return
-  if (!well.sampleType) return
-
-  dragSourceWell.value = well.id
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-    event.dataTransfer.setData('text/plain', well.id)
-  }
-}
-
-function handleDragOver(well: Well, event: DragEvent) {
-  const isMovingWell = props.selectionMode === 'drag' && !!dragSourceWell.value
-  if (!isMovingWell && !props.allowSampleDrop) return
-
-  event.preventDefault()
-  if (event.dataTransfer) {
-    event.dataTransfer.dropEffect = isMovingWell ? 'move' : 'copy'
-  }
-  dragTargetWell.value = well.id
-}
-
-function handleDragLeave() {
-  dragTargetWell.value = null
-}
-
-function handleDrop(well: Well, event: DragEvent) {
-  const isMovingWell = props.selectionMode === 'drag' && !!dragSourceWell.value
-  if (!isMovingWell && !props.allowSampleDrop) return
-
-  event.preventDefault()
-
-  if (isMovingWell && dragSourceWell.value) {
-    const sourceId = dragSourceWell.value
-    const targetId = well.id
-
-    if (sourceId !== targetId) {
-      emit('well-move', sourceId, targetId)
-    }
-
-    dragSourceWell.value = null
-    dragTargetWell.value = null
-    return
-  }
-
-  const droppedSample = parseDroppedSample(event, well.id)
-  if (droppedSample) {
-    emit('sample-drop', well.id, droppedSample, event)
-  }
-
-  dragSourceWell.value = null
-  dragTargetWell.value = null
-}
-
-function handleDragEnd() {
-  dragSourceWell.value = null
-  dragTargetWell.value = null
-}
-
-function parseDroppedSample(event: DragEvent, wellId: string): WellSampleDropData | null {
-  if (props.sampleDropParser) {
-    return props.sampleDropParser(event, { wellId, event }) ?? null
-  }
-
-  const transfer = event.dataTransfer
-  if (!transfer) return null
-
-  const json = transfer.getData('application/json') || transfer.getData('text/json')
-  if (json) {
-    try {
-      return normalizeDroppedSample(JSON.parse(json))
-    } catch {
-      return null
-    }
-  }
-
-  const text = transfer.getData('text/plain')?.trim()
-  if (!text) return null
-  return {
-    sampleName: text,
-    label: text,
-    raw: text,
-  }
-}
-
-function normalizeDroppedSample(raw: unknown): WellSampleDropData | null {
-  if (!raw || typeof raw !== 'object') return null
-
-  const record = raw as Record<string, unknown>
-  const sampleName =
-    getString(record.sampleName) ??
-    getString(record.sample_name) ??
-    getString(record.name) ??
-    getString(record.label)
-  const label = getString(record.label) ?? sampleName
-  const sampleType =
-    getString(record.sampleType) ??
-    getString(record.sample_type) ??
-    (record.type === 'sample' ? 'sample' : undefined)
-
-  if (!sampleName && !label && !getString(record.id)) return null
-
-  return {
-    id: getString(record.id),
-    sampleName,
-    label,
-    sampleType,
-    injectionVolume: getNumber(record.injectionVolume ?? record.injection_volume),
-    injectionCount: getNumber(record.injectionCount ?? record.injection_count),
-    customMethod: getString(record.customMethod ?? record.custom_method) ?? null,
-    metadata: getRecord(record.metadata),
-    raw,
-  }
-}
-
-function getString(value: unknown): string | undefined {
-  return typeof value === 'string' && value.trim() ? value.trim() : undefined
-}
-
-function getNumber(value: unknown): number | undefined {
-  return typeof value === 'number' && Number.isFinite(value) ? value : undefined
-}
-
-function getRecord(value: unknown): Record<string, unknown> | undefined {
-  return value && typeof value === 'object' && !Array.isArray(value)
-    ? value as Record<string, unknown>
-    : undefined
-}
-
-function handleKeyDown(event: KeyboardEvent) {
-  if (props.disabled || props.readonly) return
-
-  if (event.key === 'Escape') {
-    if (editingWellId.value) {
-      editingWellId.value = null
-      return
-    }
-    emit('update:modelValue', [])
-    emit('selection-change', [])
-  }
-
-  if ((event.key === 'a' || event.key === 'A') && (event.metaKey || event.ctrlKey)) {
-    event.preventDefault()
-    const allWells = wellGrid.value.flat().map(w => w.id)
-    emit('update:modelValue', allWells)
-    emit('selection-change', allWells)
-  }
+  return wellBadge(well, props.showBadges)
 }
 
 useEventListener(() => document, 'mouseup', handleMouseUp)
@@ -886,7 +438,7 @@ const tableStyle = computed(() => ({
           <span class="mint-well-plate__legend-label">{{ props.heatmap.min ?? 0 }}</span>
           <div class="mint-well-plate__legend-bar">
             <div
-              v-for="(color, index) in (props.heatmap.colorScale === 'custom' && props.heatmap.customColors?.length ? props.heatmap.customColors : heatmapColors[props.heatmap.colorScale || 'viridis'])"
+              v-for="(color, index) in (props.heatmap.colorScale === 'custom' && props.heatmap.customColors?.length ? props.heatmap.customColors : HEATMAP_COLORS[props.heatmap.colorScale || 'viridis'])"
               :key="index"
               class="mint-well-plate__legend-segment"
               :style="{ backgroundColor: color }"