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

package/src/components/ExperimentSelectorModal.vue

@@ -0,0 +1,432 @@
+<script setup lang="ts">
+/**
+ * Modal for searching and selecting an experiment from the platform list with filters and keyboard nav.
+ *
+ * @example Recommended
+ * ```vue
+ * <ExperimentSelectorModal v-model="open" :allowed-experiment-types="['mass-spectrometry']" />
+ * ```
+ */
+import { ref, reactive, computed, watch, nextTick } from 'vue'
+import type { ModalSize, ExperimentSummary, ExperimentFilters } 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 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'
+
+interface Props {
+  modelValue: 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,
+})
+
+// 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]
+}>()
+
+const experimentStore = useExperimentStore()
+
+const {
+  experiments,
+  filters,
+  isLoading,
+  error,
+  sortKey,
+  experimentTypes,
+  projects,
+  groupedByProject,
+  fetch: fetchExperiments,
+  fetchFilterOptions,
+} = useExperimentSelector({
+  experimentType: props.experimentType,
+  allowedExperimentTypes: props.allowedExperimentTypes,
+})
+
+const activeIndex = ref(-1)
+const listRef = ref<HTMLElement | null>(null)
+const showAdvanced = ref(props.showFilters)
+const groupToggle = ref(props.groupByProject)
+
+// Track whether any advanced filter is active (for badge dot)
+const hasActiveAdvancedFilters = computed(() =>
+  !!(filters.project || filters.experimentType || filters.datePreset || sortKey.value !== 'created_at:desc'),
+)
+
+// 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,
+)
+
+// Build project filter options from fetched projects
+const projectFilterOptions = computed(() => [
+  { value: '', label: 'All projects' },
+  ...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)
+})
+
+// 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}`
+}
+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
+}
+
+function handleSortChange(value: string | number) {
+  sortKey.value = String(value) || 'created_at:desc'
+}
+
+function handleSelect(experiment: ExperimentSummary) {
+  experimentStore.select(experiment)
+  emit('update:modelValue', false)
+}
+
+function handleDeselect() {
+  experimentStore.clear()
+  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()
+      fetchFilterOptions()
+      fetchExperiments()
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <BaseModal
+    :model-value="modelValue"
+    :title="title"
+    :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>
+        <div class="mint-experiment-selector__filter-select">
+          <BaseSelect
+            :model-value="filters.status ?? ''"
+            :options="EXPERIMENT_STATUS_OPTIONS"
+            size="sm"
+            @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"
+            @update:model-value="v => setFilter('experimentType', v)"
+          />
+        </div>
+        <button
+          class="mint-experiment-selector__filters-toggle"
+          :class="{ 'mint-experiment-selector__filters-toggle--active': hasActiveAdvancedFilters }"
+          type="button"
+          :aria-expanded="showAdvanced"
+          @click="showAdvanced = !showAdvanced"
+        >
+          <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" />
+        </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" />
+          </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>
+          <BasePill :variant="getExperimentStatusVariant(exp.status)" size="sm">
+            {{ formatExperimentStatus(exp.status) }}
+          </BasePill>
+        </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>
+    </div>
+  </BaseModal>
+</template>
+
+<style>
+@import '../styles/components/experiment-selector-modal.css';
+</style>

package/src/components/ExperimentTimeline.story.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import ExperimentTimeline from './ExperimentTimeline.vue'
+import type { ProtocolStep } from '../types'
+
+const mockSteps: ProtocolStep[] = [
+  {
+    id: 'step-1',
+    type: 'addition',
+    name: 'Seed Cells',
+    description: 'Add 200 uL cell suspension per well at 5000 cells/well density.',
+    duration: 15,
+    status: 'completed',
+    parameters: { 'Cell density': '5000 cells/well', 'Volume': '200 uL' },
+    order: 0,
+  },
+  {
+    id: 'step-2',
+    type: 'incubation',
+    name: 'Overnight Incubation',
+    description: 'Allow cells to attach and reach 70-80% confluency.',
+    duration: 960,
+    status: 'completed',
+    parameters: { 'Temperature': '37 C', 'CO2': '5%' },
+    order: 1,
+  },
+  {
+    id: 'step-3',
+    type: 'wash',
+    name: 'PBS Wash',
+    description: 'Remove old media and wash with PBS.',
+    duration: 5,
+    status: 'in_progress',
+    parameters: { 'Buffer': 'PBS', 'Volume': '200 uL', 'Repeats': '2' },
+    order: 2,
+  },
+  {
+    id: 'step-4',
+    type: 'addition',
+    name: 'Add Treatment',
+    description: 'Add compound dilutions to designated wells.',
+    duration: 30,
+    status: 'pending',
+    parameters: { 'Compound': 'Cisplatin', 'Concentration range': '0.1 - 100 uM' },
+    order: 3,
+  },
+  {
+    id: 'step-5',
+    type: 'measurement',
+    name: 'Cell Viability Assay',
+    description: 'Measure cell viability using CellTiter-Glo assay.',
+    duration: 45,
+    status: 'pending',
+    parameters: { 'Assay': 'CellTiter-Glo', 'Read mode': 'Luminescence' },
+    order: 4,
+  },
+]
+
+function initState() {
+  return {
+    modelValue: mockSteps,
+    orientation: 'vertical' as const,
+    showDuration: true,
+    showTime: false,
+    editable: false,
+    collapsible: true,
+    size: 'md' as const,
+    colorByStatus: true,
+    colorByType: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/ExperimentTimeline">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <ExperimentTimeline
+            v-model="state.modelValue"
+            :orientation="state.orientation"
+            :show-duration="state.showDuration"
+            :show-time="state.showTime"
+            :editable="state.editable"
+            :collapsible="state.collapsible"
+            :size="state.size"
+            :color-by-status="state.colorByStatus"
+            :color-by-type="state.colorByType"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.orientation"
+          title="Orientation"
+          :options="[
+            { value: 'vertical', label: 'Vertical' },
+            { value: 'horizontal', label: 'Horizontal' },
+          ]"
+        />
+        <HstCheckbox v-model="state.showDuration" title="Show Duration" />
+        <HstCheckbox v-model="state.showTime" title="Show Time" />
+        <HstCheckbox v-model="state.editable" title="Editable" />
+        <HstCheckbox v-model="state.collapsible" title="Collapsible" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+        <HstCheckbox v-model="state.colorByStatus" title="Color by Status" />
+        <HstCheckbox v-model="state.colorByType" title="Color by Type" />
+      </template>
+    </Variant>
+
+    <Variant title="Horizontal">
+      <div style="padding: 2rem; overflow-x: auto;">
+        <ExperimentTimeline
+          :model-value="mockSteps"
+          orientation="horizontal"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Editable">
+      <div style="padding: 2rem; max-width: 600px;">
+        <ExperimentTimeline
+          :model-value="mockSteps"
+          editable
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Color by Type">
+      <div style="padding: 2rem; max-width: 600px;">
+        <ExperimentTimeline
+          :model-value="mockSteps"
+          :color-by-status="false"
+          color-by-type
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Small">
+      <div style="padding: 2rem; max-width: 400px;">
+        <ExperimentTimeline
+          :model-value="mockSteps"
+          size="sm"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty">
+      <div style="padding: 2rem; max-width: 600px;">
+        <ExperimentTimeline :model-value="[]" editable />
+      </div>
+    </Variant>
+  </Story>
+</template>