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

package/src/components/PluginWorkspaceView.story.vue

@@ -0,0 +1,334 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { ExperimentSummary, PillNavItem, SidebarToolSection } from '../types'
+import { defineDoseDesignControlModel } from '../composables/useControlSchema'
+import { ExperimentProvider, mockExperiments } from '../__stories__/experiment-helpers'
+import PluginWorkspaceView from './PluginWorkspaceView.vue'
+import AlertBox from './AlertBox.vue'
+import BaseButton from './BaseButton.vue'
+import BaseSelect from './BaseSelect.vue'
+import DataFrame from './DataFrame.vue'
+import DoseCalculator from './DoseCalculator.vue'
+import FileUploader from './FileUploader.vue'
+import FormField from './FormField.vue'
+import WellPlate from './WellPlate.vue'
+
+type SidebarVariant = 'analysis' | 'default'
+
+const pillNav: PillNavItem[] = [
+  { id: 'data', label: 'Data' },
+  { id: 'analysis', label: 'Analysis' },
+  { id: 'results', label: 'Results' },
+]
+
+const panels: Record<string, SidebarToolSection[]> = {
+  data: [
+    {
+      id: 'import',
+      label: 'Import',
+      subtitle: 'CSV or plate reader output',
+      icon: 'M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2',
+      defaultOpen: true,
+    },
+  ],
+  analysis: [
+    {
+      id: 'parameters',
+      label: 'Parameters',
+      subtitle: 'Threshold and method',
+      icon: 'M12 6v6l4 2',
+      defaultOpen: true,
+    },
+  ],
+  results: [
+    {
+      id: 'display',
+      label: 'Display',
+      subtitle: 'Table density',
+      icon: 'M4 6h16M4 12h16M4 18h16',
+      defaultOpen: true,
+    },
+  ],
+}
+
+const methodOptions = [
+  { label: 'Linear', value: 'linear' },
+  { label: 'Logistic', value: 'logistic' },
+  { label: 'Spline', value: 'spline' },
+]
+
+const doseDesignModel = defineDoseDesignControlModel({
+  selectedWells: ['A1', 'A2', 'B1', 'B2'],
+  includeMolecularWeight: true,
+  componentProps: {
+    plate: {
+      onUpdateModelValue: false,
+    },
+    dose: {
+      onApplyToWells: false,
+    },
+  },
+})
+const doseDesignValues = ref({})
+const shellExperiment = ref<ExperimentSummary | null>(mockExperiments[0] ?? null)
+
+const state = ref({
+  title: 'Plugin Workspace',
+  sidebarTitle: 'Analysis Tools',
+  sidebarSubtitle: 'Current run',
+  sidebarVariant: 'analysis' as SidebarVariant,
+  responsiveSidebar: true,
+  floating: true,
+  dense: true,
+})
+
+function handleExperimentSelect(experiment: ExperimentSummary) {
+  shellExperiment.value = experiment
+}
+
+function handleExperimentDetach() {
+  shellExperiment.value = null
+}
+
+async function saveDoseDesign() {
+  return 'Dose design saved'
+}
+</script>
+
+<template>
+  <Story title="Layout/PluginWorkspaceView">
+    <Variant title="Plugin Shell">
+      <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
+        <PluginWorkspaceView
+          :title="state.title"
+          subtitle="Topbar, sidebar, settings, and content in one component"
+          :pill-nav="pillNav"
+          :panels="panels"
+          :sidebar-title="state.sidebarTitle"
+          :sidebar-subtitle="state.sidebarSubtitle"
+          :sidebar-variant="state.sidebarVariant"
+          :responsive-sidebar="state.responsiveSidebar"
+          :floating="state.floating"
+          :dense="state.dense"
+          show-settings
+          show-theme-toggle
+          :settings-config="{ title: 'Workspace settings', showAppearance: true }"
+        >
+          <template #section-import>
+            <FileUploader accept=".csv,.txt" size="sm" />
+            <AlertBox type="info">
+              Import controls stay colocated with the shell.
+            </AlertBox>
+          </template>
+
+          <template #section-parameters>
+            <FormField label="Method">
+              <BaseSelect
+                :options="methodOptions"
+                model-value="logistic"
+                size="sm"
+              />
+            </FormField>
+            <BaseButton variant="primary" size="sm" full-width>
+              Run analysis
+            </BaseButton>
+          </template>
+
+          <template #default="{ activeView }">
+            <div class="plugin-workspace-story__content">
+              <h2 class="plugin-workspace-story__title">
+                {{ activeView }}
+              </h2>
+              <DataFrame
+                :data="[
+                  { metric: 'Samples', value: 24 },
+                  { metric: 'Compounds', value: 12 },
+                  { metric: 'QC flags', value: 1 },
+                ]"
+                :columns="[
+                  { key: 'metric', label: 'Metric' },
+                  { key: 'value', label: 'Value' },
+                ]"
+                size="sm"
+                max-height="320px"
+              />
+            </div>
+          </template>
+        </PluginWorkspaceView>
+      </div>
+
+      <template #controls>
+        <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.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" />
+      </template>
+    </Variant>
+
+    <Variant title="Route-owned Sidebar">
+      <div style="min-height: 560px; background: var(--bg-secondary, #f8fafc);">
+        <PluginWorkspaceView
+          title="Route Workspace"
+          subtitle="Sidebar target is owned by the active route"
+          :pill-nav="pillNav"
+          current-pill-id="analysis"
+          sidebar-title="Run Tools"
+          sidebar-subtitle="Teleported controls"
+          sidebar-content-id="workspace-route-sidebar"
+          :sidebar-collapsible="true"
+          show-settings
+        >
+          <template #footer>
+            <BaseButton variant="primary" size="sm" full-width>
+              Apply
+            </BaseButton>
+          </template>
+
+          <template #default>
+            <Teleport to="#workspace-route-sidebar">
+              <div class="plugin-workspace-story__route-tools">
+                <FormField label="Method">
+                  <BaseSelect
+                    :options="methodOptions"
+                    model-value="linear"
+                    size="sm"
+                  />
+                </FormField>
+                <AlertBox type="success">
+                  Route content can own this surface.
+                </AlertBox>
+              </div>
+            </Teleport>
+
+            <div class="plugin-workspace-story__content">
+              <h2 class="plugin-workspace-story__title">
+                Analysis
+              </h2>
+              <DataFrame
+                :data="[
+                  { metric: 'Targets', value: 18 },
+                  { metric: 'Batches', value: 4 },
+                ]"
+                :columns="[
+                  { key: 'metric', label: 'Metric' },
+                  { key: 'value', label: 'Value' },
+                ]"
+                size="sm"
+              />
+            </div>
+          </template>
+        </PluginWorkspaceView>
+      </div>
+    </Variant>
+
+    <Variant title="Model-driven Dose Design">
+      <ExperimentProvider>
+        <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
+          <PluginWorkspaceView
+            v-model="doseDesignValues"
+            :model="doseDesignModel"
+            title="Dose Design"
+            subtitle="Experiment-aware workspace generated from one model"
+            sidebar-title="Design Controls"
+            sidebar-subtitle="Plate and dose setup"
+            experiment-shell
+            :experiment="shellExperiment"
+            :experiment-save="saveDoseDesign"
+            show-settings
+            show-theme-toggle
+            :settings-config="{ title: 'Workspace settings', showAppearance: true }"
+            @experiment-select="handleExperimentSelect"
+            @experiment-detach="handleExperimentDetach"
+          >
+            <template #default="{ componentBindingsById }">
+              <div class="plugin-workspace-story__dose-grid">
+                <section class="plugin-workspace-story__dose-panel plugin-workspace-story__dose-panel--plate">
+                  <WellPlate
+                    v-bind="componentBindingsById.plate.props"
+                    size="fill"
+                    selection-mode="multiple"
+                    readonly
+                    show-legend
+                    :heatmap="{ enabled: true, min: 0, max: 100, colorScale: 'viridis' }"
+                  />
+                </section>
+
+                <section class="plugin-workspace-story__dose-panel plugin-workspace-story__dose-panel--calculator">
+                  <DoseCalculator v-bind="componentBindingsById.dose.props" />
+                </section>
+              </div>
+            </template>
+          </PluginWorkspaceView>
+        </div>
+      </ExperimentProvider>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.plugin-workspace-story__content {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+  padding: 1rem;
+}
+
+.plugin-workspace-story__title {
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.plugin-workspace-story__route-tools {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.plugin-workspace-story__dose-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.65fr);
+  gap: 1rem;
+  align-items: start;
+  min-width: 0;
+  padding: 1rem;
+}
+
+.plugin-workspace-story__dose-panel {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md, 0.5rem);
+  background: var(--bg-primary);
+}
+
+.plugin-workspace-story__dose-panel--plate {
+  min-height: 32rem;
+  overflow-x: auto;
+}
+
+.plugin-workspace-story__dose-panel--calculator {
+  max-width: 24rem;
+}
+
+@media (max-width: 960px) {
+  .plugin-workspace-story__dose-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .plugin-workspace-story__dose-panel--calculator {
+    max-width: none;
+  }
+}
+</style>