@morscherlab/mint-sdk 1.0.0-rc.2 → 1.0.0-rc.5

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

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import ProtocolStepParameterField from '../../components/ProtocolStepParameterField.vue'
+import type { ParameterDefinition } from '../../composables/useProtocolTemplates'
+
+describe('ProtocolStepParameterField', () => {
+  it('emits numeric parameter changes with valueAsNumber', async () => {
+    const parameter: ParameterDefinition = {
+      key: 'temperature',
+      label: 'Temperature',
+      type: 'temperature',
+      unit: 'C',
+    }
+
+    const wrapper = mount(ProtocolStepParameterField, {
+      props: {
+        parameter,
+        modelValue: 37,
+      },
+    })
+
+    await wrapper.get('input').setValue('25')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([25])
+  })
+
+  it('renders field validation errors', () => {
+    const parameter: ParameterDefinition = {
+      key: 'buffer',
+      label: 'Buffer',
+      type: 'select',
+      options: [{ value: 'PBS', label: 'PBS' }],
+    }
+
+    const wrapper = mount(ProtocolStepParameterField, {
+      props: {
+        parameter,
+        error: 'Buffer is required',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Buffer is required')
+    expect(wrapper.get('select').classes()).toContain('mint-protocol-editor__input--error')
+  })
+})

package/src/__tests__/components/ReagentList.presentation.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+import type { Reagent } from '../../types'
+import {
+  formatReagentExpiryDate,
+  getReagentColumnValue,
+  getReagentRowClasses,
+  getReagentStockFillClass,
+  getReagentStockLevel,
+  isReagentExpired,
+  isReagentExpiringSoon,
+  isReagentLowStock,
+} from '../../components/ReagentList.presentation'
+
+describe('ReagentList presentation helpers', () => {
+  const reagent: Reagent = {
+    id: 'reagent-1',
+    name: 'Glucose',
+    catalogNumber: 'G-7528',
+    lotNumber: 'LOT-A',
+    supplier: 'Sigma',
+    expiryDate: '2026-06-01T00:00:00.000Z',
+    stockLevel: 12,
+  }
+
+  it('extracts sortable values for table columns', () => {
+    expect(getReagentColumnValue(reagent, 'name')).toBe('Glucose')
+    expect(getReagentColumnValue(reagent, 'catalog')).toBe('G-7528')
+    expect(getReagentColumnValue(reagent, 'expiry')).toBe(new Date(reagent.expiryDate!).getTime())
+    expect(getReagentColumnValue({ id: 'empty', name: 'Empty' }, 'stock')).toBeUndefined()
+  })
+
+  it('classifies expiry states relative to a supplied date', () => {
+    const now = new Date('2026-05-22T00:00:00.000Z')
+
+    expect(isReagentExpired(reagent, now)).toBe(false)
+    expect(isReagentExpiringSoon(reagent, 30, now)).toBe(true)
+    expect(isReagentExpired({ ...reagent, expiryDate: '2026-05-01T00:00:00.000Z' }, now)).toBe(true)
+  })
+
+  it('classifies low stock and stock fill tone', () => {
+    expect(isReagentLowStock(reagent, 15)).toBe(true)
+    expect(getReagentStockLevel({ id: 'missing', name: 'Missing' })).toBe(0)
+    expect(getReagentStockFillClass(70)).toBe('mint-reagent-list__stock-fill--good')
+    expect(getReagentStockFillClass(30)).toBe('mint-reagent-list__stock-fill--warning')
+    expect(getReagentStockFillClass(10)).toBe('mint-reagent-list__stock-fill--low')
+  })
+
+  it('formats missing and present expiry dates', () => {
+    expect(formatReagentExpiryDate(undefined)).toBe('-')
+    expect(formatReagentExpiryDate('2026-06-01T00:00:00.000Z')).toBe('Jun 2026')
+  })
+
+  it('builds row state classes without mixing expired and expiring-soon', () => {
+    expect(
+      getReagentRowClasses(reagent, {
+        lowStockThreshold: 15,
+        draggedId: 'reagent-1',
+        dragOverId: 'reagent-2',
+        now: new Date('2026-05-22T00:00:00.000Z'),
+      })
+    ).toEqual([
+      'mint-reagent-list__row',
+      'mint-reagent-list__row--expiring-soon',
+      'mint-reagent-list__row--low-stock',
+      'mint-reagent-list__row--dragging',
+    ])
+  })
+})

package/src/__tests__/components/SampleSelector.colors.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+import type { SampleGroup } from '../../types'
+import {
+  DEFAULT_COLOR_PICKER_SEED,
+  applySampleGroupColorEdit,
+  createSampleGroup,
+  getSampleGroupColorEditSeed,
+} from '../../components/SampleSelector.colors'
+
+const groups: SampleGroup[] = [
+  { name: 'Control/A', color: '#3B82F6', samples: ['S1'] },
+  { name: 'Control/B', color: '#06B6D4', samples: ['S2'] },
+]
+
+describe('SampleSelector color helpers', () => {
+  it('applies a single group color edit without mutating other groups', () => {
+    const updated = applySampleGroupColorEdit(
+      groups,
+      { kind: 'single', name: 'Control/B' },
+      '#111111',
+    )
+
+    expect(updated.map(group => group.color)).toEqual(['#3B82F6', '#111111'])
+    expect(groups.map(group => group.color)).toEqual(['#3B82F6', '#06B6D4'])
+  })
+
+  it('applies a family color edit to every named subgroup', () => {
+    const updated = applySampleGroupColorEdit(
+      groups,
+      { kind: 'family', names: ['Control/A', 'Control/B'] },
+      '#222222',
+    )
+
+    expect(updated.map(group => group.color)).toEqual(['#222222', '#222222'])
+  })
+
+  it('returns the default color seed when no color edit is active', () => {
+    expect(getSampleGroupColorEditSeed(null, name => name)).toBe(DEFAULT_COLOR_PICKER_SEED)
+  })
+
+  it('creates trimmed empty sample groups with the next unused default color', () => {
+    expect(createSampleGroup('  Treatment  ', groups)).toEqual({
+      name: 'Treatment',
+      color: '#10B981',
+      samples: [],
+    })
+    expect(createSampleGroup('   ', groups)).toBeNull()
+  })
+})

package/src/__tests__/components/SampleSelector.drag.test.ts

@@ -0,0 +1,100 @@
+import { ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+import type { SampleGroup } from '../../types'
+import { useSampleSelectorDrag } from '../../components/SampleSelector.drag'
+
+type TestDataTransfer = DataTransfer & { data: Record<string, string> }
+type TestDragEvent = Omit<DragEvent, 'dataTransfer'> & {
+  dataTransfer: TestDataTransfer
+  defaultPrevented: boolean
+}
+
+function createDragEvent(options: { clientY?: number; top?: number; height?: number } = {}) {
+  const data: Record<string, string> = {}
+  const transfer = {
+    effectAllowed: '',
+    dropEffect: '',
+    data,
+    setData(type: string, value: string) {
+      data[type] = value
+    },
+  } as unknown as TestDataTransfer
+  let prevented = false
+  const target = {
+    getBoundingClientRect: () => ({
+      top: options.top ?? 0,
+      height: options.height ?? 20,
+    }),
+    contains: () => false,
+  }
+
+  return {
+    dataTransfer: transfer,
+    preventDefault: () => {
+      prevented = true
+    },
+    get defaultPrevented() {
+      return prevented
+    },
+    clientY: options.clientY ?? 0,
+    currentTarget: target,
+    relatedTarget: null,
+  } as unknown as TestDragEvent
+}
+
+const groups: SampleGroup[] = [
+  { name: 'Treatment/A', color: '#111111', samples: ['S1'] },
+  { name: 'Treatment/B', color: '#222222', samples: ['S2'] },
+  { name: 'Control/A', color: '#333333', samples: ['S3'] },
+  { name: 'Control/B', color: '#444444', samples: ['S4'] },
+]
+
+describe('SampleSelector drag helpers', () => {
+  it('moves dragged samples between groups and resets sample drag state', () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'A', color: '#111111', samples: ['S1'] },
+      { name: 'B', color: '#222222', samples: ['S2'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+    const startEvent = createDragEvent()
+    const overEvent = createDragEvent()
+    const dropEvent = createDragEvent()
+
+    drag.handleDragStart('S1', 'A', startEvent)
+    drag.handleDragOver('B', overEvent)
+    drag.handleDrop('B', dropEvent)
+
+    expect(startEvent.dataTransfer.data['text/plain']).toBe('S1')
+    expect(overEvent.dataTransfer.dropEffect).toBe('move')
+    expect(dropEvent.defaultPrevented).toBe(true)
+    expect(state.value.map(group => group.samples)).toEqual([[], ['S2', 'S1']])
+    expect(drag.draggingSample.value).toBeNull()
+    expect(drag.dragOverGroup.value).toBeNull()
+  })
+
+  it('reorders sibling subgroups without allowing cross-major drops', () => {
+    const state = ref(groups)
+    const drag = useSampleSelectorDrag(state)
+
+    drag.handleGroupDragStart('Control/A', 'sub', createDragEvent())
+    drag.handleGroupDragOver('Treatment/A', 'sub', createDragEvent({ clientY: 2 }))
+
+    expect(drag.reorderTarget.value).toBeNull()
+
+    const overEvent = createDragEvent({ clientY: 18 })
+    const dropEvent = createDragEvent()
+    drag.handleGroupDragOver('Control/B', 'sub', overEvent)
+    drag.handleGroupDrop('Control/B', 'sub', dropEvent)
+
+    expect(overEvent.dataTransfer.dropEffect).toBe('move')
+    expect(dropEvent.defaultPrevented).toBe(true)
+    expect(state.value.map(group => group.name)).toEqual([
+      'Treatment/A',
+      'Treatment/B',
+      'Control/B',
+      'Control/A',
+    ])
+    expect(drag.draggingGroup.value).toBeNull()
+    expect(drag.reorderTarget.value).toBeNull()
+  })
+})

package/src/__tests__/components/SampleSelector.groups.test.ts

@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'vitest'
+import type { SampleGroup } from '../../types'
+import {
+  detectSampleGroupSeparator,
+  getSampleGroupMajorPrefix,
+  moveSampleToGroup,
+  removeSampleFromGroup,
+  removeSampleGroup,
+  removeSampleMajorGroup,
+  reorderSampleGroup,
+  reorderSampleMajorGroup,
+} from '../../components/SampleSelector.groups'
+
+const groups: SampleGroup[] = [
+  { name: 'Treatment/A', color: '#111111', samples: ['S1'] },
+  { name: 'Treatment/B', color: '#222222', samples: ['S2'] },
+  { name: 'Control/A', color: '#333333', samples: ['S3'] },
+  { name: 'Control/B', color: '#444444', samples: ['S4'] },
+]
+
+describe('SampleSelector group helpers', () => {
+  it('detects the hierarchy separator from group names', () => {
+    expect(detectSampleGroupSeparator(groups)).toBe('/')
+    expect(detectSampleGroupSeparator([{ name: 'Control_A', color: '#111111', samples: [] }])).toBe('_')
+  })
+
+  it('extracts major group prefixes with the detected separator', () => {
+    expect(getSampleGroupMajorPrefix('Treatment/A', '/')).toBe('Treatment')
+    expect(getSampleGroupMajorPrefix('Ungrouped', '/')).toBe('Ungrouped')
+  })
+
+  it('moves a sample from one group to another without duplicating target samples', () => {
+    const moved = moveSampleToGroup(groups, 'S1', 'Treatment/A', 'Control/A')
+
+    expect(moved.map(group => group.samples)).toEqual([[], ['S2'], ['S3', 'S1'], ['S4']])
+    expect(moveSampleToGroup(groups, 'S3', null, 'Control/A')[2].samples).toEqual(['S3'])
+  })
+
+  it('removes groups and samples without mutating the source array', () => {
+    expect(removeSampleGroup(groups, 'Treatment/B').map(group => group.name)).toEqual([
+      'Treatment/A',
+      'Control/A',
+      'Control/B',
+    ])
+    expect(
+      removeSampleMajorGroup(groups, {
+        subGroups: [{ name: 'Treatment/A' }, { name: 'Treatment/B' }],
+      }).map(group => group.name),
+    ).toEqual(['Control/A', 'Control/B'])
+    expect(removeSampleFromGroup(groups, 'S1', 'Treatment/A')[0].samples).toEqual([])
+    expect(groups[0].samples).toEqual(['S1'])
+  })
+
+  it('reorders flat groups without mutating the source array', () => {
+    const reordered = reorderSampleGroup(groups, 'Control/A', 'Treatment/A', 'before')
+
+    expect(reordered.map(group => group.name)).toEqual([
+      'Control/A',
+      'Treatment/A',
+      'Treatment/B',
+      'Control/B',
+    ])
+    expect(groups.map(group => group.name)).toEqual([
+      'Treatment/A',
+      'Treatment/B',
+      'Control/A',
+      'Control/B',
+    ])
+  })
+
+  it('reorders major group families as contiguous blocks', () => {
+    const reordered = reorderSampleMajorGroup(groups, 'Control', 'Treatment', 'before')
+
+    expect(reordered.map(group => group.name)).toEqual([
+      'Control/A',
+      'Control/B',
+      'Treatment/A',
+      'Treatment/B',
+    ])
+  })
+})

package/src/__tests__/components/SampleSelector.selection.test.ts

@@ -0,0 +1,70 @@
+import { ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+import type { SampleGroup } from '../../types'
+import type { SampleMajorGroup } from '../../composables/useSampleGroups'
+import { useSampleSelectorSelection } from '../../components/SampleSelector.selection'
+
+const groups: SampleGroup[] = [
+  { name: 'Control/A', color: '#111111', samples: ['S1', 'S2'] },
+  { name: 'Treatment/A', color: '#222222', samples: ['S3'] },
+]
+
+function createSelection(selected: string[] = []) {
+  const selectedRef = ref(selected)
+  const emitted: string[][] = []
+  const selection = useSampleSelectorSelection({
+    selected: () => selectedRef.value,
+    samples: () => ['S1', 'S2', 'S3'],
+    findGroup: groupName => groups.find(group => group.name === groupName),
+    emitSelected: samples => {
+      emitted.push(samples)
+      selectedRef.value = samples
+    },
+  })
+
+  return { emitted, selectedRef, selection }
+}
+
+describe('SampleSelector selection helpers', () => {
+  it('adapts select-all and single-sample toggles to update events', () => {
+    const { emitted, selection } = createSelection()
+
+    selection.toggleSelectAll()
+    selection.toggleSample('S1')
+
+    expect(emitted).toEqual([
+      ['S1', 'S2', 'S3'],
+      ['S2', 'S3'],
+    ])
+    expect(selection.isAllSelected.value).toBe(false)
+  })
+
+  it('toggles sample groups and exposes group selection state', () => {
+    const { emitted, selection } = createSelection(['S1'])
+
+    expect(selection.isGroupPartiallySelected('Control/A')).toBe(true)
+    expect(selection.isGroupFullySelected('Control/A')).toBe(false)
+
+    selection.toggleGroupSamples('Control/A')
+
+    expect(emitted[0]).toEqual(['S1', 'S2'])
+    expect(selection.isGroupFullySelected('Control/A')).toBe(true)
+  })
+
+  it('handles major groups through their aggregate sample list', () => {
+    const majorGroup: SampleMajorGroup = {
+      name: 'Control',
+      color: '#111111',
+      subGroups: [],
+      allSamples: ['S1', 'S2'],
+    }
+    const { emitted, selection } = createSelection(['S1', 'S2'])
+
+    expect(selection.isMajorGroupFullySelected(majorGroup)).toBe(true)
+
+    selection.toggleMajorGroupSamples(majorGroup)
+
+    expect(emitted[0]).toEqual([])
+    expect(selection.isMajorGroupPartiallySelected(majorGroup)).toBe(false)
+  })
+})

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

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import SampleSelector from '../../components/SampleSelector.vue'
+import type { AutoGroupResult, SampleGroup } from '../../types'
 
 describe('SampleSelector', () => {
   it('uses shared list selection for select-all and individual sample toggles', async () => {
@@ -83,3 +84,34 @@ describe('SampleSelector', () => {
     expect(wrapper.findAll('.mint-sample-selector__flat-name').map(item => item.text())).toEqual(['S1', 'S2'])
   })
 })
+
+describe('SampleSelector — QC overlay regression', () => {
+  it('keeps QC samples in the emitted groups via the concat compat rule', async () => {
+    const exp: SampleGroup[] = [
+      { name: 'Kidney', color: '#3B82F6', samples: ['s1', 's2'] },
+    ]
+    const qc: SampleGroup[] = [
+      { name: 'IQC', color: '#6B7280', samples: ['iqc1'] },
+    ]
+    const result: AutoGroupResult = {
+      groups: [...exp, ...qc],
+      experimentalGroups: exp,
+      qcGroups: qc,
+      metadata: [],
+      excludedSamples: [],
+    }
+    const wrapper = mount(SampleSelector, {
+      props: { samples: ['s1', 's2', 'iqc1'], modelValue: [] },
+      global: {
+        stubs: {
+          AutoGroupModal: true,
+        },
+      },
+    })
+    ;(wrapper.vm as unknown as { handleSmartGroupApply: (r: AutoGroupResult) => void })
+      .handleSmartGroupApply(result)
+    const emitted = wrapper.emitted('update:groups')!.at(-1)![0] as SampleGroup[]
+    const allSamples = emitted.flatMap(g => g.samples)
+    expect(allSamples).toContain('iqc1')
+  })
+})

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

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import SampleSelectorSampleRow from '../../components/SampleSelectorSampleRow.vue'
+
+describe('SampleSelectorSampleRow', () => {
+  it('renders selected and dragging states', () => {
+    const wrapper = mount(SampleSelectorSampleRow, {
+      props: {
+        sample: 'S1',
+        selected: true,
+        dragging: true,
+        accentColor: '#3B82F6',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('mint-sample-selector__sample--dragging')
+    expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
+    expect(wrapper.get('input').attributes('style')).toContain('accent-color')
+    expect(wrapper.text()).toContain('S1')
+  })
+
+  it('emits toggle and remove actions', async () => {
+    const wrapper = mount(SampleSelectorSampleRow, {
+      props: {
+        sample: 'S2',
+        selected: false,
+        removable: true,
+      },
+    })
+
+    await wrapper.get('input').trigger('change')
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('toggle')).toHaveLength(1)
+    expect(wrapper.emitted('remove')).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import ScheduleCalendar from '../../components/ScheduleCalendar.vue'
+
+describe('ScheduleCalendar', () => {
+  it('renders week events with layout styles from the schedule model', () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        dayStartHour: 6,
+        dayEndHour: 10,
+        slotDuration: 30,
+        showNowIndicator: false,
+        events: [
+          {
+            id: 'run-1',
+            title: 'LCMS run',
+            start: '2024-05-15T07:00:00',
+            end: '2024-05-15T08:30:00',
+          },
+        ],
+      },
+    })
+
+    const event = wrapper.find('.mint-schedule__event')
+    expect(event.exists()).toBe(true)
+    expect(event.find('.mint-schedule__event-title').text()).toBe('LCMS run')
+    expect(event.attributes('style')).toContain('top: 80px')
+    expect(event.attributes('style')).toContain('height: 120px')
+  })
+
+  it('renders the month grid from the extracted calendar layout', () => {
+    const wrapper = mount(ScheduleCalendar, {
+      props: {
+        modelValue: new Date('2024-05-15T12:00:00'),
+        view: 'month',
+      },
+    })
+
+    expect(wrapper.findAll('.mint-schedule__month-weekday')).toHaveLength(7)
+    expect(wrapper.findAll('.mint-schedule__month-cell')).toHaveLength(42)
+    expect(wrapper.find('.mint-schedule__title').text()).toBe('May 2024')
+  })
+})

package/src/__tests__/components/SettingsModal.schema.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest'
+import type { SettingsModalSchema, SettingsTabInput } from '../../types'
+import {
+  APPEARANCE_TAB,
+  buildFlatSettingsSchema,
+  buildSettingsTabs,
+  filterSettingsSchemaByAccess,
+  normalizeVisibleSettingsTabs,
+  settingsGroupToTab,
+} from '../../components/SettingsModal.schema'
+
+describe('SettingsModal schema helpers', () => {
+  const schema: SettingsModalSchema = {
+    groups: [
+      {
+        id: 'general',
+        label: 'General',
+        description: 'Shared settings',
+        icon: '<svg />',
+        fields: [
+          { name: 'title', label: 'Title', type: 'text' },
+          { name: 'adminOnly', label: 'Admin Only', type: 'text', requiresAdmin: true },
+        ],
+        columns: 2,
+      },
+      {
+        id: 'hidden',
+        label: 'Hidden',
+        requiresAdmin: true,
+        fields: [
+          { name: 'secret', label: 'Secret', type: 'text' },
+        ],
+      },
+    ],
+  }
+
+  it('builds flat form sections from settings groups', () => {
+    expect(buildFlatSettingsSchema(schema)).toEqual({
+      sections: [
+        {
+          id: 'general',
+          title: '',
+          fields: schema.groups[0].fields,
+          columns: 2,
+          condition: undefined,
+        },
+        {
+          id: 'hidden',
+          title: '',
+          fields: schema.groups[1].fields,
+          columns: undefined,
+          condition: undefined,
+        },
+      ],
+    })
+  })
+
+  it('filters groups and fields with the caller access policy', () => {
+    const filtered = filterSettingsSchemaByAccess(
+      schema,
+      (item) => !item.requiresAdmin
+    )
+
+    expect(filtered.groups).toHaveLength(1)
+    expect(filtered.groups[0].id).toBe('general')
+    expect(filtered.groups[0].fields.map(field => field.name)).toEqual(['title'])
+  })
+
+  it('maps visible schema groups to tabs', () => {
+    expect(settingsGroupToTab(schema.groups[0])).toEqual({
+      id: 'general',
+      label: 'General',
+      description: 'Shared settings',
+      icon: '<svg />',
+    })
+  })
+
+  it('normalizes manual tabs before access filtering', () => {
+    const tabs: SettingsTabInput[] = [
+      'General',
+      { id: 'admin', label: 'Admin', requiresAdmin: true },
+    ]
+
+    expect(
+      normalizeVisibleSettingsTabs(tabs, (item) => !item.requiresAdmin)
+    ).toEqual([
+      { id: 'General', label: 'General' },
+    ])
+  })
+
+  it('appends the appearance tab when enabled', () => {
+    expect(buildSettingsTabs([{ id: 'general', label: 'General' }], true)).toEqual([
+      { id: 'general', label: 'General' },
+      APPEARANCE_TAB,
+    ])
+  })
+})

package/src/__tests__/components/WellPlate.colors.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import {
+  conditionGradientStyle,
+  formatConcentration,
+  getHeatmapColor,
+  HEATMAP_COLORS,
+} from '../../components/WellPlate.colors'
+
+describe('WellPlate color helpers', () => {
+  it('formats concentrations for compact condition headers', () => {
+    expect(formatConcentration(1000)).toBe('1k')
+    expect(formatConcentration(0.001)).toBe('1e-3')
+    expect(formatConcentration(12.5)).toBe('12.5')
+  })
+
+  it('creates readable condition gradient styles', () => {
+    expect(conditionGradientStyle('#000000', 10, [0, 10])).toEqual({
+      backgroundColor: 'rgba(0, 0, 0, 0.75)',
+      color: '#ffffff',
+    })
+  })
+
+  it('resolves configured heatmap palette colors', () => {
+    expect(getHeatmapColor({ enabled: false }, 1)).toBeNull()
+    expect(getHeatmapColor({ enabled: true, min: 0, max: 100 }, 0)).toBe(HEATMAP_COLORS.viridis[0])
+    expect(getHeatmapColor({ enabled: true, colorScale: 'custom', customColors: ['#111', '#222'] }, 1)).toBe('#222')
+  })
+})