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

package/src/components/UnitInput.story.vue

@@ -21,7 +21,7 @@ const concentrationUnits = [
 const volumeUnits = [
   { value: 'L', label: 'L', factor: 1 },
   { value: 'mL', label: 'mL', factor: 1e-3 },
-  { value: 'uL', label: 'uL', factor: 1e-6 },
+  { value: 'uL', label: 'µL', factor: 1e-6 },
   { value: 'nL', label: 'nL', factor: 1e-9 },
 ]
 

package/src/components/UnitInput.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-/** Numeric input paired with a grouped unit selector, with optional auto-conversion and conversion hint when the unit changes. */
-import { computed, ref, watch } from 'vue'
+/**
+ * Numeric input with a unit segment. Several units open a menu that previews the value in each
+ * unit; units with a `factor` also get a hint in the neighbour unit nearest to 1–1000.
+ */
+import { computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
+import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { UnitOption } from '../types'
 
 interface Props {
@@ -34,30 +40,19 @@ const emit = defineEmits<{
   'change': [data: { value: number | undefined; unit: string }]
 }>()
 
-const conversionHint = ref<string | null>(null)
-
 const currentUnit = computed(() => props.unit || (props.units.length > 0 ? props.units[0].value : ''))
+const currentOption = computed(() => findUnit(currentUnit.value))
+const selectable = computed(() => props.units.length > 1)
 
-// Group units by their group property
-const hasGroups = computed(() => props.units.some(u => u.group))
-
-const groupedUnits = computed(() => {
-  if (!hasGroups.value) return null
-  const groups = new Map<string, UnitOption[]>()
-  const ungrouped: UnitOption[] = []
+/** Menu rows: ungrouped units first, then one labelled block per group. */
+const menuSections = computed(() => {
+  const sections = new Map<string, UnitOption[]>()
   for (const u of props.units) {
-    if (u.group) {
-      const group = groups.get(u.group)
-      if (group) {
-        group.push(u)
-      } else {
-        groups.set(u.group, [u])
-      }
-    } else {
-      ungrouped.push(u)
-    }
+    const key = u.group ?? ''
+    sections.set(key, [...(sections.get(key) ?? []), u])
   }
-  return { groups, ungrouped }
+  return [...sections].map(([label, units]) => ({ label, units }))
+    .sort((a, b) => Number(a.label !== '') - Number(b.label !== ''))
 })
 
 function findUnit(value: string): UnitOption | undefined {
@@ -77,12 +72,52 @@ function clamp(value: number): number {
   return result
 }
 
+/** 4 significant digits; exponent form outside 1e-3 … 1e6. */
+function formatNumber(value: number): string {
+  const abs = Math.abs(value)
+  if (abs !== 0 && (abs >= 1e6 || abs < 1e-3)) return value.toExponential(2)
+  return String(parseFloat(value.toPrecision(4)))
+}
+
+/** The current value in `target`; null without factors or across unit groups (M vs mg/mL). */
+function convertTo(target: UnitOption): number | null {
+  const current = currentOption.value
+  if (props.modelValue === undefined || current?.factor === undefined || !target.factor) return null
+  if (target.group !== current.group) return null
+  return props.modelValue * current.factor / target.factor
+}
+
+function preview(target: UnitOption): string {
+  const converted = convertTo(target)
+  return converted === null ? '' : formatNumber(converted)
+}
+
+/** Log distance of |value| from the 1–1000 window (0 inside it). */
+function distanceFromReadable(value: number): number {
+  const exp = Math.log10(Math.abs(value))
+  return exp < 0 ? -exp : Math.max(0, exp - 3)
+}
+
+const conversionHint = computed(() => {
+  const current = currentOption.value
+  if (!props.modelValue || current?.factor === undefined) return null
+  const scale = props.units
+    .filter(u => u.factor !== undefined && u.group === current.group)
+    .sort((a, b) => a.factor! - b.factor!)
+  const index = scale.indexOf(current)
+  let best: { unit: UnitOption; value: number } | null = null
+  for (const neighbour of [scale[index + 1], scale[index - 1]]) {
+    const value = neighbour && convertTo(neighbour)
+    if (!value) continue
+    if (!best || distanceFromReadable(value) < distanceFromReadable(best.value)) best = { unit: neighbour, value }
+  }
+  return best && `${formatNumber(best.value)} ${best.unit.label}`
+})
+
 function handleValueInput(event: Event) {
   const target = event.target as HTMLInputElement
   const value = target.value === '' ? undefined : Number(target.value)
 
-  conversionHint.value = null
-
   if (value === undefined || isNaN(value)) {
     emit('update:modelValue', undefined)
     emit('change', { value: undefined, unit: currentUnit.value })
@@ -94,22 +129,16 @@ function handleValueInput(event: Event) {
   emit('change', { value: clamped, unit: currentUnit.value })
 }
 
-function handleUnitChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const newUnitValue = target.value
-  const oldUnitValue = currentUnit.value
+function selectUnit(newUnitValue: string) {
+  close(true)
+  if (newUnitValue === currentUnit.value) return
 
   let newValue = props.modelValue
-
   if (props.convertOnUnitChange && newValue !== undefined) {
-    const oldUnit = findUnit(oldUnitValue)
+    const oldUnit = currentOption.value
     const newUnit = findUnit(newUnitValue)
-
     if (oldUnit?.factor !== undefined && newUnit?.factor !== undefined && newUnit.factor !== 0) {
-      const converted = newValue * (oldUnit.factor / newUnit.factor)
-      newValue = roundToPrecision(converted)
-      newValue = clamp(newValue)
-      conversionHint.value = `Converted from ${oldUnit.label} to ${newUnit.label}`
+      newValue = clamp(roundToPrecision(newValue * (oldUnit.factor / newUnit.factor)))
       emit('update:modelValue', newValue)
     }
   }
@@ -118,13 +147,52 @@ function handleUnitChange(event: Event) {
   emit('change', { value: newValue, unit: newUnitValue })
 }
 
-// Clear conversion hint after a delay
-watch(conversionHint, (hint) => {
-  if (hint) {
-    setTimeout(() => {
-      conversionHint.value = null
-    }, 3000)
+// ---- Unit menu (disclosure + WAI-ARIA keyboard, shared with ActionMenu) ----
+const menuRef = ref<HTMLElement | null>(null)
+// Transparent (not visibility:hidden) until placed, so the open-time focus can land on an option.
+const menuStyle = ref<Record<string, string>>({ opacity: '0' })
+const { isOpen, rootRef, open, close } = useDropdownState({
+  triggerRef: useTemplateRef<HTMLElement>('trigger'),
+  closeOnScroll: true,
+  insideRefs: [menuRef],
+  onOpen: () => { menuStyle.value = { opacity: '0' } },
+})
+
+/** Teleported + fixed like ActionMenu, so overflow:hidden/auto ancestors never clip the menu. */
+watch(isOpen, async (opened) => {
+  if (!opened) return
+  await nextTick()
+  if (!rootRef.value || !menuRef.value) return
+  const { x, y } = await computePosition(rootRef.value, menuRef.value, {
+    placement: 'bottom-end',
+    strategy: 'fixed',
+    middleware: [offset(4), flip(), shift({ padding: 8 })],
+  })
+  menuStyle.value = { left: `${x}px`, top: `${y}px` }
+})
+
+function menuItems(): HTMLElement[] {
+  return menuRef.value ? Array.from(menuRef.value.querySelectorAll<HTMLElement>('[role="option"]')) : []
+}
+
+function openMenu(focusSelected = true) {
+  if (props.disabled || !selectable.value) return
+  open()
+  if (focusSelected) {
+    void nextTick(() => (menuItems().find(el => el.getAttribute('aria-selected') === 'true') ?? menuItems()[0])?.focus())
   }
+}
+
+function toggleMenu() {
+  if (isOpen.value) close()
+  else openMenu()
+}
+
+const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
+  items: menuItems,
+  isOpen: () => isOpen.value,
+  open: () => openMenu(false),
+  close,
 })
 </script>
 
@@ -136,78 +204,76 @@ watch(conversionHint, (hint) => {
       disabled ? 'mint-unit-input--disabled' : '',
     ]"
   >
-    <div :class="['mint-unit-input__controls', `mint-unit-input__controls--${size}`]">
-      <input
-        type="number"
-        :value="modelValue"
-        :min="min"
-        :max="max"
-        :step="step"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :class="[
-          'mint-unit-input__value',
-          `mint-unit-input__value--${size}`,
-          disabled ? 'mint-unit-input__value--disabled' : '',
-        ]"
-        aria-label="Value"
-        @input="handleValueInput"
-      />
-
-      <div class="mint-unit-input__unit">
-        <select
-          :value="currentUnit"
+    <div ref="rootRef" class="mint-unit-input__field">
+      <div :class="['mint-unit-input__controls', `mint-unit-input__controls--${size}`]">
+        <input
+          type="number"
+          :value="modelValue"
+          :min="min"
+          :max="max"
+          :step="step"
           :disabled="disabled"
+          :placeholder="placeholder"
+          :aria-invalid="error || undefined"
           :class="[
-            'mint-unit-input__unit-select',
-            `mint-unit-input__unit-select--${size}`,
+            'mint-unit-input__value',
+            `mint-unit-input__value--${size}`,
+            disabled ? 'mint-unit-input__value--disabled' : '',
           ]"
-          aria-label="Unit"
-          @change="handleUnitChange"
+          aria-label="Value"
+          @input="handleValueInput"
+        />
+
+        <button
+          v-if="selectable"
+          ref="trigger"
+          type="button"
+          :class="['mint-unit-input__unit', { 'mint-unit-input__unit--open': isOpen }]"
+          :disabled="disabled"
+          aria-haspopup="listbox"
+          :aria-expanded="isOpen"
+          :aria-label="`Unit: ${currentOption?.label ?? currentUnit}`"
+          @click="toggleMenu"
+          @keydown="handleTriggerKeydown"
         >
-          <template v-if="groupedUnits">
-            <template v-if="groupedUnits.ungrouped.length > 0">
-              <option
-                v-for="u in groupedUnits.ungrouped"
-                :key="u.value"
-                :value="u.value"
-              >
-                {{ u.label }}
-              </option>
-            </template>
-            <optgroup
-              v-for="[groupLabel, groupUnits] in groupedUnits.groups"
-              :key="groupLabel"
-              :label="groupLabel"
-              class="mint-unit-input__unit-group"
-            >
-              <option
-                v-for="u in groupUnits"
-                :key="u.value"
-                :value="u.value"
-              >
-                {{ u.label }}
-              </option>
-            </optgroup>
-          </template>
-          <template v-else>
-            <option
-              v-for="u in units"
-              :key="u.value"
-              :value="u.value"
-            >
-              {{ u.label }}
-            </option>
-          </template>
-        </select>
+          {{ currentOption?.label ?? currentUnit }}
+          <svg class="mint-unit-input__chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true">
+            <path d="M4 6l4 4 4-4" />
+          </svg>
+        </button>
+        <span v-else class="mint-unit-input__unit">{{ currentOption?.label ?? currentUnit }}</span>
       </div>
-    </div>
 
-    <div
-      v-if="conversionHint"
-      class="mint-unit-input__conversion-hint"
-    >
-      {{ conversionHint }}
     </div>
+
+    <Teleport to="body">
+      <div
+        v-if="isOpen"
+        ref="menuRef"
+        class="mint-popover mint-unit-input__menu"
+        :style="menuStyle"
+        role="listbox"
+        aria-label="Unit"
+        @keydown="handlePanelKeydown"
+      >
+        <template v-for="section in menuSections" :key="section.label">
+          <div v-if="section.label" class="mint-unit-input__menu-group" role="presentation">{{ section.label }}</div>
+          <button
+            v-for="u in section.units"
+            :key="u.value"
+            type="button"
+            role="option"
+            :aria-selected="u.value === currentUnit"
+            :class="['mint-menu-item', { 'mint-menu-item--selected': u.value === currentUnit }]"
+            @click="selectUnit(u.value)"
+          >
+            <span class="mint-menu-item__text"><span class="mint-menu-item__label">{{ u.label }}</span></span>
+            <span v-if="preview(u)" class="mint-menu-item__meta">{{ preview(u) }}</span>
+          </button>
+        </template>
+      </div>
+    </Teleport>
+
+    <div v-if="conversionHint" class="mint-unit-input__hint">≈ {{ conversionHint }}</div>
   </div>
 </template>

package/src/components/WellPlate.colors.ts

@@ -1,11 +1,12 @@
 import type { HeatmapConfig } from '../types'
 
-export const DEFAULT_SAMPLE_TYPE_COLORS: Record<string, { bg: string; border: string }> = {
-  sample: { bg: 'rgba(16, 185, 129, 0.15)', border: 'rgba(16, 185, 129, 0.4)' },
-  control: { bg: 'rgba(59, 130, 246, 0.15)', border: 'rgba(59, 130, 246, 0.4)' },
-  blank: { bg: 'rgba(249, 115, 22, 0.15)', border: 'rgba(249, 115, 22, 0.4)' },
-  qc: { bg: 'rgba(139, 92, 246, 0.15)', border: 'rgba(139, 92, 246, 0.4)' },
-  iqc: { bg: 'rgba(236, 72, 153, 0.15)', border: 'rgba(236, 72, 153, 0.4)' },
+/** Color for the built-in sample types when `sampleColors` has no entry. */
+export const DEFAULT_SAMPLE_TYPE_COLORS: Record<string, string> = {
+  sample: '#10b981',
+  control: '#3b82f6',
+  blank: '#f97316',
+  qc: '#8b5cf6',
+  iqc: '#ec4899',
 }
 
 export const HEATMAP_COLORS: Record<string, string[]> = {

package/src/components/WellPlate.geometry.ts

@@ -30,6 +30,8 @@ export const PLATE_CONFIGS: Record<WellPlateFormat, WellPlateConfig> = {
 }
 
 export const WELL_PLATE_SIZE_CONFIGS: Record<WellPlateSize, WellPlateSizeConfig> = {
+  // Compact square wells (PlateEditor, 7a): room for the Q / i glyph, not a sample name.
+  xs: { cellWidth: '26px', cellHeight: '26px', headerWidth: '20px', headerHeight: '20px', fontSize: '0.6875rem', gap: '6px' },
   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' },
@@ -121,6 +123,7 @@ export function createWellGrid(
         col,
         state: wellData.state || 'empty',
         sampleType: wellData.sampleType,
+        group: wellData.group,
         value: wellData.value,
         metadata: wellData.metadata,
       })

package/src/components/WellPlate.interaction.ts

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type {
   Well,
   WellEditData,
@@ -65,7 +65,14 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
   const hoveredWell = ref<string | null>(null)
   const editingWellId = ref<string | null>(null)
   const editPopupPosition = ref({ x: 0, y: 0 })
+  // A popover hidden by `editable` turning off stays closed when it turns back on.
+  watch(options.editable, editable => { if (!editable) editingWellId.value = null })
   const { announcement, announce, announcerStyle } = useReorderAnnouncer()
+  // Shift-click ranges from the last plain or Ctrl/Cmd-clicked well, or a dragged rectangle's
+  // start; a cleared selection drops it.
+  let anchorWellId: string | null = null
+  let dragStartWellId: string | null = null
+  watch(() => options.modelValue().length === 0, empty => { if (empty) anchorWellId = null })
 
   const selectedWellSet = computed(() => new Set(options.modelValue()))
 
@@ -93,18 +100,39 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
   }
 
   function handleWellClick(well: Well, event: MouseEvent) {
-    if (options.disabled() || options.readonly()) return
+    if (options.disabled()) return
 
+    // Readonly forbids edits, not clicks: the caller may still react (e.g. open details).
     options.emitWellClick(well.id, event)
+    if (options.readonly()) return
+
+    const selectionMode = options.selectionMode()
+    const isMultiSelect = event.shiftKey || event.metaKey || event.ctrlKey
+    const canMultiSelect = selectionMode === 'multiple' || selectionMode === 'rectangle'
 
-    if (options.editable()) {
+    // On an editable plate a plain click opens the editor; a modifier click still
+    // toggles the selection so single-well editing and bulk actions coexist.
+    if (options.editable() && !(isMultiSelect && canMultiSelect)) {
+      anchorWellId = well.id
       openEditPopup(well.id, event)
       return
     }
 
-    const selectionMode = options.selectionMode()
     if (selectionMode === 'none') return
 
+    // Looked up by id: a format change leaves no stale coordinates behind.
+    const anchor = event.shiftKey && canMultiSelect
+      ? options.wellGrid().flat().find(w => w.id === anchorWellId)
+      : undefined
+    if (anchor) {
+      const range = getRectangleWellIds(anchor, well, options.rowLabels())
+      // Ctrl/Cmd+Shift adds the range to the selection; Shift alone replaces it.
+      const keep = event.ctrlKey || event.metaKey ? options.modelValue() : []
+      emitSelected(Array.from(new Set([...keep, ...range])))
+      return
+    }
+
+    anchorWellId = well.id
     emitSelected(nextClickedWellSelection(options.modelValue(), well.id, selectionMode, event))
   }
 
@@ -128,6 +156,7 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
     if (event.button !== 0) return
 
     isDragging.value = true
+    dragStartWellId = well.id
     dragStart.value = { row: well.row, col: well.col }
     dragEnd.value = { row: well.row, col: well.col }
   }
@@ -154,7 +183,11 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
     dragStart.value = null
     dragEnd.value = null
 
-    if (newSelection.length > 0) emitSelected(newSelection)
+    // A one-well rectangle is a click: the click handler selects (or toggles) it.
+    if (newSelection.length > 1) {
+      anchorWellId = dragStartWellId
+      emitSelected(newSelection)
+    }
   }
 
   function handleContextMenu(well: Well, event: MouseEvent) {
@@ -273,6 +306,7 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
         editingWellId.value = null
         return
       }
+      anchorWellId = null
       emitSelected([])
     }
 

package/src/components/WellPlate.rendering.ts

@@ -49,39 +49,33 @@ export function wellStyle(well: Well, state: WellStyleState): Record<string, str
     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`,
-    }
-  }
+  const groupColor = well.sampleType
+    && ((well.group ? state.sampleColors[well.group] : undefined)
+      ?? state.sampleColors[well.sampleType] ?? DEFAULT_SAMPLE_TYPE_COLORS[well.sampleType])
+  if (!groupColor) return {} // empty / filled wells are styled by well-plate.css
 
-  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}`,
-    }
-  }
+  return sampleTint(groupColor)
+}
 
-  const borderStyle = well.state === 'filled' ? 'solid' : 'dashed'
+/** 15% fill and 40% outline of a sample color; color-mix accepts hex and `var()` tokens alike. */
+export function sampleTint(color: string): { backgroundColor: string; border: string } {
   return {
-    backgroundColor: 'var(--bg-tertiary)',
-    border: `1px ${borderStyle} var(--border-color)`,
+    backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`,
+    border: `1px solid color-mix(in srgb, ${color} 40%, transparent)`,
   }
 }
 
-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()
+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 {

package/src/components/WellPlate.sampleDrop.ts

@@ -5,16 +5,23 @@ interface DroppedSampleTransfer {
 }
 
 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
-    }
+  if (jsonPayload(transfer)) return parseDroppedSampleJson(transfer)
+  return createTextDroppedSample(transfer.getData('text/plain'))
+}
+
+/** JSON payloads only — no `text/plain` fallback, so stray text drags are rejected. */
+export function parseDroppedSampleJson(transfer: DroppedSampleTransfer): WellSampleDropData | null {
+  const json = jsonPayload(transfer)
+  if (!json) return null
+  try {
+    return normalizeDroppedSample(JSON.parse(json))
+  } catch {
+    return null
   }
+}
 
-  return createTextDroppedSample(transfer.getData('text/plain'))
+function jsonPayload(transfer: DroppedSampleTransfer): string {
+  return transfer.getData('application/json') || transfer.getData('text/json')
 }
 
 export function createTextDroppedSample(text: string | null | undefined): WellSampleDropData | null {
@@ -50,8 +57,8 @@ export function normalizeDroppedSample(raw: unknown): WellSampleDropData | null
     sampleName,
     label,
     sampleType,
-    injectionVolume: getNumber(record.injectionVolume ?? record.injection_volume),
-    injectionCount: getNumber(record.injectionCount ?? record.injection_count),
+    injectionVolume: getPositive(record.injectionVolume ?? record.injection_volume),
+    injectionCount: getPositive(record.injectionCount ?? record.injection_count),
     customMethod: getString(record.customMethod ?? record.custom_method) ?? null,
     metadata: getRecord(record.metadata),
     raw,
@@ -62,8 +69,9 @@ 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
+/** Volumes and counts from an untrusted drag payload: zero or less is dropped. */
+function getPositive(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : undefined
 }
 
 function getRecord(value: unknown): Record<string, unknown> | undefined {