@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

package/src/components/BioTemplatePresetWorkspaceView.vue

@@ -0,0 +1,401 @@
+<script setup lang="ts">
+/** Complete editable WellPlate/DoseCalculator workspace for dose design that rebuilds generated AppSidebar preset wiring when preset props load late. */
+import { computed, effectScope, onScopeDispose, shallowRef, toRaw, unref, watch, type EffectScope } from 'vue'
+import type { BioTemplateControlValues, TemplatePresetId } from '../templates'
+import type {
+  UseBioTemplatePresetWorkspaceOptions,
+  UseBioTemplatePresetWorkspaceReturn,
+} from '../composables/useBioTemplatePresetWorkspace'
+import { useBioTemplatePresetWorkspace } from '../composables/useBioTemplatePresetWorkspace'
+import AlertBox from './AlertBox.vue'
+import AppSidebar from './AppSidebar.vue'
+import BaseButton from './BaseButton.vue'
+import BioTemplateRenderer from './BioTemplateRenderer.vue'
+import AppPillNavInternal from './internal/AppPillNavInternal.vue'
+
+type BioTemplatePresetSidebarVariant = 'default' | 'analysis'
+
+interface BioTemplatePresetWorkspaceSlotProps {
+  workspace: UseBioTemplatePresetWorkspaceReturn
+  bindings: UseBioTemplatePresetWorkspaceReturn['bindings']
+  collection: UseBioTemplatePresetWorkspaceReturn['collection']['value']
+  renderer: UseBioTemplatePresetWorkspaceReturn['renderer']['value']
+  componentBindingsById: UseBioTemplatePresetWorkspaceReturn['componentBindingsById']['value']
+  componentProps: UseBioTemplatePresetWorkspaceReturn['componentProps']['value']
+  componentPropsById: UseBioTemplatePresetWorkspaceReturn['componentPropsById']['value']
+  componentPropsByComponent: UseBioTemplatePresetWorkspaceReturn['componentPropsByComponent']['value']
+  getComponentProps: UseBioTemplatePresetWorkspaceReturn['getComponentProps']
+}
+
+interface Props {
+  /** Workspace returned by useBioTemplatePresetWorkspace(). Use for full manual control. */
+  workspace?: UseBioTemplatePresetWorkspaceReturn
+  /** Built-in preset id used to create the workspace when workspace is not provided. */
+  preset?: TemplatePresetId
+  /** Options passed to the internally generated useBioTemplatePresetWorkspace() call. */
+  workspaceOptions?: UseBioTemplatePresetWorkspaceOptions
+  /** Initial control values for the internally generated preset workspace. */
+  initialValues?: BioTemplateControlValues
+  /** External control values for the internally generated preset workspace. Supports default v-model. */
+  modelValue?: BioTemplateControlValues
+  /** External control values for the internally generated preset workspace. Supports v-model:values. */
+  values?: BioTemplateControlValues
+  /** Label shown in the status banner. Defaults to the humanized preset id. */
+  label?: string
+  /** Sidebar CSS width. */
+  sidebarWidth?: string
+  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar design language. */
+  sidebarVariant?: BioTemplatePresetSidebarVariant
+  /** Compact sidebar and preview layout. */
+  dense?: boolean
+  /** Render preview components in read-only mode. */
+  readonly?: boolean
+  /** Show save timestamp. */
+  showStatus?: boolean
+  /** Show cards for templates included in the preset collection. */
+  showTemplateSummary?: boolean
+  /** Show component binding count. */
+  showComponentSummary?: boolean
+  saveLabel?: string
+  resetLabel?: string
+}
+
+const emit = defineEmits<{
+  /** Emitted when generated preset controls change through the embedded sidebar or reset action. */
+  'update:modelValue': [values: BioTemplateControlValues]
+  /** Emitted when generated preset controls change through the embedded sidebar or reset action. */
+  'update:values': [values: BioTemplateControlValues]
+}>()
+
+defineSlots<{
+  default?: (props: BioTemplatePresetWorkspaceSlotProps) => unknown
+}>()
+
+const props = withDefaults(defineProps<Props>(), {
+  workspace: undefined,
+  preset: 'wellplate-screen',
+  workspaceOptions: () => ({}),
+  initialValues: undefined,
+  modelValue: undefined,
+  values: undefined,
+  sidebarWidth: '320px',
+  sidebarVariant: 'analysis',
+  dense: true,
+  readonly: true,
+  showStatus: true,
+  showTemplateSummary: true,
+  showComponentSummary: false,
+  saveLabel: 'Save',
+  resetLabel: 'Reset defaults',
+})
+
+const externalValues = computed(() => props.modelValue ?? props.values)
+const resolvedWorkspaceOptions = computed<UseBioTemplatePresetWorkspaceOptions>(() => {
+  if (props.initialValues === undefined && externalValues.value === undefined) return props.workspaceOptions
+
+  return {
+    ...props.workspaceOptions,
+    initialValues: {
+      ...(props.workspaceOptions.initialValues ?? {}),
+      ...(props.initialValues ?? {}),
+      ...(externalValues.value ?? {}),
+    },
+  }
+})
+
+let generatedWorkspaceScope: EffectScope | undefined
+
+function createGeneratedWorkspace(): UseBioTemplatePresetWorkspaceReturn {
+  generatedWorkspaceScope?.stop()
+  generatedWorkspaceScope = effectScope()
+  return generatedWorkspaceScope.run(() => useBioTemplatePresetWorkspace(props.preset, resolvedWorkspaceOptions.value))!
+}
+
+const generatedWorkspace = shallowRef<UseBioTemplatePresetWorkspaceReturn>(createGeneratedWorkspace())
+const resolvedWorkspace = computed(() => props.workspace ?? generatedWorkspace.value)
+
+watch(
+  [() => props.preset, () => props.workspaceOptions, () => props.initialValues],
+  () => {
+    generatedWorkspace.value = createGeneratedWorkspace()
+  },
+  { deep: true },
+)
+
+onScopeDispose(() => generatedWorkspaceScope?.stop())
+
+watch(
+  externalValues,
+  (values) => {
+    if (values === undefined || props.workspace !== undefined) return
+    if (recordsEqual(toPlainRecord(generatedWorkspace.value.controlValues.value), values)) return
+    generatedWorkspace.value.setControlValues(values)
+  },
+  { deep: true },
+)
+
+watch(
+  () => generatedWorkspace.value.controlValues.value,
+  (values) => {
+    if (props.workspace !== undefined) return
+    const nextValues = toPlainRecord(values)
+    if (externalValues.value !== undefined && recordsEqual(nextValues, externalValues.value)) return
+    emit('update:modelValue', nextValues)
+    emit('update:values', nextValues)
+  },
+  { deep: true },
+)
+
+const presetId = computed(() => resolvedWorkspace.value.presetId)
+const label = computed(() => props.label ?? unref(resolvedWorkspace.value.presetLabel))
+const collection = computed(() => unref(resolvedWorkspace.value.collection))
+const templateIds = computed(() => unref(resolvedWorkspace.value.templateIds))
+const currentExperimentId = computed(() => unref(resolvedWorkspace.value.currentExperimentId))
+const hasCurrentExperiment = computed(() => unref(resolvedWorkspace.value.hasCurrentExperiment))
+const isSaving = computed(() => unref(resolvedWorkspace.value.saving))
+const error = computed(() => unref(resolvedWorkspace.value.error))
+const lastSavedAt = computed(() => unref(resolvedWorkspace.value.lastSavedAt))
+const renderer = computed(() => unref(resolvedWorkspace.value.renderer))
+const componentBindingsById = computed(() => unref(resolvedWorkspace.value.componentBindingsById))
+const componentProps = computed(() => unref(resolvedWorkspace.value.componentProps))
+const componentPropsById = computed(() => unref(resolvedWorkspace.value.componentPropsById))
+const componentPropsByComponent = computed(() => unref(resolvedWorkspace.value.componentPropsByComponent))
+const componentPropsCount = computed(() => unref(resolvedWorkspace.value.componentProps).length)
+const bindings = computed(() => resolvedWorkspace.value.bindings)
+
+function toPlainRecord(value: Record<string, unknown>): Record<string, unknown> {
+  return toPlain(value) as Record<string, unknown>
+}
+
+function toPlain(value: unknown): unknown {
+  const raw = toRaw(value)
+  if (Array.isArray(raw)) return raw.map(item => toPlain(item))
+  if (raw && typeof raw === 'object') {
+    return Object.fromEntries(
+      Object.entries(raw as Record<string, unknown>).map(([key, item]) => [key, toPlain(item)])
+    )
+  }
+  return raw
+}
+
+function recordsEqual(left: Record<string, unknown>, right: Record<string, unknown>): boolean {
+  const leftKeys = Object.keys(left)
+  const rightKeys = Object.keys(right)
+  if (leftKeys.length !== rightKeys.length) return false
+  return leftKeys.every(key => valuesEqual(left[key], right[key]))
+}
+
+function valuesEqual(left: unknown, right: unknown): boolean {
+  const leftRaw = toRaw(left)
+  const rightRaw = toRaw(right)
+
+  if (Object.is(leftRaw, rightRaw)) return true
+
+  if (Array.isArray(leftRaw) || Array.isArray(rightRaw)) {
+    if (!Array.isArray(leftRaw) || !Array.isArray(rightRaw)) return false
+    if (leftRaw.length !== rightRaw.length) return false
+    return leftRaw.every((item, index) => valuesEqual(item, rightRaw[index]))
+  }
+
+  if (isPlainRecord(leftRaw) || isPlainRecord(rightRaw)) {
+    if (!isPlainRecord(leftRaw) || !isPlainRecord(rightRaw)) return false
+    return recordsEqual(leftRaw, rightRaw)
+  }
+
+  return false
+}
+
+function isPlainRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+</script>
+
+<template>
+  <div class="mint-bio-template-preset-workspace">
+    <div class="mint-bio-template-preset-workspace__toolbar">
+      <AlertBox type="info" class="mint-bio-template-preset-workspace__status">
+        {{ label }} preset saves to the current experiment design_data.
+      </AlertBox>
+
+      <div class="mint-bio-template-preset-workspace__actions">
+        <BaseButton
+          variant="secondary"
+          :disabled="isSaving"
+          @click="resolvedWorkspace.resetToDefaultCollection()"
+        >
+          {{ resetLabel }}
+        </BaseButton>
+        <BaseButton
+          variant="primary"
+          :loading="isSaving"
+          :disabled="!hasCurrentExperiment"
+          @click="resolvedWorkspace.saveCurrent()"
+        >
+          {{ saveLabel }}
+        </BaseButton>
+      </div>
+    </div>
+
+    <AlertBox v-if="error" type="error">
+      {{ error }}
+    </AlertBox>
+
+    <p v-if="showStatus" class="mint-bio-template-preset-workspace__meta">
+      saved: {{ lastSavedAt?.toLocaleString() ?? 'not saved' }}
+    </p>
+
+    <div class="mint-bio-template-preset-workspace__main">
+      <AppSidebar
+        v-bind="resolvedWorkspace.sidebar"
+        :variant="sidebarVariant"
+        :floating="false"
+        :width="sidebarWidth"
+        :dense="dense"
+      >
+        <template #header>
+          <p class="mint-bio-template-preset-workspace__sidebar-title">
+            Controls
+          </p>
+          <AppPillNavInternal
+            v-if="resolvedWorkspace.pillNav.items.length > 1"
+            class="mint-bio-template-preset-workspace__view-nav"
+            :items="resolvedWorkspace.pillNav.items"
+            :current-item-id="resolvedWorkspace.pillNav.currentItemId"
+            @select="resolvedWorkspace.pillNav.onSelect"
+          />
+          <p class="mint-bio-template-preset-workspace__sidebar-subtitle">
+            {{ presetId }}
+          </p>
+        </template>
+      </AppSidebar>
+
+      <slot
+        :workspace="resolvedWorkspace"
+        :bindings="bindings"
+        :collection="collection"
+        :renderer="renderer"
+        :component-bindings-by-id="componentBindingsById"
+        :component-props="componentProps"
+        :component-props-by-id="componentPropsById"
+        :component-props-by-component="componentPropsByComponent"
+        :get-component-props="resolvedWorkspace.getComponentProps"
+      >
+        <BioTemplateRenderer
+          v-bind="renderer"
+          :dense="dense"
+          :readonly="readonly"
+        />
+      </slot>
+    </div>
+
+    <div
+      v-if="showTemplateSummary"
+      class="mint-bio-template-preset-workspace__templates"
+    >
+      <div
+        v-for="templateId in templateIds"
+        :key="templateId"
+        class="mint-bio-template-preset-workspace__template"
+      >
+        <p class="mint-bio-template-preset-workspace__template-id">
+          {{ templateId }}
+        </p>
+        <p class="mint-bio-template-preset-workspace__template-meta">
+          {{ presetId }} - Experiment {{ currentExperimentId ?? 'not selected' }}
+        </p>
+      </div>
+    </div>
+
+    <p v-if="showComponentSummary" class="mint-bio-template-preset-workspace__meta">
+      component prop bindings: {{ componentPropsCount }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.mint-bio-template-preset-workspace {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.mint-bio-template-preset-workspace__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.mint-bio-template-preset-workspace__status {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mint-bio-template-preset-workspace__actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 0.5rem;
+}
+
+.mint-bio-template-preset-workspace__meta,
+.mint-bio-template-preset-workspace__sidebar-subtitle,
+.mint-bio-template-preset-workspace__template-meta {
+  margin: 0;
+  color: var(--text-secondary, #64748b);
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.75rem;
+}
+
+.mint-bio-template-preset-workspace__main {
+  display: grid;
+  grid-template-columns: minmax(16rem, max-content) minmax(0, 1fr);
+  gap: 1rem;
+  align-items: start;
+  min-width: 0;
+}
+
+.mint-bio-template-preset-workspace__sidebar-title {
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.mint-bio-template-preset-workspace__view-nav {
+  margin-top: 0.5rem;
+}
+
+.mint-bio-template-preset-workspace__templates {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: 0.75rem;
+}
+
+.mint-bio-template-preset-workspace__template {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  background: var(--bg-primary, #ffffff);
+}
+
+.mint-bio-template-preset-workspace__template-id {
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.875rem;
+}
+
+@media (max-width: 48rem) {
+  .mint-bio-template-preset-workspace__toolbar,
+  .mint-bio-template-preset-workspace__actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .mint-bio-template-preset-workspace__main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>

package/src/components/BioTemplateRenderer.story.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import BioTemplateRenderer from './BioTemplateRenderer.vue'
+import {
+  createLcmsBatchCollection,
+  createQpcrExpressionCollection,
+  createWellPlateScreenCollection,
+} from '../templates'
+
+const wellplateScreen = createWellPlateScreenCollection({
+  samples: ['Control', 'Treatment'],
+  compounds: {
+    'Drug A': [10, 1, 0.1],
+  },
+  unit: 'uM',
+})
+
+const qpcrExpression = createQpcrExpressionCollection({
+  samples: ['Control', 'Treatment'],
+  targets: ['ACTB', 'GAPDH'],
+  replicates: 2,
+})
+
+const lcmsBatch = createLcmsBatchCollection({
+  samples: ['S001', 'S002', 'S003'],
+  features: ['Glucose', 'Lactate', 'Citrate'],
+})
+</script>
+
+<template>
+  <Story title="Templates/BioTemplateRenderer">
+    <Variant title="Wellplate Screen">
+      <div style="padding: 2rem; background: var(--bg-primary, #f8fafc);">
+        <BioTemplateRenderer :target="wellplateScreen" />
+      </div>
+    </Variant>
+
+    <Variant title="qPCR Expression">
+      <div style="padding: 2rem; background: var(--bg-primary, #f8fafc);">
+        <BioTemplateRenderer
+          :target="qpcrExpression"
+          :include="['WellPlate', 'DataFrame']"
+          dense
+        />
+      </div>
+    </Variant>
+
+    <Variant title="LCMS Batch Tables">
+      <div style="padding: 2rem; background: var(--bg-primary, #f8fafc);">
+        <BioTemplateRenderer
+          :target="lcmsBatch"
+          :include="['DataFrame']"
+          dense
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BioTemplateRenderer.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/** Render biology template envelopes with matching SDK components such as WellPlate, DoseCalculator, and DataFrame. */
+import { computed } from 'vue'
+import {
+  toBioTemplateComponentBindings,
+} from '../templates/componentBindings'
+import type {
+  BioTemplateEnvelope,
+  TemplateCollectionEnvelope,
+} from '../templates/types'
+import ComponentBindingRenderer from './ComponentBindingRenderer.vue'
+
+interface Props {
+  /** Template envelope or template collection to render. */
+  target: BioTemplateEnvelope<unknown> | TemplateCollectionEnvelope
+  /** Optional allow-list of component names, for example ['WellPlate', 'DataFrame']. */
+  include?: string[]
+  /** Optional deny-list of component names. */
+  exclude?: string[]
+  /** Compact child component sizing. */
+  dense?: boolean
+  /** Prefer preview-safe props for editable components. */
+  readonly?: boolean
+  /** Show component/template labels above each rendered component. */
+  showHeaders?: boolean
+  /** Show binding descriptions in each header. */
+  showDescriptions?: boolean
+  /** Message shown when the target has no renderable bindings. */
+  emptyText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  include: () => [],
+  exclude: () => [],
+  dense: false,
+  readonly: true,
+  showHeaders: true,
+  showDescriptions: true,
+  emptyText: 'No renderable biology template components.',
+})
+
+const componentBindings = computed(() => toBioTemplateComponentBindings(props.target))
+</script>
+
+<template>
+  <ComponentBindingRenderer
+    class="mint-bio-template-renderer"
+    :bindings="componentBindings"
+    :include="include"
+    :exclude="exclude"
+    :dense="dense"
+    :readonly="readonly"
+    :show-headers="showHeaders"
+    :show-descriptions="showDescriptions"
+    :empty-text="emptyText"
+  />
+</template>

package/src/components/Breadcrumb.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 /** Renders a breadcrumb trail where ancestors are links or emit-based buttons and the last item is the current page. */
-import type { BreadcrumbItem } from '../types'
+import { computed } from 'vue'
+import type { BreadcrumbItem, BreadcrumbItemInput } from '../types'
+import { normalizeLabelItemInput } from '../utils/items'
 
 interface Props {
-  items: BreadcrumbItem[]
+  items: BreadcrumbItemInput[]
   separator?: string
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   separator: '/',
 })
 
@@ -15,6 +17,10 @@ const emit = defineEmits<{
   navigate: [item: BreadcrumbItem]
 }>()
 
+const normalizedItems = computed<BreadcrumbItem[]>(() =>
+  props.items.map(normalizeLabelItemInput)
+)
+
 function handleClick(item: BreadcrumbItem) {
   if (!item.href) {
     emit('navigate', item)
@@ -26,20 +32,20 @@ function handleClick(item: BreadcrumbItem) {
   <nav class="mint-breadcrumb" aria-label="Breadcrumb">
     <ol class="mint-breadcrumb__list">
       <li
-        v-for="(item, index) in items"
+        v-for="(item, index) in normalizedItems"
         :key="index"
         class="mint-breadcrumb__item"
       >
-        <slot name="item" :item="item" :index="index" :is-last="index === items.length - 1">
+        <slot name="item" :item="item" :index="index" :is-last="index === normalizedItems.length - 1">
           <a
-            v-if="item.href && index !== items.length - 1"
+            v-if="item.href && index !== normalizedItems.length - 1"
             :href="item.href"
             class="mint-breadcrumb__link"
           >
             {{ item.label }}
           </a>
           <button
-            v-else-if="index !== items.length - 1"
+            v-else-if="index !== normalizedItems.length - 1"
             class="mint-breadcrumb__link"
             @click="handleClick(item)"
           >
@@ -54,7 +60,7 @@ function handleClick(item: BreadcrumbItem) {
           </span>
         </slot>
         <span
-          v-if="index !== items.length - 1"
+          v-if="index !== normalizedItems.length - 1"
           class="mint-breadcrumb__separator"
           aria-hidden="true"
         >

package/src/components/ComponentBindingRenderer.story.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import ComponentBindingRenderer from './ComponentBindingRenderer.vue'
+import {
+  defineDoseDesignControlModel,
+  useControlWorkspace,
+} from '../composables/useControlSchema'
+
+const model = defineDoseDesignControlModel({
+  selectedWells: ['A1', 'A2', 'B1'],
+  plateFormat: 96,
+  includeMolecularWeight: true,
+})
+const workspace = useControlWorkspace(model)
+
+const state = ref({
+  dense: false,
+  readonly: true,
+  showHeaders: true,
+  showDescriptions: true,
+  layout: 'grid' as 'grid' | 'stack',
+})
+
+const bindings = computed(() => workspace.componentBindings.value)
+</script>
+
+<template>
+  <Story title="Layout/ComponentBindingRenderer">
+    <Variant title="Dose Design Bindings">
+      <div style="padding: 2rem; min-height: 640px; background: var(--bg-secondary, #f8fafc);">
+        <ComponentBindingRenderer
+          :bindings="bindings"
+          :dense="state.dense"
+          :readonly="state.readonly"
+          :show-headers="state.showHeaders"
+          :show-descriptions="state.showDescriptions"
+          :layout="state.layout"
+        />
+      </div>
+    </Variant>
+
+    <template #controls>
+      <HstCheckbox v-model="state.dense" title="Dense" />
+      <HstCheckbox v-model="state.readonly" title="Readonly" />
+      <HstCheckbox v-model="state.showHeaders" title="Headers" />
+      <HstCheckbox v-model="state.showDescriptions" title="Descriptions" />
+      <HstSelect
+        v-model="state.layout"
+        title="Layout"
+        :options="[
+          { label: 'Grid', value: 'grid' },
+          { label: 'Stack', value: 'stack' },
+        ]"
+      />
+    </template>
+  </Story>
+</template>