@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/ThemeToggle.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Icon button that toggles between light and dark mode, swapping sun/moon icons to reflect the active theme. */
+import { Moon, Sun } from 'lucide-vue-next'
 import { useTheme } from '../composables/useTheme'
-import IconButton from './IconButton.vue'
+import BaseButton from './BaseButton.vue'
 
 interface Props {
   size?: 'sm' | 'md' | 'lg'
@@ -15,38 +16,12 @@ const { isDark, toggleTheme } = useTheme()
 </script>
 
 <template>
-  <IconButton
+  <BaseButton
     class="mint-theme-toggle"
     variant="ghost"
     :size="size"
+    :icon="isDark ? Sun : Moon"
     :label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
     @click="toggleTheme"
-  >
-    <!-- Lucide sun -->
-    <svg
-      v-if="isDark"
-      class="mint-theme-toggle__icon"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />
-    </svg>
-    <!-- Lucide moon -->
-    <svg
-      v-else
-      class="mint-theme-toggle__icon"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
-    </svg>
-  </IconButton>
+  />
 </template>

package/src/components/TimeRangeInput.story.vue

@@ -42,7 +42,7 @@ function initState() {
           <TimeRangeInput
             v-model="state.modelValue"
             :disabled="state.disabled"
-            :error="state.error"
+            :invalid="state.error"
             :size="state.size"
             :step="state.step"
             :format="state.format"

package/src/components/TimeRangeInput.vue

@@ -2,13 +2,13 @@
 /** Paired start/end time pickers that validate range order (end must follow start) and display computed duration. */
 import { computed, watch } from 'vue'
 import type { TimeRange, TimeSlotDisabledFn } from '../types/components'
-import TimePicker from './TimePicker.vue'
-import { durationMinutes, compareTime } from '../composables/useTimeUtils'
+import DatePicker from './DatePicker.vue'
+import { durationMinutes, compareTime } from '../utils/time'
 
 interface Props {
   modelValue?: TimeRange
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   min?: string
   max?: string
@@ -22,7 +22,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
   step: 15,
   format: '24h',
@@ -90,10 +90,11 @@ function onEndChange(value: string | undefined) {
 <template>
   <div class="mint-time-range">
     <div class="mint-time-range__start">
-      <TimePicker
+      <DatePicker
+        type="time"
         :model-value="startValue"
         :disabled="disabled"
-        :error="error || isInvalid"
+        :invalid="invalid || isInvalid"
         :size="size"
         :min="min"
         :max="max"
@@ -108,10 +109,11 @@ function onEndChange(value: string | undefined) {
     <span class="mint-time-range__separator" aria-hidden="true">–</span>
 
     <div class="mint-time-range__end">
-      <TimePicker
+      <DatePicker
+        type="time"
         :model-value="endValue"
         :disabled="disabled"
-        :error="error || isInvalid"
+        :invalid="invalid || isInvalid"
         :size="size"
         :min="endMin"
         :max="max"

package/src/components/VersionConflictDialog.story.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import VersionConflictDialog from './VersionConflictDialog.vue'
+import BaseButton from './BaseButton.vue'
+
+const lastAction = ref('')
+
+function initPlayground() {
+  return {
+    open: true,
+    entity: 'EXP-042 · Cisplatin dose response, HCT116',
+    changes: 'Notes, End date',
+    loading: false,
+  }
+}
+
+function changeList(text: string): string[] {
+  return text.split(',').map(item => item.trim()).filter(Boolean)
+}
+</script>
+
+<template>
+  <Story title="Experiment/VersionConflictDialog">
+    <Variant title="Playground" :init-state="initPlayground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px; display: flex; flex-direction: column; gap: 1rem;">
+          <BaseButton variant="secondary" @click="state.open = true">Save (412)</BaseButton>
+          <div v-if="lastAction" style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted);">
+            Last event: <code>{{ lastAction }}</code>
+          </div>
+          <VersionConflictDialog
+            v-model:open="state.open"
+            :entity="state.entity"
+            :changes="changeList(state.changes)"
+            :loading="state.loading"
+            @reload="() => { state.open = false; lastAction = 'reload' }"
+            @overwrite="() => { state.open = false; lastAction = 'overwrite' }"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.open" title="Open" />
+        <HstText v-model="state.entity" title="Entity line" />
+        <HstText v-model="state.changes" title="Changed fields (comma list)" />
+        <HstCheckbox v-model="state.loading" title="Overwrite saving" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+## VersionConflictDialog
+
+The dialog for a save that the platform refused with `412 <entity>.version_conflict`
+(RFC #439). Pair it with `useVersionedSave()` from `@morscherlab/mint-sdk/data`:
+open it while `conflict` is set, call `reload()` on **Reload and discard mine**
+and `overwrite()` on **Overwrite**. Overwrite sends the form again with
+`If-Match` set to the version from the 412, so it replaces the newer version.
+</docs>

package/src/components/VersionConflictDialog.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+/**
+ * The dialog for a save refused with 412 `<entity>.version_conflict` (RFC #439).
+ * Show it while `useVersionedSave().conflict` is set: Reload discards the
+ * user's edits and refetches, Overwrite saves them on top of the newer version.
+ */
+import { computed } from 'vue'
+import { RefreshCw } from 'lucide-vue-next'
+import BaseModal from './BaseModal.vue'
+import BaseButton from './BaseButton.vue'
+
+interface Props {
+  open: boolean
+  /** The entity line under the title, such as `EXP-042 · Cisplatin dose response`. */
+  entity?: string
+  /** Labels of the fields the user changed and did not save. */
+  changes?: string[]
+  /** True while Overwrite saves. */
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  entity: '',
+  changes: () => [],
+  loading: false,
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  reload: []
+  overwrite: []
+}>()
+
+const message = computed(() => {
+  const count = props.changes.length
+  if (count === 0) return 'Your changes are not saved. Pick what to keep.'
+  const [noun, verb] = count === 1 ? ['change', 'is'] : ['changes', 'are']
+  return `Your ${count} ${noun} (${props.changes.join(', ')}) ${verb} not saved. Pick what to keep.`
+})
+</script>
+
+<template>
+  <BaseModal
+    :open="open"
+    title="Changed by someone else"
+    :subtitle="entity || undefined"
+    size="md"
+    :closable="!loading"
+    :close-on-escape="!loading"
+    @update:open="emit('update:open', $event)"
+  >
+    <p class="mint-version-conflict__message">{{ message }}</p>
+
+    <template #footer>
+      <div class="mint-version-conflict__footer">
+        <BaseButton
+          type="button"
+          variant="secondary"
+          size="sm"
+          class="mint-version-conflict__overwrite"
+          :loading="loading"
+          @click="emit('overwrite')"
+        >
+          Overwrite
+        </BaseButton>
+        <BaseButton
+          type="button"
+          variant="primary"
+          size="sm"
+          :icon="RefreshCw"
+          :disabled="loading"
+          @click="emit('reload')"
+        >
+          Reload and discard mine
+        </BaseButton>
+      </div>
+    </template>
+  </BaseModal>
+</template>

package/src/components/WellPlate.geometry.ts

@@ -64,44 +64,6 @@ export function createPlateRowLabels(config: WellPlateConfig): string[] {
   return Array.from({ length: config.rows }, (_, index) => rowLabel(index))
 }
 
-function plateConfigOrThrow(format: number): WellPlateConfig {
-  const config = PLATE_CONFIGS[format as WellPlateFormat]
-  if (!config) throw new Error(`Unsupported plate format '${format}'.`)
-  return config
-}
-
-/** Every well id of a plate, row-major (A1, A2, … B1, …). */
-export function wellIdsForFormat(format: number): string[] {
-  const { rows, cols } = plateConfigOrThrow(format)
-  return Array.from({ length: rows }, (_, row) =>
-    Array.from({ length: cols }, (_col, col) => `${rowLabel(row)}${col + 1}`)
-  ).flat()
-}
-
-/** Throw unless `wellId` names a well that exists on a `format`-well plate. */
-export function assertWellInFormat(wellId: string, format: number): void {
-  const { rows, cols } = plateConfigOrThrow(format)
-  const match = /^([A-Z]+)([1-9][0-9]*)$/.exec(wellId.toUpperCase())
-  if (!match) {
-    throw new Error(`Invalid well id '${wellId}'.`)
-  }
-  const row = rowIndex(match[1])
-  const col = Number(match[2]) - 1
-  if (row < 0 || col < 0 || row >= rows || col >= cols) {
-    throw new Error(`Well '${wellId}' is outside a ${format}-well plate.`)
-  }
-}
-
-/** Coerce an unknown value to a supported plate format, else `fallback`. */
-export function readPlateFormat(value: unknown, fallback: WellPlateFormat): WellPlateFormat {
-  const parsed = typeof value === 'number'
-    ? value
-    : typeof value === 'string'
-      ? Number(value)
-      : Number.NaN
-  return parsed in PLATE_CONFIGS ? (parsed as WellPlateFormat) : fallback
-}
-
 export function createPlateColumnLabels(config: WellPlateConfig): number[] {
   return Array.from({ length: config.cols }, (_, index) => index + 1)
 }

package/src/components/WellPlate.rendering.ts

@@ -65,19 +65,6 @@ export function sampleTint(color: string): { backgroundColor: string; border: st
   }
 }
 
-let sampleTypeIndicatorWarned = false
-
-/** One dev-only warning per page for the no-op `showSampleTypeIndicator` prop. */
-export function warnSampleTypeIndicatorDeprecated(): void {
-  if (sampleTypeIndicatorWarned) return
-  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production') return
-  sampleTypeIndicatorWarned = true
-  console.warn(
-    '[WellPlate] showSampleTypeIndicator is deprecated and renders nothing; it is removed in MINT 1.4. '
-    + 'The sample-type marker already shows shape per type and Q / i glyphs for QC / iQC.',
-  )
-}
-
 export function wellLabel(well: Well, showWellLabels: boolean): string | undefined {
   if (!showWellLabels) return undefined
   return well.metadata?.label as string | undefined

package/src/components/WellPlate.story.vue

@@ -64,13 +64,14 @@ function generateHeatmapWells(format: WellPlateFormat): Record<string, Partial<W
 const mockWells96 = generateMockWells(96)
 const heatmapWells = generateHeatmapWells(96)
 const mockWells6 = generateMockWells(6)
-// One well per marker type; the Q / i glyph moves to a corner when an ID or label takes the centre.
+// One well per marker type; a QC well shows a mono Q and an iQC well an i when no ID or label takes the centre.
 const markerWells: Record<string, Partial<Well>> = {
   A1: { id: 'A1', row: 0, col: 0, state: 'filled', sampleType: 'sample', metadata: { label: 'S-01' } },
   A2: { id: 'A2', row: 0, col: 1, state: 'filled', sampleType: 'blank', metadata: { label: 'Blank' } },
   A3: { id: 'A3', row: 0, col: 2, state: 'filled', sampleType: 'qc', metadata: { label: 'Pool' } },
   B1: { id: 'B1', row: 1, col: 0, state: 'filled', sampleType: 'iqc', metadata: { label: 'Std 1' } },
   B2: { id: 'B2', row: 1, col: 1, state: 'filled', sampleType: 'iqc' },
+  B3: { id: 'B3', row: 1, col: 2, state: 'filled', sampleType: 'qc' },
 }
 
 const rectSelected = ref<string[]>([])
@@ -151,17 +152,19 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <WellPlate
+            v-model="selectedWells"
+            :spec="{
+              format: state.format,
+              selectionMode: state.selectionMode,
+              size: state.size,
+              wellShape: state.wellShape,
+              showLabels: state.showLabels,
+              showWellIds: state.showWellIds,
+              showLegend: state.showLegend,
+            }"
             :loading="state.loading"
             :error="state.error || null"
-            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-legend="state.showLegend"
             :disabled="state.disabled"
             :readonly="state.readonly"
           />
@@ -207,12 +210,14 @@ function initState() {
     <Variant title="Heatmap">
       <div style="padding: 2rem;">
         <WellPlate
-          :format="96"
+          :spec="{
+            format: 96,
+            heatmap: { enabled: true, min: 0, max: 1, colorScale: 'viridis', showLegend: true },
+            selectionMode: 'none',
+            showLabels: true,
+            size: 'md',
+          }"
           :wells="heatmapWells"
-          :heatmap="{ enabled: true, min: 0, max: 1, colorScale: 'viridis', showLegend: true }"
-          selection-mode="none"
-          show-labels
-          size="md"
         />
       </div>
     </Variant>
@@ -220,15 +225,17 @@ function initState() {
     <Variant title="Heatmap QC Decorations">
       <div style="padding: 2rem;">
         <WellPlate
-          :format="96"
+          :spec="{
+            format: 96,
+            heatmap: { enabled: true, min: 0, max: 1, colorScale: 'viridis', showLegend: true },
+            wellClass: well => well.id === 'A1'
+              ? 'mint-well-plate__well--outlier'
+              : well.id === 'A2' ? 'mint-well-plate__well--conflict' : '',
+            selectionMode: 'none',
+            showLabels: true,
+            size: 'md',
+          }"
           :wells="heatmapWells"
-          :heatmap="{ enabled: true, min: 0, max: 1, colorScale: 'viridis', showLegend: true }"
-          :well-class="well => well.id === 'A1'
-            ? 'mint-well-plate__well--outlier'
-            : well.id === 'A2' ? 'mint-well-plate__well--conflict' : ''"
-          selection-mode="none"
-          show-labels
-          size="md"
         />
       </div>
     </Variant>
@@ -236,13 +243,15 @@ function initState() {
     <Variant title="6-Well Plate">
       <div style="padding: 2rem;">
         <WellPlate
-          :format="6"
+          :spec="{
+            format: 6,
+            selectionMode: 'multiple',
+            showLabels: true,
+            showLegend: true,
+            size: 'xl',
+            wellShape: 'circle',
+          }"
           :wells="mockWells6"
-          selection-mode="multiple"
-          show-labels
-          show-legend
-          size="xl"
-          well-shape="circle"
         />
       </div>
     </Variant>
@@ -251,11 +260,8 @@ function initState() {
       <div style="padding: 2rem;">
         <WellPlate
           v-model="rectSelected"
-          :format="96"
+          :spec="{ format: 96, selectionMode: 'rectangle', showLabels: true, size: 'md' }"
           :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
@@ -266,20 +272,23 @@ function initState() {
     <Variant title="Sample Types with Legend">
       <div style="padding: 2rem;">
         <WellPlate
-          :format="96"
+          :spec="{
+            format: 96,
+            selectionMode: 'none',
+            showLabels: true,
+            showLegend: true,
+            size: 'md',
+          }"
           :wells="mockWells96"
-          selection-mode="none"
-          show-labels
-          show-legend
-          size="md"
         />
       </div>
     </Variant>
 
     <Variant title="Marker Glyphs with IDs and Labels">
       <div style="padding: 2rem; display: flex; gap: 2rem;">
-        <WellPlate :format="6" :wells="markerWells" selection-mode="none" show-well-ids size="lg" />
-        <WellPlate :format="6" :wells="markerWells" selection-mode="none" show-well-labels size="lg" />
+        <WellPlate :spec="{ format: 6, selectionMode: 'none', showWellIds: true, size: 'lg' }" :wells="markerWells" />
+        <WellPlate :spec="{ format: 6, selectionMode: 'none', showWellLabels: true, size: 'lg' }" :wells="markerWells" />
+        <WellPlate :spec="{ format: 6, selectionMode: 'none', size: 'lg' }" :wells="markerWells" />
       </div>
     </Variant>
 
@@ -289,14 +298,16 @@ function initState() {
           Column drugs (Cisplatin, Doxorubicin) and row drugs (Paclitaxel, Gemcitabine) with concentration gradients
         </h3>
         <WellPlate
-          :format="96"
+          :spec="{
+            format: 96,
+            columnConditions: doseColumnConditions,
+            rowConditions: doseRowConditions,
+            selectionMode: 'none',
+            showLabels: true,
+            showLegend: true,
+            size: 'md',
+          }"
           :wells="doseWells"
-          :column-conditions="doseColumnConditions"
-          :row-conditions="doseRowConditions"
-          selection-mode="none"
-          show-labels
-          show-legend
-          size="md"
         />
       </div>
     </Variant>
@@ -304,12 +315,14 @@ function initState() {
     <Variant title="Column Conditions Only">
       <div style="padding: 2rem;">
         <WellPlate
-          :format="96"
+          :spec="{
+            format: 96,
+            columnConditions: doseColumnConditions,
+            selectionMode: 'multiple',
+            showLabels: true,
+            size: 'md',
+          }"
           :wells="doseWells"
-          :column-conditions="doseColumnConditions"
-          selection-mode="multiple"
-          show-labels
-          size="md"
         />
       </div>
     </Variant>