@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/components/AutoGroupModal.story.vue

@@ -0,0 +1,458 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AutoGroupModal from './AutoGroupModal.vue'
+import type { AutoGroupResult } from '../types/auto-group'
+import type { SampleGroup } from '../types'
+import mixedLcMsRaw from '../__tests__/fixtures/auto-group/mixed-lc-ms-batch.txt?raw'
+
+const mixedLcMsSamples = mixedLcMsRaw.trim().split('\n')
+
+const simpleHomogeneous = [
+  'sample_treated_rep1',
+  'sample_treated_rep2',
+  'sample_ctrl_rep1',
+  'sample_ctrl_rep2',
+]
+
+const numericBinning = [
+  'exp_drugA_0dot1uM_rep1',
+  'exp_drugA_1uM_rep1',
+  'exp_drugA_10uM_rep1',
+  'exp_drugA_100uM_rep1',
+]
+
+// 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: [],
+}
+
+function wellId(index: number): string {
+  const row = String.fromCharCode(65 + Math.floor(index / 12))
+  return `${row}${(index % 12) + 1}`
+}
+
+const complexBiologicalConditions = ['Liver', 'Kidney'].flatMap(tissue =>
+  ['WT', 'KO'].flatMap(genotype =>
+    [
+      { treatment: 'Vehicle', dose: '0 uM' },
+      { treatment: 'Drug A', dose: '10 uM' },
+      { treatment: 'Drug A', dose: '50 uM' },
+    ].flatMap(arm =>
+      ['6 h', '24 h'].flatMap(timepoint =>
+        [1, 2].map(replicate => ({ tissue, genotype, ...arm, timepoint, replicate })),
+      ),
+    ),
+  ),
+)
+
+const complexBiologicalSamples = complexBiologicalConditions.map((condition, index) => {
+  const subject = `M${String(index + 1).padStart(3, '0')}`
+  const conditionIndex = Math.floor(index / 2)
+  const batch = `Batch ${String((conditionIndex % 3) + 1).padStart(2, '0')}`
+  const polarity = conditionIndex % 2 === 0 ? 'POS' : 'NEG'
+  const sampleName = [
+    condition.tissue,
+    condition.genotype,
+    condition.treatment.replaceAll(' ', ''),
+    condition.dose.replaceAll(' ', ''),
+    condition.timepoint.replaceAll(' ', ''),
+    subject,
+    `R${condition.replicate}`,
+    polarity,
+  ].join('_')
+
+  return {
+    plate_id: 'Plate 1',
+    well_id: wellId(index),
+    sample_name: sampleName,
+    sample_type: 'sample',
+    conditions: {
+      Tissue: condition.tissue,
+      Genotype: condition.genotype,
+      Treatment: condition.treatment,
+      Dose: condition.dose,
+      Timepoint: condition.timepoint,
+      Sex: conditionIndex % 2 === 0 ? 'Female' : 'Male',
+      Cohort: index < 24 ? 'Discovery' : 'Validation',
+      Batch: batch,
+      Polarity: polarity,
+    },
+  }
+})
+
+const complexDesignData = {
+  schema_version: '2.0',
+  study_name: 'Drug A multi-factor tissue response',
+  organism: 'Mus musculus',
+  platform: 'LC-MS',
+  samples: complexBiologicalSamples,
+  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 manualSamples = [
+  'Pt001_TumorA_d7_rep1',
+  'Pt001_TumorA_d7_rep1_reseq2024',
+  'Pt001_TumorA_d14_rep1',
+  'Pt002_TumorB_d7_rep1',
+  'Pt002_tumorb_d7_rep2',
+  'Pt002_TumorB_d14_rep1',
+  'Pt003_NoID_d7_rep1',
+  'Pt003_TumorC_d14_rep1_redo',
+  'Ctrl_pooled_old_naming',
+  'control_2_(redo)',
+  'Pt004_TumorA_d7_2024batch2',
+  'Pt004_TumorA_d14',
+  'QC_pool_01',
+  'blank_run3',
+]
+
+const manualGroups: SampleGroup[] = [
+  { name: 'Responder/Day 7', color: '#0EA5A4', samples: ['Pt001_TumorA_d7_rep1'] },
+  { name: 'Responder/Day 14', color: '#0EA5A4', samples: ['Pt001_TumorA_d14_rep1'] },
+  { name: 'Non-responder/Day 7', color: '#F43F5E', samples: ['Pt002_TumorB_d7_rep1'] },
+]
+
+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="Manual Workflow" :init-state="() => ({ isOpen: true })">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            v-if="!state.isOpen"
+            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="manualSamples"
+            :groups="manualGroups"
+            initial-mode="manual"
+            @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="Complex 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="complexDesignData"
+            @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>
+
+    <Variant title="Simple homogeneous batch" :init-state="() => ({ isOpen: true })">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button v-if="!state.isOpen" 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="simpleHomogeneous" />
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="Mixed LC-MS batch (user fixture)" :init-state="() => ({ isOpen: true })">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button v-if="!state.isOpen" 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="mixedLcMsSamples" />
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="Numeric binning (dose curve)" :init-state="() => ({ isOpen: true })">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button v-if="!state.isOpen" 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="numericBinning" />
+        </div>
+      </template>
+    </Variant>
+  </Story>
+</template>