@morscherlab/mint-sdk 1.1.0 → 1.1.2

package/src/components/ExperimentSelectorModal.story.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, nextTick, onMounted } from 'vue'
+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 --
@@ -247,15 +248,11 @@ const isOpenEmpty = ref(false)
 const isOpenGrouped = ref(false)
 const isOpenWithSelection = ref(false)
 const isOpenAdvanced = ref(false)
-const selectedExperiment = ref<ExperimentSummary | null>(null)
 
-function handleSelect(experiment: ExperimentSummary) {
-  selectedExperiment.value = experiment
-}
-
-function handleDeselect() {
-  selectedExperiment.value = null
-}
+// 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>
@@ -290,8 +287,6 @@ function handleDeselect() {
             :experiment-type="state.experimentType || undefined"
             :title="state.title"
             :current-experiment-id="selectedExperiment?.id ?? null"
-            @select="handleSelect"
-            @deselect="handleDeselect"
           />
         </div>
       </template>
@@ -319,7 +314,6 @@ function handleDeselect() {
           v-model="isOpenAdvanced"
           title="Select Experiment"
           :show-filters="true"
-          @select="handleSelect"
         />
       </div>
     </Variant>
@@ -340,7 +334,6 @@ function handleDeselect() {
           v-model="isOpenGrouped"
           title="Select Experiment"
           :group-by-project="true"
-          @select="handleSelect"
         />
       </div>
     </Variant>
@@ -361,8 +354,6 @@ function handleDeselect() {
           v-model="isOpenWithSelection"
           title="Select Experiment"
           :current-experiment-id="1"
-          @select="handleSelect"
-          @deselect="handleDeselect"
         />
       </div>
     </Variant>
@@ -383,7 +374,6 @@ function handleDeselect() {
           v-model="isOpenEmpty"
           experiment-type="nonexistent_type"
           title="Select Experiment"
-          @select="handleSelect"
         />
       </div>
     </Variant>

package/src/components/ExperimentSelectorModal.vue

@@ -3,6 +3,7 @@
 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,
@@ -38,12 +39,15 @@ const props = withDefaults(defineProps<Props>(), {
   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]
-  select: [experiment: ExperimentSummary]
-  deselect: []
 }>()
 
+const experimentStore = useExperimentStore()
+
 const {
   experiments,
   filters,
@@ -113,12 +117,12 @@ function handleSortChange(value: string | number) {
 }
 
 function handleSelect(experiment: ExperimentSummary) {
-  emit('select', experiment)
+  experimentStore.select(experiment)
   emit('update:modelValue', false)
 }
 
 function handleDeselect() {
-  emit('deselect')
+  experimentStore.clear()
   emit('update:modelValue', false)
 }
 

package/src/components/PluginWorkspaceView.props.ts

@@ -19,7 +19,6 @@ import type {
   ControlSchema,
   ControlWorkspaceOptions,
 } from '../composables/useControlSchema'
-import type { AppExperimentRecord } from '../composables/useAppExperiment'
 
 export type PluginWorkspaceSidebarVariant = 'default' | 'analysis'
 
@@ -72,10 +71,8 @@ export interface PluginWorkspaceViewProps {
   userInitial?: string
   /** Classic profile email. */
   userEmail?: string
-  /** Enable the built-in AppTopBar experiment popover and selector flow. */
+  /** Enable the built-in AppTopBar experiment popover and selector flow. The current experiment comes from the shared experiment store, not from a prop. Keep this comment on one line — the docs extractor drops multi-line JSDoc. */
   experimentShell?: boolean
-  /** Current experiment mirrored into the AppTopBar experiment chip when experimentShell is enabled. */
-  experiment?: AppExperimentRecord | null
   /** Save handler used by the AppTopBar experiment chip. Return a message to flash success. */
   experimentSave?: () => string | null | Promise<string | null>
   /** Disable the experiment save action. */

package/src/components/PluginWorkspaceView.story.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import type { ExperimentSummary, PillNavItem, SidebarToolSection } from '../types'
 import { defineDoseDesignControlModel } from '../composables/useControlSchema'
-import { ExperimentProvider, mockExperiments } from '../__stories__/experiment-helpers'
+import { ExperimentProvider } from '../__stories__/experiment-helpers'
 import PluginWorkspaceView from './PluginWorkspaceView.vue'
 import AlertBox from './AlertBox.vue'
 import BaseButton from './BaseButton.vue'
@@ -70,7 +70,9 @@ const doseDesignModel = defineDoseDesignControlModel({
   },
 })
 const doseDesignValues = ref({})
-const shellExperiment = ref<ExperimentSummary | null>(mockExperiments[0] ?? null)
+// Read-only echo of the shell's selection events. The workspace itself reads
+// the current experiment from the shared store, not from a prop.
+const lastExperimentEvent = ref<string>('')
 
 const state = ref({
   title: 'Plugin Workspace',
@@ -83,11 +85,11 @@ const state = ref({
 })
 
 function handleExperimentSelect(experiment: ExperimentSummary) {
-  shellExperiment.value = experiment
+  lastExperimentEvent.value = `selected: ${experiment.name}`
 }
 
 function handleExperimentDetach() {
-  shellExperiment.value = null
+  lastExperimentEvent.value = 'detached'
 }
 
 async function saveDoseDesign() {
@@ -242,7 +244,6 @@ async function saveDoseDesign() {
             sidebar-title="Design Controls"
             sidebar-subtitle="Plate and dose setup"
             experiment-shell
-            :experiment="shellExperiment"
             :experiment-save="saveDoseDesign"
             show-settings
             show-theme-toggle
@@ -269,6 +270,12 @@ async function saveDoseDesign() {
               </div>
             </template>
           </PluginWorkspaceView>
+          <p
+            v-if="lastExperimentEvent"
+            style="padding: 0.75rem 1rem; margin: 0; font-family: 'Fira Code', monospace; font-size: 0.75rem; color: var(--text-muted);"
+          >
+            Last shell event: {{ lastExperimentEvent }}
+          </p>
         </div>
       </ExperimentProvider>
     </Variant>

package/src/components/PluginWorkspaceView.vue

@@ -52,7 +52,6 @@ const props = withDefaults(defineProps<PluginWorkspaceViewProps>(), {
   userInitial: undefined,
   userEmail: undefined,
   experimentShell: false,
-  experiment: undefined,
   experimentSave: undefined,
   experimentSaveDisabled: false,
   experimentSaveDisabledMessage: undefined,
@@ -144,7 +143,6 @@ const slots = useSlots()
 
 if (props.experimentShell) {
   useAppExperiment({
-    experiment: computed(() => props.experiment),
     onSelect: experiment => emit('experiment-select', experiment),
     onSave: props.experimentSave,
     onDetach: () => emit('experiment-detach'),

package/src/components/SettingsModal.vue

@@ -191,7 +191,12 @@ watch(
 watch(
   () => ({ ...builder.form.data }),
   (data) => {
-    if (settingsSchema.value) emit('update:values', data as Record<string, unknown>)
+    if (settingsSchema.value) {
+      emit('update:values', {
+        ...resolvedValues.value,
+        ...data,
+      })
+    }
   },
   { deep: true },
 )

package/src/composables/experiment-utils.ts

@@ -67,6 +67,28 @@ export function resolveExperimentCode(experiment: ExperimentCodeSource): string
   return undefined
 }
 
+// Mirrors vue-router's LocationQuery, whose array members are `string | null`.
+// Declaring `string[]` here made the helper reject the very type every caller
+// passes it, so keep this assignable from LocationQuery without importing
+// vue-router (the SDK does not depend on it).
+type RouteQueryValue = string | null | undefined | readonly (string | null | undefined)[]
+type RouteQueryLike = Record<string, RouteQueryValue>
+
+/**
+ * Reads the experiment id a deep link was opened with.
+ *
+ * Returns an id and never a label: a display name belongs to the platform, so
+ * callers must resolve it (see `useExperimentStore().selectById`) rather than
+ * derive one from the query or the id itself.
+ */
+export function experimentIdFromRoute(query: RouteQueryLike): number | null {
+  const raw = query.experiment_id ?? query.experimentId
+  const value = Array.isArray(raw) ? raw.find(item => typeof item === 'string') : raw
+  if (typeof value !== 'string' || !value) return null
+  const id = Number(value)
+  return Number.isInteger(id) && id > 0 ? id : null
+}
+
 export const DATE_PRESET_OPTIONS: SelectOption<string>[] = [
   { value: '', label: 'Any time' },
   { value: 'last_7_days', label: 'Last 7 days' },

package/src/composables/index.ts

@@ -169,6 +169,7 @@ export {
   formatExperimentStatus,
   getExperimentStatusVariant,
   resolveExperimentCode,
+  experimentIdFromRoute,
   datePresetToISO,
   EXPERIMENT_STATUS_OPTIONS,
   EXPERIMENT_STATUS_VARIANT_MAP,
@@ -203,8 +204,6 @@ export {
 export {
   useAppExperiment,
   APP_EXPERIMENT_KEY,
-  type AppExperimentRecord,
-  type AppExperimentSource,
   type UseAppExperimentOptions,
   type UseAppExperimentReturn,
   type AppExperimentState,

package/src/composables/useAppExperiment.ts

@@ -1,7 +1,6 @@
 import {
   ref,
   computed,
-  readonly,
   provide,
   toValue,
   watch,
@@ -11,21 +10,14 @@ import {
   type InjectionKey,
 } from 'vue'
 import type { ExperimentSummary, ExperimentStatus } from '../types'
+import { useExperimentStore } from '../stores/experiment'
 import { resolveExperimentCode } from './experiment-utils'
 
-export type AppExperimentRecord = Pick<ExperimentSummary, 'id' | 'name' | 'status' | 'experiment_code'>
-
-export type AppExperimentSource =
-  | AppExperimentRecord
-  | null
-  | undefined
-  | Ref<AppExperimentRecord | null | undefined>
-  | ComputedRef<AppExperimentRecord | null | undefined>
-  | (() => AppExperimentRecord | null | undefined)
-
 export interface UseAppExperimentOptions {
-  /** Current experiment source to mirror into the app shell. Accepts a value, ref, computed, or getter. */
-  experiment?: AppExperimentSource
+  /**
+   * Called when the shared store adopts an experiment — a modal selection or a
+   * resolved deep link. The record always comes from the platform.
+   */
   onSelect?: (experiment: ExperimentSummary) => void | Promise<void>
   onSave?: () => string | null | Promise<string | null>
   onDetach?: () => void
@@ -37,6 +29,10 @@ export interface AppExperimentPopoverBinding {
   experimentName?: string
   experimentCode?: string
   experimentStatus?: ExperimentStatus
+  /** An experiment is bound but its record has not arrived yet. */
+  isResolving: boolean
+  /** Resolution failed; the binding is kept so the user can retry or detach. */
+  error?: string
   showSave: boolean
   showDetach: boolean
   saveDisabled: boolean
@@ -51,26 +47,27 @@ export interface AppExperimentSelectorModalBinding {
 }
 
 export interface UseAppExperimentReturn {
-  set: (experiment: AppExperimentRecord) => void
-  clear: () => void
-  experimentName: Readonly<Ref<string | undefined>>
-  experimentCode: Readonly<Ref<string | undefined>>
-  experimentStatus: Readonly<Ref<ExperimentStatus | undefined>>
-  experimentId: Readonly<Ref<number | null>>
+  experimentName: ComputedRef<string | undefined>
+  experimentCode: ComputedRef<string | undefined>
+  experimentStatus: ComputedRef<ExperimentStatus | undefined>
+  experimentId: ComputedRef<number | null>
+  isResolving: ComputedRef<boolean>
+  error: ComputedRef<string | null>
   popover: ComputedRef<AppExperimentPopoverBinding>
   selectorModal: ComputedRef<AppExperimentSelectorModalBinding>
   openModal: () => void
   closeModal: () => void
-  handleSelect: (experiment: ExperimentSummary) => void
   handleSave: () => Promise<void>
   handleDetach: () => void
 }
 
 export interface AppExperimentState {
-  experimentName: Ref<string | undefined>
-  experimentCode: Ref<string | undefined>
-  experimentStatus: Ref<ExperimentStatus | undefined>
-  experimentId: Ref<number | null>
+  experimentName: ComputedRef<string | undefined>
+  experimentCode: ComputedRef<string | undefined>
+  experimentStatus: ComputedRef<ExperimentStatus | undefined>
+  experimentId: ComputedRef<number | null>
+  isResolving: ComputedRef<boolean>
+  error: ComputedRef<string | null>
   showModal: Ref<boolean>
   saveLoading: Ref<boolean>
   saveSuccessMessage: Ref<string | undefined>
@@ -82,25 +79,41 @@ export interface AppExperimentState {
   popover: ComputedRef<AppExperimentPopoverBinding>
   selectorModal: ComputedRef<AppExperimentSelectorModalBinding>
   openModal: () => void
-  handleSelect: (experiment: ExperimentSummary) => void
   handleSave: () => Promise<void>
   handleDetach: () => void
 }
 
 export const APP_EXPERIMENT_KEY: InjectionKey<AppExperimentState> = Symbol('app-experiment')
 
-/** Manages the current experiment selection, save flow, and detach action for a plugin's AppTopBar app shell. */
+/**
+ * Projects the current experiment from the shared store into an AppTopBar app
+ * shell, and owns the shell-local concerns the store has no opinion on: the
+ * selector modal's open state and the save flow.
+ *
+ * The composable never writes a selection of its own. `ExperimentSelectorModal`
+ * commits to the store and this reads back, so a displayed name can only ever
+ * have come from the platform.
+ */
 export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppExperimentReturn {
-  const experimentName = ref<string | undefined>()
-  const experimentCode = ref<string | undefined>()
-  const experimentStatus = ref<ExperimentStatus | undefined>()
-  const experimentId = ref<number | null>(null)
+  const store = useExperimentStore()
+
   const showModal = ref(false)
   const saveLoading = ref(false)
   const saveSuccessMessage = ref<string | undefined>()
 
   let successTimer: ReturnType<typeof setTimeout> | null = null
 
+  const experimentName = computed(() => store.current?.name)
+  const experimentCode = computed(() =>
+    store.current ? resolveExperimentCode(store.current) : undefined,
+  )
+  const experimentStatus = computed(() => store.current?.status)
+  // Set while resolving and after a failed resolve, so the shell can tell
+  // "nothing selected" apart from "selected but not resolved".
+  const experimentId = computed(() => store.currentId)
+  const isResolving = computed(() => store.isResolving)
+  const error = computed(() => store.error)
+
   const showSave = ref(!!options.onSave)
   const showDetach = computed(() => experimentId.value !== null)
   const saveDisabled = computed(() => toValue(options.saveDisabled) ?? false)
@@ -109,6 +122,8 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     experimentName: experimentName.value,
     experimentCode: experimentCode.value,
     experimentStatus: experimentStatus.value,
+    isResolving: isResolving.value,
+    error: error.value ?? undefined,
     showSave: showSave.value,
     showDetach: showDetach.value,
     saveDisabled: saveDisabled.value,
@@ -121,31 +136,12 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     currentExperimentId: experimentId.value,
   }))
 
-  function set(experiment: AppExperimentRecord) {
-    experimentId.value = experiment.id
-    experimentName.value = experiment.name
-    experimentCode.value = resolveExperimentCode(experiment)
-    experimentStatus.value = experiment.status
-  }
-
-  function clear() {
-    experimentId.value = null
-    experimentName.value = undefined
-    experimentCode.value = undefined
-    experimentStatus.value = undefined
-  }
-
-  if (options.experiment !== undefined) {
+  if (options.onSelect) {
     watch(
-      () => toValue(options.experiment),
+      () => store.current,
       (experiment) => {
-        if (experiment) {
-          set(experiment)
-        } else {
-          clear()
-        }
+        if (experiment) void options.onSelect?.(experiment)
       },
-      { immediate: true },
     )
   }
 
@@ -157,12 +153,6 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     showModal.value = false
   }
 
-  function handleSelect(experiment: ExperimentSummary) {
-    set(experiment)
-    showModal.value = false
-    options.onSelect?.(experiment)
-  }
-
   async function handleSave() {
     if (!options.onSave || saveLoading.value) return
     saveLoading.value = true
@@ -182,7 +172,7 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
   }
 
   function handleDetach() {
-    clear()
+    store.clear()
     options.onDetach?.()
   }
 
@@ -195,6 +185,8 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     experimentCode,
     experimentStatus,
     experimentId,
+    isResolving,
+    error,
     showModal,
     saveLoading,
     saveSuccessMessage,
@@ -206,7 +198,6 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     selectorModal,
     openModal,
     closeModal,
-    handleSelect,
     handleSave,
     handleDetach,
   }
@@ -214,17 +205,16 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
   provide(APP_EXPERIMENT_KEY, state)
 
   return {
-    set,
-    clear,
-    experimentName: readonly(experimentName),
-    experimentCode: readonly(experimentCode),
-    experimentStatus: readonly(experimentStatus),
-    experimentId: readonly(experimentId),
+    experimentName,
+    experimentCode,
+    experimentStatus,
+    experimentId,
+    isResolving,
+    error,
     popover,
     selectorModal,
     openModal,
     closeModal,
-    handleSelect,
     handleSave,
     handleDetach,
   }

package/src/composables/useAuth.ts

@@ -6,7 +6,7 @@ import type { AuthConfig, UserInfo, LoginResponse, TokenVerifyResponse, UpdatePr
 import type { RoleInfo } from '../permissions'
 
 interface UserResponse {
-  id: string
+  id: number
   username: string
   shortname: string | null
   email: string | null

package/src/composables/useExperimentSelector.ts

@@ -97,6 +97,7 @@ export function useExperimentSelector(
   const error = request.error
   const lastLoadedAt = request.lastLoadedAt
   const page = ref(0)
+  let fetchGeneration = 0
 
   // Sort: combined key like "created_at:desc"
   const sortKey = ref<string>('created_at:desc')
@@ -201,9 +202,11 @@ export function useExperimentSelector(
     return await api.get<ExperimentListResponse>(buildExperimentListUrl(typeFilter, skip, pageLimit))
   }
 
-  async function fetchScopedExperimentPage(): Promise<ExperimentListResponse> {
+  async function fetchScopedExperimentPage(
+    requestedPage: number,
+  ): Promise<ExperimentListResponse> {
     const scope = resolveExperimentTypeScope()
-    const pageSkip = page.value * limit
+    const pageSkip = requestedPage * limit
 
     if (scope.kind === 'blocked') {
       return { experiments: [], total: 0 }
@@ -229,24 +232,39 @@ export function useExperimentSelector(
   }
 
   async function fetchExperiments(): Promise<void> {
+    const generation = ++fetchGeneration
+    const requestedPage = page.value
+    isLoading.value = true
+    request.clearError()
     try {
-      await request.run(async () => {
-        const data = await fetchScopedExperimentPage()
-        if (page.value === 0) {
-          experiments.value = data.experiments
-        } else {
-          experiments.value = [...experiments.value, ...data.experiments]
-        }
-        total.value = data.total
-      }, { success: 'load', errorMessage: 'Failed to fetch experiments' })
-    } catch {
-      if (page.value === 0) {
+      const data = await fetchScopedExperimentPage(requestedPage)
+      if (generation !== fetchGeneration) return
+      if (requestedPage === 0) {
+        experiments.value = data.experiments
+      } else {
+        experiments.value = [...experiments.value, ...data.experiments]
+      }
+      total.value = data.total
+      request.markLoaded()
+    } catch (err) {
+      if (generation !== fetchGeneration) return
+      request.setError(err, 'Failed to fetch experiments')
+      if (requestedPage === 0) {
         experiments.value = []
         total.value = 0
       }
+    } finally {
+      if (generation === fetchGeneration) {
+        isLoading.value = false
+      }
     }
   }
 
+  function invalidateFetch(): void {
+    fetchGeneration += 1
+    isLoading.value = false
+  }
+
   async function fetchFilterOptions(): Promise<void> {
     if (filterOptionsFetched) return
     filterOptionsFetched = true
@@ -298,6 +316,7 @@ export function useExperimentSelector(
   }
 
   function clear(): void {
+    invalidateFetch()
     selectedExperiment.value = null
     filters.search = undefined
     filters.status = undefined
@@ -329,6 +348,19 @@ export function useExperimentSelector(
     })
   })
 
+  watch(
+    () => [
+      filters.search,
+      filters.status,
+      filters.project,
+      filters.experimentType,
+      filters.datePreset,
+      sortKey.value,
+    ],
+    () => invalidateFetch(),
+    { flush: 'sync' },
+  )
+
   const searchWatch = useDebouncedWatch(
     () => filters.search,
     () => {