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

package/src/components/GeneratedPlotlyResult.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import GeneratedPlotlyResult from './GeneratedPlotlyResult.vue'
+
+const scatterSpec: Record<string, unknown> = {
+  data: [
+    {
+      type: 'scatter',
+      mode: 'markers',
+      name: 'Control',
+      x: [1.2, 2.4, 3.1, 4.8, 5.5, 6.9],
+      y: [0.9, 1.8, 2.6, 3.9, 4.4, 5.8],
+      marker: { size: 9 },
+    },
+    {
+      type: 'scatter',
+      mode: 'markers',
+      name: 'Treated',
+      x: [1.1, 2.2, 3.4, 4.5, 5.9, 6.4],
+      y: [2.1, 3.4, 3.9, 5.2, 6.4, 7.1],
+      marker: { size: 9 },
+    },
+  ],
+  layout: {
+    margin: { t: 24, r: 16, b: 40, l: 48 },
+    xaxis: { title: 'log2 intensity (control)' },
+    yaxis: { title: 'log2 intensity (treated)' },
+  },
+}
+
+const barSpec: Record<string, unknown> = {
+  data: [
+    {
+      type: 'bar',
+      x: ['Glycolysis', 'TCA', 'PPP', 'Urea cycle'],
+      y: [12, 27, 8, 4],
+    },
+  ],
+  layout: { margin: { t: 24, r: 16, b: 40, l: 48 } },
+}
+
+// Not a valid Plotly spec — exercises the static-image fallback branch.
+const brokenSpec: Record<string, unknown> = { data: 'not-an-array' }
+
+const PIXEL_PNG
+  = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=='
+
+function initState() {
+  return { chart: 'scatter' as 'scatter' | 'bar' }
+}
+</script>
+
+<template>
+  <Story title="Workflow/GeneratedPlotlyResult">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 720px;">
+          <GeneratedPlotlyResult :spec="state.chart === 'bar' ? barSpec : scatterSpec" />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.chart"
+          title="Chart"
+          :options="[
+            { label: 'scatter', value: 'scatter' },
+            { label: 'bar', value: 'bar' },
+          ]"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Scatter">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedPlotlyResult :spec="scatterSpec" />
+      </div>
+    </Variant>
+
+    <Variant title="Bar">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedPlotlyResult :spec="barSpec" />
+      </div>
+    </Variant>
+
+    <Variant title="Render failure → PNG fallback">
+      <!-- When Plotly cannot render the spec the component swaps in the
+           server-rendered static image, if the job supplied one. -->
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedPlotlyResult
+          :spec="brokenSpec"
+          :fallback="{ media_type: 'image/png', data: PIXEL_PNG }"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/GeneratedPlotlyResult.vue

@@ -1,87 +1,52 @@
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type * as PlotlyType from 'plotly.js'
+import { computed, toRaw } from 'vue'
 
-import ChartContainer from './ChartContainer.vue'
+import PlotlyChart from './PlotlyChart.vue'
 
 const props = defineProps<{
   spec: Record<string, unknown>
   fallback?: { media_type: string; data: string }
 }>()
 
-const chartElement = ref<HTMLDivElement | null>(null)
-const failed = ref(false)
-let plotly: typeof PlotlyType | null = null
-
-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
-}
-
-async function renderChart(): Promise<void> {
-  if (!chartElement.value) return
-  failed.value = false
-  await nextTick()
-  try {
-    const renderer = plotly ?? await loadPlotly()
-    plotly = renderer
-    const data = Array.isArray(props.spec.data) ? props.spec.data : []
-    const layout = props.spec.layout && typeof props.spec.layout === 'object'
-      ? props.spec.layout
-      : {}
-    await renderer.react(
-      chartElement.value,
-      data as PlotlyType.Data[],
-      layout as Partial<PlotlyType.Layout>,
-      { responsive: true, displaylogo: false },
-    )
-    failed.value = false
-  } catch {
-    failed.value = true
-  }
-}
-
-onMounted(renderChart)
-watch(() => props.spec, async () => {
-  await nextTick()
-  await renderChart()
-})
-onBeforeUnmount(() => {
-  if (plotly && chartElement.value) plotly.purge(chartElement.value)
+const data = computed<PlotlyType.Data[]>(() => {
+  const traces = toRaw(props.spec).data
+  return Array.isArray(traces) ? [...toRaw(traces)] as PlotlyType.Data[] : []
 })
+const layout = computed<Partial<PlotlyType.Layout>>(() => (
+  props.spec.layout && typeof props.spec.layout === 'object'
+    ? props.spec.layout as Partial<PlotlyType.Layout>
+    : {}
+))
+const config = computed<Partial<PlotlyType.Config>>(() => (
+  props.spec.config && typeof props.spec.config === 'object'
+    ? props.spec.config as Partial<PlotlyType.Config>
+    : {}
+))
 </script>
 
 <template>
-  <ChartContainer title="Interactive chart">
-    <img
-      v-if="failed && fallback"
-      class="mint-generated-result__image"
-      :src="`data:${fallback.media_type};base64,${fallback.data}`"
-      alt="Static Plotly chart fallback"
-    >
-    <p
-      v-else-if="failed"
-      class="mint-generated-result__plotly-error"
-      role="alert"
-    >
-      Unable to display this chart.
-    </p>
-    <div
-      ref="chartElement"
-      v-show="!failed"
-      class="mint-generated-result__plotly"
-      aria-label="Interactive Plotly chart"
-    />
-  </ChartContainer>
+  <PlotlyChart
+    title="Interactive chart"
+    :data="data"
+    :layout="layout"
+    :config="config"
+  >
+    <template v-if="fallback" #error>
+      <img
+        class="mint-generated-result__image"
+        :src="`data:${fallback.media_type};base64,${fallback.data}`"
+        alt="Static Plotly chart fallback"
+      >
+    </template>
+  </PlotlyChart>
 </template>
 
 <style scoped>
-.mint-generated-result__plotly-error {
-  margin: 0;
-  padding: 1rem;
-  border: 1px solid var(--color-danger-border, var(--color-border));
-  border-radius: 0.75rem;
-  background: var(--color-danger-bg, var(--color-bg-secondary));
-  color: var(--color-danger-text, var(--color-text-primary));
+.mint-generated-result__image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
 }
 </style>

package/src/components/GeneratedPluginView.story.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import GeneratedPluginView from './GeneratedPluginView.vue'
+import type { GeneratedAnalysisTransport } from '../composables/useGeneratedAnalysis'
+import type { GeneratedAnalysisManifest } from '../types/generated-ui'
+
+const manifest: GeneratedAnalysisManifest = {
+  schema_version: '1',
+  plugin: {
+    name: 'peak-qc',
+    version: '1.2.0',
+    description: 'Peak-picking quality control',
+    routes_prefix: '/api/peak-qc',
+  },
+  ui: {
+    title: 'Peak QC',
+    description: 'Score peak-picking output and flag features that need review.',
+  },
+  jobs: [
+    {
+      id: 'score-features',
+      title: 'Score features',
+      description: 'Compute RSD, blank ratio and detection rate for every feature.',
+      cpu: 4,
+      input_schema: {
+        type: 'object',
+        title: 'Scoring parameters',
+        properties: {
+          rsd_threshold: {
+            type: 'number',
+            title: 'QC RSD threshold',
+            description: 'Features above this relative standard deviation are flagged.',
+            default: 0.3,
+            minimum: 0,
+            maximum: 1,
+          },
+          blank_ratio: {
+            type: 'number',
+            title: 'Minimum blank ratio',
+            default: 3,
+            minimum: 1,
+          },
+          drop_flagged: {
+            type: 'boolean',
+            title: 'Drop flagged features',
+            default: false,
+          },
+        },
+        required: ['rsd_threshold'],
+      },
+      output_schema: { type: 'object' },
+    },
+    {
+      id: 'align-batches',
+      title: 'Align batches',
+      description: 'Retention-time align acquisition batches before merging.',
+      cpu: 8,
+      input_schema: {
+        type: 'object',
+        properties: {
+          tolerance_seconds: { type: 'number', title: 'RT tolerance (s)', default: 6 },
+          reference_batch: { type: 'string', title: 'Reference batch', default: 'batch-1' },
+        },
+      },
+      output_schema: { type: 'object' },
+    },
+  ],
+}
+
+const session = {
+  id: 'sess_story',
+  tab_id: 'tab_story',
+  created_at: new Date().toISOString(),
+  last_seen_at: new Date().toISOString(),
+  active_job_ids: [],
+}
+
+function json(body: unknown): Response {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' },
+  })
+}
+
+/** Serves the manifest, one session and an empty job list — no network. */
+const readyTransport: GeneratedAnalysisTransport = async (input) => {
+  const url = String(input)
+  if (url.includes('/generated/manifest')) return json(manifest)
+  if (url.includes('/jobs/sessions')) return json({ sessions: [session] })
+  if (url.includes('/jobs')) return json({ jobs: [] })
+  return json({})
+}
+
+/** Never settles, so the workspace stays in its loading state. */
+const loadingTransport: GeneratedAnalysisTransport = () => new Promise<Response>(() => {})
+
+/** Fails the manifest request, so the workspace surfaces its error banner. */
+const failingTransport: GeneratedAnalysisTransport = async () => (
+  new Response(JSON.stringify({ detail: 'Plugin runtime is not reachable' }), {
+    status: 503,
+    headers: { 'Content-Type': 'application/json' },
+  })
+)
+
+function initState() {
+  return { showStandaloneLabel: false }
+}
+</script>
+
+<template>
+  <Story title="Workflow/GeneratedPluginView">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="height: 42rem;">
+          <GeneratedPluginView
+            base-url="/story/peak-qc"
+            :transport="readyTransport"
+            :show-standalone-label="state.showStandaloneLabel"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showStandaloneLabel" title="Standalone label" />
+      </template>
+    </Variant>
+
+    <Variant title="Ready — two job definitions">
+      <div style="height: 42rem;">
+        <GeneratedPluginView base-url="/story/peak-qc" :transport="readyTransport" />
+      </div>
+    </Variant>
+
+    <Variant title="Loading">
+      <div style="height: 42rem;">
+        <GeneratedPluginView base-url="/story/loading" :transport="loadingTransport" />
+      </div>
+    </Variant>
+
+    <Variant title="Runtime unreachable">
+      <div style="height: 42rem;">
+        <GeneratedPluginView base-url="/story/failing" :transport="failingTransport" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/GeneratedPluginView.vue

@@ -207,7 +207,7 @@ onMounted(() => {
   min-width: 0;
   min-height: calc(100vh - 5rem);
   padding: clamp(1rem, 2.5vw, 2.5rem);
-  background: var(--color-bg-primary);
+  background: var(--bg-primary);
 }
 
 .mint-generated-workspace__loading {
@@ -216,7 +216,7 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
-  color: var(--color-text-secondary);
+  color: var(--text-secondary);
 }
 
 .mint-generated-workspace__header {
@@ -230,19 +230,19 @@ onMounted(() => {
 
 .mint-generated-workspace__header h1 {
   margin: 0;
-  color: var(--color-text-primary);
+  color: var(--text-primary);
   font-size: clamp(1.35rem, 2vw, 1.8rem);
   line-height: 1.2;
 }
 
 .mint-generated-workspace__header p:not(.mint-generated-workspace__eyebrow) {
   margin: 0.4rem 0 0;
-  color: var(--color-text-secondary);
+  color: var(--text-secondary);
 }
 
 .mint-generated-workspace__eyebrow {
   margin: 0 0 0.35rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -258,10 +258,10 @@ onMounted(() => {
 
 .mint-generated-workspace__resources span {
   padding: 0.3rem 0.55rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color);
   border-radius: 999px;
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
   font-size: 0.75rem;
   font-weight: 600;
 }
@@ -271,9 +271,9 @@ onMounted(() => {
   min-height: 24rem;
   margin: 0 auto;
   padding: clamp(1rem, 2vw, 1.75rem);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color);
   border-radius: 1rem;
-  background: var(--color-bg-secondary);
+  background: var(--bg-secondary);
   box-shadow: var(--shadow-sm);
 }
 

package/src/components/GeneratedResultRenderer.story.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import GeneratedResultRenderer from './GeneratedResultRenderer.vue'
+import type { GeneratedAnalysisResult } from '../types/generated-ui'
+
+const textResult: GeneratedAnalysisResult = {
+  kind: 'text',
+  text: 'Peak integration finished: 1,284 features across 96 samples, 12 flagged for manual review.',
+}
+
+const jsonResult: GeneratedAnalysisResult = {
+  kind: 'json',
+  value: {
+    method: 'HILIC_neg_12min',
+    features: 1284,
+    qc: { rsd_median: 0.041, blanks_removed: 37 },
+    flagged: ['M241T118', 'M317T204'],
+  },
+}
+
+const tableResult: GeneratedAnalysisResult = {
+  kind: 'table',
+  columns: ['feature_id', 'mz', 'retention_time', 'fold_change', 'p_value'],
+  rows: [
+    { feature_id: 'M180T204', mz: 180.0634, retention_time: 3.42, fold_change: 2.14, p_value: 0.0012 },
+    { feature_id: 'M241T118', mz: 241.0311, retention_time: 1.97, fold_change: -1.83, p_value: 0.0044 },
+    { feature_id: 'M317T204', mz: 317.0521, retention_time: 3.41, fold_change: 1.07, p_value: 0.2310 },
+    { feature_id: 'M146T092', mz: 146.0453, retention_time: 1.53, fold_change: -3.02, p_value: 0.0001 },
+  ],
+}
+
+// 1x1 transparent PNG — enough to exercise the image branch without a fixture.
+const PIXEL_PNG
+  = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=='
+
+const imageResult: GeneratedAnalysisResult = {
+  kind: 'image',
+  media_type: 'image/png',
+  data: PIXEL_PNG,
+  alt: 'Static QC overview rendered by the plugin',
+}
+
+const artifactResult: GeneratedAnalysisResult = {
+  kind: 'artifact',
+  id: 'art_01J9',
+  name: 'peak_table.parquet',
+  media_type: 'application/vnd.apache.parquet',
+  size: 4_812_390,
+  download_url: '#download',
+  managed: true,
+}
+
+type ResultKind = 'text' | 'json' | 'table' | 'image' | 'artifact'
+
+const kinds: ResultKind[] = ['text', 'json', 'table', 'image', 'artifact']
+
+const byKind: Record<ResultKind, GeneratedAnalysisResult> = {
+  text: textResult,
+  json: jsonResult,
+  table: tableResult,
+  image: imageResult,
+  artifact: artifactResult,
+}
+
+function initState() {
+  return { kind: 'table' as ResultKind }
+}
+</script>
+
+<template>
+  <Story title="Workflow/GeneratedResultRenderer">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 720px;">
+          <GeneratedResultRenderer :result="byKind[state.kind as ResultKind]" />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.kind"
+          title="Result kind"
+          :options="kinds.map(k => ({ label: k, value: k }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Text">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedResultRenderer :result="textResult" />
+      </div>
+    </Variant>
+
+    <Variant title="Table">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedResultRenderer :result="tableResult" />
+      </div>
+    </Variant>
+
+    <Variant title="JSON">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedResultRenderer :result="jsonResult" />
+      </div>
+    </Variant>
+
+    <Variant title="Image">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedResultRenderer :result="imageResult" />
+      </div>
+    </Variant>
+
+    <Variant title="Artifact download">
+      <div style="padding: 2rem; max-width: 720px;">
+        <GeneratedResultRenderer :result="artifactResult" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/GeneratedResultRenderer.vue

@@ -101,7 +101,7 @@ function humanize(value: string): string {
 .mint-generated-result__text,
 .mint-generated-result__json {
   margin: 0;
-  color: var(--color-text-primary);
+  color: var(--text-primary);
 }
 
 .mint-generated-result__text {
@@ -113,9 +113,9 @@ function humanize(value: string): string {
 .mint-generated-result__json {
   overflow: auto;
   padding: 1rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color);
   border-radius: 0.75rem;
-  background: var(--color-bg-secondary);
+  background: var(--bg-secondary);
   font-size: 0.8125rem;
   line-height: 1.55;
   white-space: pre-wrap;
@@ -128,18 +128,13 @@ function humanize(value: string): string {
   margin: 0 auto;
 }
 
-.mint-generated-result__plotly {
-  width: 100%;
-  min-height: 24rem;
-}
-
 .mint-generated-result__artifact {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color);
   border-radius: 0.75rem;
   color: var(--color-primary);
   text-decoration: none;