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

package/src/components/Divider.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/** Horizontal or vertical rule with optional inline text label at center or left. */
+interface Props {
+  vertical?: boolean
+  label?: string
+  align?: 'center' | 'left'
+  spacing?: 'sm' | 'md' | 'lg'
+}
+
+withDefaults(defineProps<Props>(), {
+  vertical: false,
+  label: undefined,
+  align: 'center',
+  spacing: 'md',
+})
+</script>
+
+<template>
+  <div
+    v-if="vertical"
+    :class="[
+      'mint-divider',
+      'mint-divider--vertical',
+      `mint-divider--${spacing}`,
+    ]"
+    role="separator"
+    aria-orientation="vertical"
+  />
+  <div
+    v-else
+    :class="[
+      'mint-divider',
+      `mint-divider--${spacing}`,
+      label ? `mint-divider--labeled mint-divider--${align}` : '',
+    ]"
+    role="separator"
+    aria-orientation="horizontal"
+  >
+    <template v-if="label">
+      <span v-if="align === 'center'" class="mint-divider__line" />
+      <span class="mint-divider__label">{{ label }}</span>
+      <span class="mint-divider__line" />
+    </template>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/divider.css';
+</style>

package/src/components/DoseCalculator.story.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import DoseCalculator from './DoseCalculator.vue'
+
+function initState() {
+  return {
+    mode: 'auto' as const,
+    molecularWeight: 300.44,
+    disabled: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/DoseCalculator">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px;">
+          <DoseCalculator
+            :mode="state.mode"
+            :molecular-weight="state.molecularWeight"
+            :disabled="state.disabled"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.mode"
+          title="Mode"
+          :options="[
+            { value: 'auto', label: 'Auto (Tabs)' },
+            { value: 'dilution', label: 'Dilution Only' },
+            { value: 'serial', label: 'Serial Only' },
+            { value: 'conversion', label: 'Conversion Only' },
+          ]"
+        />
+        <HstSlider v-model="state.molecularWeight" title="Molecular Weight (g/mol)" :min="50" :max="1000" :step="0.1" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Dilution Mode">
+      <div style="padding: 2rem; max-width: 500px;">
+        <DoseCalculator mode="dilution" :molecular-weight="300.44" />
+      </div>
+    </Variant>
+
+    <Variant title="Serial Dilution Mode">
+      <div style="padding: 2rem; max-width: 500px;">
+        <DoseCalculator mode="serial" :molecular-weight="300.44" />
+      </div>
+    </Variant>
+
+    <Variant title="With Target Wells">
+      <div style="padding: 2rem; max-width: 500px;">
+        <DoseCalculator
+          mode="auto"
+          :target-wells="['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8']"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 500px;">
+        <DoseCalculator mode="auto" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/DoseCalculator.vue

@@ -0,0 +1,416 @@
+<script setup lang="ts">
+/** Tabbed dosing calculator supporting single dilution, serial dilution, and unit conversion, with optional direct assignment to selected plate wells. */
+import { ref, computed, watch } from 'vue'
+import ConcentrationInput from './ConcentrationInput.vue'
+import {
+  useConcentrationUnits,
+  type ConcentrationValue,
+} from '../composables/useConcentrationUnits'
+import {
+  useDoseCalculator,
+  type VolumeValue,
+  type DilutionResult,
+  type SerialDilutionResult,
+  type WellConcentration,
+} from '../composables/useDoseCalculator'
+import DoseCalculatorVolumeField from './DoseCalculatorVolumeField.vue'
+
+type CalculatorMode = 'dilution' | 'serial' | 'conversion'
+
+interface Props {
+  mode?: CalculatorMode | 'auto'
+  molecularWeight?: number
+  targetWells?: string[]
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'auto',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'apply-to-wells': [results: WellConcentration[]]
+  'calculate': [result: DilutionResult | SerialDilutionResult]
+}>()
+
+const { formatWithUnit } = useConcentrationUnits()
+const {
+  volumeUnits,
+  calculateDilution,
+  calculateSerialDilution,
+  formatVolume,
+  generateWellConcentrations,
+} = useDoseCalculator()
+
+// Active mode (for tabbed interface)
+const activeMode = ref<CalculatorMode>(props.mode === 'auto' ? 'dilution' : props.mode)
+
+// Dilution form state
+const stockConcentration = ref<ConcentrationValue>({ value: 10, unit: 'mM' })
+const finalConcentration = ref<ConcentrationValue>({ value: 100, unit: 'µM' })
+const finalVolume = ref<VolumeValue>({ value: 1, unit: 'mL' })
+
+// Serial dilution form state
+const serialStartConcentration = ref<ConcentrationValue>({ value: 100, unit: 'µM' })
+const serialDilutionFactor = ref(3)
+const serialNumberOfDilutions = ref(8)
+const serialVolumePerWell = ref<VolumeValue>({ value: 100, unit: 'µL' })
+
+// Results
+const dilutionResult = ref<DilutionResult | null>(null)
+const serialResult = ref<SerialDilutionResult | null>(null)
+
+// Computed
+const showTabs = computed(() => props.mode === 'auto')
+
+const hasTargetWells = computed(() => {
+  return props.targetWells && props.targetWells.length > 0
+})
+
+const canApplyToWells = computed(() => {
+  if (!hasTargetWells.value) return false
+  if (activeMode.value === 'serial' && serialResult.value?.valid) return true
+  if (activeMode.value === 'dilution' && dilutionResult.value?.valid) return true
+  return false
+})
+
+// Calculate dilution result
+function recalculateDilution() {
+  if (!stockConcentration.value || !finalConcentration.value || !finalVolume.value) {
+    dilutionResult.value = null
+    return
+  }
+
+  dilutionResult.value = calculateDilution({
+    stockConcentration: stockConcentration.value,
+    finalConcentration: finalConcentration.value,
+    finalVolume: finalVolume.value,
+  })
+
+  if (dilutionResult.value.valid) {
+    emit('calculate', dilutionResult.value)
+  }
+}
+
+// Calculate serial dilution result
+function recalculateSerial() {
+  if (
+    !serialStartConcentration.value ||
+    serialDilutionFactor.value <= 1 ||
+    serialNumberOfDilutions.value < 1 ||
+    !serialVolumePerWell.value
+  ) {
+    serialResult.value = null
+    return
+  }
+
+  serialResult.value = calculateSerialDilution({
+    startingConcentration: serialStartConcentration.value,
+    dilutionFactor: serialDilutionFactor.value,
+    numberOfDilutions: serialNumberOfDilutions.value,
+    volumePerWell: serialVolumePerWell.value,
+  })
+
+  if (serialResult.value.valid) {
+    emit('calculate', serialResult.value)
+  }
+}
+
+// Apply to wells
+function handleApplyToWells() {
+  if (!props.targetWells || props.targetWells.length === 0) return
+
+  if (activeMode.value === 'serial' && serialResult.value?.valid) {
+    const wellConcentrations = generateWellConcentrations(
+      serialResult.value,
+      props.targetWells
+    )
+    emit('apply-to-wells', wellConcentrations)
+  }
+
+  if (activeMode.value === 'dilution' && dilutionResult.value?.valid) {
+    // For simple dilution, apply same concentration to all wells
+    const wellConcentrations: WellConcentration[] = props.targetWells.map(wellId => ({
+      wellId,
+      concentration: finalConcentration.value,
+      volume: finalVolume.value,
+    }))
+    emit('apply-to-wells', wellConcentrations)
+  }
+}
+
+// Watch for changes and recalculate
+watch(
+  [stockConcentration, finalConcentration, finalVolume],
+  () => {
+    if (activeMode.value === 'dilution') {
+      recalculateDilution()
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  [serialStartConcentration, serialDilutionFactor, serialNumberOfDilutions, serialVolumePerWell],
+  () => {
+    if (activeMode.value === 'serial') {
+      recalculateSerial()
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+watch(activeMode, (mode) => {
+  if (mode === 'dilution') {
+    recalculateDilution()
+  } else if (mode === 'serial') {
+    recalculateSerial()
+  }
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'mint-dose-calculator',
+      disabled ? 'mint-dose-calculator--disabled' : '',
+    ]"
+  >
+    <!-- Tabs -->
+    <div v-if="showTabs" class="mint-dose-calculator__tabs" role="tablist">
+      <button
+        type="button"
+        :class="[
+          'mint-dose-calculator__tab',
+          activeMode === 'dilution' ? 'mint-dose-calculator__tab--active' : '',
+        ]"
+        role="tab"
+        :aria-selected="activeMode === 'dilution'"
+        @click="activeMode = 'dilution'"
+      >
+        Dilution
+      </button>
+      <button
+        type="button"
+        :class="[
+          'mint-dose-calculator__tab',
+          activeMode === 'serial' ? 'mint-dose-calculator__tab--active' : '',
+        ]"
+        role="tab"
+        :aria-selected="activeMode === 'serial'"
+        @click="activeMode = 'serial'"
+      >
+        Serial
+      </button>
+      <button
+        type="button"
+        :class="[
+          'mint-dose-calculator__tab',
+          activeMode === 'conversion' ? 'mint-dose-calculator__tab--active' : '',
+        ]"
+        role="tab"
+        :aria-selected="activeMode === 'conversion'"
+        @click="activeMode = 'conversion'"
+      >
+        Conversion
+      </button>
+    </div>
+
+    <!-- Dilution form -->
+    <div
+      v-if="activeMode === 'dilution'"
+      class="mint-dose-calculator__form"
+      role="tabpanel"
+    >
+      <div class="mint-dose-calculator__field">
+        <label class="mint-dose-calculator__field-label">Stock Concentration</label>
+        <ConcentrationInput
+          v-model="stockConcentration"
+          :disabled="disabled"
+          :show-conversion="false"
+          size="md"
+        />
+      </div>
+
+      <div class="mint-dose-calculator__field">
+        <label class="mint-dose-calculator__field-label">Final Concentration</label>
+        <ConcentrationInput
+          v-model="finalConcentration"
+          :disabled="disabled"
+          :show-conversion="false"
+          size="md"
+        />
+      </div>
+
+      <DoseCalculatorVolumeField
+        v-model="finalVolume"
+        label="Final Volume"
+        :units="volumeUnits"
+        :disabled="disabled"
+      />
+
+      <div class="mint-dose-calculator__divider" />
+
+      <!-- Dilution Result -->
+      <div v-if="dilutionResult?.valid" class="mint-dose-calculator__result">
+        <div class="mint-dose-calculator__result-title">Result</div>
+        <div class="mint-dose-calculator__result-row">
+          <span class="mint-dose-calculator__result-label">Stock volume</span>
+          <span class="mint-dose-calculator__result-value">
+            {{ formatVolume(dilutionResult.stockVolume) }}
+          </span>
+        </div>
+        <div class="mint-dose-calculator__result-row">
+          <span class="mint-dose-calculator__result-label">Diluent volume</span>
+          <span class="mint-dose-calculator__result-value">
+            {{ formatVolume(dilutionResult.diluentVolume) }}
+          </span>
+        </div>
+        <div class="mint-dose-calculator__result-row">
+          <span class="mint-dose-calculator__result-label">Dilution factor</span>
+          <span class="mint-dose-calculator__result-value">
+            {{ dilutionResult.dilutionFactor.toFixed(1) }}×
+          </span>
+        </div>
+      </div>
+
+      <div v-else-if="dilutionResult?.error" class="mint-dose-calculator__error">
+        {{ dilutionResult.error }}
+      </div>
+    </div>
+
+    <!-- Serial Dilution form -->
+    <div
+      v-else-if="activeMode === 'serial'"
+      class="mint-dose-calculator__form"
+      role="tabpanel"
+    >
+      <div class="mint-dose-calculator__field">
+        <label class="mint-dose-calculator__field-label">Starting Concentration</label>
+        <ConcentrationInput
+          v-model="serialStartConcentration"
+          :disabled="disabled"
+          :show-conversion="false"
+          size="md"
+        />
+      </div>
+
+      <div class="mint-dose-calculator__field-row">
+        <div class="mint-dose-calculator__field">
+          <label class="mint-dose-calculator__field-label">Dilution Factor</label>
+          <div class="mint-dose-calculator__input-wrapper">
+            <input
+              v-model.number="serialDilutionFactor"
+              type="number"
+              :disabled="disabled"
+              class="mint-dose-calculator__input"
+              min="1.1"
+              step="0.1"
+            />
+            <span class="mint-dose-calculator__unit-suffix">×</span>
+          </div>
+        </div>
+
+        <div class="mint-dose-calculator__field">
+          <label class="mint-dose-calculator__field-label">Dilutions</label>
+          <input
+            v-model.number="serialNumberOfDilutions"
+            type="number"
+            :disabled="disabled"
+            class="mint-dose-calculator__input"
+            min="1"
+            max="24"
+          />
+        </div>
+      </div>
+
+      <DoseCalculatorVolumeField
+        v-model="serialVolumePerWell"
+        label="Volume per Well"
+        :units="volumeUnits"
+        :disabled="disabled"
+      />
+
+      <div class="mint-dose-calculator__divider" />
+
+      <!-- Serial Preview -->
+      <div v-if="serialResult?.valid" class="mint-dose-calculator__preview">
+        <div class="mint-dose-calculator__preview-title">Preview</div>
+        <div class="mint-dose-calculator__preview-steps">
+          <template v-for="(step, index) in serialResult.steps" :key="step.stepNumber">
+            <div class="mint-dose-calculator__preview-step">
+              <span class="mint-dose-calculator__preview-step-num">{{ step.stepNumber }}:</span>
+              <span class="mint-dose-calculator__preview-step-conc">
+                {{ formatWithUnit(step.concentration, 3) }}
+              </span>
+            </div>
+            <span
+              v-if="index < serialResult.steps.length - 1"
+              class="mint-dose-calculator__preview-arrow"
+            >
+              →
+            </span>
+          </template>
+        </div>
+      </div>
+
+      <div v-else-if="serialResult?.error" class="mint-dose-calculator__error">
+        {{ serialResult.error }}
+      </div>
+    </div>
+
+    <!-- Conversion form -->
+    <div
+      v-else-if="activeMode === 'conversion'"
+      class="mint-dose-calculator__form"
+      role="tabpanel"
+    >
+      <div class="mint-dose-calculator__field">
+        <label class="mint-dose-calculator__field-label">Input Concentration</label>
+        <ConcentrationInput
+          :disabled="disabled"
+          :molecular-weight="molecularWeight"
+          :show-conversion="true"
+          size="md"
+        />
+      </div>
+
+      <div
+        v-if="!molecularWeight"
+        class="mint-dose-calculator__error"
+      >
+        Provide molecular weight for mass ↔ molarity conversion
+      </div>
+    </div>
+
+    <!-- Molecular weight section (shown if needed) -->
+    <div
+      v-if="molecularWeight"
+      class="mint-dose-calculator__mw-section"
+    >
+      <span class="mint-dose-calculator__mw-label">
+        Molecular Weight: {{ molecularWeight }} g/mol
+      </span>
+    </div>
+
+    <!-- Apply to wells button -->
+    <div v-if="hasTargetWells" class="mint-dose-calculator__form">
+      <button
+        type="button"
+        class="mint-dose-calculator__apply-btn"
+        :disabled="!canApplyToWells || disabled"
+        @click="handleApplyToWells"
+      >
+        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        Apply to {{ targetWells?.length }} selected well{{ targetWells?.length === 1 ? '' : 's' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/dose-calculator.css';
+</style>

package/src/components/DoseCalculatorVolumeField.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/** Number + unit control used by DoseCalculator volume fields. */
+import type { VolumeUnit, VolumeValue } from '../composables/useDoseCalculator'
+
+interface Props {
+  label: string
+  modelValue: VolumeValue
+  units: VolumeUnit[]
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: VolumeValue]
+}>()
+
+function handleValueInput(event: Event) {
+  const input = event.target as HTMLInputElement
+  const value = parseFloat(input.value)
+  if (Number.isNaN(value)) return
+  emit('update:modelValue', { ...props.modelValue, value })
+}
+
+function handleUnitChange(event: Event) {
+  const select = event.target as HTMLSelectElement
+  emit('update:modelValue', {
+    ...props.modelValue,
+    unit: select.value as VolumeUnit,
+  })
+}
+</script>
+
+<template>
+  <div class="mint-dose-calculator__field">
+    <label class="mint-dose-calculator__field-label">{{ label }}</label>
+    <div class="mint-dose-calculator__field-row">
+      <input
+        type="number"
+        :value="modelValue.value"
+        :disabled="disabled"
+        class="mint-dose-calculator__input"
+        min="0"
+        step="any"
+        @input="handleValueInput"
+      />
+      <select
+        :value="modelValue.unit"
+        :disabled="disabled"
+        class="mint-dose-calculator__select"
+        @change="handleUnitChange"
+      >
+        <option v-for="unit in units" :key="unit" :value="unit">
+          {{ unit }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>

package/src/components/DoseDesignWorkspaceView.story.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DoseDesignWorkspaceView from './DoseDesignWorkspaceView.vue'
+import type { DoseDesignControlModelOptions } from '../composables/useControlSchema'
+
+type SidebarVariant = 'analysis' | 'default'
+
+const initState = () => ({
+  title: 'Dose Design Workspace',
+  includeMolecularWeight: true,
+  plateFormat: 96,
+  selectedWells: ['A1', 'A2', 'B1', 'B2'],
+  sidebarTitle: 'Dose Controls',
+  sidebarSubtitle: 'Plate setup',
+  sidebarVariant: 'analysis' as SidebarVariant,
+  responsiveSidebar: true,
+  showSettings: true,
+})
+
+const state = ref(initState())
+const values = ref<Record<string, unknown>>({})
+
+function doseOptions(): DoseDesignControlModelOptions {
+  return {
+    selectedWells: state.value.selectedWells,
+    plateFormat: state.value.plateFormat,
+    includeMolecularWeight: state.value.includeMolecularWeight,
+  }
+}
+</script>
+
+<template>
+  <Story title="Workflow/DoseDesignWorkspaceView" :init-state="initState">
+    <Variant title="Playground">
+      <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
+        <DoseDesignWorkspaceView
+          v-model="values"
+          :title="state.title"
+          :dose-design-options="doseOptions()"
+          :sidebar-title="state.sidebarTitle"
+          :sidebar-subtitle="state.sidebarSubtitle"
+          :sidebar-variant="state.sidebarVariant"
+          :responsive-sidebar="state.responsiveSidebar"
+          :show-settings="state.showSettings"
+          :well-plate-props="{
+            heatmap: { enabled: true, min: 0, max: 100, colorScale: 'viridis' },
+          }"
+        />
+      </div>
+    </Variant>
+
+    <template #controls>
+      <HstText v-model="state.title" title="Title" />
+      <HstText v-model="state.sidebarTitle" title="Sidebar title" />
+      <HstText v-model="state.sidebarSubtitle" title="Sidebar subtitle" />
+      <HstCheckbox v-model="state.includeMolecularWeight" title="Molecular weight" />
+      <HstCheckbox v-model="state.responsiveSidebar" title="Responsive sidebar" />
+      <HstCheckbox v-model="state.showSettings" title="Settings" />
+      <HstSelect
+        v-model="state.sidebarVariant"
+        title="Sidebar variant"
+        :options="[
+          { label: 'Analysis', value: 'analysis' },
+          { label: 'Default', value: 'default' },
+        ]"
+      />
+      <HstSelect
+        v-model="state.plateFormat"
+        title="Plate format"
+        :options="[
+          { label: '96 wells', value: 96 },
+          { label: '384 wells', value: 384 },
+        ]"
+      />
+    </template>
+  </Story>
+</template>