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

package/src/components/BioTemplatePresetWorkspaceView.vue

@@ -0,0 +1,392 @@
+<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 AppPillNav from './AppPillNav.vue'
+import AppSidebar from './AppSidebar.vue'
+import BaseButton from './BaseButton.vue'
+import BioTemplateRenderer from './BioTemplateRenderer.vue'
+
+interface BioTemplatePresetWorkspaceSlotProps {
+  workspace: UseBioTemplatePresetWorkspaceReturn
+  bindings: UseBioTemplatePresetWorkspaceReturn['bindings']
+  collection: UseBioTemplatePresetWorkspaceReturn['collection']['value']
+  renderer: UseBioTemplatePresetWorkspaceReturn['renderer']['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
+  /** 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',
+  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 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"
+        :floating="false"
+        :width="sidebarWidth"
+        :dense="dense"
+      >
+        <template #header>
+          <p class="mint-bio-template-preset-workspace__sidebar-title">
+            Controls
+          </p>
+          <AppPillNav
+            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-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>