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

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

@@ -21,8 +21,10 @@ const globalOptions = {
   stubs: {
     DataFrame: true,
     DoseCalculator: true,
+    ExperimentTimeline: true,
     PlateMapEditor: true,
     SampleSelector: true,
+    ScheduleCalendar: true,
     WellPlate: true,
   },
 }
@@ -124,14 +126,26 @@ describe('BioTemplatePackWorkspaceView', () => {
         pack: 'cell-culture-screen',
       },
       slots: {
-        default: ({ bindings, pack, componentPropsById, form, getComponentProps, pillNav, sidebar, topBarSettings }) => h(
+        default: ({
+          bindings,
+          pack,
+          componentBindingsById,
+          componentPropsById,
+          form,
+          getComponentProps,
+          pillNav,
+          sidebar,
+          topBarSettings,
+        }) => h(
           'pre',
           { class: 'component-props' },
           JSON.stringify({
             pack: pack.name,
             activeView: sidebar.activeView,
             doseMode: componentPropsById['dose-response:DoseCalculator'].mode,
+            bindingMode: componentBindingsById['dose-response:DoseCalculator'].props.mode,
             bindingDoseMode: bindings.componentPropsById['dose-response:DoseCalculator'].mode,
+            nestedBindingMode: bindings.componentBindingsById['dose-response:DoseCalculator'].props.mode,
             hasPlateWells: Boolean(componentPropsById['plate-map:WellPlate'].wells),
             doseModeFromGetter: getComponentProps('DoseCalculator')?.mode,
             bindingDoseModeFromGetter: bindings.getComponentProps('DoseCalculator')?.mode,
@@ -148,7 +162,9 @@ describe('BioTemplatePackWorkspaceView', () => {
       pack: 'cell-culture-screen',
       activeView: 'design',
       doseMode: 'serial',
+      bindingMode: 'serial',
       bindingDoseMode: 'serial',
+      nestedBindingMode: 'serial',
       hasPlateWells: true,
       doseModeFromGetter: 'serial',
       bindingDoseModeFromGetter: 'serial',
@@ -158,4 +174,19 @@ describe('BioTemplatePackWorkspaceView', () => {
     })
     expect(wrapper.find('.mint-bio-template-renderer').exists()).toBe(false)
   })
+
+  it('renders metabolism pack run queues as timeline and calendar previews', () => {
+    const wrapper = mount(BioTemplatePackWorkspaceView, {
+      props: {
+        pack: 'metabolism',
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.text()).toContain('Omics assay saves the full template collection')
+    expect(wrapper.find('[data-component-binding-id="instrument-run:ExperimentTimeline"]').exists()).toBe(true)
+    expect(wrapper.find('[data-component-binding-id="instrument-run:ScheduleCalendar"]').exists()).toBe(true)
+    expect(wrapper.find('[data-template-component="ExperimentTimeline"]').exists()).toBe(true)
+    expect(wrapper.find('[data-template-component="ScheduleCalendar"]').exists()).toBe(true)
+  })
 })

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

@@ -32,6 +32,7 @@ describe('BioTemplatePresetWorkspaceView', () => {
     expect(wrapper.find('.mint-bio-template-preset-workspace').exists()).toBe(true)
     expect(wrapper.text()).toContain('Well-plate screen preset saves')
     expect(wrapper.find('.mint-sidebar').exists()).toBe(true)
+    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('analysis')
     expect(wrapper.find('.mint-bio-template-renderer').exists()).toBe(true)
     expect(wrapper.text()).toContain('plate-map')
     expect(wrapper.text()).toContain('dose-response')
@@ -68,6 +69,26 @@ describe('BioTemplatePresetWorkspaceView', () => {
     expect(wrapper.text()).toContain('dose-response')
   })
 
+  it('passes through sidebar variant overrides', () => {
+    const wrapper = mount(BioTemplatePresetWorkspaceView, {
+      props: {
+        preset: 'wellplate-screen',
+        sidebarVariant: 'default',
+      },
+      global: {
+        stubs: {
+          DataFrame: true,
+          DoseCalculator: true,
+          PlateMapEditor: true,
+          SampleSelector: true,
+          WellPlate: true,
+        },
+      },
+    })
+
+    expect(wrapper.findComponent(AppSidebar).props('variant')).toBe('default')
+  })
+
   it('updates the internally generated workspace when the preset changes after mount', async () => {
     const wrapper = mount(BioTemplatePresetWorkspaceView, {
       props: {
@@ -194,13 +215,15 @@ describe('BioTemplatePresetWorkspaceView', () => {
         preset: 'wellplate-screen',
       },
       slots: {
-        default: ({ bindings, collection, componentPropsById, getComponentProps }) => h(
+        default: ({ bindings, collection, componentBindingsById, componentPropsById, getComponentProps }) => h(
           'pre',
           { class: 'component-props' },
           JSON.stringify({
             preset: collection.metadata?.preset,
             doseMode: componentPropsById['dose-response:DoseCalculator'].mode,
+            bindingMode: componentBindingsById['dose-response:DoseCalculator'].props.mode,
             bindingDoseMode: bindings.componentPropsById.value['dose-response:DoseCalculator'].mode,
+            nestedBindingMode: bindings.componentBindingsById.value['dose-response:DoseCalculator'].props.mode,
             hasPlateWells: Boolean(componentPropsById['plate-map:WellPlate'].wells),
             doseModeFromGetter: getComponentProps('DoseCalculator')?.mode,
             bindingDoseModeFromGetter: bindings.getComponentProps('DoseCalculator')?.mode,
@@ -221,7 +244,9 @@ describe('BioTemplatePresetWorkspaceView', () => {
     expect(JSON.parse(wrapper.find('.component-props').text())).toEqual({
       preset: 'wellplate-screen',
       doseMode: 'serial',
+      bindingMode: 'serial',
       bindingDoseMode: 'serial',
+      nestedBindingMode: 'serial',
       hasPlateWells: true,
       doseModeFromGetter: 'serial',
       bindingDoseModeFromGetter: 'serial',
@@ -278,4 +303,26 @@ describe('BioTemplatePresetWorkspaceView', () => {
     expect(workspace.activeControlView.value).toBe('analysis')
     expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('analysis')
   })
+
+  it('renders LC-MS batch timeline and calendar previews from one preset prop', () => {
+    const wrapper = mount(BioTemplatePresetWorkspaceView, {
+      props: {
+        preset: 'lcms-batch',
+      },
+      global: {
+        stubs: {
+          DataFrame: true,
+          ExperimentTimeline: true,
+          ScheduleCalendar: true,
+          SampleSelector: true,
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('LC-MS batch preset saves')
+    expect(wrapper.find('[data-component-binding-id="instrument-run:ExperimentTimeline"]').exists()).toBe(true)
+    expect(wrapper.find('[data-component-binding-id="instrument-run:ScheduleCalendar"]').exists()).toBe(true)
+    expect(wrapper.find('[data-template-component="ExperimentTimeline"]').exists()).toBe(true)
+    expect(wrapper.find('[data-template-component="ScheduleCalendar"]').exists()).toBe(true)
+  })
 })

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

@@ -33,6 +33,31 @@ describe('BioTemplateRenderer', () => {
     expect(wrapper.text()).toContain('dose-response')
   })
 
+  it('renders instrument-run timelines from LC-MS template collections', () => {
+    const collection = createLcmsBatchCollection({
+      samples: ['S001', 'S002'],
+      instrument: 'LC-MS',
+    })
+    const wrapper = mount(BioTemplateRenderer, {
+      props: { target: collection },
+      global: {
+        stubs: {
+          DataFrame: true,
+          ExperimentTimeline: true,
+          SampleSelector: true,
+          ScheduleCalendar: true,
+        },
+      },
+    })
+
+    expect(wrapper.find('[data-component-binding-id="instrument-run:ScheduleCalendar"]').exists()).toBe(true)
+    expect(wrapper.find('[data-component-binding-id="instrument-run:ExperimentTimeline"]').exists()).toBe(true)
+    expect(wrapper.find('[data-component-binding-id="assay-matrix:SampleSelector"]').exists()).toBe(true)
+    expect(wrapper.find('[data-template-component="ScheduleCalendar"]').exists()).toBe(true)
+    expect(wrapper.find('[data-template-component="ExperimentTimeline"]').exists()).toBe(true)
+    expect(wrapper.find('[data-template-id="instrument-run"]').exists()).toBe(true)
+  })
+
   it('filters rendered components with include and exclude lists', () => {
     const collection = createWellPlateScreenCollection()
     const wrapper = mount(BioTemplateRenderer, {

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

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import CalendarGridPanel from '../../components/CalendarGridPanel.vue'
+import CalendarGridPanelInternal from '../../components/internal/CalendarGridPanelInternal.vue'
 import type { CalendarGridDay } from '../../composables/useCalendarGrid'
 
 const days: CalendarGridDay[] = [
@@ -9,9 +9,9 @@ const days: CalendarGridDay[] = [
   { date: new Date(2026, 3, 22), isCurrentMonth: true, isDisabled: true },
 ]
 
-describe('CalendarGridPanel', () => {
+describe('CalendarGridPanelInternal', () => {
   it('renders calendar state and emits navigation and selection events', async () => {
-    const wrapper = mount(CalendarGridPanel, {
+    const wrapper = mount(CalendarGridPanelInternal, {
       props: {
         weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
         monthYear: 'April 2026',

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

@@ -0,0 +1,278 @@
+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 ExperimentTimelineStub = defineComponent({
+  name: 'ExperimentTimeline',
+  props: {
+    modelValue: { type: Array, default: () => [] },
+    editable: { type: Boolean, default: true },
+    size: { type: String, default: undefined },
+  },
+  template: '<div data-test="experiment-timeline" />',
+})
+
+const ScheduleCalendarStub = defineComponent({
+  name: 'ScheduleCalendar',
+  props: {
+    modelValue: { type: [String, Date], default: undefined },
+    events: { type: Array, default: () => [] },
+    readonly: { type: Boolean, default: false },
+    showNavigation: { type: Boolean, default: true },
+    showViewToggle: { type: Boolean, default: true },
+    view: { type: String, default: undefined },
+  },
+  template: '<div data-test="schedule-calendar" />',
+})
+
+const SampleSelectorStub = defineComponent({
+  name: 'SampleSelector',
+  props: {
+    samples: { type: Array, default: () => [] },
+    modelValue: { type: Array, default: () => [] },
+    enableGrouping: { type: Boolean, default: true },
+    enableSmartGroup: { type: Boolean, default: true },
+  },
+  template: '<div data-test="sample-selector" />',
+})
+
+const globalOptions = {
+  stubs: {
+    DataFrame: DataFrameStub,
+    DoseCalculator: DoseCalculatorStub,
+    ExperimentTimeline: ExperimentTimelineStub,
+    PlateMapEditor: PlateMapEditorStub,
+    SampleSelector: SampleSelectorStub,
+    ScheduleCalendar: ScheduleCalendarStub,
+    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',
+    })
+  })
+
+  it('renders ExperimentTimeline bindings with preview-safe props', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        binding: {
+          id: 'instrument-run:ExperimentTimeline',
+          component: 'ExperimentTimeline',
+          propsObject: {
+            modelValue: [{ id: 's001-run', name: 'S001', type: 'measurement', status: 'pending', order: 1 }],
+            editable: true,
+          },
+        },
+        dense: true,
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.find('[data-component-binding-id="instrument-run:ExperimentTimeline"]').exists()).toBe(true)
+    expect(wrapper.findComponent(ExperimentTimelineStub).props()).toMatchObject({
+      modelValue: [{ id: 's001-run', name: 'S001', type: 'measurement', status: 'pending', order: 1 }],
+      editable: false,
+      size: 'sm',
+    })
+  })
+
+  it('renders ScheduleCalendar bindings with preview-safe props', () => {
+    const events = [{ id: 's001-run', title: 'S001', start: '2024-01-01T08:00:00.000Z', end: '2024-01-01T08:10:00.000Z' }]
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        binding: {
+          id: 'instrument-run:ScheduleCalendar',
+          component: 'ScheduleCalendar',
+          propsObject: {
+            modelValue: events[0].start,
+            events,
+            readonly: false,
+            showNavigation: true,
+            showViewToggle: true,
+            view: 'day',
+          },
+        },
+        dense: true,
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.find('[data-component-binding-id="instrument-run:ScheduleCalendar"]').exists()).toBe(true)
+    expect(wrapper.findComponent(ScheduleCalendarStub).props()).toMatchObject({
+      modelValue: events[0].start,
+      events,
+      readonly: true,
+      showNavigation: false,
+      showViewToggle: false,
+      view: 'day',
+    })
+  })
+
+  it('renders SampleSelector bindings with preview-safe grouping props', () => {
+    const wrapper = mount(ComponentBindingRenderer, {
+      props: {
+        binding: {
+          id: 'assay-matrix:SampleSelector',
+          component: 'SampleSelector',
+          propsObject: {
+            samples: ['S001', 'S002'],
+            modelValue: [],
+          },
+        },
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.find('[data-component-binding-id="assay-matrix:SampleSelector"]').exists()).toBe(true)
+    expect(wrapper.findComponent(SampleSelectorStub).props()).toMatchObject({
+      samples: ['S001', 'S002'],
+      modelValue: [],
+      enableGrouping: false,
+      enableSmartGroup: false,
+    })
+  })
+})