@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/ExperimentSelectorModal.story.vue

@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import { ref, nextTick, onMounted } from 'vue'
+import ExperimentSelectorModal from './ExperimentSelectorModal.vue'
+import ExperimentCodeBadge from './ExperimentCodeBadge.vue'
+import type { ExperimentSummary, ExperimentStatus, ExperimentSortField } from '../types'
+
+// -- Mock data: realistic cell biology experiments --
+const mockExperiments: ExperimentSummary[] = [
+  {
+    id: 1,
+    experiment_code: 'DR-HeLa-DOX-001',
+    name: 'Doxorubicin dose-response in HeLa cells',
+    status: 'completed',
+    experiment_type: 'dose_response',
+    project: 'Oncology Screen Q1',
+    project_name: 'Oncology Screen Q1',
+    created_at: '2026-02-28T14:30:00Z',
+    updated_at: '2026-03-01T09:15:00Z',
+    has_design_data: true,
+  },
+  {
+    id: 2,
+    experiment_code: 'CV-MCF7-24H-002',
+    name: 'MCF-7 cell viability 24h time course',
+    status: 'completed',
+    experiment_type: 'cell_viability',
+    project: 'Oncology Screen Q1',
+    project_name: 'Oncology Screen Q1',
+    created_at: '2026-02-25T10:00:00Z',
+    updated_at: '2026-02-26T16:45:00Z',
+    has_design_data: true,
+  },
+  {
+    id: 3,
+    experiment_code: 'DR-PANC1-GEM-003',
+    name: 'Gemcitabine IC50 in PANC-1',
+    status: 'ongoing',
+    experiment_type: 'dose_response',
+    project: 'Pancreatic Cancer',
+    project_name: 'Pancreatic Cancer',
+    created_at: '2026-03-01T08:00:00Z',
+    updated_at: '2026-03-02T11:30:00Z',
+    has_design_data: true,
+  },
+  {
+    id: 4,
+    experiment_code: 'CV-A549-CIS-004',
+    name: 'Cisplatin cytotoxicity A549 lung',
+    status: 'ongoing',
+    experiment_type: 'cell_viability',
+    project: 'Lung Cancer Panel',
+    project_name: 'Lung Cancer Panel',
+    created_at: '2026-03-01T13:00:00Z',
+    updated_at: '2026-03-02T08:00:00Z',
+    has_design_data: false,
+  },
+  {
+    id: 5,
+    experiment_code: 'DR-HEK293-CTRL-005',
+    name: 'HEK-293T control viability baseline',
+    status: 'completed',
+    experiment_type: 'dose_response',
+    project: 'Toxicity Controls',
+    project_name: 'Toxicity Controls',
+    created_at: '2026-02-20T09:00:00Z',
+    updated_at: '2026-02-22T17:00:00Z',
+    has_design_data: true,
+  },
+  {
+    id: 6,
+    experiment_code: 'SYN-HeLa-COMBO-006',
+    name: 'DOX + 5-FU synergy screen in HeLa',
+    status: 'planned',
+    experiment_type: 'synergy',
+    project: 'Oncology Screen Q1',
+    project_name: 'Oncology Screen Q1',
+    created_at: '2026-03-02T07:00:00Z',
+    updated_at: '2026-03-02T07:00:00Z',
+    has_design_data: false,
+  },
+  {
+    id: 7,
+    experiment_code: 'CV-SW480-OXA-007',
+    name: 'Oxaliplatin response SW480 colorectal',
+    status: 'planned',
+    experiment_type: 'cell_viability',
+    project: 'Colorectal Panel',
+    project_name: 'Colorectal Panel',
+    created_at: '2026-03-02T10:00:00Z',
+    updated_at: '2026-03-02T10:00:00Z',
+    has_design_data: false,
+  },
+  {
+    id: 8,
+    experiment_code: 'DR-U2OS-ETO-008',
+    name: 'Etoposide dose-response U-2 OS',
+    status: 'completed',
+    experiment_type: 'dose_response',
+    project: 'Bone Cancer',
+    project_name: 'Bone Cancer',
+    created_at: '2026-02-15T11:00:00Z',
+    updated_at: '2026-02-18T15:30:00Z',
+    has_design_data: true,
+  },
+  {
+    id: 9,
+    experiment_code: 'CV-JURKAT-VIN-009',
+    name: 'Vincristine titration Jurkat T-cells',
+    status: 'ongoing',
+    experiment_type: 'cell_viability',
+    created_at: '2026-02-27T14:00:00Z',
+    updated_at: '2026-03-01T10:00:00Z',
+    has_design_data: true,
+  },
+  {
+    id: 10,
+    experiment_code: 'DR-MDA231-PTX-010',
+    name: 'Paclitaxel IC50 MDA-MB-231 TNBC',
+    status: 'planned',
+    experiment_type: 'dose_response',
+    project: 'Breast Cancer TNBC',
+    project_name: 'Breast Cancer TNBC',
+    created_at: '2026-03-02T12:00:00Z',
+    updated_at: '2026-03-02T12:00:00Z',
+    has_design_data: false,
+  },
+]
+
+const mockExperimentTypes = [
+  { name: 'dose_response', color: '#3b82f6' },
+  { name: 'cell_viability', color: '#10b981' },
+  { name: 'synergy', color: '#f59e0b' },
+]
+
+const mockProjects = [
+  { id: 1, name: 'Oncology Screen Q1' },
+  { id: 2, name: 'Pancreatic Cancer' },
+  { id: 3, name: 'Lung Cancer Panel' },
+  { id: 4, name: 'Toxicity Controls' },
+  { id: 5, name: 'Colorectal Panel' },
+  { id: 6, name: 'Bone Cancer' },
+  { id: 7, name: 'Breast Cancer TNBC' },
+]
+
+function applyMockFilters(
+  experiments: ExperimentSummary[],
+  params: URLSearchParams,
+): ExperimentSummary[] {
+  let filtered = [...experiments]
+  const status = params.get('status') as ExperimentStatus | null
+  const expType = params.get('experiment_type')
+  const project = params.get('project')
+  const search = params.get('search')?.toLowerCase()
+  const createdAfter = params.get('created_after')
+  const sortBy = (params.get('sort_by') ?? 'created_at') as ExperimentSortField
+  const sortOrder = params.get('sort_order') ?? 'desc'
+
+  if (status) filtered = filtered.filter((e) => e.status === status)
+  if (expType) filtered = filtered.filter((e) => e.experiment_type === expType)
+  if (project) filtered = filtered.filter((e) => e.project === project)
+  if (search) {
+    filtered = filtered.filter(
+      (e) =>
+        e.name.toLowerCase().includes(search) ||
+        e.experiment_code?.toLowerCase().includes(search) ||
+        e.project?.toLowerCase().includes(search),
+    )
+  }
+  if (createdAfter) {
+    const cutoff = new Date(createdAfter).getTime()
+    filtered = filtered.filter((e) => new Date(e.created_at).getTime() >= cutoff)
+  }
+
+  // Sort
+  filtered.sort((a, b) => {
+    const aVal = a[sortBy] ?? ''
+    const bVal = b[sortBy] ?? ''
+    const cmp = String(aVal).localeCompare(String(bVal))
+    return sortOrder === 'asc' ? cmp : -cmp
+  })
+
+  return filtered
+}
+
+// -- Intercept API calls to return mock data --
+onMounted(async () => {
+  const { useApi } = await import('../composables/useApi')
+  const { client } = useApi()
+
+  client.interceptors.request.use((config) => {
+    const url = config.url ?? ''
+
+    // Experiment types endpoint
+    if (url.includes('/experiments/experiment-types')) {
+      config.adapter = () =>
+        Promise.resolve({
+          data: mockExperimentTypes,
+          status: 200,
+          statusText: 'OK',
+          headers: {},
+          config,
+        })
+      return config
+    }
+
+    // Projects endpoint
+    if (url.includes('/projects')) {
+      config.adapter = () =>
+        Promise.resolve({
+          data: mockProjects,
+          status: 200,
+          statusText: 'OK',
+          headers: {},
+          config,
+        })
+      return config
+    }
+
+    // Experiments list endpoint
+    if (url.startsWith('/api/experiments')) {
+      const params = new URLSearchParams(url.split('?')[1] ?? '')
+      const skip = Number(params.get('skip') ?? 0)
+      const limit = Number(params.get('limit') ?? 100)
+
+      const filtered = applyMockFilters(mockExperiments, params)
+      const paged = filtered.slice(skip, skip + limit)
+
+      config.adapter = () =>
+        Promise.resolve({
+          data: { experiments: paged, total: filtered.length },
+          status: 200,
+          statusText: 'OK',
+          headers: {},
+          config,
+        })
+    }
+    return config
+  })
+
+  await nextTick()
+  isOpen.value = true
+})
+
+// -- Story state --
+const isOpen = ref(false)
+const isOpenEmpty = ref(false)
+const isOpenGrouped = ref(false)
+const isOpenWithSelection = ref(false)
+const isOpenAdvanced = ref(false)
+const selectedExperiment = ref<ExperimentSummary | null>(null)
+
+function handleSelect(experiment: ExperimentSummary) {
+  selectedExperiment.value = experiment
+}
+
+function handleDeselect() {
+  selectedExperiment.value = null
+}
+</script>
+
+<template>
+  <Story title="Experiment/ExperimentSelectorModal">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            style="padding: 0.5rem 1rem; background: var(--color-primary, #3b82f6); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+            @click="isOpen = true"
+          >
+            Open Experiment Selector
+          </button>
+
+          <div
+            v-if="selectedExperiment"
+            style="margin-top: 1rem; padding: 0.75rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px; display: flex; align-items: center; gap: 0.5rem;"
+          >
+            <span style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8);">Selected:</span>
+            <ExperimentCodeBadge
+              v-if="selectedExperiment.experiment_code"
+              :code="selectedExperiment.experiment_code"
+              size="sm"
+            />
+            <span style="font-size: 0.875rem; font-weight: 500; color: var(--text-primary, #1e293b);">
+              {{ selectedExperiment.name }}
+            </span>
+          </div>
+
+          <ExperimentSelectorModal
+            v-model="isOpen"
+            :experiment-type="state.experimentType || undefined"
+            :title="state.title"
+            :current-experiment-id="selectedExperiment?.id ?? null"
+            @select="handleSelect"
+            @deselect="handleDeselect"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="isOpen" title="Open" />
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.experimentType" title="Experiment Type" />
+      </template>
+    </Variant>
+
+    <Variant title="With Advanced Filters">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Opens with advanced filters expanded: Project, Date range, Sort, and Group toggle.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #3b82f6); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenAdvanced = true"
+        >
+          Open With Filters
+        </button>
+
+        <ExperimentSelectorModal
+          v-model="isOpenAdvanced"
+          title="Select Experiment"
+          :show-filters="true"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Grouped by Project">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Opens with group-by-project enabled by default.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #3b82f6); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenGrouped = true"
+        >
+          Open Grouped Selector
+        </button>
+
+        <ExperimentSelectorModal
+          v-model="isOpenGrouped"
+          title="Select Experiment"
+          :group-by-project="true"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Clear Selection">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Shows the "Clear selection" footer when an experiment is selected.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #3b82f6); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenWithSelection = true"
+        >
+          Open Selector (with selection)
+        </button>
+
+        <ExperimentSelectorModal
+          v-model="isOpenWithSelection"
+          title="Select Experiment"
+          :current-experiment-id="1"
+          @select="handleSelect"
+          @deselect="handleDeselect"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Filters to a non-existent experiment type, showing the empty state.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #3b82f6); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenEmpty = true"
+        >
+          Open Experiment Selector (Empty)
+        </button>
+
+        <ExperimentSelectorModal
+          v-model="isOpenEmpty"
+          experiment-type="nonexistent_type"
+          title="Select Experiment"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>