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

package/src/components/ControlWorkspaceView.story.vue

@@ -1,347 +0,0 @@
-<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'
-
-type SidebarVariant = 'analysis' | 'default'
-
-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',
-    sidebarTitle: 'Analysis Controls',
-    sidebarSubtitle: 'Current run',
-    sidebarPosition: 'left',
-    sidebarVariant: 'analysis' as SidebarVariant,
-    responsiveSidebar: true,
-    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-title="state.sidebarTitle"
-            :sidebar-subtitle="state.sidebarSubtitle"
-            :sidebar-position="state.sidebarPosition"
-            :sidebar-variant="state.sidebarVariant"
-            :responsive-sidebar="state.responsiveSidebar"
-            :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" />
-        <HstText v-model="state.sidebarTitle" title="Sidebar title" />
-        <HstText v-model="state.sidebarSubtitle" title="Sidebar subtitle" />
-        <HstSelect
-          v-model="state.sidebarPosition"
-          title="Sidebar"
-          :options="[
-            { label: 'Left', value: 'left' },
-            { label: 'Right', value: 'right' },
-          ]"
-        />
-        <HstSelect
-          v-model="state.sidebarVariant"
-          title="Sidebar variant"
-          :options="[
-            { label: 'Analysis', value: 'analysis' },
-            { label: 'Default', value: 'default' },
-          ]"
-        />
-        <HstCheckbox v-model="state.responsiveSidebar" title="Responsive sidebar" />
-        <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="{ componentBindingsById }"
-        >
-          <div class="dose-design-demo">
-            <WellPlate
-              v-bind="componentBindingsById.plate.props"
-              size="fill"
-              selection-mode="multiple"
-              :heatmap="{ enabled: true, min: 0, max: 100, colorScale: 'viridis' }"
-            />
-            <DoseCalculator v-bind="componentBindingsById.dose.props" />
-          </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>