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

package/src/components/InstrumentStatusCard.vue

@@ -1,184 +0,0 @@
-<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>

package/src/components/LcmsSequenceTable.vue

@@ -1,222 +0,0 @@
-<script setup lang="ts">
-/** Table for Xcalibur-compatible LCMS sequence rows with optional reorder/remove/duplicate controls. */
-import { computed, type ComponentPublicInstance } from 'vue'
-import { useListReorder } from '../composables/useListReorder'
-import {
-  basenameFromWindowsPath,
-  DEFAULT_LCMS_SEQUENCE_COLUMNS,
-  type LcmsSequenceItem,
-  type LcmsSequenceTableColumn,
-} from '../lcms'
-import DataStateInternal from './internal/DataStateInternal.vue'
-
-interface Props {
-  items?: LcmsSequenceItem[]
-  columns?: LcmsSequenceTableColumn[]
-  editable?: boolean
-  maxRows?: number
-  showMoreLabel?: boolean
-  emptyMessage?: string
-  /** Replace the table with a loading placeholder. */
-  loading?: boolean
-  /**
-   * Error message. When set, the table is replaced by an error state.
-   * `null`/`undefined` renders normally.
-   */
-  error?: string | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  items: () => [],
-  columns: () => DEFAULT_LCMS_SEQUENCE_COLUMNS,
-  editable: false,
-  maxRows: undefined,
-  showMoreLabel: true,
-  emptyMessage: 'No sequence items to display',
-  loading: false,
-  error: null,
-})
-
-const emit = defineEmits<{
-  reorder: [fromIndex: number, toIndex: number]
-  remove: [index: number]
-  duplicate: [index: number]
-}>()
-
-// Rows are a plain ordered list: pointer drag plus an Alt+Arrow keyboard
-// alternative, both from the shared reorder composable.
-const handleRefs = new Map<string, HTMLElement>()
-
-const {
-  draggingId,
-  dragOverId,
-  announcement: reorderAnnouncement,
-  announcerStyle,
-  onDragStart,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  onDragEnd,
-  onKeydown: onReorderKeydown,
-} = useListReorder<LcmsSequenceItem>({
-  items: () => props.items,
-  getId: (_item, index) => String(index),
-  getLabel: (item) => item.file_name,
-  disabled: () => !props.editable,
-  getElement: (id) => handleRefs.get(id),
-  itemNoun: 'Row',
-  onReorder: ({ fromIndex, toIndex }) => emit('reorder', fromIndex, toIndex),
-})
-
-function setHandleRef(index: number, el: Element | ComponentPublicInstance | null) {
-  if (el instanceof HTMLElement) {
-    handleRefs.set(String(index), el)
-  } else {
-    handleRefs.delete(String(index))
-  }
-}
-
-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] ?? ''
-}
-
-</script>
-
-<template>
-  <div class="mint-lcms-sequence-table">
-    <div v-if="!loading && !error && items.length > 0" 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': draggingId === String(index),
-              'mint-lcms-sequence-table__row--drop-above': dragOverId === String(index) && draggingId !== null && Number(draggingId) > index,
-              'mint-lcms-sequence-table__row--drop-below': dragOverId === String(index) && draggingId !== null && Number(draggingId) < index,
-            }"
-            @dragstart="onDragStart($event, item, index)"
-            @dragenter.prevent
-            @dragover="onDragOver($event, item, index)"
-            @dragleave="onDragLeave"
-            @drop="onDrop($event, item, index)"
-            @dragend="onDragEnd"
-          >
-            <td v-if="editable" class="mint-lcms-sequence-table__drag-cell">
-              <button
-                :ref="(el) => setHandleRef(index, el)"
-                type="button"
-                class="mint-lcms-sequence-table__drag-handle"
-                :aria-label="`Reorder ${item.file_name}. Press Alt with the arrow keys to move it.`"
-                @keydown="onReorderKeydown($event, item, index)"
-              >
-                ::
-              </button>
-            </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-else-if="error" class="mint-lcms-sequence-table__state">
-      <slot name="error" :error="error">
-        <DataStateInternal state="error" size="sm" :title="error" />
-      </slot>
-    </div>
-
-    <div v-else-if="loading" class="mint-lcms-sequence-table__state">
-      <slot name="loading">
-        <DataStateInternal state="loading" size="sm" loading-label="Loading sequence" />
-      </slot>
-    </div>
-
-    <div v-else class="mint-lcms-sequence-table__state">
-      <slot name="empty">
-        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
-      </slot>
-    </div>
-
-    <div v-if="hasMore && showMoreLabel" class="mint-lcms-sequence-table__more">
-      Showing first {{ maxRows }} of {{ items.length }} items
-    </div>
-
-    <!-- Reorder announcements for screen readers -->
-    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
-  </div>
-</template>

package/src/components/PlateMapEditor.story.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import PlateMapEditor from './PlateMapEditor.vue'
-import type { SampleType } from '../types'
-
-const mockSamples: SampleType[] = [
-  { id: 's1', name: 'HeLa Cells', color: '#3B82F6', count: 0 },
-  { id: 's2', name: 'MCF-7 Cells', color: '#10B981', count: 0 },
-  { id: 's3', name: 'Vehicle Control', color: '#F59E0B', count: 0 },
-  { id: 's4', name: 'Blank', color: '#EF4444', count: 0 },
-]
-
-function initState() {
-  return {
-    format: 96 as const,
-    maxPlates: 10,
-    samples: mockSamples,
-    showToolbar: true,
-    showSidebar: true,
-    allowAddPlates: true,
-    allowAddSamples: true,
-    size: 'md' as const,
-  }
-}
-</script>
-
-<template>
-  <Story title="Lab/PlateMapEditor">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem;">
-          <PlateMapEditor
-            :format="state.format"
-            :max-plates="state.maxPlates"
-            :samples="state.samples"
-            :show-toolbar="state.showToolbar"
-            :show-sidebar="state.showSidebar"
-            :allow-add-plates="state.allowAddPlates"
-            :allow-add-samples="state.allowAddSamples"
-            :size="state.size"
-          />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.format"
-          title="Format"
-          :options="[
-            { value: 54, label: '54-well' },
-            { value: 96, label: '96-well' },
-          ]"
-        />
-        <HstSlider v-model="state.maxPlates" title="Max Plates" :min="1" :max="10" />
-        <HstCheckbox v-model="state.showToolbar" title="Show Toolbar" />
-        <HstCheckbox v-model="state.showSidebar" title="Show Sidebar" />
-        <HstCheckbox v-model="state.allowAddPlates" title="Allow Add Plates" />
-        <HstCheckbox v-model="state.allowAddSamples" title="Allow Add Samples" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="[
-            { value: 'sm', label: 'Small' },
-            { value: 'md', label: 'Medium' },
-            { value: 'lg', label: 'Large' },
-            { value: 'xl', label: 'Extra Large' },
-            { value: 'fill', label: 'Fill' },
-          ]"
-        />
-      </template>
-    </Variant>
-
-    <Variant title="No Sidebar">
-      <div style="padding: 2rem;">
-        <PlateMapEditor
-          :format="96"
-          :samples="mockSamples"
-          :show-sidebar="false"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Minimal (No Toolbar)">
-      <div style="padding: 2rem;">
-        <PlateMapEditor
-          :format="96"
-          :samples="mockSamples"
-          :show-toolbar="false"
-          :show-sidebar="false"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>