@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/PlotlyChart.story.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type * as Plotly from 'plotly.js'
+import type * as Plotly from 'plotly.js-dist-min'
 
 import PlotlyChart from './PlotlyChart.vue'
 
@@ -20,6 +20,19 @@ const data: Plotly.Data[] = [
   },
 ]
 
+const doseSeries: Plotly.Data[] = [
+  { name: 'Control', ic: -6.2, hill: 1.1 },
+  { name: 'Treatment A', ic: -7.4, hill: 1.2 },
+  { name: 'Treatment B', ic: -8.1, hill: 0.9 },
+].map(({ name, ic, hill }) => {
+  const x = [-9, -8.5, -8, -7.5, -7, -6.5, -6, -5.5, -5]
+  return { type: 'scatter', mode: 'lines+markers', name, x, y: x.map(v => 100 / (1 + 10 ** ((ic - v) * hill))) }
+})
+
+function initLegendState() {
+  return { headerLegend: true, variant: 'card' as 'card' | 'frame', modeBar: false }
+}
+
 const layout: Partial<Plotly.Layout> = {
   margin: { t: 24, r: 24, b: 56, l: 56 },
   xaxis: { title: { text: 'Time' } },
@@ -41,6 +54,29 @@ const layout: Partial<Plotly.Layout> = {
       </div>
     </Variant>
 
+    <Variant title="Header legend and MINT template" :init-state="initLegendState">
+      <template #default="{ state }">
+        <div style="max-width: 760px; margin: 0 auto; padding: 2rem;">
+          <PlotlyChart
+            title="Dose-response"
+            description="EXP-042 · 4PL fit"
+            :data="doseSeries"
+            :layout="{ margin: { t: 16, r: 16, b: 40, l: 48 }, xaxis: { title: { text: 'log[M]' } }, yaxis: { title: { text: 'Inhibition %' } } }"
+            :config="{ displayModeBar: state.modeBar }"
+            :header-legend="state.headerLegend"
+            :variant="state.variant"
+            :height="320"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.headerLegend" title="Header legend" />
+        <HstCheckbox v-model="state.modeBar" title="Show modebar" />
+        <HstSelect v-model="state.variant" title="Variant" :options="[{ label: 'card', value: 'card' }, { label: 'frame', value: 'frame' }]" />
+      </template>
+    </Variant>
+
     <Variant title="Empty">
       <div style="max-width: 760px; margin: 0 auto; padding: 2rem;">
         <PlotlyChart

package/src/components/PlotlyChart.vue

@@ -15,9 +15,12 @@
  * />
  * ```
  */
-import type * as PlotlyType from 'plotly.js'
+import type * as PlotlyType from 'plotly.js-dist-min'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
 
+import type { ChartLegendItem } from '../types'
+import { SAMPLE_GROUP_TOKENS } from '../utils/color'
+import { mintPlotlyTemplate } from '../utils/plotlyTemplate'
 import ChartContainer from './ChartContainer.vue'
 
 interface Props {
@@ -40,6 +43,12 @@ interface Props {
   clickEvents?: boolean
   /** Shared chart container chrome. `frame` fills a workbench panel. */
   variant?: 'card' | 'frame'
+  /**
+   * With two or more legend traces, list them in the chart header (click toggles
+   * the trace) instead of Plotly's in-plot legend. Any `layout.showlegend` leaves the
+   * legend to Plotly (`true` shows its legend, `false` shows none).
+   */
+  headerLegend?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -52,6 +61,7 @@ const props = withDefaults(defineProps<Props>(), {
   active: true,
   clickEvents: false,
   variant: 'card',
+  headerLegend: true,
 })
 
 const emit = defineEmits<{
@@ -97,11 +107,6 @@ function bindEvents(element: HTMLDivElement): void {
   }
 }
 
-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 {
@@ -116,18 +121,73 @@ function clonePlotlyInput<T>(value: T): T {
   return raw
 }
 
+type LegendTrace = {
+  name?: string
+  showlegend?: boolean
+  visible?: boolean | 'legendonly'
+  marker?: { color?: unknown }
+  line?: { color?: unknown }
+}
+
+/**
+ * Header-legend clicks, keyed by label plus its occurrence (`Replicate`, `Replicate#2`), so a data
+ * refresh keeps them and same-named traces stay separate. `true` = hidden, `false` = shown.
+ */
+const toggledTraces = ref<Record<string, boolean>>({})
+
+/** Traces listed in the header legend, or none when Plotly keeps its own legend. */
+const legendTraces = computed(() => {
+  if (!props.headerLegend || props.layout.showlegend !== undefined) return []
+  const seen: Record<string, number> = {}
+  const traces = props.data
+    .map((trace, index) => ({ trace: trace as LegendTrace, index }))
+    .filter(({ trace }) => trace.showlegend !== false && trace.visible !== false)
+    .map(({ trace, index }) => {
+      const label = trace.name ?? `Trace ${index + 1}`
+      seen[label] = (seen[label] ?? 0) + 1
+      return { trace, index, label, key: seen[label] > 1 ? `${label}#${seen[label]}` : label }
+    })
+  return traces.length > 1 ? traces : []
+})
+
+const legendItems = computed<ChartLegendItem[]>(() => legendTraces.value.map(({ trace, index, label, key }) => {
+  const layoutColorway = props.layout.colorway?.filter((color): color is string => typeof color === 'string')
+  const colorway = layoutColorway?.length ? layoutColorway : SAMPLE_GROUP_TOKENS
+  const own = [trace.marker?.color, trace.line?.color].find((color): color is string => typeof color === 'string')
+  return {
+    label,
+    color: own ?? colorway[index % colorway.length],
+    hidden: toggledTraces.value[key] ?? trace.visible === 'legendonly',
+  }
+}))
+
+function toggleTrace(legendIndex: number): void {
+  const { key } = legendTraces.value[legendIndex]
+  toggledTraces.value = { ...toggledTraces.value, [key]: !legendItems.value[legendIndex].hidden }
+}
+
+function chartData(): PlotlyType.Data[] {
+  const data = clonePlotlyInput(props.data)
+  const visible = new Map(legendTraces.value
+    .filter(({ key }) => key in toggledTraces.value)
+    .map(({ index, key }) => [index, toggledTraces.value[key] ? 'legendonly' as const : true]))
+  return data.map((trace, index) => visible.has(index) ? { ...trace, visible: visible.get(index) } : trace)
+}
+
+// Caller layout wins key by key over the MINT template (read fresh on every render,
+// so a theme change picks up the new tokens).
 function themedLayout(): Partial<PlotlyType.Layout> {
-  const textColor = cssValue('--text-primary', '#1E293B')
-  const gridColor = cssValue('--border-color', '#E5E7EB')
+  const template = mintPlotlyTemplate(chartElement.value ?? undefined).layout ?? {}
   const layout = clonePlotlyInput(props.layout)
   return {
     autosize: true,
-    paper_bgcolor: 'rgba(0,0,0,0)',
-    plot_bgcolor: 'rgba(0,0,0,0)',
+    ...template,
+    ...(legendTraces.value.length ? { showlegend: false } : {}),
     ...layout,
-    font: { color: textColor, family: cssValue('--font-sans', 'Arial, sans-serif'), ...layout.font },
-    xaxis: { gridcolor: gridColor, ...layout.xaxis },
-    yaxis: { gridcolor: gridColor, ...layout.yaxis },
+    font: { ...template.font, ...layout.font },
+    xaxis: { ...template.xaxis, ...layout.xaxis },
+    yaxis: { ...template.yaxis, ...layout.yaxis },
+    hoverlabel: { ...template.hoverlabel, ...layout.hoverlabel },
   }
 }
 
@@ -155,11 +215,12 @@ async function renderChart(): Promise<void> {
         if (!element) break
         renderedElement = element
         // Plotly mutates traces and nested layout fields; keep caller-owned values intact.
+        // Plotly 4 shows an "Upload to Cloud" modebar button by default; keep it off.
         await plotly.react(
           element,
-          clonePlotlyInput(props.data),
+          chartData(),
           themedLayout(),
-          { responsive: true, displaylogo: false, ...props.config },
+          { responsive: true, displaylogo: false, displayModeBar: false, showSendToCloud: false, ...props.config },
         )
         if (disposed || props.loading || props.empty || element !== chartElement.value) {
           purgeChart()
@@ -199,7 +260,7 @@ onMounted(() => {
 })
 
 watch(
-  [() => props.data, () => props.layout, () => props.config, () => props.loading, () => props.empty, () => props.active],
+  [() => props.data, () => props.layout, () => props.config, () => props.loading, () => props.empty, () => props.active, toggledTraces],
   () => {
     if (props.loading || props.empty || !props.active) {
       resizeObserver?.disconnect()
@@ -239,6 +300,8 @@ onBeforeUnmount(() => {
     :empty="empty"
     :empty-message="emptyMessage"
     :variant="variant"
+    :legend-items="legendItems"
+    @legend-toggle="toggleTrace"
   >
     <template v-if="$slots.header" #header>
       <slot name="header" />
@@ -284,6 +347,13 @@ onBeforeUnmount(() => {
   min-height: 24rem;
 }
 
+/* Plotly fills the hover label's trace-name box from plot/paper bgcolor combined over
+   white (inline style, no hoverlabel option), so it stays light in dark mode. The token
+   follows the theme; in light mode it resolves to the same white. */
+.mint-plotly-chart__plot :deep(.hovertext rect) {
+  fill: var(--bg-card) !important;
+}
+
 .mint-plotly-chart__error {
   margin: 0;
   padding: 1rem;

package/src/components/PluginWorkspaceView.props.ts

@@ -6,8 +6,6 @@ import type {
   PillNavItem,
   PillNavItemInput,
   PillNavOption,
-  PluginSwitcherInfo,
-  PluginSwitcherPlugin,
   SidebarToolSection,
   TopBarSettingsConfig,
   TopBarVariant,
@@ -42,8 +40,6 @@ export interface PluginWorkspaceViewProps {
   pageSelector?: PageSelectorItemInput[]
   /** Active page selector id. Defaults to activeView. */
   currentPageSelectorId?: string
-  /** Optional plugin switcher shown in the left navigation position. */
-  pluginSwitcher?: PluginSwitcherInfo
   /** Preferred centered navigation for local modes inside the current route. */
   pillNav?: PillNavItemInput[]
   /** Active centered pill id. Defaults to activeView. */
@@ -97,7 +93,7 @@ export interface PluginWorkspaceViewProps {
   sidebarSubtitle?: string
   /** Optional compact badge/count rendered in the sidebar header. */
   sidebarBadge?: string | number
-  /** @deprecated No-op. AppSidebar has one look now; the former `analysis` preset is the default. */
+  /** @deprecated No-op, removed in MINT 1.4. AppSidebar has one look now; the former `analysis` preset is the default. */
   sidebarVariant?: PluginWorkspaceSidebarVariant
   /** Sidebar CSS width. Defaults to AppSidebar's width. */
   sidebarWidth?: string
@@ -170,8 +166,6 @@ export interface PluginWorkspaceViewEmits {
   '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': []

package/src/components/PluginWorkspaceView.vue

@@ -13,7 +13,6 @@ import { computed, useSlots } from 'vue'
 import type {
   AccountMenuItem,
   PillNavItem,
-  PluginSwitcherPlugin,
   PillNavOption,
 } from '../types'
 import { useAppExperiment } from '../composables/useAppExperiment'
@@ -36,7 +35,6 @@ const props = withDefaults(defineProps<PluginWorkspaceViewProps>(), {
   showLogo: true,
   pageSelector: undefined,
   currentPageSelectorId: undefined,
-  pluginSwitcher: undefined,
   pillNav: undefined,
   currentPillId: undefined,
   showThemeToggle: true,
@@ -163,8 +161,6 @@ function handleFormCancel(sectionId: string) {
     @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')"

package/src/components/ProgressBar.story.vue

@@ -4,7 +4,6 @@ import ProgressBar from './ProgressBar.vue'
 import type { ProgressSize } from '../types'
 
 const progressColors = ['primary', 'success', 'warning', 'error', 'info'] as const
-const progressVariants = ['rail', 'segmented'] as const
 const sizes: ProgressSize[] = ['sm', 'md', 'lg']
 
 const animatedValue = ref(0)
@@ -33,7 +32,6 @@ onUnmounted(() => {
         <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
           <ProgressBar
             :value="state.value"
-            :variant="state.variant"
             :color="state.color"
             :size="state.size"
             :label="state.showLabel ? state.label : undefined"
@@ -45,11 +43,6 @@ onUnmounted(() => {
 
       <template #controls="{ state }">
         <HstSlider v-model="state.value" title="Value" :min="0" :max="100" :step="1" />
-        <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="progressVariants.map(v => ({ label: v, value: v }))"
-        />
         <HstSelect
           v-model="state.color"
           title="Color"
@@ -121,28 +114,5 @@ onUnmounted(() => {
       </div>
     </Variant>
 
-    <Variant title="Segmented — pipeline steps">
-      <div style="padding: 2rem; max-width: 640px; display: flex; flex-direction: column; gap: 2rem;">
-        <div>
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">Active step 3 — analyzing</p>
-          <ProgressBar
-            variant="segmented"
-            :steps="['Ingest', 'Align', 'Pick', 'Annotate', 'Score', 'Export', 'Done']"
-            :current-step="2"
-            color="primary"
-            show-value
-          />
-        </div>
-        <div>
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">Complete</p>
-          <ProgressBar
-            variant="segmented"
-            :steps="['Ingest', 'Align', 'Pick', 'Annotate', 'Score', 'Export', 'Done']"
-            :current-step="7"
-            color="success"
-          />
-        </div>
-      </div>
-    </Variant>
   </Story>
 </template>

package/src/components/ProgressBar.vue

@@ -1,30 +1,24 @@
 <script setup lang="ts">
-/** Displays progress as a filled rail or discrete labeled segments, with indeterminate mode. */
+/** Displays progress as a filled rail, with an indeterminate mode. */
 import { computed } from 'vue'
 
 interface Props {
   value?: number
-  variant?: 'rail' | 'segmented'
   color?: 'primary' | 'success' | 'warning' | 'error' | 'info'
   size?: 'sm' | 'md' | 'lg'
   label?: string
   showValue?: boolean
   indeterminate?: boolean
-  steps?: string[]
-  currentStep?: number
   ariaLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   value: 0,
-  variant: 'rail',
   color: 'primary',
   size: 'md',
   label: undefined,
   showValue: false,
   indeterminate: false,
-  steps: () => [],
-  currentStep: 0,
 })
 
 const clampedValue = computed(() => Math.min(100, Math.max(0, props.value)))
@@ -33,24 +27,19 @@ const barStyle = computed(() => {
   if (props.indeterminate) return undefined
   return { width: `${clampedValue.value}%` }
 })
-
-const segmentCount = computed(() => props.steps.length || 0)
 </script>
 
 <template>
-  <div class="mint-progress" :class="`mint-progress--${variant}`">
+  <div class="mint-progress">
     <div
       v-if="label || showValue"
       class="mint-progress__header"
     >
       <span v-if="label" class="mint-progress__label">{{ label }}</span>
-      <span v-if="showValue && !indeterminate && variant === 'rail'" class="mint-progress__value">{{ clampedValue }}%</span>
-      <span v-if="showValue && variant === 'segmented' && segmentCount" class="mint-progress__value">{{ currentStep }} / {{ segmentCount }}</span>
+      <span v-if="showValue && !indeterminate" class="mint-progress__value">{{ clampedValue }}%</span>
     </div>
 
-    <!-- Rail variant: single filled track -->
     <div
-      v-if="variant === 'rail'"
       :class="[
         'mint-progress__track',
         `mint-progress__track--${size}`,
@@ -70,44 +59,5 @@ const segmentCount = computed(() => props.steps.length || 0)
         :style="barStyle"
       />
     </div>
-
-    <!-- Segmented variant: discrete step segments -->
-    <div
-      v-else
-      :class="['mint-progress__segments', `mint-progress__segments--${size}`]"
-      role="progressbar"
-      :aria-valuenow="currentStep"
-      :aria-valuemin="0"
-      :aria-valuemax="segmentCount"
-      :aria-label="ariaLabel ?? label"
-    >
-      <span
-        v-for="(_step, i) in steps"
-        :key="i"
-        :class="[
-          'mint-progress__segment',
-          i < currentStep ? `mint-progress__segment--done mint-progress__segment--${color}` : '',
-          i === currentStep ? `mint-progress__segment--active mint-progress__segment--${color}` : '',
-        ]"
-      />
-    </div>
-
-    <!-- Segmented step labels -->
-    <div
-      v-if="variant === 'segmented' && steps.length"
-      class="mint-progress__step-labels"
-    >
-      <span
-        v-for="(step, i) in steps"
-        :key="i"
-        :class="[
-          'mint-progress__step-label',
-          i === currentStep ? 'mint-progress__step-label--active' : '',
-          i < currentStep ? 'mint-progress__step-label--done' : '',
-        ]"
-      >
-        {{ step }}
-      </span>
-    </div>
   </div>
 </template>

package/src/components/ProtocolStepEditor.story.vue

@@ -17,6 +17,8 @@ function initState() {
   return {
     mode: 'create' as const,
     showPreview: true,
+    stepNumber: 3,
+    stepCount: 7,
   }
 }
 </script>
@@ -29,6 +31,8 @@ function initState() {
           <ProtocolStepEditor
             :mode="state.mode"
             :show-preview="state.showPreview"
+            :step-number="state.stepNumber"
+            :step-count="state.stepCount"
             @save="(step) => console.log('Saved:', step)"
             @cancel="() => console.log('Cancelled')"
           />
@@ -44,6 +48,8 @@ function initState() {
           ]"
         />
         <HstCheckbox v-model="state.showPreview" title="Show Preview" />
+        <HstNumber v-model="state.stepNumber" title="Step Number" />
+        <HstNumber v-model="state.stepCount" title="Step Count" />
       </template>
     </Variant>
 
@@ -52,6 +58,8 @@ function initState() {
         <ProtocolStepEditor
           mode="edit"
           :model-value="editStep"
+          :step-number="3"
+          :step-count="7"
           @save="(step) => console.log('Saved:', step)"
         />
       </div>