@morscherlab/mint-sdk 1.2.0-beta.7 → 1.2.0-beta.9

package/src/components/FormActions.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import FormActions from './FormActions.vue'
+
+function log(event: string) {
+  return () => console.log(event)
+}
+
+function initState() {
+  return {
+    isWizard: false,
+    isFirst: true,
+    isLast: true,
+    canProceed: true,
+    loading: false,
+    disabled: false,
+    showCancel: true,
+    submitLabel: 'Submit',
+    cancelLabel: 'Cancel',
+  }
+}
+</script>
+
+<template>
+  <Story title="Forms/FormActions">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <FormActions
+            :is-wizard="state.isWizard"
+            :is-first="state.isFirst"
+            :is-last="state.isLast"
+            :can-proceed="state.canProceed"
+            :loading="state.loading"
+            :disabled="state.disabled"
+            :show-cancel="state.showCancel"
+            :submit-label="state.submitLabel"
+            :cancel-label="state.cancelLabel"
+            @submit="log('submit')()"
+            @cancel="log('cancel')()"
+            @back="log('back')()"
+            @next="log('next')()"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.isWizard" title="Wizard mode" />
+        <HstCheckbox v-model="state.isFirst" title="First step" />
+        <HstCheckbox v-model="state.isLast" title="Last step" />
+        <HstCheckbox v-model="state.canProceed" title="Can proceed" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.showCancel" title="Show cancel" />
+        <HstText v-model="state.submitLabel" title="Submit label" />
+        <HstText v-model="state.cancelLabel" title="Cancel label" />
+      </template>
+    </Variant>
+
+    <Variant title="Flat form">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions show-cancel submit-label="Save design" />
+      </div>
+    </Variant>
+
+    <Variant title="Wizard — first step">
+      <!-- Back is hidden on the first step; Next gates on `canProceed`. -->
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="true" :is-last="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Wizard — middle step">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="false" :is-last="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Wizard — last step">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="false" :is-last="true" submit-label="Create experiment" />
+      </div>
+    </Variant>
+
+    <Variant title="Blocked by validation">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="false" :is-last="false" :can-proceed="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions show-cancel loading submit-label="Saving…" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/FormActions.vue

@@ -86,7 +86,3 @@ const emit = defineEmits<{
     </BaseButton>
   </div>
 </template>
-
-<style>
-@import '../styles/components/form-builder.css';
-</style>

package/src/components/FormBuilder.vue

@@ -305,7 +305,3 @@ defineExpose({
     </template>
   </div>
 </template>
-
-<style>
-@import '../styles/components/form-builder.css';
-</style>

package/src/components/FormField.vue

@@ -53,7 +53,3 @@ const describedBy = computed(() => errorId.value ?? hintId.value)
     </p>
   </div>
 </template>
-
-<style>
-@import '../styles/components/form-field.css';
-</style>

package/src/components/FormulaInput.vue

@@ -119,7 +119,3 @@ function handleInput(event: Event) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/formula-input.css';
-</style>

package/src/components/GeneratedPathInput.story.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import GeneratedPathInput from './GeneratedPathInput.vue'
+import type { PluginJobPathInput } from '../types/generated-ui'
+
+const single = ref<PluginJobPathInput | PluginJobPathInput[] | null>(null)
+const multiple = ref<PluginJobPathInput | PluginJobPathInput[] | null>([])
+
+function describe(value: PluginJobPathInput | PluginJobPathInput[] | null): string {
+  if (!value) return 'nothing selected'
+  const selections = Array.isArray(value) ? value : [value]
+  if (!selections.length) return 'nothing selected'
+  return selections
+    .map(selection => selection.rootName ?? selection.relativePaths.join(', '))
+    .join(' · ')
+}
+
+function initState() {
+  return {
+    multiple: false,
+    disabled: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Forms/GeneratedPathInput">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <!-- Outside an integrated plugin the "Existing artifact" button is
+             hidden, so the story shows the file/folder modes only. -->
+        <div style="padding: 2rem; max-width: 600px;">
+          <GeneratedPathInput
+            v-model="single"
+            :multiple="state.multiple"
+            :disabled="state.disabled"
+          />
+          <p style="margin-top: 1rem; font-size: 0.8125rem; color: var(--text-secondary);">
+            Selection: <code>{{ describe(single) }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.multiple" title="Allow multiple" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Single path">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="single" />
+      </div>
+    </Variant>
+
+    <Variant title="Multiple paths">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="multiple" multiple />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="single" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -79,9 +79,9 @@ onBeforeUnmount(() => {
 .mint-generated-result__plotly-error {
   margin: 0;
   padding: 1rem;
-  border: 1px solid var(--color-danger-border, var(--color-border));
+  border: 1px solid var(--mint-error-border);
   border-radius: 0.75rem;
-  background: var(--color-danger-bg, var(--color-bg-secondary));
-  color: var(--color-danger-text, var(--color-text-primary));
+  background: var(--mint-error-bg);
+  color: var(--mint-error);
 }
 </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;
@@ -139,7 +139,7 @@ function humanize(value: string): string {
   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;