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

package/src/components/AutoGroupModal.story.vue

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