@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/components/WellPlate.geometry.ts

@@ -0,0 +1,91 @@
+import type { Well, WellPlateFormat, WellPlateSize } from '../types'
+
+export interface WellPlateConfig {
+  rows: number
+  cols: number
+}
+
+export interface WellPlateCoordinate {
+  row: number
+  col: number
+}
+
+export interface WellPlateSizeConfig {
+  cellWidth: string
+  cellHeight: string
+  headerWidth: string
+  headerHeight: string
+  fontSize: string
+  gap: string
+}
+
+export const PLATE_CONFIGS: Record<WellPlateFormat, WellPlateConfig> = {
+  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 },
+}
+
+export const WELL_PLATE_SIZE_CONFIGS: Record<WellPlateSize, WellPlateSizeConfig> = {
+  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' },
+}
+
+export function createPlateRowLabels(config: WellPlateConfig): string[] {
+  return Array.from({ length: config.rows }, (_, index) => String.fromCharCode(65 + index))
+}
+
+export function createPlateColumnLabels(config: WellPlateConfig): number[] {
+  return Array.from({ length: config.cols }, (_, index) => index + 1)
+}
+
+export function createWellGrid(
+  config: WellPlateConfig,
+  rowLabels: string[],
+  wells: Record<string, Partial<Well>>,
+): Well[][] {
+  const grid: Well[][] = []
+  for (let row = 0; row < config.rows; row++) {
+    const rowWells: Well[] = []
+    for (let col = 0; col < config.cols; col++) {
+      const id = `${rowLabels[row]}${col + 1}`
+      const wellData = 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
+}
+
+export function getRectangleWellIds(
+  start: WellPlateCoordinate,
+  end: WellPlateCoordinate,
+  rowLabels: string[],
+): Set<string> {
+  const minRow = Math.min(start.row, end.row)
+  const maxRow = Math.max(start.row, end.row)
+  const minCol = Math.min(start.col, end.col)
+  const maxCol = Math.max(start.col, end.col)
+
+  const wells = new Set<string>()
+  for (let row = minRow; row <= maxRow; row++) {
+    for (let col = minCol; col <= maxCol; col++) {
+      wells.add(`${rowLabels[row]}${col + 1}`)
+    }
+  }
+  return wells
+}

package/src/components/WellPlate.interaction.ts

@@ -0,0 +1,272 @@
+import { computed, ref } from 'vue'
+import type {
+  Well,
+  WellEditData,
+  WellPlateSelectionMode,
+  WellSampleDropData,
+  WellSampleDropParser,
+} from '../types'
+import {
+  getRectangleWellIds,
+  type WellPlateCoordinate,
+} from './WellPlate.geometry'
+import { parseDroppedSampleTransfer } from './WellPlate.sampleDrop'
+
+export interface WellPlateInteractionOptions {
+  modelValue: () => string[]
+  selectionMode: () => WellPlateSelectionMode
+  disabled: () => boolean
+  readonly: () => boolean
+  editable: () => boolean
+  allowSampleDrop: () => boolean
+  sampleDropParser: () => WellSampleDropParser | undefined
+  rowLabels: () => string[]
+  wellGrid: () => Well[][]
+  emitSelected: (wellIds: string[]) => void
+  emitWellClick: (wellId: string, event: MouseEvent) => void
+  emitWellHover: (wellId: string | null, event?: MouseEvent) => void
+  emitContextMenu: (wellId: string, event: MouseEvent) => void
+  emitWellMove: (sourceWellId: string, targetWellId: string) => void
+  emitWellEdit: (wellId: string, data: WellEditData) => void
+  emitWellClear: (wellId: string) => void
+  emitSampleDrop: (wellId: string, data: WellSampleDropData, event: DragEvent) => void
+}
+
+export function nextClickedWellSelection(
+  selectedWellIds: string[],
+  wellId: string,
+  selectionMode: WellPlateSelectionMode,
+  event: Pick<MouseEvent, 'shiftKey' | 'metaKey' | 'ctrlKey'>,
+): string[] {
+  const selectedWellSet = new Set(selectedWellIds)
+  const isCurrentlySelected = selectedWellSet.has(wellId)
+  const isMultiSelect = event.shiftKey || event.metaKey || event.ctrlKey
+
+  if (selectionMode === 'single') {
+    return isCurrentlySelected ? [] : [wellId]
+  }
+
+  if (isMultiSelect) {
+    return isCurrentlySelected
+      ? selectedWellIds.filter(id => id !== wellId)
+      : [...selectedWellIds, wellId]
+  }
+
+  return isCurrentlySelected && selectedWellIds.length === 1 ? [] : [wellId]
+}
+
+export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
+  const dragSourceWell = ref<string | null>(null)
+  const dragTargetWell = ref<string | null>(null)
+  const isDragging = ref(false)
+  const dragStart = ref<WellPlateCoordinate | null>(null)
+  const dragEnd = ref<WellPlateCoordinate | null>(null)
+  const hoveredWell = ref<string | null>(null)
+  const editingWellId = ref<string | null>(null)
+  const editPopupPosition = ref({ x: 0, y: 0 })
+
+  const selectedWellSet = computed(() => new Set(options.modelValue()))
+
+  const dragSelectedWells = computed(() => {
+    if (!isDragging.value || !dragStart.value || !dragEnd.value) return new Set<string>()
+    return getRectangleWellIds(dragStart.value, dragEnd.value, options.rowLabels())
+  })
+
+  function emitSelected(wellIds: string[]) {
+    options.emitSelected(wellIds)
+  }
+
+  function isSelected(wellId: string): boolean {
+    return selectedWellSet.value.has(wellId) || dragSelectedWells.value.has(wellId)
+  }
+
+  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 handleWellClick(well: Well, event: MouseEvent) {
+    if (options.disabled() || options.readonly()) return
+
+    options.emitWellClick(well.id, event)
+
+    if (options.editable()) {
+      openEditPopup(well.id, event)
+      return
+    }
+
+    const selectionMode = options.selectionMode()
+    if (selectionMode === 'none') return
+
+    emitSelected(nextClickedWellSelection(options.modelValue(), well.id, selectionMode, event))
+  }
+
+  function handleEditSave(data: WellEditData) {
+    options.emitWellEdit(data.wellId, data)
+    editingWellId.value = null
+  }
+
+  function handleEditClear() {
+    if (editingWellId.value) options.emitWellClear(editingWellId.value)
+    editingWellId.value = null
+  }
+
+  function handleEditClose() {
+    editingWellId.value = null
+  }
+
+  function handleWellMouseDown(well: Well, event: MouseEvent) {
+    if (options.disabled() || options.readonly() || options.selectionMode() !== 'rectangle') return
+    if (options.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
+    options.emitWellHover(well.id, event)
+
+    if (isDragging.value && options.selectionMode() === 'rectangle') {
+      dragEnd.value = { row: well.row, col: well.col }
+    }
+  }
+
+  function handleWellMouseLeave() {
+    hoveredWell.value = null
+    options.emitWellHover(null)
+  }
+
+  function handleMouseUp() {
+    if (!isDragging.value || options.selectionMode() !== 'rectangle') return
+
+    const newSelection = Array.from(dragSelectedWells.value)
+    isDragging.value = false
+    dragStart.value = null
+    dragEnd.value = null
+
+    if (newSelection.length > 0) emitSelected(newSelection)
+  }
+
+  function handleContextMenu(well: Well, event: MouseEvent) {
+    event.preventDefault()
+    options.emitContextMenu(well.id, event)
+  }
+
+  function handleDragStart(well: Well, event: DragEvent) {
+    if (options.disabled() || options.readonly() || options.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 = options.selectionMode() === 'drag' && !!dragSourceWell.value
+    if (!isMovingWell && !options.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 = options.selectionMode() === 'drag' && !!dragSourceWell.value
+    if (!isMovingWell && !options.allowSampleDrop()) return
+
+    event.preventDefault()
+
+    if (isMovingWell && dragSourceWell.value) {
+      const sourceId = dragSourceWell.value
+      const targetId = well.id
+
+      if (sourceId !== targetId) options.emitWellMove(sourceId, targetId)
+
+      dragSourceWell.value = null
+      dragTargetWell.value = null
+      return
+    }
+
+    const droppedSample = parseDroppedSample(event, well.id)
+    if (droppedSample) options.emitSampleDrop(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 {
+    const customParser = options.sampleDropParser()
+    if (customParser) return customParser(event, { wellId, event }) ?? null
+
+    const transfer = event.dataTransfer
+    if (!transfer) return null
+    return parseDroppedSampleTransfer(transfer)
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (options.disabled() || options.readonly()) return
+
+    if (event.key === 'Escape') {
+      if (editingWellId.value) {
+        editingWellId.value = null
+        return
+      }
+      emitSelected([])
+    }
+
+    if ((event.key === 'a' || event.key === 'A') && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault()
+      emitSelected(options.wellGrid().flat().map(w => w.id))
+    }
+  }
+
+  return {
+    dragSourceWell,
+    dragTargetWell,
+    isDragging,
+    dragStart,
+    dragEnd,
+    hoveredWell,
+    editingWellId,
+    editPopupPosition,
+    selectedWellSet,
+    dragSelectedWells,
+    isSelected,
+    handleWellClick,
+    handleEditSave,
+    handleEditClear,
+    handleEditClose,
+    handleWellMouseDown,
+    handleWellMouseEnter,
+    handleWellMouseLeave,
+    handleMouseUp,
+    handleContextMenu,
+    handleDragStart,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    handleDragEnd,
+    handleKeyDown,
+  }
+}

package/src/components/WellPlate.legend.ts

@@ -0,0 +1,8 @@
+import type { WellLegendItem } from '../types'
+
+export const DEFAULT_WELL_LEGEND_ITEMS: 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' },
+]

package/src/components/WellPlate.rendering.ts

@@ -0,0 +1,105 @@
+import type { HeatmapConfig, Well, WellPlateSelectionMode, WellShape } from '../types'
+import {
+  DEFAULT_SAMPLE_TYPE_COLORS,
+  getHeatmapColor,
+} from './WellPlate.colors'
+
+export interface WellClassState {
+  wellShape: WellShape
+  selectionMode: WellPlateSelectionMode
+  selected: boolean
+  dragOver: boolean
+  hovered: boolean
+  disabled: boolean
+  readonly: boolean
+  dragSource: boolean
+  dragTarget: boolean
+}
+
+export interface WellStyleState {
+  heatmap: HeatmapConfig
+  sampleColors: Record<string, string>
+}
+
+export function wellClasses(well: Well, state: WellClassState): string[] {
+  const classes = [
+    'mint-well-plate__well',
+    state.wellShape === 'circle' ? 'mint-well-plate__well--circle' : 'mint-well-plate__well--rounded',
+  ]
+
+  if (state.selectionMode === 'drag' && well.sampleType) {
+    classes.push('mint-well-plate__well--draggable')
+  }
+
+  if (state.dragSource) classes.push('mint-well-plate__well--drag-source')
+  else if (state.dragTarget) classes.push('mint-well-plate__well--drag-target')
+  else if (state.selected) classes.push('mint-well-plate__well--selected')
+  else if (state.dragOver) classes.push('mint-well-plate__well--drag-over')
+  else if (state.hovered && !state.readonly) classes.push('mint-well-plate__well--hovered')
+
+  if (state.disabled) classes.push('mint-well-plate__well--disabled')
+  if (well.state === 'filled') classes.push('mint-well-plate__well--filled')
+
+  return classes
+}
+
+export function wellStyle(well: Well, state: WellStyleState): Record<string, string> {
+  const heatmapColor = getHeatmapColor(state.heatmap, well.value)
+  if (heatmapColor) {
+    return { backgroundColor: heatmapColor, border: '1px solid transparent' }
+  }
+
+  if (well.sampleType && state.sampleColors[well.sampleType]) {
+    const color = state.sampleColors[well.sampleType]
+    return {
+      backgroundColor: `${color}26`,
+      border: `1px solid ${color}66`,
+    }
+  }
+
+  if (well.sampleType && DEFAULT_SAMPLE_TYPE_COLORS[well.sampleType]) {
+    const colors = DEFAULT_SAMPLE_TYPE_COLORS[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)`,
+  }
+}
+
+export function sampleTypeIndicator(well: Well, showSampleTypeIndicator: boolean): string | null {
+  if (!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()
+}
+
+export function wellLabel(well: Well, showWellLabels: boolean): string | undefined {
+  if (!showWellLabels) return undefined
+  return well.metadata?.label as string | undefined
+}
+
+export function wellBadge(
+  well: Well,
+  showBadges: boolean,
+): { text: string; color: string } | null {
+  if (!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
+}

package/src/components/WellPlate.sampleDrop.ts

@@ -0,0 +1,73 @@
+import type { WellSampleDropData } from '../types'
+
+interface DroppedSampleTransfer {
+  getData(format: string): string
+}
+
+export function parseDroppedSampleTransfer(transfer: DroppedSampleTransfer): WellSampleDropData | null {
+  const json = transfer.getData('application/json') || transfer.getData('text/json')
+  if (json) {
+    try {
+      return normalizeDroppedSample(JSON.parse(json))
+    } catch {
+      return null
+    }
+  }
+
+  return createTextDroppedSample(transfer.getData('text/plain'))
+}
+
+export function createTextDroppedSample(text: string | null | undefined): WellSampleDropData | null {
+  const sampleName = text?.trim()
+  if (!sampleName) return null
+
+  return {
+    sampleName,
+    label: sampleName,
+    raw: sampleName,
+  }
+}
+
+export 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
+}