@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/FormulaInput.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import FormulaInput from './FormulaInput.vue'
+
+const formula = ref('')
+const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story title="Scientific/FormulaInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+          <FormulaInput
+            v-model="formula"
+            :show-preview="state.showPreview"
+            :show-m-w="state.showMW"
+            :placeholder="state.placeholder"
+            :error="state.error"
+            :disabled="state.disabled"
+            :size="state.size"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showPreview" title="Show Preview" />
+        <HstCheckbox v-model="state.showMW" title="Show Molecular Weight" />
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Pre-filled Formulas">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">Water</p>
+          <FormulaInput model-value="H2O" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">Glucose</p>
+          <FormulaInput model-value="C6H12O6" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">Calcium Hydroxide</p>
+          <FormulaInput model-value="Ca(OH)2" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">Copper Sulfate Pentahydrate</p>
+          <FormulaInput model-value="CuSO4.5H2O" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <FormulaInput model-value="NaCl" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Without Preview">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormulaInput model-value="H2SO4" :show-preview="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Without Molecular Weight">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormulaInput model-value="CH3COOH" :show-m-w="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormulaInput model-value="H2O" error />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled State">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormulaInput model-value="NaCl" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/FormulaInput.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/** Text input for chemical formulas (e.g. Ca(OH)₂) with live rendered preview and calculated molecular weight display. */
+import { useChemicalFormula, type FormulaPart } from '../composables/useChemicalFormula'
+
+interface Props {
+  modelValue?: string
+  showPreview?: boolean
+  showMW?: boolean
+  placeholder?: string
+  error?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  showPreview: true,
+  showMW: true,
+  placeholder: 'e.g. Ca(OH)2',
+  error: false,
+  disabled: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'mw': [mw: number | null]
+}>()
+
+const { parseFormula, calculateMW, renderFormulaParts } = useChemicalFormula()
+
+function getParseResult(value: string) {
+  if (!value) return null
+  return parseFormula(value)
+}
+
+function getMW(value: string): number | null {
+  const result = getParseResult(value)
+  if (!result || !result.valid) return null
+  return calculateMW(result.elements)
+}
+
+function getParts(value: string): FormulaPart[] {
+  if (!value) return []
+  return renderFormulaParts(value)
+}
+
+function getError(value: string): string | null {
+  if (!value) return null
+  const result = getParseResult(value)
+  if (!result) return null
+  if (!result.valid) return result.error || 'Invalid formula'
+  return null
+}
+
+function formatMW(value: string): string {
+  const mw = getMW(value)
+  if (mw === null) return ''
+  return `${mw.toFixed(2)} g/mol`
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+  emit('mw', getMW(target.value))
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-formula-input',
+      error ? 'mld-formula-input--error' : '',
+      disabled ? 'mld-formula-input--disabled' : '',
+    ]"
+  >
+    <div class="mld-formula-input__field">
+      <input
+        type="text"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :class="[
+          'mld-formula-input__input',
+          `mld-formula-input__input--${size}`,
+        ]"
+        aria-label="Chemical formula"
+        @input="handleInput"
+      />
+
+      <div
+        v-if="(showPreview && modelValue) || (showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null)"
+        class="mld-formula-input__preview"
+      >
+        <span v-if="showPreview && modelValue" class="mld-formula-input__preview-formula">
+          <template v-for="(part, i) in getParts(modelValue)" :key="i">
+            <span v-if="part.type === 'element'">{{ part.text }}</span>
+            <span v-else-if="part.type === 'subscript'" style="vertical-align: sub; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
+            <span v-else-if="part.type === 'superscript'" style="vertical-align: super; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
+            <span v-else-if="part.type === 'paren'" style="color: var(--text-secondary);">{{ part.text }}</span>
+            <span v-else-if="part.type === 'dot'" style="margin: 0 0.125em; color: var(--text-muted);">{{ part.text }}</span>
+            <span v-else-if="part.type === 'charge'" style="vertical-align: super; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
+          </template>
+        </span>
+        <span
+          v-if="showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null"
+          class="mld-formula-input__mw"
+        >
+          {{ formatMW(modelValue) }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-if="modelValue && getError(modelValue)"
+      class="mld-formula-input__error-text"
+    >
+      {{ getError(modelValue) }}
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/formula-input.css';
+</style>

package/src/components/GroupAssigner.story.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import GroupAssigner from './GroupAssigner.vue'
+import type { GroupItem } from '../types'
+
+const mockGroups: GroupItem[] = [
+  { name: 'Control_Rep1', color: '#3B82F6', count: 8 },
+  { name: 'Control_Rep2', color: '#3B82F6', count: 8 },
+  { name: 'Control_Rep3', color: '#3B82F6', count: 8 },
+  { name: 'Treatment_Rep1', color: '#10B981', count: 12 },
+  { name: 'Treatment_Rep2', color: '#10B981', count: 12 },
+  { name: 'Treatment_Rep3', color: '#10B981', count: 12 },
+  { name: 'Vehicle_Rep1', color: '#F59E0B', count: 4 },
+  { name: 'Vehicle_Rep2', color: '#F59E0B', count: 4 },
+]
+
+function initState() {
+  return {
+    groups: mockGroups,
+    group1: ['Control_Rep1', 'Control_Rep2', 'Control_Rep3'] as string[],
+    group2: ['Treatment_Rep1', 'Treatment_Rep2', 'Treatment_Rep3'] as string[],
+    label1: 'Control',
+    label2: 'Treatment',
+    color1: '#3B82F6',
+    color2: '#F43F5E',
+    minPerGroup: 1,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/GroupAssigner">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 700px;">
+          <GroupAssigner
+            :groups="state.groups"
+            v-model:group1="state.group1"
+            v-model:group2="state.group2"
+            :label1="state.label1"
+            :label2="state.label2"
+            :color1="state.color1"
+            :color2="state.color2"
+            :min-per-group="state.minPerGroup"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstText v-model="state.label1" title="Label 1" />
+        <HstText v-model="state.label2" title="Label 2" />
+        <HstText v-model="state.color1" title="Color 1" />
+        <HstText v-model="state.color2" title="Color 2" />
+        <HstSlider v-model="state.minPerGroup" title="Min per Group" :min="0" :max="5" />
+      </template>
+    </Variant>
+
+    <Variant title="Empty (Unassigned)">
+      <div style="padding: 2rem; max-width: 700px;">
+        <GroupAssigner
+          :groups="mockGroups"
+          :group1="[]"
+          :group2="[]"
+          label1="Baseline"
+          label2="Experiment"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Labels">
+      <div style="padding: 2rem; max-width: 700px;">
+        <GroupAssigner
+          :groups="mockGroups"
+          :group1="['Control_Rep1']"
+          :group2="['Treatment_Rep1']"
+          label1="Wild Type"
+          label2="Knockout"
+          color1="#8B5CF6"
+          color2="#06B6D4"
+          :min-per-group="2"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/GroupAssigner.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+/** Drag-and-drop two-zone assigner for splitting sample groups into control and treatment arms. */
+import { computed, ref } from 'vue'
+import type { GroupItem } from '../types'
+
+interface Props {
+  groups: GroupItem[]
+  group1: string[]
+  group2: string[]
+  label1?: string
+  label2?: string
+  color1?: string
+  color2?: string
+  minPerGroup?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label1: 'Control',
+  label2: 'Treatment',
+  color1: '#3B82F6',
+  color2: '#F43F5E',
+  minPerGroup: 1,
+})
+
+const emit = defineEmits<{
+  'update:group1': [names: string[]]
+  'update:group2': [names: string[]]
+}>()
+
+const dragOverZone = ref<'zone1' | 'zone2' | null>(null)
+const draggingGroup = ref<string | null>(null)
+
+const unassignedGroups = computed(() =>
+  props.groups.filter(
+    g => !props.group1.includes(g.name) && !props.group2.includes(g.name)
+  )
+)
+
+const zone1Groups = computed(() =>
+  props.groups.filter(g => props.group1.includes(g.name))
+)
+
+const zone2Groups = computed(() =>
+  props.groups.filter(g => props.group2.includes(g.name))
+)
+
+const zone1Count = computed(() =>
+  zone1Groups.value.reduce((sum, g) => sum + g.count, 0)
+)
+
+const zone2Count = computed(() =>
+  zone2Groups.value.reduce((sum, g) => sum + g.count, 0)
+)
+
+const isValid = computed(() =>
+  props.group1.length >= props.minPerGroup &&
+  props.group2.length >= props.minPerGroup
+)
+
+const validationMessage = computed(() => {
+  if (isValid.value) return null
+  const missing1 = Math.max(0, props.minPerGroup - props.group1.length)
+  const missing2 = Math.max(0, props.minPerGroup - props.group2.length)
+  const parts: string[] = []
+  if (missing1 > 0) parts.push(`${missing1} more to ${props.label1}`)
+  if (missing2 > 0) parts.push(`${missing2} more to ${props.label2}`)
+  return `Add ${parts.join(' and ')}`
+})
+
+function handleDragStart(event: DragEvent, groupName: string) {
+  draggingGroup.value = groupName
+  event.dataTransfer?.setData('groupName', groupName)
+  event.dataTransfer!.effectAllowed = 'move'
+}
+
+function handleDragEnd() {
+  draggingGroup.value = null
+  dragOverZone.value = null
+}
+
+function handleDragOver(event: DragEvent, zone: 'zone1' | 'zone2') {
+  event.preventDefault()
+  event.dataTransfer!.dropEffect = 'move'
+  dragOverZone.value = zone
+}
+
+function handleDragLeave() {
+  dragOverZone.value = null
+}
+
+function handleDrop(event: DragEvent, zone: 'zone1' | 'zone2') {
+  event.preventDefault()
+  dragOverZone.value = null
+
+  const groupName = event.dataTransfer?.getData('groupName')
+  if (!groupName) return
+
+  assignToZone(groupName, zone)
+}
+
+function assignToZone(groupName: string, zone: 'zone1' | 'zone2') {
+  // Remove from both zones first
+  const newGroup1 = props.group1.filter(n => n !== groupName)
+  const newGroup2 = props.group2.filter(n => n !== groupName)
+
+  // Add to target zone
+  if (zone === 'zone1') {
+    emit('update:group1', [...newGroup1, groupName])
+    emit('update:group2', newGroup2)
+  } else {
+    emit('update:group1', newGroup1)
+    emit('update:group2', [...newGroup2, groupName])
+  }
+}
+
+function removeFromZone(groupName: string, zone: 'zone1' | 'zone2') {
+  if (zone === 'zone1') {
+    emit('update:group1', props.group1.filter(n => n !== groupName))
+  } else {
+    emit('update:group2', props.group2.filter(n => n !== groupName))
+  }
+}
+
+function clearAll() {
+  emit('update:group1', [])
+  emit('update:group2', [])
+}
+</script>
+
+<template>
+  <div class="mld-group-assigner">
+    <!-- Drop zones -->
+    <div class="mld-group-assigner__zones">
+      <!-- Zone 1 (Control) -->
+      <div
+        :class="[
+          'mld-group-assigner__zone',
+          'mld-group-assigner__zone--1',
+          dragOverZone === 'zone1' ? 'mld-group-assigner__zone--dragover' : '',
+        ]"
+        :style="{ '--zone-color': color1 }"
+        @dragover="handleDragOver($event, 'zone1')"
+        @dragleave="handleDragLeave"
+        @drop="handleDrop($event, 'zone1')"
+      >
+        <div class="mld-group-assigner__zone-header">
+          <span class="mld-group-assigner__zone-label">{{ label1 }}</span>
+          <span class="mld-group-assigner__zone-count">{{ zone1Count }} samples</span>
+        </div>
+
+        <div class="mld-group-assigner__zone-content">
+          <div
+            v-for="group in zone1Groups"
+            :key="group.name"
+            class="mld-group-assigner__pill"
+            draggable="true"
+            @dragstart="handleDragStart($event, group.name)"
+            @dragend="handleDragEnd"
+          >
+            <span
+              class="mld-group-assigner__pill-color"
+              :style="{ backgroundColor: group.color }"
+            />
+            <span class="mld-group-assigner__pill-name">{{ group.name }}</span>
+            <span class="mld-group-assigner__pill-count">{{ group.count }}</span>
+            <button
+              type="button"
+              class="mld-group-assigner__pill-remove"
+              @click="removeFromZone(group.name, 'zone1')"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div v-if="zone1Groups.length === 0" class="mld-group-assigner__zone-empty">
+            Drag groups here
+          </div>
+        </div>
+      </div>
+
+      <!-- Zone 2 (Treatment) -->
+      <div
+        :class="[
+          'mld-group-assigner__zone',
+          'mld-group-assigner__zone--2',
+          dragOverZone === 'zone2' ? 'mld-group-assigner__zone--dragover' : '',
+        ]"
+        :style="{ '--zone-color': color2 }"
+        @dragover="handleDragOver($event, 'zone2')"
+        @dragleave="handleDragLeave"
+        @drop="handleDrop($event, 'zone2')"
+      >
+        <div class="mld-group-assigner__zone-header">
+          <span class="mld-group-assigner__zone-label">{{ label2 }}</span>
+          <span class="mld-group-assigner__zone-count">{{ zone2Count }} samples</span>
+        </div>
+
+        <div class="mld-group-assigner__zone-content">
+          <div
+            v-for="group in zone2Groups"
+            :key="group.name"
+            class="mld-group-assigner__pill"
+            draggable="true"
+            @dragstart="handleDragStart($event, group.name)"
+            @dragend="handleDragEnd"
+          >
+            <span
+              class="mld-group-assigner__pill-color"
+              :style="{ backgroundColor: group.color }"
+            />
+            <span class="mld-group-assigner__pill-name">{{ group.name }}</span>
+            <span class="mld-group-assigner__pill-count">{{ group.count }}</span>
+            <button
+              type="button"
+              class="mld-group-assigner__pill-remove"
+              @click="removeFromZone(group.name, 'zone2')"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div v-if="zone2Groups.length === 0" class="mld-group-assigner__zone-empty">
+            Drag groups here
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Unassigned groups -->
+    <div v-if="unassignedGroups.length > 0" class="mld-group-assigner__unassigned">
+      <div class="mld-group-assigner__unassigned-header">
+        <span class="mld-group-assigner__unassigned-title">Available Groups</span>
+        <button
+          v-if="group1.length > 0 || group2.length > 0"
+          type="button"
+          class="mld-group-assigner__clear-btn"
+          @click="clearAll"
+        >
+          Clear all
+        </button>
+      </div>
+
+      <div class="mld-group-assigner__unassigned-list">
+        <div
+          v-for="group in unassignedGroups"
+          :key="group.name"
+          :class="[
+            'mld-group-assigner__pill',
+            'mld-group-assigner__pill--unassigned',
+            draggingGroup === group.name ? 'mld-group-assigner__pill--dragging' : '',
+          ]"
+          draggable="true"
+          @dragstart="handleDragStart($event, group.name)"
+          @dragend="handleDragEnd"
+        >
+          <span
+            class="mld-group-assigner__pill-color"
+            :style="{ backgroundColor: group.color }"
+          />
+          <span class="mld-group-assigner__pill-name">{{ group.name }}</span>
+          <span class="mld-group-assigner__pill-count">{{ group.count }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Validation message -->
+    <div v-if="validationMessage" class="mld-group-assigner__validation">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="10" />
+        <line x1="12" y1="8" x2="12" y2="12" />
+        <line x1="12" y1="16" x2="12.01" y2="16" />
+      </svg>
+      {{ validationMessage }}
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/group-assigner.css';
+</style>

package/src/components/GroupingModal.story.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import GroupingModal from './GroupingModal.vue'
+
+const mockSamples = [
+  'CTRL_Rep1', 'CTRL_Rep2', 'CTRL_Rep3',
+  'TREAT_A_Rep1', 'TREAT_A_Rep2', 'TREAT_A_Rep3',
+  'TREAT_B_Rep1', 'TREAT_B_Rep2', 'TREAT_B_Rep3',
+]
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <Story title="Lab/GroupingModal">
+    <Variant title="Playground">
+      <div style="padding: 2rem;">
+        <button
+          type="button"
+          style="
+            padding: 0.5rem 1rem;
+            background: var(--bg-card, #fff);
+            border: 1px solid var(--border-color, #e5e7eb);
+            border-radius: 0.375rem;
+            cursor: pointer;
+            font-size: 0.875rem;
+          "
+          @click="isOpen = true"
+        >
+          Open Grouping Modal
+        </button>
+        <GroupingModal
+          :open="isOpen"
+          :samples="mockSamples"
+          @close="isOpen = false"
+          @apply="(mapping, columns) => { console.log('Applied grouping:', mapping, columns); isOpen = false }"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Open by Default">
+      <div style="padding: 2rem;">
+        <GroupingModal
+          :open="true"
+          :samples="mockSamples"
+          @close="() => {}"
+          @apply="() => {}"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>