@morscherlab/mld-sdk 0.6.0

package/src/components/WellPlate.vue

@@ -0,0 +1,637 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem } from '../types'
+import WellEditPopup from './WellEditPopup.vue'
+
+interface Props {
+  modelValue?: string[]
+  format?: WellPlateFormat
+  wells?: Record<string, Partial<Well>>
+  selectionMode?: WellPlateSelectionMode
+  showLabels?: boolean
+  showWellIds?: boolean
+  showSampleTypeIndicator?: boolean
+  heatmap?: HeatmapConfig
+  sampleColors?: Record<string, string>
+  zoom?: number
+  disabled?: boolean
+  readonly?: boolean
+  size?: WellPlateSize
+  wellShape?: WellShape
+  // New editing props
+  showWellLabels?: boolean
+  showBadges?: boolean
+  editable?: boolean
+  editFields?: WellEditField[]
+  defaultInjectionVolume?: number
+  showLegend?: boolean
+  legendItems?: WellLegendItem[]
+}
+
+// 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,
+  wells: () => ({}),
+  selectionMode: 'multiple',
+  showLabels: true,
+  showWellIds: false,
+  showSampleTypeIndicator: false,
+  heatmap: () => ({ enabled: false }),
+  sampleColors: () => ({}),
+  zoom: 1,
+  disabled: false,
+  readonly: false,
+  size: 'md',
+  wellShape: 'rounded',
+  // New props default to off for backward compatibility
+  showWellLabels: false,
+  showBadges: false,
+  editable: false,
+  editFields: () => ['label', 'sampleType', 'injectionVolume', 'injectionCount', 'customMethod'],
+  defaultInjectionVolume: 5,
+  showLegend: false,
+  legendItems: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [wellIds: string[]]
+  'well-click': [wellId: string, event: MouseEvent]
+  'well-hover': [wellId: string | null, event?: MouseEvent]
+  'selection-change': [wellIds: string[]]
+  'context-menu': [wellId: string, event: MouseEvent]
+  'well-move': [sourceWellId: string, targetWellId: string]
+  // New editing emits
+  'well-edit': [wellId: string, data: WellEditData]
+  'well-clear': [wellId: string]
+}>()
+
+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 dragSelectedWells = computed(() => {
+  if (!isDragging.value || !dragStart.value || !dragEnd.value) return new Set<string>()
+
+  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 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 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' },
+]
+
+const activeLegendItems = computed(() => props.legendItems ?? defaultLegendItems)
+
+// 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)' },
+}
+
+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 = [
+    'mld-well-plate__well',
+    props.wellShape === 'circle' ? 'mld-well-plate__well--circle' : 'mld-well-plate__well--rounded',
+  ]
+
+  if (props.selectionMode === 'drag' && well.sampleType) {
+    classes.push('mld-well-plate__well--draggable')
+  }
+
+  if (isDragSource) classes.push('mld-well-plate__well--drag-source')
+  else if (isDragTarget) classes.push('mld-well-plate__well--drag-target')
+  else if (isWellSelected) classes.push('mld-well-plate__well--selected')
+  else if (isDragOver) classes.push('mld-well-plate__well--drag-over')
+  else if (isHovered && !props.readonly) classes.push('mld-well-plate__well--hovered')
+
+  if (isDisabled) classes.push('mld-well-plate__well--disabled')
+  if (well.state === 'filled') classes.push('mld-well-plate__well--filled')
+
+  return classes
+}
+
+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)`,
+  }
+}
+
+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',
+  }
+  return typeMap[well.sampleType] || well.sampleType.charAt(0).toUpperCase()
+}
+
+function getWellLabel(well: Well): string | undefined {
+  if (!props.showWellLabels) return undefined
+  return well.metadata?.label as string | undefined
+}
+
+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) {
+  if (props.selectionMode !== 'drag' || !dragSourceWell.value) return
+  event.preventDefault()
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+  dragTargetWell.value = well.id
+}
+
+function handleDragLeave() {
+  dragTargetWell.value = null
+}
+
+function handleDrop(well: Well, event: DragEvent) {
+  event.preventDefault()
+  if (props.selectionMode !== 'drag' || !dragSourceWell.value) return
+
+  const sourceId = dragSourceWell.value
+  const targetId = well.id
+
+  if (sourceId !== targetId) {
+    emit('well-move', sourceId, targetId)
+  }
+
+  dragSourceWell.value = null
+  dragTargetWell.value = null
+}
+
+function handleDragEnd() {
+  dragSourceWell.value = null
+  dragTargetWell.value = null
+}
+
+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)
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mouseup', handleMouseUp)
+  document.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mouseup', handleMouseUp)
+  document.removeEventListener('keydown', handleKeyDown)
+})
+
+const containerStyle = computed(() =>
+  isFillMode.value ? {} : {
+    transform: `scale(${props.zoom})`,
+    transformOrigin: 'top left',
+  }
+)
+
+const tableStyle = computed(() => ({
+  borderCollapse: 'separate' as const,
+  borderSpacing: sizeConfig.value.gap,
+  ...(isFillMode.value ? { width: '100%', tableLayout: 'fixed' as const } : {}),
+}))
+</script>
+
+<template>
+  <div
+    ref="plateRef"
+    :class="['mld-well-plate', isFillMode ? 'mld-well-plate--fill' : 'mld-well-plate--inline']"
+    :style="containerStyle"
+  >
+    <div class="mld-well-plate__scroll">
+      <div class="mld-well-plate__content">
+        <table
+          ref="tableRef"
+          class="mld-well-plate__table"
+          role="grid"
+          :aria-label="`${props.format}-well plate`"
+          :style="tableStyle"
+        >
+        <!-- Column headers -->
+        <thead v-if="props.showLabels">
+          <tr>
+            <th :style="{ width: sizeConfig.headerWidth, height: sizeConfig.headerHeight }"></th>
+            <th
+              v-for="col in colLabels"
+              :key="col"
+              class="mld-well-plate__col-header"
+              :style="{ height: sizeConfig.headerHeight, fontSize: sizeConfig.fontSize }"
+            >
+              {{ col }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, rowIndex) in wellGrid" :key="rowIndex" role="row">
+            <!-- Row header -->
+            <td
+              v-if="props.showLabels"
+              class="mld-well-plate__row-header"
+              :style="{ width: sizeConfig.headerWidth, height: sizeConfig.cellHeight, minWidth: sizeConfig.headerWidth, minHeight: sizeConfig.cellHeight, fontSize: sizeConfig.fontSize }"
+            >
+              {{ rowLabels[rowIndex] }}
+            </td>
+
+            <!-- Wells -->
+            <td v-for="well in row" :key="well.id" class="mld-well-plate__cell">
+              <div
+                role="gridcell"
+                tabindex="0"
+                :aria-label="`Well ${well.id}${well.sampleType ? `, Sample type: ${well.sampleType}` : ''}${well.value !== undefined ? `, Value: ${well.value}` : ''}`"
+                :aria-selected="isSelected(well.id)"
+                :aria-disabled="props.disabled || well.state === 'disabled'"
+                :draggable="props.selectionMode === 'drag' && !!well.sampleType"
+                :class="getWellClasses(well)"
+                :style="{
+                  width: isFillMode ? '100%' : sizeConfig.cellWidth,
+                  height: sizeConfig.cellHeight,
+                  minWidth: isFillMode ? '0' : sizeConfig.cellWidth,
+                  minHeight: sizeConfig.cellHeight,
+                  boxSizing: 'border-box',
+                  fontSize: sizeConfig.fontSize,
+                  ...getWellStyle(well),
+                }"
+                :title="`${well.id}${well.sampleType ? `: ${well.sampleType}` : ''}${getWellLabel(well) ? ` - ${getWellLabel(well)}` : ''}`"
+                @click="handleWellClick(well, $event)"
+                @mousedown="handleWellMouseDown(well, $event)"
+                @mouseenter="handleWellMouseEnter(well, $event)"
+                @mouseleave="handleWellMouseLeave"
+                @contextmenu="handleContextMenu(well, $event)"
+                @dragstart="handleDragStart(well, $event)"
+                @dragover.prevent="handleDragOver(well, $event)"
+                @dragleave="handleDragLeave"
+                @drop.prevent="handleDrop(well, $event)"
+                @dragend="handleDragEnd"
+                @keydown.enter="handleWellClick(well, $event as unknown as MouseEvent)"
+                @keydown.space.prevent="handleWellClick(well, $event as unknown as MouseEvent)"
+              >
+                <!-- Well label text (from metadata.label) -->
+                <span
+                  v-if="getWellLabel(well)"
+                  class="mld-well-plate__label"
+                >
+                  {{ getWellLabel(well) }}
+                </span>
+                <!-- Sample type indicator (S/B/Q/C) -->
+                <span
+                  v-else-if="getSampleTypeIndicator(well)"
+                  class="mld-well-plate__indicator"
+                >
+                  {{ getSampleTypeIndicator(well) }}
+                </span>
+                <!-- Well ID -->
+                <span
+                  v-else-if="props.showWellIds"
+                  class="mld-well-plate__well-id"
+                >
+                  {{ well.id }}
+                </span>
+
+                <!-- Badge (injection count or custom method) -->
+                <span
+                  v-if="getWellBadge(well)"
+                  class="mld-well-plate__badge"
+                  :style="{ backgroundColor: getWellBadge(well)!.color }"
+                  :title="getWellBadge(well)!.text === '+' ? 'Custom method' : `${getWellBadge(well)!.text}x injections`"
+                >
+                  {{ getWellBadge(well)!.text }}
+                </span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+        </table>
+
+        <!-- Heatmap legend (inside content wrapper to match table width) -->
+        <div
+          v-if="props.heatmap?.enabled && props.heatmap.showLegend"
+          class="mld-well-plate__legend"
+        >
+          <span class="mld-well-plate__legend-label">{{ props.heatmap.min ?? 0 }}</span>
+          <div class="mld-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'])"
+              :key="index"
+              class="mld-well-plate__legend-segment"
+              :style="{ backgroundColor: color }"
+            />
+          </div>
+          <span class="mld-well-plate__legend-label">{{ props.heatmap.max ?? 1 }}</span>
+        </div>
+
+        <!-- Sample type legend bar -->
+        <div v-if="props.showLegend" class="mld-well-plate__sample-legend">
+          <div
+            v-for="item in activeLegendItems"
+            :key="item.type"
+            class="mld-well-plate__sample-legend-item"
+          >
+            <span
+              class="mld-well-plate__sample-legend-dot"
+              :style="{ backgroundColor: `${item.color}26`, border: `1px solid ${item.color}66` }"
+            />
+            <span class="mld-well-plate__sample-legend-text">{{ item.label }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit popup -->
+    <WellEditPopup
+      v-if="editable && editingWellId"
+      :well-id="editingWellId"
+      :well-data="wells[editingWellId]"
+      :edit-fields="editFields"
+      :default-injection-volume="defaultInjectionVolume"
+      :position="editPopupPosition"
+      @save="handleEditSave"
+      @clear="handleEditClear"
+      @close="handleEditClose"
+    />
+  </div>
+</template>
+
+<style>
+@import '../styles/components/well-plate.css';
+</style>