@morscherlab/mint-sdk 1.2.0-beta.9 → 1.2.1

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

@@ -0,0 +1,105 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NumberInput from '../../components/NumberInput.vue'
+
+function lastEmitted(wrapper: ReturnType<typeof mount>) {
+  return wrapper.emitted('update:modelValue')?.at(-1)?.[0]
+}
+
+describe('NumberInput', () => {
+  it('should never render a range input, with or without min/max', () => {
+    for (const props of [{}, { min: 0 }, { max: 10 }, { min: 0, max: 10 }]) {
+      const wrapper = mount(NumberInput, { props: { modelValue: 5, ...props } })
+      expect(wrapper.find('input[type="range"]').exists()).toBe(false)
+    }
+  })
+
+  it('should draw the range fill only when both min and max are set', () => {
+    expect(mount(NumberInput, { props: { modelValue: 5, min: 0 } }).find('.mint-number-input__rule').exists()).toBe(false)
+    const wrapper = mount(NumberInput, { props: { modelValue: 5, min: 0, max: 10 } })
+    expect(wrapper.find('.mint-number-input__rule').exists()).toBe(true)
+    expect(wrapper.find('.mint-number-input__scrub').attributes('style')).toContain('--mint-number-input-fill: 50%')
+  })
+
+  it('should expose the scrub area as a slider when min and max are set', () => {
+    const scrub = mount(NumberInput, { props: { modelValue: 5, min: 0, max: 10 } }).find('.mint-number-input__scrub')
+    expect(scrub.attributes('role')).toBe('slider')
+    expect(scrub.attributes('aria-valuenow')).toBe('5')
+    expect(scrub.attributes('tabindex')).toBe('0')
+  })
+
+  it('should always render both steppers', () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5 } })
+    expect(wrapper.findAll('.mint-number-input__stepper')).toHaveLength(2)
+  })
+
+  it('should disable the steppers at min and max', () => {
+    const atMin = mount(NumberInput, { props: { modelValue: 0, min: 0, max: 10 } })
+    expect(atMin.find('.mint-number-input__stepper--down').attributes('disabled')).toBeDefined()
+    const atMax = mount(NumberInput, { props: { modelValue: 10, min: 0, max: 10 } })
+    expect(atMax.find('.mint-number-input__stepper--up').attributes('disabled')).toBeDefined()
+  })
+
+  it('should emit the step-snapped value when dragging at 25% of the scrub width', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 0, min: 0, max: 50, step: 0.5 } })
+    const scrub = wrapper.find('.mint-number-input__scrub')
+    scrub.element.getBoundingClientRect = () => ({ left: 100, width: 200 } as DOMRect)
+    await scrub.trigger('pointerdown', { clientX: 150, pointerId: 1 })
+    expect(lastEmitted(wrapper)).toBe(12.5)
+  })
+
+  it('should not scrub when the pointer goes down on the input itself', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 0, min: 0, max: 50 } })
+    await wrapper.find('input').trigger('pointerdown', { clientX: 150, pointerId: 1 })
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('should step with the arrow keys', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5, step: 2 } })
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+    expect(lastEmitted(wrapper)).toBe(7)
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowDown' })
+    expect(lastEmitted(wrapper)).toBe(3)
+  })
+
+  it('should step by ten steps with PageUp and PageDown', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 50, step: 1, min: 0, max: 100 } })
+    await wrapper.find('input').trigger('keydown', { key: 'PageUp' })
+    expect(lastEmitted(wrapper)).toBe(60)
+    await wrapper.find('input').trigger('keydown', { key: 'PageDown' })
+    expect(lastEmitted(wrapper)).toBe(40)
+  })
+
+  it('should jump to min and max with Home and End on the slider surface', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5, min: 0, max: 10 } })
+    const scrub = wrapper.find('.mint-number-input__scrub')
+    await scrub.trigger('keydown', { key: 'Home' })
+    expect(lastEmitted(wrapper)).toBe(0)
+    await scrub.trigger('keydown', { key: 'End' })
+    expect(lastEmitted(wrapper)).toBe(10)
+  })
+
+  it('should leave Home and End to the caret inside the text input', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5, min: 0, max: 10 } })
+    await wrapper.find('input').trigger('keydown', { key: 'Home' })
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('should emit once per arrow press in slider mode', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5, min: 0, max: 10 } })
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+  })
+
+  it('should keep a fractional value precision when stepping by an integer', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 2.5, step: 1 } })
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+    expect(lastEmitted(wrapper)).toBe(3.5)
+  })
+
+  it('should trim float noise when stepping by a decimal', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 0.1, step: 0.2 } })
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+    expect(lastEmitted(wrapper)).toBe(0.3)
+  })
+})

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

@@ -0,0 +1,305 @@
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { reactive } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PlotlyChart from '../../components/PlotlyChart.vue'
+
+const plotly = vi.hoisted(() => ({
+  Plots: { resize: vi.fn() },
+  purge: vi.fn(),
+  react: vi.fn(),
+}))
+
+vi.mock('plotly.js-dist-min', () => ({ default: plotly }))
+enableAutoUnmount(afterEach)
+
+describe('PlotlyChart', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    plotly.react.mockReset().mockResolvedValue(undefined)
+    plotly.Plots.resize.mockReset().mockResolvedValue(undefined)
+    document.documentElement.classList.remove('dark')
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    document.documentElement.classList.remove('dark')
+    document.documentElement.removeAttribute('style')
+  })
+
+  it('should merge MINT defaults with native Plotly props', async () => {
+    const trace = { type: 'scatter' as const, x: [1], y: [2] }
+    mount(PlotlyChart, {
+      props: {
+        data: [trace],
+        layout: { title: { text: 'QC' } },
+        config: { toImageButtonOptions: { filename: 'qc-export' } },
+      },
+    })
+    await flushPromises()
+
+    expect(plotly.react).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      [trace],
+      expect.objectContaining({
+        autosize: true,
+        title: { text: 'QC' },
+        paper_bgcolor: 'rgba(0,0,0,0)',
+        plot_bgcolor: 'rgba(0,0,0,0)',
+      }),
+      expect.objectContaining({
+        responsive: true,
+        displaylogo: false,
+        toImageButtonOptions: { filename: 'qc-export' },
+      }),
+    )
+  })
+
+  it('should render the shared chart empty state when explicitly empty', async () => {
+    const wrapper = mount(PlotlyChart, {
+      props: { data: [], empty: true, emptyMessage: 'No peaks found' },
+    })
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('No peaks found')
+  })
+
+  it('should show a safe error when Plotly rejects rendering', async () => {
+    plotly.react.mockRejectedValue(new Error('<script>unsafe details</script>'))
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    await flushPromises()
+
+    expect(wrapper.get('[role="alert"]').text()).toBe('Unable to display this chart.')
+  })
+
+  it('should rerender when immutable native props change', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: [{ x: [1], y: [2] }] } })
+    await flushPromises()
+
+    await wrapper.setProps({ data: [{ x: [3], y: [4] }] })
+    await flushPromises()
+
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+  })
+
+  it('should rerender when the MINT dark theme changes', async () => {
+    let themeChanged: MutationCallback | undefined
+    vi.stubGlobal('MutationObserver', class {
+      constructor(callback: MutationCallback) {
+        themeChanged = callback
+      }
+
+      observe(): void {}
+      disconnect(): void {}
+      takeRecords(): MutationRecord[] { return [] }
+    })
+    mount(PlotlyChart, { props: { data: [{ x: [1], y: [2] }] } })
+    await flushPromises()
+
+    document.documentElement.classList.add('dark')
+    themeChanged?.([], {} as MutationObserver)
+    await flushPromises()
+
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+  })
+
+  it('should resize the Plotly canvas when its container changes size', async () => {
+    let resize: ResizeObserverCallback | undefined
+    vi.stubGlobal('ResizeObserver', class {
+      constructor(callback: ResizeObserverCallback) {
+        resize = callback
+      }
+
+      observe(): void {}
+      disconnect(): void {}
+    })
+    mount(PlotlyChart, { props: { data: [{ x: [1], y: [2] }] } })
+    await flushPromises()
+
+    resize?.([], {} as ResizeObserver)
+
+    expect(plotly.Plots.resize).toHaveBeenCalledTimes(1)
+  })
+
+  it('should observe the Plotly canvas after leaving the empty state', async () => {
+    const observe = vi.fn()
+    vi.stubGlobal('ResizeObserver', class {
+      observe = observe
+      disconnect(): void {}
+    })
+    const wrapper = mount(PlotlyChart, {
+      props: { data: [], empty: true },
+    })
+    await flushPromises()
+
+    await wrapper.setProps({ empty: false })
+    await flushPromises()
+
+    expect(observe).toHaveBeenCalledWith(expect.any(HTMLElement))
+  })
+
+  it('should render once when data arrives as loading completes', async () => {
+    const wrapper = mount(PlotlyChart, {
+      props: { data: [], loading: true },
+    })
+    await flushPromises()
+
+    await wrapper.setProps({ data: [{ x: [1], y: [2] }], loading: false })
+    await flushPromises()
+
+    expect(plotly.react).toHaveBeenCalledTimes(1)
+  })
+
+  it('should serialize renders and use the latest props after an in-flight render', async () => {
+    let finish!: () => void
+    plotly.react.mockImplementationOnce(() => new Promise<void>((resolve) => { finish = resolve }))
+    const wrapper = mount(PlotlyChart, { props: { data: [{ x: [1] }] } })
+    await flushPromises()
+    await wrapper.setProps({ data: [{ x: [2] }] })
+    await wrapper.setProps({ data: [{ x: [3] }] })
+    await flushPromises()
+    expect(plotly.react).toHaveBeenCalledTimes(1)
+
+    finish()
+    await flushPromises()
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+    expect(plotly.react.mock.lastCall?.[1]).toEqual([{ x: [3] }])
+  })
+
+  it('should skip rendering when unmounted before the initial DOM update', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    wrapper.unmount()
+    await flushPromises()
+    expect(plotly.react).not.toHaveBeenCalled()
+  })
+
+  it('should recover from a stale failure without overwriting the newer render', async () => {
+    let reject!: (error: Error) => void
+    plotly.react.mockImplementationOnce(() => new Promise<void>((_resolve, fail) => { reject = fail }))
+    const wrapper = mount(PlotlyChart, { props: { data: [{ x: [1] }] } })
+    await flushPromises()
+    await wrapper.setProps({ data: [{ x: [2] }] })
+    reject(new Error('Old render failed'))
+    await flushPromises()
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+    expect(plotly.react.mock.lastCall?.[1]).toEqual([{ x: [2] }])
+    expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+  })
+
+  it('should purge an in-flight canvas removed by loading and then render its replacement', async () => {
+    let finish!: () => void
+    plotly.react.mockImplementationOnce(() => new Promise<void>((resolve) => { finish = resolve }))
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    await flushPromises()
+    const element = wrapper.get('.mint-plotly-chart__plot').element
+    await wrapper.setProps({ loading: true })
+    await wrapper.setProps({ loading: false, data: [{ x: [3] }] })
+    finish()
+    await flushPromises()
+    expect(plotly.purge).toHaveBeenCalledWith(element)
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+    expect(plotly.react.mock.lastCall?.[0]).toBe(wrapper.get('.mint-plotly-chart__plot').element)
+    expect(plotly.react.mock.lastCall?.[0]).not.toBe(element)
+  })
+
+  it('should clean up a render that completes after unmount', async () => {
+    let finish!: () => void
+    plotly.react.mockImplementationOnce(() => new Promise<void>((resolve) => { finish = resolve }))
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    await flushPromises()
+    const element = wrapper.get('.mint-plotly-chart__plot').element
+    wrapper.unmount()
+    plotly.purge.mockClear()
+    finish()
+    await flushPromises()
+    expect(plotly.purge).toHaveBeenCalledWith(element)
+    expect(plotly.react).toHaveBeenCalledTimes(1)
+  })
+
+  it('should purge the removed canvas and render new data after loading or empty states', async () => {
+    const disconnect = vi.fn()
+    vi.stubGlobal('ResizeObserver', class {
+      observe = vi.fn()
+      unobserve = vi.fn()
+      disconnect = disconnect
+    })
+    const wrapper = mount(PlotlyChart, { props: { data: [{ x: [1] }] } })
+    await flushPromises()
+    for (const state of ['loading', 'empty'] as const) {
+      const element = wrapper.get('.mint-plotly-chart__plot').element
+      await wrapper.setProps({ [state]: true })
+      await flushPromises()
+      expect(plotly.purge).toHaveBeenCalledWith(element)
+      expect(disconnect).toHaveBeenCalled()
+      await wrapper.setProps({ [state]: false, data: [{ x: [2] }] })
+      await flushPromises()
+      expect(wrapper.get('.mint-plotly-chart__plot').element).not.toBe(element)
+    }
+    expect(plotly.react).toHaveBeenCalledTimes(3)
+  })
+
+  it('should use MINT colors and protect reactive native data and nested layout from Plotly mutations', async () => {
+    document.documentElement.style.setProperty('--text-primary', '#f8fafc')
+    document.documentElement.style.setProperty('--border-color', '#334155')
+    const data = reactive([{ x: [1], y: [2] }])
+    const layout = reactive({ title: { text: 'Original' }, xaxis: { title: { text: 'Sample' } } })
+    plotly.react.mockImplementationOnce((_element, traces, options) => {
+      traces[0].x.push(9)
+      options.title.text = 'Changed'
+      options.xaxis.title.text = 'Changed'
+      return Promise.resolve()
+    })
+    mount(PlotlyChart, { attachTo: document.body, props: { data, layout } })
+    await flushPromises()
+    expect(plotly.react.mock.lastCall?.[2].font.color).toBe('#f8fafc')
+    expect(plotly.react.mock.lastCall?.[2].xaxis.gridcolor).toBe('#334155')
+    expect(data[0].x).toEqual([1])
+    expect(layout.title.text).toBe('Original')
+    expect(layout.xaxis.title.text).toBe('Sample')
+  })
+
+  it('should accept nested reactive arrays, typed arrays, dates, and native export callbacks', async () => {
+    const x = reactive([new Date('2026-01-01')])
+    const y = new Float64Array([2])
+    const click = vi.fn()
+    mount(PlotlyChart, {
+      props: {
+        data: [{ x, y }],
+        config: { modeBarButtonsToAdd: [{ name: 'Export', title: 'Export', icon: 'camera', click }] },
+      },
+    })
+    await flushPromises()
+    expect(plotly.react).toHaveBeenCalledOnce()
+    const [, traces, , config] = plotly.react.mock.lastCall!
+    expect(traces[0].x).toEqual(x)
+    expect(traces[0].x).not.toBe(x)
+    expect(traces[0].x[0]).toBeInstanceOf(Date)
+    expect(traces[0].y).toEqual(y)
+    expect(traces[0].y).not.toBe(y)
+    expect(config.modeBarButtonsToAdd[0].click).toBe(click)
+  })
+
+  it('should ignore resize rejection when the canvas becomes hidden', async () => {
+    let resize!: ResizeObserverCallback
+    vi.stubGlobal('ResizeObserver', class {
+      constructor(callback: ResizeObserverCallback) { resize = callback }
+      observe(): void {}
+      disconnect(): void {}
+    })
+    plotly.Plots.resize.mockRejectedValueOnce(new Error('Resize must be passed a displayed plot div'))
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    await flushPromises()
+    resize([], {} as ResizeObserver)
+    await flushPromises()
+    expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+  })
+
+  it('should purge the Plotly canvas when unmounted', async () => {
+    const wrapper = mount(PlotlyChart, { props: { data: [] } })
+    await flushPromises()
+
+    wrapper.unmount()
+
+    expect(plotly.purge).toHaveBeenCalledTimes(1)
+  })
+})

package/src/__tests__/components/PluginWorkspaceView.internal.test.ts

@@ -114,9 +114,8 @@ describe('PluginWorkspaceView internal split', () => {
       activeView: 'data',
       title: 'Tools',
       subtitle: 'Current file',
-      variant: 'analysis',
       floating: false,
-      dense: true,
+      density: 'compact',
     })
     expect(wrapper.get('[data-test="topbar-action"]').text()).toBe('Run')
     expect(wrapper.get('[data-test="import-action"]').text()).toBe('Upload')

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

@@ -182,9 +182,8 @@ describe('PluginWorkspaceView', () => {
       activeView: 'data',
       title: 'Tools',
       subtitle: 'Current file',
-      variant: 'analysis',
       floating: false,
-      dense: true,
+      density: 'compact',
     })
     expect(wrapper.get('[data-test="topbar-action"]').text()).toBe('Run')
     expect(wrapper.get('[data-test="import-action"]').text()).toBe('Upload')

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

@@ -3,6 +3,25 @@ import { describe, expect, it } from 'vitest'
 import SegmentedControl from '../../components/SegmentedControl.vue'
 
 describe('SegmentedControl', () => {
+  it('defaults to card while allowing an explicit simple variant', async () => {
+    const wrapper = mount(SegmentedControl, {
+      props: {
+        modelValue: 'table',
+        options: [{ value: 'table', label: 'Table', description: 'View rows' }],
+      },
+    })
+
+    expect(wrapper.classes()).toContain('mint-segmented-control--card')
+    expect(wrapper.get('button').classes()).toContain('mint-segmented-control__option--card')
+    expect(wrapper.get('.mint-segmented-control__description').text()).toBe('View rows')
+
+    await wrapper.setProps({ variant: 'simple' })
+
+    expect(wrapper.classes()).toContain('mint-segmented-control--simple')
+    expect(wrapper.get('button').classes()).toContain('mint-segmented-control__option--simple')
+    expect(wrapper.find('.mint-segmented-control__description').exists()).toBe(false)
+  })
+
   it('accepts string and number shorthand options', async () => {
     const wrapper = mount(SegmentedControl, {
       props: {

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

@@ -0,0 +1,18 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+// jsdom has no layout, so this pins the stylesheet contract instead: a bare
+// <svg> passed to IconButton's slot must be sized by the icon box, otherwise it
+// collapses to zero width as a flex item (FilePicker source toggles, beta.14).
+describe('IconButton icon sizing', () => {
+  it('should size a bare slot svg to the icon box when the caller passes no dimensions', () => {
+    const css = readFileSync(
+      resolve(__dirname, '../../styles/components/icon-button.css'),
+      'utf8',
+    )
+    expect(css).toMatch(
+      /\.mint-icon-button__icon--sm > svg,\s*\.mint-icon-button__icon--md > svg,\s*\.mint-icon-button__icon--lg > svg \{\s*width: 100%;\s*height: 100%;\s*\}/,
+    )
+  })
+})

package/src/__tests__/composables/localFiles.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it, vi } from 'vitest'
+import { localFilesAdapter } from '../../composables/filePicker/localFiles'
+
+describe('localFilesAdapter', () => {
+  it('preserves order, duplicate files, nested statistics and scoped search', async () => {
+    const files = [
+      new File(['abc'], 'run.raw'),
+      new File(['12'], 'run.raw'),
+      new File(['1234'], 'sample.mzML.gz'),
+      new File(['x'], 'other.raw'),
+    ]
+    const adapter = localFilesAdapter(files, [
+      'study/batch/run.raw', 'study/batch/run.raw', 'study/sample.mzML.gz', 'study2/other.raw',
+    ])
+    expect(await adapter.listRoot()).toMatchObject([
+      { path: 'study', fileCount: 3, bytes: 9, formats: { raw: 2, 'mzML.gz': 1 } },
+      { path: 'study2', fileCount: 1, bytes: 1, formats: { raw: 1 } },
+    ])
+    expect(await adapter.listChildren('study')).toMatchObject([
+      { path: 'study/batch', fileCount: 2, bytes: 5, formats: { raw: 2 } },
+      { path: 'study/sample.mzML.gz', file: files[2] },
+    ])
+    expect(await adapter.listChildren('study/batch')).toMatchObject([
+      { path: 'study/batch/run.raw', file: files[0] },
+      { path: 'study/batch/run.raw (2)', file: files[1] },
+    ])
+    expect(await adapter.search('RUN', { path: 'study', recursive: true })).toHaveLength(2)
+    expect(await adapter.search('RUN', { path: 'study', recursive: false })).toEqual([])
+    expect(await adapter.listChildren('missing')).toEqual([])
+    const roots = await adapter.listRoot()
+    roots.pop()
+    expect(await adapter.listRoot()).toHaveLength(2)
+  })
+
+  it('builds and lists many sibling folders without repeatedly scanning all nodes', async () => {
+    const files = Array.from({ length: 200 }, (_, i) => new File(['x'], `${i}.raw`))
+    const paths = files.map((file, i) => `folder-${i}/${file.name}`)
+    const originalValues = Map.prototype.values
+    let visited = 0
+    const values = vi.spyOn(Map.prototype, 'values').mockImplementation(function* (this: Map<unknown, unknown>) {
+      for (const value of originalValues.call(this)) {
+        visited++
+        yield value
+      }
+    } as typeof Map.prototype.values)
+    try {
+      const adapter = localFilesAdapter(files, paths)
+      await adapter.listRoot()
+      for (let i = 0; i < files.length; i++) {
+        expect(await adapter.listChildren(`folder-${i}`)).toHaveLength(1)
+      }
+      expect(visited).toBeLessThanOrEqual(files.length * 8)
+    } finally {
+      values.mockRestore()
+    }
+  })
+})