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

package/src/components/ControlWorkspaceView.vue

@@ -1,381 +0,0 @@
-<script setup lang="ts">
-/**
- * Complete control workspace component that turns a simple controls data model into AppTopBar, AppSidebar, and FormBuilder forms.
- *
- * @example Recommended
- * ```vue
- * <ControlWorkspaceView v-model="values" :model="workspaceModel" title="Analysis" />
- * ```
- */
-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 {
-  ControlComponentBindingsConfig,
-  ControlComponentPropsByIdMap,
-  ControlComponentPropsMap,
-  ControlModel,
-  ControlModelBinding,
-  ControlSchema,
-  ControlWorkspaceOptions,
-  UseControlWorkspaceReturn,
-} from '../composables/useControlSchema'
-import { mergeControlWorkspaceOptions, resolveControlModel, 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 ControlWorkspaceSidebarVariant = 'default' | 'analysis'
-type ResolvedControlWorkspace = UseControlWorkspaceReturn<ControlSchema>
-
-interface ControlWorkspaceDefaultSlotProps {
-  workspace: ResolvedControlWorkspace
-  bindings: ResolvedControlWorkspace['bindings']
-  values: ResolvedControlWorkspace['values']
-  componentBindings: ReturnType<ResolvedControlWorkspace['getComponentBindings']>
-  componentBindingsById: ReturnType<ResolvedControlWorkspace['getComponentBindingsById']>
-  componentProps: ReturnType<ResolvedControlWorkspace['getComponentProps']>
-  componentPropsById: ReturnType<ResolvedControlWorkspace['getComponentPropsById']>
-}
-
-interface ControlWorkspaceTopbarSlotProps {
-  workspace: ResolvedControlWorkspace
-  bindings: ResolvedControlWorkspace['bindings']
-  topBar: ResolvedControlWorkspace['bindings']['topBar']['value']
-}
-
-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
-  /** AppSidebar/AppLayout sidebar width. */
-  sidebarWidth?: string
-  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar design language. */
-  sidebarVariant?: ControlWorkspaceSidebarVariant
-  /** Convert the sidebar into an SDK-owned mobile overlay below the AppLayout breakpoint. */
-  responsiveSidebar?: boolean
-  /** Sidebar position in AppLayout. */
-  sidebarPosition?: 'left' | 'right'
-  /** Optional AppSidebar chrome title for LEAF-style plugin workbenches. */
-  sidebarTitle?: string
-  /** Optional AppSidebar chrome subtitle for active experiment/run context. */
-  sidebarSubtitle?: string
-  /** Optional compact badge/count rendered in the AppSidebar chrome header. */
-  sidebarBadge?: string | number
-  /** 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 SDK component bindings exposed to the default slot with resolved props. */
-  componentBindings?: ControlComponentBindingsConfig
-  /** 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',
-  sidebarWidth: '320px',
-  sidebarVariant: 'analysis',
-  responsiveSidebar: true,
-  sidebarPosition: 'left',
-  sidebarTitle: undefined,
-  sidebarSubtitle: undefined,
-  sidebarBadge: undefined,
-  floating: false,
-  dense: true,
-  showSettings: true,
-  showFormActions: false,
-  formEnhancements: undefined,
-  componentBindings: 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>(() => {
-  return resolveControlModel(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 resolvedComponentBindings = computed(() =>
-  resolvedWorkspace.value.getComponentBindings(props.componentBindings ?? resolvedModel.value?.componentBindings)
-)
-const resolvedComponentBindingsById = computed(() =>
-  resolvedWorkspace.value.getComponentBindingsById(props.componentBindings ?? resolvedModel.value?.componentBindings)
-)
-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,
-  componentBindings: resolvedComponentBindings,
-  componentBindingsById: resolvedComponentBindingsById,
-  componentProps: resolvedComponentProps,
-  componentPropsById: resolvedComponentPropsById,
-}))
-const resolvedTopBarSlot = computed(() => resolvedWorkspace.value.bindings.topBar.value)
-
-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)
-}
-
-</script>
-
-<template>
-  <AppLayout
-    class="mint-control-workspace-view"
-    :sidebar-position="sidebarPosition"
-    :sidebar-width="sidebarWidth"
-    :responsive-sidebar="responsiveSidebar"
-    :floating="floating"
-  >
-    <template #topbar>
-      <slot
-        name="topbar"
-        :workspace="resolvedWorkspace"
-        :bindings="resolvedBindings"
-        :top-bar="resolvedTopBarSlot"
-      >
-        <AppTopBar
-          :title="title"
-          :subtitle="subtitle"
-          :variant="topBarVariant"
-          :pill-nav="resolvedWorkspace.pillNav.items"
-          :current-pill-id="resolvedWorkspace.pillNav.currentItemId"
-          :show-settings="showSettings"
-          :settings-config="resolvedWorkspace.topBarSettings.settingsConfig"
-          @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"
-          :title="sidebarTitle"
-          :subtitle="sidebarSubtitle"
-          :badge="sidebarBadge"
-          :variant="sidebarVariant"
-          :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-bindings="resolvedComponentBindings"
-        :component-bindings-by-id="resolvedComponentBindingsById"
-        :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>

package/src/components/DataFrame.story.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import DataFrame from './DataFrame.vue'
-import type { DataFrameColumn, PaginationState } from '../types'
-
-const columns: DataFrameColumn[] = [
-  { key: 'id', label: 'ID', sortable: true, width: 60, align: 'center' },
-  { key: 'compound', label: 'Compound', sortable: true },
-  { key: 'concentration', label: 'Conc. (uM)', sortable: true, align: 'right' },
-  { key: 'response', label: 'Response (%)', sortable: true, align: 'right' },
-  { key: 'well', label: 'Well', align: 'center' },
-  { key: 'status', label: 'Status' },
-]
-
-const data = [
-  { id: 1, compound: 'MINT-2847', concentration: 10.0, response: 95.2, well: 'A1', status: 'Pass' },
-  { id: 2, compound: 'MINT-2847', concentration: 3.33, response: 82.1, well: 'A2', status: 'Pass' },
-  { id: 3, compound: 'MINT-2847', concentration: 1.11, response: 54.7, well: 'A3', status: 'Pass' },
-  { id: 4, compound: 'MINT-2847', concentration: 0.37, response: 23.4, well: 'A4', status: 'Pass' },
-  { id: 5, compound: 'MINT-2847', concentration: 0.12, response: 8.9, well: 'A5', status: 'Pass' },
-  { id: 6, compound: 'MINT-3192', concentration: 10.0, response: 88.7, well: 'B1', status: 'Pass' },
-  { id: 7, compound: 'MINT-3192', concentration: 3.33, response: 71.3, well: 'B2', status: 'Pass' },
-  { id: 8, compound: 'MINT-3192', concentration: 1.11, response: 45.2, well: 'B3', status: 'Flagged' },
-  { id: 9, compound: 'MINT-3192', concentration: 0.37, response: 18.6, well: 'B4', status: 'Pass' },
-  { id: 10, compound: 'MINT-3192', concentration: 0.12, response: 5.1, well: 'B5', status: 'Pass' },
-  { id: 11, compound: 'Vehicle', concentration: 0, response: 2.3, well: 'C1', status: 'Pass' },
-  { id: 12, compound: 'Vehicle', concentration: 0, response: 1.8, well: 'C2', status: 'Pass' },
-]
-
-const selectedKeys = ref<(string | number)[]>([])
-const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.length })
-</script>
-
-<template>
-  <Story title="Data Display/DataFrame">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
-          <DataFrame
-            :data="data"
-            :columns="columns"
-            row-key="id"
-            :striped="state.striped"
-            :bordered="state.bordered"
-            :sortable="state.sortable"
-            :searchable="state.searchable"
-            :selectable="state.selectable"
-            :loading="state.loading"
-            :size="state.size"
-            :sticky-header="state.stickyHeader"
-            :selected-keys="selectedKeys"
-            @update:selected-keys="selectedKeys = $event"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="['sm', 'md', 'lg'].map(s => ({ label: s, value: s }))"
-        />
-        <HstCheckbox v-model="state.striped" title="Striped" />
-        <HstCheckbox v-model="state.bordered" title="Bordered" />
-        <HstCheckbox v-model="state.sortable" title="Sortable" />
-        <HstCheckbox v-model="state.searchable" title="Searchable" />
-        <HstCheckbox v-model="state.selectable" title="Selectable" />
-        <HstCheckbox v-model="state.stickyHeader" title="Sticky Header" />
-        <HstCheckbox v-model="state.loading" title="Loading" />
-      </template>
-    </Variant>
-
-    <Variant title="Sortable with Search">
-      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
-        <DataFrame
-          :data="data"
-          :columns="columns"
-          row-key="id"
-          sortable
-          searchable
-          search-placeholder="Search compounds, wells..."
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With Pagination">
-      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
-        <DataFrame
-          :data="data"
-          :columns="columns"
-          row-key="id"
-          sortable
-          :pagination="pagination"
-          @update:pagination="pagination = $event"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Selectable Rows">
-      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
-        <DataFrame
-          :data="data"
-          :columns="columns"
-          row-key="id"
-          selectable
-          :selected-keys="selectedKeys"
-          @update:selected-keys="selectedKeys = $event"
-        />
-        <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-          Selected IDs: {{ selectedKeys.length ? selectedKeys.join(', ') : 'none' }}
-        </p>
-      </div>
-    </Variant>
-
-    <Variant title="Loading State">
-      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
-        <DataFrame
-          :data="[]"
-          :columns="columns"
-          loading
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Empty State">
-      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
-        <DataFrame
-          :data="[]"
-          :columns="columns"
-          empty-text="No experiment results found. Run an analysis to populate this table."
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Compact (sm)">
-      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
-        <DataFrame
-          :data="data"
-          :columns="columns"
-          row-key="id"
-          size="sm"
-          sortable
-          bordered
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>