@morscherlab/mint-sdk 1.0.15 → 1.0.16

package/src/components/AutoGroupModal.vue

@@ -10,12 +10,23 @@ import AlertBox from './AlertBox.vue'
 import { useAutoGroup, parseCSV } from '../composables/useAutoGroup'
 import { classKey } from '../composables/autoGroup'
 import { useApi } from '../composables/useApi'
+import { useTextSearch } from '../composables/useTextSearch'
+import { useSampleGroups } from '../composables/useSampleGroups'
+import {
+  createSampleGroup,
+  SAMPLE_GROUP_COLOR_OPTIONS,
+} from './SampleSelector.colors'
 import type { WizardStep } from '../types/components'
 import type { AutoGroupResult, MergeSuggestion, ColumnRole } from '../types/auto-group'
+import type { SampleGroup } from '../types'
+
+type GroupingWorkflow = 'auto' | 'manual'
 
 export interface Props {
   modelValue: boolean
   samples?: string[]
+  groups?: SampleGroup[]
+  initialMode?: GroupingWorkflow
   experimentId?: number
   /** Pre-fetched design data — bypasses API fetch when provided */
   designData?: Record<string, unknown>
@@ -23,6 +34,8 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   samples: () => [],
+  groups: () => [],
+  initialMode: 'auto',
   experimentId: undefined,
   designData: undefined,
 })
@@ -41,6 +54,15 @@ const csvFileName = ref('')
 const experimentLoading = ref(false)
 const experimentError = ref<string | null>(null)
 const csvError = ref<string | null>(null)
+const activeWorkflow = ref<GroupingWorkflow>('auto')
+const manualDraftGroups = ref<SampleGroup[]>([])
+const manualSearchQuery = ref('')
+const manualUngroupedOnly = ref(true)
+const manualSelectedSamples = ref<string[]>([])
+const manualGroupName = ref('')
+const manualSubGroupName = ref('')
+const manualColorOptions = SAMPLE_GROUP_COLOR_OPTIONS
+const manualSelectedColor = ref(manualColorOptions[0])
 
 // Workspace step refs
 const openPopoverIdx = ref<number | null>(null)
@@ -91,6 +113,194 @@ const totalQc = computed(() =>
   (autoGroup.qcGroups.value ?? []).reduce((acc, g) => acc + g.samples.length, 0),
 )
 
+function cloneGroups(groups: SampleGroup[]): SampleGroup[] {
+  return groups.map(group => ({
+    ...group,
+    samples: [...group.samples],
+  }))
+}
+
+function manualResetSelection() {
+  manualSearchQuery.value = ''
+  manualUngroupedOnly.value = true
+  manualSelectedSamples.value = []
+  manualGroupName.value = ''
+  manualSubGroupName.value = ''
+  manualSelectedColor.value = manualColorOptions[0]
+}
+
+function manualToggleSample(sample: string) {
+  if (manualSelectedSet.value.has(sample)) {
+    manualSelectedSamples.value = manualSelectedSamples.value.filter(item => item !== sample)
+  } else {
+    manualSelectedSamples.value = [...manualSelectedSamples.value, sample]
+  }
+}
+
+function manualSelectVisibleSamples() {
+  const next = new Set(manualSelectedSamples.value)
+  for (const sample of manualFilteredSamples.value) {
+    next.add(sample)
+  }
+  manualSelectedSamples.value = [...next]
+}
+
+function manualClearSamples() {
+  manualSelectedSamples.value = []
+}
+
+function manualToggleVisibleSamples() {
+  if (manualAllVisibleSelected.value) {
+    manualSelectedSamples.value = manualSelectedSamples.value
+      .filter(sample => !manualVisibleSet.value.has(sample))
+    return
+  }
+
+  manualSelectVisibleSamples()
+}
+
+function manualGetSampleGroup(sample: string): SampleGroup | undefined {
+  return manualDraftGroups.value.find(group => group.samples.includes(sample))
+}
+
+function manualGetSampleStatus(sample: string): string {
+  return manualGetSampleGroup(sample)?.name.replace('/', ' · ') || 'unassigned'
+}
+
+function manualGetGroupPrimaryName(name: string): string {
+  return name.split('/')[0]
+}
+
+function manualGetGroupSecondaryName(name: string): string | null {
+  const separatorIndex = name.indexOf('/')
+  return separatorIndex === -1 ? null : name.slice(separatorIndex + 1)
+}
+
+function manualChooseColor(color: string) {
+  manualSelectedColor.value = color
+}
+
+function manualUseExistingGroupAsTarget(name: string) {
+  const existingGroup = manualDraftGroups.value.find(group => group.name === name)
+  if (existingGroup) {
+    manualSelectedColor.value = existingGroup.color
+  }
+
+  const separatorIndex = name.indexOf('/')
+  if (separatorIndex === -1) {
+    manualGroupName.value = name
+    manualSubGroupName.value = ''
+    return
+  }
+
+  manualGroupName.value = name.slice(0, separatorIndex)
+  manualSubGroupName.value = name.slice(separatorIndex + 1)
+}
+
+function manualAssignSamplesToGroup() {
+  const target = manualTargetGroupName.value
+  if (!manualCanAssign.value || !target) return
+
+  const selected = manualAssignableSamples.value
+  const selectedSet = new Set(selected)
+  if (selectedSet.size === 0) return
+
+  let nextGroups = manualDraftGroups.value.map(group => ({
+    ...group,
+    samples: group.samples.filter(sample => !selectedSet.has(sample)),
+  }))
+
+  const targetIndex = nextGroups.findIndex(group => group.name === target)
+  if (targetIndex === -1) {
+    const newGroup = createSampleGroup(target, nextGroups, manualSelectedColor.value)
+    if (!newGroup) return
+    nextGroups = [...nextGroups, { ...newGroup, samples: selected }]
+  } else {
+    const group = nextGroups[targetIndex]
+    nextGroups[targetIndex] = {
+      ...group,
+      color: manualSelectedColor.value,
+      samples: [...group.samples, ...selected.filter(sample => !group.samples.includes(sample))],
+    }
+  }
+
+  manualDraftGroups.value = nextGroups
+  manualSelectedSamples.value = []
+}
+
+const manualSamples = computed(() =>
+  props.samples.length > 0 ? props.samples : autoGroup.samples.value,
+)
+
+const manualGroupsModel = computed({
+  get: () => manualDraftGroups.value,
+  set: (value: SampleGroup[]) => {
+    manualDraftGroups.value = value
+  },
+})
+
+const manualSampleGroups = useSampleGroups({
+  samples: () => manualSamples.value,
+  groups: manualGroupsModel,
+})
+
+const manualHierarchicalGroups = manualSampleGroups.hierarchicalGroups
+const manualShowHierarchy = manualSampleGroups.showHierarchy
+const manualUngroupedSamples = manualSampleGroups.ungroupedSamples
+const manualSamplePool = computed(() =>
+  manualUngroupedOnly.value ? manualUngroupedSamples.value : manualSamples.value,
+)
+const manualSampleSearch = useTextSearch({
+  items: () => manualSamplePool.value,
+  query: manualSearchQuery,
+  getText: sample => sample,
+})
+const manualFilteredSamples = manualSampleSearch.filteredItems
+const manualSelectedSet = computed(() => new Set(manualSelectedSamples.value))
+const manualVisibleSet = computed(() => new Set(manualFilteredSamples.value))
+const manualAllVisibleSelected = computed(() =>
+  manualFilteredSamples.value.length > 0
+  && manualFilteredSamples.value.every(sample => manualSelectedSet.value.has(sample)),
+)
+const manualSomeVisibleSelected = computed(() =>
+  manualFilteredSamples.value.some(sample => manualSelectedSet.value.has(sample))
+  && !manualAllVisibleSelected.value,
+)
+const manualAssignableSamples = computed(() =>
+  manualSelectedSamples.value.filter(sample => manualSamples.value.includes(sample)),
+)
+const manualTargetGroupName = computed(() => {
+  const major = manualGroupName.value.trim()
+  const sub = manualSubGroupName.value.trim()
+  if (!major) return ''
+  return sub ? `${major}/${sub}` : major
+})
+const manualCanAssign = computed(() =>
+  manualAssignableSamples.value.length > 0 && manualTargetGroupName.value.length > 0,
+)
+const manualGroupedSamples = computed(() => {
+  const validSamples = new Set(manualSamples.value)
+  return new Set(
+    manualDraftGroups.value
+      .flatMap(group => group.samples)
+      .filter(sample => validSamples.has(sample)),
+  )
+})
+const manualGroupedCount = computed(() => manualGroupedSamples.value.size)
+const manualUngroupedCount = computed(() =>
+  Math.max(manualSamples.value.length - manualGroupedCount.value, 0),
+)
+const manualResult = computed<AutoGroupResult>(() => {
+  const groups = cloneGroups(manualDraftGroups.value)
+  return {
+    groups,
+    experimentalGroups: groups,
+    qcGroups: [],
+    metadata: [],
+    excludedSamples: [],
+  }
+})
+
 function acceptSuggestion(s: MergeSuggestion) {
   autoGroup.mergeColumns(autoGroup.activeClassKey.value, s.columnIndices)
 }
@@ -200,6 +410,9 @@ function mergeWithNext() {
 // experiment) where users paste their own sample list or upload a CSV.
 watch(() => props.modelValue, (open) => {
   if (open) {
+    activeWorkflow.value = props.initialMode
+    manualDraftGroups.value = cloneGroups(props.groups)
+    manualResetSelection()
     autoGroup.reset()
     currentStep.value = 0
     csvFileName.value = ''
@@ -221,6 +434,17 @@ watch(() => props.modelValue, (open) => {
   }
 }, { immediate: true })
 
+watch(manualSamples, (samples) => {
+  manualSelectedSamples.value = manualSelectedSamples.value.filter(sample => samples.includes(sample))
+})
+
+watch(manualTargetGroupName, (target) => {
+  if (!target) return
+  const existingGroup = manualDraftGroups.value.find(group => group.name === target)
+  if (!existingGroup) return
+  manualSelectedColor.value = existingGroup.color
+})
+
 // Wizard steps: three steps, unconditional
 const allSteps: WizardStep[] = [
   { id: 'input', label: 'Input' },
@@ -271,6 +495,11 @@ function handleApply() {
   emit('update:modelValue', false)
 }
 
+function handleManualApply() {
+  emit('apply', manualResult.value)
+  emit('update:modelValue', false)
+}
+
 function handleCancel() {
   emit('update:modelValue', false)
 }
@@ -380,15 +609,62 @@ const isFirstStep = computed(() => currentStep.value === 0)
 <template>
   <BaseModal
     :model-value="modelValue"
-    title="Smart Group"
-    size="lg"
+    title="Group Samples"
+    :size="activeWorkflow === 'manual' ? 'xl' : 'lg'"
     :close-on-overlay="false"
     :close-on-escape="false"
     @update:model-value="emit('update:modelValue', $event)"
     @close="handleCancel"
   >
     <div class="mint-auto-group">
+      <div
+        :class="[
+          'mint-auto-group__workflow-bar',
+          activeWorkflow === 'manual' ? 'mint-auto-group__workflow-bar--manual' : '',
+        ]"
+      >
+        <div class="mint-auto-group__workflow-tabs" role="tablist" aria-label="Grouping workflow">
+          <button
+            type="button"
+            :class="[
+              'mint-auto-group__workflow-tab',
+              activeWorkflow === 'auto' ? 'mint-auto-group__workflow-tab--active' : '',
+            ]"
+            role="tab"
+            :aria-selected="activeWorkflow === 'auto'"
+            @click="activeWorkflow = 'auto'"
+          >
+            Auto
+          </button>
+          <button
+            type="button"
+            :class="[
+              'mint-auto-group__workflow-tab',
+              activeWorkflow === 'manual' ? 'mint-auto-group__workflow-tab--active' : '',
+            ]"
+            role="tab"
+            :aria-selected="activeWorkflow === 'manual'"
+            @click="activeWorkflow = 'manual'"
+          >
+            Manual
+          </button>
+        </div>
+
+        <div v-if="activeWorkflow === 'manual'" class="mint-auto-group__manual-summary">
+          <div class="mint-auto-group__manual-summary-text">
+            <span class="mint-auto-group__manual-eyebrow">Manual workflow</span>
+            <strong>Assign selected samples to cohorts</strong>
+          </div>
+          <div class="mint-auto-group__manual-stats" aria-label="Manual grouping status">
+            <span><strong>{{ manualGroupedCount }}</strong> grouped</span>
+            <span><strong>{{ manualUngroupedCount }}</strong> unassigned</span>
+            <span><strong>{{ manualDraftGroups.length }}</strong> cohorts</span>
+          </div>
+        </div>
+      </div>
+
       <StepWizard
+        v-if="activeWorkflow === 'auto'"
         ref="wizardRef"
         v-model="currentStep"
         :steps="dynamicSteps"
@@ -840,7 +1116,307 @@ const isFirstStep = computed(() => currentStep.value === 0)
           </div>
         </template>
       </StepWizard>
+
+      <div v-else class="mint-auto-group__manual-mode">
+        <div class="mint-auto-group__manual-grid">
+          <section class="mint-auto-group__manual-panel" aria-label="Manual sample selection">
+            <div class="mint-auto-group__manual-panel-head">
+              <div>
+                <span class="mint-auto-group__manual-step">1</span>
+                <h3>Samples</h3>
+              </div>
+              <div class="mint-auto-group__manual-panel-meta">
+                <span>{{ manualFilteredSamples.length }} of {{ manualSamplePool.length }}</span>
+                <label class="mint-auto-group__manual-filter">
+                  <input
+                    v-model="manualUngroupedOnly"
+                    type="checkbox"
+                    class="mint-auto-group__manual-checkbox"
+                  />
+                  <span>Ungrouped only</span>
+                </label>
+              </div>
+            </div>
+
+            <div class="mint-auto-group__manual-search">
+              <svg class="mint-auto-group__manual-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+              <input
+                v-model="manualSearchQuery"
+                type="text"
+                aria-label="Search samples for manual grouping"
+                placeholder="Search sample keyword..."
+                class="mint-auto-group__manual-search-input"
+              />
+            </div>
+
+            <label class="mint-auto-group__manual-selectbar">
+              <input
+                type="checkbox"
+                :checked="manualAllVisibleSelected"
+                :indeterminate="manualSomeVisibleSelected"
+                :disabled="manualFilteredSamples.length === 0"
+                class="mint-auto-group__manual-checkbox"
+                @change="manualToggleVisibleSamples"
+              />
+              <span>Select all matching</span>
+              <span class="mint-auto-group__manual-selectbar-count">
+                {{ manualFilteredSamples.length }} shown
+              </span>
+            </label>
+
+            <div class="mint-auto-group__manual-list">
+              <label
+                v-for="sample in manualFilteredSamples"
+                :key="sample"
+                :class="[
+                  'mint-auto-group__manual-sample',
+                  manualSelectedSet.has(sample) ? 'mint-auto-group__manual-sample--selected' : '',
+                ]"
+                :title="sample"
+              >
+                <input
+                  type="checkbox"
+                  :checked="manualSelectedSet.has(sample)"
+                  class="mint-auto-group__manual-checkbox"
+                  @change="manualToggleSample(sample)"
+                />
+                <span class="mint-auto-group__manual-sample-name">{{ sample }}</span>
+                <span
+                  :class="[
+                    'mint-auto-group__manual-status',
+                    manualGetSampleGroup(sample) ? '' : 'mint-auto-group__manual-status--empty',
+                  ]"
+                >
+                  <span
+                    v-if="manualGetSampleGroup(sample)"
+                    class="mint-auto-group__manual-dot"
+                    :style="{ backgroundColor: manualGetSampleGroup(sample)?.color }"
+                    aria-hidden="true"
+                  />
+                  {{ manualGetSampleStatus(sample) }}
+                </span>
+                <span class="mint-auto-group__manual-tooltip">{{ sample }}</span>
+              </label>
+
+              <div v-if="manualFilteredSamples.length === 0" class="mint-auto-group__manual-empty">
+                No samples
+              </div>
+            </div>
+
+            <div class="mint-auto-group__manual-selection-footer">
+              <span><strong>{{ manualSelectedSamples.length }}</strong> selected</span>
+              <button
+                type="button"
+                class="mint-auto-group__manual-link"
+                :disabled="manualSelectedSamples.length === 0"
+                @click="manualClearSamples"
+              >
+                Clear
+              </button>
+            </div>
+          </section>
+
+          <section class="mint-auto-group__manual-panel" aria-label="Manual cohort assignment">
+            <div class="mint-auto-group__manual-panel-head">
+              <div>
+                <span class="mint-auto-group__manual-step">2</span>
+                <h3>Cohort target</h3>
+              </div>
+            </div>
+
+            <div
+              :class="[
+                'mint-auto-group__manual-assignment',
+                manualSelectedSamples.length === 0 ? 'mint-auto-group__manual-assignment--empty' : '',
+              ]"
+            >
+              <div class="mint-auto-group__manual-selected-summary">
+                <span
+                  class="mint-auto-group__manual-dot"
+                  :style="{ backgroundColor: manualSelectedColor }"
+                  aria-hidden="true"
+                />
+                <span>
+                  {{ manualSelectedSamples.length > 0
+                    ? `${manualSelectedSamples.length} selected`
+                    : 'No sample selected' }}
+                </span>
+              </div>
+
+              <div class="mint-auto-group__manual-fields">
+                <label class="mint-auto-group__manual-field">
+                  <span>Group</span>
+                  <div class="mint-auto-group__manual-combo">
+                    <span
+                      class="mint-auto-group__manual-dot"
+                      :style="{ backgroundColor: manualSelectedColor }"
+                      aria-hidden="true"
+                    />
+                    <BaseInput
+                      v-model="manualGroupName"
+                      list="mint-auto-group-manual-groups"
+                      placeholder="Type or pick..."
+                      size="sm"
+                      class="mint-auto-group__manual-combo-input"
+                    />
+                    <svg class="mint-auto-group__manual-combo-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6" />
+                    </svg>
+                    <datalist id="mint-auto-group-manual-groups">
+                      <option
+                        v-for="group in manualDraftGroups"
+                        :key="`manual-group-option-${group.name}`"
+                        :value="manualGetGroupPrimaryName(group.name)"
+                      />
+                    </datalist>
+                  </div>
+                </label>
+
+                <label class="mint-auto-group__manual-field">
+                  <span>Subgroup <small>optional</small></span>
+                  <div class="mint-auto-group__manual-combo">
+                    <BaseInput
+                      v-model="manualSubGroupName"
+                      list="mint-auto-group-manual-subgroups"
+                      placeholder="e.g. Day 7"
+                      size="sm"
+                      class="mint-auto-group__manual-combo-input"
+                    />
+                    <svg class="mint-auto-group__manual-combo-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6" />
+                    </svg>
+                    <datalist id="mint-auto-group-manual-subgroups">
+                      <option
+                        v-for="group in manualDraftGroups"
+                        :key="`manual-subgroup-option-${group.name}`"
+                        :value="manualGetGroupSecondaryName(group.name) || group.name"
+                      />
+                    </datalist>
+                  </div>
+                </label>
+              </div>
+
+              <div class="mint-auto-group__manual-field">
+                <span>Color</span>
+                <div class="mint-auto-group__manual-swatches">
+                  <button
+                    v-for="color in manualColorOptions"
+                    :key="color"
+                    type="button"
+                    :class="[
+                      'mint-auto-group__manual-swatch',
+                      manualSelectedColor === color ? 'mint-auto-group__manual-swatch--active' : '',
+                    ]"
+                    :style="{ backgroundColor: color }"
+                    :aria-label="`Use color ${color}`"
+                    @click="manualChooseColor(color)"
+                  />
+                </div>
+              </div>
+
+              <div class="mint-auto-group__manual-target">
+                <span>Target cohort</span>
+                <code>{{ manualTargetGroupName || 'Group/Subgroup' }}</code>
+              </div>
+
+              <BaseButton
+                variant="primary"
+                size="sm"
+                class="mint-auto-group__manual-assign"
+                :disabled="!manualCanAssign"
+                @click="manualAssignSamplesToGroup"
+              >
+                <svg class="mint-auto-group__manual-btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-6-6 6 6-6 6" />
+                </svg>
+                Assign
+              </BaseButton>
+            </div>
+
+            <div class="mint-auto-group__manual-cohorts">
+              <div class="mint-auto-group__manual-cohorts-head">
+                <span>Cohorts so far</span>
+                <span>{{ manualDraftGroups.length }} groups</span>
+              </div>
+
+              <template v-if="manualShowHierarchy">
+                <template
+                  v-for="majorGroup in manualHierarchicalGroups"
+                  :key="`manual-major-${majorGroup.name}`"
+                >
+                  <button
+                    type="button"
+                    class="mint-auto-group__manual-chip mint-auto-group__manual-chip--major"
+                    :title="majorGroup.name"
+                    @click="manualUseExistingGroupAsTarget(majorGroup.subGroups[0]?.name || majorGroup.name)"
+                  >
+                    <span
+                      class="mint-auto-group__manual-chip-dot"
+                      :style="{ backgroundColor: majorGroup.color }"
+                      aria-hidden="true"
+                    />
+                    <span class="mint-auto-group__manual-chip-main">{{ majorGroup.name }}</span>
+                    <span class="mint-auto-group__manual-chip-count">{{ majorGroup.allSamples.length }}</span>
+                  </button>
+
+                  <button
+                    v-for="subGroup in majorGroup.subGroups"
+                    :key="`manual-sub-${subGroup.name}`"
+                    type="button"
+                    class="mint-auto-group__manual-chip mint-auto-group__manual-chip--sub"
+                    :title="subGroup.name"
+                    @click="manualUseExistingGroupAsTarget(subGroup.name)"
+                  >
+                    <span class="mint-auto-group__manual-chip-sub">
+                      {{ manualGetGroupSecondaryName(subGroup.name) || subGroup.name }}
+                    </span>
+                    <span class="mint-auto-group__manual-chip-count">{{ subGroup.samples.length }}</span>
+                  </button>
+                </template>
+              </template>
+
+              <template v-else>
+                <button
+                  v-for="group in manualDraftGroups"
+                  :key="group.name"
+                  type="button"
+                  class="mint-auto-group__manual-chip"
+                  :title="group.name"
+                  @click="manualUseExistingGroupAsTarget(group.name)"
+                >
+                  <span
+                    class="mint-auto-group__manual-chip-dot"
+                    :style="{ backgroundColor: group.color }"
+                    aria-hidden="true"
+                  />
+                  <span class="mint-auto-group__manual-chip-main">{{ group.name }}</span>
+                  <span class="mint-auto-group__manual-chip-count">{{ group.samples.length }}</span>
+                </button>
+              </template>
+
+              <div v-if="manualDraftGroups.length === 0" class="mint-auto-group__manual-empty">
+                No cohorts yet
+              </div>
+            </div>
+          </section>
+        </div>
+
+      </div>
     </div>
+
+    <template v-if="activeWorkflow === 'manual'" #footer>
+      <div class="mint-auto-group__nav mint-auto-group__nav--manual">
+        <BaseButton variant="secondary" @click="handleCancel">
+          Cancel
+        </BaseButton>
+        <div class="mint-auto-group__nav-spacer" />
+        <BaseButton variant="primary" @click="handleManualApply">
+          Apply
+        </BaseButton>
+      </div>
+    </template>
   </BaseModal>
 </template>
 

package/src/components/BaseInput.vue

@@ -15,6 +15,7 @@ interface Props {
   min?: number
   max?: number
   step?: number
+  list?: string
   ariaDescribedby?: string
 }
 
@@ -54,6 +55,7 @@ function handleInput(event: Event) {
     :min="min"
     :max="max"
     :step="step"
+    :list="list"
     :aria-invalid="error || undefined"
     :aria-describedby="ariaDescribedby || undefined"
     :class="[