@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/ReagentEditor.vue

@@ -0,0 +1,418 @@
+<script setup lang="ts">
+/** Editor for a single reagent definition with axis orientation, dilution-series generator, and position-count validation for 96/384-well plates. */
+import { computed, ref } from 'vue'
+import NumberInput from './NumberInput.vue'
+import BaseButton from './BaseButton.vue'
+import BaseSelect from './BaseSelect.vue'
+import {
+  useReagentSeries,
+  DEFAULT_PRESETS,
+  DEFAULT_UNITS,
+  type LevelEntry,
+  type DilutionPreset,
+} from '../composables/useReagentSeries'
+
+export interface ReagentDefinition {
+  id: string
+  name: string
+  color: string
+  axis: 'row' | 'column'
+  startPosition: string
+  levels: LevelEntry[]
+  unit: string
+}
+
+interface Props {
+  modelValue: ReagentDefinition
+  plateFormat?: 96 | 384
+  units?: string[]
+  presets?: DilutionPreset[]
+  maxLevels?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  plateFormat: 96,
+  units: () => DEFAULT_UNITS,
+  presets: () => DEFAULT_PRESETS,
+  maxLevels: 24,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: ReagentDefinition]
+  remove: []
+}>()
+
+const { generateSeries, sortLevels, totalPositions } = useReagentSeries()
+
+// --- Local generator state ---
+const generatorStart = ref(100)
+const generatorCount = ref(8)
+const manualValue = ref<number | undefined>(undefined)
+
+// --- Computed plate dimensions ---
+const plateRows = computed(() => (props.plateFormat === 384 ? 16 : 8))
+const plateCols = computed(() => (props.plateFormat === 384 ? 24 : 12))
+
+const axisOptions = [
+  { value: 'row', label: 'Rows' },
+  { value: 'column', label: 'Columns' },
+]
+
+// --- Start position validation ---
+const startPositionError = computed<string | null>(() => {
+  const { axis, startPosition } = props.modelValue
+  if (!startPosition) return null
+
+  if (axis === 'row') {
+    const letter = startPosition.toUpperCase()
+    if (!/^[A-Z]$/.test(letter)) return 'Must be a letter'
+    const idx = letter.charCodeAt(0) - 65
+    if (idx >= plateRows.value) return `Max row: ${String.fromCharCode(64 + plateRows.value)}`
+  } else {
+    const num = parseInt(startPosition, 10)
+    if (isNaN(num) || num < 1) return 'Must be a number ≥ 1'
+    if (num > plateCols.value) return `Max col: ${plateCols.value}`
+  }
+  return null
+})
+
+// --- Position summary ---
+const positionCount = computed(() => totalPositions(props.modelValue.levels))
+
+const positionOverflows = computed(() => {
+  const { axis, startPosition, levels } = props.modelValue
+  if (!startPosition || levels.length === 0 || startPositionError.value) return false
+
+  const span = positionCount.value
+  if (axis === 'row') {
+    const startIdx = startPosition.toUpperCase().charCodeAt(0) - 65
+    return startIdx + span > plateRows.value
+  } else {
+    const startIdx = parseInt(startPosition, 10)
+    return startIdx + span - 1 > plateCols.value
+  }
+})
+
+const positionRange = computed(() => {
+  const { axis, startPosition, levels } = props.modelValue
+  if (!startPosition || levels.length === 0 || startPositionError.value) return null
+
+  const span = positionCount.value
+  if (span === 0) return null
+
+  if (axis === 'row') {
+    const startIdx = startPosition.toUpperCase().charCodeAt(0) - 65
+    const endIdx = Math.min(startIdx + span - 1, plateRows.value - 1)
+    const startLetter = String.fromCharCode(65 + startIdx)
+    const endLetter = String.fromCharCode(65 + endIdx)
+    return `${startLetter}–${endLetter}`
+  } else {
+    const startIdx = parseInt(startPosition, 10)
+    if (isNaN(startIdx)) return null
+    const endIdx = Math.min(startIdx + span - 1, plateCols.value)
+    return `${startIdx}–${endIdx}`
+  }
+})
+
+// --- Update helpers ---
+function update(partial: Partial<ReagentDefinition>) {
+  emit('update:modelValue', { ...props.modelValue, ...partial })
+}
+
+function updateName(event: Event) {
+  update({ name: (event.target as HTMLInputElement).value })
+}
+
+function updateColor(event: Event) {
+  update({ color: (event.target as HTMLInputElement).value })
+}
+
+function updateAxis(value: string | number) {
+  update({ axis: value as 'row' | 'column', startPosition: '' })
+}
+
+function updateStartPosition(event: Event) {
+  const raw = (event.target as HTMLInputElement).value
+  update({ startPosition: raw })
+}
+
+function updateUnit(event: Event) {
+  update({ unit: (event.target as HTMLSelectElement).value })
+}
+
+// --- Level manipulation ---
+function setLevels(levels: LevelEntry[]) {
+  update({ levels: sortLevels(levels) })
+}
+
+function applyPreset(preset: DilutionPreset) {
+  if (generatorStart.value <= 0 || generatorCount.value < 1) return
+  const count = Math.min(generatorCount.value, props.maxLevels)
+  const levels = generateSeries(generatorStart.value, count, preset.factor)
+  setLevels(levels)
+}
+
+function addManualLevel() {
+  if (manualValue.value === undefined || manualValue.value < 0) return
+  if (props.modelValue.levels.length >= props.maxLevels) return
+
+  const exists = props.modelValue.levels.some((l) => l.value === manualValue.value)
+  if (exists) return
+
+  setLevels([...props.modelValue.levels, { value: manualValue.value, replicates: 1 }])
+  manualValue.value = undefined
+}
+
+function handleManualKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    addManualLevel()
+  }
+}
+
+function removeLevel(index: number) {
+  const next = [...props.modelValue.levels]
+  next.splice(index, 1)
+  setLevels(next)
+}
+
+function updateLevelReplicates(index: number, replicates: number | undefined) {
+  if (replicates === undefined || replicates < 1) return
+  const next = [...props.modelValue.levels]
+  next[index] = { ...next[index], replicates }
+  update({ levels: next })
+}
+
+function formatLevel(value: number): string {
+  if (!Number.isFinite(value)) return '–'
+  if (value === 0) return 'Ctrl (0)'
+  if (value >= 1000) return value.toLocaleString('en-US', { maximumSignificantDigits: 4 })
+  if (value >= 1) return value.toString()
+  if (value >= 0.001) return value.toFixed(3)
+  return value.toExponential(1)
+}
+</script>
+
+<template>
+  <div
+    class="mld-reagent-editor"
+    :style="{ '--reagent-color': modelValue.color }"
+  >
+    <!-- Identity -->
+    <div class="mld-reagent-editor__section">
+      <div class="mld-reagent-editor__identity">
+        <label class="mld-reagent-editor__color-wrapper">
+          <input
+            type="color"
+            :value="modelValue.color"
+            class="mld-reagent-editor__color-input"
+            aria-label="Reagent color"
+            @input="updateColor"
+          />
+          <span
+            class="mld-reagent-editor__color-swatch"
+            :style="{ backgroundColor: modelValue.color }"
+          />
+        </label>
+        <input
+          type="text"
+          :value="modelValue.name"
+          placeholder="Reagent name"
+          class="mld-reagent-editor__name-input"
+          maxlength="64"
+          aria-label="Reagent name"
+          @input="updateName"
+        />
+      </div>
+    </div>
+
+    <!-- Position Mapping -->
+    <div class="mld-reagent-editor__section">
+      <div class="mld-reagent-editor__section-header">
+        <svg class="mld-reagent-editor__section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" />
+        </svg>
+        Position
+      </div>
+      <div class="mld-reagent-editor__position-row">
+        <div class="mld-reagent-editor__field mld-reagent-editor__field--flex">
+          <label class="mld-reagent-editor__label">Axis</label>
+          <BaseSelect
+            :model-value="modelValue.axis"
+            :options="axisOptions"
+            size="sm"
+            @update:model-value="updateAxis"
+          />
+        </div>
+        <div class="mld-reagent-editor__field mld-reagent-editor__field--flex">
+          <label class="mld-reagent-editor__label">Start</label>
+          <input
+            type="text"
+            :value="modelValue.startPosition"
+            :placeholder="modelValue.axis === 'row' ? 'e.g. B' : 'e.g. 2'"
+            :class="[
+              'mld-reagent-editor__inline-input',
+              startPositionError ? 'mld-reagent-editor__inline-input--error' : '',
+            ]"
+            :maxlength="modelValue.axis === 'row' ? 1 : 2"
+            :aria-invalid="!!startPositionError"
+            aria-label="Start position"
+            @input="updateStartPosition"
+          />
+          <span v-if="startPositionError" class="mld-reagent-editor__field-error">
+            {{ startPositionError }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Series -->
+    <div class="mld-reagent-editor__section">
+      <div class="mld-reagent-editor__section-header">
+        <svg class="mld-reagent-editor__section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" />
+        </svg>
+        Series
+        <select
+          :value="modelValue.unit"
+          class="mld-reagent-editor__unit-select"
+          @change="updateUnit"
+        >
+          <option v-for="u in units" :key="u" :value="u">{{ u }}</option>
+        </select>
+      </div>
+
+      <!-- Dilution generator -->
+      <div class="mld-reagent-editor__generator">
+        <div class="mld-reagent-editor__generator-inputs">
+          <div class="mld-reagent-editor__field mld-reagent-editor__field--flex">
+            <label class="mld-reagent-editor__label">Start</label>
+            <NumberInput v-model="generatorStart" :min="0" :step="10" size="sm" />
+          </div>
+          <div class="mld-reagent-editor__field mld-reagent-editor__field--flex">
+            <label class="mld-reagent-editor__label">Doses</label>
+            <NumberInput v-model="generatorCount" :min="2" :max="maxLevels" :step="1" size="sm" />
+          </div>
+        </div>
+        <div class="mld-reagent-editor__presets">
+          <button
+            v-for="preset in presets"
+            :key="preset.label"
+            type="button"
+            class="mld-reagent-editor__preset-btn"
+            @click="applyPreset(preset)"
+          >
+            {{ preset.label }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Manual entry -->
+      <div class="mld-reagent-editor__manual" @keydown="handleManualKeydown">
+        <NumberInput
+          v-model="manualValue"
+          :min="0"
+          :step="1"
+          size="sm"
+          placeholder="Add value"
+        />
+        <button
+          type="button"
+          class="mld-reagent-editor__add-btn"
+          :disabled="manualValue === undefined || manualValue < 0 || modelValue.levels.length >= maxLevels"
+          aria-label="Add level"
+          @click="addManualLevel"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 12h14" /><path d="M12 5v14" />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Level table -->
+      <div v-if="modelValue.levels.length > 0" class="mld-reagent-editor__table">
+        <div class="mld-reagent-editor__table-header">
+          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--level">Level</span>
+          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--reps">Reps</span>
+          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--action" />
+        </div>
+        <div class="mld-reagent-editor__table-body">
+        <div
+          v-for="(level, i) in modelValue.levels"
+          :key="level.value"
+          class="mld-reagent-editor__table-row"
+        >
+          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--level">
+            <span class="mld-reagent-editor__level-value">{{ formatLevel(level.value) }}</span>
+            <span v-if="level.value !== 0" class="mld-reagent-editor__level-unit">{{ modelValue.unit }}</span>
+          </span>
+          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--reps">
+            <NumberInput
+              :model-value="level.replicates"
+              :min="1"
+              :max="12"
+              :step="1"
+              size="sm"
+              @update:model-value="updateLevelReplicates(i, $event)"
+            />
+          </span>
+          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--action">
+            <button
+              type="button"
+              class="mld-reagent-editor__remove-level-btn"
+              aria-label="Remove level"
+              @click="removeLevel(i)"
+            >
+              <svg width="14" height="14" 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>
+          </span>
+        </div>
+        </div>
+      </div>
+
+      <div v-else class="mld-reagent-editor__empty">
+        Use a preset above or add levels manually
+      </div>
+    </div>
+
+    <!-- Position Summary -->
+    <div
+      v-if="modelValue.levels.length > 0 && modelValue.startPosition && !startPositionError"
+      :class="[
+        'mld-reagent-editor__summary',
+        positionOverflows ? 'mld-reagent-editor__summary--overflow' : '',
+      ]"
+    >
+      <div class="mld-reagent-editor__summary-item">
+        <span class="mld-reagent-editor__summary-value">{{ modelValue.levels.length }}</span>
+        <span class="mld-reagent-editor__summary-label">levels</span>
+      </div>
+      <div class="mld-reagent-editor__summary-dot" />
+      <div class="mld-reagent-editor__summary-item">
+        <span class="mld-reagent-editor__summary-value">{{ positionCount }}</span>
+        <span class="mld-reagent-editor__summary-label">positions</span>
+      </div>
+      <div v-if="positionRange" class="mld-reagent-editor__summary-dot" />
+      <div v-if="positionRange" class="mld-reagent-editor__summary-item">
+        <span class="mld-reagent-editor__summary-value">{{ positionRange }}</span>
+        <span class="mld-reagent-editor__summary-label">{{ modelValue.axis === 'row' ? 'rows' : 'cols' }}</span>
+      </div>
+      <span v-if="positionOverflows" class="mld-reagent-editor__summary-warning">
+        Exceeds plate
+      </span>
+    </div>
+
+    <!-- Remove -->
+    <div class="mld-reagent-editor__footer">
+      <BaseButton variant="danger" size="sm" @click="emit('remove')">
+        Remove Reagent
+      </BaseButton>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/reagent-editor.css';
+</style>

package/src/components/ReagentList.story.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import ReagentList from './ReagentList.vue'
+import type { Reagent } from '../types'
+
+const today = new Date()
+const pastDate = new Date(today)
+pastDate.setMonth(pastDate.getMonth() - 2)
+const soonDate = new Date(today)
+soonDate.setDate(soonDate.getDate() + 15)
+const futureDate = new Date(today)
+futureDate.setFullYear(futureDate.getFullYear() + 1)
+
+const mockReagents: Reagent[] = [
+  {
+    id: 'r1',
+    name: 'DMEM High Glucose',
+    catalogNumber: '11965092',
+    lotNumber: '2584391',
+    expiryDate: futureDate.toISOString(),
+    storageCondition: '4C',
+    location: 'Fridge A, Shelf 2',
+    stockLevel: 75,
+    stockUnit: '%',
+    supplier: 'Gibco',
+    url: 'https://www.thermofisher.com',
+  },
+  {
+    id: 'r2',
+    name: 'Fetal Bovine Serum',
+    catalogNumber: '10082147',
+    lotNumber: '2612847',
+    expiryDate: soonDate.toISOString(),
+    storageCondition: '-20C',
+    location: 'Freezer B, Rack 3',
+    stockLevel: 15,
+    stockUnit: '%',
+    supplier: 'Gibco',
+  },
+  {
+    id: 'r3',
+    name: 'Trypsin-EDTA (0.25%)',
+    catalogNumber: '25200056',
+    lotNumber: '2598412',
+    expiryDate: pastDate.toISOString(),
+    storageCondition: '-20C',
+    location: 'Freezer B, Rack 1',
+    stockLevel: 5,
+    stockUnit: '%',
+    supplier: 'Gibco',
+  },
+  {
+    id: 'r4',
+    name: 'Cisplatin',
+    catalogNumber: 'P4394',
+    lotNumber: 'SLCH2891',
+    expiryDate: futureDate.toISOString(),
+    storageCondition: 'RT',
+    location: 'Chemical Cabinet',
+    stockLevel: 90,
+    stockUnit: '%',
+    supplier: 'Sigma-Aldrich',
+  },
+  {
+    id: 'r5',
+    name: 'CellTiter-Glo 2.0',
+    catalogNumber: 'G9242',
+    lotNumber: '0000561234',
+    expiryDate: futureDate.toISOString(),
+    storageCondition: '-80C',
+    location: 'Freezer C, Rack 1',
+    stockLevel: 45,
+    stockUnit: '%',
+    supplier: 'Promega',
+  },
+]
+
+function initState() {
+  return {
+    modelValue: mockReagents,
+    readonly: false,
+    showStockLevel: true,
+    lowStockThreshold: 10,
+    sortable: true,
+    searchable: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/ReagentList">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <ReagentList
+            v-model="state.modelValue"
+            :readonly="state.readonly"
+            :show-stock-level="state.showStockLevel"
+            :low-stock-threshold="state.lowStockThreshold"
+            :sortable="state.sortable"
+            :searchable="state.searchable"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.readonly" title="Readonly" />
+        <HstCheckbox v-model="state.showStockLevel" title="Show Stock Level" />
+        <HstSlider v-model="state.lowStockThreshold" title="Low Stock Threshold (%)" :min="0" :max="50" />
+        <HstCheckbox v-model="state.sortable" title="Sortable" />
+        <HstCheckbox v-model="state.searchable" title="Searchable" />
+      </template>
+    </Variant>
+
+    <Variant title="Readonly">
+      <div style="padding: 2rem;">
+        <ReagentList
+          :model-value="mockReagents"
+          readonly
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All Columns">
+      <div style="padding: 2rem;">
+        <ReagentList
+          :model-value="mockReagents"
+          :columns="['name', 'catalog', 'lot', 'expiry', 'storage', 'location', 'stock', 'supplier']"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty">
+      <div style="padding: 2rem;">
+        <ReagentList :model-value="[]" />
+      </div>
+    </Variant>
+  </Story>
+</template>