@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

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: {},
@@ -246,9 +269,8 @@ onMounted(async () => {
 // -- Story state --
 const isOpen = 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 +284,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
@@ -284,9 +306,10 @@ const selectedExperiment = computed(() => experimentStore.current)
           </div>
 
           <ExperimentSelectorModal
-            v-model="isOpen"
+            v-model:open="isOpen"
             :experiment-type="state.experimentType || undefined"
             :title="state.title"
+            :size="state.size || undefined"
             :current-experiment-id="selectedExperiment?.id ?? null"
           />
         </div>
@@ -294,47 +317,28 @@ 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="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"
+          v-model:open="isOpenFilters"
           title="Select Experiment"
-          :group-by-project="true"
         />
       </div>
     </Variant>
@@ -345,14 +349,14 @@ const selectedExperiment = computed(() => experimentStore.current)
           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;"
+          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 Selector (with selection)
         </button>
 
         <ExperimentSelectorModal
-          v-model="isOpenWithSelection"
+          v-model:open="isOpenWithSelection"
           title="Select Experiment"
           :current-experiment-id="1"
         />
@@ -365,14 +369,14 @@ 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)
         </button>
 
         <ExperimentSelectorModal
-          v-model="isOpenEmpty"
+          v-model:open="isOpenEmpty"
           experiment-type="nonexistent_type"
           title="Select Experiment"
         />

package/src/components/ExperimentSelectorModal.vue

@@ -4,49 +4,40 @@
  *
  * @example Recommended
  * ```vue
- * <ExperimentSelectorModal v-model="open" :allowed-experiment-types="['mass-spectrometry']" />
+ * <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,
-  formatExperimentStatus,
-  getExperimentStatusVariant,
-  EXPERIMENT_STATUS_OPTIONS,
-  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 {
-  modelValue: boolean
+  open: boolean
   experimentType?: string
   allowedExperimentTypes?: string[] | null
   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.
 // A single owner of "the current experiment" is what stops callers holding —
 // or inventing — a record of their own.
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
 }>()
 
 const experimentStore = useExperimentStore()
@@ -56,59 +47,106 @@ 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
-      ? { label: formatExperimentStatus(experiment.status), variant: getExperimentStatusVariant(experiment.status) }
+      ? { label: experimentStatus.format(experiment.status), tone: experimentStatus.tone(experiment.status) }
       : undefined,
     date: formatExperimentDate(experiment.created_at),
   }
@@ -118,28 +156,25 @@ 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:modelValue', false)
+  emit('update:open', false)
 }
 
 function handleDeselect() {
   experimentStore.clear()
-  emit('update:modelValue', false)
+  emit('update:open', false)
 }
 
 // Fetch on open
 watch(
-  () => props.modelValue,
+  () => props.open,
   (isOpen) => {
     if (isOpen) {
       openCount.value++
       fetchFilterOptions()
       fetchExperiments()
+      fetchStatusCounts()
     }
   },
   { immediate: true },
@@ -148,19 +183,19 @@ watch(
 
 <template>
   <BaseModal
-    :model-value="modelValue"
+    :open="open"
     :title="title"
     :size="size"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:open="emit('update:open', $event)"
   >
     <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"
@@ -171,77 +206,54 @@ watch(
       @select="handleSelect"
     >
       <template #filters>
-        <div class="mint-experiment-selector__filter-select">
-          <BaseSelect
-            :model-value="filters.status ?? ''"
-            :options="EXPERIMENT_STATUS_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>
 

package/src/components/FilePicker.vue

@@ -145,7 +145,7 @@ const summary = computed(() => {
 </script>
 
 <template>
-  <BaseModal :model-value="open" size="xl" layout="plain" @close="cancel">
+  <BaseModal :open="open" size="xl" layout="plain" @close="cancel">
     <template #header>
       <div class="mint-picker__head" @keydown="keyboard">
         <h2 class="mint-picker__title">{{ title }}</h2>

package/src/components/FormBuilder.story.vue

@@ -94,9 +94,16 @@ const compactControls = defineControls({
   },
 })
 
+const compactModel = defineControlModel({ controls: compactControls })
+
 const modelValues = ref<Record<string, unknown>>({})
 const controlValues = ref<Record<string, unknown>>({})
 
+/** The analysis model with or without the submit / cancel bar. */
+function analysisSpec(actions: boolean) {
+  return { ...analysisModel, controlOptions: { ...analysisModel.controlOptions, actions } }
+}
+
 function initState() {
   return {
     size: 'md' as FormSize,
@@ -115,9 +122,8 @@ function initState() {
           <div class="form-builder-story__surface">
             <FormBuilder
               v-model="modelValues"
-              :model="analysisModel"
+              :spec="analysisSpec(state.showActions)"
               :size="state.size"
-              :show-actions="state.showActions"
               :readonly="state.readonly"
               :disabled="state.disabled"
             />
@@ -147,8 +153,7 @@ function initState() {
         <div class="form-builder-story__surface form-builder-story__surface--narrow">
           <FormBuilder
             v-model="controlValues"
-            :controls="compactControls"
-            :show-actions="false"
+            :spec="compactModel"
           />
         </div>
         <pre class="form-builder-story__values">{{ JSON.stringify(controlValues, null, 2) }}</pre>