@morscherlab/mint-sdk 1.4.0-beta.9 → 1.4.1

package/src/components/GeneratedResultRenderer.vue

@@ -130,10 +130,9 @@ function humanize(value: string): string {
 
 .mint-generated-result__json {
   overflow: auto;
-  padding: 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: 0.75rem;
-  background: var(--bg-secondary);
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-md);
+  background: var(--bg-tertiary);
   font-size: 0.8125rem;
   line-height: 1.55;
   white-space: pre-wrap;

package/src/components/JobsStatusTray.story.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { defineComponent, h, onMounted, type PropType } from 'vue'
+import AppTopBar from './AppTopBar.vue'
 import JobsStatusTray from './JobsStatusTray.vue'
-import type { JobStateInput, JobStatus } from '../types/jobs'
+import { useJobCenter } from '../composables/useJobCenter'
+import type { JobState, JobStateInput, JobStatus } from '../types/jobs'
 
 function job(
   status: JobStatus,
@@ -43,13 +46,6 @@ function job(
   }
 }
 
-const mixedJobs = [
-  job('awaiting_input', 'J-104'),
-  job('running', 'J-103'),
-  job('queued', 'J-102'),
-  job('completed', 'J-101'),
-  job('failed', 'J-100'),
-]
 const explicitActionJobs = [
   job('awaiting_input', 'J-201', { can_cancel: true }),
   job('completed', 'J-200', { can_delete: false }),
@@ -57,69 +53,127 @@ const explicitActionJobs = [
 const cancelJob = async () => undefined
 const deleteJob = async () => true
 
-function openJob(jobId: string) {
-  console.info('open', jobId)
+function openJob(selected: JobState) {
+  console.info('open', selected.job_id)
+}
+
+/** The parent owns the job center: it feeds the top-bar chip and the tray. */
+const TrayDemo = defineComponent({
+  props: {
+    jobs: { type: Array as PropType<JobStateInput[]>, required: true },
+    title: { type: String, default: undefined },
+    open: Boolean,
+    confirm: Boolean,
+    /** Show the awaiting-input job as a browser decode, as LEAF does. */
+    decode: Boolean,
+  },
+  setup(props) {
+    // One source object: a new source identity resets the just-completed hold.
+    const center = useJobCenter({
+      source: { jobs: () => props.jobs, cancel: cancelJob, delete: deleteJob },
+      rowJob: row => (props.decode && row.status === 'awaiting_input'
+        ? { status: 'running', percent: 62, message: 'Decoding in the browser · 5/8' }
+        : null),
+      topBarJob: shown => (shown.status === 'completed' ? { status: 'completed', label: `Saved to ${shown.experiment_id}` } : null),
+    })
+    onMounted(() => { if (props.open) center.open() })
+    return () => [
+      h(AppTopBar, {
+        title: 'Peak QC',
+        job: center.topBarJob.value,
+        jobsDone: center.completedCount.value,
+        jobsOpen: center.isOpen.value,
+        jobsPanelId: center.panelId,
+        onJobClick: () => center.handleTopBarClick(openJob),
+      }),
+      h(JobsStatusTray, { center, title: props.title, confirm: props.confirm, onSelect: openJob }, {
+        'job-actions': ({ job: row }: { job: JobState }) => row.status === 'completed'
+          ? h('button', { type: 'button', class: 'mint-jobs-tray__section-action', onClick: () => openJob(row) }, 'Open')
+          : null,
+      }),
+    ]
+  },
+})
+
+function playgroundJobs(percent: number, finished: boolean): JobStateInput[] {
+  const running = finished
+    ? job('completed', 'J-103', { completed_at: '2026-07-14T10:12:00+00:00' })
+    : job('running', 'J-103', {
+        progress: { ...job('running', 'J-103').progress, percent, message: 'Integrating peaks' },
+      })
+  return [
+    job('awaiting_input', 'J-104'),
+    running,
+    job('queued', 'J-102'),
+    job('completed', 'J-101'),
+    job('failed', 'J-100'),
+  ]
 }
 
 function initState() {
   return {
-    title: 'Analysis jobs',
-    jobs: mixedJobs,
+    title: 'Jobs',
+    percent: 37,
+    finished: false,
+    open: true,
+    confirm: false,
+    decode: false,
   }
 }
 </script>
 
 <template>
-  <Story title="Workflow/JobsStatusTray">
+  <Story title="Workflow/JobsStatusTray" :layout="{ type: 'single', iframe: true }">
     <Variant title="Playground" :init-state="initState">
       <template #default="{ state }">
-        <div style="padding: 2rem; min-height: 520px;">
-          <JobsStatusTray
+        <div style="min-height: 560px;">
+          <TrayDemo
+            :key="String(state.open)"
+            :jobs="playgroundJobs(state.percent, state.finished)"
             :title="state.title"
-            :source="{ jobs: state.jobs, cancel: cancelJob, delete: deleteJob }"
-            :load-on-mount="false"
-            :teleport-to="false"
-          >
-            <template #job-actions="{ job }">
-              <button type="button" class="mint-jobs-tray__action" @click="() => openJob(job.job_id)">
-                Open
-              </button>
-            </template>
-          </JobsStatusTray>
+            :open="state.open"
+            :confirm="state.confirm"
+            :decode="state.decode"
+          />
         </div>
       </template>
       <template #controls="{ state }">
         <HstText v-model="state.title" title="Title" />
+        <HstSlider v-model="state.percent" title="Running percent" :min="0" :max="100" />
+        <HstCheckbox v-model="state.finished" title="Running job completed (6 s chip)" />
+        <HstCheckbox v-model="state.open" title="Open on mount" />
+        <HstCheckbox v-model="state.confirm" title="Confirm cancel, delete and clear" />
+        <HstCheckbox v-model="state.decode" title="Row override: J-104 as a browser decode" />
       </template>
     </Variant>
 
+    <Variant title="Confirm and row override">
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="playgroundJobs(37, false)" open confirm decode />
+      </div>
+    </Variant>
+
     <Variant title="Awaiting input">
-      <div style="padding: 2rem; min-height: 520px;">
-        <JobsStatusTray
-          :source="{ jobs: [job('awaiting_input', 'J-301')] }"
-          :load-on-mount="false"
-          :teleport-to="false"
-        />
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="[job('awaiting_input', 'J-301')]" open />
       </div>
     </Variant>
 
     <Variant title="Explicit actions">
-      <div style="padding: 2rem; min-height: 520px;">
-        <JobsStatusTray
-          :source="{ jobs: explicitActionJobs, cancel: cancelJob, delete: deleteJob }"
-          :load-on-mount="false"
-          :teleport-to="false"
-        />
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="explicitActionJobs" open />
+      </div>
+    </Variant>
+
+    <Variant title="Idle with completed jobs">
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="[job('completed', 'J-401'), job('completed', 'J-402'), job('cancelled', 'J-403')]" />
       </div>
     </Variant>
 
     <Variant title="Empty">
-      <div style="padding: 2rem; min-height: 520px;">
-        <JobsStatusTray
-          :source="{ jobs: [] }"
-          :load-on-mount="false"
-          :teleport-to="false"
-        />
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="[]" open />
       </div>
     </Variant>
   </Story>