@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.20

package/src/components/PlotlyChart.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+/**
+ * Render native Plotly data with MINT loading, empty, theme, and error states.
+ *
+ * Plotly is loaded only when the component is mounted, so importing the SDK does
+ * not add Plotly to the application's initial bundle.
+ *
+ * @example
+ * ```vue
+ * <PlotlyChart
+ *   title="QC overview"
+ *   :data="traces"
+ *   :layout="{ xaxis: { title: { text: 'Sample' } } }"
+ *   :config="{ toImageButtonOptions: { filename: 'qc-overview' } }"
+ * />
+ * ```
+ */
+import type * as PlotlyType from 'plotly.js'
+import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
+
+import ChartContainer from './ChartContainer.vue'
+
+interface Props {
+  data: PlotlyType.Data[]
+  layout?: Partial<PlotlyType.Layout>
+  config?: Partial<PlotlyType.Config>
+  title?: string
+  description?: string
+  loading?: boolean
+  empty?: boolean
+  emptyMessage?: string
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: () => ({}),
+  config: () => ({}),
+  loading: false,
+  empty: false,
+  emptyMessage: 'No data available',
+  ariaLabel: 'Interactive Plotly chart',
+})
+
+const chartElement = ref<HTMLDivElement | null>(null)
+const failed = ref(false)
+let plotly: typeof PlotlyType | null = null
+let resizeObserver: ResizeObserver | null = null
+let themeObserver: MutationObserver | null = null
+let renderedElement: HTMLDivElement | null = null
+let rendering = false
+let disposed = false
+let revision = 0
+
+async function loadPlotly(): Promise<typeof PlotlyType> {
+  const module = await import('plotly.js-dist-min')
+  return ('default' in module ? module.default : module) as unknown as typeof PlotlyType
+}
+
+function cssValue(name: string, fallback: string): string {
+  const value = getComputedStyle(chartElement.value ?? document.documentElement).getPropertyValue(name).trim()
+  return value || getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback
+}
+
+// Unwrap nested Vue proxies while copying Plotly's mutable input tree. Keep
+// native dates/typed arrays and callbacks instead of round-tripping through JSON.
+function clonePlotlyInput<T>(value: T): T {
+  const raw = toRaw(value)
+  if (Array.isArray(raw)) return raw.map(clonePlotlyInput) as T
+  if (raw !== null && typeof raw === 'object') {
+    if (Object.getPrototypeOf(raw) === Object.prototype) {
+      return Object.fromEntries(Object.entries(raw).map(([key, item]) => [key, clonePlotlyInput(item)])) as T
+    }
+    return structuredClone(raw)
+  }
+  return raw
+}
+
+function themedLayout(): Partial<PlotlyType.Layout> {
+  const textColor = cssValue('--text-primary', '#1E293B')
+  const gridColor = cssValue('--border-color', '#E5E7EB')
+  const layout = clonePlotlyInput(props.layout)
+  return {
+    autosize: true,
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
+    ...layout,
+    font: { color: textColor, family: cssValue('--font-sans', 'Arial, sans-serif'), ...layout.font },
+    xaxis: { gridcolor: gridColor, ...layout.xaxis },
+    yaxis: { gridcolor: gridColor, ...layout.yaxis },
+  }
+}
+
+function purgeChart(): void {
+  resizeObserver?.disconnect()
+  if (renderedElement) plotly?.purge(renderedElement)
+  renderedElement = null
+}
+
+async function renderChart(): Promise<void> {
+  revision++
+  if (rendering || disposed || props.loading || props.empty) return
+  rendering = true
+  try {
+    while (!disposed && !props.loading && !props.empty) {
+      const currentRevision = revision
+      failed.value = false
+      await nextTick()
+      if (disposed || props.loading || props.empty) break
+      try {
+        plotly ??= await loadPlotly()
+        if (disposed || props.loading || props.empty) break
+        if (currentRevision !== revision) continue
+        const element = chartElement.value
+        if (!element) break
+        renderedElement = element
+        // Plotly mutates traces and nested layout fields; keep caller-owned values intact.
+        await plotly.react(
+          element,
+          clonePlotlyInput(props.data),
+          themedLayout(),
+          { responsive: true, displaylogo: false, ...props.config },
+        )
+        if (disposed || props.loading || props.empty || element !== chartElement.value) {
+          purgeChart()
+        } else {
+          resizeObserver?.observe(element)
+        }
+      } catch {
+        purgeChart()
+        if (!disposed && currentRevision === revision) failed.value = true
+      }
+      if (currentRevision === revision) break
+    }
+  } finally {
+    rendering = false
+    if (disposed || props.loading || props.empty) purgeChart()
+  }
+}
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => {
+      if (rendering || !plotly || !renderedElement) return
+      // A tab can become hidden or unmount before Plotly's async resize finishes.
+      void Promise.resolve(plotly.Plots.resize(renderedElement)).catch(() => {})
+    })
+  }
+
+  if (typeof MutationObserver !== 'undefined') {
+    themeObserver = new MutationObserver(() => void renderChart())
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'style'],
+    })
+  }
+  void renderChart()
+})
+
+watch(
+  [() => props.data, () => props.layout, () => props.config, () => props.loading, () => props.empty],
+  () => {
+    if (props.loading || props.empty) {
+      resizeObserver?.disconnect()
+      if (!rendering) purgeChart()
+    }
+    void renderChart()
+  },
+)
+
+onBeforeUnmount(() => {
+  disposed = true
+  resizeObserver?.disconnect()
+  themeObserver?.disconnect()
+  // An in-flight react must finish before its resources can be purged completely.
+  if (!rendering) purgeChart()
+})
+</script>
+
+<template>
+  <ChartContainer
+    :title="title"
+    :description="description"
+    :loading="loading"
+    :empty="empty"
+    :empty-message="emptyMessage"
+  >
+    <template v-if="$slots.toolbar" #toolbar>
+      <slot name="toolbar" />
+    </template>
+    <template v-if="$slots.empty" #empty>
+      <slot name="empty" />
+    </template>
+
+    <template v-if="failed">
+      <slot name="error">
+        <div class="mint-plotly-chart__error">
+          <p role="alert">Unable to display this chart.</p>
+        </div>
+      </slot>
+    </template>
+    <div
+      ref="chartElement"
+      v-show="!failed"
+      class="mint-plotly-chart__plot"
+      role="group"
+      :aria-label="ariaLabel"
+    />
+
+    <template v-if="$slots.legend" #legend>
+      <slot name="legend" />
+    </template>
+  </ChartContainer>
+</template>
+
+<style scoped>
+.mint-plotly-chart__plot {
+  width: 100%;
+  min-height: 24rem;
+}
+
+.mint-plotly-chart__error {
+  margin: 0;
+  padding: 1rem;
+  border: 1px solid var(--mint-error-border);
+  border-radius: 0.75rem;
+  background: var(--mint-error-bg);
+  color: var(--mint-error-hover);
+}
+
+.mint-plotly-chart__error :deep(p) {
+  margin: 0;
+}
+</style>

package/src/components/PluginIcon.vue

@@ -152,7 +152,3 @@ const rootStyle = computed(() =>
     />
   </span>
 </template>
-
-<style>
-@import '../styles/components/plugin-icon.css';
-</style>

package/src/components/PluginWorkspaceView.props.ts

@@ -1,8 +1,13 @@
 import type {
   AccountMenuItem,
+  ExperimentSummary,
+  PageSelectorItem,
   PageSelectorItemInput,
+  PillNavItem,
   PillNavItemInput,
+  PillNavOption,
   PluginSwitcherInfo,
+  PluginSwitcherPlugin,
   SidebarToolSection,
   TopBarSettingsConfig,
   TopBarVariant,
@@ -156,6 +161,39 @@ export interface PluginWorkspaceViewProps {
   sidebarCloseLabel?: string
 }
 
+/**
+ * Event map for PluginWorkspaceView, shared with the {@link usePluginWorkspace} composable
+ * so its internal pieces can emit through the exact same typed contract as the public component.
+ */
+export interface PluginWorkspaceViewEmits {
+  'update:activeView': [value: string]
+  'page-selector-select': [page: PageSelectorItem]
+  'pill-select': [item: PillNavItem]
+  'pill-option-select': [option: PillNavOption, item: PillNavItem]
+  'plugin-switcher-select': [plugin: PluginSwitcherPlugin]
+  'plugin-switcher-install': []
+  'account-menu-select': [item: AccountMenuItem]
+  'sign-out': []
+  'notifications-click': []
+  'settings-values-change': [data: Record<string, unknown>]
+  'admin-click': []
+  'experiment-select': [experiment: ExperimentSummary]
+  'experiment-detach': []
+  'update:modelValue': [values: Record<string, unknown>]
+  'update:values': [values: Record<string, unknown>]
+  'update:sidebarCollapsed': [value: boolean]
+  'update:toggle': [sectionId: string, value: boolean]
+  'section-action': [sectionId: string, actionId: string]
+  'form-submit': [sectionId: string, values: Record<string, unknown>]
+  'form-cancel': [sectionId: string]
+}
+
+/** Typed `emit` function shape produced by `defineEmits<PluginWorkspaceViewEmits>()`. */
+export type PluginWorkspaceViewEmit = <K extends keyof PluginWorkspaceViewEmits>(
+  event: K,
+  ...args: PluginWorkspaceViewEmits[K]
+) => void
+
 export interface PluginWorkspaceSlotProps {
   activeView: string
   setActiveView: (viewId: string) => void

package/src/components/PluginWorkspaceView.vue

@@ -12,26 +12,19 @@
 import { computed, useSlots } from 'vue'
 import type {
   AccountMenuItem,
-  ExperimentSummary,
-  PageSelectorItem,
   PillNavItem,
   PluginSwitcherPlugin,
   PillNavOption,
 } from '../types'
 import { useAppExperiment } from '../composables/useAppExperiment'
-import AppLayout from './AppLayout.vue'
-import AppSidebar from './AppSidebar.vue'
-import AppTopBar from './AppTopBar.vue'
-import { usePluginWorkspaceControls } from './PluginWorkspaceView.controls'
-import { usePluginWorkspaceNavigation } from './PluginWorkspaceView.navigation'
-import {
-  getPluginWorkspaceSidebarSlotNames,
-  getPluginWorkspaceTopBarSlotNames,
-  hasPluginWorkspaceSidebarSurface,
-} from './PluginWorkspaceView.shell'
+import { usePluginWorkspace } from '../composables/usePluginWorkspace'
+import WorkspaceControlsInternal from './internal/WorkspaceControlsInternal.vue'
+import WorkspaceShellInternal from './internal/WorkspaceShellInternal.vue'
+import WorkspaceSidebarInternal from './internal/WorkspaceSidebarInternal.vue'
 import type {
   PluginWorkspaceForwardedSlotProps,
   PluginWorkspaceSlotProps,
+  PluginWorkspaceViewEmits,
   PluginWorkspaceViewProps,
 } from './PluginWorkspaceView.props'
 
@@ -103,28 +96,7 @@ const props = withDefaults(defineProps<PluginWorkspaceViewProps>(), {
   sidebarCloseLabel: 'Close workspace sidebar',
 })
 
-const emit = defineEmits<{
-  'update:activeView': [value: string]
-  'page-selector-select': [page: PageSelectorItem]
-  'pill-select': [item: PillNavItem]
-  'pill-option-select': [option: PillNavOption, item: PillNavItem]
-  'plugin-switcher-select': [plugin: PluginSwitcherPlugin]
-  'plugin-switcher-install': []
-  'account-menu-select': [item: AccountMenuItem]
-  'sign-out': []
-  'notifications-click': []
-  'settings-values-change': [data: Record<string, unknown>]
-  'admin-click': []
-  'experiment-select': [experiment: ExperimentSummary]
-  'experiment-detach': []
-  'update:modelValue': [values: Record<string, unknown>]
-  'update:values': [values: Record<string, unknown>]
-  'update:sidebarCollapsed': [value: boolean]
-  'update:toggle': [sectionId: string, value: boolean]
-  'section-action': [sectionId: string, actionId: string]
-  'form-submit': [sectionId: string, values: Record<string, unknown>]
-  'form-cancel': [sectionId: string]
-}>()
+const emit = defineEmits<PluginWorkspaceViewEmits>()
 
 defineSlots<{
   default?: (props: PluginWorkspaceSlotProps) => unknown
@@ -158,82 +130,19 @@ if (props.experimentShell) {
   })
 }
 
-const topBarSlotNames = computed<string[]>(() =>
-  getPluginWorkspaceTopBarSlotNames(slots),
-)
-
-const sidebarSlotNames = computed<string[]>(() =>
-  getPluginWorkspaceSidebarSlotNames(slots),
-)
-
 const {
-  generatedPillNav,
-  generatedDefaultView,
-  internalControlValues,
-  resolvedComponentBindings,
-  resolvedComponentBindingsById,
-  resolvedComponentProps,
-  resolvedComponentPropsById,
+  shell,
+  sidebar,
+  controls,
   handleControlValuesUpdate,
-} = usePluginWorkspaceControls({
-  model: () => props.model,
-  controls: () => props.controls,
-  controlOptions: () => props.controlOptions,
-  modelValue: () => props.modelValue,
-  values: () => props.values,
-  componentBindings: () => props.componentBindings,
-  componentProps: () => props.componentProps,
-  componentPropsById: () => props.componentPropsById,
-  emitValues: (values) => {
-    emit('update:modelValue', values)
-    emit('update:values', values)
-  },
-})
-
-const {
-  resolvedPillNav,
-  resolvedActiveView,
-  resolvedCurrentPillId,
-  resolvedCurrentPageSelectorId,
-  setActiveView,
   handlePageSelectorSelect,
   handlePillSelect,
-} = usePluginWorkspaceNavigation({
-  activeView: () => props.activeView,
-  defaultActiveView: () => props.defaultActiveView,
-  currentPillId: () => props.currentPillId,
-  currentPageSelectorId: () => props.currentPageSelectorId,
-  pillNav: () => props.pillNav,
-  pageSelector: () => props.pageSelector,
-  panelIds: () => Object.keys(props.panels),
-  generatedPillNav,
-  generatedDefaultView,
-  emitActiveView: (viewId) => emit('update:activeView', viewId),
-  emitPageSelectorSelect: (page) => emit('page-selector-select', page),
-  emitPillSelect: (item) => emit('pill-select', item),
+} = usePluginWorkspace({
+  props,
+  slots,
+  emit,
 })
 
-const hasSidebarSurface = computed(() => {
-  return hasPluginWorkspaceSidebarSurface({
-    showSidebar: props.showSidebar,
-    panels: props.panels,
-    forms: props.forms,
-    model: props.model,
-    controls: props.controls,
-    showSidebarWhenEmpty: props.showSidebarWhenEmpty,
-    sidebarContentId: props.sidebarContentId,
-    sidebarTitle: props.sidebarTitle,
-    sidebarSubtitle: props.sidebarSubtitle,
-    sidebarBadge: props.sidebarBadge,
-    hasSidebarSlot: Boolean(slots.sidebar),
-    sidebarSlotCount: sidebarSlotNames.value.length,
-  })
-})
-
-function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
-  emit('pill-option-select', option, item)
-}
-
 function handleToggle(sectionId: string, value: boolean) {
   emit('update:toggle', sectionId, value)
 }
@@ -249,126 +158,48 @@ function handleFormCancel(sectionId: string) {
 </script>
 
 <template>
-  <AppLayout
-    class="mint-plugin-workspace-view"
-    :sidebar-position="sidebarPosition"
-    :sidebar-width="sidebarWidth"
-    :floating="floating"
-    :responsive-sidebar="responsiveSidebar"
-    :sidebar-toggle-label="sidebarToggleLabel"
-    :sidebar-close-label="sidebarCloseLabel"
+  <WorkspaceShellInternal
+    :shell="shell"
+    @page-selector-select="handlePageSelectorSelect"
+    @pill-select="handlePillSelect"
+    @pill-option-select="(option: PillNavOption, item: PillNavItem) => emit('pill-option-select', option, item)"
+    @plugin-switcher-select="(plugin: PluginSwitcherPlugin) => emit('plugin-switcher-select', plugin)"
+    @plugin-switcher-install="emit('plugin-switcher-install')"
+    @account-menu-select="(item: AccountMenuItem) => emit('account-menu-select', item)"
+    @sign-out="emit('sign-out')"
+    @notifications-click="emit('notifications-click')"
+    @settings-values-change="emit('settings-values-change', $event)"
+    @admin-click="emit('admin-click')"
   >
-    <template #topbar>
-      <slot
-        name="topbar"
-        :active-view="resolvedActiveView"
-        :set-active-view="setActiveView"
-        :values="internalControlValues"
-        :component-bindings="resolvedComponentBindings"
-        :component-bindings-by-id="resolvedComponentBindingsById"
-        :component-props="resolvedComponentProps"
-        :component-props-by-id="resolvedComponentPropsById"
-      >
-        <AppTopBar
-          :title="title"
-          :subtitle="subtitle"
-          :variant="topBarVariant"
-          :home-path="homePath"
-          :show-logo="showLogo"
-          :page-selector="pageSelector"
-          :current-page-selector-id="resolvedCurrentPageSelectorId"
-          :plugin-switcher="pluginSwitcher"
-          :pill-nav="resolvedPillNav"
-          :current-pill-id="resolvedCurrentPillId"
-          :show-theme-toggle="showThemeToggle"
-          :show-settings="showSettings"
-          :settings-config="settingsConfig"
-          :show-standalone-label="showStandaloneLabel"
-          :standalone-label="standaloneLabel"
-          :account-menu="accountMenu"
-          :show-notifications="showNotifications"
-          :has-notification-dot="hasNotificationDot"
-          :show-admin="showAdmin"
-          :admin-path="adminPath"
-          :user-name="userName"
-          :user-initial="userInitial"
-          :user-email="userEmail"
-          @page-selector-select="handlePageSelectorSelect"
-          @pill-select="handlePillSelect"
-          @pill-option-select="handlePillOptionSelect"
-          @plugin-switcher-select="emit('plugin-switcher-select', $event)"
-          @plugin-switcher-install="emit('plugin-switcher-install')"
-          @account-menu-select="emit('account-menu-select', $event)"
-          @sign-out="emit('sign-out')"
-          @notifications-click="emit('notifications-click')"
-          @settings-values-change="emit('settings-values-change', $event)"
-          @admin-click="emit('admin-click')"
-        >
-          <template
-            v-for="slotName in topBarSlotNames"
-            :key="slotName"
-            #[slotName]="slotProps"
-          >
-            <!-- @vue-ignore dynamic SDK slot forwarding for AppTopBar passthrough slots -->
-            <slot
-              :name="slotName"
-              v-bind="slotProps ?? {}"
-            />
-          </template>
-        </AppTopBar>
-      </slot>
+    <template v-if="slots.topbar" #topbar="scope">
+      <slot name="topbar" v-bind="scope" />
     </template>
 
-    <template v-if="hasSidebarSurface" #sidebar>
+    <template
+      v-for="slotName in shell.topBarSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <!-- @vue-ignore dynamic SDK slot forwarding for AppTopBar passthrough slots -->
       <slot
-        name="sidebar"
-        :active-view="resolvedActiveView"
-        :set-active-view="setActiveView"
-        :values="internalControlValues"
-        :component-bindings="resolvedComponentBindings"
-        :component-bindings-by-id="resolvedComponentBindingsById"
-        :component-props="resolvedComponentProps"
-        :component-props-by-id="resolvedComponentPropsById"
-      >
-        <AppSidebar
-          :title="sidebarTitle"
-          :subtitle="sidebarSubtitle"
-          :badge="sidebarBadge"
-          :variant="sidebarVariant"
-          :panels="panels"
-          :active-view="resolvedActiveView"
-          :floating="false"
-          :dense="dense"
-          :width="sidebarWidth"
-          :side="sidebarPosition"
-          :forms="forms"
-          :content-id="sidebarContentId"
-          :show-when-empty="showSidebarWhenEmpty || sidebarContentId !== undefined"
-          :model="model"
-          :controls="controls"
-          :control-options="controlOptions"
-          :values="internalControlValues"
-          :form-enhancements="formEnhancements"
-          :show-form-actions="showFormActions"
-          :form-loading="formLoading"
-          :form-disabled="formDisabled"
-          :form-readonly="formReadonly"
-          :form-size="formSize"
-          :collapsible="sidebarCollapsible"
-          :collapsed="sidebarCollapsed"
-          :default-collapsed="defaultSidebarCollapsed"
-          :collapsed-width="sidebarCollapsedWidth"
-          :collapse-button-label="sidebarCollapseButtonLabel"
-          :expand-button-label="sidebarExpandButtonLabel"
+        :name="slotName"
+        v-bind="slotProps ?? {}"
+      />
+    </template>
+
+    <template v-if="shell.hasSidebarSurface" #sidebar="scope">
+      <slot name="sidebar" v-bind="scope">
+        <WorkspaceSidebarInternal
+          :sidebar="sidebar"
           @update:model-value="handleControlValuesUpdate"
           @update:collapsed="emit('update:sidebarCollapsed', $event)"
           @update:toggle="handleToggle"
-          @section-action="(sectionId, actionId) => emit('section-action', sectionId, actionId)"
+          @section-action="(sectionId: string, actionId: string) => emit('section-action', sectionId, actionId)"
           @form-submit="handleFormSubmit"
           @form-cancel="handleFormCancel"
         >
           <template
-            v-for="slotName in sidebarSlotNames"
+            v-for="slotName in sidebar.slotNames"
             :key="slotName"
             #[slotName]="slotProps"
           >
@@ -378,18 +209,16 @@ function handleFormCancel(sectionId: string) {
               v-bind="slotProps ?? {}"
             />
           </template>
-        </AppSidebar>
+        </WorkspaceSidebarInternal>
       </slot>
     </template>
 
-    <slot
-      :active-view="resolvedActiveView"
-      :set-active-view="setActiveView"
-      :values="internalControlValues"
-      :component-bindings="resolvedComponentBindings"
-      :component-bindings-by-id="resolvedComponentBindingsById"
-      :component-props="resolvedComponentProps"
-      :component-props-by-id="resolvedComponentPropsById"
-    />
-  </AppLayout>
+    <template #default>
+      <WorkspaceControlsInternal :controls="controls">
+        <template #default="controlsScope">
+          <slot v-bind="controlsScope" />
+        </template>
+      </WorkspaceControlsInternal>
+    </template>
+  </WorkspaceShellInternal>
 </template>

package/src/components/ProgressBar.vue

@@ -111,7 +111,3 @@ const segmentCount = computed(() => props.steps.length || 0)
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/progress-bar.css';
-</style>

package/src/components/ProtocolStepEditor.vue

@@ -53,6 +53,7 @@ const selectedTemplateId = ref<string | null>(null)
 const {
   isOpen: templateDropdownOpen,
   rootRef: templateDropdownRef,
+  triggerRef: templateTriggerRef,
   close: closeTemplateDropdown,
   toggle: toggleTemplateDropdown,
 } = useDropdownState()
@@ -204,6 +205,7 @@ watch(
         <label class="mint-protocol-editor__template-label">Template</label>
         <div ref="templateDropdownRef" class="mint-protocol-editor__template-dropdown">
           <button
+            ref="templateTriggerRef"
             type="button"
             class="mint-protocol-editor__template-btn"
             @click="toggleTemplateDropdown"
@@ -376,7 +378,3 @@ watch(
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/protocol-step-editor.css';
-</style>