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

package/src/components/SampleLegend.story.vue

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

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

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

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

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

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