@morscherlab/mint-sdk 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -0,0 +1,120 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import MobileSupportGate from '../../components/MobileSupportGate.vue'
+
+function mockMatchMedia(initialMatches: boolean) {
+  const listeners = new Set<(event: MediaQueryListEvent) => void>()
+  const queryList = {
+    matches: initialMatches,
+    media: '',
+    onchange: null,
+    addEventListener: vi.fn((_event: string, listener: (event: MediaQueryListEvent) => void) => {
+      listeners.add(listener)
+    }),
+    removeEventListener: vi.fn((_event: string, listener: (event: MediaQueryListEvent) => void) => {
+      listeners.delete(listener)
+    }),
+    addListener: vi.fn((listener: (event: MediaQueryListEvent) => void) => {
+      listeners.add(listener)
+    }),
+    removeListener: vi.fn((listener: (event: MediaQueryListEvent) => void) => {
+      listeners.delete(listener)
+    }),
+    dispatchEvent: vi.fn(),
+  } as unknown as MediaQueryList
+
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    value: vi.fn(() => queryList),
+  })
+
+  return {
+    setMatches(matches: boolean) {
+      Object.defineProperty(queryList, 'matches', {
+        configurable: true,
+        value: matches,
+      })
+      listeners.forEach(listener => listener({ matches } as MediaQueryListEvent))
+    },
+  }
+}
+
+describe('MobileSupportGate', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('shows the unsupported message on mobile when the route is unsupported', async () => {
+    mockMatchMedia(true)
+
+    const wrapper = mount(MobileSupportGate, {
+      props: {
+        supported: false,
+      },
+      slots: {
+        default: '<div data-testid="content">Workspace content</div>',
+      },
+    })
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="mobile-unsupported"]').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Desktop workspace recommended')
+    expect(wrapper.find('[data-testid="content"]').exists()).toBe(false)
+  })
+
+  it('renders content on desktop even when the route is mobile-unsupported', async () => {
+    mockMatchMedia(false)
+
+    const wrapper = mount(MobileSupportGate, {
+      props: {
+        supported: false,
+      },
+      slots: {
+        default: '<div data-testid="content">Workspace content</div>',
+      },
+    })
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="mobile-unsupported"]').exists()).toBe(false)
+    expect(wrapper.find('[data-testid="content"]').exists()).toBe(true)
+  })
+
+  it('renders content on mobile when the route is supported', async () => {
+    mockMatchMedia(true)
+
+    const wrapper = mount(MobileSupportGate, {
+      props: {
+        supported: true,
+      },
+      slots: {
+        default: '<div data-testid="content">Workspace content</div>',
+      },
+    })
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="mobile-unsupported"]').exists()).toBe(false)
+    expect(wrapper.find('[data-testid="content"]').exists()).toBe(true)
+  })
+
+  it('reacts when the viewport moves into the mobile query', async () => {
+    const media = mockMatchMedia(false)
+
+    const wrapper = mount(MobileSupportGate, {
+      props: {
+        supported: false,
+      },
+      slots: {
+        default: '<div data-testid="content">Workspace content</div>',
+      },
+    })
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="content"]').exists()).toBe(true)
+
+    media.setMatches(true)
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="mobile-unsupported"]').exists()).toBe(true)
+  })
+})

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

@@ -1,5 +1,7 @@
 import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
 import { describe, expect, it } from 'vitest'
+import AutoGroupModal from '../../components/AutoGroupModal.vue'
 import SampleSelector from '../../components/SampleSelector.vue'
 import type { AutoGroupResult, SampleGroup } from '../../types'
 
@@ -86,6 +88,123 @@ describe('SampleSelector', () => {
     expect(wrapper.find('.mint-sample-selector__select-all-count').text()).toBe('2 samples')
     expect(wrapper.findAll('.mint-sample-selector__flat-name').map(item => item.text())).toEqual(['S1', 'S2'])
   })
+
+  it('opens the grouping modal in manual mode', async () => {
+    const wrapper = mount(SampleSelector, {
+      props: {
+        samples: ['S1', 'S2'],
+        modelValue: [],
+        groups: [],
+        enableSmartGroup: false,
+      },
+      global: {
+        stubs: {
+          AutoGroupModal: true,
+        },
+      },
+    })
+
+    await wrapper.findAllComponents({ name: 'BaseButton' })[0].trigger('click')
+
+    const modal = wrapper.findComponent({ name: 'AutoGroupModal' })
+    expect(modal.props('initialMode')).toBe('manual')
+    expect(modal.props('groups')).toEqual([])
+  })
+})
+
+describe('AutoGroupModal manual workflow', () => {
+  it('assigns selected samples to a manual group and subgroup', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: {
+        modelValue: true,
+        initialMode: 'manual',
+        samples: ['S1', 'S2'],
+        groups: [],
+      },
+      global: {
+        plugins: [createPinia()],
+        stubs: {
+          Teleport: true,
+        },
+      },
+    })
+
+    await wrapper.findAll('.mint-auto-group__manual-sample input')[0].trigger('change')
+    const fields = wrapper.findAll('.mint-auto-group__manual-field input')
+    await fields[0].setValue('Treatment')
+    await fields[1].setValue('Baseline')
+    await wrapper.find('.mint-auto-group__manual-assign').trigger('click')
+    await wrapper.find('.mint-auto-group__nav--manual .mint-button--primary').trigger('click')
+
+    const result = wrapper.emitted('apply')?.at(-1)?.[0] as AutoGroupResult
+    expect(result.groups).toHaveLength(1)
+    expect(result.groups[0]).toMatchObject({
+      name: 'Treatment/Baseline',
+      samples: ['S1'],
+    })
+  })
+
+  it('moves manual selections out of existing groups before assigning them', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: {
+        modelValue: true,
+        initialMode: 'manual',
+        samples: ['S1', 'S2'],
+        groups: [
+          { name: 'Control', color: '#3B82F6', samples: ['S1'] },
+          { name: 'Treatment', color: '#10B981', samples: [] },
+        ],
+      },
+      global: {
+        plugins: [createPinia()],
+        stubs: {
+          Teleport: true,
+        },
+      },
+    })
+
+    await wrapper.find('.mint-auto-group__manual-filter input').setValue(false)
+    await wrapper.findAll('.mint-auto-group__manual-sample input')[0].trigger('change')
+    await wrapper.findAll('.mint-auto-group__manual-chip')[1].trigger('click')
+    await wrapper.find('.mint-auto-group__manual-assign').trigger('click')
+    await wrapper.find('.mint-auto-group__nav--manual .mint-button--primary').trigger('click')
+
+    const result = wrapper.emitted('apply')?.at(-1)?.[0] as AutoGroupResult
+    expect(result.groups).toEqual([
+      { name: 'Control', color: '#3B82F6', samples: [] },
+      { name: 'Treatment', color: '#10B981', samples: ['S1'] },
+    ])
+  })
+
+  it('preserves an existing cohort color when the target is typed manually', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: {
+        modelValue: true,
+        initialMode: 'manual',
+        samples: ['S1', 'S2'],
+        groups: [
+          { name: 'Control', color: '#10B981', samples: ['S1'] },
+        ],
+      },
+      global: {
+        plugins: [createPinia()],
+        stubs: {
+          Teleport: true,
+        },
+      },
+    })
+
+    await wrapper.findAll('.mint-auto-group__manual-sample input')[0].trigger('change')
+    const fields = wrapper.findAll('.mint-auto-group__manual-field input')
+    await fields[0].setValue('Control')
+    await wrapper.find('.mint-auto-group__manual-assign').trigger('click')
+    await wrapper.find('.mint-auto-group__nav--manual .mint-button--primary').trigger('click')
+
+    const result = wrapper.emitted('apply')?.at(-1)?.[0] as AutoGroupResult
+    expect(result.groups).toEqual([
+      { name: 'Control', color: '#10B981', samples: ['S1', 'S2'] },
+    ])
+  })
 })
 
 describe('SampleSelector — QC overlay regression', () => {

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

@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils'
+import { computed, defineComponent, nextTick, ref } from 'vue'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { useMobileSupportGate } from '../../composables/useMobileSupportGate'
+
+function mockMatchMedia(initialMatches: boolean) {
+  const listeners = new Set<(event: MediaQueryListEvent) => void>()
+  const queryList = {
+    matches: initialMatches,
+    media: '',
+    onchange: null,
+    addEventListener: vi.fn((_event: string, listener: (event: MediaQueryListEvent) => void) => {
+      listeners.add(listener)
+    }),
+    removeEventListener: vi.fn((_event: string, listener: (event: MediaQueryListEvent) => void) => {
+      listeners.delete(listener)
+    }),
+    addListener: vi.fn((listener: (event: MediaQueryListEvent) => void) => {
+      listeners.add(listener)
+    }),
+    removeListener: vi.fn((listener: (event: MediaQueryListEvent) => void) => {
+      listeners.delete(listener)
+    }),
+    dispatchEvent: vi.fn(),
+  } as unknown as MediaQueryList
+
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    value: vi.fn(() => queryList),
+  })
+
+  return {
+    setMatches(matches: boolean) {
+      Object.defineProperty(queryList, 'matches', {
+        configurable: true,
+        value: matches,
+      })
+      listeners.forEach(listener => listener({ matches } as MediaQueryListEvent))
+    },
+  }
+}
+
+describe('useMobileSupportGate', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('computes the unsupported state from viewport and supported sources', async () => {
+    const media = mockMatchMedia(true)
+    const supported = ref(false)
+
+    const wrapper = mount(defineComponent({
+      setup() {
+        const gate = useMobileSupportGate({
+          supported: computed(() => supported.value),
+        })
+        return gate
+      },
+      template: '<div>{{ shouldShowUnsupported }}</div>',
+    }))
+    await nextTick()
+
+    expect(wrapper.text()).toBe('true')
+
+    supported.value = true
+    await nextTick()
+    expect(wrapper.text()).toBe('false')
+
+    supported.value = false
+    media.setMatches(false)
+    await nextTick()
+    expect(wrapper.text()).toBe('false')
+  })
+})

package/src/components/AutoGroupModal.story.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import AutoGroupModal from './AutoGroupModal.vue'
 import type { AutoGroupResult } from '../types/auto-group'
+import type { SampleGroup } from '../types'
 import mixedLcMsRaw from '../__tests__/fixtures/auto-group/mixed-lc-ms-batch.txt?raw'
 
 const mixedLcMsSamples = mixedLcMsRaw.trim().split('\n')
@@ -92,6 +93,29 @@ const hyphenSamples = [
   'KO-Drug-1', 'KO-Drug-2', 'KO-Drug-3',
 ]
 
+const manualSamples = [
+  'Pt001_TumorA_d7_rep1',
+  'Pt001_TumorA_d7_rep1_reseq2024',
+  'Pt001_TumorA_d14_rep1',
+  'Pt002_TumorB_d7_rep1',
+  'Pt002_tumorb_d7_rep2',
+  'Pt002_TumorB_d14_rep1',
+  'Pt003_NoID_d7_rep1',
+  'Pt003_TumorC_d14_rep1_redo',
+  'Ctrl_pooled_old_naming',
+  'control_2_(redo)',
+  'Pt004_TumorA_d7_2024batch2',
+  'Pt004_TumorA_d14',
+  'QC_pool_01',
+  'blank_run3',
+]
+
+const manualGroups: SampleGroup[] = [
+  { name: 'Responder/Day 7', color: '#0EA5A4', samples: ['Pt001_TumorA_d7_rep1'] },
+  { name: 'Responder/Day 14', color: '#0EA5A4', samples: ['Pt001_TumorA_d14_rep1'] },
+  { name: 'Non-responder/Day 7', color: '#F43F5E', samples: ['Pt002_TumorB_d7_rep1'] },
+]
+
 const isOpen = ref(false)
 const lastResult = ref<AutoGroupResult | null>(null)
 
@@ -239,6 +263,28 @@ function initState(samples: string[] = proteomicsSamples) {
       </template>
     </Variant>
 
+    <Variant title="Manual Workflow" :init-state="() => ({ isOpen: true })">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            v-if="!state.isOpen"
+            type="button"
+            style="padding: 0.5rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem;"
+            @click="state.isOpen = true"
+          >
+            Re-open Modal
+          </button>
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :samples="manualSamples"
+            :groups="manualGroups"
+            initial-mode="manual"
+            @apply="handleApply"
+          />
+        </div>
+      </template>
+    </Variant>
+
     <Variant title="From Experiment Metadata" :init-state="() => ({ isOpen: true, lastResult: null as AutoGroupResult | null })">
       <template #default="{ state }">
         <div style="padding: 2rem;">