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

package/src/components/AppSidebar.story.vue

@@ -1,584 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-import AppSidebar from './AppSidebar.vue'
-import BaseSlider from './BaseSlider.vue'
-import BaseSelect from './BaseSelect.vue'
-import BaseToggle from './BaseToggle.vue'
-import BaseCheckbox from './BaseCheckbox.vue'
-import BaseButton from './BaseButton.vue'
-import BaseInput from './BaseInput.vue'
-import NumberInput from './NumberInput.vue'
-import FileUploader from './FileUploader.vue'
-import FormField from './FormField.vue'
-import WellPlate from './WellPlate.vue'
-import { defineControlModel, defineControls, getControlDefaults } from '../composables/useControlSchema'
-import { useBioTemplateWorkspace } from '../composables/useBioTemplateWorkspace'
-import { createWellPlateScreenCollection } from '../templates'
-import type { SidebarToolSection } from '../types'
-
-type SidebarVariant = 'analysis' | 'default'
-
-/* --- Icon paths (Lucide-style) --- */
-const icons = {
-  upload: ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'M17 8l-5-5-5 5', 'M12 3v12'],
-  fileText: ['M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', 'M14 2v6h6', 'M16 13H8', 'M16 17H8', 'M10 9H8'],
-  shuffle: ['M16 3h5v5', 'M4 20L21 3', 'M21 16v5h-5', 'M15 15l6 6', 'M4 4l5 5'],
-  zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8',
-  route: ['M18 6l-6 6-4-4-6 6'],
-  settings: ['M12 2L2 7l10 5 10-5-10-5z', 'M2 17l10 5 10-5', 'M2 12l10 5 10-5'],
-  reset: ['M16.023 9.348h4.992v-.001', 'M2.985 19.644v-4.992', 'M4.031 9.865a8.25 8.25 0 0113.803-3.7'],
-  eye: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'],
-  chart: ['M3 3v18h18', 'M7 15l3-3 3 2 4-6'],
-  database: ['M12 3c4.418 0 8 1.343 8 3s-3.582 3-8 3-8-1.343-8-3 3.582-3 8-3z', 'M4 6v6c0 1.657 3.582 3 8 3s8-1.343 8-3V6', 'M4 12v6c0 1.657 3.582 3 8 3s8-1.343 8-3v-6'],
-}
-
-/* --- Sequence builder panels --- */
-const sequencePanels: Record<string, SidebarToolSection[]> = {
-  sequence: [
-    {
-      id: 'import',
-      label: 'Import Layout',
-      subtitle: 'Upload from Excel',
-      icon: icons.upload,
-      iconColor: '#3b82f6',
-      iconBg: '#dbeafe',
-    },
-    {
-      id: 'naming',
-      label: 'Experiment & Naming',
-      subtitle: 'exp001_260210_XP_M...',
-      icon: icons.fileText,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
-      showToggle: true,
-      badge: 'on',
-      badgeTone: 'success',
-    },
-    {
-      id: 'randomize',
-      label: 'Randomize Samples',
-      subtitle: 'Sequential order',
-      icon: icons.shuffle,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
-      showToggle: true,
-      badge: 3,
-      badgeTone: 'cta',
-      actions: [
-        { id: 'reset-randomize', label: 'Reset randomization', icon: icons.reset, tone: 'neutral' },
-      ],
-      defaultOpen: false,
-    },
-    {
-      id: 'acquisition',
-      label: 'Acquisition',
-      subtitle: 'NEG, VIAL',
-      icon: icons.zap,
-      iconColor: '#ef4444',
-      iconBg: '#fee2e2',
-    },
-    {
-      id: 'method',
-      label: 'Method & Path',
-      subtitle: 'Select method',
-      icon: icons.route,
-      iconColor: '#8b5cf6',
-      iconBg: '#ede9fe',
-      defaultOpen: false,
-    },
-  ],
-}
-
-/* --- Simple panels for basic demo --- */
-const simplePanels: Record<string, SidebarToolSection[]> = {
-  analysis: [
-    {
-      id: 'parameters',
-      label: 'Parameters',
-      subtitle: 'Analysis settings',
-      icon: ['M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z', 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'],
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
-    },
-    {
-      id: 'filters',
-      label: 'Filters',
-      subtitle: 'Refine results',
-      icon: ['M22 3H2l8 9.46V19l4 2v-8.54L22 3'],
-      iconColor: '#0ea5e9',
-      iconBg: '#e0f2fe',
-      defaultOpen: false,
-    },
-  ],
-  results: [
-    {
-      id: 'display',
-      label: 'Display Options',
-      subtitle: 'Chart and table settings',
-      icon: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'],
-      iconColor: '#8b5cf6',
-      iconBg: '#ede9fe',
-    },
-    {
-      id: 'export',
-      label: 'Export',
-      subtitle: 'Download data',
-      icon: ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'M7 10l5 5 5-5', 'M12 15V3'],
-      iconColor: '#10b981',
-      iconBg: '#d1fae5',
-      defaultOpen: false,
-    },
-  ],
-}
-
-const threshold = ref(50)
-const method = ref('linear')
-const methods = [
-  { value: 'linear', label: 'Linear' },
-  { value: 'quadratic', label: 'Quadratic' },
-  { value: 'logistic', label: 'Logistic' },
-]
-const showOutliers = ref(true)
-const logScale = ref(false)
-const includeMetadata = ref(true)
-const polarity = ref('negative')
-const container = ref('vial')
-const expNumber = ref(1)
-const initials = ref('XP')
-const sequencePrefix = ref('exp001_260210_XP')
-const runMode = ref('balanced')
-const runModeOptions = [
-  { value: 'fast', label: 'Fast' },
-  { value: 'balanced', label: 'Balanced' },
-  { value: 'qc', label: 'QC focused' },
-]
-const toggleState = reactive<Record<string, boolean>>({ naming: true, randomize: false })
-const schemaControls = defineControls({
-  threshold: {
-    type: 'slider',
-    label: 'Threshold',
-    default: 0.05,
-    min: 0,
-    max: 1,
-    props: { step: 0.01 },
-    section: 'parameters',
-    sectionLabel: 'Parameters',
-    sectionSubtitle: 'Analysis controls',
-    view: 'analysis',
-    sidebar: {
-      icon: icons.settings,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
-    },
-  },
-  method: {
-    label: 'Model',
-    default: 'linear',
-    options: ['linear', 'logistic', 'quadratic'],
-    required: true,
-    section: 'parameters',
-    view: 'analysis',
-  },
-  showOutliers: {
-    label: 'Show outliers',
-    default: true,
-    hint: 'Keep flagged points visible',
-    icon: icons.eye,
-    iconColor: '#0ea5e9',
-    iconBg: '#e0f2fe',
-    section: 'display',
-    sectionLabel: 'Display',
-    sectionSubtitle: 'Result filters',
-    view: 'analysis',
-    sidebar: {
-      icon: icons.zap,
-      iconColor: '#0ea5e9',
-      iconBg: '#e0f2fe',
-      defaultOpen: false,
-    },
-  },
-})
-const controlValues = ref<Record<string, unknown>>({ ...getControlDefaults(schemaControls) })
-const modelDrivenSidebarModel = defineControlModel({
-  views: {
-    analysis: {
-      label: 'Analysis',
-      sections: {
-        parameters: {
-          label: 'Parameters',
-          description: 'Thresholds and scoring',
-          icon: icons.settings,
-          controls: {
-            threshold: { type: 'number', default: 0.05, min: 0, max: 1 },
-            method: ['linear', 'logistic', 'spline'],
-          },
-        },
-        filters: {
-          label: 'Filters',
-          description: 'Result cleanup',
-          sidebar: {
-            icon: icons.zap,
-            iconColor: '#0ea5e9',
-            iconBg: '#e0f2fe',
-            defaultOpen: false,
-          },
-          controls: {
-            showOutliers: {
-              label: 'Show outliers',
-              default: true,
-              hint: 'Keep flagged points visible',
-              icon: icons.eye,
-              iconColor: '#0ea5e9',
-              iconBg: '#e0f2fe',
-            },
-            minPeakArea: { type: 'number', default: 1000, min: 0 },
-          },
-        },
-      },
-    },
-  },
-})
-const modelDrivenValues = ref<Record<string, unknown>>({})
-const templateCollection = createWellPlateScreenCollection({
-  samples: ['Control', 'Treatment'],
-  compounds: { 'Drug A': [10, 1, 0.1] },
-})
-const templateWorkspace = useBioTemplateWorkspace(templateCollection)
-const templateValues = ref<Record<string, unknown>>({ ...templateWorkspace.controls.initialValues })
-const templateWellPlateProps = templateWorkspace.componentProps
-  .find(binding => binding.component === 'WellPlate')
-  ?.propsObject ?? {}
-
-function handleToggle(id: string, value: boolean) {
-  toggleState[id] = value
-}
-
-function initSimpleToolkit() {
-  return {
-    activeView: 'analysis',
-    variant: 'analysis' as SidebarVariant,
-    floating: false,
-    width: '20rem',
-    side: 'left' as const,
-  }
-}
-</script>
-
-<template>
-  <Story title="Layout/AppSidebar">
-    <Variant title="Sequence Builder">
-      <div style="padding: 2rem; height: 700px; position: relative; background: var(--bg-primary, #f1f5f9);">
-        <AppSidebar
-          :panels="sequencePanels"
-          active-view="sequence"
-          :toggle-state="toggleState"
-          width="300px"
-          @update:toggle="handleToggle"
-        >
-          <template #section-import>
-            <FileUploader accept=".xlsx,.xls" placeholder="Drop Excel or click" />
-            <div style="display: flex; gap: 0.5rem;">
-              <BaseButton size="sm" variant="secondary" style="flex: 1;">96-Well</BaseButton>
-              <BaseButton size="sm" variant="secondary" style="flex: 1;">54-Vial</BaseButton>
-            </div>
-          </template>
-          <template #section-naming>
-            <div style="display: flex; justify-content: space-between; align-items: center;">
-              <span style="font-size: 0.75rem; font-weight: 600; color: var(--text-secondary, #4b5563);">File Prefix</span>
-              <span style="font-size: 0.75rem; color: var(--text-muted, #9ca3af);">Custom</span>
-            </div>
-            <div style="display: flex; gap: 0.5rem;">
-              <FormField label="Exp #" style="flex: 1;">
-                <NumberInput v-model="expNumber" :min="1" />
-              </FormField>
-              <FormField label="Initials" style="flex: 0 0 4rem;">
-                <BaseInput v-model="initials" />
-              </FormField>
-            </div>
-            <FormField label="Folder Name">
-              <span style="font-size: 0.8125rem; color: var(--text-secondary, #4b5563);">Metabolites</span>
-            </FormField>
-            <BaseInput model-value="exp001_260210_XP_Metabolites" readonly />
-            <p style="font-size: 0.6875rem; color: var(--text-muted, #9ca3af); margin: 0;">
-              Toggle to save experiment to database for tracking and analysis.
-            </p>
-          </template>
-          <template #section-randomize>
-            <BaseSelect
-              model-value="sequential"
-              :options="[
-                { value: 'sequential', label: 'Sequential' },
-                { value: 'random', label: 'Random' },
-                { value: 'block', label: 'Block randomize' },
-              ]"
-              label="Order"
-            />
-          </template>
-          <template #section-acquisition>
-            <div style="display: flex; gap: 0.5rem;">
-              <FormField label="Polarity" style="flex: 1;">
-                <BaseSelect v-model="polarity" :options="[{ value: 'negative', label: 'Negative' }, { value: 'positive', label: 'Positive' }]" />
-              </FormField>
-              <FormField label="Container" style="flex: 1;">
-                <BaseSelect v-model="container" :options="[{ value: 'vial', label: 'Vial' }, { value: 'plate', label: 'Plate' }]" />
-              </FormField>
-            </div>
-          </template>
-          <template #section-method>
-            <BaseToggle
-              model-value
-              variant="row"
-              label="Use custom method paths"
-              description="Override the default acquisition directory"
-              :icon="icons.route"
-              icon-color="#8b5cf6"
-              icon-bg="#ede9fe"
-            />
-            <BaseSelect
-              model-value=""
-              placeholder="-- Select Method --"
-              :options="[]"
-              label="Method"
-            />
-          </template>
-          <template #footer>
-            <BaseButton variant="cta" style="width: 100%;">Generate Sequence</BaseButton>
-          </template>
-        </AppSidebar>
-      </div>
-    </Variant>
-
-    <Variant title="Schema Driven Controls">
-      <div style="padding: 2rem; height: 520px; position: relative; background: var(--bg-primary, #f1f5f9);">
-        <AppSidebar
-          variant="analysis"
-          title="Peak Picking"
-          subtitle="Current experiment"
-          :controls="schemaControls"
-          active-view="analysis"
-          v-model="controlValues"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Model Driven Analysis">
-      <div style="padding: 2rem; height: 560px; position: relative; background: var(--bg-primary, #f1f5f9);">
-        <AppSidebar
-          v-model="modelDrivenValues"
-          variant="analysis"
-          title="Peak Picking"
-          subtitle="Current experiment"
-          :model="modelDrivenSidebarModel"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Route Owned Shell">
-      <div style="padding: 2rem; height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
-        <AppSidebar
-          variant="analysis"
-          title="Sequence"
-          subtitle="Acquisition run"
-          content-id="seqgen-sidebar"
-          show-when-empty
-        >
-          <div style="display: flex; flex-direction: column; gap: 0.75rem;">
-            <FormField label="File Prefix">
-              <BaseInput v-model="sequencePrefix" size="sm" />
-            </FormField>
-            <FormField label="Run Mode">
-              <BaseSelect v-model="runMode" :options="runModeOptions" size="sm" />
-            </FormField>
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;">
-              <BaseButton size="sm" variant="secondary">NEG</BaseButton>
-              <BaseButton size="sm" variant="secondary">VIAL</BaseButton>
-            </div>
-          </div>
-
-          <template #footer>
-            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-              <BaseButton variant="cta" style="width: 100%;">Generate Sequence</BaseButton>
-              <BaseButton variant="ghost" size="sm" style="width: 100%;">Clear Draft</BaseButton>
-            </div>
-          </template>
-        </AppSidebar>
-
-        <div style="flex: 1; min-width: 0; border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.5rem; background: var(--bg-card, #fff); padding: 1rem;">
-          <div style="display: flex; justify-content: space-between; gap: 1rem; align-items: center;">
-            <div>
-              <div style="font-size: 0.875rem; font-weight: 650; color: var(--text-primary, #111827);">MS queue</div>
-              <div style="font-size: 0.75rem; color: var(--text-muted, #6b7280);">{{ sequencePrefix }} · {{ runMode }}</div>
-            </div>
-            <BaseButton size="sm" variant="secondary">Preview CSV</BaseButton>
-          </div>
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Template Driven Controls">
-      <div style="padding: 2rem; min-height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
-        <AppSidebar
-          v-bind="templateWorkspace.sidebar"
-          active-view="design"
-          v-model="templateValues"
-          width="300px"
-        />
-
-        <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem;">
-          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-            <span
-              v-for="binding in templateWorkspace.componentBindings"
-              :key="binding.id"
-              style="font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-secondary, #4b5563);"
-            >
-              {{ binding.component }}
-            </span>
-          </div>
-          <WellPlate
-            v-bind="templateWellPlateProps"
-            size="fill"
-            readonly
-          />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Simple Toolkit" :init-state="initSimpleToolkit">
-      <template #default="{ state }">
-        <div style="padding: 2rem; height: 500px; position: relative; background: var(--bg-primary, #f1f5f9);">
-          <div style="margin-bottom: 1rem; display: flex; gap: 0.5rem;">
-            <button
-              v-for="v in ['analysis', 'results', 'settings']"
-              :key="v"
-              :style="{
-                padding: '0.375rem 0.75rem',
-                borderRadius: '0.25rem',
-                border: '1px solid var(--border-color, #e5e7eb)',
-                background: state.activeView === v ? 'var(--color-primary, #3b82f6)' : 'var(--bg-card, #fff)',
-                color: state.activeView === v ? '#fff' : 'var(--text-primary, #111827)',
-                cursor: 'pointer',
-                fontSize: '0.875rem',
-              }"
-              @click="state.activeView = v"
-            >
-              {{ v }}
-            </button>
-          </div>
-          <AppSidebar
-            :panels="simplePanels"
-            :variant="state.variant"
-            :active-view="state.activeView"
-            :floating="state.floating"
-            :width="state.width"
-            :side="state.side"
-          >
-            <template #section-parameters>
-              <BaseSlider v-model="threshold" label="Threshold" :min="0" :max="100" />
-              <BaseSelect v-model="method" label="Method" :options="methods" />
-            </template>
-            <template #section-filters>
-              <BaseToggle
-                v-model="showOutliers"
-                variant="row"
-                label="Exclude outliers"
-                description="Hide flagged injections from summaries"
-                :icon="icons.eye"
-                icon-color="#0ea5e9"
-                icon-bg="#e0f2fe"
-              />
-            </template>
-            <template #section-display>
-              <BaseToggle
-                v-model="showOutliers"
-                variant="row"
-                label="Show outliers"
-                description="Keep flagged peaks visible"
-                :icon="icons.eye"
-                icon-color="#0ea5e9"
-                icon-bg="#e0f2fe"
-              />
-              <BaseToggle
-                v-model="logScale"
-                variant="row"
-                label="Log scale"
-                description="Compress high-intensity spread"
-                :icon="icons.chart"
-                icon-color="#8b5cf6"
-                icon-bg="#ede9fe"
-              />
-            </template>
-            <template #section-export>
-              <BaseCheckbox
-                v-model="includeMetadata"
-                variant="row"
-                label="Include metadata"
-                description="Add method and sample context"
-                :icon="icons.database"
-                icon-color="#10b981"
-                icon-bg="#d1fae5"
-              />
-              <BaseButton size="sm" variant="secondary">Export CSV</BaseButton>
-              <BaseButton size="sm" variant="secondary">Export PNG</BaseButton>
-            </template>
-          </AppSidebar>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.activeView"
-          title="Active View"
-          :options="['analysis', 'results', 'settings'].map(v => ({ label: v, value: v }))"
-        />
-        <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="[
-            { label: 'Analysis', value: 'analysis' },
-            { label: 'Default', value: 'default' },
-          ]"
-        />
-        <HstCheckbox v-model="state.floating" title="Floating" />
-        <HstText v-model="state.width" title="Width" />
-        <HstSelect
-          v-model="state.side"
-          title="Side"
-          :options="[{ label: 'left', value: 'left' }, { label: 'right', value: 'right' }]"
-        />
-      </template>
-    </Variant>
-
-    <Variant title="With Header and Footer">
-      <div style="padding: 2rem; height: 500px; position: relative; background: var(--bg-primary, #f1f5f9);">
-        <AppSidebar
-          :panels="simplePanels"
-          active-view="analysis"
-        >
-          <template #header>
-            <span style="font-weight: 600; font-size: 0.875rem; color: var(--text-primary, #111827);">
-              Analysis Tools
-            </span>
-          </template>
-          <template #section-parameters>
-            <BaseSlider v-model="threshold" label="Threshold" :min="0" :max="100" />
-            <BaseSelect v-model="method" label="Method" :options="methods" />
-          </template>
-          <template #section-filters>
-            <BaseToggle
-              v-model="showOutliers"
-              variant="row"
-              label="Exclude outliers"
-              description="Hide flagged injections from summaries"
-              :icon="icons.eye"
-              icon-color="#0ea5e9"
-              icon-bg="#e0f2fe"
-            />
-          </template>
-          <template #footer>
-            <BaseButton size="sm" variant="ghost" style="width: 100%;">Reset Defaults</BaseButton>
-          </template>
-        </AppSidebar>
-      </div>
-    </Variant>
-  </Story>
-</template>