@morscherlab/mint-sdk 1.0.63 → 1.1.0-beta.2

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>

package/src/components/GeneratedPlotlyResult.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type * as PlotlyType from 'plotly.js'
+
+import ChartContainer from './ChartContainer.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)
+})
+</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>
+</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));
+}
+</style>

package/src/components/GeneratedPluginView.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+
+import { generatedJobDefaults, generatedJobFormSchema, normalizeGeneratedJobInput } from '../generated/schema'
+import type { FormSchema } from '../types/form-builder'
+import type {
+  GeneratedAnalysisJob,
+  GeneratedAnalysisResult,
+  GeneratedJobDefinition,
+} from '../types/generated-ui'
+import type { PillNavItem, SidebarToolSection } from '../types'
+import {
+  useGeneratedAnalysis,
+  type GeneratedAnalysisTransport,
+} from '../composables/useGeneratedAnalysis'
+import AlertBox from './AlertBox.vue'
+import EmptyState from './EmptyState.vue'
+import GeneratedResultRenderer from './GeneratedResultRenderer.vue'
+import JobsStatusTray from './JobsStatusTray.vue'
+import LoadingSpinner from './LoadingSpinner.vue'
+import PluginWorkspaceView from './PluginWorkspaceView.vue'
+
+const props = withDefaults(defineProps<{
+  baseUrl: string
+  showStandaloneLabel?: boolean
+  transport?: GeneratedAnalysisTransport
+}>(), {
+  showStandaloneLabel: false,
+})
+
+const generated = useGeneratedAnalysis({
+  baseUrl: props.baseUrl,
+  transport: props.transport,
+})
+const activeDefinitionId = ref('')
+const selectedJobId = ref('')
+const valuesByDefinition = reactive<Record<string, Record<string, unknown>>>({})
+const definitions = computed(() => generated.manifest.value?.jobs ?? [])
+const activeDefinition = computed(() => (
+  definitions.value.find(definition => definition.id === activeDefinitionId.value) ?? null
+))
+
+const pillNav = computed<PillNavItem[]>(() => definitions.value.map(definition => ({
+  id: definition.id,
+  label: definition.title,
+})))
+
+const panels = computed<Record<string, SidebarToolSection[]>>(() => Object.fromEntries(
+  definitions.value.map(definition => [definition.id, [{
+    id: definition.id,
+    label: 'Parameters',
+    subtitle: resourceSummary(definition),
+    defaultOpen: true,
+  }]]),
+))
+
+const forms = computed<Record<string, FormSchema>>(() => Object.fromEntries(
+  definitions.value.map(definition => [definition.id, generatedJobFormSchema(definition)]),
+))
+
+const currentValues = computed(() => valuesByDefinition[activeDefinitionId.value] ?? {})
+const currentJob = computed(() => {
+  const currentSessionId = generated.session.value?.id
+  const currentDefinitionId = activeDefinitionId.value
+  const selected = generated.jobs.value.find(candidate => (
+    candidate.job_id === selectedJobId.value
+    && candidate.status === 'completed'
+    && candidate.metadata.definition_id === currentDefinitionId
+    && candidate.metadata.has_result === true
+  ))
+  return selected ?? generated.jobs.value.find(candidate => (
+    candidate.session_id === currentSessionId
+    && candidate.status === 'completed'
+    && candidate.metadata.definition_id === currentDefinitionId
+    && candidate.metadata.has_result === true
+  ))
+})
+const currentResult = computed<GeneratedAnalysisResult | null>(() => (
+  currentJob.value ? generated.resultForJob(currentJob.value.job_id) : null
+))
+
+watch(definitions, (nextDefinitions) => {
+  for (const definition of nextDefinitions) {
+    valuesByDefinition[definition.id] ??= generatedJobDefaults(definition)
+  }
+  if (!nextDefinitions.some(definition => definition.id === activeDefinitionId.value)) {
+    activeDefinitionId.value = nextDefinitions[0]?.id ?? ''
+  }
+}, { immediate: true })
+
+watch(currentJob, (job) => {
+  if (job) void generated.loadResult(job)
+}, { immediate: true })
+
+function updateValues(values: Record<string, unknown>): void {
+  if (activeDefinitionId.value) valuesByDefinition[activeDefinitionId.value] = { ...values }
+}
+
+async function submitJob(sectionId: string, values: Record<string, unknown>): Promise<void> {
+  const definition = definitions.value.find(candidate => candidate.id === sectionId)
+  if (!definition) return
+  selectedJobId.value = ''
+  valuesByDefinition[definition.id] = { ...values }
+  await generated.submit(definition.id, normalizeGeneratedJobInput(definition, values))
+}
+
+function selectJob(job: GeneratedAnalysisJob): void {
+  selectedJobId.value = job.job_id
+  activeDefinitionId.value = String(job.metadata.definition_id ?? activeDefinitionId.value)
+}
+
+function resourceSummary(definition: GeneratedJobDefinition): string {
+  if (definition.lifecycle === 'service' || definition.profile?.kind === 'service') {
+    return 'Host service'
+  }
+  if (definition.lifecycle === 'staged' || definition.profile?.kind === 'staged') {
+    return 'Staged upload'
+  }
+  return `${definition.cpu} CPU`
+}
+
+onMounted(() => {
+  void generated.initialize().catch(() => undefined)
+})
+</script>
+
+<template>
+  <PluginWorkspaceView
+    :title="generated.manifest.value?.ui.title ?? 'Analysis'"
+    :subtitle="generated.manifest.value?.ui.description"
+    :show-standalone-label="showStandaloneLabel"
+    :show-settings="false"
+    :pill-nav="pillNav"
+    :active-view="activeDefinitionId"
+    :panels="panels"
+    :forms="forms"
+    sidebar-title="Parameters"
+    sidebar-position="left"
+    :values="currentValues"
+    :show-form-actions="true"
+    :form-loading="generated.isSubmitting.value"
+    :form-disabled="generated.isSubmitting.value"
+    @update:active-view="activeDefinitionId = $event"
+    @update:values="updateValues"
+    @form-submit="submitJob"
+  >
+    <main class="mint-generated-workspace">
+      <div v-if="generated.isLoading.value" class="mint-generated-workspace__loading">
+        <LoadingSpinner size="lg" />
+        <span>Loading analysis workspace</span>
+      </div>
+
+      <template v-else>
+        <AlertBox
+          v-if="generated.error.value"
+          type="error"
+          :message="generated.error.value"
+        />
+
+        <header v-if="activeDefinition" class="mint-generated-workspace__header">
+          <div>
+            <p class="mint-generated-workspace__eyebrow">Analysis result</p>
+            <h1>{{ activeDefinition.title }}</h1>
+            <p v-if="activeDefinition.description">{{ activeDefinition.description }}</p>
+          </div>
+          <div class="mint-generated-workspace__resources" aria-label="Job resource requirements">
+            <span>{{ resourceSummary(activeDefinition) }}</span>
+          </div>
+        </header>
+
+        <section class="mint-generated-workspace__result">
+          <GeneratedResultRenderer
+            v-if="currentResult"
+            :result="currentResult"
+          />
+          <EmptyState
+            v-else
+            title="No result yet"
+            description="Set the parameters and run the analysis. Jobs continue independently if you switch tabs."
+            size="md"
+          />
+        </section>
+      </template>
+
+      <JobsStatusTray
+        :source="generated"
+        :teleport-to="false"
+        @select="selectJob"
+      />
+    </main>
+  </PluginWorkspaceView>
+</template>
+
+<style scoped>
+.mint-generated-workspace {
+  position: relative;
+  min-width: 0;
+  min-height: calc(100vh - 5rem);
+  padding: clamp(1rem, 2.5vw, 2.5rem);
+  background: var(--color-bg-primary);
+}
+
+.mint-generated-workspace__loading {
+  display: flex;
+  min-height: 24rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.mint-generated-workspace__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1.5rem;
+  max-width: 76rem;
+  margin: 0 auto 1.25rem;
+}
+
+.mint-generated-workspace__header h1 {
+  margin: 0;
+  color: var(--color-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);
+}
+
+.mint-generated-workspace__eyebrow {
+  margin: 0 0 0.35rem;
+  color: var(--color-text-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.mint-generated-workspace__resources {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.4rem;
+}
+
+.mint-generated-workspace__resources span {
+  padding: 0.3rem 0.55rem;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.mint-generated-workspace__result {
+  max-width: 76rem;
+  min-height: 24rem;
+  margin: 0 auto;
+  padding: clamp(1rem, 2vw, 1.75rem);
+  border: 1px solid var(--color-border);
+  border-radius: 1rem;
+  background: var(--color-bg-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+@media (max-width: 640px) {
+  .mint-generated-workspace__header {
+    flex-direction: column;
+  }
+
+  .mint-generated-workspace__resources {
+    justify-content: flex-start;
+  }
+}
+</style>