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

package/src/components/FileUploader.vue

@@ -19,7 +19,8 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  upload: [files: File[]]
+  upload: [files: File[], rootName?: string, relativePaths?: string[]]
+  remove: [files: File[]]
   error: [message: string]
 }>()
 
@@ -116,20 +117,31 @@ function validateFiles(files: FileList | File[]): File[] {
   return validFiles
 }
 
-function handleFiles(files: FileList | File[], folder?: string) {
+function handleFiles(
+  files: FileList | File[],
+  folder?: string,
+  explicitRelativePaths?: string[],
+) {
+  const candidates = Array.from(files)
   const validFiles = validateFiles(files)
   if (validFiles.length === 0) return
+  const relativePaths = validFiles.map((file) => {
+    const candidateIndex = candidates.indexOf(file)
+    return explicitRelativePaths?.[candidateIndex]
+      || file.webkitRelativePath
+      || (folder ? `${folder}/${file.name}` : file.name)
+  })
 
   if (isFolder.value) {
     folderName.value = folder || extractFolderName(validFiles)
     selectedFiles.value = validFiles
-    emit('upload', validFiles)
+    emit('upload', validFiles, folderName.value ?? undefined, relativePaths)
   } else if (!props.multiple) {
     selectedFiles.value = [validFiles[0]]
-    emit('upload', [validFiles[0]])
+    emit('upload', [validFiles[0]], undefined, [relativePaths[0]])
   } else {
     selectedFiles.value = [...selectedFiles.value, ...validFiles]
-    emit('upload', validFiles)
+    emit('upload', validFiles, undefined, relativePaths)
   }
 }
 
@@ -156,25 +168,39 @@ function handleDrop(event: DragEvent) {
 
 async function handleFolderDrop(items: DataTransferItemList) {
   const files: File[] = []
+  const relativePaths: string[] = []
   let folderNameFromDrop: string | undefined
 
   for (const item of Array.from(items)) {
     const entry = item.webkitGetAsEntry?.()
     if (entry?.isDirectory) {
       folderNameFromDrop = entry.name
-      await readDirectory(entry as FileSystemDirectoryEntry, files)
+      await readDirectory(
+        entry as FileSystemDirectoryEntry,
+        files,
+        relativePaths,
+        entry.name,
+      )
     } else if (entry?.isFile) {
       const file = await getFile(entry as FileSystemFileEntry)
-      if (file) files.push(file)
+      if (file) {
+        files.push(file)
+        relativePaths.push(file.name)
+      }
     }
   }
 
   if (files.length > 0) {
-    handleFiles(files, folderNameFromDrop)
+    handleFiles(files, folderNameFromDrop, relativePaths)
   }
 }
 
-async function readDirectory(directory: FileSystemDirectoryEntry, files: File[]): Promise<void> {
+async function readDirectory(
+  directory: FileSystemDirectoryEntry,
+  files: File[],
+  relativePaths: string[],
+  prefix: string,
+): Promise<void> {
   const reader = directory.createReader()
   // readEntries returns at most 100 entries per call per spec — must loop
   let batch: FileSystemEntry[]
@@ -185,9 +211,17 @@ async function readDirectory(directory: FileSystemDirectoryEntry, files: File[])
     for (const entry of batch) {
       if (entry.isFile) {
         const file = await getFile(entry as FileSystemFileEntry)
-        if (file) files.push(file)
+        if (file) {
+          files.push(file)
+          relativePaths.push(`${prefix}/${file.name}`)
+        }
       } else if (entry.isDirectory) {
-        await readDirectory(entry as FileSystemDirectoryEntry, files)
+        await readDirectory(
+          entry as FileSystemDirectoryEntry,
+          files,
+          relativePaths,
+          `${prefix}/${entry.name}`,
+        )
       }
     }
   } while (batch.length > 0)
@@ -225,15 +259,19 @@ function openFilePicker() {
 }
 
 function removeFile(index: number) {
+  const removed = selectedFiles.value[index]
   selectedFiles.value = selectedFiles.value.filter((_, i) => i !== index)
   if (isFolder.value && selectedFiles.value.length === 0) {
     folderName.value = null
   }
+  if (removed) emit('remove', [removed])
 }
 
 function clearAll() {
+  const removed = [...selectedFiles.value]
   selectedFiles.value = []
   folderName.value = null
+  if (removed.length) emit('remove', removed)
 }
 
 function formatFileSize(bytes: number): string {

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>