@morscherlab/mint-sdk 1.4.0-beta.8 → 1.4.0

package/src/components/AppSidebar.story.vue

@@ -36,16 +36,12 @@ const sequencePanels: Record<string, SidebarToolSection[]> = {
       label: 'Import Layout',
       subtitle: 'Upload from Excel',
       icon: icons.upload,
-      iconColor: '#3b82f6',
-      iconBg: '#dbeafe',
     },
     {
       id: 'naming',
       label: 'Experiment & Naming',
       subtitle: 'exp001_260210_XP_M...',
       icon: icons.fileText,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
       showToggle: true,
       badge: 'on',
       badgeTone: 'success',
@@ -55,8 +51,6 @@ const sequencePanels: Record<string, SidebarToolSection[]> = {
       label: 'Randomize Samples',
       subtitle: 'Sequential order',
       icon: icons.shuffle,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
       showToggle: true,
       badge: 3,
       badgeTone: 'cta',
@@ -70,16 +64,12 @@ const sequencePanels: Record<string, SidebarToolSection[]> = {
       label: 'Acquisition',
       subtitle: 'NEG, VIAL',
       icon: icons.zap,
-      iconColor: '#ef4444',
-      iconBg: '#fee2e2',
     },
     {
       id: 'method',
       label: 'Method & Path',
       subtitle: 'Select method',
       icon: icons.route,
-      iconColor: '#8b5cf6',
-      iconBg: '#ede9fe',
       defaultOpen: false,
     },
   ],
@@ -93,16 +83,12 @@ const simplePanels: Record<string, SidebarToolSection[]> = {
       label: 'Parameters',
       subtitle: 'Analysis settings',
       icon: ['M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z', 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'],
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
     },
     {
       id: 'filters',
       label: 'Filters',
       subtitle: 'Refine results',
       icon: ['M22 3H2l8 9.46V19l4 2v-8.54L22 3'],
-      iconColor: '#0ea5e9',
-      iconBg: '#e0f2fe',
       defaultOpen: false,
     },
   ],
@@ -112,16 +98,12 @@ const simplePanels: Record<string, SidebarToolSection[]> = {
       label: 'Display Options',
       subtitle: 'Chart and table settings',
       icon: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'],
-      iconColor: '#8b5cf6',
-      iconBg: '#ede9fe',
     },
     {
       id: 'export',
       label: 'Export',
       subtitle: 'Download data',
       icon: ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'M7 10l5 5 5-5', 'M12 15V3'],
-      iconColor: '#10b981',
-      iconBg: '#d1fae5',
       defaultOpen: false,
     },
   ],
@@ -163,8 +145,6 @@ const schemaControls = defineControls({
     view: 'analysis',
     sidebar: {
       icon: icons.settings,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
     },
   },
   method: {
@@ -180,16 +160,12 @@ const schemaControls = defineControls({
     default: true,
     hint: 'Keep flagged points visible',
     icon: icons.eye,
-    iconColor: '#0ea5e9',
-    iconBg: '#e0f2fe',
     section: 'display',
     sectionLabel: 'Display',
     sectionSubtitle: 'Result filters',
     view: 'analysis',
     sidebar: {
       icon: icons.zap,
-      iconColor: '#0ea5e9',
-      iconBg: '#e0f2fe',
       defaultOpen: false,
     },
   },
@@ -215,8 +191,6 @@ const modelDrivenSidebarModel = defineControlModel({
           description: 'Result cleanup',
           sidebar: {
             icon: icons.zap,
-            iconColor: '#0ea5e9',
-            iconBg: '#e0f2fe',
             defaultOpen: false,
           },
           controls: {
@@ -225,8 +199,6 @@ const modelDrivenSidebarModel = defineControlModel({
               default: true,
               hint: 'Keep flagged points visible',
               icon: icons.eye,
-              iconColor: '#0ea5e9',
-              iconBg: '#e0f2fe',
             },
             minPeakArea: { type: 'number', default: 1000, min: 0 },
           },

package/src/components/AppTopBar.onboarding.story.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { defineComponent, h, ref } from 'vue'
+import AppTopBar from './AppTopBar.vue'
+import BaseButton from './BaseButton.vue'
+import { defineOnboarding, provideOnboarding, useOnboarding } from '../composables/useOnboarding'
+import type { PillNavItem } from '../types'
+
+const pills: PillNavItem[] = [
+  { id: 'home', label: 'Home' },
+  { id: 'experiments', label: 'Experiments' },
+  { id: 'instruments', label: 'Instruments' },
+]
+
+const onboarding = defineOnboarding({
+  tours: [
+    {
+      id: 'intro',
+      title: 'The top bar',
+      steps: [
+        { id: 'pages', anchor: 'topbar-pills', title: 'Move between pages', body: 'Home, Experiments and Instruments are one click away on every page.' },
+        { id: 'new', anchor: 'story-new', title: 'Create an experiment', body: 'Click New experiment to go on.', placement: 'bottom-start', advanceOn: 'click' },
+        { id: 'help', anchor: 'topbar-help', title: 'Help', body: 'Open the checklist, play a tour again, or see what is new.', placement: 'bottom-end' },
+      ],
+    },
+  ],
+  checklist: [
+    { id: 'create', title: 'Create an experiment', action: { label: 'Open', run: () => {} } },
+    { id: 'project', title: 'Create a project', action: { label: 'Open', run: () => {} } },
+    { id: 'theme', title: 'Pick a theme' },
+  ],
+  whatsNew: [
+    { id: 'settings', anchor: 'topbar-settings', title: 'Palettes in Settings', body: 'Pick an accent color in Settings → Appearance.', placement: 'bottom-end' },
+  ],
+})
+
+// The stories are returning users with no state yet, so the news shows too.
+const OnboardingProvider = defineComponent({
+  props: { appId: { type: String, required: true }, news: Boolean },
+  setup(props, { slots }) {
+    const key = `mint.onboarding.${props.appId}.local`
+    if (props.news && localStorage.getItem(key) === null) localStorage.setItem(key, '["task:theme"]')
+    provideOnboarding(onboarding, { appId: props.appId, userId: 'local' })
+    return () => slots.default?.()
+  },
+})
+
+const PageBody = defineComponent({
+  setup() {
+    const state = useOnboarding()
+    return () => h('div', { style: 'padding: 1.5rem; display: flex; gap: 0.5rem' }, [
+      h(BaseButton, { 'data-onboarding': 'story-new', onClick: () => state?.complete('create') }, () => 'New experiment'),
+      h(BaseButton, { variant: 'secondary', onClick: () => { localStorage.clear(); location.reload() } }, () => 'Reset onboarding'),
+    ])
+  },
+})
+
+const pill = ref('home')
+</script>
+
+<template>
+  <Story title="Layout/AppTopBar/Onboarding" :layout="{ type: 'single', iframe: true }">
+    <Variant title="Tour, checklist and news">
+      <OnboardingProvider app-id="story-onboarding" news>
+        <AppTopBar v-model:pill="pill" :spec="{ pills, settings: { tabs: [] }, standaloneLabel: false }" title="MINT" />
+        <PageBody />
+      </OnboardingProvider>
+    </Variant>
+  </Story>
+</template>

package/src/components/AppTopBar.story.vue

@@ -1,14 +1,29 @@
 <script setup lang="ts">
 import AppTopBar from './AppTopBar.vue'
 import Avatar from './Avatar.vue'
+import PluginIcon from './PluginIcon.vue'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
+import { providePluginIdentity } from '../composables/pluginIdentity'
+import { ref, type App } from 'vue'
 import type {
   TopBarVariant,
   PillNavItem,
   PageSelectorItem,
   PluginInfo,
+  TopBarJob,
 } from '../types'
 
+const runSlotJobs: { label: string; job: TopBarJob | null }[] = [
+  { label: 'Idle', job: null },
+  { label: 'Running', job: { status: 'running', label: 'Extracting', percent: 40 } },
+  { label: 'Needs input', job: { status: 'awaiting_input', label: 'Decoding', percent: 62 } },
+  { label: 'Saved', job: { status: 'completed', label: 'Saved to EXP-0142' } },
+  { label: 'Failed', job: { status: 'failed', label: '1 failed' } },
+]
+
+// An index, not the job object: Histoire merges object state across updates.
+const liveRow = ref(0)
+
 const variants: TopBarVariant[] = ['card', 'default']
 
 const samplePillNav: PillNavItem[] = [
@@ -40,10 +55,12 @@ const samplePageSelector: PageSelectorItem[] = [
   { id: 'admin', label: 'Admin' },
 ]
 
+// The menu shows each hint as a second line; a page without one stays a single line.
 const samplePluginPages: PageSelectorItem[] = [
-  { id: 'peaks', label: 'Peak integration' },
-  { id: 'calibration', label: 'Calibration' },
-  { id: 'report', label: 'Report' },
+  { id: 'peaks', label: 'Peak integration', hint: 'Integrate peaks and review the fits per sample' },
+  { id: 'calibration', label: 'Calibration', hint: 'Fit standard curves and check their residuals' },
+  { id: 'report', label: 'Report', hint: 'Export concentrations for the experiment' },
+  { id: 'settings', label: 'Settings' },
 ]
 
 const samplePlugin: PluginInfo = {
@@ -59,6 +76,25 @@ const samplePlugin: PluginInfo = {
   settings_api: 'platform',
 }
 
+const samplePluginWithSubtitle: PluginInfo = {
+  ...samplePlugin,
+  id: 'ms-planner',
+  name: 'ms-planner',
+  display_name: 'MS Planner',
+  subtitle: 'Experiment Scheduler',
+  icon: 'calendar',
+  route_prefix: '/ms-planner',
+  api_prefix: '/api/ms-planner',
+}
+
+// The seed is module state: clear it when the variant unmounts.
+function seedIdentity({ app }: { app: App }) {
+  providePluginIdentity({
+    plugin: { name: 'ms-planner', displayName: 'MS Planner', subtitle: 'Experiment Scheduler', icon: 'calendar' },
+  })
+  app.onUnmount(() => providePluginIdentity({ plugin: { name: '' } }))
+}
+
 </script>
 
 <template>
@@ -82,18 +118,7 @@ const samplePlugin: PluginInfo = {
           pill="experiments"
         >
           <template #icon>
-            <div
-              style="width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);"
-            >
-              <svg
-                style="width: 1.25rem; height: 1.25rem; color: white;"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-              </svg>
-            </div>
+            <PluginIcon size="topbar" />
           </template>
         </AppTopBar>
       </div>
@@ -136,6 +161,47 @@ const samplePlugin: PluginInfo = {
       </div>
     </Variant>
 
+    <Variant title="Run slot · Experiment and job">
+      <!-- The plugin picks the viewer's own job; the bar joins it to the experiment chip. Like LEAF Extract: no Save. -->
+      <div style="padding: 2rem; background: var(--bg-primary); display: grid; gap: 0.75rem;">
+        <ExperimentProvider :plugin="samplePlugin" :save="false">
+          <AppTopBar
+            v-for="row in runSlotJobs"
+            :key="row.label"
+            :spec="{ themeToggle: true, homePath: '' }"
+            :page-selector="samplePluginPages"
+            current-page-selector-id="peaks"
+            :job="row.job"
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Run slot · Animation">
+      <div style="padding: 2rem; background: var(--bg-primary); display: grid; gap: 0.75rem;">
+        <div style="display: flex; gap: 0.5rem;">
+          <button
+            v-for="(row, index) in runSlotJobs"
+            :key="row.label"
+            type="button"
+            data-run-slot-state
+            style="padding: 0.25rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); cursor: pointer;"
+            @click="liveRow = index"
+          >
+            {{ row.label }}
+          </button>
+        </div>
+        <ExperimentProvider :plugin="samplePlugin" :save="false">
+          <AppTopBar
+            :spec="{ themeToggle: true, homePath: '' }"
+            :page-selector="samplePluginPages"
+            current-page-selector-id="peaks"
+            :job="runSlotJobs[liveRow].job"
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
     <Variant title="Refresh · Admin">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar
@@ -223,6 +289,20 @@ const samplePlugin: PluginInfo = {
       </div>
     </Variant>
 
+    <Variant title="Identity · Integrated with subtitle">
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+        <ExperimentProvider :plugin="samplePluginWithSubtitle">
+          <AppTopBar :spec="{ pills: samplePillNav, homePath: '' }" pill="workspace" />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Identity · Standalone seeded" :setup-app="seedIdentity">
+      <div style="padding: 2rem;">
+        <AppTopBar :spec="{ pills: samplePillNav, homePath: '' }" pill="workspace" />
+      </div>
+    </Variant>
+
     <Variant title="Navigation · Page selector">
       <div style="padding: 2rem;">
         <AppTopBar
@@ -244,6 +324,16 @@ const samplePlugin: PluginInfo = {
       </div>
     </Variant>
 
+    <Variant title="Navigation · Pill nav overflow (More)">
+      <div style="padding: 2rem; min-height: 14rem;">
+        <AppTopBar
+          :spec="{ pills: ['Queue', 'Calendar', 'Utilization', 'Instruments', 'Reports', 'Settings', 'Logs'], homePath: '' }"
+          title="MS Planner"
+          pill="Reports"
+        />
+      </div>
+    </Variant>
+
     <Variant title="Navigation · Pill nav with dropdown and dot">
       <div style="padding: 2rem;">
         <AppTopBar