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

package/src/components/FitPanel.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 /** Control panel for running a curve-fit job with progress bar, results table, and error display. */
 import { computed } from 'vue'
-import type { FitState, FitResultSummary } from '../types'
+import type { FitState, FitResultSummary, FitSeries, FitColumnLabels } from '../types'
 import BaseButton from './BaseButton.vue'
+import SegmentedControl from './SegmentedControl.vue'
+import { SAMPLE_GROUP_TOKENS } from '../utils/color'
 import ProgressBar from './ProgressBar.vue'
 import AlertBox from './AlertBox.vue'
 
@@ -16,6 +18,10 @@ interface Props {
   runLabel?: string
   cancelLabel?: string
   disabled?: boolean
+  /** Several fitted series, switched by a group-color segmented control. Supersedes `results`. */
+  series?: FitSeries[]
+  /** Header labels of the parameter table. */
+  columnLabels?: FitColumnLabels
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,15 +40,34 @@ const emit = defineEmits<{
   cancel: []
 }>()
 
+/** Index of the shown series (`v-model:active-series`). */
+const activeSeries = defineModel<number>('activeSeries', { default: 0 })
+
+const seriesOptions = computed(() => (props.series ?? []).map((item, index) => ({
+  value: index,
+  label: item.label,
+  color: item.color ?? SAMPLE_GROUP_TOKENS[index % SAMPLE_GROUP_TOKENS.length],
+})))
+
+const shownResults = computed(() => props.series?.length
+  ? (props.series[activeSeries.value] ?? props.series[0]).results
+  : props.results)
+
+const labels = computed(() => ({ parameter: 'Parameter', value: 'Value', ci: '95% CI', ...props.columnLabels }))
+
 const isRunning = computed(() => props.state === 'running')
 const showRunButton = computed(() => !isRunning.value)
-const showResults = computed(() => props.state === 'completed' && props.results.length > 0)
+// The series switch lives in the results block, so any series with results keeps it reachable.
+const showResults = computed(() => props.state === 'completed'
+  && (props.series?.length ? props.series.some(item => item.results.length > 0) : props.results.length > 0))
 const showError = computed(() => props.state === 'error' && props.errorMessage)
 
-function variantClass(variant?: string): string {
-  if (!variant || variant === 'default') return ''
-  return `mint-fit-panel__result-value--${variant}`
-}
+// Values are never colored (9b): a result marked `verdict` moves to the check
+// row, where the verdict is carried by an icon shape (from `variant`) and the text.
+const isVerdict = (item: FitResultSummary) => !!item.verdict
+const tableResults = computed(() => shownResults.value.filter(item => !isVerdict(item)))
+const checkResults = computed(() => shownResults.value.filter(isVerdict))
+const showCi = computed(() => tableResults.value.some(item => item.ci !== undefined))
 </script>
 
 <template>
@@ -87,20 +112,47 @@ function variantClass(variant?: string): string {
     <!-- Results -->
     <div v-if="showResults" class="mint-fit-panel__results">
       <slot name="results">
-        <div class="mint-fit-panel__result-list">
-          <div
-            v-for="(item, idx) in results"
+        <div v-if="seriesOptions.length" class="mint-fit-panel__series">
+          <SegmentedControl v-model="activeSeries" :options="seriesOptions" size="sm" />
+        </div>
+        <table v-if="tableResults.length" class="mint-fit-panel__result-list">
+          <thead>
+            <tr class="mint-fit-panel__result-head">
+              <th scope="col">{{ labels.parameter }}</th>
+              <th scope="col" class="mint-fit-panel__result-num">{{ labels.value }}</th>
+              <th v-if="showCi" scope="col" class="mint-fit-panel__result-num">{{ labels.ci }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(item, idx) in tableResults"
+              :key="idx"
+              class="mint-fit-panel__result-row"
+            >
+              <th scope="row" class="mint-fit-panel__result-label">
+                {{ item.label }}<span v-if="item.unit" class="mint-fit-panel__result-unit">{{ item.unit }}</span>
+              </th>
+              <td class="mint-fit-panel__result-value mint-fit-panel__result-num">{{ item.value }}</td>
+              <td v-if="showCi" class="mint-fit-panel__result-ci mint-fit-panel__result-num">{{ item.ci }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-if="checkResults.length" class="mint-fit-panel__checks">
+          <span
+            v-for="(item, idx) in checkResults"
             :key="idx"
-            class="mint-fit-panel__result-row"
+            :class="['mint-fit-panel__check', `mint-fit-panel__check--${item.variant ?? 'default'}`]"
           >
-            <span class="mint-fit-panel__result-label">{{ item.label }}</span>
-            <span
-              class="mint-fit-panel__result-value"
-              :class="variantClass(item.variant)"
-            >
-              {{ item.value }}
-            </span>
-          </div>
+            <svg class="mint-fit-panel__check-icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path v-if="item.variant === 'success'" class="mint-fit-panel__check-stroke" d="M3.5 8.5l3 3 6-7" />
+              <g v-else>
+                <path v-if="item.variant === 'warning'" class="mint-fit-panel__check-shape" d="M8 1.5l7 12.5H1z" />
+                <circle v-else class="mint-fit-panel__check-shape" cx="8" cy="8" r="7" />
+                <path class="mint-fit-panel__check-mark" d="M8 6v3M8 11.5v.01" />
+              </g>
+            </svg>
+            {{ item.label }} {{ item.value }}
+          </span>
         </div>
       </slot>
     </div>

package/src/components/FormField.vue

@@ -9,6 +9,7 @@ interface Props {
   required?: boolean
   showOptional?: boolean
   htmlFor?: string
+  /** Prefix for the label (`-label`), error and hint ids. */
   fieldId?: string
   /** `row` puts the label left and the control in a fixed 7.5rem column. Use for numbers, toggles, short enums. */
   layout?: 'stacked' | 'row'
@@ -33,6 +34,7 @@ const describedBy = computed(() => errorId.value ?? hintId.value)
   <div :class="['mint-form-field', layout === 'row' ? 'mint-form-field--row' : '']">
     <div v-if="label" class="mint-form-field__label-row">
       <label
+        :id="fieldId ? `${fieldId}-label` : undefined"
         :for="htmlFor"
         class="mint-form-field__label"
       >

package/src/components/FormulaInput.story.vue

@@ -87,6 +87,12 @@ const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
       </div>
     </Variant>
 
+    <Variant title="Unknown Symbol">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormulaInput model-value="C6H12Xx" />
+      </div>
+    </Variant>
+
     <Variant title="Disabled State">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormulaInput model-value="NaCl" disabled />

package/src/components/FormulaInput.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
-/** Text input for chemical formulas (e.g. Ca(OH)₂) with live rendered preview and calculated molecular weight display. */
-import { useChemicalFormula, type FormulaPart } from '../composables/useChemicalFormula'
+/**
+ * Text input for chemical formulas (e.g. Ca(OH)2, CuSO4·5H2O). Blurred, the field shows the rendered
+ * formula; focused, the raw text. A fixed segment shows the molecular weight; an unknown symbol puts
+ * the field in the error state and names the symbol.
+ */
+import { computed, ref } from 'vue'
+import { useChemicalFormula } from '../composables/useChemicalFormula'
 
 interface Props {
   modelValue?: string
@@ -12,7 +17,7 @@ interface Props {
   size?: 'sm' | 'md' | 'lg'
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   modelValue: '',
   showPreview: true,
   showMW: true,
@@ -29,40 +34,26 @@ const emit = defineEmits<{
 
 const { parseFormula, calculateMW, renderFormulaParts } = useChemicalFormula()
 
-function getParseResult(value: string) {
-  if (!value) return null
-  return parseFormula(value)
-}
-
-function getMW(value: string): number | null {
-  const result = getParseResult(value)
-  if (!result || !result.valid) return null
-  return calculateMW(result.elements)
-}
-
-function getParts(value: string): FormulaPart[] {
-  if (!value) return []
-  return renderFormulaParts(value)
-}
+const focused = ref(false)
 
-function getError(value: string): string | null {
-  if (!value) return null
-  const result = getParseResult(value)
-  if (!result) return null
-  if (!result.valid) return result.error || 'Invalid formula'
-  return null
+function analyse(value: string) {
+  if (!value.trim()) return { mw: null, error: null }
+  const result = parseFormula(value)
+  if (!result.valid) return { mw: null, error: result.error || 'Invalid formula' }
+  return { mw: calculateMW(result.elements), error: null }
 }
 
-function formatMW(value: string): string {
-  const mw = getMW(value)
-  if (mw === null) return ''
-  return `${mw.toFixed(2)} g/mol`
-}
+const analysis = computed(() => analyse(props.modelValue))
+const parts = computed(() => renderFormulaParts(props.modelValue))
+const showRendered = computed(() =>
+  props.showPreview && !focused.value && Boolean(props.modelValue.trim()) && !analysis.value.error,
+)
+const mwText = computed(() => (analysis.value.mw === null ? '—' : analysis.value.mw.toFixed(2)))
 
 function handleInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', target.value)
-  emit('mw', getMW(target.value))
+  const value = (event.target as HTMLInputElement).value
+  emit('update:modelValue', value)
+  emit('mw', analyse(value).mw)
 }
 </script>
 
@@ -70,52 +61,40 @@ function handleInput(event: Event) {
   <div
     :class="[
       'mint-formula-input',
-      error ? 'mint-formula-input--error' : '',
+      error || analysis.error ? 'mint-formula-input--error' : '',
       disabled ? 'mint-formula-input--disabled' : '',
     ]"
   >
-    <div class="mint-formula-input__field">
-      <input
-        type="text"
-        :value="modelValue"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :class="[
-          'mint-formula-input__input',
-          `mint-formula-input__input--${size}`,
-        ]"
-        aria-label="Chemical formula"
-        @input="handleInput"
-      />
-
-      <div
-        v-if="(showPreview && modelValue) || (showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null)"
-        class="mint-formula-input__preview"
-      >
-        <span v-if="showPreview && modelValue" class="mint-formula-input__preview-formula">
-          <template v-for="(part, i) in getParts(modelValue)" :key="i">
-            <span v-if="part.type === 'element'">{{ part.text }}</span>
-            <span v-else-if="part.type === 'subscript'" style="vertical-align: sub; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
-            <span v-else-if="part.type === 'superscript'" style="vertical-align: super; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
-            <span v-else-if="part.type === 'paren'" style="color: var(--text-secondary);">{{ part.text }}</span>
-            <span v-else-if="part.type === 'dot'" style="margin: 0 0.125em; color: var(--text-muted);">{{ part.text }}</span>
-            <span v-else-if="part.type === 'charge'" style="vertical-align: super; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
+    <div :class="['mint-formula-input__field', `mint-formula-input__field--${size}`]">
+      <div class="mint-formula-input__entry">
+        <input
+          type="text"
+          :value="modelValue"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :aria-invalid="error || Boolean(analysis.error) || undefined"
+          spellcheck="false"
+          autocomplete="off"
+          :class="['mint-formula-input__input', showRendered ? 'mint-formula-input__input--masked' : '']"
+          aria-label="Chemical formula"
+          @input="handleInput"
+          @focus="focused = true"
+          @blur="focused = false"
+        />
+        <span v-if="showRendered" class="mint-formula-input__rendered" aria-hidden="true">
+          <template v-for="(part, i) in parts" :key="i">
+            <span v-if="part.type === 'subscript'" class="mint-formula-input__sub">{{ part.text }}</span>
+            <span v-else-if="part.type === 'superscript' || part.type === 'charge'" class="mint-formula-input__sup">{{ part.text }}</span>
+            <span v-else-if="part.type === 'dot'" class="mint-formula-input__dot">{{ part.text }}</span>
+            <span v-else>{{ part.text }}</span>
           </template>
         </span>
-        <span
-          v-if="showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null"
-          class="mint-formula-input__mw"
-        >
-          {{ formatMW(modelValue) }}
-        </span>
       </div>
+      <span v-if="showMW" class="mint-formula-input__mw"><span class="mint-formula-input__mw-label">MW</span> <span class="mint-formula-input__mw-value">{{ mwText }}</span> <span class="mint-formula-input__mw-unit">g/mol</span></span>
     </div>
 
-    <div
-      v-if="modelValue && getError(modelValue)"
-      class="mint-formula-input__error-text"
-    >
-      {{ getError(modelValue) }}
+    <div v-if="analysis.error" class="mint-formula-input__error-text">
+      {{ analysis.error }}
     </div>
   </div>
 </template>

package/src/components/GeneratedPathInput.story.vue

@@ -1,17 +1,98 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { defineComponent, onUnmounted, provide, ref, type PropType } from 'vue'
 import GeneratedPathInput from './GeneratedPathInput.vue'
-import type { PluginJobPathInput } from '../types/generated-ui'
+import { GENERATED_JOBS_API_KEY } from './internal/generatedJobsApi'
+import type { PluginJobPathSelection } from '../types/generated-ui'
 
-const single = ref<PluginJobPathInput | PluginJobPathInput[] | null>(null)
-const multiple = ref<PluginJobPathInput | PluginJobPathInput[] | null>([])
+type PathValue = PluginJobPathSelection | PluginJobPathSelection[] | null
 
-function describe(value: PluginJobPathInput | PluginJobPathInput[] | null): string {
+// Pretend to be integrated on experiment 42 so the "Existing artifact"
+// button shows. Set before the child components run their setup; kept in a
+// function so Histoire does not try to sync `window` into variant state.
+function integrateOnExperiment42(): () => void {
+  const host = window as unknown as { __MINT_PLATFORM__?: unknown }
+  const previous = host.__MINT_PLATFORM__
+  host.__MINT_PLATFORM__ = {
+    isIntegrated: true,
+    platformApiUrl: '/api',
+    theme: 'system',
+    currentExperimentId: 42,
+  }
+  return () => { host.__MINT_PLATFORM__ = previous }
+}
+onUnmounted(integrateOnExperiment42())
+
+const now = '2026-09-20T10:00:00Z'
+// What the plugin's GET /jobs/artifacts returns: only file artifacts it may read.
+const readable = [
+  {
+    id: 7,
+    experiment_id: 42,
+    plugin_id: 'leaf',
+    artifact_key: 'feature-matrix',
+    display_name: 'Feature matrix',
+    status: 'active',
+    result_keys: ['schema_version', 'kind', 'filename', 'file'],
+    created_at: now,
+    updated_at: now,
+    filename: 'feature-matrix.csv',
+  },
+  {
+    id: 9,
+    experiment_id: 42,
+    plugin_id: 'peak-qc',
+    artifact_key: 'qc-report',
+    display_name: 'QC report',
+    status: 'active',
+    result_keys: ['schema_version', 'kind', 'filename', 'file'],
+    created_at: now,
+    updated_at: now,
+    filename: 'qc-report.pdf',
+  },
+]
+
+const noRows: unknown[] = []
+
+/** Stands in for GeneratedPluginView: provides a jobs API that lists `rows`. */
+const JobsApi = defineComponent({
+  props: { rows: { type: Array as PropType<unknown[]>, required: true } },
+  setup(props, { slots }) {
+    provide(GENERATED_JOBS_API_KEY, {
+      baseUrl: '/api/demo',
+      transport: async () => new Response(JSON.stringify({ artifacts: props.rows }), {
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    })
+    return () => slots.default?.()
+  },
+})
+
+const artifactSelection = {
+  kind: 'artifact-path',
+  experimentId: 42,
+  artifactId: 7,
+  name: 'feature-matrix.csv',
+} as const
+
+const single = ref<PathValue>(null)
+const multiple = ref<PathValue>([])
+const withArtifact = ref<PathValue>(artifactSelection)
+const mixed = ref<PathValue>([
+  { kind: 'path', files: [new File(['a,b\n1,2\n'], 'samples.csv')], relativePaths: ['samples.csv'] },
+  artifactSelection,
+])
+const disabledArtifact = ref<PathValue>(artifactSelection)
+const picked = ref<PathValue>(null)
+const nothingReadable = ref<PathValue>(null)
+
+function describe(value: PathValue): 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(', '))
+    .map(selection => selection.kind === 'artifact-path'
+      ? `artifact ${selection.artifactId} (${selection.name})`
+      : selection.rootName ?? selection.relativePaths.join(', '))
     .join(' · ')
 }
 
@@ -27,8 +108,6 @@ function initState() {
   <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"
@@ -59,10 +138,44 @@ function initState() {
       </div>
     </Variant>
 
+    <Variant title="Artifact selected">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="withArtifact" />
+      </div>
+    </Variant>
+
+    <Variant title="Upload and artifact">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="mixed" multiple />
+      </div>
+    </Variant>
+
     <Variant title="Disabled">
       <div style="padding: 2rem; max-width: 600px;">
         <GeneratedPathInput v-model="single" disabled />
       </div>
     </Variant>
+
+    <Variant title="Disabled with artifact">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="disabledArtifact" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="Artifact picker">
+      <div style="padding: 2rem; max-width: 600px;">
+        <JobsApi :rows="readable">
+          <GeneratedPathInput v-model="picked" />
+        </JobsApi>
+      </div>
+    </Variant>
+
+    <Variant title="Artifact picker, nothing readable">
+      <div style="padding: 2rem; max-width: 600px;">
+        <JobsApi :rows="noRows">
+          <GeneratedPathInput v-model="nothingReadable" />
+        </JobsApi>
+      </div>
+    </Variant>
   </Story>
 </template>