@morscherlab/mld-sdk 0.6.0

package/src/components/WellEditPopup.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
+import type { Well, WellEditData, WellEditField } from '../types'
+
+interface Props {
+  wellId: string
+  wellData?: Partial<Well>
+  editFields?: WellEditField[]
+  defaultInjectionVolume?: number
+  position: { x: number; y: number }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  wellData: () => ({}),
+  editFields: () => ['label', 'sampleType', 'injectionVolume', 'injectionCount', 'customMethod'],
+  defaultInjectionVolume: 5,
+})
+
+const emit = defineEmits<{
+  save: [data: WellEditData]
+  clear: []
+  close: []
+}>()
+
+const showAdvanced = ref(false)
+
+const formData = ref({
+  label: '',
+  sampleType: 'sample',
+  injectionVolume: props.defaultInjectionVolume,
+  injectionCount: 1,
+  customMethod: '',
+})
+
+watch(
+  () => [props.wellId, props.wellData] as const,
+  () => {
+    const meta = props.wellData?.metadata as Record<string, unknown> | undefined
+    formData.value = {
+      label: (meta?.label as string) || '',
+      sampleType: props.wellData?.sampleType || 'sample',
+      injectionVolume: (meta?.injectionVolume as number) || props.defaultInjectionVolume,
+      injectionCount: (meta?.injectionCount as number) || 1,
+      customMethod: (meta?.customMethod as string) || '',
+    }
+    showAdvanced.value = (formData.value.injectionCount > 1) || !!formData.value.customMethod
+  },
+  { immediate: true },
+)
+
+const hasField = (field: WellEditField) => props.editFields.includes(field)
+
+const popupStyle = computed(() => {
+  const x = props.position.x
+  const y = props.position.y
+  const style: Record<string, string> = {
+    left: `${x}px`,
+    top: `${y}px`,
+  }
+  return style
+})
+
+function save() {
+  emit('save', {
+    wellId: props.wellId,
+    label: formData.value.label.trim(),
+    sampleType: formData.value.sampleType,
+    injectionVolume: formData.value.injectionVolume,
+    injectionCount: formData.value.injectionCount || 1,
+    customMethod: formData.value.customMethod?.trim() || '',
+  })
+}
+
+function clear() {
+  emit('clear')
+}
+
+function close() {
+  emit('close')
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') close()
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+const sampleTypeButtons = [
+  { type: 'sample', label: 'S', tooltip: 'Sample' },
+  { type: 'blank', label: 'B', tooltip: 'Blank' },
+  { type: 'qc', label: 'Q', tooltip: 'QC' },
+]
+</script>
+
+<template>
+  <Teleport to="body">
+    <!-- Backdrop -->
+    <div class="mld-well-edit-popup__backdrop" @click="close" />
+
+    <!-- Popup -->
+    <div
+      class="mld-well-edit-popup"
+      :style="popupStyle"
+      @click.stop
+    >
+      <!-- Header -->
+      <div class="mld-well-edit-popup__header">
+        <div class="mld-well-edit-popup__header-left">
+          <span class="mld-well-edit-popup__well-id">{{ wellId }}</span>
+          <span class="mld-well-edit-popup__title">Edit Well</span>
+        </div>
+        <button class="mld-well-edit-popup__close" @click="close">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Body -->
+      <div class="mld-well-edit-popup__body">
+        <!-- Sample Name -->
+        <div v-if="hasField('label')">
+          <label class="mld-well-edit-popup__label">Sample Name</label>
+          <input
+            v-model="formData.label"
+            type="text"
+            placeholder="e.g., Sample_001"
+            class="mld-well-edit-popup__input"
+            @keydown.enter="save"
+            autofocus
+          />
+        </div>
+
+        <!-- Type + Volume row -->
+        <div class="mld-well-edit-popup__row">
+          <div v-if="hasField('sampleType')">
+            <label class="mld-well-edit-popup__label">Type</label>
+            <div class="mld-well-edit-popup__type-grid">
+              <button
+                v-for="btn in sampleTypeButtons"
+                :key="btn.type"
+                :title="btn.tooltip"
+                class="mld-well-edit-popup__type-btn"
+                :class="{
+                  [`mld-well-edit-popup__type-btn--${btn.type}`]: formData.sampleType === btn.type,
+                }"
+                @click="formData.sampleType = btn.type"
+              >
+                {{ btn.label }}
+              </button>
+            </div>
+          </div>
+          <div v-if="hasField('injectionVolume')">
+            <label class="mld-well-edit-popup__label">Volume (uL)</label>
+            <input
+              v-model.number="formData.injectionVolume"
+              type="number"
+              min="0.1"
+              max="100"
+              step="0.5"
+              class="mld-well-edit-popup__input"
+            />
+          </div>
+        </div>
+
+        <!-- Advanced toggle -->
+        <label
+          v-if="hasField('injectionCount') || hasField('customMethod')"
+          class="mld-well-edit-popup__advanced-toggle"
+        >
+          <input type="checkbox" v-model="showAdvanced" />
+          <span>Advanced options</span>
+        </label>
+
+        <!-- Advanced fields -->
+        <template v-if="showAdvanced">
+          <!-- Injection count -->
+          <div v-if="hasField('injectionCount')">
+            <label class="mld-well-edit-popup__label">Repeat Injections</label>
+            <div class="mld-well-edit-popup__count-grid">
+              <button
+                v-for="n in [1, 2, 3, 4, 5]"
+                :key="n"
+                class="mld-well-edit-popup__count-btn"
+                :class="{ 'mld-well-edit-popup__count-btn--active': formData.injectionCount === n }"
+                @click="formData.injectionCount = n"
+              >
+                {{ n }}&times;
+              </button>
+              <input
+                v-model.number="formData.injectionCount"
+                type="number"
+                min="1"
+                max="10"
+                class="mld-well-edit-popup__count-input"
+              />
+            </div>
+          </div>
+
+          <!-- Custom method -->
+          <div v-if="hasField('customMethod')">
+            <label class="mld-well-edit-popup__label">Custom Method Path</label>
+            <input
+              v-model="formData.customMethod"
+              type="text"
+              placeholder="Leave empty for default"
+              class="mld-well-edit-popup__input mld-well-edit-popup__input--mono"
+            />
+          </div>
+        </template>
+      </div>
+
+      <!-- Footer -->
+      <div class="mld-well-edit-popup__footer">
+        <button class="mld-well-edit-popup__btn mld-well-edit-popup__btn--clear" @click="clear">
+          Clear Well
+        </button>
+        <button class="mld-well-edit-popup__btn mld-well-edit-popup__btn--save" @click="save">
+          Save
+        </button>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+@import '../styles/components/well-edit-popup.css';
+</style>

package/src/components/WellPlate.story.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import WellPlate from './WellPlate.vue'
+import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, WellShape, Well } from '../types'
+
+const formats: WellPlateFormat[] = [6, 12, 24, 48, 96, 384]
+const selectionModes: WellPlateSelectionMode[] = ['none', 'single', 'multiple', 'rectangle']
+const sizes: WellPlateSize[] = ['sm', 'md', 'lg', 'xl']
+const shapes: WellShape[] = ['rounded', 'circle']
+
+const selectedWells = ref<string[]>([])
+
+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 },
+}
+
+function generateMockWells(format: WellPlateFormat): Record<string, Partial<Well>> {
+  const config = PLATE_CONFIGS[format]
+  const wells: Record<string, Partial<Well>> = {}
+  const sampleTypes = ['sample', 'control', 'blank', 'qc']
+
+  for (let row = 0; row < config.rows; row++) {
+    for (let col = 0; col < config.cols; col++) {
+      const id = `${String.fromCharCode(65 + row)}${col + 1}`
+      if (Math.random() > 0.3) {
+        wells[id] = {
+          state: 'filled',
+          sampleType: sampleTypes[Math.floor(Math.random() * sampleTypes.length)],
+          value: Math.random() * 100,
+        }
+      }
+    }
+  }
+  return wells
+}
+
+function generateHeatmapWells(format: WellPlateFormat): Record<string, Partial<Well>> {
+  const config = PLATE_CONFIGS[format]
+  const wells: Record<string, Partial<Well>> = {}
+
+  for (let row = 0; row < config.rows; row++) {
+    for (let col = 0; col < config.cols; col++) {
+      const id = `${String.fromCharCode(65 + row)}${col + 1}`
+      const distance = Math.sqrt(
+        Math.pow(row - config.rows / 2, 2) + Math.pow(col - config.cols / 2, 2)
+      )
+      const maxDist = Math.sqrt(Math.pow(config.rows / 2, 2) + Math.pow(config.cols / 2, 2))
+      wells[id] = {
+        state: 'filled',
+        value: 1 - distance / maxDist,
+      }
+    }
+  }
+  return wells
+}
+
+const mockWells96 = generateMockWells(96)
+const heatmapWells = generateHeatmapWells(96)
+const mockWells6 = generateMockWells(6)
+
+const rectSelected = ref<string[]>([])
+
+function initState() {
+  return {
+    format: 96 as WellPlateFormat,
+    selectionMode: 'multiple' as WellPlateSelectionMode,
+    size: 'md' as WellPlateSize,
+    wellShape: 'rounded' as WellShape,
+    showLabels: true,
+    showWellIds: false,
+    showSampleTypeIndicator: true,
+    showLegend: false,
+    disabled: false,
+    readonly: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/WellPlate">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <WellPlate
+            v-model="selectedWells"
+            :format="state.format"
+            :wells="generateMockWells(state.format)"
+            :selection-mode="state.selectionMode"
+            :size="state.size"
+            :well-shape="state.wellShape"
+            :show-labels="state.showLabels"
+            :show-well-ids="state.showWellIds"
+            :show-sample-type-indicator="state.showSampleTypeIndicator"
+            :show-legend="state.showLegend"
+            :disabled="state.disabled"
+            :readonly="state.readonly"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Selected: {{ selectedWells.length > 0 ? selectedWells.join(', ') : 'none' }}
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.format"
+          title="Format"
+          :options="formats.map(f => ({ label: `${f}-well`, value: f }))"
+        />
+        <HstSelect
+          v-model="state.selectionMode"
+          title="Selection Mode"
+          :options="selectionModes.map(m => ({ label: m, value: m }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstSelect
+          v-model="state.wellShape"
+          title="Well Shape"
+          :options="shapes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.showLabels" title="Show Labels" />
+        <HstCheckbox v-model="state.showWellIds" title="Show Well IDs" />
+        <HstCheckbox v-model="state.showSampleTypeIndicator" title="Sample Type Indicator" />
+        <HstCheckbox v-model="state.showLegend" title="Show Legend" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.readonly" title="Readonly" />
+      </template>
+    </Variant>
+
+    <Variant title="Heatmap">
+      <div style="padding: 2rem;">
+        <WellPlate
+          :format="96"
+          :wells="heatmapWells"
+          :heatmap="{ enabled: true, min: 0, max: 1, colorScale: 'viridis', showLegend: true }"
+          selection-mode="none"
+          show-labels
+          size="md"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="6-Well Plate">
+      <div style="padding: 2rem;">
+        <WellPlate
+          :format="6"
+          :wells="mockWells6"
+          selection-mode="multiple"
+          show-labels
+          show-sample-type-indicator
+          show-legend
+          size="xl"
+          well-shape="circle"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Rectangle Selection">
+      <div style="padding: 2rem;">
+        <WellPlate
+          v-model="rectSelected"
+          :format="96"
+          :wells="mockWells96"
+          selection-mode="rectangle"
+          show-labels
+          size="md"
+        />
+        <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Drag to select a rectangle of wells. Selected: {{ rectSelected.length }} wells
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Sample Types with Legend">
+      <div style="padding: 2rem;">
+        <WellPlate
+          :format="96"
+          :wells="mockWells96"
+          selection-mode="none"
+          show-labels
+          show-sample-type-indicator
+          show-legend
+          size="md"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>