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

package/src/components/SampleSelector.story.vue

@@ -1,192 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-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

@@ -1,451 +0,0 @@
-<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>