@morscherlab/mint-sdk 1.0.0-beta.7 → 1.0.0-rc.2

package/src/__tests__/utils/rack.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, it } from 'vitest'
+import {
+  createLcmsControlWellEditData,
+  getLcmsDefaultControlWellId,
+  lcmsPlateCellsToRacks,
+  rackToLcmsPlateCells,
+} from '../../utils/rack'
+import type { Rack } from '../../types'
+
+describe('rack LCMS adapters', () => {
+  it('converts LCMS plate cells into rack wells grouped by slot', () => {
+    const racks = lcmsPlateCellsToRacks([
+      {
+        row: 'A',
+        column: 1,
+        sample_name: 'S1',
+        sample_type: 'sample',
+        injection_volume: 7,
+        slot: 'G',
+      },
+      {
+        row: 'H',
+        column: 10,
+        sample_name: 'IQC',
+        sample_type: 'iqc',
+        injection_count: 2,
+        slot: 'R',
+      },
+    ])
+
+    expect(racks.map(rack => rack.slot)).toEqual(['R', 'G'])
+    expect(racks[0]).toMatchObject({
+      id: 'rack-R',
+      format: 96,
+      wells: {
+        H10: {
+          sampleType: 'iqc',
+          metadata: {
+            label: 'IQC',
+            injectionVolume: 5,
+            injectionCount: 2,
+          },
+        },
+      },
+    })
+    expect(racks[1].wells.A1?.metadata).toMatchObject({
+      label: 'S1',
+      injectionVolume: 7,
+    })
+  })
+
+  it('flattens rack wells back to LCMS plate cells with slot metadata', () => {
+    const rack: Rack = {
+      id: 'rack-R',
+      name: 'Rack R',
+      format: 54,
+      slot: 'R',
+      injectionVolume: 5,
+      wells: {
+        A1: {
+          id: 'A1',
+          state: 'filled',
+          sampleType: 'sample',
+          metadata: {
+            label: 'S1',
+            injectionVolume: 7,
+            injectionCount: 3,
+            customMethod: 'C:\\Methods\\custom.meth',
+          },
+        },
+        F7: {
+          id: 'F7',
+          state: 'filled',
+          sampleType: 'iqc',
+          metadata: {
+            label: 'IQC',
+          },
+        },
+      },
+    }
+
+    expect(rackToLcmsPlateCells(rack)).toEqual([
+      {
+        row: 'A',
+        column: 1,
+        sample_name: 'S1',
+        sample_type: 'sample',
+        injection_volume: 7,
+        injection_count: 3,
+        custom_method: 'C:\\Methods\\custom.meth',
+        slot: 'R',
+      },
+      {
+        row: 'F',
+        column: 7,
+        sample_name: 'IQC',
+        sample_type: 'iqc',
+        injection_volume: 5,
+        injection_count: 1,
+        custom_method: null,
+        slot: 'R',
+      },
+    ])
+  })
+
+  it('exposes LCMS default control well edit data', () => {
+    expect(getLcmsDefaultControlWellId('54vial', 'iqc')).toBe('F7')
+    expect(createLcmsControlWellEditData('qc', {
+      plateType: '96well',
+      injectionVolume: 8,
+    })).toEqual({
+      wellId: 'H11',
+      label: 'QC',
+      sampleType: 'qc',
+      injectionVolume: 8,
+      injectionCount: 1,
+      customMethod: '',
+    })
+  })
+})

package/src/components/AppAvatarMenu.vue

@@ -35,9 +35,12 @@ const { isOpen, rootRef, close, toggle } = useDropdownState({
 const initials = computed(() => {
   if (props.userInitial) return props.userInitial.slice(0, 2).toUpperCase()
   if (props.userName) {
-    const parts = props.userName.trim().split(/\s+/)
-    if (parts.length >= 2) return (parts[0]!.charAt(0) + parts[1]!.charAt(0)).toUpperCase()
-    return parts[0]!.slice(0, 2).toUpperCase()
+    const parts = props.userName.trim().split(/\s+/).filter(Boolean)
+    const first = parts[0]
+    if (!first) return 'U'
+    const second = parts[1]
+    if (second) return (first.charAt(0) + second.charAt(0)).toUpperCase()
+    return first.slice(0, 2).toUpperCase()
   }
   return 'U'
 })

package/src/components/AppTopBar.vue

@@ -117,7 +117,12 @@ const { isIntegrated, plugin } = usePlatformContext()
 const isStandalone = computed(() => !isIntegrated.value)
 const appExperiment = inject(APP_EXPERIMENT_KEY, null)
 
-const hasPluginIcon = computed(() => !!plugin.value?.icon)
+const pluginIcon = computed(() => {
+  const currentPlugin = plugin.value
+  return currentPlugin?.icon
+    ? { icon: currentPlugin.icon, color: currentPlugin.color }
+    : null
+})
 
 const profileInitial = computed(() => {
   if (props.userInitial) return props.userInitial
@@ -225,10 +230,10 @@ function currentItemIdFromLocation(pages: Array<Pick<PageSelectorItem, 'id' | 't
         >
           <slot name="icon">
             <PluginIcon
-              v-if="hasPluginIcon"
+              v-if="pluginIcon"
               class="mint-topbar__plugin-icon"
-              :icon="plugin!.icon"
-              :tone="plugin!.color"
+              :icon="pluginIcon.icon"
+              :tone="pluginIcon.color"
               size="md"
               variant="solid"
             />
@@ -248,10 +253,10 @@ function currentItemIdFromLocation(pages: Array<Pick<PageSelectorItem, 'id' | 't
         >
           <slot name="icon">
             <PluginIcon
-              v-if="hasPluginIcon"
+              v-if="pluginIcon"
               class="mint-topbar__plugin-icon"
-              :icon="plugin!.icon"
-              :tone="plugin!.color"
+              :icon="pluginIcon.icon"
+              :tone="pluginIcon.color"
               size="md"
               variant="solid"
             />
@@ -267,10 +272,10 @@ function currentItemIdFromLocation(pages: Array<Pick<PageSelectorItem, 'id' | 't
         <template v-else>
           <slot name="icon">
             <PluginIcon
-              v-if="hasPluginIcon"
+              v-if="pluginIcon"
               class="mint-topbar__plugin-icon"
-              :icon="plugin!.icon"
-              :tone="plugin!.color"
+              :icon="pluginIcon.icon"
+              :tone="pluginIcon.color"
               size="md"
               variant="solid"
             />
@@ -446,6 +451,7 @@ function currentItemIdFromLocation(pages: Array<Pick<PageSelectorItem, 'id' | 't
     :control-options="settingsConfig?.controlOptions"
     :values="settingsConfig?.values"
     :enhancements="settingsConfig?.enhancements"
+    :user-type="settingsConfig?.userType"
     @update:values="emit('settings-values-change', $event)"
   >
     <template v-for="tab in normalizedSettingsTabs" :key="tab.id" #[`tab-${tab.id}`]>

package/src/components/AuditTrail.vue

@@ -32,7 +32,7 @@ const uniqueTypes = computed(() => {
 })
 
 const uniqueUsers = computed(() => {
-  const users = new Set(props.entries.filter(e => e.user).map(e => e.user!))
+  const users = new Set(props.entries.flatMap(e => e.user ? [e.user] : []))
   return Array.from(users)
 })
 

package/src/components/BaseTabs.vue

@@ -21,6 +21,11 @@ const emit = defineEmits<{
 const activeTab = computed(() => props.modelValue)
 const normalizedTabs = computed<TabItem[]>(() => props.tabs.map(normalizeItemInput))
 
+function isSvgIcon(icon: TabItem['icon']): icon is string | string[] {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.trim().startsWith('M') || icon.trim().startsWith('m')
+}
+
 function selectTab(tabId: string) {
   const tab = normalizedTabs.value.find(t => t.id === tabId)
   if (tab && !tab.disabled) {
@@ -46,7 +51,23 @@ function selectTab(tabId: string) {
       @click="selectTab(tab.id)"
     >
       <span class="mint-tab__content">
-        <span v-if="tab.icon" class="mint-tab__icon">{{ tab.icon }}</span>
+        <svg
+          v-if="isSvgIcon(tab.icon)"
+          class="mint-tab__icon mint-tab__icon--svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <template v-if="Array.isArray(tab.icon)">
+            <path v-for="(d, index) in tab.icon" :key="index" :d="d" />
+          </template>
+          <path v-else :d="tab.icon" />
+        </svg>
+        <span v-else-if="tab.icon" class="mint-tab__icon">{{ tab.icon }}</span>
         {{ tab.label }}
         <span v-if="tab.badge !== undefined" class="mint-tab__badge">
           {{ tab.badge }}

package/src/components/Calendar.vue

@@ -134,8 +134,12 @@ const markerMap = computed(() => {
   for (const marker of props.markers) {
     const date = parseDate(marker.date)
     const key = toDateKey(date)
-    if (!map.has(key)) map.set(key, [])
-    map.get(key)!.push(marker)
+    const markers = map.get(key)
+    if (markers) {
+      markers.push(marker)
+    } else {
+      map.set(key, [marker])
+    }
   }
   return map
 })

package/src/components/ConcentrationInput.vue

@@ -37,13 +37,14 @@ const { unitCategories, getConversionHint } = useConcentrationUnits()
 
 // Filter categories based on allowedUnits
 const filteredCategories = computed(() => {
-  if (!props.allowedUnits || props.allowedUnits.length === 0) {
+  const allowedUnits = props.allowedUnits
+  if (!allowedUnits || allowedUnits.length === 0) {
     return unitCategories.value
   }
   return unitCategories.value
     .map(cat => ({
       label: cat.label,
-      units: cat.units.filter(u => props.allowedUnits!.includes(u)),
+      units: cat.units.filter(u => allowedUnits.includes(u)),
     }))
     .filter(cat => cat.units.length > 0)
 })

package/src/components/GroupAssigner.vue

@@ -42,9 +42,12 @@ const assignment = useGroupAssignment({
 const { unassignedGroups, zone1Groups, zone2Groups, zone1Count, zone2Count, validationMessage } = assignment
 
 function handleDragStart(event: DragEvent, groupName: string) {
+  const transfer = event.dataTransfer
+  if (!transfer) return
+
   draggingGroup.value = groupName
-  event.dataTransfer?.setData('groupName', groupName)
-  event.dataTransfer!.effectAllowed = 'move'
+  transfer.setData('groupName', groupName)
+  transfer.effectAllowed = 'move'
 }
 
 function handleDragEnd() {
@@ -54,7 +57,9 @@ function handleDragEnd() {
 
 function handleDragOver(event: DragEvent, zone: GroupAssignmentZone) {
   event.preventDefault()
-  event.dataTransfer!.dropEffect = 'move'
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
   dragOverZone.value = zone
 }
 

package/src/components/InstrumentAlertLog.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+/** Filterable instrument alert/event list with optional acknowledge actions. */
+import { computed, ref } from 'vue'
+import type { InstrumentAlert, InstrumentAlertLevel } from '../types'
+
+interface Props {
+  alerts?: InstrumentAlert[]
+  title?: string
+  acknowledgeable?: boolean
+  emptyMessage?: string
+  filteredEmptyMessage?: string
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alerts: () => [],
+  title: 'Event Log',
+  acknowledgeable: true,
+  emptyMessage: 'No alerts received yet',
+  filteredEmptyMessage: 'No alerts match current filters',
+  locale: undefined,
+})
+
+const emit = defineEmits<{
+  acknowledge: [alert: InstrumentAlert]
+}>()
+
+const levelConfig: Record<InstrumentAlertLevel, { label: string; cssClass: string; color: string }> = {
+  critical: { label: 'Critical', cssClass: 'mint-instrument-alert--critical', color: '#ef4444' },
+  warning: { label: 'Warning', cssClass: 'mint-instrument-alert--warning', color: '#eab308' },
+  info: { label: 'Info', cssClass: 'mint-instrument-alert--info', color: '#3b82f6' },
+}
+
+const levels: InstrumentAlertLevel[] = ['critical', 'warning', 'info']
+const activeLevels = ref<Set<InstrumentAlertLevel>>(new Set(levels))
+const activeInstrument = ref<string | null>(null)
+
+const instruments = computed(() => {
+  const counts = new Map<string, number>()
+  for (const alert of props.alerts) {
+    const name = instrumentName(alert)
+    counts.set(name, (counts.get(name) ?? 0) + 1)
+  }
+  return [...counts.entries()].map(([name, count]) => ({ name, count }))
+})
+
+const alertCounts = computed(() => {
+  const counts: Record<InstrumentAlertLevel, number> = { critical: 0, warning: 0, info: 0 }
+  for (const alert of props.alerts) {
+    if (alert.level in counts) counts[alert.level]++
+  }
+  return counts
+})
+
+const filteredAlerts = computed(() =>
+  [...props.alerts]
+    .filter(alert => activeLevels.value.has(alert.level))
+    .filter(alert => !activeInstrument.value || instrumentName(alert) === activeInstrument.value)
+    .sort((a, b) => alertTime(b) - alertTime(a))
+)
+
+function toggleLevel(level: InstrumentAlertLevel) {
+  const next = new Set(activeLevels.value)
+  if (next.has(level)) {
+    if (next.size > 1) next.delete(level)
+  } else {
+    next.add(level)
+  }
+  activeLevels.value = next
+}
+
+function toggleInstrument(name: string) {
+  activeInstrument.value = activeInstrument.value === name ? null : name
+}
+
+function instrumentName(alert: InstrumentAlert): string {
+  return alert.instrument_name || alert.instrument_id
+}
+
+function alertTime(alert: InstrumentAlert): number {
+  if (!alert.timestamp) return 0
+  const date = alert.timestamp instanceof Date ? alert.timestamp : new Date(alert.timestamp)
+  return Number.isNaN(date.getTime()) ? 0 : date.getTime()
+}
+
+function timeAgo(value: string | Date | undefined): string {
+  if (!value) return ''
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
+  if (seconds < 60) return 'just now'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days < 7) return `${days}d ago`
+  return date.toLocaleDateString(props.locale, { month: 'short', day: 'numeric' })
+}
+
+function alertDetail(alert: InstrumentAlert): string {
+  return alert.body?.detail ?? alert.message ?? alert.rule ?? ''
+}
+</script>
+
+<template>
+  <div class="mint-instrument-alert-log">
+    <div class="mint-instrument-alert-log__header">
+      <span class="mint-instrument-alert-log__title">{{ title }}</span>
+    </div>
+
+    <div class="mint-instrument-alert-log__filters">
+      <div class="mint-instrument-alert-log__filter-row">
+        <button
+          v-for="level in levels"
+          :key="level"
+          type="button"
+          class="mint-instrument-alert-log__filter"
+          :class="{ 'mint-instrument-alert-log__filter--active': activeLevels.has(level) }"
+          :style="activeLevels.has(level) ? { '--filter-color': levelConfig[level].color } : undefined"
+          @click="toggleLevel(level)"
+        >
+          <span
+            class="mint-instrument-alert-log__filter-dot"
+            :style="{ backgroundColor: levelConfig[level].color }"
+          />
+          {{ levelConfig[level].label }}
+          <span class="mint-instrument-alert-log__filter-count">{{ alertCounts[level] }}</span>
+        </button>
+      </div>
+      <div v-if="instruments.length > 1" class="mint-instrument-alert-log__filter-row">
+        <button
+          v-for="instrument in instruments"
+          :key="instrument.name"
+          type="button"
+          class="mint-instrument-alert-log__filter"
+          :class="{ 'mint-instrument-alert-log__filter--active': activeInstrument === instrument.name }"
+          @click="toggleInstrument(instrument.name)"
+        >
+          {{ instrument.name }}
+          <span class="mint-instrument-alert-log__filter-count">{{ instrument.count }}</span>
+        </button>
+      </div>
+    </div>
+
+    <TransitionGroup name="mint-instrument-alert" tag="div" class="mint-instrument-alert-log__list">
+      <div
+        v-for="alert in filteredAlerts"
+        :key="alert.id ?? `${alert.instrument_id}-${alert.rule ?? alert.message}-${alert.timestamp ?? ''}`"
+        class="mint-instrument-alert"
+        :class="[
+          levelConfig[alert.level]?.cssClass,
+          { 'mint-instrument-alert--acknowledged': alert.acknowledged },
+        ]"
+      >
+        <div class="mint-instrument-alert__header">
+          <span class="mint-instrument-alert__instrument">{{ instrumentName(alert) }}</span>
+          <span v-if="alert.body?.source" class="mint-instrument-alert__source">
+            {{ alert.body.source }}
+          </span>
+          <span class="mint-instrument-alert__time">{{ timeAgo(alert.timestamp) }}</span>
+        </div>
+        <div class="mint-instrument-alert__detail">{{ alertDetail(alert) }}</div>
+        <div
+          v-if="alert.body?.code != null || (acknowledgeable && !alert.acknowledged && alert.level !== 'info')"
+          class="mint-instrument-alert__footer"
+        >
+          <span v-if="alert.body?.code != null" class="mint-instrument-alert__code">
+            Code {{ alert.body.code }}
+          </span>
+          <button
+            v-if="acknowledgeable && !alert.acknowledged && alert.level !== 'info'"
+            type="button"
+            class="mint-instrument-alert__ack"
+            @click="emit('acknowledge', alert)"
+          >
+            Acknowledge
+          </button>
+        </div>
+      </div>
+
+      <div v-if="filteredAlerts.length === 0" key="empty" class="mint-instrument-alert-log__empty">
+        {{ alerts.length === 0 ? emptyMessage : filteredEmptyMessage }}
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/instrument-monitor.css';
+</style>

package/src/components/InstrumentStateBadge.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/** Status badge for shared instrument monitor states. */
+import { computed } from 'vue'
+import type { InstrumentState } from '../types'
+
+interface Props {
+  state: InstrumentState | string
+  label?: string
+  pulseWhenRunning?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  pulseWhenRunning: true,
+})
+
+const stateConfig: Record<InstrumentState, { label: string; tone: string }> = {
+  running: { label: 'RUNNING', tone: 'success' },
+  standby: { label: 'STANDBY', tone: 'warning' },
+  idle: { label: 'IDLE', tone: 'muted' },
+  error: { label: 'ERROR', tone: 'error' },
+  connected: { label: 'CONNECTED', tone: 'info' },
+  disconnected: { label: 'OFFLINE', tone: 'muted' },
+}
+
+const normalizedState = computed(() => props.state.toLowerCase())
+const config = computed(() => {
+  const match = stateConfig[normalizedState.value as InstrumentState]
+  return match ?? { label: props.state.toUpperCase(), tone: 'muted' }
+})
+const shouldPulse = computed(() => props.pulseWhenRunning && normalizedState.value === 'running')
+</script>
+
+<template>
+  <span
+    class="mint-instrument-state"
+    :class="[
+      `mint-instrument-state--${config.tone}`,
+      { 'mint-instrument-state--pulse': shouldPulse },
+      { 'mint-instrument-state--offline': normalizedState === 'disconnected' },
+    ]"
+  >
+    <span v-if="shouldPulse" class="mint-instrument-state__dot" />
+    {{ label ?? config.label }}
+  </span>
+</template>
+
+<style>
+@import '../styles/components/instrument-monitor.css';
+</style>