@morscherlab/mld-sdk 0.6.0

package/src/components/SampleLegend.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+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="['mld-sample-legend', `mld-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="[
+        'mld-sample-legend__item',
+        `mld-sample-legend__item--${size}`,
+        modelValue === sample.id ? 'mld-sample-legend__item--selected' : '',
+      ]"
+      @click="handleSampleClick(sample)"
+    >
+      <span
+        :class="['mld-sample-legend__swatch', `mld-sample-legend__swatch--${size}`]"
+        :style="{ backgroundColor: getSampleColor(sample, index) }"
+        :aria-hidden="true"
+      />
+
+      <span :class="['mld-sample-legend__name', `mld-sample-legend__name--${size}`]">
+        {{ sample.name }}
+      </span>
+
+      <span
+        v-if="showCounts && sample.count !== undefined"
+        :class="['mld-sample-legend__count', `mld-sample-legend__count--${size}`]"
+      >
+        {{ sample.count }}
+      </span>
+
+      <button
+        v-if="editable"
+        type="button"
+        class="mld-sample-legend__remove"
+        :aria-label="`Remove ${sample.name}`"
+        @click="handleRemove($event, sample.id)"
+      >
+        <svg class="mld-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="['mld-sample-legend__add', `mld-sample-legend__add--${size}`]"
+      aria-label="Add sample type"
+      @click="handleAdd"
+    >
+      <svg :class="`mld-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="`mld-sample-legend__add-text--${size}`">Add</span>
+    </button>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/sample-legend.css';
+</style>

package/src/components/SampleSelector.story.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import SampleSelector from './SampleSelector.vue'
+import type { SampleGroup } from '../types'
+
+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 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,
+  }
+}
+
+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,
+    }))
+}
+</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-auto-group="state.enableAutoGroup"
+            :enable-metadata-group="state.enableMetadataGroup"
+            @auto-group="(level: number) => handleAutoGroup(level, 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" />
+      </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="No Grouping">
+      <div style="padding: 2rem; max-width: 400px;">
+        <SampleSelector
+          :model-value="[]"
+          :samples="mockSamples"
+          :enable-grouping="false"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>