@morscherlab/mint-sdk 1.4.0-beta.8 → 1.4.0

package/src/components/ExperimentSelectorModal.story.vue

@@ -10,6 +10,7 @@ const mockExperiments: ExperimentSummary[] = [
   {
     id: 1,
     experiment_code: 'DR-HeLa-DOX-001',
+    created_by: 1,
     name: 'Doxorubicin dose-response in HeLa cells',
     status: 'completed',
     experiment_type: 'dose_response',
@@ -34,6 +35,7 @@ const mockExperiments: ExperimentSummary[] = [
   {
     id: 3,
     experiment_code: 'DR-PANC1-GEM-003',
+    created_by: 1,
     name: 'Gemcitabine IC50 in PANC-1',
     status: 'ongoing',
     experiment_type: 'dose_response',
@@ -70,6 +72,7 @@ const mockExperiments: ExperimentSummary[] = [
   {
     id: 6,
     experiment_code: 'SYN-HeLa-COMBO-006',
+    created_by: 1,
     name: 'DOX + 5-FU synergy screen in HeLa',
     status: 'planned',
     experiment_type: 'synergy',
@@ -106,6 +109,7 @@ const mockExperiments: ExperimentSummary[] = [
   {
     id: 9,
     experiment_code: 'CV-JURKAT-VIN-009',
+    created_by: 1,
     name: 'Vincristine titration Jurkat T-cells',
     status: 'ongoing',
     experiment_type: 'cell_viability',
@@ -128,9 +132,9 @@ const mockExperiments: ExperimentSummary[] = [
 ]
 
 const mockExperimentTypes = [
-  { name: 'dose_response', color: '#3b82f6' },
-  { name: 'cell_viability', color: '#10b981' },
-  { name: 'synergy', color: '#f59e0b' },
+  { value: 'dose_response', label: 'Dose response' },
+  { value: 'cell_viability', label: 'Cell viability' },
+  { value: 'synergy', label: 'Synergy' },
 ]
 
 const mockProjects = [
@@ -152,6 +156,7 @@ function applyMockFilters(
   const expType = params.get('experiment_type')
   const project = params.get('project')
   const search = params.get('search')?.toLowerCase()
+  const mine = params.get('mine') === 'true'
   const createdAfter = params.get('created_after')
   const sortBy = (params.get('sort_by') ?? 'created_at') as ExperimentSortField
   const sortOrder = params.get('sort_order') ?? 'desc'
@@ -159,6 +164,7 @@ function applyMockFilters(
   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 (mine) filtered = filtered.filter((e) => e.created_by === 1)
   if (search) {
     filtered = filtered.filter(
       (e) =>
@@ -208,7 +214,24 @@ onMounted(async () => {
     if (url.includes('/projects')) {
       config.adapter = () =>
         Promise.resolve({
-          data: mockProjects,
+          data: { projects: mockProjects, total: mockProjects.length },
+          status: 200,
+          statusText: 'OK',
+          headers: {},
+          config,
+        })
+      return config
+    }
+
+    // Status counts: the list filters without status (the route never receives one).
+    if (/^(\/api)?\/experiments\/stats(\?|$)/.test(url)) {
+      const params = new URLSearchParams(url.split('?')[1] ?? '')
+      const filtered = applyMockFilters(mockExperiments, params)
+      const by_status: Record<string, number> = { planned: 0, ongoing: 0, completed: 0, cancelled: 0 }
+      for (const e of filtered) by_status[e.status] = (by_status[e.status] ?? 0) + 1
+      config.adapter = () =>
+        Promise.resolve({
+          data: { total: filtered.length, by_status },
           status: 200,
           statusText: 'OK',
           headers: {},
@@ -245,10 +268,10 @@ onMounted(async () => {
 
 // -- Story state --
 const isOpen = ref(false)
+const isOpenRun = ref(false)
 const isOpenEmpty = ref(false)
-const isOpenGrouped = ref(false)
 const isOpenWithSelection = ref(false)
-const isOpenAdvanced = ref(false)
+const isOpenFilters = ref(false)
 
 // The modal commits to the shared store rather than emitting; stories read the
 // selection back from the same place a plugin would.
@@ -262,7 +285,7 @@ const selectedExperiment = computed(() => experimentStore.current)
       <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;"
+            style="padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;"
             @click="isOpen = true"
           >
             Open Experiment Selector
@@ -287,6 +310,7 @@ const selectedExperiment = computed(() => experimentStore.current)
             v-model:open="isOpen"
             :experiment-type="state.experimentType || undefined"
             :title="state.title"
+            :size="state.size || undefined"
             :current-experiment-id="selectedExperiment?.id ?? null"
           />
         </div>
@@ -294,68 +318,86 @@ const selectedExperiment = computed(() => experimentStore.current)
 
       <template #controls="{ state }">
         <HstCheckbox v-model="isOpen" title="Open" />
+        <HstSelect v-model="state.size" title="Size (default lg)" :options="['', 'md', 'lg', 'xl', 'full']" />
         <HstText v-model="state.title" title="Title" />
         <HstText v-model="state.experimentType" title="Experiment Type" />
       </template>
     </Variant>
 
-    <Variant title="With Advanced Filters">
+    <Variant title="Active 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 style="font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 1rem;">
+          Pick a status (each option shows its count), pick a project or press Mine: the trigger
+          fills with the accent tint and "Clear N" appears. Mine keeps the experiments of user 1.
         </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"
+          style="padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenFilters = true"
         >
           Open With Filters
         </button>
 
         <ExperimentSelectorModal
-          v-model:open="isOpenAdvanced"
+          v-model:open="isOpenFilters"
           title="Select Experiment"
-          :show-filters="true"
         />
       </div>
     </Variant>
 
-    <Variant title="Grouped by Project">
+    <Variant title="With Clear Selection">
       <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.
+          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="isOpenGrouped = true"
+          style="padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenWithSelection = true"
         >
-          Open Grouped Selector
+          Open Selector (with selection)
         </button>
 
         <ExperimentSelectorModal
-          v-model:open="isOpenGrouped"
+          v-model:open="isOpenWithSelection"
           title="Select Experiment"
-          :group-by-project="true"
+          :current-experiment-id="1"
         />
       </div>
     </Variant>
 
-    <Variant title="With Clear Selection">
+    <Variant title="Run Destination (slots)">
       <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.
+          A plugin asks where to save a run: the description slot explains why, and the footer slot adds Skip with close().
         </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"
+          style="padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenRun = true"
         >
-          Open Selector (with selection)
+          Run extraction
         </button>
 
         <ExperimentSelectorModal
-          v-model:open="isOpenWithSelection"
-          title="Select Experiment"
-          :current-experiment-id="1"
-        />
+          v-model:open="isOpenRun"
+          title="Save the result to an experiment?"
+        >
+          <template #description>
+            Pick an experiment to save this run as a new artifact in it, next to the samples it belongs to.
+          </template>
+          <template #footer="{ close }">
+            <div style="display: flex; align-items: center; gap: 0.75rem;">
+              <span style="flex: 1; font-size: 0.75rem; color: var(--text-secondary);">
+                Skip: the result stays in the plugin. You can save it to an experiment later.
+              </span>
+              <button
+                type="button"
+                style="height: 2rem; padding: 0 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); cursor: pointer;"
+                @click="close"
+              >
+                Skip
+              </button>
+            </div>
+          </template>
+        </ExperimentSelectorModal>
       </div>
     </Variant>
 
@@ -365,7 +407,7 @@ const selectedExperiment = computed(() => experimentStore.current)
           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;"
+          style="padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;"
           @click="isOpenEmpty = true"
         >
           Open Experiment Selector (Empty)

package/src/components/ExperimentSelectorModal.vue

@@ -7,18 +7,15 @@
  * <ExperimentSelectorModal v-model:open="open" :allowed-experiment-types="['mass-spectrometry']" />
  * ```
  */
-import { ref, computed, watch } from 'vue'
-import type { ModalSize, ExperimentSummary, ExperimentFilters } from '../types'
+import { ref, computed, watch, type Component } from 'vue'
+import { ChevronDown, CircleDot, Folder, Shapes, User } from 'lucide-vue-next'
+import type { ModalSize, ExperimentSummary, ExperimentFilters, ActionMenuItem, Tone } from '../types'
 import { useExperimentSelector } from '../composables/useExperimentSelector'
 import { useExperimentStore } from '../stores/experiment'
-import {
-  formatExperimentDate,
-  DATE_PRESET_OPTIONS,
-  SORT_OPTIONS,
-} from '../composables/experiment-utils'
+import { formatExperimentDate } from '../composables/experiment-utils'
 import * as experimentStatus from '../utils/experimentStatus'
 import BaseModal from './BaseModal.vue'
-import BaseSelect from './BaseSelect.vue'
+import ActionMenu from './ActionMenu.vue'
 import ResourcePickerListInternal from './internal/ResourcePickerListInternal.vue'
 
 interface Props {
@@ -28,16 +25,12 @@ interface Props {
   currentExperimentId?: number | null
   title?: string
   size?: ModalSize
-  groupByProject?: boolean
-  showFilters?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   currentExperimentId: null,
   title: 'Select Experiment',
-  size: 'full',
-  groupByProject: false,
-  showFilters: false,
+  size: 'lg',
 })
 
 // Selection is committed to the shared experiment store rather than emitted.
@@ -47,6 +40,17 @@ const emit = defineEmits<{
   'update:open': [value: boolean]
 }>()
 
+defineSlots<{
+  /** Text above the experiment list: why the caller asks for an experiment. */
+  description?: () => unknown
+  /** Extra footer content, before Clear selection. `close()` closes the modal without a selection. */
+  footer?: (props: { close: () => void }) => unknown
+}>()
+
+function close() {
+  emit('update:open', false)
+}
+
 const experimentStore = useExperimentStore()
 
 const {
@@ -54,55 +58,102 @@ const {
   filters,
   isLoading,
   error,
-  sortKey,
   experimentTypes,
   projects,
-  groupedByProject,
+  statusCounts,
   fetch: fetchExperiments,
   fetchFilterOptions,
+  fetchStatusCounts,
 } = useExperimentSelector({
   experimentType: props.experimentType,
   allowedExperimentTypes: props.allowedExperimentTypes,
+  withStatusCounts: true,
 })
 
-const showAdvanced = ref(props.showFilters)
-const groupToggle = ref(props.groupByProject)
-// Re-mounting the list on open clears its collapsed groups and keyboard highlight.
+// Re-mounting the list on open clears its keyboard highlight.
 const openCount = ref(0)
 
-// Track whether any advanced filter is active (for badge dot)
-const hasActiveAdvancedFilters = computed(() =>
-  !!(filters.project || filters.experimentType || filters.datePreset || sortKey.value !== 'created_at:desc'),
-)
+const STATUS_ORDER = ['ongoing', 'planned', 'completed', 'cancelled'] as const
 
-// Build type filter options from fetched experiment types
-const typeFilterOptions = computed(() => [
-  { value: '', label: 'All types' },
-  ...experimentTypes.value.map(t => ({ value: t.value, label: t.label })),
-])
 const canChooseExperimentType = computed(() =>
-  !props.experimentType && typeFilterOptions.value.length > 2,
+  !props.experimentType && experimentTypes.value.length > 1,
 )
 
-// Build project filter options from fetched projects
-const projectFilterOptions = computed(() => [
-  { value: '', label: 'All projects' },
-  ...projects.value,
-])
+type FilterKey = 'status' | 'project' | 'experimentType'
+
+interface FilterMenu {
+  key: FilterKey
+  label: string
+  icon: Component
+  items: ActionMenuItem[]
+  /** Trigger text while the filter is set. */
+  activeLabel?: string
+  dotTone?: Tone
+}
+
+/** Every item carries `checked`, so ActionMenu renders a single-choice menu. */
+function choiceItems(key: FilterKey, anyLabel: string, options: { value: string; label: string }[]): ActionMenuItem[] {
+  const current = filters[key] ?? ''
+  return [{ value: '', label: anyLabel }, ...options].map(option => ({
+    id: option.value,
+    label: option.label,
+    checked: option.value === current,
+  }))
+}
+
+const filterMenus = computed<FilterMenu[]>(() => {
+  const menus: FilterMenu[] = [{
+    key: 'status',
+    label: 'Status',
+    icon: CircleDot,
+    items: choiceItems('status', 'Any status', STATUS_ORDER.map(status => {
+      const count = statusCounts.value[status]
+      const label = experimentStatus.format(status)
+      return { value: status, label: count === undefined ? label : `${label} · ${count}` }
+    })),
+    activeLabel: filters.status ? experimentStatus.format(filters.status) : undefined,
+    dotTone: filters.status ? experimentStatus.tone(filters.status) : undefined,
+  }]
+  if (projects.value.length) {
+    menus.push({
+      key: 'project',
+      label: 'Project',
+      icon: Folder,
+      items: choiceItems('project', 'Any project', projects.value),
+      activeLabel: filters.project ?? undefined,
+    })
+  }
+  if (canChooseExperimentType.value) {
+    menus.push({
+      key: 'experimentType',
+      label: 'Type',
+      icon: Shapes,
+      items: choiceItems('experimentType', 'Any type', experimentTypes.value),
+      activeLabel: experimentTypes.value.find(t => t.value === filters.experimentType)?.label
+        ?? filters.experimentType ?? undefined,
+    })
+  }
+  return menus
+})
 
-const groups = computed(() =>
-  groupToggle.value
-    ? groupedByProject.value.map(([label, items]) => ({ label, items }))
-    : null,
+const activeFilterCount = computed(() =>
+  [filters.status, filters.project, filters.experimentType, filters.mine].filter(Boolean).length,
 )
 
+function clearFilters() {
+  filters.status = undefined
+  filters.project = undefined
+  filters.experimentType = undefined
+  filters.mine = undefined
+}
+
 function describe(experiment: ExperimentSummary) {
   const owner = experiment.created_by_user
   return {
     code: experiment.experiment_code,
     title: experiment.name,
     meta: [
-      ...(groupToggle.value ? [] : [experiment.project_name || experiment.project || '']),
+      experiment.project_name || experiment.project || '',
       owner ? [owner.first_name, owner.last_name].filter(Boolean).join(' ') || owner.username : '',
     ].filter(Boolean),
     status: experiment.status
@@ -116,10 +167,6 @@ function setFilter<K extends keyof ExperimentFilters>(key: K, value: string | nu
   ;(filters as Record<string, unknown>)[key] = String(value) || undefined
 }
 
-function handleSortChange(value: string | number) {
-  sortKey.value = String(value) || 'created_at:desc'
-}
-
 function handleSelect(experiment: ExperimentSummary) {
   experimentStore.select(experiment)
   emit('update:open', false)
@@ -138,6 +185,7 @@ watch(
       openCount.value++
       fetchFilterOptions()
       fetchExperiments()
+      fetchStatusCounts()
     }
   },
   { immediate: true },
@@ -151,14 +199,18 @@ watch(
     :size="size"
     @update:open="emit('update:open', $event)"
   >
+    <div v-if="$slots.description" class="mint-experiment-selector__description">
+      <slot name="description" />
+    </div>
+
     <ResourcePickerListInternal
       :key="openCount"
       :search="filters.search ?? ''"
       class="mint-experiment-selector"
+      autofocus-search
       label="Experiments"
       placeholder="Search experiments…"
       :items="experiments"
-      :groups="groups"
       :item-key="(experiment) => experiment.id"
       :describe="describe"
       :selected-key="currentExperimentId"
@@ -169,82 +221,63 @@ watch(
       @select="handleSelect"
     >
       <template #filters>
-        <div class="mint-experiment-selector__filter-select">
-          <BaseSelect
-            :model-value="filters.status ?? ''"
-            :options="experimentStatus.OPTIONS"
-            size="sm"
-            aria-label="Filter by status"
-            @update:model-value="v => setFilter('status', v)"
-          />
-        </div>
-        <div v-if="canChooseExperimentType" class="mint-experiment-selector__filter-select">
-          <BaseSelect
-            :model-value="filters.experimentType ?? ''"
-            :options="typeFilterOptions"
-            size="sm"
-            aria-label="Filter by type"
-            @update:model-value="v => setFilter('experimentType', v)"
-          />
-        </div>
+        <ActionMenu
+          v-for="menu in filterMenus"
+          :key="menu.key"
+          :label="menu.label"
+          :items="menu.items"
+          @select="item => setFilter(menu.key, item.id)"
+        >
+          <template #trigger="{ open: menuOpen, toggle, keydown }">
+            <button
+              type="button"
+              class="mint-experiment-selector__toggle"
+              :class="{ 'mint-experiment-selector__toggle--active': menu.activeLabel }"
+              :aria-label="`${menu.label}: ${menu.activeLabel ?? menu.items[0].label}`"
+              aria-haspopup="menu"
+              :aria-expanded="menuOpen"
+              @click="toggle"
+              @keydown="keydown"
+            >
+              <span
+                v-if="menu.dotTone"
+                class="mint-experiment-selector__dot"
+                :class="`mint-experiment-selector__dot--${menu.dotTone}`"
+                aria-hidden="true"
+              />
+              <component :is="menu.icon" v-else :size="13" aria-hidden="true" />
+              <span class="mint-experiment-selector__toggle-label">{{ menu.activeLabel ?? menu.label }}</span>
+              <ChevronDown :size="12" aria-hidden="true" />
+            </button>
+          </template>
+        </ActionMenu>
         <button
-          class="mint-experiment-selector__filters-toggle"
-          :class="{ 'mint-experiment-selector__filters-toggle--active': hasActiveAdvancedFilters }"
           type="button"
-          :aria-expanded="showAdvanced"
-          @click="showAdvanced = !showAdvanced"
+          class="mint-experiment-selector__toggle"
+          :class="{ 'mint-experiment-selector__toggle--active': filters.mine }"
+          :aria-pressed="!!filters.mine"
+          @click="filters.mine = filters.mine ? undefined : true"
         >
-          <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="4" y1="6" x2="20" y2="6" /><line x1="8" y1="12" x2="20" y2="12" /><line x1="12" y1="18" x2="20" y2="18" />
-            <circle cx="6" cy="12" r="2" /><circle cx="10" cy="18" r="2" /><circle cx="6" cy="6" r="2" />
-          </svg>
-          Filters
-          <span v-if="hasActiveAdvancedFilters" class="mint-experiment-selector__filters-dot" />
+          <User :size="13" aria-hidden="true" />
+          Mine
+        </button>
+        <button
+          v-if="activeFilterCount"
+          type="button"
+          class="mint-experiment-selector__clear-filters"
+          @click="clearFilters"
+        >
+          Clear {{ activeFilterCount }}
         </button>
-      </template>
-      <template #advanced>
-        <div v-if="showAdvanced" class="mint-experiment-selector__filters-advanced">
-          <div v-if="projectFilterOptions.length > 1" class="mint-experiment-selector__filter-select">
-            <BaseSelect
-              :model-value="filters.project ?? ''"
-              :options="projectFilterOptions"
-              size="sm"
-              aria-label="Filter by project"
-              @update:model-value="v => setFilter('project', v)"
-            />
-          </div>
-          <div class="mint-experiment-selector__filter-select">
-            <BaseSelect
-              :model-value="filters.datePreset ?? ''"
-              :options="DATE_PRESET_OPTIONS"
-              size="sm"
-              aria-label="Filter by date"
-              @update:model-value="v => setFilter('datePreset', v)"
-            />
-          </div>
-          <div class="mint-experiment-selector__filter-select">
-            <BaseSelect
-              :model-value="sortKey"
-              :options="SORT_OPTIONS"
-              size="sm"
-              aria-label="Sort"
-              @update:model-value="handleSortChange"
-            />
-          </div>
-          <label class="mint-experiment-selector__group-toggle">
-            <input
-              v-model="groupToggle"
-              type="checkbox"
-              class="mint-experiment-selector__group-checkbox"
-            />
-            Group by project
-          </label>
-        </div>
       </template>
     </ResourcePickerListInternal>
 
-    <div v-if="currentExperimentId != null" class="mint-experiment-selector__footer">
+    <div v-if="$slots.footer || currentExperimentId != null" class="mint-experiment-selector__footer">
+      <div v-if="$slots.footer" class="mint-experiment-selector__footer-slot">
+        <slot name="footer" :close="close" />
+      </div>
       <button
+        v-if="currentExperimentId != null"
         type="button"
         class="mint-experiment-selector__clear-btn"
         @click="handleDeselect"