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

package/src/components/ControlWorkspaceView.story.vue

@@ -0,0 +1,336 @@
+<script setup lang="ts">
+import { computed, defineComponent, h, ref } from 'vue'
+import ControlWorkspaceView from './ControlWorkspaceView.vue'
+import DoseCalculator from './DoseCalculator.vue'
+import WellPlate from './WellPlate.vue'
+import {
+  defineControlModel,
+  defineControls,
+  defineDoseDesignControlModel,
+  useControlWorkspace,
+  type ControlComponentPropsMap,
+} from '../composables/useControlSchema'
+
+const controls = defineControls({
+  threshold: {
+    type: 'number',
+    label: 'Threshold',
+    default: 0.05,
+    min: 0,
+    max: 1,
+    section: 'parameters',
+    sectionLabel: 'Parameters',
+    view: 'analysis',
+  },
+  method: {
+    label: 'Method',
+    default: 'linear',
+    options: ['linear', 'logistic', 'spline'],
+    section: 'parameters',
+    view: 'analysis',
+  },
+  chartScale: {
+    label: 'Scale',
+    default: 'linear',
+    options: ['linear', 'log'],
+    section: 'display',
+    sectionLabel: 'Display',
+    view: 'results',
+  },
+})
+
+const controlOptions = {
+  views: {
+    analysis: { label: 'Run' },
+    results: { label: 'Results' },
+  },
+  topBarSettings: {
+    title: 'Workspace settings',
+    showAppearance: false,
+  },
+}
+
+const workspace = useControlWorkspace(controls, controlOptions)
+const directInitialValues = {
+  threshold: 0.1,
+  method: 'logistic',
+}
+const directModel = ref({ ...directInitialValues })
+const nestedControlModel = defineControlModel({
+  views: {
+    design: {
+      label: 'Design',
+      sections: {
+        dose: {
+          label: 'Dose design',
+          description: 'Dose and replicate controls',
+          icon: 'settings',
+          columns: 2,
+          controls: {
+            concentrationUnit: ['uM', 'nM', 'mM'],
+            replicates: { type: 'number', default: 3, min: 1, max: 12 },
+          },
+        },
+        display: {
+          label: 'Display',
+          sidebar: false,
+          controls: {
+            showHeatmap: true,
+          },
+        },
+      },
+    },
+    results: {
+      label: 'Results',
+      section: 'plots',
+      sectionLabel: 'Plots',
+      controls: {
+        chartScale: ['linear', 'log'],
+      },
+    },
+  },
+})
+const nestedModelValues = ref({})
+const doseDesignModel = defineDoseDesignControlModel({
+  selectedWells: ['A1', 'A2', 'B1', 'B2'],
+  includeMolecularWeight: true,
+})
+const doseDesignValues = ref({})
+const componentPropsModel = ref({
+  threshold: 0.42,
+  method: 'logistic',
+  chartScale: 'log',
+})
+const componentPropsMap: ControlComponentPropsMap = {
+  score: 'threshold',
+  scale: 'chartScale',
+  method: 'method',
+}
+
+const MockResultChart = defineComponent({
+  name: 'MockResultChart',
+  props: {
+    score: { type: Number, default: 0 },
+    scale: { type: String, default: 'linear' },
+    method: { type: String, default: 'linear' },
+  },
+  setup(props) {
+    const barWidth = computed(() => `${Math.max(8, Math.min(100, props.score * 100))}%`)
+
+    return () => h('div', { class: 'component-props-demo' }, [
+      h('div', { class: 'component-props-demo__header' }, [
+        h('span', { class: 'component-props-demo__title' }, 'Result preview'),
+        h('span', { class: 'component-props-demo__badge' }, props.scale),
+      ]),
+      h('div', { class: 'component-props-demo__metric' }, [
+        h('span', 'Threshold'),
+        h('strong', props.score.toFixed(2)),
+      ]),
+      h('div', { class: 'component-props-demo__bar' }, [
+        h('span', { style: { width: barWidth.value } }),
+      ]),
+      h('div', { class: 'component-props-demo__meta' }, `Method: ${props.method}`),
+    ])
+  },
+})
+
+function initState() {
+  return {
+    title: 'Analysis Workspace',
+    sidebarPosition: 'left',
+    navigation: 'pill',
+    floating: false,
+    dense: true,
+    showSettings: true,
+    formLoading: false,
+    formDisabled: false,
+    formReadonly: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Layout/ControlWorkspaceView" :init-state="initState">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
+          <ControlWorkspaceView
+            :workspace="workspace"
+            :title="state.title"
+            :sidebar-position="state.sidebarPosition"
+            :navigation="state.navigation"
+            :floating="state.floating"
+            :dense="state.dense"
+            :show-settings="state.showSettings"
+            :form-loading="state.formLoading"
+            :form-disabled="state.formDisabled"
+            :form-readonly="state.formReadonly"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstSelect
+          v-model="state.sidebarPosition"
+          title="Sidebar"
+          :options="[
+            { label: 'Left', value: 'left' },
+            { label: 'Right', value: 'right' },
+          ]"
+        />
+        <HstSelect
+          v-model="state.navigation"
+          title="Navigation"
+          :options="[
+            { label: 'Pill', value: 'pill' },
+            { label: 'Tabs', value: 'tabs' },
+          ]"
+        />
+        <HstCheckbox v-model="state.floating" title="Floating" />
+        <HstCheckbox v-model="state.dense" title="Dense" />
+        <HstCheckbox v-model="state.showSettings" title="Settings" />
+        <HstCheckbox v-model="state.formLoading" title="Form loading" />
+        <HstCheckbox v-model="state.formDisabled" title="Form disabled" />
+        <HstCheckbox v-model="state.formReadonly" title="Form readonly" />
+      </template>
+    </Variant>
+
+    <Variant title="Direct Controls">
+      <template #default="{ state }">
+        <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
+          <ControlWorkspaceView
+            :controls="controls"
+            :control-options="controlOptions"
+            v-model="directModel"
+            title="Direct Controls Workspace"
+            :form-loading="state.formLoading"
+            :form-disabled="state.formDisabled"
+            :form-readonly="state.formReadonly"
+          />
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="Nested Model">
+      <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
+        <ControlWorkspaceView
+          v-model="nestedModelValues"
+          :model="nestedControlModel"
+          title="Nested Control Model"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Dose Design">
+      <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
+        <ControlWorkspaceView
+          v-model="doseDesignValues"
+          :model="doseDesignModel"
+          title="Dose Design Workspace"
+          v-slot="{ componentPropsById }"
+        >
+          <div class="dose-design-demo">
+            <WellPlate
+              v-bind="componentPropsById.plate"
+              size="fill"
+              selection-mode="multiple"
+              :heatmap="{ enabled: true, min: 0, max: 100, colorScale: 'viridis' }"
+            />
+            <DoseCalculator v-bind="componentPropsById.dose" />
+          </div>
+        </ControlWorkspaceView>
+      </div>
+    </Variant>
+
+    <Variant title="Component Props">
+      <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
+        <ControlWorkspaceView
+          v-model="componentPropsModel"
+          :controls="controls"
+          :control-options="controlOptions"
+          :component-props="componentPropsMap"
+          title="Component Props Workspace"
+          dense
+          v-slot="{ componentProps }"
+        >
+          <MockResultChart v-bind="componentProps" />
+        </ControlWorkspaceView>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.component-props-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: min(100%, 24rem);
+  padding: 1.25rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg, 0.75rem);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.dose-design-demo {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.8fr);
+  gap: 1rem;
+  align-items: start;
+}
+
+.component-props-demo__header,
+.component-props-demo__metric {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.component-props-demo__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.component-props-demo__badge {
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm, 0.375rem);
+  background: var(--color-primary-soft);
+  color: var(--color-primary-hover);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.component-props-demo__metric span,
+.component-props-demo__meta {
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+.component-props-demo__metric strong {
+  font-family: var(--font-mono, monospace);
+  font-size: 1.5rem;
+}
+
+.component-props-demo__bar {
+  height: 0.625rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--bg-tertiary);
+}
+
+.component-props-demo__bar span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--color-primary);
+}
+
+@media (max-width: 900px) {
+  .dose-design-demo {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>

package/src/components/ControlWorkspaceView.vue

@@ -0,0 +1,347 @@
+<script setup lang="ts">
+/** Page shell that turns a simple controls data model into AppTopBar, AppSidebar, and FormBuilder. */
+import { computed, effectScope, onScopeDispose, shallowRef, toRaw, watch, type EffectScope } from 'vue'
+import type { TopBarVariant } from '../types'
+import type { FormEnhancements } from '../types/form-builder'
+import type {
+  ControlComponentPropsByIdMap,
+  ControlComponentPropsMap,
+  ControlModel,
+  ControlModelBinding,
+  ControlSchema,
+  ControlWorkspaceOptions,
+  UseControlWorkspaceReturn,
+} from '../composables/useControlSchema'
+import { defineControlModel, mergeControlWorkspaceOptions, useControlWorkspace } from '../composables/useControlSchema'
+import AppLayout from './AppLayout.vue'
+import AppSidebar from './AppSidebar.vue'
+import AppTopBar from './AppTopBar.vue'
+import FormBuilder from './FormBuilder.vue'
+
+type ControlWorkspaceNavigation = 'tabs' | 'pill'
+type ResolvedControlWorkspace = UseControlWorkspaceReturn<ControlSchema>
+
+interface ControlWorkspaceDefaultSlotProps {
+  workspace: ResolvedControlWorkspace
+  bindings: ResolvedControlWorkspace['bindings']
+  values: ResolvedControlWorkspace['values']
+  componentProps: ReturnType<ResolvedControlWorkspace['getComponentProps']>
+  componentPropsById: ReturnType<ResolvedControlWorkspace['getComponentPropsById']>
+}
+
+interface ControlWorkspaceTopbarSlotProps {
+  workspace: ResolvedControlWorkspace
+  bindings: ResolvedControlWorkspace['bindings']
+  topBar: ResolvedControlWorkspace['topBar']
+}
+
+interface ControlWorkspaceSidebarSlotProps {
+  workspace: ResolvedControlWorkspace
+  bindings: ResolvedControlWorkspace['bindings']
+  sidebar: ResolvedControlWorkspace['sidebar']
+}
+
+interface Props {
+  /** Model returned by defineControlModel()/defineDoseDesignControlModel(), or a raw nested ControlModel. */
+  model?: ControlModel | ControlModelBinding
+  /** Workspace returned by useControlWorkspace(). Use for full manual control. */
+  workspace?: UseControlWorkspaceReturn<ControlSchema>
+  /** Compact controls schema. When provided without workspace, the view creates the workspace internally. */
+  controls?: ControlSchema
+  /** Options passed to the internally generated useControlWorkspace() call. */
+  controlOptions?: ControlWorkspaceOptions
+  /** Initial values for the internally generated workspace. Merged over controlOptions.initialValues. */
+  initialValues?: Record<string, unknown>
+  /** External values for the internally generated workspace. Supports default v-model. */
+  modelValue?: Record<string, unknown>
+  /** External values for the internally generated workspace. Supports v-model:values. */
+  values?: Record<string, unknown>
+  /** AppTopBar title. */
+  title?: string
+  /** AppTopBar subtitle. */
+  subtitle?: string
+  /** AppTopBar visual variant. */
+  topBarVariant?: TopBarVariant
+  /** AppTopBar generated navigation style. "pill" uses the preferred AppPillNav surface; "tabs" keeps the legacy prop surface. */
+  navigation?: ControlWorkspaceNavigation
+  /** AppSidebar/AppLayout sidebar width. */
+  sidebarWidth?: string
+  /** Sidebar position in AppLayout. */
+  sidebarPosition?: 'left' | 'right'
+  /** Floating AppLayout style. */
+  floating?: boolean
+  /** Compact AppSidebar density. */
+  dense?: boolean
+  /** Whether AppTopBar should show generated settings. */
+  showSettings?: boolean
+  /** Render FormBuilder actions in the default content. */
+  showFormActions?: boolean
+  /** Runtime FormBuilder enhancements passed to generated forms. */
+  formEnhancements?: FormEnhancements<Record<string, unknown>>
+  /** Optional mapping from workspace values to component props exposed to the default slot. */
+  componentProps?: ControlComponentPropsMap
+  /** Optional named mappings from workspace values to component props exposed to the default slot. */
+  componentPropsById?: ControlComponentPropsByIdMap
+  /** Loading/saving state passed to generated forms. */
+  formLoading?: boolean
+  /** Disabled state passed to generated forms. */
+  formDisabled?: boolean
+  /** Readonly state passed to generated forms. */
+  formReadonly?: boolean
+  /** FormBuilder size in the default content. */
+  formSize?: 'sm' | 'md' | 'lg'
+}
+
+const emit = defineEmits<{
+  /** Emitted when generated workspace values change through FormBuilder, AppSidebar, or AppTopBar settings. */
+  'update:modelValue': [values: Record<string, unknown>]
+  /** Emitted when generated workspace values change through FormBuilder, AppSidebar, or AppTopBar settings. */
+  'update:values': [values: Record<string, unknown>]
+  /** Forwarded from the default FormBuilder when showFormActions is enabled. */
+  submit: [values: Record<string, unknown>]
+  /** Forwarded from the default FormBuilder when showFormActions is enabled. */
+  cancel: []
+}>()
+
+defineSlots<{
+  default?: (props: ControlWorkspaceDefaultSlotProps) => unknown
+  topbar?: (props: ControlWorkspaceTopbarSlotProps) => unknown
+  sidebar?: (props: ControlWorkspaceSidebarSlotProps) => unknown
+}>()
+
+const props = withDefaults(defineProps<Props>(), {
+  model: undefined,
+  workspace: undefined,
+  controls: undefined,
+  controlOptions: () => ({}),
+  initialValues: undefined,
+  modelValue: undefined,
+  values: undefined,
+  title: 'Workspace',
+  subtitle: undefined,
+  topBarVariant: 'card',
+  navigation: 'pill',
+  sidebarWidth: '320px',
+  sidebarPosition: 'left',
+  floating: false,
+  dense: true,
+  showSettings: true,
+  showFormActions: false,
+  formEnhancements: undefined,
+  componentProps: undefined,
+  componentPropsById: undefined,
+  formLoading: false,
+  formDisabled: false,
+  formReadonly: false,
+  formSize: 'md',
+})
+
+const externalValues = computed(() => props.modelValue ?? props.values)
+const resolvedModel = computed<ControlModelBinding | undefined>(() => {
+  if (props.model === undefined) return undefined
+  return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
+})
+const resolvedControls = computed<ControlSchema>(() => props.controls ?? resolvedModel.value?.controls ?? {})
+const baseControlOptions = computed<ControlWorkspaceOptions>(() =>
+  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
+)
+
+const resolvedControlOptions = computed<ControlWorkspaceOptions>(() => {
+  if (props.initialValues === undefined && externalValues.value === undefined) return baseControlOptions.value
+
+  return {
+    ...baseControlOptions.value,
+    initialValues: {
+      ...(baseControlOptions.value.initialValues ?? {}),
+      ...(props.initialValues ?? {}),
+      ...(externalValues.value ?? {}),
+    },
+  }
+})
+
+let generatedWorkspaceScope: EffectScope | undefined
+
+function createGeneratedWorkspace(seedValues: Record<string, unknown> = {}) {
+  generatedWorkspaceScope?.stop()
+  generatedWorkspaceScope = effectScope()
+  return generatedWorkspaceScope.run(() =>
+    useControlWorkspace(resolvedControls.value, {
+      ...resolvedControlOptions.value,
+      initialValues: {
+        ...seedValues,
+        ...(resolvedControlOptions.value.initialValues ?? {}),
+      },
+    })
+  )!
+}
+
+const generatedWorkspace = shallowRef<UseControlWorkspaceReturn<ControlSchema>>(createGeneratedWorkspace())
+const resolvedWorkspace = computed<UseControlWorkspaceReturn<ControlSchema>>(() => props.workspace ?? generatedWorkspace.value)
+const resolvedComponentProps = computed(() =>
+  resolvedWorkspace.value.getComponentProps(props.componentProps ?? resolvedModel.value?.componentProps)
+)
+const resolvedComponentPropsById = computed(() =>
+  resolvedWorkspace.value.getComponentPropsById(props.componentPropsById ?? resolvedModel.value?.componentPropsById)
+)
+const resolvedBindings = computed<ResolvedControlWorkspace['bindings']>(() => ({
+  ...resolvedWorkspace.value.bindings,
+  componentProps: resolvedComponentProps,
+  componentPropsById: resolvedComponentPropsById,
+}))
+
+watch(
+  [() => props.model, () => props.controls, () => props.controlOptions, () => props.initialValues],
+  () => {
+    const previousWorkspace = generatedWorkspace.value
+    const previousActiveView = previousWorkspace.activeView.value
+    generatedWorkspace.value = createGeneratedWorkspace({ ...previousWorkspace.values })
+    generatedWorkspace.value.setActiveView(previousActiveView)
+  },
+  { deep: true },
+)
+
+onScopeDispose(() => generatedWorkspaceScope?.stop())
+
+watch(
+  externalValues,
+  (values) => {
+    if (values === undefined || props.workspace !== undefined) return
+    if (recordsEqual(generatedWorkspace.value.values, values)) return
+    generatedWorkspace.value.setValues(values)
+  },
+  { deep: true },
+)
+
+watch(
+  () => generatedWorkspace.value.values,
+  (values) => {
+    if (props.workspace !== undefined) return
+    const nextValues = { ...values }
+    if (externalValues.value !== undefined && recordsEqual(externalValues.value, nextValues)) return
+    emit('update:modelValue', nextValues)
+    emit('update:values', nextValues)
+  },
+  { deep: true },
+)
+
+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)
+}
+
+function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
+  return 'controlOptions' in model
+}
+</script>
+
+<template>
+  <AppLayout
+    class="mint-control-workspace-view"
+    :sidebar-position="sidebarPosition"
+    :sidebar-width="sidebarWidth"
+    :floating="floating"
+  >
+    <template #topbar>
+      <slot
+        name="topbar"
+        :workspace="resolvedWorkspace"
+        :bindings="resolvedBindings"
+        :top-bar="resolvedWorkspace.topBar"
+      >
+        <AppTopBar
+          :title="title"
+          :subtitle="subtitle"
+          :variant="topBarVariant"
+          :tabs="navigation === 'tabs' ? resolvedWorkspace.topBar.tabs : undefined"
+          :current-tab-id="navigation === 'tabs' ? resolvedWorkspace.topBar.currentTabId : undefined"
+          :pill-nav="navigation === 'pill' ? resolvedWorkspace.pillNav.items : undefined"
+          :current-pill-id="navigation === 'pill' ? resolvedWorkspace.pillNav.currentItemId : undefined"
+          :show-settings="showSettings"
+          :settings-config="resolvedWorkspace.topBarSettings.settingsConfig"
+          @tab-select="resolvedWorkspace.topBar.onTabSelect"
+          @pill-select="resolvedWorkspace.pillNav.onSelect"
+          @settings-values-change="resolvedWorkspace.topBarSettings.onSettingsValuesChange"
+        />
+      </slot>
+    </template>
+
+    <template #sidebar>
+      <slot
+        name="sidebar"
+        :workspace="resolvedWorkspace"
+        :bindings="resolvedBindings"
+        :sidebar="resolvedWorkspace.sidebar"
+      >
+        <AppSidebar
+          v-bind="resolvedWorkspace.sidebar"
+          :floating="false"
+          :dense="dense"
+          :width="sidebarWidth"
+          :form-enhancements="formEnhancements"
+          :form-loading="formLoading"
+          :form-disabled="formDisabled"
+          :form-readonly="formReadonly"
+        />
+      </slot>
+    </template>
+
+    <main class="mint-control-workspace-view__content">
+      <slot
+        :workspace="resolvedWorkspace"
+        :bindings="resolvedBindings"
+        :values="resolvedWorkspace.values"
+        :component-props="resolvedComponentProps"
+        :component-props-by-id="resolvedComponentPropsById"
+      >
+        <FormBuilder
+          v-bind="resolvedWorkspace.form"
+          :enhancements="formEnhancements"
+          :loading="formLoading"
+          :disabled="formDisabled"
+          :readonly="formReadonly"
+          :show-actions="showFormActions"
+          :size="formSize"
+          @submit="emit('submit', $event)"
+          @cancel="emit('cancel')"
+        />
+      </slot>
+    </main>
+  </AppLayout>
+</template>
+
+<style scoped>
+.mint-control-workspace-view {
+  min-width: 0;
+}
+
+.mint-control-workspace-view__content {
+  min-width: 0;
+  padding: 1rem;
+}
+</style>