@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/components/SampleSelector.story.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import SampleSelector from './SampleSelector.vue'
+import type { SampleGroup } from '../types'
+import type { AutoGroupResult } from '../types/auto-group'
+
+const mockSamples = [
+  'Control_Rep1', 'Control_Rep2', 'Control_Rep3',
+  'Treatment_Low_Rep1', 'Treatment_Low_Rep2', 'Treatment_Low_Rep3',
+  'Treatment_High_Rep1', 'Treatment_High_Rep2', 'Treatment_High_Rep3',
+  'Vehicle_Rep1', 'Vehicle_Rep2', 'Vehicle_Rep3',
+]
+
+const mockGroups: SampleGroup[] = [
+  { name: 'Control', color: '#3B82F6', samples: ['Control_Rep1', 'Control_Rep2', 'Control_Rep3'] },
+  { name: 'Treatment_Low', color: '#10B981', samples: ['Treatment_Low_Rep1', 'Treatment_Low_Rep2', 'Treatment_Low_Rep3'] },
+  { name: 'Treatment_High', color: '#EF4444', samples: ['Treatment_High_Rep1', 'Treatment_High_Rep2', 'Treatment_High_Rep3'] },
+  { name: 'Vehicle', color: '#F59E0B', samples: ['Vehicle_Rep1', 'Vehicle_Rep2', 'Vehicle_Rep3'] },
+]
+
+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'] },
+]
+
+// Demonstrates same-hue gradient for sub-groups inside a major group:
+// each Treatment_* gets a shade of the major group's color.
+const hierarchicalSamples = [
+  'Treatment_Low_Rep1', 'Treatment_Low_Rep2',
+  'Treatment_Mid_Rep1', 'Treatment_Mid_Rep2',
+  'Treatment_High_Rep1', 'Treatment_High_Rep2',
+  'Treatment_Max_Rep1', 'Treatment_Max_Rep2',
+  'Control_Rep1', 'Control_Rep2',
+  'Control_Vehicle_Rep1', 'Control_Vehicle_Rep2',
+]
+const hierarchicalGroups: SampleGroup[] = [
+  { name: 'Treatment_Low', color: '#3B82F6', samples: ['Treatment_Low_Rep1', 'Treatment_Low_Rep2'] },
+  { name: 'Treatment_Mid', color: '#10B981', samples: ['Treatment_Mid_Rep1', 'Treatment_Mid_Rep2'] },
+  { name: 'Treatment_High', color: '#F59E0B', samples: ['Treatment_High_Rep1', 'Treatment_High_Rep2'] },
+  { name: 'Treatment_Max', color: '#EF4444', samples: ['Treatment_Max_Rep1', 'Treatment_Max_Rep2'] },
+  { name: 'Control_Baseline', color: '#8B5CF6', samples: ['Control_Rep1', 'Control_Rep2'] },
+  { name: 'Control_Vehicle', color: '#EC4899', samples: ['Control_Vehicle_Rep1', 'Control_Vehicle_Rep2'] },
+]
+
+// Multi-factor LC-MS names (Tissue × Timepoint × Dose × rep) — exercises the
+// auto-group hierarchy layers: each enabled factor becomes one layer, in the
+// order shown on the Field Recipe cards.
+const lcmsSamples = ['Liver', 'Kidney'].flatMap(tissue =>
+  ['5min', '10min'].flatMap(time =>
+    ['High', 'Low'].flatMap(dose =>
+      [1, 2, 3].map(rep => `${tissue}_${time}_${dose}_rep${rep}`),
+    ),
+  ),
+)
+
+function initState() {
+  return {
+    samples: mockSamples,
+    selected: [] as string[],
+    groups: [] as SampleGroup[],
+    enableGrouping: true,
+    enableSmartGroup: true,
+  }
+}
+
+function initLcmsState() {
+  return {
+    samples: lcmsSamples,
+    selected: [] as string[],
+    groups: [] as SampleGroup[],
+  }
+}
+
+function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[] }) {
+  state.groups = result.groups
+  console.log('Smart group result:', result)
+}
+</script>
+
+<template>
+  <Story title="Lab/SampleSelector">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px;">
+          <SampleSelector
+            v-model="state.selected"
+            v-model:groups="state.groups"
+            :samples="state.samples"
+            :enable-grouping="state.enableGrouping"
+            :enable-smart-group="state.enableSmartGroup"
+            @smart-group="(r: AutoGroupResult) => handleSmartGroup(r, state)"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.enableGrouping" title="Enable Grouping" />
+        <HstCheckbox v-model="state.enableSmartGroup" title="Enable Smart" />
+      </template>
+    </Variant>
+
+    <Variant title="With Pre-defined Groups">
+      <div style="padding: 2rem; max-width: 400px;">
+        <SampleSelector
+          :model-value="['Control_Rep1', 'Treatment_Low_Rep1']"
+          :samples="mockSamples"
+          :groups="mockGroups"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Narrow Action Bar">
+      <div style="padding: 2rem; width: 320px;">
+        <SampleSelector
+          :model-value="['Control_Rep1']"
+          :samples="mockSamples"
+          :groups="mockGroups"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Manual Button">
+      <div style="padding: 2rem; max-width: 1040px;">
+        <SampleSelector
+          :model-value="[]"
+          :samples="manualSamples"
+          :groups="manualGroups"
+          :enable-smart-group="false"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Hierarchical Color Family">
+      <div style="padding: 2rem; max-width: 460px;">
+        <SampleSelector
+          :model-value="[]"
+          :samples="hierarchicalSamples"
+          :groups="hierarchicalGroups"
+        />
+        <p style="font-size: 0.8125rem; color: #64748b; margin-top: 1rem;">
+          Each major group keeps its own seed color; sub-groups inside it
+          render a same-hue gradient (lightest → darkest by index). Click the
+          large color dot on a major group to recolor the whole family.
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Auto Group Hierarchy (LC-MS)" :init-state="initLcmsState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 420px;">
+          <SampleSelector
+            v-model="state.selected"
+            v-model:groups="state.groups"
+            :samples="state.samples"
+            @smart-group="(r: AutoGroupResult) => handleSmartGroup(r, state)"
+          />
+          <p style="font-size: 0.8125rem; color: #64748b; margin-top: 1rem;">
+            Open Grouping: each switched-on factor is one hierarchy layer
+            (Layer 1 = major group). Use the layer arrows to reorder, e.g.
+            promote Dose above Timepoint, then Apply.
+          </p>
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="No Grouping">
+      <div style="padding: 2rem; max-width: 400px;">
+        <SampleSelector
+          :model-value="[]"
+          :samples="mockSamples"
+          :enable-grouping="false"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SampleSelector.tree.ts

@@ -0,0 +1,48 @@
+import type { SampleGroupNode } from '../composables/useSampleGroups'
+import type { GroupDragKind, GroupReorderPosition } from './SampleSelector.groups'
+
+/**
+ * Handlers and state predicates shared by every level of the group tree.
+ * Passed down as a single prop so the recursive row component does not have to
+ * re-emit each event at every nesting level.
+ */
+export interface SampleGroupTreeContext {
+  isExpanded: (key: string) => boolean
+  toggleExpanded: (key: string) => void
+  isSampleSelected: (sample: string) => boolean
+  isFullySelected: (samples: string[]) => boolean
+  isPartiallySelected: (samples: string[]) => boolean
+  toggleSamples: (samples: string[]) => void
+  toggleSample: (sample: string) => void
+  removeGroups: (groupNames: string[]) => void
+  removeSampleFromGroup: (sample: string, groupName: string) => void
+  openColorPicker: (groupNames: string[], event: Event) => void
+  // Drag state + handlers, mirroring `useSampleSelectorDrag`.
+  draggingSample: () => string | null
+  dragOverGroup: () => string | null
+  draggingGroup: () => string | null
+  draggingGroupKind: () => GroupDragKind | null
+  reorderTarget: () => string | null
+  reorderPosition: () => GroupReorderPosition | null
+  onSampleDragStart: (sample: string, groupName: string | null, event: DragEvent) => void
+  onSampleDragEnd: () => void
+  onSampleDragOver: (groupName: string, event: DragEvent) => void
+  onSampleDragLeave: () => void
+  onSampleDrop: (groupName: string, event: DragEvent) => void
+  onGroupDragStart: (name: string, kind: GroupDragKind, event: DragEvent) => void
+  onGroupDragEnd: () => void
+  onGroupDragOver: (name: string, kind: GroupDragKind, event: DragEvent) => void
+  onGroupDragLeave: (event: DragEvent) => void
+  onGroupDrop: (name: string, kind: GroupDragKind, event: DragEvent) => void
+}
+
+/** Every concrete group name beneath a node, in tree order. */
+export function collectLeafGroupNames(node: SampleGroupNode): string[] {
+  if (node.group) return [node.group.name]
+  return node.children.flatMap(collectLeafGroupNames)
+}
+
+/** Expansion keys for a whole tree, used by "expand all". */
+export function collectNodeKeys(nodes: SampleGroupNode[]): string[] {
+  return nodes.flatMap(node => [node.key, ...collectNodeKeys(node.children)])
+}

package/src/components/SampleSelector.vue

@@ -0,0 +1,451 @@
+<script setup lang="ts">
+/** Interactive sample list with drag-and-drop group assignment, color labeling, and smart-group support. */
+import { ref, computed } from 'vue'
+import BaseButton from './BaseButton.vue'
+import BaseInput from './BaseInput.vue'
+import AutoGroupModal from './AutoGroupModal.vue'
+import SampleSelectorSampleRow from './SampleSelectorSampleRow.vue'
+import SampleSelectorGroupNode from './SampleSelectorGroupNode.vue'
+import { collectNodeKeys, type SampleGroupTreeContext } from './SampleSelector.tree'
+import type { SampleGroup } from '../types'
+import type { AutoGroupResult } from '../types/auto-group'
+import { useTextSearch } from '../composables/useTextSearch'
+import { useSampleGroups } from '../composables/useSampleGroups'
+import { useExpansionSet } from '../composables/useExpansionSet'
+import { useExperimentSamples } from '../composables/useExperimentSamples'
+import { useSampleSelectorDrag } from './SampleSelector.drag'
+import { useSampleSelectorSelection } from './SampleSelector.selection'
+import {
+  applySampleGroupColorEdit,
+  createSampleGroup,
+  getSampleGroupColorEditSeed,
+  type ColorEdit,
+} from './SampleSelector.colors'
+import {
+  removeSampleFromGroup as removeSampleFromSampleGroup,
+  removeSampleGroups,
+} from './SampleSelector.groups'
+
+interface Props {
+  samples?: string[]
+  modelValue: string[]
+  groups?: SampleGroup[]
+  enableGrouping?: boolean
+  enableSmartGroup?: boolean
+  experimentId?: number
+  designData?: Record<string, unknown>
+  autoloadExperimentData?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  samples: () => [],
+  groups: () => [],
+  enableGrouping: true,
+  enableSmartGroup: true,
+  experimentId: undefined,
+  designData: undefined,
+  autoloadExperimentData: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [samples: string[]]
+  'update:groups': [groups: SampleGroup[]]
+  smartGroup: [result: AutoGroupResult]
+}>()
+
+// UI State
+const showSmartGroupModal = ref(false)
+const groupingModalMode = ref<'auto' | 'manual'>('auto')
+const newGroupName = ref('')
+const editingColor = ref<ColorEdit | null>(null)
+const colorPickerInput = ref<HTMLInputElement | null>(null)
+const searchQuery = ref('')
+const groupExpansion = useExpansionSet()
+
+// Computed: groups from props
+const internalGroups = computed({
+  get: () => props.groups,
+  set: (value) => emit('update:groups', value),
+})
+
+const {
+  draggingSample,
+  dragOverGroup,
+  draggingGroup,
+  draggingGroupKind,
+  reorderTarget,
+  reorderPosition,
+  handleDragStart,
+  handleDragEnd,
+  handleDragOver,
+  handleDragLeave,
+  handleDrop,
+  handleGroupDragStart,
+  handleGroupDragEnd,
+  handleGroupDragOver,
+  handleGroupDragLeave,
+  handleGroupDrop,
+} = useSampleSelectorDrag(internalGroups)
+
+const providedSamples = computed(() => props.samples)
+const shouldLoadExperimentSamples = computed(() =>
+  props.autoloadExperimentData && providedSamples.value.length === 0,
+)
+const experimentSamples = useExperimentSamples({
+  experimentId: () => props.experimentId,
+  designData: () => props.designData,
+  enabled: shouldLoadExperimentSamples,
+})
+const resolvedSamples = computed(() =>
+  providedSamples.value.length > 0 ? providedSamples.value : experimentSamples.samples.value,
+)
+const resolvedExperimentId = computed(() => props.experimentId ?? experimentSamples.experimentId.value)
+const resolvedDesignData = computed(() => props.designData ?? experimentSamples.designData.value ?? undefined)
+
+const sampleGroups = useSampleGroups({
+  samples: () => resolvedSamples.value,
+  groups: internalGroups,
+})
+const groupTree = sampleGroups.groupTree
+
+const groupingEnabled = computed(() => internalGroups.value.length > 0)
+const ungroupedSamples = sampleGroups.ungroupedSamples
+const groupingActionMode = computed<'auto' | 'manual'>(() => props.enableSmartGroup ? 'auto' : 'manual')
+
+const sampleSearch = useTextSearch({
+  items: () => resolvedSamples.value,
+  query: searchQuery,
+  getText: sample => sample,
+})
+const filteredSamples = sampleSearch.filteredItems
+
+const {
+  isAllSelected,
+  toggleSelectAll,
+  toggleSample,
+  toggleSamplesSelection,
+  isFullySelected,
+  isPartiallySelected,
+} = useSampleSelectorSelection({
+  selected: () => props.modelValue,
+  samples: () => resolvedSamples.value,
+  emitSelected: samples => emit('update:modelValue', samples),
+})
+
+// Expand/collapse
+function toggleGroupExpanded(groupName: string) {
+  groupExpansion.toggle(groupName)
+}
+
+function isGroupExpanded(groupName: string): boolean {
+  return groupExpansion.isExpanded(groupName)
+}
+
+function expandAllGroups() {
+  groupExpansion.setExpanded([...collectNodeKeys(groupTree.value), '__ungrouped__'])
+}
+
+function collapseAllGroups() {
+  groupExpansion.collapseAll()
+}
+
+// Smart group
+function handleSmartGroupApply(result: AutoGroupResult) {
+  emit('smartGroup', result)
+  emit('update:groups', result.groups)
+}
+
+function openGroupingModal(mode: 'auto' | 'manual') {
+  groupingModalMode.value = mode
+  showSmartGroupModal.value = true
+}
+
+// Group management
+function clearGroups() {
+  internalGroups.value = []
+}
+
+function deleteGroups(groupNames: string[]) {
+  internalGroups.value = removeSampleGroups(internalGroups.value, groupNames)
+}
+
+function removeSampleFromGroup(sample: string, groupName: string) {
+  internalGroups.value = removeSampleFromSampleGroup(internalGroups.value, sample, groupName)
+}
+
+// Color picker
+function openColorPicker(groupNames: string[], event: Event) {
+  event.stopPropagation()
+  editingColor.value = groupNames.length === 1
+    ? { kind: 'single', name: groupNames[0] }
+    : { kind: 'family', names: groupNames }
+  colorPickerInput.value?.click()
+}
+
+function handleColorChange(event: Event) {
+  const edit = editingColor.value
+  if (!edit) return
+
+  const newColor = (event.target as HTMLInputElement).value
+  internalGroups.value = applySampleGroupColorEdit(internalGroups.value, edit, newColor)
+  editingColor.value = null
+}
+
+function getGroupColor(groupName: string): string {
+  return sampleGroups.getGroupColor(groupName)
+}
+
+const colorPickerSeed = computed(() => {
+  return getSampleGroupColorEditSeed(editingColor.value, getGroupColor)
+})
+
+// Bundle of handlers handed to every level of the recursive group tree.
+const treeContext = computed<SampleGroupTreeContext>(() => ({
+  isExpanded: isGroupExpanded,
+  toggleExpanded: toggleGroupExpanded,
+  isSampleSelected: sample => props.modelValue.includes(sample),
+  isFullySelected,
+  isPartiallySelected,
+  toggleSamples: toggleSamplesSelection,
+  toggleSample,
+  removeGroups: deleteGroups,
+  removeSampleFromGroup,
+  openColorPicker,
+  draggingSample: () => draggingSample.value,
+  dragOverGroup: () => dragOverGroup.value,
+  draggingGroup: () => draggingGroup.value,
+  draggingGroupKind: () => draggingGroupKind.value,
+  reorderTarget: () => reorderTarget.value,
+  reorderPosition: () => reorderPosition.value,
+  onSampleDragStart: handleDragStart,
+  onSampleDragEnd: handleDragEnd,
+  onSampleDragOver: handleDragOver,
+  onSampleDragLeave: handleDragLeave,
+  onSampleDrop: handleDrop,
+  onGroupDragStart: handleGroupDragStart,
+  onGroupDragEnd: handleGroupDragEnd,
+  onGroupDragOver: handleGroupDragOver,
+  onGroupDragLeave: handleGroupDragLeave,
+  onGroupDrop: handleGroupDrop,
+}))
+
+// New group
+function addNewGroup() {
+  const newGroup = createSampleGroup(newGroupName.value, internalGroups.value)
+  if (!newGroup) return
+  internalGroups.value = [...internalGroups.value, newGroup]
+  newGroupName.value = ''
+}
+
+defineExpose({ handleSmartGroupApply })
+</script>
+
+<template>
+  <div class="mint-sample-selector">
+    <!-- Select All Row -->
+    <label class="mint-sample-selector__select-all">
+      <input
+        type="checkbox"
+        :checked="isAllSelected"
+        @change="toggleSelectAll"
+        class="mint-sample-selector__checkbox"
+      />
+      <span class="mint-sample-selector__select-all-label">Select All</span>
+      <span class="mint-sample-selector__select-all-count">{{ resolvedSamples.length }} samples</span>
+    </label>
+
+    <!-- Action Buttons Row -->
+    <div v-if="enableGrouping" class="mint-sample-selector__actions">
+      <div class="mint-sample-selector__actions-row">
+        <!-- Grouping Button -->
+        <BaseButton
+          :variant="enableSmartGroup && groupingEnabled ? 'primary' : 'secondary'"
+          size="sm"
+          :disabled="resolvedSamples.length === 0"
+          class="mint-sample-selector__action-btn"
+          @click="openGroupingModal(groupingActionMode)"
+        >
+          <svg v-if="enableSmartGroup" class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+          </svg>
+          <svg v-else class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3 3 7.5l9 4.5 9-4.5L12 3ZM3 12l9 4.5 9-4.5M3 16.5l9 4.5 9-4.5" />
+          </svg>
+          <span class="mint-sample-selector__action-label">Grouping</span>
+        </BaseButton>
+
+        <!-- Reset Button -->
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          :disabled="internalGroups.length === 0"
+          class="mint-sample-selector__action-btn mint-sample-selector__action-btn--reset"
+          @click="clearGroups"
+          title="Clear all groups"
+        >
+          <svg class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+        </BaseButton>
+      </div>
+    </div>
+
+    <!-- Grouped View -->
+    <div v-if="groupingEnabled" class="mint-sample-selector__grouped">
+      <!-- Groups Header -->
+      <div class="mint-sample-selector__groups-header">
+        <span class="mint-sample-selector__groups-title">Groups ({{ internalGroups.length }})</span>
+        <div class="mint-sample-selector__groups-controls">
+          <button type="button" class="mint-sample-selector__expand-btn" @click="expandAllGroups" title="Expand all" aria-label="Expand all groups">
+            <svg class="mint-sample-selector__expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          <button type="button" class="mint-sample-selector__expand-btn" @click="collapseAllGroups" title="Collapse all" aria-label="Collapse all groups">
+            <svg class="mint-sample-selector__expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Hierarchical Tree -->
+      <div class="mint-sample-selector__tree">
+        <SampleSelectorGroupNode
+          v-for="node in groupTree"
+          :key="node.key"
+          :node="node"
+          :depth="0"
+          :ctx="treeContext"
+        />
+
+        <!-- Empty state -->
+        <div v-if="internalGroups.length === 0" class="mint-sample-selector__empty">
+          Click Smart to auto-group samples
+        </div>
+      </div>
+
+      <!-- Ungrouped Samples Section -->
+      <div v-if="ungroupedSamples.length > 0" class="mint-sample-selector__ungrouped">
+        <div
+          class="mint-sample-selector__ungrouped-header"
+          @click="toggleGroupExpanded('__ungrouped__')"
+        >
+          <svg
+            :class="[
+              'mint-sample-selector__chevron',
+              isGroupExpanded('__ungrouped__') ? 'mint-sample-selector__chevron--open' : '',
+            ]"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+          <span class="mint-sample-selector__ungrouped-label">Ungrouped</span>
+          <span class="mint-sample-selector__ungrouped-count">{{ ungroupedSamples.length }}</span>
+        </div>
+
+        <Transition name="mint-collapse">
+          <div
+            v-if="isGroupExpanded('__ungrouped__')"
+            class="mint-sample-selector__ungrouped-list"
+          >
+            <SampleSelectorSampleRow
+              v-for="sample in ungroupedSamples"
+              :key="sample"
+              :sample="sample"
+              :selected="modelValue.includes(sample)"
+              :dragging="draggingSample === sample"
+              checkbox-size="small"
+              @dragstart="handleDragStart(sample, null, $event)"
+              @dragend="handleDragEnd"
+              @toggle="toggleSample(sample)"
+            />
+          </div>
+        </Transition>
+      </div>
+
+      <!-- New Group Input -->
+      <div class="mint-sample-selector__new-group">
+        <BaseInput
+          v-model="newGroupName"
+          placeholder="New group name..."
+          class="mint-sample-selector__new-group-input"
+          @keyup.enter="addNewGroup"
+        />
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          :disabled="!newGroupName.trim()"
+          class="mint-sample-selector__new-group-btn"
+          @click="addNewGroup"
+        >
+          Add
+        </BaseButton>
+      </div>
+
+      <!-- Hidden color picker input -->
+      <input
+        ref="colorPickerInput"
+        type="color"
+        class="mint-sample-selector__color-input"
+        :value="colorPickerSeed"
+        @change="handleColorChange"
+      />
+    </div>
+
+    <!-- Flat View (when no groups) -->
+    <div v-if="!groupingEnabled" class="mint-sample-selector__flat">
+      <!-- Search -->
+      <div class="mint-sample-selector__search">
+        <svg class="mint-sample-selector__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="searchQuery"
+          type="text"
+          placeholder="Search samples..."
+          class="mint-sample-selector__search-input"
+        />
+      </div>
+
+      <!-- Flat samples list -->
+      <div class="mint-sample-selector__flat-list">
+        <div
+          v-for="sample in filteredSamples"
+          :key="sample"
+          class="mint-sample-selector__flat-item"
+          :title="sample"
+          :aria-label="`Sample: ${sample}`"
+        >
+          <input
+            type="checkbox"
+            :checked="modelValue.includes(sample)"
+            class="mint-sample-selector__checkbox"
+            :aria-label="`Select ${sample}`"
+            @change="toggleSample(sample)"
+          />
+          <span class="mint-sample-selector__flat-name">{{ sample }}</span>
+        </div>
+
+        <div v-if="filteredSamples.length === 0 && searchQuery.trim()" class="mint-sample-selector__empty">
+          No samples match "{{ searchQuery }}"
+        </div>
+      </div>
+    </div>
+
+    <!-- Smart grouping modal -->
+    <AutoGroupModal
+      v-model="showSmartGroupModal"
+      :samples="resolvedSamples"
+      :groups="internalGroups"
+      :initial-mode="groupingModalMode"
+      :experiment-id="resolvedExperimentId"
+      :design-data="resolvedDesignData"
+      @apply="handleSmartGroupApply"
+    />
+  </div>
+</template>
+
+<style>
+@import '../styles/components/sample-selector.css';
+</style>