@morscherlab/mint-sdk 1.0.44 → 1.0.46

package/src/components/SmartGroupManual.vue

@@ -0,0 +1,398 @@
+<script lang="ts">
+/**
+ * SmartGroupManual — the "manual" mode of the Smart Group modal.
+ *
+ * Selection-first grouping for when sample names can't be parsed automatically:
+ * a wide searchable/filterable sample list on the left, a persistent Cohorts
+ * rail with a progress meter and group → subgroup → sub-subgroup tree on the
+ * right, and a contextual assignment bar that slides up only once samples are
+ * selected. Cohort derivation lives in the tested `./SmartGroupManual.cohorts`
+ * module.
+ *
+ * The reference-fixture defaults live in this module-scope `<script>` block
+ * because `defineProps` default factories are hoisted and cannot reference
+ * bindings declared inside `<script setup>`.
+ */
+import type { ManualPaletteEntry, SmartGroupSeed } from './SmartGroup.types'
+
+const DEFAULT_NAMES = [
+  '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 DEFAULT_SEED: Record<string, SmartGroupSeed> = {
+  Pt001_TumorA_d7_rep1: { group: 'Responder', sub: 'Day 7', sub2: 'Batch 1', color: 'var(--grp-2)' },
+  Pt001_TumorA_d14_rep1: { group: 'Responder', sub: 'Day 14', color: 'var(--grp-2)' },
+  Pt002_TumorB_d7_rep1: { group: 'Non-responder', sub: 'Day 7', sub2: 'Batch 2', color: 'var(--grp-4)' },
+}
+const DEFAULT_PALETTE: ManualPaletteEntry[] = [
+  { c: 'var(--grp-1)', k: 'indigo' },
+  { c: 'var(--grp-2)', k: 'teal' },
+  { c: 'var(--grp-3)', k: 'amber' },
+  { c: 'var(--grp-4)', k: 'rose' },
+  { c: 'var(--grp-5)', k: 'violet' },
+]
+</script>
+
+<script setup lang="ts">
+import { computed, h, ref, type FunctionalComponent } from 'vue'
+import {
+  assignSamples,
+  buildCohortTree,
+  filterSamples,
+  type ManualFilter,
+  type ManualSample,
+} from './SmartGroupManual.cohorts'
+import BaseButton from './BaseButton.vue'
+import type { ManualDonePayload, SmartGroupManualProps } from './SmartGroup.types'
+
+const props = withDefaults(defineProps<SmartGroupManualProps>(), {
+  sampleNames: () => DEFAULT_NAMES,
+  seed: () => DEFAULT_SEED,
+  palette: () => DEFAULT_PALETTE,
+})
+
+const emit = defineEmits<{
+  done: [payload: ManualDonePayload]
+  cancel: []
+  auto: []
+  close: []
+}>()
+
+const Icon: FunctionalComponent<{ d: string; size?: number }> = iconProps =>
+  h(
+    'svg',
+    {
+      width: iconProps.size ?? 16,
+      height: iconProps.size ?? 16,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      stroke: 'currentColor',
+      'stroke-width': 2,
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+    },
+    [h('path', { d: iconProps.d })],
+  )
+const ICON = {
+  search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
+  close: 'M6 18L18 6M6 6l12 12',
+  chev: 'M6 9l6 6 6-6',
+  layers: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5',
+  arrow: 'M5 12h14M13 6l6 6-6 6',
+  check: 'M20 6L9 17l-5-5',
+}
+
+// Unique datalist ids so multiple instances on a page don't collide.
+let mg2Uid = 0
+const uid = ++mg2Uid
+const groupListId = `sg-mg2-groups-${uid}`
+const subListId = `sg-mg2-subs-${uid}`
+const sub2ListId = `sg-mg2-subs2-${uid}`
+
+function buildInitial(): ManualSample[] {
+  return props.sampleNames.map(name => {
+    const seeded = props.seed[name]
+    return {
+      name,
+      group: seeded?.group ?? null,
+      sub: seeded?.sub ?? null,
+      sub2: seeded?.sub2 ?? null,
+      color: seeded?.color ?? null,
+    }
+  })
+}
+
+const samples = ref<ManualSample[]>(buildInitial())
+const query = ref('')
+const filter = ref<ManualFilter>('all')
+const sel = ref<Set<number>>(new Set())
+const grp = ref('')
+const sub = ref('')
+const sub2 = ref('')
+const color = ref(props.palette[0]?.c ?? 'var(--grp-1)')
+
+const assignedCount = computed(() => samples.value.filter(sample => sample.group).length)
+const unassignedCount = computed(() => samples.value.length - assignedCount.value)
+const matches = computed(() => filterSamples(samples.value, query.value, filter.value))
+const matchIdx = computed(() => matches.value.map(match => match.index))
+const allMatchSelected = computed(
+  () => matchIdx.value.length > 0 && matchIdx.value.every(index => sel.value.has(index)),
+)
+const tree = computed(() => buildCohortTree(samples.value))
+
+const existingGroups = computed(() => {
+  const map = new Map<string, string | null>()
+  samples.value.forEach(sample => {
+    if (sample.group && !map.has(sample.group)) map.set(sample.group, sample.color)
+  })
+  return map
+})
+const groupKeys = computed(() => [...existingGroups.value.keys()])
+const existingSubs = computed(() => [...new Set(samples.value.map(sample => sample.sub).filter(Boolean))] as string[])
+const existingSub2 = computed(() => [...new Set(samples.value.map(sample => sample.sub2).filter(Boolean))] as string[])
+
+const canAssign = computed(() => sel.value.size > 0 && grp.value.trim().length > 0)
+const pct = computed(() =>
+  samples.value.length ? Math.round((assignedCount.value / samples.value.length) * 100) : 0,
+)
+const chips = computed<{ k: ManualFilter; label: string; n: number }[]>(() => [
+  { k: 'all', label: 'All', n: samples.value.length },
+  { k: 'unassigned', label: 'Unassigned', n: unassignedCount.value },
+  { k: 'assigned', label: 'Assigned', n: assignedCount.value },
+])
+
+function subsWithout(node: { subs2: Map<string, number> }) {
+  return [...node.subs2.entries()].filter(([key]) => key !== '—')
+}
+
+function toggle(index: number) {
+  const next = new Set(sel.value)
+  next.has(index) ? next.delete(index) : next.add(index)
+  sel.value = next
+}
+function toggleAll() {
+  const next = new Set(sel.value)
+  if (allMatchSelected.value) matchIdx.value.forEach(index => next.delete(index))
+  else matchIdx.value.forEach(index => next.add(index))
+  sel.value = next
+}
+function onGroupInput(value: string) {
+  grp.value = value
+  const seeded = existingGroups.value.get(value)
+  if (seeded) {
+    // Existing cohort → adopt its colour.
+    color.value = seeded
+    return
+  }
+  // New cohort name → pick the first palette swatch not already in use, so
+  // editing a matched name into a new one doesn't bleed the previous colour.
+  const used = new Set(existingGroups.value.values())
+  color.value = props.palette.find(p => !used.has(p.c))?.c ?? props.palette[0]?.c ?? 'var(--grp-1)'
+}
+function assign() {
+  if (sel.value.size === 0 || !grp.value.trim()) return
+  samples.value = assignSamples(samples.value, sel.value, {
+    grp: grp.value,
+    sub: sub.value,
+    sub2: sub2.value,
+    color: color.value,
+  })
+  sel.value = new Set()
+  grp.value = ''
+  sub.value = ''
+  sub2.value = ''
+}
+function clearSel() {
+  sel.value = new Set()
+}
+function onDone() {
+  emit('done', { samples: samples.value })
+}
+</script>
+
+<template>
+  <div class="sg-modal mg2">
+    <!-- header -->
+    <div class="sg-head">
+      <Icon :d="ICON.layers" :size="18" />
+      <span class="sg-head__title">Group samples</span>
+      <span class="sg-head__sub">· when names can’t be parsed automatically</span>
+      <div class="sg-head__spacer" />
+      <div class="sg-mode" role="tablist" aria-label="Grouping mode">
+        <button type="button" class="sg-mode__btn" role="tab" :aria-selected="false" @click="emit('auto')">Auto</button>
+        <button type="button" class="sg-mode__btn sg-mode__btn--on" role="tab" :aria-selected="true">Manual</button>
+      </div>
+      <button class="sg-head__close" aria-label="Close" @click="emit('close')">
+        <Icon :d="ICON.close" :size="16" />
+      </button>
+    </div>
+
+    <div class="mg2-body">
+      <!-- LEFT — find & select -->
+      <div class="mg2-find">
+        <div class="mg2-search">
+          <Icon :d="ICON.search" :size="15" />
+          <input v-model="query" placeholder="Search names — e.g. TumorA, d7, Pt002…" />
+          <button v-if="query" class="mg2-search__clr" aria-label="Clear" @click="query = ''">
+            <Icon :d="ICON.close" :size="13" />
+          </button>
+        </div>
+
+        <div class="mg2-chips">
+          <button
+            v-for="chip in chips"
+            :key="chip.k"
+            class="mg2-chip"
+            :class="{ 'mg2-chip--on': filter === chip.k }"
+            @click="filter = chip.k"
+          >
+            {{ chip.label }}<span class="mg2-chip__n">{{ chip.n }}</span>
+          </button>
+        </div>
+
+        <div class="mg2-selbar">
+          <label class="mg2-check">
+            <input type="checkbox" :checked="allMatchSelected" @change="toggleAll" />
+            <span>Select all<template v-if="filter !== 'all'"> {{ filter }}</template></span>
+          </label>
+          <span class="mg2-selbar__n">{{ matchIdx.length }} shown</span>
+        </div>
+
+        <div class="mg2-list">
+          <div v-if="matches.length === 0" class="mg2-list__empty">No samples match “{{ query }}”.</div>
+          <div
+            v-for="match in matches"
+            :key="match.index"
+            class="mg2-row"
+            :class="{ 'mg2-row--on': sel.has(match.index) }"
+            @click="toggle(match.index)"
+          >
+            <input type="checkbox" class="mg2-cb" :checked="sel.has(match.index)" readonly />
+            <span class="mg2-row__name">{{ match.sample.name }}</span>
+            <span v-if="match.sample.group" class="mg2-row__tag">
+              <span class="sg-dot" :style="{ background: match.sample.color ?? undefined }" />{{ match.sample.group
+              }}<template v-if="match.sample.sub"> · {{ match.sample.sub }}</template>
+            </span>
+            <span v-else class="mg2-row__tag mg2-row__tag--none">unassigned</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- RIGHT — cohorts (persistent output) -->
+      <div class="mg2-cohorts">
+        <div class="mg2-cohorts__head">
+          <span class="mg2-cohorts__t">Cohorts</span>
+          <span class="mg2-cohorts__n">{{ tree.size }} groups</span>
+        </div>
+
+        <div class="mg2-progress">
+          <div class="mg2-progress__top">
+            <span><b>{{ assignedCount }}</b> of {{ samples.length }} grouped</span>
+            <span class="mg2-progress__pct">{{ pct }}%</span>
+          </div>
+          <div class="mg2-progress__track"><div class="mg2-progress__fill" :style="{ width: pct + '%' }" /></div>
+        </div>
+
+        <div class="mg2-tree">
+          <div v-if="tree.size === 0" class="mg2-tree__empty">
+            No cohorts yet. Select samples and assign them to start building.
+          </div>
+          <div v-for="[name, group] in [...tree.entries()]" :key="name" class="mg2-grp">
+            <div class="mg2-grp__row">
+              <span class="sg-dot" :style="{ background: group.color ?? undefined }" />
+              <span class="mg2-grp__name">{{ name }}</span>
+              <span class="mg2-grp__n">{{ group.total }}</span>
+            </div>
+            <template v-for="[subName, subNode] in [...group.subs.entries()]" :key="subName">
+              <div class="mg2-sub">
+                <span class="mg2-sub__name">{{ subName }}</span>
+                <span class="mg2-sub__n">{{ subNode.total }}</span>
+              </div>
+              <div v-for="[s2, count] in subsWithout(subNode)" :key="s2" class="mg2-sub2">
+                <span class="mg2-sub2__name">{{ s2 }}</span>
+                <span class="mg2-sub2__n">{{ count }}</span>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <button
+          v-if="unassignedCount > 0"
+          class="mg2-unassigned"
+          :class="{ 'mg2-unassigned--on': filter === 'unassigned' }"
+          @click="filter = filter === 'unassigned' ? 'all' : 'unassigned'"
+        >
+          <span class="sg-dot" :style="{ background: 'var(--grp-qc)', opacity: 0.5 }" />
+          <b>{{ unassignedCount }}</b> still unassigned
+          <span class="mg2-unassigned__act">{{ filter === 'unassigned' ? 'showing' : 'show' }}</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- contextual assignment bar -->
+    <div class="mg2-bar" :class="{ 'mg2-bar--open': sel.size > 0 }">
+      <div class="mg2-bar__inner">
+        <span class="mg2-bar__count"><b>{{ sel.size }}</b>&nbsp;selected</span>
+        <Icon :d="ICON.arrow" :size="16" />
+        <div class="mg2-field mg2-field--grow">
+          <span class="mg2-field__l">Group</span>
+          <div class="mg2-combo">
+            <span class="sg-dot" :style="{ background: color }" />
+            <input
+              :list="groupListId"
+              :value="grp"
+              placeholder="Type or pick — e.g. Responder"
+              @input="onGroupInput(($event.target as HTMLInputElement).value)"
+            />
+            <span class="mg2-combo__chev"><Icon :d="ICON.chev" :size="14" /></span>
+            <datalist :id="groupListId">
+              <option v-for="key in groupKeys" :key="key" :value="key" />
+            </datalist>
+          </div>
+        </div>
+        <div class="mg2-field mg2-field--grow">
+          <span class="mg2-field__l">Subgroup</span>
+          <div class="mg2-combo">
+            <input :list="subListId" v-model="sub" placeholder="optional — e.g. Day 7" />
+            <datalist :id="subListId">
+              <option v-for="value in existingSubs" :key="value" :value="value" />
+            </datalist>
+          </div>
+        </div>
+        <div class="mg2-field mg2-field--grow">
+          <span class="mg2-field__l">Sub-subgroup</span>
+          <div class="mg2-combo">
+            <input :list="sub2ListId" v-model="sub2" placeholder="optional — e.g. Batch 2" />
+            <datalist :id="sub2ListId">
+              <option v-for="value in existingSub2" :key="value" :value="value" />
+            </datalist>
+          </div>
+        </div>
+        <div class="mg2-field">
+          <span class="mg2-field__l">Color</span>
+          <div class="mg2-swatches">
+            <button
+              v-for="swatch in palette"
+              :key="swatch.k"
+              class="mg2-swatch"
+              :class="{ 'mg2-swatch--on': color === swatch.c }"
+              :style="{ background: swatch.c }"
+              :aria-label="swatch.k"
+              @click="color = swatch.c"
+            />
+          </div>
+        </div>
+        <div class="mg2-bar__spacer" />
+        <button class="mg2-bar__clear" @click="clearSel">Clear</button>
+        <button class="sg-btn sg-btn--primary" :disabled="!canAssign" @click="assign">
+          <Icon :d="ICON.check" :size="15" />
+          {{ canAssign ? `Assign ${sel.size} to “${grp.trim()}”` : 'Assign' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- footer -->
+    <div class="sg-foot">
+      <span class="sg-foot__hint">{{ assignedCount }} of {{ samples.length }} samples grouped</span>
+      <div class="sg-foot__spacer" />
+      <BaseButton variant="ghost" size="sm" @click="emit('cancel')">Cancel</BaseButton>
+      <BaseButton variant="primary" size="sm" @click="onDone">Done</BaseButton>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/smart-group.css';
+</style>

package/src/components/SmartGroupModal.story.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import SmartGroupModal from './SmartGroupModal.vue'
+import type { FieldRecipeApplyPayload, ManualDonePayload, SmartGroupMode } from './SmartGroup.types'
+
+function initState() {
+  return { mode: 'auto' as SmartGroupMode, log: '' }
+}
+</script>
+
+<template>
+  <Story title="Lab/SmartGroupModal">
+    <Variant title="Full View" :init-state="initState">
+      <template #default="{ state }">
+        <div class="sg-story">
+          <div class="sg-story__stage">
+            <SmartGroupModal
+              v-model:mode="state.mode"
+              @apply="(r: FieldRecipeApplyPayload) => (state.log = `apply · ${r.groups.length} groups · ${r.route} · ${r.sampleTotal} samples`)"
+              @done="(r: ManualDonePayload) => (state.log = `done · ${r.samples.filter(s => s.group).length} grouped`)"
+              @cancel="state.log = 'cancelled'"
+              @close="state.log = 'closed'"
+            />
+          </div>
+          <p v-if="state.log" class="sg-story__log">{{ state.log }}</p>
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          :model-value="state.mode"
+          title="Mode"
+          :options="[
+            { value: 'auto', label: 'Auto — Field Recipe' },
+            { value: 'manual', label: 'Manual — Cohorts' },
+          ]"
+          @update:model-value="(v: string) => (state.mode = v as SmartGroupMode)"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.sg-story {
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: flex-start;
+}
+.sg-story__stage {
+  width: 980px;
+  height: 640px;
+  max-width: 100%;
+}
+.sg-story__log {
+  margin: 0;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #64748b);
+}
+</style>

package/src/components/SmartGroupModal.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/**
+ * SmartGroupModal — the Smart Group "Full View": a shell that toggles between
+ * the auto Field Recipe (`SmartGroupFieldRecipe`) and manual cohort builder
+ * (`SmartGroupManual`). The active mode is a writable `v-model:mode`; the
+ * children request a switch by emitting `manual` / `auto`. Apply/done/cancel/
+ * close events bubble up unchanged.
+ *
+ * Each mode is fully configurable through the optional `auto` / `manual` prop
+ * bags; with no props the modal renders the design's reference fixtures.
+ */
+import SmartGroupFieldRecipe from './SmartGroupFieldRecipe.vue'
+import SmartGroupManual from './SmartGroupManual.vue'
+import type {
+  FieldRecipeApplyPayload,
+  ManualDonePayload,
+  SmartGroupFieldRecipeProps,
+  SmartGroupManualProps,
+} from './SmartGroup.types'
+
+withDefaults(
+  defineProps<{
+    /** Props forwarded to the auto-mode Field Recipe. */
+    auto?: Partial<SmartGroupFieldRecipeProps>
+    /** Props forwarded to the manual cohort builder. */
+    manual?: Partial<SmartGroupManualProps>
+  }>(),
+  {
+    auto: () => ({}),
+    manual: () => ({}),
+  },
+)
+
+const mode = defineModel<'auto' | 'manual'>('mode', { default: 'auto' })
+
+const emit = defineEmits<{
+  apply: [payload: FieldRecipeApplyPayload]
+  done: [payload: ManualDonePayload]
+  cancel: []
+  close: []
+}>()
+</script>
+
+<template>
+  <SmartGroupFieldRecipe
+    v-if="mode === 'auto'"
+    v-bind="auto"
+    @manual="mode = 'manual'"
+    @apply="emit('apply', $event)"
+    @cancel="emit('cancel')"
+    @close="emit('close')"
+  />
+  <SmartGroupManual
+    v-else
+    v-bind="manual"
+    @auto="mode = 'auto'"
+    @done="emit('done', $event)"
+    @cancel="emit('cancel')"
+    @close="emit('close')"
+  />
+</template>

package/src/components/index.ts

@@ -77,6 +77,9 @@ export { default as ExperimentTimeline } from './ExperimentTimeline.vue'
 export { default as SampleSelector } from './SampleSelector.vue'
 export { default as AutoGroupModal } from './AutoGroupModal.vue'
 export { default as GroupAssigner } from './GroupAssigner.vue'
+export { default as SmartGroupModal } from './SmartGroupModal.vue'
+export { default as SmartGroupFieldRecipe } from './SmartGroupFieldRecipe.vue'
+export { default as SmartGroupManual } from './SmartGroupManual.vue'
 
 // Lab/Experiment components
 export { default as MoleculeInput } from './MoleculeInput.vue'

package/src/styles/components/dataframe.css

@@ -473,3 +473,82 @@ html.dark .mint-dataframe__loading {
   width: 0.875rem;
   height: 0.875rem;
 }
+
+/* Resizable columns */
+.mint-dataframe__th--resizable {
+  position: relative;
+}
+
+.mint-dataframe__resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  z-index: 1;
+}
+
+.mint-dataframe__resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background-color: var(--border-color);
+  transition: background-color 0.15s ease;
+}
+
+.mint-dataframe__resize-handle:hover::after {
+  width: 2px;
+  background-color: var(--color-primary);
+}
+
+/* Row delete action column */
+.mint-dataframe__th--actions,
+.mint-dataframe__td--actions {
+  width: 2.75rem;
+  text-align: center !important;
+  white-space: nowrap;
+}
+
+.mint-dataframe__delete-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.mint-dataframe__row:hover .mint-dataframe__delete-btn,
+.mint-dataframe__delete-btn:focus-visible {
+  opacity: 1;
+}
+
+.mint-dataframe__delete-btn:hover {
+  background-color: color-mix(in srgb, var(--color-error, #ef4444) 14%, transparent);
+  color: var(--color-error, #ef4444);
+}
+
+.mint-dataframe__delete-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.mint-dataframe__delete-btn svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}

package/src/styles/components/sample-selector.css

@@ -73,16 +73,12 @@
 
 .mint-sample-selector__actions-row {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 0.375rem;
   min-width: 0;
 }
 
-.mint-sample-selector__actions-row--single-primary {
-  grid-template-columns: minmax(0, 1fr) auto;
-}
-
 /* BaseButton overrides for action buttons */
 .mint-sample-selector__action-btn {
   width: 100%;