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

package/src/components/ExperimentPopover.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+/** Floating popover showing the active experiment with save, detach, and select actions. */
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
+import { formatExperimentStatus } from '../composables/experiment-utils'
+import ConfirmDialog from './ConfirmDialog.vue'
+
+interface Props {
+  experimentName?: string
+  experimentCode?: string
+  experimentStatus?: string
+  /** An experiment is bound but the platform has not returned its record yet. */
+  isResolving?: boolean
+  /** Message explaining why the bound experiment could not be resolved. */
+  error?: string
+  showSave?: boolean
+  showDetach?: boolean
+  saveDisabled?: boolean
+  saveLoading?: boolean
+  saveSuccessMessage?: string
+  saveDisabledMessage?: string
+  confirmSave?: boolean
+  confirmTitle?: string
+  confirmMessage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isResolving: false,
+  showSave: false,
+  showDetach: false,
+  saveDisabled: false,
+  saveLoading: false,
+  confirmSave: true,
+})
+
+// An experiment is bound but has no name to show — either still resolving or
+// resolution failed. The id is never substituted: a name may only come from the
+// platform, so these states say what is happening instead of inventing a label.
+const isUnresolved = computed(() => props.isResolving || !!props.error)
+const hasExperiment = computed(() => !!props.experimentName || !!props.experimentCode)
+
+const panelSubtitle = computed(() => {
+  if (props.isResolving) return 'Loading experiment…'
+  if (props.error) return 'Could not load this experiment'
+  return hasExperiment.value ? 'Linked experiment context' : 'Link to an MINT experiment'
+})
+
+const triggerLabel = computed(() => {
+  if (props.isResolving) return 'Loading experiment'
+  if (props.error) return 'Experiment unavailable'
+  return props.experimentName || props.experimentCode || 'No experiment'
+})
+
+const emit = defineEmits<{
+  select: []
+  save: []
+  detach: []
+}>()
+
+const { isOpen, rootRef: popoverRef, close, toggle } = useDropdownState({
+  closeOnEscape: false,
+})
+const showSuccess = ref(false)
+const showConfirm = ref(false)
+
+function handleSelect() {
+  emit('select')
+  close()
+}
+
+function handleSave() {
+  if (props.saveDisabled || props.saveLoading) return
+  if (props.confirmSave) {
+    showConfirm.value = true
+  } else {
+    emit('save')
+  }
+}
+
+function handleConfirmSave() {
+  showConfirm.value = false
+  emit('save')
+}
+
+function handleDetach() {
+  emit('detach')
+  close()
+}
+
+let successTimer: ReturnType<typeof setTimeout> | null = null
+
+// Show success state when saveSuccessMessage changes from empty to a value
+watch(() => props.saveSuccessMessage, (msg) => {
+  if (successTimer) clearTimeout(successTimer)
+  if (msg) {
+    showSuccess.value = true
+    successTimer = setTimeout(() => {
+      showSuccess.value = false
+      successTimer = null
+    }, 3000)
+  }
+})
+
+onUnmounted(() => {
+  if (successTimer) clearTimeout(successTimer)
+})
+</script>
+
+<template>
+  <div ref="popoverRef" class="mint-experiment-popover">
+    <!-- Split trigger: experiment pill + inline save -->
+    <div
+      :class="[
+        'mint-experiment-popover__split',
+        { 'mint-experiment-popover__split--with-save': showSave && experimentName },
+      ]"
+    >
+      <!-- Left: experiment trigger (opens popover). Prefer the human-readable
+           name; the formal code, when present, stays in the detail panel. -->
+      <button
+        type="button"
+        :class="[
+          'mint-experiment-popover__trigger',
+          { 'mint-experiment-popover__trigger--active': isOpen },
+          { 'mint-experiment-popover__trigger--empty': !isUnresolved && !hasExperiment },
+          { 'mint-experiment-popover__trigger--loading': isResolving },
+          { 'mint-experiment-popover__trigger--error': !isResolving && !!error },
+        ]"
+        :title="isUnresolved ? triggerLabel : experimentName || experimentCode || undefined"
+        :aria-label="isUnresolved ? triggerLabel : undefined"
+        :aria-busy="isResolving || undefined"
+        :aria-expanded="isOpen"
+        @click.stop="toggle"
+      >
+        <!-- Flask icon -->
+        <svg class="mint-experiment-popover__trigger-icon" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.75"
+            d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+          />
+        </svg>
+        <!-- Resolving and error come first: with an experiment bound but no name
+             yet, "No experiment" would be a lie. -->
+        <span v-if="isResolving" class="mint-experiment-popover__trigger-skeleton" aria-hidden="true" />
+        <span v-else-if="error" class="mint-experiment-popover__trigger-text">Experiment unavailable</span>
+        <!-- Name preferred, code as fallback, "No experiment" as empty state -->
+        <span v-else-if="experimentName" class="mint-experiment-popover__trigger-text">{{ experimentName }}</span>
+        <span v-else-if="experimentCode" class="mint-experiment-popover__trigger-code">{{ experimentCode }}</span>
+        <span v-else class="mint-experiment-popover__trigger-text">No experiment</span>
+        <!-- Chevron -->
+        <svg class="mint-experiment-popover__trigger-chevron" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      <!-- Right: inline save button (direct action) -->
+      <button
+        v-if="showSave && experimentName"
+        type="button"
+        :class="[
+          'mint-experiment-popover__save-trigger',
+          { 'mint-experiment-popover__save-trigger--loading': saveLoading },
+          { 'mint-experiment-popover__save-trigger--success': showSuccess },
+          { 'mint-experiment-popover__save-trigger--disabled': saveDisabled && !showSuccess },
+        ]"
+        :disabled="saveDisabled && !showSuccess"
+        :title="saveDisabled && saveDisabledMessage ? saveDisabledMessage : showSuccess && saveSuccessMessage ? saveSuccessMessage : 'Save to Experiment'"
+        aria-label="Save to experiment"
+        @click.stop="handleSave"
+      >
+        <!-- Loading spinner -->
+        <span v-if="saveLoading" class="mint-experiment-popover__spinner--inline" />
+        <!-- Success check -->
+        <svg v-else-if="showSuccess" class="mint-experiment-popover__save-trigger-icon" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+        </svg>
+        <!-- Save icon -->
+        <svg v-else class="mint-experiment-popover__save-trigger-icon" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Popover panel -->
+    <div v-if="isOpen" class="mint-experiment-popover__panel">
+      <!-- Header -->
+      <div class="mint-experiment-popover__header">
+        <div class="mint-experiment-popover__title">Experiment</div>
+        <div class="mint-experiment-popover__subtitle">
+          {{ panelSubtitle }}
+        </div>
+      </div>
+
+      <!-- Bound, still resolving — placeholders stand in for the record the
+           platform has not returned yet. -->
+      <div v-if="isResolving" class="mint-experiment-popover__body">
+        <div class="mint-experiment-popover__card" aria-busy="true">
+          <div class="mint-experiment-popover__card-icon">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.75"
+                d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+              />
+            </svg>
+          </div>
+          <div class="mint-experiment-popover__card-info">
+            <span class="mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--code" />
+            <span class="mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--name" />
+            <span class="mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--status" />
+          </div>
+        </div>
+        <div class="mint-experiment-popover__card-actions">
+          <button type="button" class="mint-experiment-popover__change-btn" @click="handleSelect">
+            Change
+          </button>
+          <button v-if="showDetach" type="button" class="mint-experiment-popover__detach-btn" @click="handleDetach">
+            Detach
+          </button>
+        </div>
+      </div>
+
+      <!-- Bound, resolution failed — Detach stays reachable so the user is not
+           stuck on an experiment the platform cannot describe. -->
+      <div v-else-if="error" class="mint-experiment-popover__body">
+        <div class="mint-experiment-popover__card mint-experiment-popover__card--error" role="alert">
+          <div class="mint-experiment-popover__card-icon mint-experiment-popover__card-icon--error">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.75"
+                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+              />
+            </svg>
+          </div>
+          <div class="mint-experiment-popover__card-info">
+            <div class="mint-experiment-popover__card-name">Experiment unavailable</div>
+            <div class="mint-experiment-popover__card-message">{{ error }}</div>
+          </div>
+        </div>
+        <div class="mint-experiment-popover__card-actions">
+          <button type="button" class="mint-experiment-popover__change-btn" @click="handleSelect">
+            Change
+          </button>
+          <button v-if="showDetach" type="button" class="mint-experiment-popover__detach-btn" @click="handleDetach">
+            Detach
+          </button>
+        </div>
+      </div>
+
+      <!-- No experiment selected -->
+      <div v-else-if="!experimentName" class="mint-experiment-popover__body">
+        <button type="button" class="mint-experiment-popover__select-btn" @click="handleSelect">
+          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+          </svg>
+          Select Experiment
+        </button>
+      </div>
+
+      <!-- Experiment selected -->
+      <div v-else class="mint-experiment-popover__body">
+        <div class="mint-experiment-popover__card">
+          <div class="mint-experiment-popover__card-icon">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.75"
+                d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+              />
+            </svg>
+          </div>
+          <div class="mint-experiment-popover__card-info">
+            <span v-if="experimentCode" class="mint-experiment-popover__card-code">{{ experimentCode }}</span>
+            <div class="mint-experiment-popover__card-name">{{ experimentName }}</div>
+            <div v-if="experimentStatus" class="mint-experiment-popover__card-status">
+              {{ formatExperimentStatus(experimentStatus) }}
+            </div>
+          </div>
+        </div>
+        <div class="mint-experiment-popover__card-actions">
+          <button type="button" class="mint-experiment-popover__change-btn" @click="handleSelect">
+            Change
+          </button>
+          <button v-if="showDetach" type="button" class="mint-experiment-popover__detach-btn" @click="handleDetach">
+            Detach
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Save confirmation dialog -->
+    <ConfirmDialog
+      v-model="showConfirm"
+      :title="confirmTitle ?? 'Save to Experiment'"
+      :message="confirmMessage ?? `Save current data to ${experimentName}?`"
+      variant="info"
+      confirm-label="Save"
+      :loading="saveLoading"
+      @confirm="handleConfirmSave"
+    />
+  </div>
+</template>
+
+<style>
+@import '../styles/components/experiment-popover.css';
+</style>

package/src/components/ExperimentSelectorModal.story.vue

@@ -0,0 +1,381 @@
+<script setup lang="ts">
+import { ref, computed, nextTick, onMounted } from 'vue'
+import ExperimentSelectorModal from './ExperimentSelectorModal.vue'
+import ExperimentCodeBadge from './ExperimentCodeBadge.vue'
+import { useExperimentStore } from '../stores/experiment'
+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)
+
+// The modal commits to the shared store rather than emitting; stories read the
+// selection back from the same place a plugin would.
+const experimentStore = useExperimentStore()
+const selectedExperiment = computed(() => experimentStore.current)
+</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"
+          />
+        </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"
+        />
+      </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"
+        />
+      </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"
+        />
+      </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"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>