@morscherlab/mint-sdk 1.0.0-rc.1 → 1.0.0-rc.4

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>

package/src/components/InstrumentStatusCard.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+/** Compact card for live instrument monitor status, sample, method, sequence progress, and ETA. */
+import { computed } from 'vue'
+import {
+  estimateSequenceFinishDate,
+  formatSequenceRemaining,
+  estimateSequenceRemainingSeconds,
+} from '../instrument'
+import type { InstrumentState, InstrumentStatus, SequenceProgress } from '../types'
+import InstrumentStateBadge from './InstrumentStateBadge.vue'
+import SequenceProgressBar from './SequenceProgressBar.vue'
+
+interface Props {
+  status: InstrumentStatus
+  name?: string
+  showPlaceholders?: boolean
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: undefined,
+  showPlaceholders: true,
+  locale: undefined,
+})
+
+const displayName = computed(() =>
+  props.name
+  ?? props.status.instrument_name
+  ?? props.status.instrument_id
+)
+const isRunning = computed(() => props.status.state === 'running')
+const sampleLabel = computed(() => {
+  const sample = props.status.current_sample
+  return sample ? (sample.sample_name ?? sample.sample_id ?? sample.file_name) : null
+})
+
+const etaDisplay = computed(() => {
+  const progress = props.status.sequence_progress
+  if (!progress) return null
+  const finish = estimateSequenceFinishDate(progress)
+  if (!finish) return null
+
+  const now = new Date()
+  const sameDay =
+    finish.getFullYear() === now.getFullYear()
+    && finish.getMonth() === now.getMonth()
+    && finish.getDate() === now.getDate()
+
+  const time = finish.toLocaleTimeString(props.locale, { hour: 'numeric', minute: '2-digit' })
+  if (sameDay) return time
+
+  const sameYear = finish.getFullYear() === now.getFullYear()
+  const date = finish.toLocaleDateString(props.locale, {
+    month: 'short',
+    day: 'numeric',
+    ...(sameYear ? {} : { year: 'numeric' }),
+  })
+  return `${date}, ${time}`
+})
+
+const remainingLabel = computed(() => {
+  const progress = props.status.sequence_progress
+  if (!progress) return null
+  return formatSequenceRemaining(progress)
+})
+
+const lastSeenAgo = computed(() => {
+  const value = props.status.last_seen ?? props.status.timestamp
+  if (!value) return null
+  return formatRelativeAge(value)
+})
+
+const stateClass = computed(() => `mint-instrument-card--${props.status.state}`)
+
+function stateTone(state: InstrumentState | string): string {
+  if (state === 'running') return 'success'
+  if (state === 'standby') return 'warning'
+  if (state === 'error') return 'error'
+  if (state === 'connected') return 'info'
+  return 'muted'
+}
+
+function formatRelativeAge(value: string | Date): string | null {
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+  const minutes = Math.floor((Date.now() - date.getTime()) / 60_000)
+  if (minutes < 1) return 'just now'
+  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)
+  return days === 1 ? '1 day ago' : `${days} days ago`
+}
+
+function hasRemaining(progress: SequenceProgress | null | undefined): boolean {
+  const remaining = estimateSequenceRemainingSeconds(progress)
+  return remaining !== null && remaining > 0
+}
+</script>
+
+<template>
+  <div class="mint-instrument-card" :class="stateClass">
+    <div class="mint-instrument-card__header">
+      <span
+        class="mint-instrument-card__dot"
+        :class="`mint-instrument-card__dot--${stateTone(status.state)}`"
+      />
+      <strong class="mint-instrument-card__name">{{ displayName }}</strong>
+      <InstrumentStateBadge :state="status.state" />
+    </div>
+
+    <template v-if="isRunning">
+      <div v-if="status.current_sample" class="mint-instrument-card__sample">
+        <span class="mint-instrument-card__sample-label">Currently Running</span>
+        <div class="mint-instrument-card__sample-row">
+          <span class="mint-instrument-card__sample-dot" />
+          <span class="mint-instrument-card__sample-name">{{ sampleLabel }}</span>
+          <span
+            v-if="status.current_sample.vial_position"
+            class="mint-instrument-card__sample-vial"
+          >
+            {{ status.current_sample.vial_position }}
+          </span>
+        </div>
+      </div>
+
+      <span
+        v-if="status.active_method"
+        class="mint-instrument-card__method"
+        :title="status.active_method"
+      >
+        {{ status.active_method }}
+      </span>
+
+      <SequenceProgressBar
+        v-if="status.sequence_progress"
+        :progress="status.sequence_progress"
+        compact
+      />
+
+      <div
+        v-if="etaDisplay || hasRemaining(status.sequence_progress)"
+        class="mint-instrument-card__eta"
+      >
+        <span class="mint-instrument-card__eta-label">ETA</span>
+        <span v-if="etaDisplay" class="mint-instrument-card__eta-time">{{ etaDisplay }}</span>
+        <span v-if="remainingLabel" class="mint-instrument-card__eta-remaining">
+          {{ remainingLabel }}
+        </span>
+      </div>
+
+      <span
+        v-if="status.sequence_progress?.sequence_name"
+        class="mint-instrument-card__sequence"
+        :title="status.sequence_progress.sequence_name"
+      >
+        {{ status.sequence_progress.sequence_name }}
+      </span>
+    </template>
+
+    <template v-else-if="status.state === 'error'">
+      <div class="mint-instrument-card__error">
+        <div class="mint-instrument-card__error-message">
+          {{ status.active_method ?? 'Instrument error' }}
+        </div>
+        <div v-if="lastSeenAgo" class="mint-instrument-card__error-detail">
+          Last seen {{ lastSeenAgo }}
+        </div>
+      </div>
+    </template>
+
+    <template v-else-if="showPlaceholders">
+      <div class="mint-instrument-card__placeholder">
+        <span class="mint-instrument-card__muted">No sample running</span>
+        <span class="mint-instrument-card__muted">No method</span>
+        <SequenceProgressBar
+          :progress="{ current_sample: 0, total_samples: 0 }"
+          compact
+        />
+        <span class="mint-instrument-card__muted">No sequence</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/instrument-monitor.css';
+</style>

package/src/components/LcmsSequenceTable.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+/** Table for Xcalibur-compatible LCMS sequence rows with optional reorder/remove/duplicate controls. */
+import { computed, ref } from 'vue'
+import {
+  basenameFromWindowsPath,
+  DEFAULT_LCMS_SEQUENCE_COLUMNS,
+  type LcmsSequenceItem,
+  type LcmsSequenceTableColumn,
+} from '../lcms'
+
+interface Props {
+  items?: LcmsSequenceItem[]
+  columns?: LcmsSequenceTableColumn[]
+  editable?: boolean
+  maxRows?: number
+  showMoreLabel?: boolean
+  emptyMessage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  columns: () => DEFAULT_LCMS_SEQUENCE_COLUMNS,
+  editable: false,
+  maxRows: undefined,
+  showMoreLabel: true,
+  emptyMessage: 'No sequence items to display',
+})
+
+const emit = defineEmits<{
+  reorder: [fromIndex: number, toIndex: number]
+  remove: [index: number]
+  duplicate: [index: number]
+}>()
+
+const dragIndex = ref<number | null>(null)
+const dropTargetIndex = ref<number | null>(null)
+
+const displayItems = computed(() => {
+  if (!props.maxRows) return props.items
+  return props.items.slice(0, props.maxRows)
+})
+
+const hasMore = computed(() =>
+  props.maxRows != null && props.items.length > props.maxRows
+)
+
+function sampleTypeClass(type: string): string {
+  const normalized = type.toLowerCase()
+  if (normalized === 'blank') return 'mint-lcms-sequence-table__type--blank'
+  if (normalized === 'qc' || normalized === 'iqc' || normalized === 'eqc') {
+    return 'mint-lcms-sequence-table__type--qc'
+  }
+  return 'mint-lcms-sequence-table__type--sample'
+}
+
+function cellValue(item: LcmsSequenceItem, column: LcmsSequenceTableColumn, index: number): string | number {
+  if (column.key === 'index') return index + 1
+  if (column.key === 'actions') return ''
+  if (column.key === 'instrument_method') return basenameFromWindowsPath(item.instrument_method)
+  return item[column.key] ?? ''
+}
+
+function onDragStart(event: DragEvent, index: number) {
+  if (!props.editable) return
+  dragIndex.value = index
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', String(index))
+  }
+}
+
+function onDragOver(event: DragEvent, index: number) {
+  if (!props.editable) return
+  event.preventDefault()
+  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+  if (dragIndex.value !== null && dragIndex.value !== index) {
+    dropTargetIndex.value = index
+  }
+}
+
+function clearDragState() {
+  dragIndex.value = null
+  dropTargetIndex.value = null
+}
+
+function onDrop(event: DragEvent, toIndex: number) {
+  if (!props.editable) return
+  event.preventDefault()
+  if (dragIndex.value !== null && dragIndex.value !== toIndex) {
+    emit('reorder', dragIndex.value, toIndex)
+  }
+  clearDragState()
+}
+</script>
+
+<template>
+  <div class="mint-lcms-sequence-table">
+    <div class="mint-lcms-sequence-table__scroller">
+      <table class="mint-lcms-sequence-table__table">
+        <thead>
+          <tr>
+            <th v-if="editable" class="mint-lcms-sequence-table__drag-header" />
+            <th
+              v-for="column in columns"
+              :key="column.key"
+              :class="[
+                'mint-lcms-sequence-table__th',
+                { 'mint-lcms-sequence-table__th--right': column.align === 'right' },
+              ]"
+            >
+              {{ column.label }}
+            </th>
+            <th v-if="editable" class="mint-lcms-sequence-table__actions-header" />
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(item, index) in displayItems"
+            :key="`${item.file_name}-${item.position}-${index}`"
+            :draggable="editable"
+            class="mint-lcms-sequence-table__row"
+            :class="{
+              'mint-lcms-sequence-table__row--dragging': dragIndex === index,
+              'mint-lcms-sequence-table__row--drop-above': dropTargetIndex === index && dragIndex !== null && dragIndex > index,
+              'mint-lcms-sequence-table__row--drop-below': dropTargetIndex === index && dragIndex !== null && dragIndex < index,
+            }"
+            @dragstart="onDragStart($event, index)"
+            @dragenter.prevent
+            @dragover="onDragOver($event, index)"
+            @dragleave="dropTargetIndex = null"
+            @drop="onDrop($event, index)"
+            @dragend="clearDragState"
+          >
+            <td v-if="editable" class="mint-lcms-sequence-table__drag-cell">
+              <span class="mint-lcms-sequence-table__drag-handle" aria-hidden="true">::</span>
+            </td>
+            <td
+              v-for="column in columns"
+              :key="column.key"
+              :class="[
+                'mint-lcms-sequence-table__td',
+                `mint-lcms-sequence-table__td--${column.key}`,
+                { 'mint-lcms-sequence-table__td--right': column.align === 'right' },
+              ]"
+              :title="column.key === 'instrument_method' ? item.instrument_method : undefined"
+            >
+              <span
+                v-if="column.key === 'sample_type'"
+                class="mint-lcms-sequence-table__type"
+                :class="sampleTypeClass(item.sample_type)"
+              >
+                {{ item.sample_type }}
+              </span>
+              <template v-else>{{ cellValue(item, column, index) }}</template>
+            </td>
+            <td v-if="editable" class="mint-lcms-sequence-table__actions">
+              <button
+                type="button"
+                class="mint-lcms-sequence-table__action"
+                title="Duplicate"
+                @click="emit('duplicate', index)"
+              >
+                +
+              </button>
+              <button
+                type="button"
+                class="mint-lcms-sequence-table__action mint-lcms-sequence-table__action--danger"
+                title="Delete"
+                @click="emit('remove', index)"
+              >
+                x
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="items.length === 0" class="mint-lcms-sequence-table__empty">
+      {{ emptyMessage }}
+    </div>
+
+    <div v-if="hasMore && showMoreLabel" class="mint-lcms-sequence-table__more">
+      Showing first {{ maxRows }} of {{ items.length }} items
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/lcms-sequence-table.css';
+</style>

package/src/components/ProgressBar.vue

@@ -12,6 +12,7 @@ interface Props {
   indeterminate?: boolean
   steps?: string[]
   currentStep?: number
+  ariaLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -58,6 +59,7 @@ const segmentCount = computed(() => props.steps.length || 0)
       :aria-valuenow="indeterminate ? undefined : clampedValue"
       :aria-valuemin="indeterminate ? undefined : 0"
       :aria-valuemax="indeterminate ? undefined : 100"
+      :aria-label="ariaLabel ?? label"
     >
       <div
         :class="[
@@ -77,6 +79,7 @@ const segmentCount = computed(() => props.steps.length || 0)
       :aria-valuenow="currentStep"
       :aria-valuemin="0"
       :aria-valuemax="segmentCount"
+      :aria-label="ariaLabel ?? label"
     >
       <span
         v-for="(_step, i) in steps"