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

package/src/components/ArtifactSelectorModal.story.vue

@@ -1,295 +0,0 @@
-<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

@@ -1,333 +0,0 @@
-<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>