@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/AuditTrail.story.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import AuditTrail from './AuditTrail.vue'
+
+const now = new Date()
+
+function minutesAgo(mins: number): Date {
+  return new Date(now.getTime() - mins * 60 * 1000)
+}
+
+function hoursAgo(hrs: number): Date {
+  return new Date(now.getTime() - hrs * 60 * 60 * 1000)
+}
+
+function daysAgo(days: number): Date {
+  return new Date(now.getTime() - days * 24 * 60 * 60 * 1000)
+}
+
+const mockEntries = [
+  {
+    id: 'e1',
+    type: 'create' as const,
+    action: 'Created experiment "Cisplatin Dose Response"',
+    detail: 'Initial setup with 96-well plate format, 8 concentration points.',
+    user: 'Elena Morscher',
+    timestamp: minutesAgo(5),
+    metadata: { 'Plate format': '96-well', 'Compounds': '1' },
+  },
+  {
+    id: 'e2',
+    type: 'update' as const,
+    action: 'Updated sample assignments',
+    detail: 'Assigned HeLa cells to wells A1-A12 and MCF-7 to wells B1-B12.',
+    user: 'Elena Morscher',
+    timestamp: minutesAgo(45),
+  },
+  {
+    id: 'e3',
+    type: 'update' as const,
+    action: 'Modified protocol step "Incubation"',
+    detail: 'Changed incubation time from 24h to 48h.',
+    user: 'Thomas Weber',
+    timestamp: hoursAgo(2),
+    metadata: { 'Previous': '24h', 'New': '48h' },
+  },
+  {
+    id: 'e4',
+    type: 'system' as const,
+    action: 'Plate reader measurement completed',
+    detail: 'Luminescence readout finished for plate 1. 96/96 wells measured successfully.',
+    user: undefined,
+    timestamp: hoursAgo(6),
+  },
+  {
+    id: 'e5',
+    type: 'delete' as const,
+    action: 'Removed blank wells from analysis',
+    detail: 'Wells H1-H12 excluded from dose-response curve fitting.',
+    user: 'Elena Morscher',
+    timestamp: daysAgo(1),
+  },
+  {
+    id: 'e6',
+    type: 'create' as const,
+    action: 'Generated analysis report',
+    detail: 'IC50 curve fitting completed. Report exported as PDF.',
+    user: 'Thomas Weber',
+    timestamp: daysAgo(2),
+    metadata: { 'IC50': '3.2 uM', 'R-squared': '0.98' },
+  },
+  {
+    id: 'e7',
+    type: 'system' as const,
+    action: 'Experiment status changed to "Completed"',
+    user: undefined,
+    timestamp: daysAgo(3),
+  },
+]
+
+function initState() {
+  return {
+    entries: mockEntries,
+    showFilters: false,
+    emptyMessage: 'No activity yet',
+    order: 'newest' as const,
+    size: 'md' as const,
+  }
+}
+</script>
+
+<template>
+  <Story title="Workflow/AuditTrail">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <AuditTrail
+            :entries="state.entries"
+            :show-filters="state.showFilters"
+            :empty-message="state.emptyMessage"
+            :order="state.order"
+            :size="state.size"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showFilters" title="Show Filters" />
+        <HstText v-model="state.emptyMessage" title="Empty Message" />
+        <HstSelect
+          v-model="state.order"
+          title="Order"
+          :options="[
+            { value: 'newest', label: 'Newest First' },
+            { value: 'oldest', label: 'Oldest First' },
+          ]"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="With Filters">
+      <div style="padding: 2rem; max-width: 600px;">
+        <AuditTrail
+          :entries="mockEntries"
+          show-filters
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Max Height">
+      <div style="padding: 2rem; max-width: 600px;">
+        <AuditTrail
+          :entries="mockEntries"
+          max-height="300px"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Oldest First">
+      <div style="padding: 2rem; max-width: 600px;">
+        <AuditTrail
+          :entries="mockEntries"
+          order="oldest"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty">
+      <div style="padding: 2rem; max-width: 600px;">
+        <AuditTrail
+          :entries="[]"
+          empty-message="No audit events recorded"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/AuditTrail.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+/** Filterable, sortable timeline of audit entries for tracking experiment or resource history. */
+import { computed, ref } from 'vue'
+import type { AuditEntryType, AuditEntry } from '../types'
+
+interface Props {
+  entries: AuditEntry[]
+  maxHeight?: string
+  showFilters?: boolean
+  emptyMessage?: string
+  order?: 'newest' | 'oldest'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showFilters: false,
+  emptyMessage: 'No activity yet',
+  order: 'newest',
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'entry-click': [entry: AuditEntry]
+}>()
+
+const filterType = ref<AuditEntryType | ''>('')
+const filterUser = ref('')
+
+const uniqueTypes = computed(() => {
+  const types = new Set(props.entries.map(e => e.type))
+  return Array.from(types)
+})
+
+const uniqueUsers = computed(() => {
+  const users = new Set(props.entries.filter(e => e.user).map(e => e.user!))
+  return Array.from(users)
+})
+
+const filteredEntries = computed(() => {
+  let result = props.entries
+  if (filterType.value) {
+    result = result.filter(e => e.type === filterType.value)
+  }
+  if (filterUser.value) {
+    result = result.filter(e => e.user === filterUser.value)
+  }
+  return result
+})
+
+const sortedEntries = computed(() => {
+  const entries = [...filteredEntries.value]
+  entries.sort((a, b) => {
+    const timeA = new Date(a.timestamp).getTime()
+    const timeB = new Date(b.timestamp).getTime()
+    return props.order === 'newest' ? timeB - timeA : timeA - timeB
+  })
+  return entries
+})
+
+function getInitials(name: string): string {
+  const words = name.trim().split(/\s+/)
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase()
+  }
+  return (words[0]?.[0] ?? '').toUpperCase()
+}
+
+const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+
+function formatTimestamp(timestamp: Date | string): string {
+  const date = timestamp instanceof Date ? timestamp : new Date(timestamp)
+  const now = Date.now()
+  const diffMs = date.getTime() - now
+  const diffSec = Math.round(diffMs / 1000)
+  const diffMin = Math.round(diffSec / 60)
+  const diffHr = Math.round(diffMin / 60)
+  const diffDay = Math.round(diffHr / 24)
+  const diffWeek = Math.round(diffDay / 7)
+
+  if (Math.abs(diffSec) < 60) return rtf.format(diffSec, 'second')
+  if (Math.abs(diffMin) < 60) return rtf.format(diffMin, 'minute')
+  if (Math.abs(diffHr) < 24) return rtf.format(diffHr, 'hour')
+  if (Math.abs(diffDay) < 7) return rtf.format(diffDay, 'day')
+  if (Math.abs(diffWeek) < 5) return rtf.format(diffWeek, 'week')
+  return date.toLocaleDateString()
+}
+
+function handleEntryClick(entry: AuditEntry) {
+  emit('entry-click', entry)
+}
+</script>
+
+<template>
+  <div :class="['mld-audit-trail', `mld-audit-trail--${size}`]">
+    <div v-if="showFilters" class="mld-audit-trail__filters">
+      <select v-model="filterType" class="mld-audit-trail__filter-select">
+        <option value="">All types</option>
+        <option v-for="t in uniqueTypes" :key="t" :value="t">{{ t }}</option>
+      </select>
+      <select v-model="filterUser" class="mld-audit-trail__filter-select">
+        <option value="">All users</option>
+        <option v-for="u in uniqueUsers" :key="u" :value="u">{{ u }}</option>
+      </select>
+    </div>
+
+    <div
+      v-if="sortedEntries.length"
+      class="mld-audit-trail__list"
+      :style="maxHeight ? { maxHeight, overflowY: 'auto' } : {}"
+    >
+      <div class="mld-audit-trail__line" />
+      <div
+        v-for="entry in sortedEntries"
+        :key="entry.id"
+        :class="['mld-audit-trail__entry', `mld-audit-trail__entry--${entry.type}`]"
+        @click="handleEntryClick(entry)"
+      >
+        <slot name="entry" :entry="entry">
+          <div class="mld-audit-trail__dot" />
+          <div class="mld-audit-trail__content">
+            <div class="mld-audit-trail__header">
+              <div v-if="entry.user" class="mld-audit-trail__avatar">{{ getInitials(entry.user) }}</div>
+              <span v-if="entry.user" class="mld-audit-trail__user">{{ entry.user }}</span>
+              <span class="mld-audit-trail__timestamp">{{ formatTimestamp(entry.timestamp) }}</span>
+            </div>
+            <div class="mld-audit-trail__action">{{ entry.action }}</div>
+            <div v-if="entry.detail" class="mld-audit-trail__detail">{{ entry.detail }}</div>
+            <div v-if="entry.metadata && Object.keys(entry.metadata).length" class="mld-audit-trail__metadata">
+              <span
+                v-for="(value, key) in entry.metadata"
+                :key="String(key)"
+                class="mld-audit-trail__metadata-item"
+              >
+                <span class="mld-audit-trail__metadata-key">{{ key }}:</span>
+                {{ value }}
+              </span>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="!sortedEntries.length" class="mld-audit-trail__empty">
+      <slot name="empty">{{ emptyMessage }}</slot>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/audit-trail.css';
+</style>

package/src/components/AutoGroupModal.story.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AutoGroupModal from './AutoGroupModal.vue'
+import type { AutoGroupResult } from '../types/auto-group'
+
+// Realistic proteomics-style samples with consistent structure
+const proteomicsSamples = [
+  'Ctrl_Liver_D1_Rep1', 'Ctrl_Liver_D1_Rep2', 'Ctrl_Liver_D1_Rep3',
+  'Ctrl_Brain_D1_Rep1', 'Ctrl_Brain_D1_Rep2', 'Ctrl_Brain_D1_Rep3',
+  'Treat_Liver_D3_Rep1', 'Treat_Liver_D3_Rep2', 'Treat_Liver_D3_Rep3',
+  'Treat_Brain_D3_Rep1', 'Treat_Brain_D3_Rep2', 'Treat_Brain_D3_Rep3',
+]
+
+// Samples with outliers (QC pools, blanks)
+const withOutliersSamples = [
+  'Ctrl_Liver_D1_Rep1', 'Ctrl_Liver_D1_Rep2',
+  'Treat_Liver_D3_Rep1', 'Treat_Liver_D3_Rep2',
+  'QC_Pool', 'Blank', 'ISTD_Mix',
+  'Ctrl_Brain_D1_Rep1', 'Ctrl_Brain_D1_Rep2',
+]
+
+// Real-world mixed dataset: 11-field experimental + 6-field QC + 4-field test
+// This exercises the dominantFieldCount outlier fix
+const mixedFieldCountSamples = [
+  // Experimental (11 fields each)
+  'LT_13102025_212_WT_Glu_3_20_S_091123_T1_33',
+  'LT_13102025_213_WT_Glu_3_20_S_091123_T1_34',
+  'LT_13102025_214_KI_Glu_3_20_S_091123_T1_35',
+  'LT_13102025_215_KI_Glu_6_40_L_091123_T1_36',
+  'LT_13102025_216_WT_Glu_6_40_L_091123_T1_37',
+  'LT_13102025_217_WT_Glu_6_40_L_091123_T2_38',
+  'LT_13102025_218_KI_Glu_3_20_S_091123_T2_39',
+  'LT_13102025_219_KI_Glu_6_40_L_091123_T2_40',
+  'LT_13102025_220_WT_Glu_3_20_S_091123_T2_41',
+  'LT_13102025_221_WT_Glu_6_40_L_091123_T2_42',
+  // QC samples (6 fields)
+  'LT_13102025_EQC_Jurkat_1_2',
+  'LT_13102025_EQC_Jurkat_2_8',
+  'LT_13102025_IQC_Pool_1_5',
+  // Test samples (4 fields)
+  'test_EQC_Jurkat_02',
+  'test_Blank_Run_01',
+]
+
+// Mock design_data matching MS Designer's SampleData schema
+const mockDesignData = {
+  schema_version: '2.0',
+  cell_line: 'HeLa',
+  samples: [
+    { plate_id: 'Plate 1', well_id: 'A1', sample_name: 'HeLa_DrugA_24h_Rep1', sample_type: 'sample', conditions: { 'Cell Line': 'HeLa', Treatment: 'Drug A', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'A2', sample_name: 'HeLa_DrugA_24h_Rep2', sample_type: 'sample', conditions: { 'Cell Line': 'HeLa', Treatment: 'Drug A', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'A3', sample_name: 'HeLa_DrugA_24h_Rep3', sample_type: 'sample', conditions: { 'Cell Line': 'HeLa', Treatment: 'Drug A', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'B1', sample_name: 'HeLa_Ctrl_24h_Rep1', sample_type: 'sample', conditions: { 'Cell Line': 'HeLa', Treatment: 'Control', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'B2', sample_name: 'HeLa_Ctrl_24h_Rep2', sample_type: 'sample', conditions: { 'Cell Line': 'HeLa', Treatment: 'Control', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'B3', sample_name: 'HeLa_Ctrl_24h_Rep3', sample_type: 'sample', conditions: { 'Cell Line': 'HeLa', Treatment: 'Control', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'C1', sample_name: 'MCF7_DrugA_24h_Rep1', sample_type: 'sample', conditions: { 'Cell Line': 'MCF7', Treatment: 'Drug A', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'C2', sample_name: 'MCF7_DrugA_24h_Rep2', sample_type: 'sample', conditions: { 'Cell Line': 'MCF7', Treatment: 'Drug A', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'C3', sample_name: 'MCF7_DrugA_24h_Rep3', sample_type: 'sample', conditions: { 'Cell Line': 'MCF7', Treatment: 'Drug A', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'D1', sample_name: 'MCF7_Ctrl_24h_Rep1', sample_type: 'sample', conditions: { 'Cell Line': 'MCF7', Treatment: 'Control', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'D2', sample_name: 'MCF7_Ctrl_24h_Rep2', sample_type: 'sample', conditions: { 'Cell Line': 'MCF7', Treatment: 'Control', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'D3', sample_name: 'MCF7_Ctrl_24h_Rep3', sample_type: 'sample', conditions: { 'Cell Line': 'MCF7', Treatment: 'Control', Timepoint: '24h' } },
+    { plate_id: 'Plate 1', well_id: 'E1', sample_name: 'EQC_Pool_1', sample_type: 'qc', conditions: {} },
+    { plate_id: 'Plate 1', well_id: 'E2', sample_name: 'EQC_Pool_2', sample_type: 'qc', conditions: {} },
+    { plate_id: 'Plate 1', well_id: 'F1', sample_name: 'Blank_1', sample_type: 'blank', conditions: {} },
+  ],
+  plates: [{ name: 'Plate 1', layout_type: '96-well' }],
+  extraction_results: [],
+}
+
+// Hyphen-delimited samples
+const hyphenSamples = [
+  'WT-Vehicle-1', 'WT-Vehicle-2', 'WT-Vehicle-3',
+  'WT-Drug-1', 'WT-Drug-2', 'WT-Drug-3',
+  'KO-Vehicle-1', 'KO-Vehicle-2', 'KO-Vehicle-3',
+  'KO-Drug-1', 'KO-Drug-2', 'KO-Drug-3',
+]
+
+const isOpen = ref(false)
+const lastResult = ref<AutoGroupResult | null>(null)
+
+function handleApply(result: AutoGroupResult) {
+  lastResult.value = result
+  console.log('AutoGroupModal result:', result)
+}
+
+function initState(samples: string[] = proteomicsSamples) {
+  return {
+    isOpen: true,
+    samples,
+    lastResult: null as AutoGroupResult | null,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/AutoGroupModal">
+    <Variant title="Playground" :init-state="() => ({ isOpen: false, samples: proteomicsSamples, lastResult: null as AutoGroupResult | null })">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            type="button"
+            style="
+              padding: 0.5rem 1rem;
+              background: var(--bg-card, #fff);
+              border: 1px solid var(--border-color, #e5e7eb);
+              border-radius: 0.375rem;
+              cursor: pointer;
+              font-size: 0.875rem;
+            "
+            @click="state.isOpen = true"
+          >
+            Open Auto Group Modal
+          </button>
+
+          <div v-if="state.lastResult" style="margin-top: 1rem; font-size: 0.8125rem; color: var(--text-secondary, #64748b);">
+            <strong>Last result:</strong>
+            {{ state.lastResult.groups.length }} groups,
+            {{ state.lastResult.metadata.length }} samples,
+            {{ state.lastResult.excludedSamples.length }} excluded
+          </div>
+
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :samples="state.samples"
+            @apply="(r: AutoGroupResult) => { state.lastResult = r; console.log('Result:', r) }"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          :model-value="state.samples === proteomicsSamples ? 'proteomics' : state.samples === withOutliersSamples ? 'outliers' : state.samples === mixedFieldCountSamples ? 'mixed' : 'hyphen'"
+          title="Sample Set"
+          :options="[
+            { value: 'proteomics', label: 'Proteomics (clean)' },
+            { value: 'outliers', label: 'With QC/Blanks' },
+            { value: 'mixed', label: 'Mixed Field Counts (11 + 6 + 4)' },
+            { value: 'hyphen', label: 'Hyphen-delimited' },
+          ]"
+          @update:model-value="(v: string) => {
+            if (v === 'proteomics') state.samples = proteomicsSamples
+            else if (v === 'outliers') state.samples = withOutliersSamples
+            else if (v === 'mixed') state.samples = mixedFieldCountSamples
+            else state.samples = hyphenSamples
+          }"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Pre-filled (Proteomics)" :init-state="() => initState(proteomicsSamples)">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem;"
+            @click="state.isOpen = true"
+          >
+            Re-open Modal
+          </button>
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :samples="state.samples"
+            @apply="handleApply"
+          />
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="With Outliers (QC/Blanks)" :init-state="() => initState(withOutliersSamples)">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem;"
+            @click="state.isOpen = true"
+          >
+            Re-open Modal
+          </button>
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :samples="state.samples"
+            @apply="handleApply"
+          />
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="Mixed Field Counts (Smart Outlier Detection)" :init-state="() => initState(mixedFieldCountSamples)">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem;"
+            @click="state.isOpen = true"
+          >
+            Re-open Modal
+          </button>
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :samples="state.samples"
+            @apply="handleApply"
+          />
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="Hyphen-Delimited" :init-state="() => initState(hyphenSamples)">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem;"
+            @click="state.isOpen = true"
+          >
+            Re-open Modal
+          </button>
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :samples="state.samples"
+            @apply="handleApply"
+          />
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="From Experiment Metadata" :init-state="() => ({ isOpen: true, lastResult: null as AutoGroupResult | null })">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem;"
+            @click="state.isOpen = true"
+          >
+            Re-open Modal
+          </button>
+          <div v-if="state.lastResult" style="margin-top: 1rem; font-size: 0.8125rem; color: var(--text-secondary, #64748b);">
+            <strong>Last result:</strong>
+            {{ state.lastResult.groups.length }} groups,
+            {{ state.lastResult.metadata.length }} samples,
+            {{ state.lastResult.excludedSamples.length }} excluded
+          </div>
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :design-data="mockDesignData"
+            @apply="(r: AutoGroupResult) => { state.lastResult = r }"
+          />
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="Empty (Manual Paste)">
+      <div style="padding: 2rem;">
+        <button
+          type="button"
+          style="
+            padding: 0.5rem 1rem;
+            background: var(--bg-card, #fff);
+            border: 1px solid var(--border-color, #e5e7eb);
+            border-radius: 0.375rem;
+            cursor: pointer;
+            font-size: 0.875rem;
+          "
+          @click="isOpen = true"
+        >
+          Open Empty Modal (paste your own samples)
+        </button>
+        <AutoGroupModal
+          v-model="isOpen"
+          @apply="handleApply"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>