@morscherlab/mint-sdk 1.0.63 → 1.1.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.0.63",
+  "version": "1.1.0-beta.10",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",
@@ -54,7 +54,9 @@
     "src"
   ],
   "scripts": {
-    "build": "vue-tsc --noEmit && vite build && node scripts/check-package-exports.mjs",
+    "build": "vue-tsc --noEmit && bun run build:library && bun run build:generated-ui && node scripts/check-package-exports.mjs",
+    "build:library": "vite build",
+    "build:generated-ui": "vite build --config vite.generated-ui.config.ts",
     "check:exports": "node scripts/check-package-exports.mjs",
     "dev": "vite build --watch",
     "typecheck": "vue-tsc --noEmit",
@@ -81,13 +83,15 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "axios": "1.13.6"
+    "axios": "1.13.6",
+    "plotly.js-dist-min": "^3.7.0"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "1.0.0-beta.1",
     "@simplewebauthn/browser": "10.0.0",
     "@simplewebauthn/types": "10.0.0",
     "@types/node": "22.19.13",
+    "@types/plotly.js": "^3.0.10",
     "@vitejs/plugin-vue": "6.0.5",
     "@vue/test-utils": "2.4.6",
     "happy-dom": "15.11.7",

package/src/__tests__/components/BaseSelect.test.ts

@@ -3,6 +3,58 @@ import { describe, expect, it } from 'vitest'
 import BaseSelect from '../../components/BaseSelect.vue'
 
 describe('BaseSelect', () => {
+  it('forwards native attributes to the select instead of the wrapper', () => {
+    const wrapper = mount(BaseSelect, {
+      props: {
+        options: ['linear'],
+      },
+      attrs: {
+        id: 'curve-model',
+        name: 'curve-model',
+        'aria-label': 'Curve model',
+        'data-testid': 'curve-model-select',
+        class: 'curve-model-layout',
+        style: 'width: 12rem;',
+      },
+    })
+
+    const select = wrapper.get('select')
+
+    expect({
+      select: {
+        id: select.attributes('id'),
+        name: select.attributes('name'),
+        ariaLabel: select.attributes('aria-label'),
+        testId: select.attributes('data-testid'),
+        layoutClass: select.classes().includes('curve-model-layout'),
+      },
+      wrapper: {
+        id: wrapper.attributes('id'),
+        name: wrapper.attributes('name'),
+        ariaLabel: wrapper.attributes('aria-label'),
+        testId: wrapper.attributes('data-testid'),
+        layoutClass: wrapper.classes().includes('curve-model-layout'),
+        style: wrapper.attributes('style'),
+      },
+    }).toEqual({
+      select: {
+        id: 'curve-model',
+        name: 'curve-model',
+        ariaLabel: 'Curve model',
+        testId: 'curve-model-select',
+        layoutClass: false,
+      },
+      wrapper: {
+        id: undefined,
+        name: undefined,
+        ariaLabel: undefined,
+        testId: undefined,
+        layoutClass: true,
+        style: 'width: 12rem;',
+      },
+    })
+  })
+
   it('accepts string and number shorthand options', async () => {
     const wrapper = mount(BaseSelect, {
       props: {

package/src/__tests__/components/BaseToggle.test.ts

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseToggle from '../../components/BaseToggle.vue'
+
+describe('BaseToggle', () => {
+  it('uses ariaLabel for the switch name without changing the visual label', () => {
+    const wrapper = mount(BaseToggle, {
+      props: {
+        label: 'Enabled',
+        ariaLabel: 'Email notifications',
+      },
+    })
+
+    expect({
+      accessibleName: wrapper.get('[role="switch"]').attributes('aria-label'),
+      visualText: wrapper.text(),
+      wrapperAriaLabel: wrapper.attributes('aria-label'),
+    }).toEqual({
+      accessibleName: 'Email notifications',
+      visualText: 'Enabled',
+      wrapperAriaLabel: undefined,
+    })
+  })
+
+  it('keeps using the visual label as the default switch name', () => {
+    const wrapper = mount(BaseToggle, {
+      props: {
+        label: 'Enabled',
+      },
+    })
+
+    expect(wrapper.get('[role="switch"]').attributes('aria-label')).toBe('Enabled')
+  })
+
+  it('keeps the existing fallback name when no labels are provided', () => {
+    const wrapper = mount(BaseToggle)
+
+    expect(wrapper.get('[role="switch"]').attributes('aria-label')).toBe('Toggle')
+  })
+})

package/src/__tests__/components/GeneratedPathInput.test.ts

@@ -0,0 +1,132 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import ArtifactSelectorModal from '../../components/ArtifactSelectorModal.vue'
+import FileUploader from '../../components/FileUploader.vue'
+import GeneratedPathInput from '../../components/GeneratedPathInput.vue'
+import type { AnalysisArtifactDetail } from '../../types/analysisArtifactTypes'
+
+describe('GeneratedPathInput', () => {
+  beforeEach(() => {
+    Object.assign(window, {
+      __MINT_PLATFORM__: {
+        isIntegrated: true,
+        platformApiUrl: '/api',
+        theme: 'system',
+        currentExperimentId: 42,
+      },
+    })
+  })
+
+  afterEach(() => {
+    delete (window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__
+    vi.unstubAllGlobals()
+  })
+
+  it('should preserve selected directory paths for SDK staging', async () => {
+    const wrapper = mount(GeneratedPathInput, {
+      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+    })
+    const files = [new File(['a'], 'a.txt'), new File(['b'], 'b.txt')]
+
+    await wrapper.findComponent(FileUploader).vm.$emit(
+      'upload',
+      files,
+      'dataset',
+      ['dataset/a.txt', 'dataset/sub/b.txt'],
+    )
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toEqual({
+      kind: 'path',
+      files,
+      rootName: 'dataset',
+      relativePaths: ['dataset/a.txt', 'dataset/sub/b.txt'],
+    })
+  })
+
+  it('should emit one path selection per file when multiple paths are requested', async () => {
+    const wrapper = mount(GeneratedPathInput, {
+      props: { multiple: true },
+      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+    })
+    const files = [new File(['a'], 'a.txt'), new File(['b'], 'b.txt')]
+
+    await wrapper.findComponent(FileUploader).vm.$emit(
+      'upload',
+      files,
+      undefined,
+      ['a.txt', 'b.txt'],
+    )
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toEqual([
+      { kind: 'path', files: [files[0]], relativePaths: ['a.txt'] },
+      { kind: 'path', files: [files[1]], relativePaths: ['b.txt'] },
+    ])
+  })
+
+  it('should remove a file from the submitted value when the uploader removes it', async () => {
+    const wrapper = mount(GeneratedPathInput, {
+      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+    })
+    const uploader = wrapper.findComponent(FileUploader)
+    const file = new File(['a'], 'a.txt')
+
+    const input = uploader.get('input[type="file"]')
+    Object.defineProperty(input.element, 'files', { value: [file] })
+    await input.trigger('change')
+    await wrapper.setProps({
+      modelValue: { kind: 'path', files: [file], relativePaths: ['a.txt'] },
+    })
+    await wrapper.get('button[aria-label="Remove a.txt"]').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toBeNull()
+  })
+
+  it('should download a selected platform file artifact for staging', async () => {
+    const fetcher = vi.fn().mockResolvedValue(new Response('artifact-data', {
+      headers: { 'Content-Type': 'text/csv' },
+    }))
+    vi.stubGlobal('fetch', fetcher)
+    const wrapper = mount(GeneratedPathInput, {
+      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+    })
+    const detail = {
+      id: 7,
+      experiment_id: 42,
+      plugin_id: 'leaf',
+      artifact_key: 'matrix',
+      display_name: 'Matrix',
+      status: 'active',
+      result_keys: ['file'],
+      tree: [],
+      summary: null,
+      result: {
+        schema_version: 'mint.analysis_file.v1',
+        filename: 'matrix.csv',
+        file: {
+          key: 'analysis-artifacts/matrix/v1/matrix.csv',
+          plugin_id: 'leaf',
+          experiment_id: 42,
+        },
+      },
+    } satisfies AnalysisArtifactDetail
+
+    wrapper.findComponent(ArtifactSelectorModal).vm.$emit('selectDetail', detail)
+    await flushPromises()
+
+    const selection = wrapper.emitted('update:modelValue')?.at(-1)?.[0] as {
+      files: File[]
+      relativePaths: string[]
+    }
+    expect({
+      url: fetcher.mock.calls[0]?.[0],
+      filename: selection.files[0]?.name,
+      relativePaths: selection.relativePaths,
+    }).toEqual({
+      url: '/api/experiments/42/objects/analysis-artifacts/matrix/v1/matrix.csv?plugin_id=leaf&format=raw',
+      filename: 'matrix.csv',
+      relativePaths: ['matrix.csv'],
+    })
+  })
+})

package/src/__tests__/components/GeneratedPlotlyResult.test.ts

@@ -0,0 +1,117 @@
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import GeneratedPlotlyResult from '../../components/GeneratedPlotlyResult.vue'
+
+const plotly = vi.hoisted(() => ({
+  purge: vi.fn(),
+  react: vi.fn(),
+}))
+
+vi.mock('plotly.js-dist-min', () => ({ default: plotly }))
+
+async function mountAndRecover(
+  fallback?: { media_type: string; data: string },
+): Promise<VueWrapper> {
+  const wrapper = mount(GeneratedPlotlyResult, {
+    props: {
+      spec: { data: [] },
+      ...(fallback ? { fallback } : {}),
+    },
+  })
+  await flushPromises()
+
+  plotly.react.mockResolvedValue(undefined)
+  await wrapper.setProps({
+    spec: { data: [{ type: 'scatter', x: [1], y: [2] }] },
+  })
+  await flushPromises()
+
+  return wrapper
+}
+
+describe('GeneratedPlotlyResult', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    plotly.react.mockRejectedValue(new Error('<script>unsafe details</script>'))
+  })
+
+  it('should render a safe error when Plotly fails without a fallback', async () => {
+    const wrapper = mount(GeneratedPlotlyResult, {
+      props: { spec: { data: [] } },
+    })
+    await flushPromises()
+
+    expect(wrapper.get('[role="alert"]').text()).toBe('Unable to display this chart.')
+  })
+
+  it('should render the static image when Plotly fails with a fallback', async () => {
+    const wrapper = mount(GeneratedPlotlyResult, {
+      props: {
+        spec: { data: [] },
+        fallback: { media_type: 'image/png', data: 'cG5n' },
+      },
+    })
+    await flushPromises()
+
+    expect(wrapper.get('img').attributes('src')).toBe('data:image/png;base64,cG5n')
+  })
+
+  it('should not redraw an immutable result for nested spec mutations', async () => {
+    plotly.react.mockResolvedValue(undefined)
+    const wrapper = mount(GeneratedPlotlyResult, {
+      props: { spec: { data: [{ x: [1] }] } },
+    })
+    await flushPromises()
+
+    const spec = wrapper.props('spec') as { data: Array<{ x: number[] }> }
+    spec.data[0]!.x.push(2)
+    await nextTick()
+    await flushPromises()
+
+    expect(plotly.react).toHaveBeenCalledTimes(1)
+  })
+
+  it.each([
+    ['Heatmap', { type: 'heatmap', z: [[1, 2], [3, 4]] }],
+    ['Scatter3d', { type: 'scatter3d', x: [1], y: [2], z: [3] }],
+  ])('should pass a %s trace to the Plotly renderer', async (_name, trace) => {
+    plotly.react.mockResolvedValue(undefined)
+    mount(GeneratedPlotlyResult, {
+      props: { spec: { data: [trace] } },
+    })
+    await flushPromises()
+
+    expect(plotly.react).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      [trace],
+      {},
+      { responsive: true, displaylogo: false },
+    )
+  })
+
+  it('should retry Plotly when a new immutable spec follows a render failure', async () => {
+    await mountAndRecover()
+
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+  })
+
+  it('should remove the fallback after a new immutable spec renders successfully', async () => {
+    const wrapper = await mountAndRecover({ media_type: 'image/png', data: 'cG5n' })
+
+    expect(wrapper.find('img').exists()).toBe(false)
+  })
+
+  it('should remove the error after a new immutable spec renders successfully', async () => {
+    const wrapper = await mountAndRecover()
+
+    expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+  })
+
+  it('should restore the interactive chart after a new immutable spec renders successfully', async () => {
+    const wrapper = await mountAndRecover()
+
+    expect(wrapper.get('.mint-generated-result__plotly').isVisible()).toBe(true)
+  })
+})

package/src/__tests__/components/GeneratedPluginView.test.ts

@@ -0,0 +1,240 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import { computed, ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import GeneratedPluginView from '../../components/GeneratedPluginView.vue'
+import GeneratedResultRenderer from '../../components/GeneratedResultRenderer.vue'
+import JobsStatusTray from '../../components/JobsStatusTray.vue'
+import PluginWorkspaceView from '../../components/PluginWorkspaceView.vue'
+
+const generated = vi.hoisted(() => ({
+  initialize: vi.fn(),
+  submit: vi.fn(),
+  loadResult: vi.fn(),
+  resultForJob: vi.fn(),
+  options: undefined as unknown,
+  jobs: [] as Array<Record<string, unknown>>,
+}))
+
+vi.mock('../../composables/useGeneratedAnalysis', async () => {
+  const { computed, ref, shallowRef } = await import('vue')
+  return {
+    useGeneratedAnalysis: (options: unknown) => {
+      generated.options = options
+      const jobs = shallowRef(generated.jobs)
+      return ({
+      manifest: shallowRef({
+        schema_version: '1',
+        plugin: {
+          name: 'Demo', version: '1.0.0', description: 'Demo plugin', routes_prefix: '/demo',
+        },
+        ui: { title: 'Demo analysis', description: 'Backend-only workspace' },
+        jobs: [
+          {
+            id: 'run',
+            title: 'Run analysis',
+            description: 'Analyze one dataset',
+            cpu: 2,
+            input_schema: {
+              type: 'object',
+              properties: { threshold: { type: 'number', title: 'Threshold', default: 2.5 } },
+            },
+            output_schema: {},
+          },
+          {
+            id: 'sync',
+            title: 'Sync service',
+            description: 'Synchronize remote metadata',
+            cpu: 0,
+            lifecycle: 'service',
+            profile: { kind: 'service', timeoutSeconds: 60, maxConcurrency: 2 },
+            input_schema: { type: 'object', properties: {} },
+            output_schema: {},
+          },
+        ],
+      }),
+      session: shallowRef({ id: 'session-1' }),
+      jobs,
+      latestResult: computed(() => ({ kind: 'text', text: 'complete' })),
+      isLoading: ref(false),
+      isSubmitting: ref(false),
+      error: shallowRef(null),
+      initialize: generated.initialize,
+      submit: generated.submit,
+      loadResult: generated.loadResult,
+      resultForJob: generated.resultForJob,
+      refreshJobs: vi.fn(),
+      jobsAdapter: {},
+      })
+    },
+  }
+})
+
+vi.mock('../../composables/usePlatformContext', () => ({
+  usePlatformContext: vi.fn(() => ({
+    isIntegrated: computed(() => false),
+    context: ref({ isIntegrated: false, theme: 'system' }),
+    plugin: computed(() => undefined),
+    user: computed(() => undefined),
+    theme: computed(() => 'system'),
+    features: computed(() => undefined),
+    navigate: vi.fn(),
+    notify: vi.fn(),
+    sendToPlatform: vi.fn(),
+  })),
+}))
+
+vi.mock('../../composables/useTheme', () => ({
+  useTheme: vi.fn(() => ({ isDark: ref(false), theme: ref('light'), toggleTheme: vi.fn() })),
+}))
+
+describe('GeneratedPluginView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    const baseJob = {
+      kind: 'analysis',
+      name: 'Run analysis',
+      status: 'completed',
+      progress: {
+        current_file: 0, total_files: 0, current_filename: null, percent: 100, message: '', stage: 'completed',
+      },
+      queue_position: 0,
+      warnings: [],
+      error: null,
+      output_path: null,
+      save_path: null,
+      session_id: 'session-1',
+      folders: [],
+      folder_path: null,
+      user_id: 'user-1',
+      owner_user_id: 'user-1',
+      experiment_id: null,
+      extraction_result_id: null,
+      metadata: { definition_id: 'run', has_result: true },
+      created_at: '',
+      started_at: '',
+      completed_at: '',
+      can_cancel: false,
+      can_delete: true,
+    }
+    generated.jobs = [
+      { ...baseJob, id: 'job-1', job_id: 'job-1' },
+      { ...baseJob, id: 'job-2', job_id: 'job-2', session_id: 'shared-session' },
+    ]
+    generated.initialize.mockResolvedValue(undefined)
+    generated.submit.mockResolvedValue(undefined)
+    generated.loadResult.mockResolvedValue({ kind: 'text', text: 'complete' })
+    generated.resultForJob.mockReturnValue({ kind: 'text', text: 'complete' })
+  })
+
+  it('composes the selected B workspace from SDK-owned layout, form, jobs, and results', async () => {
+    const wrapper = mount(GeneratedPluginView, {
+      props: { baseUrl: '/api/demo' },
+      global: {
+        plugins: [createPinia()],
+        stubs: {
+          'router-link': { template: '<a><slot /></a>' },
+          Teleport: true,
+        },
+      },
+    })
+    await flushPromises()
+
+    expect({
+      workspace: wrapper.findComponent(PluginWorkspaceView).props(),
+      result: wrapper.findComponent(GeneratedResultRenderer).text(),
+      jobs: wrapper.findComponent(JobsStatusTray).exists(),
+      jobSource: wrapper.findComponent(JobsStatusTray).props('source'),
+      legacyJobs: wrapper.findComponent(JobsStatusTray).props('jobs'),
+      legacyAdapter: wrapper.findComponent(JobsStatusTray).props('adapter'),
+    }).toMatchObject({
+      workspace: {
+        title: 'Demo analysis',
+        subtitle: 'Backend-only workspace',
+        sidebarPosition: 'left',
+        showFormActions: true,
+        values: { threshold: 2.5 },
+      },
+      result: 'complete',
+      jobs: true,
+      jobSource: expect.any(Object),
+      legacyJobs: undefined,
+      legacyAdapter: undefined,
+    })
+  })
+
+  it('submits normalized form values through the current job definition', async () => {
+    const wrapper = mount(GeneratedPluginView, {
+      props: { baseUrl: '/api/demo' },
+      global: { plugins: [createPinia()], stubs: { 'router-link': true, Teleport: true } },
+    })
+    await flushPromises()
+
+    wrapper.findComponent(PluginWorkspaceView).vm.$emit('form-submit', 'run', { threshold: 4 })
+    await flushPromises()
+
+    expect(generated.submit).toHaveBeenCalledWith('run', { threshold: 4 })
+  })
+
+  it('describes host service jobs without a misleading CPU reservation', async () => {
+    const wrapper = mount(GeneratedPluginView, {
+      props: { baseUrl: '/api/demo' },
+      global: { plugins: [createPinia()], stubs: { 'router-link': true, Teleport: true } },
+    })
+    await flushPromises()
+
+    wrapper.findComponent(PluginWorkspaceView).vm.$emit('update:activeView', 'sync')
+    await flushPromises()
+
+    expect(wrapper.find('[aria-label="Job resource requirements"]').text()).toBe('Host service')
+  })
+
+  it('describes process CPU declarations as an upper bound', async () => {
+    const wrapper = mount(GeneratedPluginView, {
+      props: { baseUrl: '/api/demo' },
+      global: { plugins: [createPinia()], stubs: { 'router-link': true, Teleport: true } },
+    })
+    await flushPromises()
+
+    expect(wrapper.find('[aria-label="Job resource requirements"]').text()).toBe('Up to 2 CPU')
+  })
+
+  it('should pass the host transport to the generated analysis composable', async () => {
+    const transport = vi.fn()
+    mount(GeneratedPluginView, {
+      props: { baseUrl: '/api/demo', transport },
+      global: { plugins: [createPinia()], stubs: { 'router-link': true, Teleport: true } },
+    })
+    await flushPromises()
+
+    expect(generated.options).toMatchObject({ baseUrl: '/api/demo', transport })
+  })
+
+  it('should lazily load the current job result by job id', async () => {
+    mount(GeneratedPluginView, {
+      props: { baseUrl: '/api/demo' },
+      global: { plugins: [createPinia()], stubs: { 'router-link': true, Teleport: true } },
+    })
+    await flushPromises()
+
+    expect(generated.loadResult).toHaveBeenCalledWith(expect.objectContaining({ job_id: 'job-1' }))
+  })
+
+  it('should display the exact historical job selected from the jobs tray', async () => {
+    generated.resultForJob.mockImplementation(jobId => ({ kind: 'text', text: String(jobId) }))
+    const wrapper = mount(GeneratedPluginView, {
+      props: { baseUrl: '/api/demo' },
+      global: { plugins: [createPinia()], stubs: { 'router-link': true, Teleport: true } },
+    })
+    await flushPromises()
+
+    wrapper.findComponent(JobsStatusTray).vm.$emit('select', generated.jobs[1])
+    await flushPromises()
+
+    expect({
+      result: wrapper.findComponent(GeneratedResultRenderer).text(),
+      loadedJob: generated.loadResult.mock.calls.at(-1)?.[0]?.job_id,
+    }).toEqual({ result: 'job-2', loadedJob: 'job-2' })
+  })
+})