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

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,235 @@
+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(),
+      })
+    },
+  }
+})
+
+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'),
+    }).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),
+    })
+  })
+
+  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' })
+  })
+})

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

@@ -0,0 +1,93 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import ChartContainer from '../../components/ChartContainer.vue'
+import DataFrame from '../../components/DataFrame.vue'
+import GeneratedResultRenderer from '../../components/GeneratedResultRenderer.vue'
+
+describe('GeneratedResultRenderer', () => {
+  it('renders tabular results with the standard DataFrame component', () => {
+    const wrapper = mount(GeneratedResultRenderer, {
+      props: {
+        result: {
+          kind: 'table',
+          columns: ['sample', 'value'],
+          rows: [{ sample: 'A', value: 1.5 }],
+        },
+      },
+    })
+
+    expect(wrapper.findComponent(DataFrame).props()).toMatchObject({
+      data: [{ sample: 'A', value: 1.5 }],
+      columns: [
+        { key: 'sample', label: 'Sample', sortable: true },
+        { key: 'value', label: 'Value', sortable: true },
+      ],
+    })
+  })
+
+  it('renders Matplotlib images inside the standard chart container', () => {
+    const wrapper = mount(GeneratedResultRenderer, {
+      props: {
+        result: { kind: 'image', media_type: 'image/png', data: 'cG5n', alt: 'PCA' },
+      },
+    })
+
+    expect({
+      chart: wrapper.findComponent(ChartContainer).exists(),
+      source: wrapper.get('img').attributes('src'),
+      alt: wrapper.get('img').attributes('alt'),
+    }).toEqual({ chart: true, source: 'data:image/png;base64,cG5n', alt: 'PCA' })
+  })
+
+  it('never interprets JSON results as HTML', () => {
+    const wrapper = mount(GeneratedResultRenderer, {
+      props: {
+        result: { kind: 'json', value: { unsafe: '<script>window.bad = true</script>' } },
+      },
+    })
+
+    expect({ scripts: wrapper.findAll('script').length, text: wrapper.text() }).toEqual({
+      scripts: 0,
+      text: expect.stringContaining('<script>window.bad = true</script>'),
+    })
+  })
+
+  it('should preserve the artifact filename when downloading a result', () => {
+    const wrapper = mount(GeneratedResultRenderer, {
+      props: {
+        result: {
+          kind: 'artifact',
+          id: 'artifact-1',
+          name: 'analysis.csv',
+          media_type: 'text/csv',
+          size: 3,
+          data: 'YSxi',
+        },
+      },
+    })
+
+    expect(wrapper.get('a').attributes('download')).toBe('analysis.csv')
+  })
+
+  it('uses the host download route for a managed file result', () => {
+    const wrapper = mount(GeneratedResultRenderer, {
+      props: {
+        result: {
+          kind: 'artifact',
+          id: 'artifact-2',
+          name: 'large.msd',
+          media_type: 'application/octet-stream',
+          size: 512_000_000,
+          download_url: '/api/leaf/jobs/job-1/result/file/scoped-token',
+          managed: true,
+        },
+      },
+    })
+
+    expect(wrapper.get('a').attributes()).toMatchObject({
+      href: '/api/leaf/jobs/job-1/result/file/scoped-token',
+      download: 'large.msd',
+    })
+  })
+})

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

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import GroupAssigner from '../../components/GroupAssigner.vue'
+import type { GroupItem } from '../../types'
+
+const groups: GroupItem[] = [
+  { name: 'control-a', color: '#3B82F6', count: 3 },
+  { name: 'treatment-a', color: '#F43F5E', count: 4 },
+]
+
+describe('GroupAssigner', () => {
+  it('uses shared assignment state for counts, validation, and emitted updates', async () => {
+    const wrapper = mount(GroupAssigner, {
+      props: {
+        groups,
+        group1: ['control-a'],
+        group2: [],
+        minPerGroup: 1,
+      },
+    })
+
+    expect(wrapper.text()).toContain('3 samples')
+    expect(wrapper.text()).toContain('0 samples')
+    expect(wrapper.text()).toContain('Add 1 more to Treatment')
+
+    await wrapper.find('.mint-group-assigner__pill-remove').trigger('click')
+    expect(wrapper.emitted('update:group1')?.[0]).toEqual([[]])
+    expect(wrapper.emitted('update:group2')).toBeUndefined()
+  })
+
+  it('does not throw when drag events omit dataTransfer', async () => {
+    const wrapper = mount(GroupAssigner, {
+      props: {
+        groups,
+        group1: [],
+        group2: [],
+      },
+    })
+
+    await expect(
+      wrapper.find('.mint-group-assigner__pill--unassigned').trigger('dragstart', { dataTransfer: null }),
+    ).resolves.toBeUndefined()
+
+    await expect(
+      wrapper.find('.mint-group-assigner__zone').trigger('dragover', { dataTransfer: null }),
+    ).resolves.toBeUndefined()
+  })
+})

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

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, expectTypeOf, it } from 'vitest'
+import type { VNode } from 'vue'
+import InstrumentAlertLog from '../../components/InstrumentAlertLog.vue'
+import type { InstrumentAlert } from '../../types'
+
+type EventKeyIsOptional = {} extends Pick<InstrumentAlert, 'event_key'> ? true : false
+
+function alert(message: string): InstrumentAlert {
+  return {
+    event_key: 'orbitrap-01:acquisition-stopped:42',
+    instrument_id: 'orbitrap-01',
+    level: 'critical',
+    rule: 'acquisition-stopped',
+    message,
+    timestamp: '2026-07-22T08:30:00Z',
+  }
+}
+
+function findAlertVNodeKey(vnode: VNode): VNode['key'] {
+  const classes = vnode.props?.class
+  if (typeof classes === 'string' && classes.split(' ').includes('mint-instrument-alert')) {
+    return vnode.key
+  }
+  if (Array.isArray(vnode.children)) {
+    for (const child of vnode.children) {
+      if (typeof child !== 'object' || child === null) continue
+      const key = findAlertVNodeKey(child as VNode)
+      if (key !== null) return key
+    }
+  }
+  if (vnode.component?.subTree) return findAlertVNodeKey(vnode.component.subTree)
+  return null
+}
+
+describe('InstrumentAlertLog', () => {
+  it('should require a stable event_key in the public alert type', () => {
+    expectTypeOf<EventKeyIsOptional>().toEqualTypeOf<false>()
+  })
+
+  it('should retain the rendered alert when mutable content changes for the same event_key', async () => {
+    const wrapper = mount(InstrumentAlertLog, {
+      props: { alerts: [alert('Acquisition stopped')] },
+    })
+    const renderedAlert = wrapper.get('.mint-instrument-alert').element
+
+    await wrapper.setProps({ alerts: [alert('Acquisition remains stopped')] })
+
+    expect(wrapper.get('.mint-instrument-alert').element).toBe(renderedAlert)
+  })
+
+  it('should key each rendered alert by event_key', () => {
+    const wrapper = mount(InstrumentAlertLog, {
+      props: { alerts: [alert('Acquisition stopped')] },
+    })
+
+    expect(findAlertVNodeKey(wrapper.vm.$.subTree)).toBe('orbitrap-01:acquisition-stopped:42')
+  })
+})