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

package/src/components/ArtifactSelectorModal.story.vue

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import { ref, nextTick, onMounted, onUnmounted } from 'vue'
+import type { InternalAxiosRequestConfig } from 'axios'
+import ArtifactSelectorModal from './ArtifactSelectorModal.vue'
+import {
+  ANALYSIS_FILE_ARTIFACT_SCHEMA,
+  type AnalysisArtifactSummary,
+} from '../types/analysisArtifactTypes'
+
+// -- Mock data: artifacts from two analysis plugins on one experiment --
+const mockArtifacts: AnalysisArtifactSummary[] = [
+  {
+    id: 1,
+    experiment_id: 42,
+    plugin_id: 'drp',
+    artifact_key: 'dose-response-fit',
+    display_name: 'Doxorubicin IC50 fit',
+    note: 'Four-parameter logistic, R² = 0.994',
+    status: 'active',
+    result_keys: ['curves', 'ic50', 'summary'],
+    created_at: '2026-07-01T10:00:00Z',
+    updated_at: '2026-07-02T09:15:00Z',
+  },
+  {
+    id: 2,
+    experiment_id: 42,
+    plugin_id: 'drp',
+    artifact_key: 'synergy-matrix',
+    display_name: 'DOX + 5-FU synergy matrix',
+    status: 'active',
+    result_keys: ['bliss', 'hsa'],
+    created_at: '2026-07-01T11:30:00Z',
+    updated_at: '2026-07-01T11:30:00Z',
+  },
+  {
+    id: 3,
+    experiment_id: 42,
+    plugin_id: 'drp',
+    artifact_key: 'qc-report',
+    display_name: 'QC report (PDF)',
+    note: 'Generated after plate re-read',
+    status: 'active',
+    result_keys: ['schema_version', 'kind', 'filename', 'file'],
+    created_at: '2026-07-02T14:00:00Z',
+    updated_at: '2026-07-02T14:00:00Z',
+  },
+  {
+    id: 4,
+    experiment_id: 42,
+    plugin_id: 'ms-uploader',
+    artifact_key: 'peak-table',
+    display_name: 'Peak table (raw)',
+    status: 'active',
+    result_keys: ['peak_data', 'sample_names', 'upload_info'],
+    created_at: '2026-06-28T08:00:00Z',
+    updated_at: '2026-06-28T08:00:00Z',
+  },
+  {
+    id: 5,
+    experiment_id: 42,
+    plugin_id: 'ms-uploader',
+    artifact_key: 'chromatogram',
+    display_name: 'TIC chromatogram (PNG)',
+    status: 'active',
+    result_keys: ['schema_version', 'kind', 'filename', 'file'],
+    created_at: '2026-06-28T08:05:00Z',
+    updated_at: '2026-06-28T08:05:00Z',
+  },
+  {
+    id: 6,
+    experiment_id: 42,
+    plugin_id: 'drp',
+    artifact_key: 'old-fit',
+    display_name: 'Superseded IC50 fit',
+    note: 'Replaced after outlier removal',
+    status: 'archived',
+    result_keys: ['curves', 'ic50'],
+    created_at: '2026-06-20T09:00:00Z',
+    updated_at: '2026-06-25T16:00:00Z',
+    archived_at: '2026-06-25T16:00:00Z',
+    archived_by: 3,
+  },
+]
+
+const mockDetails: Record<number, Record<string, unknown>> = {
+  3: {
+    schema_version: ANALYSIS_FILE_ARTIFACT_SCHEMA,
+    kind: 'report',
+    filename: 'qc-report.pdf',
+    file: { uri: 'mint-object://experiments/42/plugins/drp/analysis-artifacts/qc-report/qc-report.pdf' },
+  },
+  5: {
+    schema_version: ANALYSIS_FILE_ARTIFACT_SCHEMA,
+    kind: 'plot',
+    filename: 'tic.png',
+    file: { uri: 'mint-object://experiments/42/plugins/ms-uploader/analysis-artifacts/chromatogram/tic.png' },
+  },
+}
+
+// -- Intercept API calls to return mock data --
+// Ejected on unmount so remounts and HMR don't stack interceptors on the shared client.
+let interceptorId: number | null = null
+let ejectInterceptor: (() => void) | null = null
+
+onUnmounted(() => {
+  ejectInterceptor?.()
+})
+
+onMounted(async () => {
+  const { useApi } = await import('../composables/useApi')
+  const { client } = useApi()
+  const state = mockArtifacts.map((artifact) => ({ ...artifact }))
+
+  function respond(config: InternalAxiosRequestConfig, data: unknown) {
+    return () => Promise.resolve({
+      data,
+      status: 200,
+      statusText: 'OK',
+      headers: {},
+      config,
+    })
+  }
+
+  interceptorId = client.interceptors.request.use((config) => {
+    const url = config.url ?? ''
+    if (!url.includes('/analysis-artifacts')) return config
+
+    const method = (config.method ?? 'get').toLowerCase()
+    const idMatch = url.match(/\/analysis-artifacts\/(\d+)/)
+    const artifactId = idMatch ? Number(idMatch[1]) : undefined
+    const artifact = state.find((row) => row.id === artifactId)
+
+    if (method === 'post' && artifact) {
+      artifact.status = url.endsWith('/archive') ? 'archived' : 'active'
+      artifact.archived_at = url.endsWith('/archive') ? new Date().toISOString() : null
+      config.adapter = respond(config, { ...artifact })
+      return config
+    }
+
+    if (method === 'patch' && artifact) {
+      Object.assign(artifact, config.data ? JSON.parse(String(config.data)) : {})
+      config.adapter = respond(config, { ...artifact })
+      return config
+    }
+
+    if (artifactId && artifact) {
+      config.adapter = respond(config, {
+        ...artifact,
+        result: mockDetails[artifactId] ?? { summary: { rows: 96 } },
+        tree: [],
+        summary: null,
+      })
+      return config
+    }
+
+    const params = new URLSearchParams(url.split('?')[1] ?? '')
+    const includeArchived = params.get('include_archived') === 'true'
+    const rows = includeArchived ? state : state.filter((row) => row.status === 'active')
+    config.adapter = respond(config, { artifacts: rows.map((row) => ({ ...row })) })
+    return config
+  })
+
+  ejectInterceptor = () => {
+    if (interceptorId !== null) {
+      client.interceptors.request.eject(interceptorId)
+      interceptorId = null
+    }
+  }
+
+  await nextTick()
+  isOpen.value = true
+})
+
+// -- Story state --
+const isOpen = ref(false)
+const isOpenScoped = ref(false)
+const isOpenArchived = ref(false)
+const isOpenEmpty = ref(false)
+const selectedArtifact = ref<AnalysisArtifactSummary | null>(null)
+
+function handleSelect(artifact: AnalysisArtifactSummary) {
+  selectedArtifact.value = artifact
+}
+</script>
+
+<template>
+  <Story title="Experiment/ArtifactSelectorModal">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+            @click="isOpen = true"
+          >
+            Open Artifact Selector
+          </button>
+
+          <div
+            v-if="selectedArtifact"
+            style="margin-top: 1rem; padding: 0.75rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px; display: flex; align-items: center; gap: 0.5rem;"
+          >
+            <span style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8);">Selected:</span>
+            <code style="font-size: 0.75rem; color: var(--text-secondary, #475569);">
+              {{ selectedArtifact.plugin_id }}/{{ selectedArtifact.artifact_key }}
+            </code>
+            <span style="font-size: 0.875rem; font-weight: 500; color: var(--text-primary, #1e293b);">
+              {{ selectedArtifact.display_name }}
+            </span>
+          </div>
+
+          <ArtifactSelectorModal
+            v-model="isOpen"
+            :experiment-id="42"
+            :title="state.title"
+            :include-archived="state.includeArchived"
+            :fetch-detail-on-select="state.fetchDetailOnSelect"
+            :current-artifact-id="selectedArtifact?.id ?? null"
+            @select="handleSelect"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="isOpen" title="Open" />
+        <HstText v-model="state.title" title="Title" />
+        <HstCheckbox v-model="state.includeArchived" title="Include archived" />
+        <HstCheckbox v-model="state.fetchDetailOnSelect" title="Fetch detail on select" />
+      </template>
+    </Variant>
+
+    <Variant title="With Archived">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Opens with archived artifacts visible. Archived rows are muted and offer Restore.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenArchived = true"
+        >
+          Open With Archived
+        </button>
+
+        <ArtifactSelectorModal
+          v-model="isOpenArchived"
+          :experiment-id="42"
+          :include-archived="true"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Single Plugin Scoped">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Scoped to the <code>ms-uploader</code> plugin, so the plugin filter is hidden.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenScoped = true"
+        >
+          Open Scoped Selector
+        </button>
+
+        <ArtifactSelectorModal
+          v-model="isOpenScoped"
+          :experiment-id="42"
+          plugin-id="ms-uploader"
+          title="Select Peak Data"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Scoped to a plugin with no artifacts, showing the empty state.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenEmpty = true"
+        >
+          Open Selector (Empty)
+        </button>
+
+        <ArtifactSelectorModal
+          v-model="isOpenEmpty"
+          :experiment-id="42"
+          plugin-id="nonexistent-plugin"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/ArtifactSelectorModal.vue

@@ -0,0 +1,333 @@
+<script setup lang="ts">
+/**
+ * Modal for browsing and selecting an analysis artifact of an experiment, with filters and keyboard nav.
+ *
+ * @example Recommended
+ * ```vue
+ * <ArtifactSelectorModal v-model="open" :experiment-id="experimentId" @select="selectArtifact" />
+ * ```
+ */
+import { computed, ref, watch, nextTick } from 'vue'
+import type { ModalSize } from '../types'
+import type {
+  AnalysisArtifactDetail,
+  AnalysisArtifactStatusFilter,
+  AnalysisArtifactSummary,
+} from '../types/analysisArtifactTypes'
+import { useAnalysisArtifacts } from '../composables/useAnalysisArtifacts'
+import { formatExperimentDate } from '../composables/experiment-utils'
+import { getInjectedPlatformContext } from '../composables/platformContextHelpers'
+import { hasAllPermissions } from '../permissions'
+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'
+
+interface Props {
+  modelValue: boolean
+  /** Experiment id override; defaults to platform injection or URL. */
+  experimentId?: number | null
+  /** Scope to a single owning plugin; omit to show all plugins. */
+  pluginId?: string | null
+  /** Highlights the currently used artifact. */
+  currentArtifactId?: number | null
+  /** Start with archived artifacts visible. */
+  includeArchived?: boolean
+  /** Fetch the full detail before emitting selectDetail. */
+  fetchDetailOnSelect?: boolean
+  title?: string
+  size?: ModalSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  experimentId: null,
+  pluginId: null,
+  currentArtifactId: null,
+  includeArchived: false,
+  fetchDetailOnSelect: false,
+  title: 'Select Analysis Artifact',
+  size: 'full',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  select: [artifact: AnalysisArtifactSummary]
+  selectDetail: [detail: AnalysisArtifactDetail]
+  archive: [artifact: AnalysisArtifactSummary]
+  restore: [artifact: AnalysisArtifactSummary]
+}>()
+
+const {
+  artifacts,
+  visibleArtifacts,
+  isLoading,
+  isMutating,
+  error,
+  search,
+  statusFilter,
+  pluginFilter,
+  list,
+  getDetail,
+  archive,
+  restore,
+} = useAnalysisArtifacts({
+  experimentId: () => props.experimentId ?? undefined,
+  pluginId: () => props.pluginId,
+  includeArchived: () => props.includeArchived,
+})
+
+const injectedContext = getInjectedPlatformContext()
+// Without injected user info (standalone/dev mode) the backend stays the authority.
+const canManage = computed(() => {
+  const user = injectedContext?.user
+  return user ? hasAllPermissions(user, ['experiments.edit']) : true
+})
+
+const STATUS_FILTER_OPTIONS: Array<{ value: AnalysisArtifactStatusFilter; label: string }> = [
+  { value: 'active', label: 'Active' },
+  { value: 'archived', label: 'Archived' },
+  { value: 'all', label: 'All statuses' },
+]
+
+const pluginFilterOptions = computed(() => [
+  { value: '', label: 'All plugins' },
+  ...[...new Set(artifacts.value.map((artifact) => artifact.plugin_id))]
+    .sort()
+    .map((pluginId) => ({ value: pluginId, label: pluginId })),
+])
+const canChoosePlugin = computed(
+  () => !props.pluginId && pluginFilterOptions.value.length > 2,
+)
+
+const activeIndex = ref(-1)
+const listRef = ref<HTMLElement | null>(null)
+
+const LISTBOX_ID = 'mint-artifact-selector-listbox'
+function optionId(artifact: AnalysisArtifactSummary): string {
+  return `mint-artifact-option-${artifact.id}`
+}
+const activeDescendantId = computed(() => {
+  const artifact = visibleArtifacts.value[activeIndex.value]
+  return activeIndex.value >= 0 && artifact ? optionId(artifact) : undefined
+})
+const hasResults = computed(
+  () => !isLoading.value && !error.value && visibleArtifacts.value.length > 0,
+)
+
+function statusVariant(status: string): 'success' | 'warning' {
+  return status === 'archived' ? 'warning' : 'success'
+}
+
+function formatArtifactDate(artifact: AnalysisArtifactSummary): string {
+  const date = artifact.updated_at ?? artifact.created_at
+  return date ? formatExperimentDate(date) : ''
+}
+
+async function handleSelect(artifact: AnalysisArtifactSummary): Promise<void> {
+  if (props.fetchDetailOnSelect) {
+    const detail = await getDetail(artifact.id)
+    // Stay open on failure: closing would look like a successful pick while the
+    // consumer waiting on selectDetail got nothing.
+    if (!detail) return
+    emit('selectDetail', detail)
+  }
+  emit('select', artifact)
+  emit('update:modelValue', false)
+}
+
+// Emit what the backend returned, not the row we started from: the pre-mutation
+// object still carries the old status.
+async function handleArchive(artifact: AnalysisArtifactSummary): Promise<void> {
+  const archived = await archive(artifact.id)
+  if (archived) emit('archive', archived)
+}
+
+async function handleRestore(artifact: AnalysisArtifactSummary): Promise<void> {
+  const restored = await restore(artifact.id)
+  if (restored) emit('restore', restored)
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  const rows = visibleArtifacts.value
+  if (!rows.length) return
+  // Let the row's own Archive/Restore button handle its keys natively.
+  if ((event.target as HTMLElement | null)?.closest('.mint-artifact-selector__action')) return
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      activeIndex.value = Math.min(activeIndex.value + 1, rows.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 < rows.length) {
+        void handleSelect(rows[activeIndex.value])
+      }
+      break
+  }
+}
+
+function scrollActiveIntoView(): void {
+  nextTick(() => {
+    const row = listRef.value?.querySelector('.mint-artifact-selector__row--focused')
+    row?.scrollIntoView({ block: 'nearest' })
+  })
+}
+
+watch(visibleArtifacts, () => { activeIndex.value = -1 })
+
+watch(
+  () => props.modelValue,
+  (isOpen) => {
+    if (isOpen) {
+      activeIndex.value = -1
+      statusFilter.value = props.includeArchived ? 'all' : 'active'
+      void list()
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <BaseModal
+    :model-value="modelValue"
+    :title="title"
+    :size="size"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div class="mint-artifact-selector" @keydown="handleKeydown">
+      <!-- Filter row -->
+      <div class="mint-artifact-selector__filters-row">
+        <div class="mint-artifact-selector__search">
+          <BaseInput
+            v-model="search"
+            placeholder="Search artifacts..."
+            size="sm"
+            type="search"
+            role="combobox"
+            aria-label="Search analysis artifacts"
+            :aria-expanded="hasResults"
+            :aria-controls="LISTBOX_ID"
+            :aria-activedescendant="activeDescendantId"
+          />
+        </div>
+        <div class="mint-artifact-selector__filter-select">
+          <BaseSelect
+            :model-value="statusFilter"
+            :options="STATUS_FILTER_OPTIONS"
+            size="sm"
+            aria-label="Filter by status"
+            @update:model-value="v => statusFilter = v as AnalysisArtifactStatusFilter"
+          />
+        </div>
+        <div v-if="canChoosePlugin" class="mint-artifact-selector__filter-select">
+          <BaseSelect
+            :model-value="pluginFilter ?? ''"
+            :options="pluginFilterOptions"
+            size="sm"
+            aria-label="Filter by plugin"
+            @update:model-value="v => pluginFilter = String(v) || null"
+          />
+        </div>
+      </div>
+
+      <!-- Loading skeleton -->
+      <div v-if="isLoading" class="mint-artifact-selector__skeleton">
+        <div v-for="n in 4" :key="n" class="mint-artifact-selector__skeleton-row">
+          <div class="mint-artifact-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-artifact-selector__error">
+        {{ error }}
+      </div>
+
+      <!-- Empty -->
+      <EmptyState
+        v-else-if="visibleArtifacts.length === 0"
+        title="No analysis artifacts found"
+        description="Artifacts appear here once an analysis saves results for this experiment."
+        size="sm"
+      />
+
+      <!-- Artifact list -->
+      <div
+        v-else
+        :id="LISTBOX_ID"
+        ref="listRef"
+        class="mint-artifact-selector__list"
+        role="listbox"
+        aria-label="Analysis artifacts"
+      >
+        <div
+          v-for="(artifact, idx) in visibleArtifacts"
+          :id="optionId(artifact)"
+          :key="artifact.id"
+          class="mint-artifact-selector__row"
+          role="option"
+          :aria-selected="artifact.id === currentArtifactId"
+          :class="{
+            'mint-artifact-selector__row--active': artifact.id === currentArtifactId,
+            'mint-artifact-selector__row--focused': idx === activeIndex,
+            'mint-artifact-selector__row--archived': artifact.status === 'archived',
+          }"
+          @click="handleSelect(artifact)"
+          @mouseenter="activeIndex = idx"
+        >
+          <div class="mint-artifact-selector__row-content">
+            <div class="mint-artifact-selector__name">
+              {{ artifact.display_name }}
+              <code class="mint-artifact-selector__key">{{ artifact.artifact_key }}</code>
+            </div>
+            <div class="mint-artifact-selector__meta">
+              <span class="mint-artifact-selector__plugin">{{ artifact.plugin_id }}</span>
+              <span>{{ artifact.result_keys.length }} result{{ artifact.result_keys.length === 1 ? '' : 's' }}</span>
+              <span>{{ formatArtifactDate(artifact) }}</span>
+            </div>
+          </div>
+          <div class="mint-artifact-selector__row-side">
+            <BasePill :variant="statusVariant(artifact.status)" size="sm">
+              {{ artifact.status }}
+            </BasePill>
+            <button
+              v-if="canManage && artifact.status === 'active'"
+              type="button"
+              class="mint-artifact-selector__action"
+              :disabled="isMutating"
+              @click.stop="handleArchive(artifact)"
+            >
+              Archive
+            </button>
+            <button
+              v-else-if="canManage && artifact.status === 'archived'"
+              type="button"
+              class="mint-artifact-selector__action"
+              :disabled="isMutating"
+              @click.stop="handleRestore(artifact)"
+            >
+              Restore
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </BaseModal>
+</template>
+
+<style>
+@import '../styles/components/artifact-selector-modal.css';
+</style>