@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/components/FormField.story.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import FormField from './FormField.vue'
+import BaseInput from './BaseInput.vue'
+import BaseTextarea from './BaseTextarea.vue'
+</script>
+
+<template>
+  <Story title="Layout/FormField">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+          <FormField
+            :label="state.label"
+            :error="state.showError ? state.error : undefined"
+            :hint="state.showHint ? state.hint : undefined"
+            :required="state.required"
+            :html-for="state.htmlFor"
+          >
+            <input
+              :id="state.htmlFor"
+              type="text"
+              placeholder="Enter value..."
+              style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
+            />
+          </FormField>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.label" title="Label" />
+        <HstCheckbox v-model="state.required" title="Required" />
+        <HstCheckbox v-model="state.showError" title="Show Error" />
+        <HstText v-model="state.error" title="Error Message" />
+        <HstCheckbox v-model="state.showHint" title="Show Hint" />
+        <HstText v-model="state.hint" title="Hint Text" />
+        <HstText v-model="state.htmlFor" title="HTML For" />
+      </template>
+    </Variant>
+
+    <Variant title="With Label">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormField label="Sample Name" html-for="sample-name">
+          <input
+            id="sample-name"
+            type="text"
+            placeholder="e.g., SAMPLE-001"
+            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
+          />
+        </FormField>
+      </div>
+    </Variant>
+
+    <Variant title="Required Field">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormField label="Experiment ID" :required="true" html-for="exp-id">
+          <input
+            id="exp-id"
+            type="text"
+            placeholder="Required field"
+            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
+          />
+        </FormField>
+      </div>
+    </Variant>
+
+    <Variant title="With Hint">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormField label="Concentration" hint="Enter value in micromolar (uM)" html-for="conc">
+          <input
+            id="conc"
+            type="number"
+            placeholder="0.00"
+            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
+          />
+        </FormField>
+      </div>
+    </Variant>
+
+    <Variant title="With Error">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormField label="Plate Barcode" error="Barcode format is invalid. Expected: PLT-XXXX-XXXX" html-for="barcode">
+          <input
+            id="barcode"
+            type="text"
+            value="invalid"
+            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ef4444; border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
+          />
+        </FormField>
+      </div>
+    </Variant>
+
+    <Variant title="Form Example">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <FormField label="Experiment Name" :required="true" html-for="form-name">
+          <input
+            id="form-name"
+            type="text"
+            placeholder="Enter experiment name"
+            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
+          />
+        </FormField>
+        <FormField label="Description" hint="Optional description for this experiment" html-for="form-desc">
+          <textarea
+            id="form-desc"
+            placeholder="Describe the experiment..."
+            rows="3"
+            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); resize: vertical; box-sizing: border-box;"
+          />
+        </FormField>
+        <FormField label="Plate Count" :required="true" error="Must be between 1 and 50" html-for="form-count">
+          <input
+            id="form-count"
+            type="number"
+            value="100"
+            style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ef4444; border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
+          />
+        </FormField>
+      </div>
+    </Variant>
+
+    <Variant title="With required / optional badges">
+      <div style="padding: 2rem; max-width: 420px; display: flex; flex-direction: column; gap: 1rem;">
+        <FormField label="Experiment name" required>
+          <BaseInput model-value="Dose-response screen · Oncology" />
+        </FormField>
+        <FormField label="Notes" :show-optional="true" hint="Add any context future you will thank present you for.">
+          <BaseTextarea model-value="" placeholder="Anything worth remembering…" />
+        </FormField>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/FormField.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/** Wraps a form control with a label, optional hint text, and validation error display. */
+import { computed } from 'vue'
+
+interface Props {
+  label?: string
+  error?: string
+  hint?: string
+  required?: boolean
+  showOptional?: boolean
+  htmlFor?: string
+  fieldId?: string
+}
+
+const props = defineProps<Props>()
+
+const errorId = computed(() =>
+  props.error && props.fieldId ? `${props.fieldId}-error` : undefined
+)
+
+const hintId = computed(() =>
+  !props.error && props.hint && props.fieldId ? `${props.fieldId}-hint` : undefined
+)
+
+const describedBy = computed(() => errorId.value ?? hintId.value)
+</script>
+
+<template>
+  <div class="mint-form-field">
+    <div v-if="label" class="mint-form-field__label-row">
+      <label
+        :for="htmlFor"
+        class="mint-form-field__label"
+      >
+        {{ label }}
+        <span v-if="required" class="mint-form-field__required" aria-hidden="true">*</span>
+      </label>
+      <span
+        v-if="!required && showOptional"
+        class="mint-form-field__optional"
+      >
+        optional
+      </span>
+    </div>
+
+    <slot :described-by="describedBy" />
+
+    <p v-if="error" :id="errorId" class="mint-form-field__error" role="alert">
+      {{ error }}
+    </p>
+    <p v-else-if="hint" :id="hintId" class="mint-form-field__hint">
+      {{ hint }}
+    </p>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/form-field.css';
+</style>

package/src/components/FormulaInput.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import FormulaInput from './FormulaInput.vue'
+
+const formula = ref('')
+const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story title="Scientific/FormulaInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+          <FormulaInput
+            v-model="formula"
+            :show-preview="state.showPreview"
+            :show-m-w="state.showMW"
+            :placeholder="state.placeholder"
+            :error="state.error"
+            :disabled="state.disabled"
+            :size="state.size"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showPreview" title="Show Preview" />
+        <HstCheckbox v-model="state.showMW" title="Show Molecular Weight" />
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Pre-filled Formulas">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">Water</p>
+          <FormulaInput model-value="H2O" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">Glucose</p>
+          <FormulaInput model-value="C6H12O6" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">Calcium Hydroxide</p>
+          <FormulaInput model-value="Ca(OH)2" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">Copper Sulfate Pentahydrate</p>
+          <FormulaInput model-value="CuSO4.5H2O" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <FormulaInput model-value="NaCl" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Without Preview">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormulaInput model-value="H2SO4" :show-preview="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Without Molecular Weight">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormulaInput model-value="CH3COOH" :show-m-w="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormulaInput model-value="H2O" error />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled State">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormulaInput model-value="NaCl" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/FormulaInput.vue

@@ -0,0 +1,125 @@
+<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'
+
+interface Props {
+  modelValue?: string
+  showPreview?: boolean
+  showMW?: boolean
+  placeholder?: string
+  error?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  showPreview: true,
+  showMW: true,
+  placeholder: 'e.g. Ca(OH)2',
+  error: false,
+  disabled: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'mw': [mw: number | null]
+}>()
+
+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)
+}
+
+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 formatMW(value: string): string {
+  const mw = getMW(value)
+  if (mw === null) return ''
+  return `${mw.toFixed(2)} g/mol`
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+  emit('mw', getMW(target.value))
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'mint-formula-input',
+      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>
+          </template>
+        </span>
+        <span
+          v-if="showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null"
+          class="mint-formula-input__mw"
+        >
+          {{ formatMW(modelValue) }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-if="modelValue && getError(modelValue)"
+      class="mint-formula-input__error-text"
+    >
+      {{ getError(modelValue) }}
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/formula-input.css';
+</style>

package/src/components/GeneratedPathInput.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { createGeneratedAnalysisTransport } from '../composables/useGeneratedAnalysis'
+import {
+  getInjectedPlatformContext,
+  resolveCurrentExperimentId,
+} from '../composables/platformContextHelpers'
+import type { AnalysisArtifactDetail } from '../types/analysisArtifactTypes'
+import type { PluginJobPathInput } from '../types/generated-ui'
+import AlertBox from './AlertBox.vue'
+import ArtifactSelectorModal from './ArtifactSelectorModal.vue'
+import BaseButton from './BaseButton.vue'
+import FileUploader from './FileUploader.vue'
+
+interface ArtifactFileReference {
+  key: string
+  plugin_id?: string
+  experiment_id?: number
+  filename?: string
+  content_type?: string
+}
+
+const props = defineProps<{
+  modelValue?: PluginJobPathInput | PluginJobPathInput[] | null
+  disabled?: boolean
+  multiple?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: PluginJobPathInput | PluginJobPathInput[] | null]
+}>()
+
+const mode = ref<'file' | 'folder'>('file')
+const artifactOpen = ref(false)
+const artifactLoading = ref(false)
+const artifactError = ref('')
+const platform = getInjectedPlatformContext()
+const experimentId = resolveCurrentExperimentId(platform)
+const canSelectArtifact = computed(() => Boolean(platform?.isIntegrated && experimentId))
+const transport = createGeneratedAnalysisTransport()
+
+function selectMode(nextMode: 'file' | 'folder'): void {
+  mode.value = nextMode
+  emit('update:modelValue', null)
+}
+
+function selectFiles(
+  files: File[],
+  rootName?: string,
+  relativePaths?: string[],
+): void {
+  const paths = relativePaths ?? files.map(file => file.name)
+  const selections: PluginJobPathInput[] = props.multiple && !rootName
+    ? files.map((file, index) => ({
+        kind: 'path',
+        files: [file],
+        relativePaths: [paths[index] ?? file.name],
+      }))
+    : [{
+        kind: 'path',
+        files,
+        relativePaths: paths,
+        ...(rootName ? { rootName } : {}),
+      }]
+  if (props.multiple) {
+    const existing = Array.isArray(props.modelValue) ? props.modelValue : []
+    emit('update:modelValue', [...existing, ...selections])
+  } else {
+    emit('update:modelValue', selections[0] ?? null)
+  }
+}
+
+function removeFiles(files: File[]): void {
+  const removed = new Set(files)
+  const current = Array.isArray(props.modelValue)
+    ? props.modelValue
+    : props.modelValue
+      ? [props.modelValue]
+      : []
+  const remaining = current.flatMap((selection) => {
+    const indexes = selection.files
+      .map((file, index) => removed.has(file) ? -1 : index)
+      .filter(index => index >= 0)
+    if (!indexes.length) return []
+    return [{
+      ...selection,
+      files: indexes.map(index => selection.files[index]!),
+      relativePaths: indexes.map(index => selection.relativePaths[index]!),
+    }]
+  })
+  emit(
+    'update:modelValue',
+    props.multiple ? remaining : remaining[0] ?? null,
+  )
+}
+
+async function selectArtifact(detail: AnalysisArtifactDetail): Promise<void> {
+  artifactLoading.value = true
+  artifactError.value = ''
+  try {
+    const reference = artifactFileReference(detail)
+    const resolvedExperimentId = reference.experiment_id ?? detail.experiment_id
+    const pluginId = reference.plugin_id ?? detail.plugin_id
+    const baseUrl = (platform?.platformApiUrl ?? '/api').replace(/\/$/, '')
+    const objectPath = reference.key.split('/').map(encodeURIComponent).join('/')
+    const url = `${baseUrl}/experiments/${resolvedExperimentId}/objects/${objectPath}`
+      + `?plugin_id=${encodeURIComponent(pluginId)}&format=raw`
+    const response = await transport(url, { method: 'GET' })
+    if (!response.ok) throw new Error(`Artifact download failed (${response.status})`)
+    const resultFilename = String(detail.result.filename ?? '')
+    const keySegments = reference.key.split('/')
+    const filename = reference.filename
+      || resultFilename
+      || keySegments[keySegments.length - 1]
+      || 'artifact.bin'
+    const contentType = reference.content_type
+      ?? response.headers.get('Content-Type')
+      ?? 'application/octet-stream'
+    const file = new File([await response.blob()], filename, { type: contentType })
+    selectFiles([file], undefined, [filename])
+  } catch (cause) {
+    artifactError.value = cause instanceof Error ? cause.message : 'Failed to load artifact'
+  } finally {
+    artifactLoading.value = false
+  }
+}
+
+function artifactFileReference(detail: AnalysisArtifactDetail): ArtifactFileReference {
+  if (detail.result.schema_version !== 'mint.analysis_file.v1') {
+    throw new Error('Only file-backed analysis artifacts can be used as a path')
+  }
+  const reference = detail.result.file
+  if (!reference || typeof reference !== 'object' || !('key' in reference)) {
+    throw new Error('The selected artifact has no file reference')
+  }
+  const candidate = reference as Record<string, unknown>
+  if (typeof candidate.key !== 'string' || !candidate.key) {
+    throw new Error('The selected artifact has no object key')
+  }
+  return {
+    key: candidate.key,
+    ...(typeof candidate.plugin_id === 'string' ? { plugin_id: candidate.plugin_id } : {}),
+    ...(typeof candidate.experiment_id === 'number'
+      ? { experiment_id: candidate.experiment_id }
+      : {}),
+    ...(typeof candidate.filename === 'string' ? { filename: candidate.filename } : {}),
+    ...(typeof candidate.content_type === 'string'
+      ? { content_type: candidate.content_type }
+      : {}),
+  }
+}
+</script>
+
+<template>
+  <div class="mint-generated-path-input">
+    <div class="mint-generated-path-input__modes" role="group" aria-label="Path type">
+      <BaseButton
+        size="sm"
+        :variant="mode === 'file' ? 'primary' : 'secondary'"
+        :disabled="disabled"
+        @click="selectMode('file')"
+      >
+        File
+      </BaseButton>
+      <BaseButton
+        size="sm"
+        :variant="mode === 'folder' ? 'primary' : 'secondary'"
+        :disabled="disabled"
+        @click="selectMode('folder')"
+      >
+        Folder
+      </BaseButton>
+      <BaseButton
+        v-if="canSelectArtifact"
+        size="sm"
+        variant="secondary"
+        :disabled="disabled"
+        :loading="artifactLoading"
+        @click="artifactOpen = true"
+      >
+        Existing artifact
+      </BaseButton>
+    </div>
+
+    <FileUploader
+      :key="mode"
+      :mode="mode"
+      :multiple="multiple && mode === 'file'"
+      :disabled="disabled"
+      @upload="selectFiles"
+      @remove="removeFiles"
+    />
+
+    <AlertBox v-if="artifactError" type="error" :message="artifactError" />
+    <ArtifactSelectorModal
+      v-if="canSelectArtifact"
+      v-model="artifactOpen"
+      :experiment-id="experimentId"
+      :fetch-detail-on-select="true"
+      title="Select a file artifact"
+      @select-detail="selectArtifact"
+    />
+  </div>
+</template>
+
+<style scoped>
+.mint-generated-path-input {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.mint-generated-path-input__modes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+</style>