@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/ExperimentPopover.story.vue

@@ -316,7 +316,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
           </div>
         </div>
         <p style="margin-top: 1rem; font-size: 0.75rem; color: var(--text-muted); text-align: center;">
-          Same 2.375rem height and refresh-design motion as AppPluginSwitcher, AppTopBar page selector, AppAvatarMenu.
+          Same 2.375rem height and refresh-design motion as the AppTopBar page selector and AppAvatarMenu.
         </p>
       </div>
     </Variant>
@@ -404,7 +404,7 @@ optionally pairs with an inline Save button as a split unit.
 
 ### Refresh-design alignment
 
-- **Height** `2.375rem` — matches `AppPluginSwitcher` / `AppTopBar page selector` so the
+- **Height** `2.375rem` — matches the `AppTopBar page selector` so the
   topbar's right cluster reads at one optical baseline.
 - **Surface** `--bg-card` + `--border-color` — consistent with the white-card +
   border language.

package/src/components/ExperimentPopover.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Floating popover showing the active experiment with save, detach, and select actions. */
-import { ref, computed, watch, onUnmounted } from 'vue'
+import { ref, computed, watch, onUnmounted, useTemplateRef } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
 import { formatExperimentStatus } from '../composables/experiment-utils'
 import ConfirmDialog from './ConfirmDialog.vue'
@@ -57,7 +57,9 @@ const emit = defineEmits<{
   detach: []
 }>()
 
-const { isOpen, rootRef: popoverRef, triggerRef, close, toggle } = useDropdownState({
+const { isOpen, close, toggle } = useDropdownState({
+  rootRef: useTemplateRef<HTMLElement>('popover'),
+  triggerRef: useTemplateRef<HTMLElement>('trigger'),
   closeOnEscape: false,
 })
 const showSuccess = ref(false)
@@ -115,7 +117,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="popoverRef" class="mint-experiment-popover">
+  <div ref="popover" class="mint-experiment-popover">
     <!-- Split trigger: experiment pill + inline save -->
     <div
       :class="[
@@ -126,7 +128,7 @@ onUnmounted(() => {
       <!-- Left: experiment trigger (selects when empty, otherwise opens popover). Prefer the human-readable
            name; the formal code, when present, stays in the detail panel. -->
       <button
-        ref="triggerRef"
+        ref="trigger"
         type="button"
         :class="[
           'mint-experiment-popover__trigger',

package/src/components/ExperimentSelectorModal.story.vue

@@ -218,7 +218,8 @@ onMounted(async () => {
     }
 
     // Experiments list endpoint
-    if (url.startsWith('/api/experiments')) {
+    // The selector requests `${platformBase}/experiments?…`; the base is empty in Histoire.
+    if (/^(\/api)?\/experiments(\?|$)/.test(url)) {
       const params = new URLSearchParams(url.split('?')[1] ?? '')
       const skip = Number(params.get('skip') ?? 0)
       const limit = Number(params.get('limit') ?? 100)

package/src/components/ExperimentSelectorModal.vue

@@ -7,7 +7,7 @@
  * <ExperimentSelectorModal v-model="open" :allowed-experiment-types="['mass-spectrometry']" />
  * ```
  */
-import { ref, reactive, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch } from 'vue'
 import type { ModalSize, ExperimentSummary, ExperimentFilters } from '../types'
 import { useExperimentSelector } from '../composables/useExperimentSelector'
 import { useExperimentStore } from '../stores/experiment'
@@ -20,12 +20,8 @@ import {
   SORT_OPTIONS,
 } from '../composables/experiment-utils'
 import BaseModal from './BaseModal.vue'
-import BaseInput from './BaseInput.vue'
 import BaseSelect from './BaseSelect.vue'
-import BasePill from './BasePill.vue'
-import Skeleton from './Skeleton.vue'
-import EmptyState from './EmptyState.vue'
-import ExperimentCodeBadge from './ExperimentCodeBadge.vue'
+import ResourcePickerListInternal from './internal/ResourcePickerListInternal.vue'
 
 interface Props {
   modelValue: boolean
@@ -71,10 +67,10 @@ const {
   allowedExperimentTypes: props.allowedExperimentTypes,
 })
 
-const activeIndex = ref(-1)
-const listRef = ref<HTMLElement | null>(null)
 const showAdvanced = ref(props.showFilters)
 const groupToggle = ref(props.groupByProject)
+// Re-mounting the list on open clears its collapsed groups and keyboard highlight.
+const openCount = ref(0)
 
 // Track whether any advanced filter is active (for badge dot)
 const hasActiveAdvancedFilters = computed(() =>
@@ -96,24 +92,27 @@ const projectFilterOptions = computed(() => [
   ...projects.value,
 ])
 
-// Flat list of experiments for keyboard navigation (works across groups too)
-const flatExperiments = computed(() => {
-  if (!groupToggle.value) return experiments.value
-  return groupedByProject.value.flatMap(([, exps]) => exps)
-})
+const groups = computed(() =>
+  groupToggle.value
+    ? groupedByProject.value.map(([label, items]) => ({ label, items }))
+    : null,
+)
 
-// Stable ids so the search field (role="combobox") can expose the currently
-// arrow-highlighted row to assistive tech via aria-activedescendant. This
-// surfaces the existing keyboard model to screen readers without changing it.
-const LISTBOX_ID = 'mint-experiment-selector-listbox'
-function optionId(experiment: ExperimentSummary): string {
-  return `mint-experiment-option-${experiment.id}`
+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 || '']),
+      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) }
+      : undefined,
+    date: formatExperimentDate(experiment.created_at),
+  }
 }
-const activeDescendantId = computed(() => {
-  const exp = flatExperiments.value[activeIndex.value]
-  return activeIndex.value >= 0 && exp ? optionId(exp) : undefined
-})
-const hasResults = computed(() => !isLoading.value && !error.value && experiments.value.length > 0)
 
 function setFilter<K extends keyof ExperimentFilters>(key: K, value: string | number) {
   ;(filters as Record<string, unknown>)[key] = String(value) || undefined
@@ -133,69 +132,12 @@ function handleDeselect() {
   emit('update:modelValue', false)
 }
 
-function handleKeydown(event: KeyboardEvent) {
-  const list = flatExperiments.value
-  if (!list.length) return
-
-  switch (event.key) {
-    case 'ArrowDown':
-      event.preventDefault()
-      activeIndex.value = Math.min(activeIndex.value + 1, list.length - 1)
-      scrollActiveIntoView()
-      break
-    case 'ArrowUp':
-      event.preventDefault()
-      activeIndex.value = Math.max(activeIndex.value - 1, 0)
-      scrollActiveIntoView()
-      break
-    case 'Enter':
-      event.preventDefault()
-      if (activeIndex.value >= 0 && activeIndex.value < list.length) {
-        handleSelect(list[activeIndex.value])
-      }
-      break
-  }
-}
-
-function scrollActiveIntoView() {
-  nextTick(() => {
-    const row = listRef.value?.querySelector('.mint-experiment-selector__row--focused')
-    row?.scrollIntoView({ block: 'nearest' })
-  })
-}
-
-// Precomputed id → flat index for O(1) lookup in grouped mode
-const flatIndexMap = computed(() => {
-  const map = new Map<number, number>()
-  flatExperiments.value.forEach((exp, i) => map.set(exp.id, i))
-  return map
-})
-
-function getFlatIndex(experiment: ExperimentSummary): number {
-  return flatIndexMap.value.get(experiment.id) ?? -1
-}
-
-// Track collapsed groups (reactive Set tracks .add/.delete/.has automatically)
-const collapsedGroups = reactive(new Set<string>())
-
-function toggleGroup(groupName: string) {
-  if (collapsedGroups.has(groupName)) {
-    collapsedGroups.delete(groupName)
-  } else {
-    collapsedGroups.add(groupName)
-  }
-}
-
-// Reset active index when experiments change
-watch(experiments, () => { activeIndex.value = -1 })
-
 // Fetch on open
 watch(
   () => props.modelValue,
   (isOpen) => {
     if (isOpen) {
-      activeIndex.value = -1
-      collapsedGroups.clear()
+      openCount.value++
       fetchFilterOptions()
       fetchExperiments()
     }
@@ -211,27 +153,30 @@ watch(
     :size="size"
     @update:model-value="emit('update:modelValue', $event)"
   >
-    <div class="mint-experiment-selector" @keydown="handleKeydown">
-      <!-- Filter bar row 1 -->
-      <div class="mint-experiment-selector__filters-row">
-        <div class="mint-experiment-selector__search">
-          <BaseInput
-            v-model="filters.search"
-            placeholder="Search experiments..."
-            size="sm"
-            type="search"
-            role="combobox"
-            aria-label="Search experiments"
-            :aria-expanded="hasResults"
-            :aria-controls="LISTBOX_ID"
-            :aria-activedescendant="activeDescendantId"
-          />
-        </div>
+    <ResourcePickerListInternal
+      :key="openCount"
+      :search="filters.search ?? ''"
+      class="mint-experiment-selector"
+      label="Experiments"
+      placeholder="Search experiments…"
+      :items="experiments"
+      :groups="groups"
+      :item-key="(experiment) => experiment.id"
+      :describe="describe"
+      :selected-key="currentExperimentId"
+      :loading="isLoading"
+      :error="error"
+      empty-title="No experiments found"
+      @update:search="filters.search = $event"
+      @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>
@@ -240,6 +185,7 @@ watch(
             :model-value="filters.experimentType ?? ''"
             :options="typeFilterOptions"
             size="sm"
+            aria-label="Filter by type"
             @update:model-value="v => setFilter('experimentType', v)"
           />
         </div>
@@ -257,172 +203,56 @@ watch(
           Filters
           <span v-if="hasActiveAdvancedFilters" class="mint-experiment-selector__filters-dot" />
         </button>
-      </div>
-
-      <!-- Filter bar row 2 (advanced, collapsible) -->
-      <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"
-            @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"
-            @update:model-value="v => setFilter('datePreset', v)"
-          />
-        </div>
-        <div class="mint-experiment-selector__filter-select">
-          <BaseSelect
-            :model-value="sortKey"
-            :options="SORT_OPTIONS"
-            size="sm"
-            @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>
-
-      <!-- Loading skeleton -->
-      <div v-if="isLoading" class="mint-experiment-selector__skeleton">
-        <div v-for="n in 4" :key="n" class="mint-experiment-selector__skeleton-row">
-          <div class="mint-experiment-selector__skeleton-content">
-            <Skeleton :width="120 + n * 20" height="14px" />
-            <Skeleton width="80px" height="10px" />
+      </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>
-          <Skeleton width="60px" height="20px" variant="rounded" />
-        </div>
-      </div>
-
-      <!-- Error -->
-      <div v-else-if="error" class="mint-experiment-selector__error">
-        {{ error }}
-      </div>
-
-      <!-- Empty -->
-      <EmptyState
-        v-else-if="experiments.length === 0"
-        title="No experiments found"
-        description="Try adjusting your search or filters."
-        size="sm"
-      />
-
-      <!-- Experiment list: grouped mode -->
-      <div v-else-if="groupToggle" :id="LISTBOX_ID" ref="listRef" class="mint-experiment-selector__list" role="listbox" aria-label="Experiments">
-        <template v-for="([groupName, groupExps]) in groupedByProject" :key="groupName">
-          <button
-            type="button"
-            class="mint-experiment-selector__group-header"
-            :aria-expanded="!collapsedGroups.has(groupName)"
-            @click="toggleGroup(groupName)"
-          >
-            <svg
-              class="mint-experiment-selector__group-chevron"
-              :class="{ 'mint-experiment-selector__group-chevron--collapsed': collapsedGroups.has(groupName) }"
-              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"
-            >
-              <polyline points="6 9 12 15 18 9" />
-            </svg>
-            <span class="mint-experiment-selector__group-name">{{ groupName }}</span>
-            <span class="mint-experiment-selector__group-count">{{ groupExps.length }}</span>
-          </button>
-          <template v-if="!collapsedGroups.has(groupName)">
-            <div
-              v-for="exp in groupExps"
-              :id="optionId(exp)"
-              :key="exp.id"
-              class="mint-experiment-selector__row"
-              role="option"
-              :aria-selected="exp.id === currentExperimentId"
-              :class="{
-                'mint-experiment-selector__row--active': exp.id === currentExperimentId,
-                'mint-experiment-selector__row--focused': getFlatIndex(exp) === activeIndex,
-              }"
-              @click="handleSelect(exp)"
-              @mouseenter="activeIndex = getFlatIndex(exp)"
-            >
-              <div class="mint-experiment-selector__row-content">
-                <div class="mint-experiment-selector__name">
-                  {{ exp.name }}
-                  <ExperimentCodeBadge
-                    v-if="exp.experiment_code"
-                    :code="exp.experiment_code"
-                    size="sm"
-                    :copyable="false"
-                  />
-                </div>
-                <div class="mint-experiment-selector__meta">
-                  <span>{{ formatExperimentDate(exp.created_at) }}</span>
-                </div>
-              </div>
-              <BasePill :variant="getExperimentStatusVariant(exp.status)" size="sm">
-                {{ formatExperimentStatus(exp.status) }}
-              </BasePill>
-            </div>
-          </template>
-        </template>
-      </div>
-
-      <!-- Experiment list: flat mode -->
-      <div v-else :id="LISTBOX_ID" ref="listRef" class="mint-experiment-selector__list" role="listbox" aria-label="Experiments">
-        <div
-          v-for="(exp, idx) in experiments"
-          :id="optionId(exp)"
-          :key="exp.id"
-          class="mint-experiment-selector__row"
-          role="option"
-          :aria-selected="exp.id === currentExperimentId"
-          :class="{
-            'mint-experiment-selector__row--active': exp.id === currentExperimentId,
-            'mint-experiment-selector__row--focused': idx === activeIndex,
-          }"
-          @click="handleSelect(exp)"
-          @mouseenter="activeIndex = idx"
-        >
-          <div class="mint-experiment-selector__row-content">
-            <div class="mint-experiment-selector__name">
-              {{ exp.name }}
-              <ExperimentCodeBadge
-                v-if="exp.experiment_code"
-                :code="exp.experiment_code"
-                size="sm"
-                :copyable="false"
-              />
-            </div>
-            <div class="mint-experiment-selector__meta">
-              <span v-if="exp.project_name || exp.project">{{ exp.project_name || exp.project }}</span>
-              <span>{{ formatExperimentDate(exp.created_at) }}</span>
-            </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>
-          <BasePill :variant="getExperimentStatusVariant(exp.status)" size="sm">
-            {{ formatExperimentStatus(exp.status) }}
-          </BasePill>
+          <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>
-      </div>
-
-      <!-- Footer: clear selection -->
-      <div v-if="currentExperimentId != null" class="mint-experiment-selector__footer">
-        <button
-          type="button"
-          class="mint-experiment-selector__clear-btn"
-          @click="handleDeselect"
-        >
-          Clear selection
-        </button>
-      </div>
+      </template>
+    </ResourcePickerListInternal>
+
+    <div v-if="currentExperimentId != null" class="mint-experiment-selector__footer">
+      <button
+        type="button"
+        class="mint-experiment-selector__clear-btn"
+        @click="handleDeselect"
+      >
+        Clear selection
+      </button>
     </div>
   </BaseModal>
 </template>

package/src/components/ExperimentTimeline.story.vue

@@ -32,6 +32,7 @@ const mockSteps: ProtocolStep[] = [
     status: 'in_progress',
     parameters: { 'Buffer': 'PBS', 'Volume': '200 uL', 'Repeats': '2' },
     order: 2,
+    progress: 35,
   },
   {
     id: 'step-4',
@@ -70,6 +71,14 @@ function initState() {
     colorByType: false,
   }
 }
+
+function initProgressState() {
+  return { progress: 35, size: 'md' as const }
+}
+
+function withProgress(progress: number): ProtocolStep[] {
+  return mockSteps.map(step => (step.status === 'in_progress' ? { ...step, progress } : step))
+}
 </script>
 
 <template>
@@ -121,6 +130,26 @@ function initState() {
       </template>
     </Variant>
 
+    <Variant title="Step Progress" :init-state="initProgressState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <ExperimentTimeline :model-value="withProgress(state.progress)" :size="state.size" />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstSlider v-model="state.progress" title="Progress (%)" :min="0" :max="100" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+      </template>
+    </Variant>
+
     <Variant title="Horizontal">
       <div style="padding: 2rem; overflow-x: auto;">
         <ExperimentTimeline

package/src/components/ExperimentTimeline.vue

@@ -102,6 +102,12 @@ function getIconStatusClass(step: ProtocolStep): string {
   return props.colorByStatus ? iconStatusClasses[step.status] : iconStatusClasses.pending
 }
 
+/** Rounded, clamped percent for the running step; `null` hides the bar (3d). */
+function stepProgress(step: ProtocolStep): number | null {
+  if (step.status !== 'in_progress' || step.progress == null) return null
+  return Math.round(Math.min(100, Math.max(0, step.progress)))
+}
+
 function toggleExpand(step: ProtocolStep) {
   expandedId.value = expandedId.value === step.id ? undefined : step.id
 }
@@ -235,10 +241,24 @@ function setStepRef(id: string, el: Element | ComponentPublicInstance | null) {
               >
                 {{ formatDuration(step.duration) }}
               </span>
+              <span v-if="stepProgress(step) !== null" class="mint-timeline__progress-value">
+                {{ stepProgress(step) }}%
+              </span>
             </div>
             <div :class="['mint-timeline__type', `mint-timeline__type--${size}`]">
               {{ step.type.replace('_', ' ') }}
             </div>
+            <div
+              v-if="stepProgress(step) !== null"
+              class="mint-timeline__progress"
+              role="progressbar"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              :aria-valuenow="stepProgress(step)!"
+              :aria-label="`${step.name} progress`"
+            >
+              <div class="mint-timeline__progress-fill" :style="{ width: `${stepProgress(step)}%` }" />
+            </div>
           </div>
 
           <svg