@morscherlab/mint-sdk 1.0.0-alpha.2

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="['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,111 @@
+<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',
+  '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'] },
+]
+
+// Demonstrates same-hue gradient for sub-groups inside a major group:
+// each Treatment_* gets a shade of the major group's color.
+const hierarchicalSamples = [
+  'Treatment_Low_Rep1', 'Treatment_Low_Rep2',
+  'Treatment_Mid_Rep1', 'Treatment_Mid_Rep2',
+  'Treatment_High_Rep1', 'Treatment_High_Rep2',
+  'Treatment_Max_Rep1', 'Treatment_Max_Rep2',
+  'Control_Rep1', 'Control_Rep2',
+  'Control_Vehicle_Rep1', 'Control_Vehicle_Rep2',
+]
+const hierarchicalGroups: SampleGroup[] = [
+  { name: 'Treatment_Low', color: '#3B82F6', samples: ['Treatment_Low_Rep1', 'Treatment_Low_Rep2'] },
+  { name: 'Treatment_Mid', color: '#10B981', samples: ['Treatment_Mid_Rep1', 'Treatment_Mid_Rep2'] },
+  { name: 'Treatment_High', color: '#F59E0B', samples: ['Treatment_High_Rep1', 'Treatment_High_Rep2'] },
+  { name: 'Treatment_Max', color: '#EF4444', samples: ['Treatment_Max_Rep1', 'Treatment_Max_Rep2'] },
+  { name: 'Control_Baseline', color: '#8B5CF6', samples: ['Control_Rep1', 'Control_Rep2'] },
+  { name: 'Control_Vehicle', color: '#EC4899', samples: ['Control_Vehicle_Rep1', 'Control_Vehicle_Rep2'] },
+]
+
+function initState() {
+  return {
+    samples: mockSamples,
+    selected: [] as string[],
+    groups: [] as SampleGroup[],
+    enableGrouping: true,
+    enableSmartGroup: true,
+  }
+}
+
+function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[] }) {
+  state.groups = result.groups
+  console.log('Smart group result:', result)
+}
+</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-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.enableSmartGroup" title="Enable Smart 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="Hierarchical Color Family">
+      <div style="padding: 2rem; max-width: 460px;">
+        <SampleSelector
+          :model-value="[]"
+          :samples="hierarchicalSamples"
+          :groups="hierarchicalGroups"
+        />
+        <p style="font-size: 0.8125rem; color: #64748b; margin-top: 1rem;">
+          Each major group keeps its own seed color; sub-groups inside it
+          render a same-hue gradient (lightest → darkest by index). Click the
+          large color dot on a major group to recolor the whole family.
+        </p>
+      </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>