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

package/src/components/SampleLegend.story.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import SampleLegend from './SampleLegend.vue'
-import type { SampleType } from '../types'
-
-const mockSamples: SampleType[] = [
-  { id: 's1', name: 'HeLa Cells', color: '#3B82F6', count: 24 },
-  { id: 's2', name: 'MCF-7 Cells', color: '#10B981', count: 12 },
-  { id: 's3', name: 'Vehicle Control', color: '#F59E0B', count: 8 },
-  { id: 's4', name: 'Positive Control', color: '#EF4444', count: 4 },
-  { id: 's5', name: 'QC Standard', color: '#8B5CF6', count: 6 },
-]
-
-function initState() {
-  return {
-    modelValue: undefined as string | undefined,
-    samples: mockSamples,
-    showCounts: true,
-    editable: false,
-    size: 'md' as const,
-    orientation: 'vertical' as const,
-  }
-}
-</script>
-
-<template>
-  <Story title="Lab/SampleLegend">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 300px;">
-          <SampleLegend
-            v-model="state.modelValue"
-            :samples="state.samples"
-            :show-counts="state.showCounts"
-            :editable="state.editable"
-            :size="state.size"
-            :orientation="state.orientation"
-          />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstCheckbox v-model="state.showCounts" title="Show Counts" />
-        <HstCheckbox v-model="state.editable" title="Editable" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="[
-            { value: 'sm', label: 'Small' },
-            { value: 'md', label: 'Medium' },
-            { value: 'lg', label: 'Large' },
-          ]"
-        />
-        <HstSelect
-          v-model="state.orientation"
-          title="Orientation"
-          :options="[
-            { value: 'vertical', label: 'Vertical' },
-            { value: 'horizontal', label: 'Horizontal' },
-          ]"
-        />
-      </template>
-    </Variant>
-
-    <Variant title="Horizontal">
-      <div style="padding: 2rem;">
-        <SampleLegend
-          :samples="mockSamples"
-          orientation="horizontal"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Editable">
-      <div style="padding: 2rem; max-width: 300px;">
-        <SampleLegend
-          :samples="mockSamples"
-          editable
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Small No Counts">
-      <div style="padding: 2rem; max-width: 250px;">
-        <SampleLegend
-          :samples="mockSamples"
-          size="sm"
-          :show-counts="false"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/SampleLegend.vue

@@ -1,119 +0,0 @@
-<script setup lang="ts">
-/** Clickable color-swatch legend for plate sample types, supporting selection, count display, add/remove, and custom color assignment. */
-import type { SampleType } from '../types'
-
-interface Props {
-  modelValue?: string
-  samples: SampleType[]
-  showCounts?: boolean
-  editable?: boolean
-  colorPalette?: string[]
-  size?: 'sm' | 'md' | 'lg'
-  orientation?: 'vertical' | 'horizontal'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: undefined,
-  samples: () => [],
-  showCounts: true,
-  editable: false,
-  colorPalette: () => [
-    '#3B82F6', '#10B981', '#EF4444', '#F59E0B', '#8B5CF6',
-    '#F97316', '#06B6D4', '#14B8A6', '#6B7280',
-  ],
-  size: 'md',
-  orientation: 'vertical',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [sampleId: string | undefined]
-  'sample-click': [sample: SampleType]
-  'sample-add': []
-  'sample-remove': [sampleId: string]
-  'color-change': [sampleId: string, color: string]
-}>()
-
-
-function getSampleColor(sample: SampleType, index: number): string {
-  return sample.color || props.colorPalette[index % props.colorPalette.length]
-}
-
-function handleSampleClick(sample: SampleType) {
-  const newValue = props.modelValue === sample.id ? undefined : sample.id
-  emit('sample-click', sample)
-  emit('update:modelValue', newValue)
-}
-
-function handleRemove(event: Event, sampleId: string) {
-  event.stopPropagation()
-  emit('sample-remove', sampleId)
-}
-
-function handleAdd() {
-  emit('sample-add')
-}
-</script>
-
-<template>
-  <div :class="['mint-sample-legend', `mint-sample-legend--${orientation}`]" role="list" aria-label="Sample types">
-    <button
-      v-for="(sample, index) in samples"
-      :key="sample.id"
-      type="button"
-      role="listitem"
-      :aria-pressed="modelValue === sample.id"
-      :class="[
-        'mint-sample-legend__item',
-        `mint-sample-legend__item--${size}`,
-        modelValue === sample.id ? 'mint-sample-legend__item--selected' : '',
-      ]"
-      @click="handleSampleClick(sample)"
-    >
-      <span
-        :class="['mint-sample-legend__swatch', `mint-sample-legend__swatch--${size}`]"
-        :style="{ backgroundColor: getSampleColor(sample, index) }"
-        :aria-hidden="true"
-      />
-
-      <span :class="['mint-sample-legend__name', `mint-sample-legend__name--${size}`]">
-        {{ sample.name }}
-      </span>
-
-      <span
-        v-if="showCounts && sample.count !== undefined"
-        :class="['mint-sample-legend__count', `mint-sample-legend__count--${size}`]"
-      >
-        {{ sample.count }}
-      </span>
-
-      <button
-        v-if="editable"
-        type="button"
-        class="mint-sample-legend__remove"
-        :aria-label="`Remove ${sample.name}`"
-        @click="handleRemove($event, sample.id)"
-      >
-        <svg class="mint-sample-legend__remove-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </button>
-    </button>
-
-    <button
-      v-if="editable"
-      type="button"
-      :class="['mint-sample-legend__add', `mint-sample-legend__add--${size}`]"
-      aria-label="Add sample type"
-      @click="handleAdd"
-    >
-      <svg :class="`mint-sample-legend__add-icon--${size}`" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-      </svg>
-      <span :class="`mint-sample-legend__add-text--${size}`">Add</span>
-    </button>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/sample-legend.css';
-</style>

package/src/components/SampleSelector.colors.ts

@@ -1,48 +0,0 @@
-import { DEFAULT_COLORS } from '../composables/useAutoGroup'
-import type { SampleGroup } from '../types'
-
-export type ColorEdit =
-  | { kind: 'single'; name: string }
-  | { kind: 'family'; names: string[] }
-
-export const DEFAULT_COLOR_PICKER_SEED = '#3B82F6'
-export const SAMPLE_GROUP_COLOR_OPTIONS = DEFAULT_COLORS.slice(0, 5)
-
-export function applySampleGroupColorEdit(
-  groups: SampleGroup[],
-  edit: ColorEdit,
-  color: string,
-): SampleGroup[] {
-  const targets = edit.kind === 'family' ? new Set(edit.names) : new Set([edit.name])
-  return groups.map(group =>
-    targets.has(group.name) ? { ...group, color } : group,
-  )
-}
-
-export function getSampleGroupColorEditSeed(
-  edit: ColorEdit | null,
-  getGroupColor: (groupName: string) => string,
-): string {
-  if (!edit) return DEFAULT_COLOR_PICKER_SEED
-  return getGroupColor(edit.kind === 'family' ? edit.names[0] : edit.name)
-}
-
-export function pickUnusedSampleGroupColor(groups: SampleGroup[]): string {
-  const usedColors = new Set(groups.map(group => group.color))
-  return DEFAULT_COLORS.find(color => !usedColors.has(color)) || DEFAULT_COLORS[0]
-}
-
-export function createSampleGroup(
-  name: string,
-  existingGroups: SampleGroup[],
-  color?: string,
-): SampleGroup | null {
-  const trimmedName = name.trim()
-  if (!trimmedName) return null
-
-  return {
-    name: trimmedName,
-    color: color || pickUnusedSampleGroupColor(existingGroups),
-    samples: [],
-  }
-}

package/src/components/SampleSelector.drag.ts

@@ -1,164 +0,0 @@
-import { ref } from 'vue'
-import type { SampleGroup } from '../types'
-import {
-  detectSampleGroupSeparator,
-  getSampleGroupParentPath,
-  moveSampleToGroup,
-  reorderSampleGroup,
-  reorderSampleMajorGroup,
-  type GroupDragKind,
-  type GroupReorderPosition,
-} from './SampleSelector.groups'
-
-interface MutableSampleGroups {
-  value: SampleGroup[]
-}
-
-export function useSampleSelectorDrag(groups: MutableSampleGroups) {
-  const draggingSample = ref<string | null>(null)
-  const dragSourceGroup = ref<string | null>(null)
-  const dragOverGroup = ref<string | null>(null)
-
-  const draggingGroup = ref<string | null>(null)
-  const draggingGroupKind = ref<GroupDragKind | null>(null)
-  const reorderTarget = ref<string | null>(null)
-  const reorderPosition = ref<GroupReorderPosition | null>(null)
-
-  function handleDragStart(sample: string, sourceGroup: string | null, event: DragEvent) {
-    draggingSample.value = sample
-    dragSourceGroup.value = sourceGroup
-    if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move'
-      event.dataTransfer.setData('text/plain', sample)
-    }
-  }
-
-  function resetDragState() {
-    draggingSample.value = null
-    dragSourceGroup.value = null
-    dragOverGroup.value = null
-  }
-
-  function handleDragEnd() {
-    resetDragState()
-  }
-
-  function handleDragOver(groupName: string, event: DragEvent) {
-    // Only accept this drop target when a sample is being dragged; group drags are handled separately.
-    if (!draggingSample.value) return
-    event.preventDefault()
-    if (event.dataTransfer) {
-      event.dataTransfer.dropEffect = 'move'
-    }
-    dragOverGroup.value = groupName
-  }
-
-  function handleDragLeave() {
-    dragOverGroup.value = null
-  }
-
-  function handleDrop(targetGroupName: string, event: DragEvent) {
-    if (!draggingSample.value) return
-    event.preventDefault()
-
-    const sample = draggingSample.value
-    const sourceGroup = dragSourceGroup.value
-
-    if (sourceGroup === targetGroupName) {
-      resetDragState()
-      return
-    }
-
-    groups.value = moveSampleToGroup(groups.value, sample, sourceGroup, targetGroupName)
-    resetDragState()
-  }
-
-  function handleGroupDragStart(name: string, kind: GroupDragKind, event: DragEvent) {
-    draggingGroup.value = name
-    draggingGroupKind.value = kind
-    if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move'
-      event.dataTransfer.setData('text/plain', `mint-group:${name}`)
-    }
-  }
-
-  function handleGroupDragEnd() {
-    draggingGroup.value = null
-    draggingGroupKind.value = null
-    reorderTarget.value = null
-    reorderPosition.value = null
-  }
-
-  function handleGroupDragOver(name: string, kind: GroupDragKind, event: DragEvent) {
-    if (!draggingGroup.value || draggingGroupKind.value !== kind) return
-    if (draggingGroup.value === name) return
-
-    // 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 (
-        getSampleGroupParentPath(draggingGroup.value, separator) !==
-        getSampleGroupParentPath(name, separator)
-      ) return
-    }
-
-    event.preventDefault()
-    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
-
-    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
-    reorderTarget.value = name
-    reorderPosition.value = event.clientY < rect.top + rect.height / 2 ? 'before' : 'after'
-  }
-
-  function handleGroupDragLeave(event: DragEvent) {
-    const cur = event.currentTarget as HTMLElement
-    const rel = event.relatedTarget as Node | null
-    if (rel && cur.contains(rel)) return
-    reorderTarget.value = null
-    reorderPosition.value = null
-  }
-
-  function handleGroupDrop(name: string, kind: GroupDragKind, event: DragEvent) {
-    if (!draggingGroup.value || draggingGroupKind.value !== kind) {
-      handleGroupDragEnd()
-      return
-    }
-    const position = reorderPosition.value
-    if (!position || draggingGroup.value === name) {
-      handleGroupDragEnd()
-      return
-    }
-
-    event.preventDefault()
-
-    if (kind === 'major') {
-      const nextGroups = reorderSampleMajorGroup(groups.value, draggingGroup.value, name, position)
-      if (nextGroups !== groups.value) groups.value = nextGroups
-    } else {
-      const nextGroups = reorderSampleGroup(groups.value, draggingGroup.value, name, position)
-      if (nextGroups !== groups.value) groups.value = nextGroups
-    }
-
-    handleGroupDragEnd()
-  }
-
-  return {
-    draggingSample,
-    dragOverGroup,
-    draggingGroup,
-    draggingGroupKind,
-    reorderTarget,
-    reorderPosition,
-    handleDragStart,
-    handleDragEnd,
-    handleDragOver,
-    handleDragLeave,
-    handleDrop,
-    handleGroupDragStart,
-    handleGroupDragEnd,
-    handleGroupDragOver,
-    handleGroupDragLeave,
-    handleGroupDrop,
-  }
-}

package/src/components/SampleSelector.groups.ts

@@ -1,109 +0,0 @@
-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'
-
-export function detectSampleGroupSeparator(groups: SampleGroup[]): string {
-  return groups.some(group => group.name.includes('/')) ? '/' : '_'
-}
-
-export function moveSampleToGroup(
-  groups: SampleGroup[],
-  sample: string,
-  sourceGroup: string | null,
-  targetGroup: string,
-): SampleGroup[] {
-  if (sourceGroup === targetGroup) return groups
-
-  return groups.map(group => {
-    if (sourceGroup && group.name === sourceGroup) {
-      return { ...group, samples: group.samples.filter(item => item !== sample) }
-    }
-    if (group.name === targetGroup && !group.samples.includes(sample)) {
-      return { ...group, samples: [...group.samples, sample] }
-    }
-    return group
-  })
-}
-
-/**
- * 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(
-  groups: SampleGroup[],
-  sample: string,
-  groupName: string,
-): SampleGroup[] {
-  return groups.map(group =>
-    group.name === groupName
-      ? { ...group, samples: group.samples.filter(item => item !== sample) }
-      : group,
-  )
-}
-
-export function reorderSampleGroup(
-  groups: SampleGroup[],
-  source: string,
-  target: string,
-  position: GroupReorderPosition,
-): SampleGroup[] {
-  if (source === target) return groups
-
-  const nextGroups = [...groups]
-  const sourceIndex = nextGroups.findIndex(group => group.name === source)
-  if (sourceIndex === -1) return groups
-
-  const [item] = nextGroups.splice(sourceIndex, 1)
-  const targetIndex = nextGroups.findIndex(group => group.name === target)
-  if (targetIndex === -1) return groups
-
-  nextGroups.splice(position === 'before' ? targetIndex : targetIndex + 1, 0, item)
-  return nextGroups
-}
-
-export function reorderSampleMajorGroup(
-  groups: SampleGroup[],
-  source: string,
-  target: string,
-  position: GroupReorderPosition,
-): SampleGroup[] {
-  if (source === target) return groups
-
-  const separator = detectSampleGroupSeparator(groups)
-  const isSource = (group: SampleGroup) => getSampleGroupMajorPrefix(group.name, separator) === source
-  const isTarget = (group: SampleGroup) => getSampleGroupMajorPrefix(group.name, separator) === target
-
-  const sourceGroups = groups.filter(isSource)
-  if (sourceGroups.length === 0) return groups
-
-  const remainingGroups = groups.filter(group => !isSource(group))
-  let firstTargetIndex = -1
-  let lastTargetIndex = -1
-
-  remainingGroups.forEach((group, index) => {
-    if (isTarget(group)) {
-      if (firstTargetIndex === -1) firstTargetIndex = index
-      lastTargetIndex = index
-    }
-  })
-
-  if (firstTargetIndex === -1) return groups
-
-  const insertIndex = position === 'before' ? firstTargetIndex : lastTargetIndex + 1
-  remainingGroups.splice(insertIndex, 0, ...sourceGroups)
-  return remainingGroups
-}

package/src/components/SampleSelector.selection.ts

@@ -1,64 +0,0 @@
-import type { ComputedRef } from 'vue'
-import { useListSelection } from '../composables/useListSelection'
-
-export interface UseSampleSelectorSelectionOptions {
-  selected: () => string[]
-  samples: () => string[]
-  emitSelected: (samples: string[]) => void
-}
-
-export interface UseSampleSelectorSelectionReturn {
-  isAllSelected: ComputedRef<boolean>
-  toggleSelectAll: () => void
-  toggleSample: (sample: string) => void
-  toggleSamplesSelection: (samples: string[]) => void
-  isFullySelected: (samples: string[]) => boolean
-  isPartiallySelected: (samples: string[]) => 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 {
-  const sampleSelection = useListSelection({
-    selected: options.selected,
-    items: options.samples,
-  })
-
-  function emitSelection(samples: string[]) {
-    options.emitSelected(samples)
-  }
-
-  function toggleSelectAll() {
-    emitSelection(sampleSelection.toggleAll())
-  }
-
-  function toggleSample(sample: string) {
-    emitSelection(sampleSelection.toggleValue(sample))
-  }
-
-  function toggleSamplesSelection(samples: string[]) {
-    emitSelection(sampleSelection.toggleValues(samples))
-  }
-
-  function isFullySelected(samples: string[]): boolean {
-    return sampleSelection.isFullySelected(samples)
-  }
-
-  function isPartiallySelected(samples: string[]): boolean {
-    return sampleSelection.isPartiallySelected(samples)
-  }
-
-  return {
-    isAllSelected: sampleSelection.isAllSelected,
-    toggleSelectAll,
-    toggleSample,
-    toggleSamplesSelection,
-    isFullySelected,
-    isPartiallySelected,
-  }
-}