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

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

@@ -0,0 +1,161 @@
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import { describe, expect, it } from 'vitest'
+import ComponentBindingRenderer from '../../components/ComponentBindingRenderer.vue'
+
+const WellPlateStub = defineComponent({
+  name: 'WellPlate',
+  props: {
+    modelValue: { type: Array, default: () => [] },
+    readonly: { type: Boolean, default: false },
+    size: { type: String, default: undefined },
+  },
+  template: '<div data-test="well-plate" />',
+})
+
+const DoseCalculatorStub = defineComponent({
+  name: 'DoseCalculator',
+  props: {
+    mode: { type: String, default: undefined },
+    targetWells: { type: Array, default: () => [] },
+  },
+  template: '<div data-test="dose-calculator" />',
+})
+
+const DataFrameStub = defineComponent({
+  name: 'DataFrame',
+  props: {
+    data: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    size: { type: String, default: undefined },
+    maxHeight: { type: String, default: undefined },
+  },
+  template: '<div data-test="data-frame" />',
+})
+
+const PlateMapEditorStub = defineComponent({
+  name: 'PlateMapEditor',
+  props: {
+    modelValue: { type: Object, default: () => ({}) },
+    showToolbar: { type: Boolean, default: true },
+    showSidebar: { type: Boolean, default: true },
+    allowAddPlates: { type: Boolean, default: true },
+    allowAddSamples: { type: Boolean, default: true },
+    size: { type: String, default: undefined },
+  },
+  template: '<div data-test="plate-map-editor" />',
+})
+
+const globalOptions = {
+  stubs: {
+    DataFrame: DataFrameStub,
+    DoseCalculator: DoseCalculatorStub,
+    PlateMapEditor: PlateMapEditorStub,
+    WellPlate: WellPlateStub,
+  },
+}
+
+describe('ComponentBindingRenderer', () => {
+  it('renders known SDK component bindings and skips unsupported names', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        bindings: [
+          {
+            id: 'plate',
+            component: 'WellPlate',
+            props: { modelValue: ['A1'] },
+            description: 'Selected wells',
+          },
+          {
+            id: 'dose',
+            component: 'DoseCalculator',
+            props: { mode: 'serial', targetWells: ['A1'] },
+          },
+          {
+            id: 'custom',
+            component: 'CustomChart',
+            props: { score: 0.5 },
+          },
+        ],
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.find('[data-component-binding-id="plate"]').exists()).toBe(true)
+    expect(wrapper.find('[data-component-binding-id="dose"]').exists()).toBe(true)
+    expect(wrapper.find('[data-component-binding-id="custom"]').exists()).toBe(false)
+    expect(wrapper.findComponent(WellPlateStub).props()).toMatchObject({
+      modelValue: ['A1'],
+      readonly: true,
+      size: 'fill',
+    })
+    expect(wrapper.findComponent(DoseCalculatorStub).props()).toMatchObject({
+      mode: 'serial',
+      targetWells: ['A1'],
+    })
+    expect(wrapper.text()).toContain('Selected wells')
+  })
+
+  it('accepts a single binding and preview-safe dense props', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        binding: {
+          id: 'plate-map',
+          component: 'PlateMapEditor',
+          propsObject: { modelValue: { plates: [] } },
+        },
+        dense: true,
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(PlateMapEditorStub).props()).toMatchObject({
+      showToolbar: false,
+      showSidebar: false,
+      allowAddPlates: false,
+      allowAddSamples: false,
+      size: 'md',
+    })
+  })
+
+  it('filters bindings and renders a compact empty state', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        bindings: [
+          {
+            id: 'table',
+            component: 'DataFrame',
+            props: { data: [{ id: 1 }], columns: [{ key: 'id', label: 'ID' }] },
+          },
+        ],
+        include: ['WellPlate'],
+        emptyText: 'No components.',
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.find('[data-component-binding-id="table"]').exists()).toBe(false)
+    expect(wrapper.text()).toContain('No components.')
+  })
+
+  it('normalizes DataFrame sizing in dense mode', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        bindings: [
+          {
+            id: 'table',
+            component: 'DataFrame',
+            props: { data: [{ id: 1 }], columns: [{ key: 'id', label: 'ID' }] },
+          },
+        ],
+        dense: true,
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(DataFrameStub).props()).toMatchObject({
+      size: 'sm',
+      maxHeight: '280px',
+    })
+  })
+})

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

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import { computed, h, nextTick, ref } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
+import AppLayout from '../../components/AppLayout.vue'
 import AppSidebar from '../../components/AppSidebar.vue'
 import AppTopBar from '../../components/AppTopBar.vue'
 import ControlWorkspaceView from '../../components/ControlWorkspaceView.vue'
@@ -96,16 +97,38 @@ describe('ControlWorkspaceView', () => {
     const wrapper = mountView(workspace)
 
     expect(wrapper.findComponent(AppTopBar).props('title')).toBe('Analysis Workspace')
-    expect(wrapper.findComponent(AppTopBar).props('tabs')).toBeUndefined()
+    expect('tabs' in wrapper.findComponent(AppTopBar).props()).toBe(false)
     expect(wrapper.findComponent(AppTopBar).props('pillNav')).toEqual([
       { id: 'analysis', label: 'Run' },
       { id: 'results', label: 'Results' },
     ])
     expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('analysis')
+    expect(wrapper.findComponent(AppLayout).props('responsiveSidebar')).toBe(true)
     expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('analysis')
+    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('analysis')
     expect(wrapper.findComponent(FormBuilder).props('modelValue')).toMatchObject(workspace.values)
   })
 
+  it('lets callers override the generated sidebar chrome', () => {
+    const wrapper = mount(ControlWorkspaceView, {
+      props: {
+        workspace: createWorkspace(),
+        sidebarVariant: 'default',
+        responsiveSidebar: false,
+        sidebarTitle: 'Peak Picking',
+        sidebarSubtitle: 'Current experiment',
+        sidebarBadge: 3,
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppLayout).props('responsiveSidebar')).toBe(false)
+    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('default')
+    expect(wrapper.findComponent(AppSidebar).props('title')).toBe('Peak Picking')
+    expect(wrapper.findComponent(AppSidebar).props('subtitle')).toBe('Current experiment')
+    expect(wrapper.findComponent(AppSidebar).props('badge')).toBe(3)
+  })
+
   it('can create the workspace internally from direct controls', async () => {
     const controls = defineControls({
       threshold: {
@@ -365,26 +388,49 @@ describe('ControlWorkspaceView', () => {
         model,
       },
       slots: {
-        default: ({ componentPropsById }) => h(
+        default: ({ componentBindings, componentPropsById }) => h(
           'pre',
           { class: 'component-props-by-id' },
-          JSON.stringify(componentPropsById),
+          JSON.stringify({ componentBindings, componentPropsById }),
         ),
       },
       global: globalOptions,
     })
 
     expect(JSON.parse(wrapper.find('.component-props-by-id').text())).toEqual({
-      plate: {
-        modelValue: ['A1', 'A2'],
-        format: 96,
-        disabled: false,
-      },
-      dose: {
-        mode: 'serial',
-        targetWells: ['A1', 'A2'],
-        disabled: false,
-        molecularWeight: 300,
+      componentBindings: [
+        {
+          id: 'plate',
+          component: 'WellPlate',
+          props: {
+            modelValue: ['A1', 'A2'],
+            format: 96,
+            disabled: false,
+          },
+        },
+        {
+          id: 'dose',
+          component: 'DoseCalculator',
+          props: {
+            mode: 'serial',
+            targetWells: ['A1', 'A2'],
+            disabled: false,
+            molecularWeight: 300,
+          },
+        },
+      ],
+      componentPropsById: {
+        plate: {
+          modelValue: ['A1', 'A2'],
+          format: 96,
+          disabled: false,
+        },
+        dose: {
+          mode: 'serial',
+          targetWells: ['A1', 'A2'],
+          disabled: false,
+          molecularWeight: 300,
+        },
       },
     })
   })
@@ -423,6 +469,23 @@ describe('ControlWorkspaceView', () => {
           disabled: values => !values.enabled,
         },
       },
+      componentBindings: {
+        dose: {
+          component: 'DoseCalculator',
+          props: {
+            mode: 'doseMode',
+            targetWells: 'targetWells',
+            disabled: values => !values.enabled,
+          },
+        },
+        plate: {
+          component: 'WellPlate',
+          props: {
+            modelValue: 'targetWells',
+            disabled: values => !values.enabled,
+          },
+        },
+      },
     })
 
     const wrapper = mount(ControlWorkspaceView, {
@@ -430,16 +493,35 @@ describe('ControlWorkspaceView', () => {
         ...model,
       },
       slots: {
-        default: ({ componentProps, componentPropsById }) => h(
+        default: ({ componentBindingsById, componentProps, componentPropsById }) => h(
           'pre',
           { class: 'component-props' },
-          JSON.stringify({ componentProps, componentPropsById }),
+          JSON.stringify({ componentBindingsById, componentProps, componentPropsById }),
         ),
       },
       global: globalOptions,
     })
 
     expect(JSON.parse(wrapper.find('.component-props').text())).toEqual({
+      componentBindingsById: {
+        dose: {
+          id: 'dose',
+          component: 'DoseCalculator',
+          props: {
+            mode: 'serial',
+            targetWells: ['A1', 'A2'],
+            disabled: false,
+          },
+        },
+        plate: {
+          id: 'plate',
+          component: 'WellPlate',
+          props: {
+            modelValue: ['A1', 'A2'],
+            disabled: false,
+          },
+        },
+      },
       componentProps: {
         mode: 'serial',
         targetWells: ['A1', 'A2'],
@@ -466,6 +548,25 @@ describe('ControlWorkspaceView', () => {
     await nextTick()
 
     expect(JSON.parse(wrapper.find('.component-props').text())).toEqual({
+      componentBindingsById: {
+        dose: {
+          id: 'dose',
+          component: 'DoseCalculator',
+          props: {
+            mode: 'dilution',
+            targetWells: ['B1'],
+            disabled: true,
+          },
+        },
+        plate: {
+          id: 'plate',
+          component: 'WellPlate',
+          props: {
+            modelValue: ['B1'],
+            disabled: true,
+          },
+        },
+      },
       componentProps: {
         mode: 'dilution',
         targetWells: ['B1'],
@@ -839,51 +940,6 @@ describe('ControlWorkspaceView', () => {
     expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('results')
   })
 
-  it('can opt into legacy topbar tab navigation from the generated workspace', async () => {
-    const controls = defineControls({
-      threshold: {
-        type: 'number',
-        default: 0.05,
-        section: 'parameters',
-        view: 'analysis',
-      },
-      chartScale: {
-        default: 'linear',
-        options: ['linear', 'log'],
-        section: 'display',
-        view: 'results',
-      },
-    })
-
-    const wrapper = mount(ControlWorkspaceView, {
-      props: {
-        controls,
-        controlOptions: {
-          views: {
-            analysis: { label: 'Run' },
-            results: { label: 'Results' },
-          },
-        },
-        navigation: 'tabs',
-      },
-      global: globalOptions,
-    })
-
-    const topBar = wrapper.findComponent(AppTopBar)
-    expect(topBar.props('pillNav')).toBeUndefined()
-    expect(topBar.props('tabs')).toEqual([
-      { id: 'analysis', label: 'Run' },
-      { id: 'results', label: 'Results' },
-    ])
-    expect(topBar.props('currentTabId')).toBe('analysis')
-
-    topBar.vm.$emit('tab-select', { id: 'results', label: 'Results' })
-    await nextTick()
-
-    expect(wrapper.findComponent(AppTopBar).props('currentTabId')).toBe('results')
-    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('results')
-  })
-
   it('exposes workspace data to the default slot', () => {
     const workspace = createWorkspace()
     const wrapper = mount(ControlWorkspaceView, {
@@ -976,6 +1032,15 @@ describe('ControlWorkspaceView', () => {
           disabled: values => !values.enabled,
         },
       },
+      componentBindings: {
+        chart: {
+          component: 'ResultChart',
+          props: {
+            score: 'threshold',
+            disabled: values => !values.enabled,
+          },
+        },
+      },
     })
 
     const wrapper = mount(ControlWorkspaceView, {
@@ -987,7 +1052,7 @@ describe('ControlWorkspaceView', () => {
           'pre',
           { class: 'topbar-bindings' },
           JSON.stringify({
-            legacyTabId: topBar.currentTabId,
+            slotPillId: topBar.currentPillId,
             pillId: bindings.topBar.value.currentPillId,
           }),
         ),
@@ -999,12 +1064,15 @@ describe('ControlWorkspaceView', () => {
             bindingActiveView: bindings.sidebar.activeView,
           }),
         ),
-        default: ({ bindings, componentPropsById }) => h(
+        default: ({ bindings, componentBindingsById, componentPropsById }) => h(
           'pre',
           { class: 'default-bindings' },
           JSON.stringify({
             formThreshold: bindings.form.modelValue.threshold,
+            component: componentBindingsById.chart.component,
+            bindingComponent: bindings.componentBindingsById.value.chart.component,
             bindingScore: bindings.componentProps.value.score,
+            bindingComponentScore: bindings.componentBindings.value[0].props.score,
             slotScore: componentPropsById.chart.score,
             bindingSlotScore: bindings.componentPropsById.value.chart.score,
           }),
@@ -1014,7 +1082,7 @@ describe('ControlWorkspaceView', () => {
     })
 
     expect(JSON.parse(wrapper.find('.topbar-bindings').text())).toEqual({
-      legacyTabId: 'analysis',
+      slotPillId: 'analysis',
       pillId: 'analysis',
     })
     expect(JSON.parse(wrapper.find('.sidebar-bindings').text())).toEqual({
@@ -1023,7 +1091,10 @@ describe('ControlWorkspaceView', () => {
     })
     expect(JSON.parse(wrapper.find('.default-bindings').text())).toEqual({
       formThreshold: 0.05,
+      component: 'ResultChart',
+      bindingComponent: 'ResultChart',
       bindingScore: 0.05,
+      bindingComponentScore: 0.05,
       slotScore: 0.05,
       bindingSlotScore: 0.05,
     })

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

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import { describe, expect, it } from 'vitest'
-import CalendarGridPanel from '../../components/CalendarGridPanel.vue'
+import CalendarGridPanelInternal from '../../components/internal/CalendarGridPanelInternal.vue'
 import DateTimePicker from '../../components/DateTimePicker.vue'
 
 describe('DateTimePicker', () => {
@@ -15,7 +15,7 @@ describe('DateTimePicker', () => {
     await wrapper.find('input').trigger('click')
     await nextTick()
 
-    expect(wrapper.findComponent(CalendarGridPanel).exists()).toBe(true)
+    expect(wrapper.findComponent(CalendarGridPanelInternal).exists()).toBe(true)
     expect(wrapper.find('.mint-date-picker__day--selected').text()).toBe('22')
 
     const timeButton = wrapper.findAll('.mint-datetime-picker__time-chip')

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

@@ -0,0 +1,185 @@
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import { computed, defineComponent, h, ref, nextTick } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import AppLayout from '../../components/AppLayout.vue'
+import AppSidebar from '../../components/AppSidebar.vue'
+import DoseDesignWorkspaceView from '../../components/DoseDesignWorkspaceView.vue'
+
+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' as const),
+    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(),
+  })),
+}))
+
+const WellPlateStub = defineComponent({
+  name: 'WellPlate',
+  props: {
+    modelValue: { type: Array, default: () => [] },
+    format: { type: Number, default: 96 },
+    wells: { type: Object, default: undefined },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: undefined },
+    selectionMode: { type: String, default: undefined },
+    heatmap: { type: Object, default: undefined },
+  },
+  emits: ['update:modelValue'],
+  template: '<button data-test="well-plate" @click="$emit(\'update:modelValue\', [\'B1\', \'B2\'])" />',
+})
+
+const DoseCalculatorStub = defineComponent({
+  name: 'DoseCalculator',
+  props: {
+    mode: { type: String, default: 'auto' },
+    targetWells: { type: Array, default: () => [] },
+    disabled: { type: Boolean, default: false },
+    molecularWeight: { type: Number, default: undefined },
+  },
+  template: '<div data-test="dose-calculator" />',
+})
+
+function mountWorkspace(
+  props: Record<string, unknown> = {},
+  slots: Record<string, unknown> = {},
+) {
+  return mount(DoseDesignWorkspaceView, {
+    props,
+    slots: slots as never,
+    global: {
+      plugins: [createPinia()],
+      stubs: {
+        WellPlate: WellPlateStub,
+        DoseCalculator: DoseCalculatorStub,
+        'router-link': {
+          template: '<a><slot /></a>',
+        },
+        BaseModal: {
+          template: '<div><slot /></div>',
+        },
+      },
+    },
+  })
+}
+
+describe('DoseDesignWorkspaceView', () => {
+  it('renders WellPlate and DoseCalculator from one dose-design model', async () => {
+    const wrapper = mountWorkspace({
+      modelValue: {
+        selectedWells: ['A1'],
+        plateFormat: 384,
+        doseMode: 'serial',
+        disabled: false,
+      },
+      doseDesignOptions: {
+        includeMolecularWeight: true,
+      },
+      wellPlateProps: {
+        size: 'lg',
+        selectionMode: 'single',
+        heatmap: { enabled: true },
+      },
+      doseCalculatorProps: {
+        disabled: true,
+      },
+    })
+
+    const wellPlate = wrapper.findComponent(WellPlateStub)
+    const doseCalculator = wrapper.findComponent(DoseCalculatorStub)
+
+    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('analysis')
+    expect(wellPlate.props()).toMatchObject({
+      modelValue: ['A1'],
+      format: 384,
+      size: 'lg',
+      selectionMode: 'single',
+      heatmap: { enabled: true },
+    })
+    expect(doseCalculator.props()).toMatchObject({
+      mode: 'serial',
+      targetWells: ['A1'],
+      disabled: true,
+      molecularWeight: 300,
+    })
+
+    await wellPlate.trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toMatchObject({
+      selectedWells: ['B1', 'B2'],
+    })
+  })
+
+  it('uses custom generated component prop ids from doseDesignOptions', () => {
+    const wrapper = mountWorkspace({
+      doseDesignOptions: {
+        selectedWells: ['C1'],
+        componentProps: {
+          plateId: 'plateView',
+          doseId: 'doseTool',
+        },
+      },
+    })
+
+    expect(wrapper.findComponent(WellPlateStub).props('modelValue')).toEqual(['C1'])
+    expect(wrapper.findComponent(DoseCalculatorStub).props('targetWells')).toEqual(['C1'])
+  })
+
+  it('passes through sidebar chrome overrides', () => {
+    const wrapper = mountWorkspace({
+      sidebarVariant: 'default',
+      responsiveSidebar: false,
+      sidebarTitle: 'Dose Controls',
+      sidebarSubtitle: 'Plate setup',
+      sidebarBadge: 'ready',
+    })
+
+    expect(wrapper.findComponent(AppLayout).props('responsiveSidebar')).toBe(false)
+    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('default')
+    expect(wrapper.findComponent(AppSidebar).props('title')).toBe('Dose Controls')
+    expect(wrapper.findComponent(AppSidebar).props('subtitle')).toBe('Plate setup')
+    expect(wrapper.findComponent(AppSidebar).props('badge')).toBe('ready')
+  })
+
+  it('exposes merged component props to the default slot', () => {
+    const wrapper = mountWorkspace(
+      {
+        doseDesignOptions: {
+          selectedWells: ['D1'],
+        },
+      },
+      {
+        default: (rawProps: unknown) => {
+          const props = rawProps as {
+            wellPlateProps: Record<string, unknown>
+            doseCalculatorProps: Record<string, unknown>
+          }
+          return h('pre', { class: 'slot-props' }, JSON.stringify({
+            plate: props.wellPlateProps.modelValue,
+            dose: props.doseCalculatorProps.targetWells,
+          }))
+        },
+      },
+    )
+
+    expect(JSON.parse(wrapper.find('.slot-props').text())).toEqual({
+      plate: ['D1'],
+      dose: ['D1'],
+    })
+  })
+})