@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

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

@@ -1,35 +1,45 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
-import { computed, reactive, ref } from 'vue'
+import { reactive, ref } from 'vue'
 
 import ExperimentSelectorModal from '../../components/ExperimentSelectorModal.vue'
 import { useExperimentSelector } from '../../composables/useExperimentSelector'
 import { useExperimentStore } from '../../stores/experiment'
-import type { ExperimentSummary } from '../../types'
+import type { ExperimentFilters, ExperimentSummary } from '../../types'
 
 const fetchExperiments = vi.fn(async () => undefined)
 const fetchFilterOptions = vi.fn(async () => undefined)
+const fetchStatusCounts = vi.fn(async () => undefined)
 const experiments = ref<ExperimentSummary[]>([])
+const experimentTypes = ref<{ value: string; label: string }[]>([])
+const projects = ref<{ value: string; label: string }[]>([])
+const statusCounts = ref<Record<string, number>>({})
+let filters: ExperimentFilters = newFilters()
+
+function newFilters(): ExperimentFilters {
+  return reactive({
+    search: undefined,
+    status: undefined,
+    project: undefined,
+    experimentType: undefined,
+    datePreset: undefined,
+    mine: undefined,
+  })
+}
 
 vi.mock('../../composables/useExperimentSelector', () => ({
   useExperimentSelector: vi.fn(() => ({
     experiments,
-    filters: reactive({
-      search: undefined,
-      status: undefined,
-      project: undefined,
-      experimentType: undefined,
-      datePreset: undefined,
-    }),
+    filters,
     isLoading: ref(false),
     error: ref(null),
-    sortKey: ref('created_at:desc'),
-    experimentTypes: ref([]),
-    projects: ref([]),
-    groupedByProject: computed(() => []),
+    experimentTypes,
+    projects,
+    statusCounts,
     fetch: fetchExperiments,
     fetchFilterOptions,
+    fetchStatusCounts,
   })),
 }))
 
@@ -48,7 +58,8 @@ function experiment(overrides: Partial<ExperimentSummary> = {}): ExperimentSumma
 }
 
 interface ModalProps {
-  modelValue: boolean
+  open: boolean
+  experimentType?: string
   allowedExperimentTypes?: string[] | null
   currentExperimentId?: number | null
 }
@@ -59,9 +70,18 @@ function mountModal(props: ModalProps) {
     global: {
       stubs: {
         BaseModal: {
-          props: ['modelValue', 'title', 'size'],
+          props: ['open', 'title', 'size'],
           template: '<div><slot /></div>',
         },
+        // Renders the trigger and every item inline, without the teleported panel.
+        ActionMenu: {
+          props: ['label', 'items'],
+          emits: ['select'],
+          template: `<div class="menu-stub" :data-label="label">
+            <slot name="trigger" :open="false" :toggle="() => {}" :keydown="() => {}" />
+            <button v-for="item in items" :key="item.id" class="menu-stub__item" :data-checked="item.checked" @click="$emit('select', item)">{{ item.label }}</button>
+          </div>`,
+        },
       },
     },
   })
@@ -71,38 +91,45 @@ describe('ExperimentSelectorModal', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     experiments.value = []
+    experimentTypes.value = []
+    projects.value = []
+    statusCounts.value = {}
+    filters = newFilters()
     fetchExperiments.mockClear()
     fetchFilterOptions.mockClear()
+    fetchStatusCounts.mockClear()
     vi.mocked(useExperimentSelector).mockClear()
   })
 
   it('fetches experiments when mounted already open', () => {
-    mountModal({ modelValue: true })
+    mountModal({ open: true })
 
     expect(fetchFilterOptions).toHaveBeenCalledTimes(1)
     expect(fetchExperiments).toHaveBeenCalledTimes(1)
+    expect(fetchStatusCounts).toHaveBeenCalledTimes(1)
   })
 
   it('does not fetch while mounted closed', () => {
-    mountModal({ modelValue: false })
+    mountModal({ open: false })
 
     expect(fetchFilterOptions).not.toHaveBeenCalled()
     expect(fetchExperiments).not.toHaveBeenCalled()
   })
 
   it('passes allowed experiment types to the selector composable', () => {
-    mountModal({ modelValue: false, allowedExperimentTypes: ['mass_spectrometry'] })
+    mountModal({ open: false, allowedExperimentTypes: ['mass_spectrometry'] })
 
     expect(useExperimentSelector).toHaveBeenCalledWith({
       experimentType: undefined,
       allowedExperimentTypes: ['mass_spectrometry'],
+      withStatusCounts: true,
     })
   })
 
   it('commits the clicked platform record to the shared store', async () => {
     const record = experiment()
     experiments.value = [record]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     await wrapper.find('.mint-resource-picker__row').trigger('click')
 
@@ -113,7 +140,7 @@ describe('ExperimentSelectorModal', () => {
 
   it('does not emit a select event — the store is the single owner', async () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     await wrapper.find('.mint-resource-picker__row').trigger('click')
 
@@ -122,37 +149,43 @@ describe('ExperimentSelectorModal', () => {
 
   it('closes itself after committing a selection', async () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     await wrapper.find('.mint-resource-picker__row').trigger('click')
 
-    expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+  })
+
+  it('should mark the search field autofocus when the modal opens', () => {
+    const wrapper = mountModal({ open: true })
+
+    expect(wrapper.get('input[type="search"]').attributes()).toHaveProperty('autofocus')
   })
 
   it('should show the experiment code as a pill on the second line', () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     expect(wrapper.get('.mint-resource-picker__code').text()).toBe('EXP-007')
   })
 
   it('should state the status as text in the right-hand column', () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     expect(wrapper.get('.mint-resource-picker__aside').text()).toContain('Ongoing')
   })
 
   it('should tint the status with the experiment status variant', () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     expect(wrapper.get('.mint-resource-picker__status').classes()).toContain('mint-resource-picker__status--primary')
   })
 
   it('should fill the current experiment row', () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true, currentExperimentId: 7 })
+    const wrapper = mountModal({ open: true, currentExperimentId: 7 })
 
     expect(wrapper.find('.mint-resource-picker__row--selected').exists()).toBe(true)
   })
@@ -160,12 +193,85 @@ describe('ExperimentSelectorModal', () => {
   it('clears the shared store from the clear-selection footer', async () => {
     const store = useExperimentStore()
     store.select(experiment())
-    const wrapper = mountModal({ modelValue: true, currentExperimentId: 7 })
+    const wrapper = mountModal({ open: true, currentExperimentId: 7 })
 
     await wrapper.find('.mint-experiment-selector__clear-btn').trigger('click')
 
     expect(store.current).toBeNull()
     expect(store.currentId).toBeNull()
-    expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+  })
+
+  it('should list each status with its count and check the current one', async () => {
+    statusCounts.value = { ongoing: 3, planned: 1, completed: 0, cancelled: 2 }
+    filters.status = 'ongoing'
+    const wrapper = mountModal({ open: true })
+
+    const items = wrapper.get('[data-label="Status"]').findAll('.menu-stub__item')
+    expect(items.map(item => item.text())).toEqual([
+      'Any status', 'Ongoing · 3', 'Planned · 1', 'Completed · 0', 'Cancelled · 2',
+    ])
+    expect(items.map(item => item.attributes('data-checked'))).toEqual(['false', 'true', 'false', 'false', 'false'])
+  })
+
+  it('should show the active status with its dot on the trigger and reset it from Any status', async () => {
+    filters.status = 'completed'
+    const wrapper = mountModal({ open: true })
+    const menu = wrapper.get('[data-label="Status"]')
+
+    const trigger = menu.get('.mint-experiment-selector__toggle')
+    expect(trigger.classes()).toContain('mint-experiment-selector__toggle--active')
+    expect(trigger.text()).toBe('Completed')
+    expect(trigger.find('.mint-experiment-selector__dot--success').exists()).toBe(true)
+
+    await menu.findAll('.menu-stub__item')[0].trigger('click')
+
+    expect(filters.status).toBeUndefined()
+  })
+
+  it('should filter by the chosen project', async () => {
+    projects.value = [{ value: 'Screen', label: 'Screen' }]
+    const wrapper = mountModal({ open: true })
+    const menu = wrapper.get('[data-label="Project"]')
+
+    await menu.findAll('.menu-stub__item')[1].trigger('click')
+
+    expect(filters.project).toBe('Screen')
+    expect(menu.get('.mint-experiment-selector__toggle').text()).toBe('Screen')
+  })
+
+  it.each([
+    { experimentType: undefined, shown: true },
+    { experimentType: 'screen', shown: false },
+  ])('should show the type menu only when the type is choosable (experimentType=$experimentType)', ({ experimentType, shown }) => {
+    experimentTypes.value = [{ value: 'screen', label: 'Screen' }, { value: 'lcms', label: 'LC-MS' }]
+    const wrapper = mountModal({ open: true, experimentType })
+
+    expect(wrapper.find('[data-label="Type"]').exists()).toBe(shown)
+  })
+
+  it('should toggle the mine filter from the Mine button', async () => {
+    const wrapper = mountModal({ open: true })
+    const mine = wrapper.get('[aria-pressed]')
+
+    await mine.trigger('click')
+
+    expect(filters.mine).toBe(true)
+    expect(mine.attributes('aria-pressed')).toBe('true')
+  })
+
+  it('should clear status, project and mine but keep the search when Clear N is clicked', async () => {
+    const wrapper = mountModal({ open: true })
+    expect(wrapper.find('.mint-experiment-selector__clear-filters').exists()).toBe(false)
+
+    Object.assign(filters, { search: 'glu', status: 'planned', project: 'Screen', mine: true })
+    await wrapper.vm.$nextTick()
+    const clear = wrapper.get('.mint-experiment-selector__clear-filters')
+    expect(clear.text()).toBe('Clear 3')
+
+    await clear.trigger('click')
+
+    expect(filters).toMatchObject({ search: 'glu', status: undefined, project: undefined, mine: undefined })
+    expect(wrapper.find('.mint-experiment-selector__clear-filters').exists()).toBe(false)
   })
 })

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

@@ -2,12 +2,8 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import { describe, expect, it } from 'vitest'
 import FormBuilder from '../../components/FormBuilder.vue'
-import FormActions from '../../components/FormActions.vue'
-import Tooltip from '../../components/Tooltip.vue'
-import { generatedJobFormSchema } from '../../generated/schema'
-import type { GeneratedJsonSchema } from '../../types/generated-ui'
+import FormActionsInternal from '../../components/internal/FormActionsInternal.vue'
 import { defineControlModel, useControlWorkspace, type ControlSchema } from '../../composables/useControlSchema'
-import type { FormSchema } from '../../types/form-builder'
 
 const controls: ControlSchema = {
   threshold: {
@@ -32,34 +28,13 @@ const controls: ControlSchema = {
   },
 }
 
-describe('FormBuilder', () => {
-  it.each([
-    { name: 'nullable tags', items: { type: 'string' }, value: null, component: 'TagsInput', displayed: [], updated: ['1'] },
-    { name: 'nullable enum array', items: { type: 'string', enum: ['a', 'b'] }, value: null, component: 'MultiSelect', displayed: [], updated: ['1'] },
-    { name: 'numeric tags', items: { type: 'number' }, value: [1, 2], component: 'TagsInput', displayed: ['1', '2'], updated: [1] },
-  ])('renders $name without changing its submitted default', async ({ items, value, component, displayed, updated }) => {
-    const field: GeneratedJsonSchema = {
-      anyOf: [{ type: 'array', items }, { type: 'null' }], default: value,
-    }
-    const schema = generatedJobFormSchema({
-      id: 'arrays', title: 'Arrays', description: '', cpu: 1,
-      input_schema: { properties: { values: field } }, output_schema: {},
-    })
-    const wrapper = mount(FormBuilder, { props: { schema } })
-    const control = wrapper.findComponent({ name: component })
-    expect(control.props('modelValue')).toEqual(displayed)
-    wrapper.findComponent(FormActions).vm.$emit('submit')
-    await flushPromises()
-    expect(wrapper.emitted('submit')?.at(-1)?.[0]).toEqual({ values: value })
+const spec = defineControlModel({ controls })
+const specWithActions = defineControlModel({ controls, actions: true })
 
-    control.vm.$emit('update:modelValue', ['1'])
-    await nextTick()
-    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toEqual({ values: updated })
-  })
-
-  it('renders compact controls without a prebuilt FormSchema', () => {
+describe('FormBuilder', () => {
+  it('renders the sections of a control model', () => {
     const wrapper = mount(FormBuilder, {
-      props: { controls },
+      props: { spec },
     })
 
     expect(wrapper.find('.mint-form-builder').exists()).toBe(true)
@@ -72,7 +47,7 @@ describe('FormBuilder', () => {
   it('merges compact control defaults with incoming model values', async () => {
     const wrapper = mount(FormBuilder, {
       props: {
-        controls,
+        spec,
         modelValue: { threshold: 0.25 },
       },
     })
@@ -86,16 +61,16 @@ describe('FormBuilder', () => {
     })
   })
 
-  it('uses controlOptions initialValues over compact control defaults', () => {
+  it('uses the control model initialValues over control defaults', () => {
     const wrapper = mount(FormBuilder, {
       props: {
-        controls,
-        controlOptions: {
+        spec: defineControlModel({
+          controls,
           initialValues: {
             threshold: 0.35,
             method: 'logistic',
           },
-        },
+        }),
       },
     })
 
@@ -106,7 +81,7 @@ describe('FormBuilder', () => {
   it('syncs external modelValue changes into rendered fields', async () => {
     const wrapper = mount(FormBuilder, {
       props: {
-        controls,
+        spec,
         modelValue: { threshold: 0.25 },
       },
     })
@@ -124,23 +99,26 @@ describe('FormBuilder', () => {
 
     const wrapper = mount(FormBuilder, {
       props: {
-        controls: thresholdOnly,
+        spec: defineControlModel({ controls: thresholdOnly, actions: true }),
       },
     })
 
     await wrapper.find('input').setValue('0.5')
     await wrapper.setProps({
-      controls: {
-        threshold: controls.threshold,
-        method: controls.method,
-      },
+      spec: defineControlModel({
+        controls: {
+          threshold: controls.threshold,
+          method: controls.method,
+        },
+        actions: true,
+      }),
     })
 
     expect(wrapper.find('select').exists()).toBe(true)
     expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.5')
     expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
 
-    wrapper.findComponent(FormActions).vm.$emit('submit')
+    wrapper.findComponent(FormActionsInternal).vm.$emit('submit')
     await flushPromises()
 
     expect(wrapper.emitted('submit')?.at(-1)?.[0]).toMatchObject({
@@ -151,17 +129,20 @@ describe('FormBuilder', () => {
 
   it('removes stale field data when compact controls are removed', async () => {
     const wrapper = mount(FormBuilder, {
-      props: { controls },
+      props: { spec: specWithActions },
     })
 
     await wrapper.setProps({
-      controls: {
-        method: controls.method,
-      },
+      spec: defineControlModel({
+        controls: {
+          method: controls.method,
+        },
+        actions: true,
+      }),
     })
 
     expect(wrapper.find('input').exists()).toBe(false)
-    wrapper.findComponent(FormActions).vm.$emit('submit')
+    wrapper.findComponent(FormActionsInternal).vm.$emit('submit')
     await flushPromises()
 
     const submitted = wrapper.emitted('submit')?.at(-1)?.[0] as Record<string, unknown>
@@ -188,7 +169,7 @@ describe('FormBuilder', () => {
     })
     const wrapper = mount(FormBuilder, {
       props: {
-        model,
+        spec: model,
         modelValue: { threshold: 0.25 },
       },
     })
@@ -205,46 +186,10 @@ describe('FormBuilder', () => {
     })
   })
 
-  it('uses initialValues from a complete control model binding', () => {
-    const model = defineControlModel({
-      initialValues: {
-        threshold: 0.25,
-        method: 'logistic',
-      },
-      views: {
-        run: {
-          label: 'Run',
-          sections: {
-            parameters: {
-              label: 'Parameters',
-              controls: {
-                threshold: { label: 'Threshold', default: 0.05, min: 0, max: 1 },
-                method: { label: 'Method', default: 'linear', options: ['linear', 'logistic'] },
-              },
-            },
-          },
-        },
-      },
-    })
-    const wrapper = mount(FormBuilder, {
-      props: {
-        model,
-        controlOptions: {
-          initialValues: {
-            method: 'linear',
-          },
-        },
-      },
-    })
-
-    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
-    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
-  })
-
   it('ignores external modelValue keys that are not part of the form schema', async () => {
     const wrapper = mount(FormBuilder, {
       props: {
-        controls,
+        spec,
         modelValue: { threshold: 0.25, externalContext: 'experiment-1' },
       },
     })
@@ -275,103 +220,40 @@ describe('FormBuilder', () => {
     expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
   })
 
-  it('uses explicit schema when both schema and controls are provided', () => {
-    const schema: FormSchema = {
-      sections: [
-        {
-          id: 'explicit',
-          title: 'Explicit Schema',
-          fields: [
-            {
-              name: 'explicitField',
-              label: 'Explicit Field',
-              type: 'text',
-              defaultValue: 'from schema',
-            },
-          ],
-        },
-      ],
-    }
-
+  it('renders no action bar when the control model sets no actions', () => {
     const wrapper = mount(FormBuilder, {
-      props: { controls, schema },
+      props: { spec },
     })
 
-    expect(wrapper.text()).toContain('Explicit Schema')
-    expect(wrapper.text()).not.toContain('Parameters')
-    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('from schema')
+    expect(wrapper.find('.mint-form-actions').exists()).toBe(false)
   })
 
-  it('can hide the default actions for embedded forms', () => {
+  it('labels the action bar from the control model actions', () => {
     const wrapper = mount(FormBuilder, {
-      props: {
-        controls,
-        showActions: false,
-      },
+      props: { spec: defineControlModel({ controls, actions: { submitLabel: 'Run', showCancel: true } }) },
     })
 
-    expect(wrapper.find('.mint-form-actions').exists()).toBe(false)
+    expect(wrapper.get('.mint-form-actions').text()).toContain('Run')
+    expect(wrapper.get('.mint-form-actions').text()).toContain('Cancel')
   })
 
-  it('renders boolean fields as compact choice rows', async () => {
-    const schema: FormSchema = {
-      sections: [
-        {
-          id: 'display',
-          title: 'Display',
-          fields: [
-            {
-              name: 'showOutliers',
-              label: 'Show outliers',
-              type: 'toggle',
-              defaultValue: true,
-              hint: 'Keep flagged peaks visible',
-              icon: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'],
-            },
-            {
-              name: 'includeMetadata',
-              label: 'Include metadata',
-              type: 'checkbox',
-              defaultValue: false,
-              hint: 'Add method context',
-              icon: ['M12 3c4.418 0 8 1.343 8 3s-3.582 3-8 3-8-1.343-8-3z'],
-            },
-          ],
-        },
-      ],
-    }
-
+  it('applies the control model enhancements', async () => {
     const wrapper = mount(FormBuilder, {
-      props: { schema, showActions: false },
+      props: {
+        spec: defineControlModel({
+          controls,
+          enhancements: { fields: { method: { options: () => ['linear', 'quadratic'] } } },
+        }),
+      },
     })
+    await nextTick()
 
-    const toggle = wrapper.get('.mint-toggle--row')
-    const checkbox = wrapper.get('.mint-checkbox--row')
-
-    expect(toggle.text()).toContain('Show outliers')
-    expect(toggle.text()).not.toContain('Keep flagged peaks visible')
-    expect(toggle.find('.mint-toggle__row-svg').exists()).toBe(true)
-    expect(wrapper.findAll('.mint-form-field__label')).toHaveLength(0)
-
-    expect(checkbox.text()).toContain('Include metadata')
-    expect(checkbox.text()).not.toContain('Add method context')
-    expect(checkbox.find('.mint-checkbox__row-svg').exists()).toBe(true)
-    expect(wrapper.findAllComponents(Tooltip).map(tooltip => tooltip.props('text'))).toEqual([
-      'Keep flagged peaks visible',
-      'Add method context',
-    ])
-
-    await toggle.trigger('click')
-
-    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toMatchObject({
-      showOutliers: false,
-      includeMetadata: false,
-    })
+    expect(wrapper.findAll('option').map(option => option.text())).toContain('quadratic')
   })
 
-  it('renders default actions by default', () => {
+  it('renders the action bar when the control model sets actions', () => {
     const wrapper = mount(FormBuilder, {
-      props: { controls },
+      props: { spec: specWithActions },
     })
 
     expect(wrapper.find('.mint-form-actions').exists()).toBe(true)