@morscherlab/mint-sdk 1.1.7 → 1.1.9

package/src/components/SampleSelector.drag.ts

@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import type { SampleGroup } from '../types'
 import {
   detectSampleGroupSeparator,
-  getSampleGroupMajorPrefix,
+  getSampleGroupParentPath,
   moveSampleToGroup,
   reorderSampleGroup,
   reorderSampleMajorGroup,
@@ -93,13 +93,13 @@ export function useSampleSelectorDrag(groups: MutableSampleGroups) {
     if (!draggingGroup.value || draggingGroupKind.value !== kind) return
     if (draggingGroup.value === name) return
 
-    // Sub-group reorder is restricted to siblings under the same major prefix;
-    // crossing majors would silently rename the group, which is too magical.
+    // Leaf reorder is restricted to siblings under the same immediate parent;
+    // crossing any hierarchy boundary would silently rename the group.
     if (kind === 'sub') {
       const separator = detectSampleGroupSeparator(groups.value)
       if (
-        getSampleGroupMajorPrefix(draggingGroup.value, separator) !==
-        getSampleGroupMajorPrefix(name, separator)
+        getSampleGroupParentPath(draggingGroup.value, separator) !==
+        getSampleGroupParentPath(name, separator)
       ) return
     }
 

package/src/components/SampleSelector.groups.ts

@@ -1,4 +1,11 @@
 import type { SampleGroup } from '../types'
+import { getSampleGroupMajorPrefix } from '../utils/sampleGroupPath'
+
+export {
+  getSampleGroupMajorPrefix,
+  getSampleGroupParentPath,
+  splitSampleGroupPath,
+} from '../utils/sampleGroupPath'
 
 export type GroupDragKind = 'major' | 'sub' | 'flat'
 export type GroupReorderPosition = 'before' | 'after'
@@ -7,11 +14,6 @@ export function detectSampleGroupSeparator(groups: SampleGroup[]): string {
   return groups.some(group => group.name.includes('/')) ? '/' : '_'
 }
 
-export function getSampleGroupMajorPrefix(groupName: string, separator: string): string {
-  const parts = groupName.split(separator)
-  return parts.length > 1 ? parts[0] : groupName
-}
-
 export function moveSampleToGroup(
   groups: SampleGroup[],
   sample: string,
@@ -31,16 +33,14 @@ export function moveSampleToGroup(
   })
 }
 
-export function removeSampleGroup(groups: SampleGroup[], groupName: string): SampleGroup[] {
-  return groups.filter(group => group.name !== groupName)
-}
-
-export function removeSampleMajorGroup(
-  groups: SampleGroup[],
-  majorGroup: { subGroups: Array<{ name: string }> },
-): SampleGroup[] {
-  const groupNames = new Set(majorGroup.subGroups.map(group => group.name))
-  return groups.filter(group => !groupNames.has(group.name))
+/**
+ * Drop every named group. Callers pass the concrete group names beneath the
+ * node being removed, so one helper covers a single group, a whole family, or
+ * any intermediate hierarchy level.
+ */
+export function removeSampleGroups(groups: SampleGroup[], groupNames: string[]): SampleGroup[] {
+  const removing = new Set(groupNames)
+  return groups.filter(group => !removing.has(group.name))
 }
 
 export function removeSampleFromGroup(

package/src/components/SampleSelector.selection.ts

@@ -1,15 +1,9 @@
 import type { ComputedRef } from 'vue'
 import { useListSelection } from '../composables/useListSelection'
-import type { SampleMajorGroup } from '../composables/useSampleGroups'
-
-interface SampleGroupSelectionSource {
-  samples: string[]
-}
 
 export interface UseSampleSelectorSelectionOptions {
   selected: () => string[]
   samples: () => string[]
-  findGroup: (groupName: string) => SampleGroupSelectionSource | undefined
   emitSelected: (samples: string[]) => void
 }
 
@@ -17,16 +11,16 @@ export interface UseSampleSelectorSelectionReturn {
   isAllSelected: ComputedRef<boolean>
   toggleSelectAll: () => void
   toggleSample: (sample: string) => void
-  toggleGroupSamples: (groupName: string) => void
-  toggleMajorGroupSamples: (majorGroup: SampleMajorGroup) => void
+  toggleSamplesSelection: (samples: string[]) => void
   isFullySelected: (samples: string[]) => boolean
   isPartiallySelected: (samples: string[]) => boolean
-  isGroupFullySelected: (groupName: string) => boolean
-  isGroupPartiallySelected: (groupName: string) => boolean
-  isMajorGroupFullySelected: (majorGroup: SampleMajorGroup) => boolean
-  isMajorGroupPartiallySelected: (majorGroup: SampleMajorGroup) => boolean
 }
 
+/**
+ * Selection state for the sample selector. Works on plain sample arrays rather
+ * than group names, so any level of the group hierarchy can drive it by handing
+ * over the samples beneath that node.
+ */
 export function useSampleSelectorSelection(
   options: UseSampleSelectorSelectionOptions,
 ): UseSampleSelectorSelectionReturn {
@@ -51,16 +45,6 @@ export function useSampleSelectorSelection(
     emitSelection(sampleSelection.toggleValues(samples))
   }
 
-  function toggleGroupSamples(groupName: string) {
-    const group = options.findGroup(groupName)
-    if (!group) return
-    toggleSamplesSelection(group.samples)
-  }
-
-  function toggleMajorGroupSamples(majorGroup: SampleMajorGroup) {
-    toggleSamplesSelection(majorGroup.allSamples)
-  }
-
   function isFullySelected(samples: string[]): boolean {
     return sampleSelection.isFullySelected(samples)
   }
@@ -69,35 +53,12 @@ export function useSampleSelectorSelection(
     return sampleSelection.isPartiallySelected(samples)
   }
 
-  function isGroupFullySelected(groupName: string): boolean {
-    const group = options.findGroup(groupName)
-    return group ? isFullySelected(group.samples) : false
-  }
-
-  function isGroupPartiallySelected(groupName: string): boolean {
-    const group = options.findGroup(groupName)
-    return group ? isPartiallySelected(group.samples) : false
-  }
-
-  function isMajorGroupFullySelected(majorGroup: SampleMajorGroup): boolean {
-    return isFullySelected(majorGroup.allSamples)
-  }
-
-  function isMajorGroupPartiallySelected(majorGroup: SampleMajorGroup): boolean {
-    return isPartiallySelected(majorGroup.allSamples)
-  }
-
   return {
     isAllSelected: sampleSelection.isAllSelected,
     toggleSelectAll,
     toggleSample,
-    toggleGroupSamples,
-    toggleMajorGroupSamples,
+    toggleSamplesSelection,
     isFullySelected,
     isPartiallySelected,
-    isGroupFullySelected,
-    isGroupPartiallySelected,
-    isMajorGroupFullySelected,
-    isMajorGroupPartiallySelected,
   }
 }

package/src/components/SampleSelector.story.vue

@@ -59,6 +59,17 @@ const hierarchicalGroups: SampleGroup[] = [
   { 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,
@@ -69,6 +80,14 @@ function initState() {
   }
 }
 
+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)
@@ -142,6 +161,24 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
       </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

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)])
+}