@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/PlateMapEditor.vue

@@ -1,423 +0,0 @@
-<script setup lang="ts">
-/** Full plate-map design environment for 96/384-well plates with sample assignment, slot-color coding, undo/redo, and CSV/JSON import-export. */
-import { ref, computed, watch } from 'vue'
-import type { PlateMapEditorState, WellPlateFormat, SampleType, Well, PlateMap, SlotPosition } from '../types'
-// Slot colors matching MSExpDesigner — shared with RackEditor.
-import { SLOT_COLORS, SLOT_ORDER } from '../utils/color'
-import { useWellPlateEditor } from '../composables/useWellPlateEditor'
-import { useEventListener } from '../composables/useEventListener'
-import WellPlate from './WellPlate.vue'
-import SampleLegend from './SampleLegend.vue'
-import PlateMapEditorToolbarInternal from './internal/PlateMapEditorToolbarInternal.vue'
-
-
-interface Props {
-  modelValue?: PlateMapEditorState
-  format?: WellPlateFormat
-  maxPlates?: number
-  samples?: SampleType[]
-  showToolbar?: boolean
-  showSidebar?: boolean
-  allowAddPlates?: boolean
-  allowAddSamples?: boolean
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'fill'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: undefined,
-  format: 96,
-  maxPlates: 10,
-  samples: () => [],
-  showToolbar: true,
-  showSidebar: true,
-  allowAddPlates: true,
-  allowAddSamples: true,
-  size: 'md',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [state: PlateMapEditorState]
-  'plate-add': [plate: { id: string; name: string }]
-  'plate-remove': [plateId: string]
-  'sample-assign': [wellIds: string[], sampleId: string | undefined]
-  'wells-clear': [wellIds: string[]]
-  'undo': []
-  'redo': []
-  'export': [data: string, format: 'json' | 'csv']
-  'import': [success: boolean]
-}>()
-
-const editor = useWellPlateEditor(props.modelValue, {
-  defaultFormat: props.format,
-})
-
-const newSampleName = ref('')
-const showImportModal = ref(false)
-const importText = ref('')
-const importFormat = ref<'json' | 'csv'>('json')
-
-// Track slot assignment for each plate
-const plateSlots = ref<Map<string, SlotPosition>>(new Map())
-
-// Assign slots to plates on creation
-function getPlateSlot(plateId: string, plateIndex: number): SlotPosition {
-  if (!plateSlots.value.has(plateId)) {
-    plateSlots.value.set(plateId, SLOT_ORDER[plateIndex % SLOT_ORDER.length])
-  }
-  return plateSlots.value.get(plateId)!
-}
-
-function getPlateSlotColor(plateId: string, plateIndex: number): string {
-  return SLOT_COLORS[getPlateSlot(plateId, plateIndex)]
-}
-
-const sampleColors = computed(() => {
-  const colors: Record<string, string> = {}
-  for (const sample of editor.samples.value) {
-    if (sample.color) {
-      colors[sample.id] = sample.color
-    }
-  }
-  return colors
-})
-
-const wellsData = computed(() => {
-  const plate = editor.activePlate.value
-  if (!plate) return {}
-
-  const wells: Record<string, Partial<Well>> = {}
-  for (const [wellId, well] of Object.entries(plate.wells)) {
-    wells[wellId] = {
-      state: well.state,
-      sampleType: well.sampleType,
-      value: well.value,
-    }
-  }
-  return wells
-})
-
-function countPlateAssignedWells(plate: PlateMap): number {
-  return Object.values(plate.wells).filter(w => w.sampleType).length
-}
-
-const plateWellCounts = computed<Record<string, number>>(() => {
-  const counts: Record<string, number> = {}
-  for (const plate of editor.plates.value) {
-    counts[plate.id] = countPlateAssignedWells(plate)
-  }
-  return counts
-})
-
-watch(
-  () => editor.state.value,
-  (newState) => emit('update:modelValue', { ...newState }),
-  { deep: true }
-)
-
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (newValue) editor.loadState(newValue)
-  }
-)
-
-function handleSelectionChange(wellIds: string[]) {
-  editor.setSelectedWells(wellIds)
-}
-
-function handleSampleClick(sample: SampleType) {
-  const newSampleId = editor.activeSampleId.value === sample.id ? undefined : sample.id
-  editor.setActiveSample(newSampleId)
-}
-
-function handleAssignSample() {
-  const wells = editor.selectedWells.value
-  if (wells.length === 0) return
-
-  editor.assignSample(wells, editor.activeSampleId.value)
-  emit('sample-assign', wells, editor.activeSampleId.value)
-}
-
-function handleClearWells() {
-  const wells = editor.selectedWells.value
-  if (wells.length === 0) return
-
-  editor.clearWells(wells)
-  emit('wells-clear', wells)
-}
-
-function handleAddSample() {
-  if (!newSampleName.value.trim()) return
-  editor.addSample(newSampleName.value.trim())
-  newSampleName.value = ''
-}
-
-function handleRemoveSample(sampleId: string) {
-  editor.removeSample(sampleId)
-}
-
-function handleAddPlate() {
-  if (editor.plates.value.length >= props.maxPlates) return
-  const plate = editor.addPlate()
-  emit('plate-add', { id: plate.id, name: plate.name })
-}
-
-function handleRemovePlate(plateId: string) {
-  editor.removePlate(plateId)
-  plateSlots.value.delete(plateId)
-  emit('plate-remove', plateId)
-}
-
-function handleUndo() {
-  editor.undo()
-  emit('undo')
-}
-
-function handleRedo() {
-  editor.redo()
-  emit('redo')
-}
-
-function handleExport(format: 'json' | 'csv') {
-  const data = editor.exportData(format)
-  emit('export', data, format)
-
-  const blob = new Blob([data], { type: format === 'json' ? 'application/json' : 'text/csv' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = `plate-map.${format}`
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
-function handleImport() {
-  const success = editor.importData(importText.value, importFormat.value)
-  emit('import', success)
-  if (success) {
-    showImportModal.value = false
-    importText.value = ''
-  }
-}
-
-function handleKeyDown(event: KeyboardEvent) {
-  const isUndo = (event.metaKey || event.ctrlKey) && event.key === 'z'
-  if (isUndo) {
-    event.preventDefault()
-    event.shiftKey ? handleRedo() : handleUndo()
-    return
-  }
-
-  const isDelete = event.key === 'Delete' || event.key === 'Backspace'
-  if (isDelete && editor.selectedWells.value.length > 0) {
-    event.preventDefault()
-    handleClearWells()
-    return
-  }
-
-  const num = parseInt(event.key)
-  const isValidSampleKey = num >= 1 && num <= 9 && editor.samples.value.length >= num
-  if (isValidSampleKey) {
-    editor.setActiveSample(editor.samples.value[num - 1].id)
-    if (editor.selectedWells.value.length > 0) {
-      handleAssignSample()
-    }
-  }
-}
-
-useEventListener(() => document, 'keydown', handleKeyDown)
-</script>
-
-<template>
-  <div :class="['mint-plate-editor', { 'mint-plate-editor--with-sidebar': showSidebar }]">
-    <!-- Main plate area -->
-    <div class="mint-plate-editor__main">
-      <!-- Toolbar -->
-      <PlateMapEditorToolbarInternal
-        v-if="showToolbar"
-        :plates="editor.plates.value"
-        :active-plate-id="editor.activePlate.value?.id"
-        :plate-well-counts="plateWellCounts"
-        :can-add-plate="allowAddPlates && editor.plates.value.length < maxPlates"
-        :can-undo="editor.canUndo.value"
-        :can-redo="editor.canRedo.value"
-        :slot-color-for-plate="getPlateSlotColor"
-        @select-plate="editor.setActivePlate"
-        @remove-plate="handleRemovePlate"
-        @add-plate="handleAddPlate"
-        @undo="handleUndo"
-        @redo="handleRedo"
-        @import="showImportModal = true"
-        @export-json="handleExport('json')"
-      />
-
-      <!-- Well plate -->
-      <WellPlate
-        v-if="editor.activePlate.value"
-        :model-value="editor.selectedWells.value"
-        :format="editor.activePlate.value.format"
-        :wells="wellsData"
-        :sample-colors="sampleColors"
-        :size="size"
-        selection-mode="rectangle"
-        show-sample-type-indicator
-        @update:model-value="handleSelectionChange"
-      />
-
-      <!-- Selection info bar -->
-      <div
-        v-if="editor.selectedWells.value.length > 0"
-        class="mint-plate-editor__selection-bar"
-      >
-        <span class="mint-plate-editor__selection-count">
-          <strong>{{ editor.selectedWells.value.length }}</strong> wells selected
-        </span>
-        <div class="mint-plate-editor__spacer" />
-        <button
-          v-if="editor.activeSampleId.value"
-          type="button"
-          class="mint-plate-editor__assign-btn"
-          @click="handleAssignSample"
-        >
-          Assign {{ editor.samples.value.find(s => s.id === editor.activeSampleId.value)?.name }}
-        </button>
-        <button
-          type="button"
-          class="mint-plate-editor__clear-btn"
-          @click="handleClearWells"
-        >
-          Clear
-        </button>
-      </div>
-
-      <!-- Legend -->
-      <div class="mint-plate-editor__legend">
-        <div class="mint-plate-editor__legend-items">
-          <div class="mint-plate-editor__legend-item">
-            <div class="mint-plate-editor__legend-swatch" style="background-color: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4)" />
-            <span class="mint-plate-editor__legend-label">Sample</span>
-          </div>
-          <div class="mint-plate-editor__legend-item">
-            <div class="mint-plate-editor__legend-swatch" style="background-color: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.4)" />
-            <span class="mint-plate-editor__legend-label">Control</span>
-          </div>
-          <div class="mint-plate-editor__legend-item">
-            <div class="mint-plate-editor__legend-swatch" style="background-color: rgba(249, 115, 22, 0.15); border: 1px solid rgba(249, 115, 22, 0.4)" />
-            <span class="mint-plate-editor__legend-label">Blank</span>
-          </div>
-          <div class="mint-plate-editor__legend-item">
-            <div class="mint-plate-editor__legend-swatch" style="background-color: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.4)" />
-            <span class="mint-plate-editor__legend-label">QC</span>
-          </div>
-        </div>
-        <span class="mint-plate-editor__legend-hint">
-          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" /><path d="m14 7 3 3" /><path d="M5 6v4" /><path d="M19 14v4" /><path d="M10 2v2" /><path d="M7 8H3" /><path d="M21 16h-4" /><path d="M11 3H9" />
-          </svg>
-          Drag to select
-        </span>
-      </div>
-    </div>
-
-    <!-- Sidebar -->
-    <div v-if="showSidebar" class="mint-plate-editor__sidebar">
-      <div class="mint-plate-editor__sidebar-panel">
-        <h3 class="mint-plate-editor__sidebar-title">Sample Types</h3>
-
-        <SampleLegend
-          :model-value="editor.activeSampleId.value"
-          :samples="editor.samples.value"
-          :editable="allowAddSamples"
-          :size="size === 'lg' ? 'md' : 'sm'"
-          @update:model-value="editor.setActiveSample($event)"
-          @sample-click="handleSampleClick"
-          @sample-remove="handleRemoveSample"
-        />
-
-        <!-- Add sample -->
-        <div v-if="allowAddSamples" class="mint-plate-editor__add-sample">
-          <div class="mint-plate-editor__add-sample-form">
-            <input
-              v-model="newSampleName"
-              type="text"
-              placeholder="New sample..."
-              class="mint-plate-editor__add-sample-input"
-              @keyup.enter="handleAddSample"
-            />
-            <button
-              type="button"
-              :disabled="!newSampleName.trim()"
-              class="mint-plate-editor__add-sample-btn"
-              @click="handleAddSample"
-            >
-              Add
-            </button>
-          </div>
-        </div>
-
-        <!-- Keyboard shortcuts -->
-        <div class="mint-plate-editor__shortcuts">
-          <h4 class="mint-plate-editor__shortcuts-title">Shortcuts</h4>
-          <div class="mint-plate-editor__shortcuts-list">
-            <div><kbd class="mint-plate-editor__shortcut-key">1-9</kbd> Quick assign</div>
-            <div><kbd class="mint-plate-editor__shortcut-key">Del</kbd> Clear wells</div>
-            <div><kbd class="mint-plate-editor__shortcut-key">Ctrl+Z</kbd> Undo</div>
-            <div><kbd class="mint-plate-editor__shortcut-key">Ctrl+A</kbd> Select all</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Import modal -->
-    <Teleport to="body">
-      <div
-        v-if="showImportModal"
-        class="mint-plate-editor__modal-overlay"
-        @click.self="showImportModal = false"
-      >
-        <div class="mint-plate-editor__modal">
-          <h3 class="mint-plate-editor__modal-title">Import Plate Map</h3>
-
-          <div class="mint-plate-editor__modal-field">
-            <label class="mint-plate-editor__modal-label">Format</label>
-            <select
-              v-model="importFormat"
-              class="mint-plate-editor__modal-select"
-            >
-              <option value="json">JSON</option>
-              <option value="csv">CSV</option>
-            </select>
-          </div>
-
-          <div class="mint-plate-editor__modal-field">
-            <label class="mint-plate-editor__modal-label">Data</label>
-            <textarea
-              v-model="importText"
-              rows="8"
-              class="mint-plate-editor__modal-textarea"
-              placeholder="Paste your data here..."
-            />
-          </div>
-
-          <div class="mint-plate-editor__modal-actions">
-            <button
-              type="button"
-              class="mint-plate-editor__modal-cancel"
-              @click="showImportModal = false"
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              :disabled="!importText.trim()"
-              class="mint-plate-editor__modal-submit"
-              @click="handleImport"
-            >
-              Import
-            </button>
-          </div>
-        </div>
-      </div>
-    </Teleport>
-  </div>
-</template>

package/src/components/RackEditor.story.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import RackEditor from './RackEditor.vue'
-import type { Rack } from '../types'
-
-const defaultRacks: Rack[] = [
-  {
-    id: 'rack-1',
-    name: 'Rack 1',
-    format: 96,
-    slot: 'R',
-    injectionVolume: 10,
-    wells: {},
-  },
-  {
-    id: 'rack-2',
-    name: 'Rack 2',
-    format: 54,
-    slot: 'G',
-    injectionVolume: 5,
-    wells: {},
-  },
-]
-
-function initState() {
-  return {
-    modelValue: defaultRacks.map(r => ({ ...r, wells: { ...r.wells } })),
-    activeRackId: 'rack-1',
-    maxRacks: 10,
-    minRacks: 1,
-    allowReorder: true,
-    editable: true,
-    readonly: false,
-    wellPlateSize: 'md' as const,
-    showLegend: true,
-    showBadges: true,
-  }
-}
-</script>
-
-<template>
-  <Story title="Lab/RackEditor">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem;">
-          <RackEditor
-            v-model="state.modelValue"
-            v-model:active-rack-id="state.activeRackId"
-            :max-racks="state.maxRacks"
-            :min-racks="state.minRacks"
-            :allow-reorder="state.allowReorder"
-            :editable="state.editable"
-            :readonly="state.readonly"
-            :well-plate-size="state.wellPlateSize"
-            :show-legend="state.showLegend"
-            :show-badges="state.showBadges"
-          />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstSlider v-model="state.maxRacks" title="Max Racks" :min="1" :max="20" />
-        <HstSlider v-model="state.minRacks" title="Min Racks" :min="0" :max="5" />
-        <HstCheckbox v-model="state.allowReorder" title="Allow Reorder" />
-        <HstCheckbox v-model="state.editable" title="Editable" />
-        <HstCheckbox v-model="state.readonly" title="Readonly" />
-        <HstSelect
-          v-model="state.wellPlateSize"
-          title="Well Plate Size"
-          :options="[
-            { value: 'sm', label: 'Small' },
-            { value: 'md', label: 'Medium' },
-            { value: 'lg', label: 'Large' },
-            { value: 'xl', label: 'Extra Large' },
-            { value: 'fill', label: 'Fill' },
-          ]"
-        />
-        <HstCheckbox v-model="state.showLegend" title="Show Legend" />
-        <HstCheckbox v-model="state.showBadges" title="Show Badges" />
-      </template>
-    </Variant>
-
-    <Variant title="Single Rack">
-      <div style="padding: 2rem;">
-        <RackEditor
-          :model-value="[{ id: 'rack-1', name: 'Sample Rack', format: 96, slot: 'R', injectionVolume: 10, wells: {} }]"
-          :min-racks="1"
-          :max-racks="1"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Readonly">
-      <div style="padding: 2rem;">
-        <RackEditor
-          :model-value="defaultRacks"
-          readonly
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>