@morscherlab/mld-sdk 0.7.5 → 0.7.7

package/src/components/NumberInput.vue

@@ -74,22 +74,6 @@ function increment() {
       disabled ? 'mld-number-input--disabled' : '',
     ]"
   >
-    <button
-      type="button"
-      aria-label="Decrease value"
-      :disabled="disabled || !canDecrement"
-      :class="[
-        'mld-number-input__button',
-        'mld-number-input__button--decrement',
-        `mld-number-input__button--${size}`,
-      ]"
-      @click="decrement"
-    >
-      <svg class="mld-number-input__button-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-        <path d="M5 12h14" />
-      </svg>
-    </button>
-
     <input
       type="number"
       :value="modelValue"
@@ -106,21 +90,39 @@ function increment() {
       @input="handleInput"
     />
 
-    <button
-      type="button"
-      aria-label="Increase value"
-      :disabled="disabled || !canIncrement"
-      :class="[
-        'mld-number-input__button',
-        'mld-number-input__button--increment',
-        `mld-number-input__button--${size}`,
-      ]"
-      @click="increment"
-    >
-      <svg class="mld-number-input__button-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-        <path d="M5 12h14" /><path d="M12 5v14" />
-      </svg>
-    </button>
+    <div class="mld-number-input__buttons">
+      <button
+        type="button"
+        aria-label="Decrease value"
+        :disabled="disabled || !canDecrement"
+        :class="[
+          'mld-number-input__button',
+          'mld-number-input__button--decrement',
+          `mld-number-input__button--${size}`,
+        ]"
+        @click="decrement"
+      >
+        <svg class="mld-number-input__button-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+          <path d="M5 12h14" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        aria-label="Increase value"
+        :disabled="disabled || !canIncrement"
+        :class="[
+          'mld-number-input__button',
+          'mld-number-input__button--increment',
+          `mld-number-input__button--${size}`,
+        ]"
+        @click="increment"
+      >
+        <svg class="mld-number-input__button-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+          <path d="M5 12h14" /><path d="M12 5v14" />
+        </svg>
+      </button>
+    </div>
   </div>
 </template>
 

package/src/components/SampleSelector.story.vue

@@ -1,6 +1,7 @@
 <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',
@@ -16,41 +17,19 @@ const mockGroups: SampleGroup[] = [
   { name: 'Vehicle', color: '#F59E0B', samples: ['Vehicle_Rep1', 'Vehicle_Rep2', 'Vehicle_Rep3'] },
 ]
 
-const DEFAULT_COLORS = [
-  '#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6',
-  '#EC4899', '#06B6D4', '#84CC16', '#F97316', '#6366F1',
-]
-
 function initState() {
   return {
     samples: mockSamples,
     selected: [] as string[],
     groups: [] as SampleGroup[],
     enableGrouping: true,
-    enableAutoGroup: true,
-    enableMetadataGroup: true,
+    enableSmartGroup: true,
   }
 }
 
-function handleAutoGroup(level: number, state: { samples: string[]; groups: SampleGroup[] }) {
-  const prefixGroups: Record<string, string[]> = {}
-
-  for (const sample of state.samples) {
-    const parts = sample.split(/[_\-.]/)
-    const prefix = parts.slice(0, level).join('_')
-    if (!prefixGroups[prefix]) {
-      prefixGroups[prefix] = []
-    }
-    prefixGroups[prefix].push(sample)
-  }
-
-  state.groups = Object.entries(prefixGroups)
-    .sort(([a], [b]) => a.localeCompare(b))
-    .map(([name, samples], i) => ({
-      name,
-      color: DEFAULT_COLORS[i % DEFAULT_COLORS.length],
-      samples,
-    }))
+function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[] }) {
+  state.groups = result.groups
+  console.log('Smart group result:', result)
 }
 </script>
 
@@ -64,16 +43,14 @@ function handleAutoGroup(level: number, state: { samples: string[]; groups: Samp
             v-model:groups="state.groups"
             :samples="state.samples"
             :enable-grouping="state.enableGrouping"
-            :enable-auto-group="state.enableAutoGroup"
-            :enable-metadata-group="state.enableMetadataGroup"
-            @auto-group="(level: number) => handleAutoGroup(level, state)"
+            :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.enableAutoGroup" title="Enable Auto Group" />
-        <HstCheckbox v-model="state.enableMetadataGroup" title="Enable Metadata Group" />
+        <HstCheckbox v-model="state.enableSmartGroup" title="Enable Smart Group" />
       </template>
     </Variant>
 

package/src/components/SampleSelector.vue

@@ -1,31 +1,29 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed } from 'vue'
 import BaseButton from './BaseButton.vue'
 import BaseInput from './BaseInput.vue'
-import GroupingModal from './GroupingModal.vue'
+import AutoGroupModal from './AutoGroupModal.vue'
 import type { SampleGroup } from '../types'
+import type { AutoGroupResult } from '../types/auto-group'
 
 interface Props {
   samples: string[]
   modelValue: string[]
   groups?: SampleGroup[]
   enableGrouping?: boolean
-  enableAutoGroup?: boolean
-  enableMetadataGroup?: boolean
+  enableSmartGroup?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   groups: () => [],
   enableGrouping: true,
-  enableAutoGroup: true,
-  enableMetadataGroup: true,
+  enableSmartGroup: true,
 })
 
 const emit = defineEmits<{
   'update:modelValue': [samples: string[]]
   'update:groups': [groups: SampleGroup[]]
-  autoGroup: [level: number]
-  metadataGroup: [mapping: Record<string, string[]>]
+  smartGroup: [result: AutoGroupResult]
 }>()
 
 const DEFAULT_COLORS = [
@@ -34,9 +32,7 @@ const DEFAULT_COLORS = [
 ]
 
 // UI State
-const showLevelPopover = ref(false)
-const popoverRef = ref<HTMLDivElement | null>(null)
-const showMetadataModal = ref(false)
+const showSmartGroupModal = ref(false)
 const newGroupName = ref('')
 const editingGroupColor = ref<string | null>(null)
 const colorPickerInput = ref<HTMLInputElement | null>(null)
@@ -127,48 +123,6 @@ const filteredSamples = computed(() => {
   return props.samples.filter(s => s.toLowerCase().includes(query))
 })
 
-// Compute available grouping levels with preview
-const groupingLevels = computed(() => {
-  if (props.samples.length === 0) return []
-
-  const maxLevel = detectGroupingLevels()
-  const levels: Array<{ level: number; groupCount: number; example: string; description: string }> = []
-
-  for (let level = 1; level <= maxLevel; level++) {
-    const prefixGroups: Record<string, string[]> = {}
-
-    for (const sample of props.samples) {
-      const parts = sample.split(/[_\-.]/)
-      const prefix = parts.slice(0, level).join('_')
-      if (prefix) {
-        if (!prefixGroups[prefix]) {
-          prefixGroups[prefix] = []
-        }
-        prefixGroups[prefix].push(sample)
-      }
-    }
-
-    const groupNames = Object.keys(prefixGroups).sort()
-    const example = groupNames[0] || ''
-    const descriptions = ['main groups', 'sub-groups']
-    const description = descriptions[level - 1] || `level ${level} groups`
-
-    levels.push({
-      level,
-      groupCount: groupNames.length,
-      example,
-      description
-    })
-  }
-
-  return levels
-})
-
-function detectGroupingLevels(): number {
-  if (props.samples.length === 0) return 1
-  const maxParts = Math.max(...props.samples.map(s => s.split(/[_\-.]/).length))
-  return Math.min(maxParts, 3)
-}
 
 // Selection state
 const isAllSelected = computed(() =>
@@ -264,14 +218,10 @@ function collapseAllGroups() {
   expandedGroups.value = {}
 }
 
-// Auto-group
-function toggleLevelPopover() {
-  showLevelPopover.value = !showLevelPopover.value
-}
-
-function selectLevel(level: number) {
-  emit('autoGroup', level)
-  showLevelPopover.value = false
+// Smart group
+function handleSmartGroupApply(result: AutoGroupResult) {
+  emit('smartGroup', result)
+  emit('update:groups', result.groups)
 }
 
 // Group management
@@ -393,26 +343,6 @@ function addNewGroup() {
   newGroupName.value = ''
 }
 
-// Metadata modal
-function handleMetadataApply(mapping: Record<string, string[]>) {
-  emit('metadataGroup', mapping)
-  showMetadataModal.value = false
-}
-
-// Click outside handler
-function handleClickOutside(event: MouseEvent) {
-  if (popoverRef.value && !popoverRef.value.contains(event.target as Node)) {
-    showLevelPopover.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
 </script>
 
 <template>
@@ -430,36 +360,21 @@ onUnmounted(() => {
     </label>
 
     <!-- Action Buttons Row -->
-    <div v-if="enableGrouping" class="mld-sample-selector__actions" ref="popoverRef">
+    <div v-if="enableGrouping" class="mld-sample-selector__actions">
       <div class="mld-sample-selector__actions-row">
-        <!-- Auto Group Button -->
+        <!-- Smart Group Button -->
         <BaseButton
-          v-if="enableAutoGroup"
-          :variant="(showLevelPopover || groupingEnabled) ? 'primary' : 'secondary'"
+          v-if="enableSmartGroup"
+          :variant="groupingEnabled ? 'primary' : 'secondary'"
           size="sm"
           :disabled="samples.length === 0"
           class="mld-sample-selector__action-btn"
-          @click.stop="toggleLevelPopover"
+          @click="showSmartGroupModal = true"
         >
           <svg class="mld-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>
-          <span>Auto</span>
-        </BaseButton>
-
-        <!-- Metadata Button -->
-        <BaseButton
-          v-if="enableMetadataGroup"
-          variant="secondary"
-          size="sm"
-          :disabled="samples.length === 0"
-          class="mld-sample-selector__action-btn"
-          @click="showMetadataModal = true"
-        >
-          <svg class="mld-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
-          <span>Metadata</span>
+          <span>Smart Group</span>
         </BaseButton>
 
         <!-- Reset Button -->
@@ -476,35 +391,6 @@ onUnmounted(() => {
           </svg>
         </BaseButton>
       </div>
-
-      <!-- Level Selection Popover -->
-      <Transition name="mld-popover">
-        <div v-if="showLevelPopover" class="mld-sample-selector__popover">
-          <div class="mld-sample-selector__popover-header">Auto-Group by Level</div>
-          <div class="mld-sample-selector__popover-body">
-            <button
-              v-for="levelInfo in groupingLevels"
-              :key="levelInfo.level"
-              type="button"
-              class="mld-sample-selector__level-btn"
-              @click="selectLevel(levelInfo.level)"
-            >
-              <div class="mld-sample-selector__level-info">
-                <div class="mld-sample-selector__level-title">
-                  <span>Level {{ levelInfo.level }}</span>
-                  <span class="mld-sample-selector__level-badge">{{ levelInfo.groupCount }} groups</span>
-                </div>
-                <div class="mld-sample-selector__level-desc">
-                  {{ levelInfo.description }}
-                  <span v-if="levelInfo.example" class="mld-sample-selector__level-example">
-                    e.g. <code>{{ levelInfo.example }}</code>
-                  </span>
-                </div>
-              </div>
-            </button>
-          </div>
-        </div>
-      </Transition>
     </div>
 
     <!-- Grouped View -->
@@ -820,7 +706,7 @@ onUnmounted(() => {
 
         <!-- Empty state -->
         <div v-if="internalGroups.length === 0" class="mld-sample-selector__empty">
-          Click the lightning bolt to auto-group samples
+          Click Smart Group to auto-group samples
         </div>
       </div>
 
@@ -940,12 +826,11 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <!-- Metadata Grouping Modal -->
-    <GroupingModal
-      :open="showMetadataModal"
+    <!-- Smart Grouping Modal -->
+    <AutoGroupModal
+      v-model="showSmartGroupModal"
       :samples="samples"
-      @close="showMetadataModal = false"
-      @apply="handleMetadataApply"
+      @apply="handleSmartGroupApply"
     />
   </div>
 </template>

package/src/components/index.ts

@@ -65,6 +65,7 @@ export { default as ExperimentTimeline } from './ExperimentTimeline.vue'
 // Sample management components
 export { default as SampleSelector } from './SampleSelector.vue'
 export { default as GroupingModal } from './GroupingModal.vue'
+export { default as AutoGroupModal } from './AutoGroupModal.vue'
 export { default as GroupAssigner } from './GroupAssigner.vue'
 
 // Lab/Experiment components

package/src/composables/index.ts

@@ -86,6 +86,7 @@ export {
 } from './useTimeUtils'
 export { useScheduleDrag } from './useScheduleDrag'
 export { useFormBuilder, evaluateCondition } from './useFormBuilder'
+export { useAutoGroup, DEFAULT_COLORS } from './useAutoGroup'
 export { usePluginConfig, type UsePluginConfigReturn } from './usePluginConfig'
 export {
   getFieldRegistryEntry,