@morscherlab/mint-sdk 1.3.0-beta.9 → 1.3.1

package/src/components/SmartGroupFieldRecipe.vue

@@ -33,7 +33,7 @@ const DEFAULT_PALETTE = [...SAMPLE_GROUP_TOKENS]
 </script>
 
 <script setup lang="ts">
-import { computed, h, ref, useTemplateRef, type FunctionalComponent } from 'vue'
+import { computed, h, nextTick, ref, type FunctionalComponent } from 'vue'
 import {
   appendQcGroup,
   computeFieldGroups,
@@ -43,10 +43,14 @@ import {
   type QcRoute,
 } from './SmartGroupFieldRecipe.groups'
 import { sampleTypeMarker } from '../utils/sampleTypeMarker'
-import { useDropdownState } from '../composables/useDropdownState'
+import { useListReorder } from '../composables/useListReorder'
+import ActionMenu from './ActionMenu.vue'
 import BaseButton from './BaseButton.vue'
+import BaseToggle from './BaseToggle.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
-import type { FieldRecipeApplyPayload, SmartGroupFieldRecipeProps } from './SmartGroup.types'
+import SegmentedControl from './SegmentedControl.vue'
+import type { ActionMenuItem } from '../types/components'
+import type { FieldRecipeApplyPayload, FieldRecipeQcChip, SmartGroupFieldRecipeProps } from './SmartGroup.types'
 
 const props = withDefaults(defineProps<SmartGroupFieldRecipeProps>(), {
   samples: () => DEFAULT_SAMPLES,
@@ -58,6 +62,7 @@ const props = withDefaults(defineProps<SmartGroupFieldRecipeProps>(), {
   qcColor: 'var(--mint-sample-9)',
   canDownloadTemplate: true,
   loading: false,
+  renamable: false,
 })
 
 const emit = defineEmits<{
@@ -67,8 +72,10 @@ const emit = defineEmits<{
   close: []
   /** Controlled mode: a field toggle was clicked (card index). */
   toggle: [index: number]
-  /** Controlled mode: a layer reorder button was clicked (card index). */
+  /** A field moved one layer (card index). A drag over several layers emits one event for each step. */
   move: [index: number, direction: 'up' | 'down']
+  /** The user gave a field a new name (card index). */
+  rename: [index: number, name: string]
   /** Controlled mode: the QC routing select changed. */
   'update:route': [route: QcRoute]
   /** A CSV/TSV file was chosen (upload button) or dropped; parent parses it. */
@@ -102,9 +109,9 @@ const ICON = {
   check: 'M20 6L9 17l-5-5',
   close: 'M6 18L18 6M6 6l12 12',
   upload: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12',
-  download: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3',
   chev: 'M6 9l6 6 6-6',
-  chevUp: 'M18 15l-6-6-6 6',
+  grip: 'M9 6h.01M9 12h.01M9 18h.01M15 6h.01M15 12h.01M15 18h.01',
+  pencil: 'M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z',
 }
 
 const MAX_BAR = 44
@@ -131,7 +138,9 @@ function onFileChange(event: Event) {
   if (file) emit('csv-file', file)
   input.value = '' // allow re-selecting the same file
 }
-function onDragEnter() {
+function onDragEnter(event: DragEvent) {
+  // A field row dragged to a new layer is not a file drop.
+  if (!event.dataTransfer?.types.includes('Files')) return
   dragDepth += 1
   dragOver.value = true
 }
@@ -146,39 +155,35 @@ function onDrop(event: DragEvent) {
   if (file && isCsvLike(file)) emit('csv-file', file)
 }
 
-// CSV action menu — reuses the SDK's dropdown state (outside-click / Escape
-// close) but renders a compact action menu in the .fr-* styling, since the
-// items are actions (upload / download), not a persistent value selection.
-const {
-  isOpen: csvMenuOpen,
-  close: closeCsvMenu,
-  toggle: toggleCsvMenu,
-} = useDropdownState({
-  rootRef: useTemplateRef<HTMLElement>('csvMenuRoot'),
-  triggerRef: useTemplateRef<HTMLElement>('csvMenuTrigger'),
-})
-
-function chooseUpload() {
-  closeCsvMenu()
-  pickCsv()
-}
-function chooseDownloadTemplate() {
-  if (!props.canDownloadTemplate) return
-  closeCsvMenu()
-  emit('download-template')
-}
-function chooseDownloadPrefilled() {
-  if (!props.canDownloadTemplate) return
-  closeCsvMenu()
-  emit('download-prefilled')
+const csvMenuItems = computed<ActionMenuItem[]>(() => [
+  { id: 'upload', label: 'Upload CSV' },
+  { id: 'template', label: 'Download template', disabled: !props.canDownloadTemplate },
+  { id: 'prefilled', label: 'Download pre-filled', disabled: !props.canDownloadTemplate },
+])
+function onCsvMenuSelect(item: ActionMenuItem) {
+  if (item.id === 'upload') pickCsv()
+  else if (item.id === 'template') emit('download-template')
+  else emit('download-prefilled')
 }
 
+const QC_ROUTE_OPTIONS: { value: QcRoute; label: string }[] = [
+  { value: 'Overlay only', label: 'Overlay' },
+  { value: 'Exclude', label: 'Exclude' },
+  { value: 'Mix into groups', label: 'Mix in' },
+]
+
 // Uncontrolled fallback state (used by the standalone story). In controlled
 // mode AutoGroupModal supplies `enabled` / `layers` / `groups` / `route` +
 // `qcChip` and the `toggle` / `move` / `update:route` events drive the engine
 // instead of this local state. `orderInner` tracks the uncontrolled layer
 // order: field indices in toggle order, first entry = hierarchy layer 1.
-const onInner = ref<boolean[]>(props.initialOn ? [...props.initialOn] : props.fields.map(field => !field.rep))
+// `layers` without `enabled`: the parent owns the order, the toggles are local.
+const startLayers = props.enabled === undefined ? props.layers : undefined
+const onInner = ref<boolean[]>(
+  props.initialOn
+    ? [...props.initialOn]
+    : startLayers?.map(layer => layer !== null) ?? props.fields.map(field => !field.rep),
+)
 const orderInner = ref<number[]>(onInner.value.flatMap((isOn, i) => (isOn ? [i] : [])))
 const routeInner = ref<QcRoute>(props.initialRoute)
 
@@ -192,7 +197,13 @@ const currentRoute = computed(() => props.route ?? routeInner.value)
 // passes `layers` from the engine; controlled-without-layers keeps the legacy
 // field-order numbering; uncontrolled mode derives from the local toggle order.
 const layers = computed<(number | null)[]>(() => {
-  if (props.layers !== undefined) return props.layers
+  if (props.layers !== undefined && controlledEnabled.value) return props.layers
+  if (props.layers !== undefined) {
+    // Local toggles over the parent's order: a field that is switched off
+    // leaves its layer, and one that is switched on goes last.
+    let last = Math.max(0, ...props.layers.map(layer => layer ?? 0))
+    return props.layers.map((layer, i) => (on.value[i] ? layer ?? ++last : null))
+  }
   if (controlledEnabled.value) {
     let layer = 0
     return props.fields.map((_, i) => (on.value[i] ? ++layer : null))
@@ -210,6 +221,14 @@ const layerOrder = computed<number[]>(() =>
     .map(entry => entry.i),
 )
 
+// The two lists of the layout: grouped fields in layer order, then the rest.
+// `index` is the card index that the `toggle` / `move` / `rename` events carry.
+interface FieldCard { index: number; field: SmartGroupField }
+const onCards = computed<FieldCard[]>(() => layerOrder.value.map(index => ({ index, field: props.fields[index] })))
+const offCards = computed<FieldCard[]>(() =>
+  props.fields.flatMap((field, index) => (layers.value[index] === null ? [{ index, field }] : [])),
+)
+
 const computedBase = computed(() =>
   computeFieldGroups(props.samples, props.fields, on.value, props.palette, layerOrder.value),
 )
@@ -218,13 +237,8 @@ const groups = computed(() => props.groups ?? appendQcGroup(computedBase.value,
 const activeFactors = computed(() => layerOrder.value.map(i => props.fields[i].key))
 const counts = computed(() => baseGroups.value.map(group => group.count))
 const uniform = computed(() => counts.value.length > 0 && counts.value.every(count => count === counts.value[0]))
-const repField = computed(() => props.fields.find(field => field.rep))
-const repOn = computed(() => props.fields.some((field, i) => field.rep && on.value[i]))
-const repRange = computed(() => {
-  const parts = (repField.value?.vals ?? '').split(',').map(part => part.trim()).filter(Boolean)
-  if (parts.length === 0) return ''
-  return parts.length > 1 ? `${parts[0]}–${parts[parts.length - 1]}` : parts[0]
-})
+const repOnField = computed(() => props.fields.find((field, i) => field.rep && on.value[i]))
+const repOn = computed(() => repOnField.value !== undefined)
 
 const summary = computed(() =>
   fieldRecipeSummary({ activeFactors: activeFactors.value, repOn: repOn.value, baseGroups: baseGroups.value }),
@@ -234,13 +248,11 @@ const maxCount = computed(() => Math.max(...groups.value.map(group => group.coun
 const qcCount = computed(() => props.qcCount ?? Math.max(0, props.headerCount - props.samples.length))
 const realCount = computed(() => Math.max(0, props.headerCount - qcCount.value))
 const sampleTotal = computed(() => sampleTotalFor(currentRoute.value, realCount.value, qcCount.value))
-const qcChip = computed(() =>
-  props.qcChip !== undefined
-    ? props.qcChip
-    : currentRoute.value !== 'Mix into groups'
-      ? { name: 'QC_Pool', count: qcCount.value }
-      : null,
-)
+const qcChips = computed<FieldRecipeQcChip[]>(() => {
+  if (props.qcChips !== undefined) return props.qcChips
+  if (props.qcChip !== undefined) return props.qcChip ? [props.qcChip] : []
+  return currentRoute.value !== 'Mix into groups' ? [{ name: 'QC_Pool', count: qcCount.value }] : []
+})
 const footHint = computed(() =>
   currentRoute.value === 'Exclude'
     ? ` · ${qcCount.value} QC excluded`
@@ -249,7 +261,19 @@ const footHint = computed(() =>
       : ` · ${qcCount.value} QC overlaid`,
 )
 
+// A toggle moves the row to the other list, a keyboard move reorders the rows
+// and a rename replaces the row. Each time the focused control is re-created,
+// so focus goes back to the same control of the same field.
+const root = ref<HTMLElement | null>(null)
+const controlOf = (index: number, selector: string): HTMLElement | null =>
+  root.value?.querySelector<HTMLElement>(`[data-field="${index}"] ${selector}`) ?? null
+async function refocus(index: number, selector: string) {
+  await nextTick()
+  controlOf(index, selector)?.focus()
+}
+
 function toggle(index: number) {
+  void refocus(index, '[role="switch"]')
   if (controlledEnabled.value) {
     emit('toggle', index)
     return
@@ -263,7 +287,7 @@ function toggle(index: number) {
 }
 
 function moveLayer(index: number, direction: 'up' | 'down') {
-  if (controlledEnabled.value) {
+  if (controlledEnabled.value || props.layers !== undefined) {
     emit('move', index, direction)
     return
   }
@@ -276,6 +300,55 @@ function moveLayer(index: number, direction: 'up' | 'down') {
   orderInner.value = next
 }
 
+// Drag a grouped field to another layer, or press Alt + arrow on its handle.
+const reorder = useListReorder<FieldCard>({
+  items: () => onCards.value,
+  getId: card => card.field.key,
+  getLabel: card => card.field.key,
+  itemNoun: 'layer',
+  getElement: id => {
+    const card = onCards.value.find(candidate => candidate.field.key === id)
+    return card ? controlOf(card.index, '.fr-row__grip') : null
+  },
+  onReorder: ({ fromIndex, toIndex }) => {
+    const { index } = onCards.value[fromIndex]
+    const direction = toIndex < fromIndex ? 'up' : 'down'
+    for (let step = 0; step < Math.abs(toIndex - fromIndex); step++) moveLayer(index, direction)
+  },
+})
+
+// Inline rename of one field at a time. The name is the identity of a field,
+// so a name that another field has is refused and the input stays open.
+const renaming = ref<number | null>(null)
+const draftName = ref('')
+const renameTaken = ref(false)
+const renameInput = ref<HTMLInputElement[]>([])
+async function startRename(card: FieldCard) {
+  renaming.value = card.index
+  renameTaken.value = false
+  draftName.value = card.field.key
+  await nextTick()
+  renameInput.value[0]?.select()
+}
+function endRename(card: FieldCard, restoreFocus: boolean) {
+  renaming.value = null
+  renameTaken.value = false
+  if (restoreFocus) void refocus(card.index, '.fr-row__rename')
+}
+function commitRename(card: FieldCard, fromBlur = false) {
+  if (renaming.value !== card.index) return
+  const name = draftName.value.trim()
+  const taken = name !== card.field.key
+    && (props.fields.some(field => field.key === name) || (props.reservedNames?.includes(name) ?? false))
+  if (taken && !fromBlur) {
+    renameTaken.value = true
+    return
+  }
+  // Leaving the input drops a name that is in use; focus stays where the user put it.
+  endRename(card, !fromBlur)
+  if (name && name !== card.field.key && !taken) emit('rename', card.index, name)
+}
+
 function onRouteChange(value: QcRoute) {
   if (controlledRoute.value) {
     emit('update:route', value)
@@ -296,59 +369,34 @@ function onApply() {
 </script>
 
 <template>
-  <div class="sg-modal fr">
+  <div ref="root" class="sg-modal fr">
     <!-- header -->
     <div class="sg-head">
       <Icon :d="ICON.bolt" :size="18" />
       <span class="sg-head__title">Group samples</span>
       <span class="sg-head__sub">· {{ headerCount }} samples<template v-if="experimentLabel"> from {{ experimentLabel }}</template></span>
       <div class="sg-head__spacer" />
-      <div ref="csvMenuRoot" class="fr-csv">
-        <button
-          ref="csvMenuTrigger"
-          type="button"
-          class="fr-upload"
-          aria-haspopup="menu"
-          :aria-expanded="csvMenuOpen"
-          @click="toggleCsvMenu"
-        >
-          <Icon :d="ICON.upload" :size="14" /> CSV <Icon :d="ICON.chev" :size="13" />
-        </button>
-        <div v-if="csvMenuOpen" class="fr-csv-menu" role="menu">
-          <button type="button" class="fr-csv-item" role="menuitem" @click="chooseUpload">
-            <Icon :d="ICON.upload" :size="14" /> Upload CSV
-          </button>
-          <button
-            type="button"
-            class="fr-csv-item"
-            role="menuitem"
-            :disabled="!canDownloadTemplate"
-            :aria-disabled="!canDownloadTemplate"
-            :title="canDownloadTemplate ? undefined : 'Load samples first'"
-            @click="chooseDownloadTemplate"
-          >
-            <Icon :d="ICON.download" :size="14" /> Download template
-          </button>
+      <ActionMenu label="CSV" :items="csvMenuItems" @select="onCsvMenuSelect">
+        <template #trigger="{ open, toggle: toggleMenu, keydown }">
           <button
             type="button"
-            class="fr-csv-item"
-            role="menuitem"
-            :disabled="!canDownloadTemplate"
-            :aria-disabled="!canDownloadTemplate"
-            :title="canDownloadTemplate ? undefined : 'Load samples first'"
-            @click="chooseDownloadPrefilled"
+            class="fr-upload"
+            aria-haspopup="menu"
+            :aria-expanded="open"
+            @click="toggleMenu"
+            @keydown="keydown"
           >
-            <Icon :d="ICON.download" :size="14" /> Download pre-filled
+            <Icon :d="ICON.upload" :size="14" /> CSV <Icon :d="ICON.chev" :size="13" />
           </button>
-        </div>
-        <input
-          ref="fileInput"
-          type="file"
-          accept=".csv,.tsv,text/csv,text/tab-separated-values"
-          hidden
-          @change="onFileChange"
-        />
-      </div>
+        </template>
+      </ActionMenu>
+      <input
+        ref="fileInput"
+        type="file"
+        accept=".csv,.tsv,text/csv,text/tab-separated-values"
+        hidden
+        @change="onFileChange"
+      />
       <div class="sg-mode" role="tablist" aria-label="Grouping mode">
         <button type="button" class="sg-mode__btn sg-mode__btn--on" role="tab" :aria-selected="true">Auto</button>
         <button type="button" class="sg-mode__btn" role="tab" :aria-selected="false" @click="emit('manual')">Manual</button>
@@ -375,80 +423,149 @@ function onApply() {
           <LoadingSpinner size="md" label="Loading experiment metadata" />
           <span>Loading experiment metadata…</span>
         </div>
-        <div class="sg-lead">
-          <span class="sg-lead__q">Group by which fields?</span>
+        <div v-if="fields.length === 0 && headerCount === 0 && !loading" class="fr-blank" data-test="recipe-empty">
+          <span class="sg-lead__q">No samples to group</span>
           <span class="sg-lead__hint">
-            MINT read the structure of your sample names. Switch on the factors that define your groups —
-            replicate fields are detected and left off.
+            Upload a CSV with one sample column and one column for each field, or close this dialog and select
+            samples first.
           </span>
+          <BaseButton variant="secondary" size="sm" @click="pickCsv">
+            <template #icon-left><Icon :d="ICON.upload" :size="15" /></template>
+            Upload CSV
+          </BaseButton>
         </div>
+        <template v-else>
+          <div v-if="anatomy && anatomy.length > 0" class="fr-anatomy">
+            <span class="fr-label">How MINT read your names</span>
+            <div class="fr-anatomy__tokens">
+              <span v-for="(token, t) in anatomy" :key="t" class="fr-token" :class="'fr-token--' + token.state">
+                <span class="fr-token__text">{{ token.text }}</span>
+                <span class="fr-token__caption">{{ token.caption }}</span>
+              </span>
+            </div>
+          </div>
 
-        <div class="sg-recipe">
-          <div
-            v-for="(field, i) in fields"
-            :key="field.key"
-            class="sg-field"
-            :class="{ 'sg-field--on': on[i], 'fr-field--warn': field.rep && on[i] }"
-          >
-            <div class="fr-field__head">
-              <span class="sg-field__name">{{ field.key }}</span>
-              <span class="sg-field__role" :class="{ 'sg-field__role--rep': field.rep }">{{ field.role }}</span>
+          <span class="fr-label">Group by</span>
+          <div class="sg-recipe">
+            <div v-if="onCards.length === 0" class="fr-empty">
+              {{ fields.length === 0 ? 'These sample names have no field to group by.' : 'No field is on. Switch on a field below.' }}
             </div>
-            <button
-              class="sg-switch fr-switch"
-              :class="{ on: on[i] }"
-              role="switch"
-              :aria-checked="on[i]"
-              :aria-label="'Group by ' + field.key"
-              @click="toggle(i)"
-            />
-            <div v-if="on[i] && layers[i] !== null" class="sg-field__order">
-              <span class="sg-field__layer">Layer {{ layers[i] }}</span>
-              <button
-                type="button"
-                class="sg-field__order-btn"
-                :disabled="layers[i] === 1"
-                :aria-label="'Move ' + field.key + ' up a layer'"
-                title="Move up a layer"
-                @click.stop="moveLayer(i, 'up')"
-              >
-                <Icon :d="ICON.chevUp" :size="12" />
-              </button>
+            <div
+              v-for="(card, position) in onCards"
+              :key="card.field.key"
+              class="sg-field sg-field--on fr-row"
+              :class="{
+                'fr-field--warn': card.field.rep,
+                'fr-row--dragging': reorder.isDragging(card.field.key),
+                'fr-row--over': reorder.isDragOver(card.field.key),
+              }"
+              data-test="field-on"
+              :data-field="card.index"
+              :draggable="renaming !== card.index"
+              @dragstart="reorder.onDragStart($event, card, position)"
+              @dragover="reorder.onDragOver($event, card, position)"
+              @dragleave="reorder.onDragLeave"
+              @drop="reorder.onDrop($event, card, position)"
+              @dragend="reorder.onDragEnd"
+            >
               <button
                 type="button"
-                class="sg-field__order-btn"
-                :disabled="layers[i] === layerOrder.length"
-                :aria-label="'Move ' + field.key + ' down a layer'"
-                title="Move down a layer"
-                @click.stop="moveLayer(i, 'down')"
+                class="fr-row__grip"
+                :aria-label="`Move ${card.field.key}, layer ${position + 1} of ${onCards.length}. Press Alt and an arrow key.`"
+                @keydown="reorder.onKeydown($event, card, position)"
               >
-                <Icon :d="ICON.chev" :size="12" />
+                <Icon :d="ICON.grip" :size="14" />
               </button>
+              <span class="fr-row__layer">{{ position + 1 }}</span>
+              <input
+                v-if="renaming === card.index"
+                ref="renameInput"
+                v-model="draftName"
+                class="fr-row__name-input"
+                :aria-label="'New name for ' + card.field.key"
+                :aria-invalid="renameTaken || undefined"
+                @input="renameTaken = false"
+                @keydown.enter.prevent="commitRename(card)"
+                @keydown.esc.stop="endRename(card, true)"
+                @blur="commitRename(card, true)"
+              />
+              <span v-if="renaming === card.index && renameTaken" class="fr-row__error" role="alert">
+                Another field has this name
+              </span>
+              <template v-else>
+                <span class="sg-field__name">{{ card.field.key }}</span>
+                <button
+                  v-if="renamable"
+                  type="button"
+                  class="fr-row__rename"
+                  :aria-label="'Rename ' + card.field.key"
+                  @click="startRename(card)"
+                >
+                  <Icon :d="ICON.pencil" :size="12" />
+                </button>
+              </template>
+              <span class="sg-field__vals">{{ card.field.vals }}</span>
+              <span v-if="hints?.[card.index]" class="fr-row__hint">{{ hints[card.index] }}</span>
+              <BaseToggle
+                size="sm"
+                :model-value="true"
+                :aria-label="'Group by ' + card.field.key"
+                @update:model-value="toggle(card.index)"
+              />
             </div>
-            <div class="sg-field__vals">{{ field.vals }}</div>
           </div>
-        </div>
+          <span :style="reorder.announcerStyle" aria-live="polite">{{ reorder.announcement.value }}</span>
 
-        <!-- inline plain-english summary -->
-        <div v-if="summary.kind === 'mute'" class="sg-summary fr-summary--mute">
-          <span class="sg-summary__icon"><Icon :d="ICON.info" :size="16" /></span>
-          <span>Turn on at least one field to form groups.</span>
-        </div>
-        <div v-else-if="summary.kind === 'warn'" class="sg-summary sg-summary--warn">
-          <span class="sg-summary__icon"><Icon :d="ICON.warn" :size="16" /></span>
-          <span>
-            Including <b>{{ repField?.key ?? 'Replicate' }}</b> makes every sample unique —
-            <b>{{ baseGroups.length }} groups of 1</b>. Turn it off to keep <code>{{ repRange }}</code> together.
-          </span>
-        </div>
-        <div v-else class="sg-summary">
-          <span class="sg-summary__icon"><Icon :d="ICON.info" :size="16" /></span>
-          <span>
-            Grouping by <b>{{ activeFactors.join(' × ') }}</b> →
-            <b>{{ baseGroups.length }} groups<template v-if="uniform"> of {{ counts[0] }}</template></b>.
-            Replicates kept together.
-          </span>
-        </div>
+          <template v-if="offCards.length > 0">
+            <span class="fr-label">Left off</span>
+            <div class="sg-recipe">
+              <div
+                v-for="card in offCards"
+                :key="card.field.key"
+                class="sg-field fr-row"
+                data-test="field-off"
+                :data-field="card.index"
+              >
+                <span class="sg-field__name">{{ card.field.key }}</span>
+                <span class="sg-field__role" :class="{ 'sg-field__role--rep': card.field.rep }">{{ card.field.role }}</span>
+                <span class="sg-field__vals">{{ card.field.vals }}</span>
+                <BaseToggle
+                  size="sm"
+                  :model-value="false"
+                  :aria-label="'Group by ' + card.field.key"
+                  @update:model-value="toggle(card.index)"
+                />
+              </div>
+            </div>
+          </template>
+
+          <!-- inline plain-english summary -->
+          <div v-if="summary.kind === 'mute'" class="sg-summary fr-summary--mute">
+            <span class="sg-summary__icon"><Icon :d="ICON.info" :size="16" /></span>
+            <span>Turn on at least one field to form groups.</span>
+          </div>
+          <div v-else-if="summary.kind === 'warn'" class="sg-summary sg-summary--warn">
+            <span class="sg-summary__icon"><Icon :d="ICON.warn" :size="16" /></span>
+            <span>
+              Including <b>{{ repOnField?.key }}</b> makes every sample unique —
+              <b>{{ baseGroups.length }} groups of 1</b>. Switch it off to keep replicates together.
+            </span>
+          </div>
+          <div v-else-if="summary.kind === 'singletons'" class="sg-summary sg-summary--warn">
+            <span class="sg-summary__icon"><Icon :d="ICON.warn" :size="16" /></span>
+            <span>
+              <b>{{ counts.filter(count => count === 1).length }} of {{ baseGroups.length }} groups</b> have one sample.
+              Switch off a field to form larger groups.
+            </span>
+          </div>
+          <div v-else class="sg-summary">
+            <span class="sg-summary__icon"><Icon :d="ICON.info" :size="16" /></span>
+            <span>
+              Grouping by <b>{{ activeFactors.join(' × ') }}</b> →
+              <b>{{ baseGroups.length }} groups<template v-if="uniform"> of {{ counts[0] }}</template></b>.
+            </span>
+          </div>
+        </template>
       </div>
 
       <!-- rail -->
@@ -473,23 +590,26 @@ function onApply() {
         <div class="sg-qc">
           <div class="sg-qc__head">
             <span class="sg-qc__title">Quality control</span>
-            <select
-              class="sg-qc__route"
-              :value="currentRoute"
-              @change="onRouteChange(($event.target as HTMLSelectElement).value as QcRoute)"
+            <SegmentedControl
+              class="fr-qc__route"
+              size="sm"
+              variant="card"
+              aria-label="Quality control routing"
+              :model-value="currentRoute"
+              :options="QC_ROUTE_OPTIONS"
+              @update:model-value="onRouteChange($event as QcRoute)"
+            />
+          </div>
+          <div class="fr-qc__chips">
+            <span
+              v-for="chip in qcChips"
+              :key="chip.name"
+              class="sg-qc__chip"
+              :class="{ 'fr-qc__chip--off': currentRoute === 'Exclude' }"
             >
-              <option>Overlay only</option>
-              <option>Exclude</option>
-              <option>Mix into groups</option>
-            </select>
+              <span class="sg-dot" :style="QC_DOT_STYLE" />{{ chip.name }} ×{{ chip.count }}
+            </span>
           </div>
-          <span
-            v-if="qcChip"
-            class="sg-qc__chip"
-            :class="{ 'fr-qc__chip--off': currentRoute === 'Exclude' }"
-          >
-            <span class="sg-dot" :style="QC_DOT_STYLE" />{{ qcChip.name }} ×{{ qcChip.count }}
-          </span>
         </div>
       </div>
     </div>

package/src/components/internal/AppTopBarPageSelectorInternal.vue

@@ -89,7 +89,7 @@ function handleSelect(page: PageSelectorItem) {
       </span>
     </button>
 
-    <div v-if="isOpen" class="mint-popover mint-page-selector__menu" role="menu">
+    <div v-if="isOpen" class="mint-page-selector__menu" role="menu">
       <div class="mint-page-selector__menu-title">Go to</div>
       <ActionItemInternal
         v-for="page in normalizedPages"
@@ -98,8 +98,8 @@ function handleSelect(page: PageSelectorItem) {
         :to="page.to"
         :disabled="page.disabled"
         :class="[
-          'mint-menu-item mint-page-selector__item',
-          { 'mint-menu-item--selected mint-page-selector__item--active': page.id === current?.id },
+          'mint-page-selector__item',
+          { 'mint-page-selector__item--active': page.id === current?.id },
           { 'mint-page-selector__item--disabled': page.disabled },
         ]"
         role="menuitem"
@@ -121,9 +121,6 @@ function handleSelect(page: PageSelectorItem) {
           </slot>
         </span>
         <span class="mint-page-selector__item-label">{{ page.label }}</span>
-        <svg class="mint-menu-item__check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="M3.5 8.5l3 3 6-7" />
-        </svg>
       </ActionItemInternal>
     </div>
   </div>