@morscherlab/mint-sdk 1.2.0-beta.14 → 1.2.0-beta.16

package/src/components/FilePicker.story.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseButton from './BaseButton.vue'
+import FilePicker from './FilePicker.vue'
+import type { PickerAdapter, PickerNode } from '../types/filePicker'
+
+const open = ref(true)
+const hideRestricted = ref(true)
+const nodes: PickerNode[] = [
+  { kind: 'folder', path: 'shared', name: 'Shared data' },
+  { kind: 'folder', path: 'restricted', name: 'Restricted data' },
+  { kind: 'file', path: 'shared/run.raw', parentPath: 'shared', name: 'run.raw', format: 'raw', bytes: 4096 },
+  { kind: 'file', path: 'restricted/private.raw', parentPath: 'restricted', name: 'private.raw', format: 'raw', bytes: 2048 },
+]
+const adapter: PickerAdapter = {
+  listRoot: async () => nodes.filter((node) => !node.parentPath),
+  listChildren: async (path) => nodes.filter((node) => node.parentPath === path),
+  search: async (query, scope) => nodes.filter((node) =>
+    (scope.recursive ? !scope.path || node.path.startsWith(`${scope.path}/`) : (node.parentPath ?? '') === scope.path)
+    && node.name.toLowerCase().includes(query.toLowerCase()),
+  ),
+}
+// The host owns this rule; its server must also enforce access independently.
+const systemFilter = (node: PickerNode) => !hideRestricted.value || !node.path.startsWith('restricted')
+</script>
+
+<template>
+  <Story title="Forms/FilePicker">
+    <Variant title="Local upload and system filter">
+      <div style="padding: 2rem; max-width: 600px;">
+        <BaseButton @click="open = true">Choose data</BaseButton>
+        <FilePicker
+          v-model:open="open"
+          :adapter="adapter"
+          :sources="['localFile', 'server']"
+          :system-filter="systemFilter"
+        />
+      </div>
+      <template #controls>
+        <HstCheckbox v-model="hideRestricted" title="Hide restricted server data" />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/FilePicker.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 /** Adapter-driven file picker with Finder-style selection, disclosure and metadata preview. */
+import { ref } from 'vue'
 import BaseButton from './BaseButton.vue'
 import BaseInput from './BaseInput.vue'
 import IconButton from './IconButton.vue'
+import FileUploader from './FileUploader.vue'
 import FileBrowserDialogInternal from './internal/FileBrowserDialogInternal.vue'
 import FilePickerTreeInternal from './internal/FilePickerTreeInternal.vue'
 import FilePickerPreviewInternal from './internal/FilePickerPreviewInternal.vue'
@@ -12,6 +14,7 @@ import { pickerReason } from '../composables/filePicker/validation'
 import type {
   PickerAdapter,
   PickerCapabilities,
+  PickerNode,
   PickerSelection,
   PickerSelectionMode,
   PickerSource,
@@ -26,6 +29,8 @@ interface Props {
   initialPath?: string
   initialSelection?: PickerSelection | null
   title?: string
+  /** Host-owned visibility/selection filter; backend must still enforce access. */
+  systemFilter?: (node: PickerNode, source: PickerSource) => boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   selectionMode: 'folder+files',
@@ -40,6 +45,7 @@ const emit = defineEmits<{
   select: [selection: PickerSelection]
   cancel: []
 }>()
+const uploadError = ref('')
 const {
   previewNode,
   sourceNames,
@@ -63,10 +69,7 @@ const {
   focused,
   resolving,
   resolutionError,
-  filesInput,
-  folderInput,
   searchArea,
-  accept,
   confirmLabel,
   folderCount,
   canConfirm,
@@ -92,7 +95,7 @@ const {
     @close="cancel"
   >
     <template #header>
-      <div ref="searchArea" class="mint-picker__search">
+      <div v-if="source === 'server'" ref="searchArea" class="mint-picker__search">
         <svg
           viewBox="0 0 24 24"
           fill="none"
@@ -110,6 +113,7 @@ const {
         />
         <kbd>/</kbd>
       </div>
+      <h2 v-else class="mint-file-browser__title mint-picker__local-title">{{ title }}</h2>
       <div
         v-if="allowedSources.length > 1"
         class="mint-picker__sources"
@@ -140,7 +144,7 @@ const {
       </div>
     </template>
     <div :key="source" class="mint-picker mint-picker__source-panel" @keydown="keyboard">
-      <div class="mint-picker__pathbar">
+      <div v-if="source === 'server'" class="mint-picker__pathbar">
         <IconButton
           label="Up one level"
           size="sm"
@@ -190,47 +194,25 @@ const {
         No data sources are enabled.
       </div>
       <template v-else>
-        <div v-if="source === 'localFile'" class="mint-picker__local-actions">
-          <input
-            ref="filesInput"
-            type="file"
+        <div v-if="source === 'localFile'" class="mint-picker__local-upload">
+          <FileUploader
+            size="lg"
+            :mode="selectionMode === 'folder' ? 'folder' : selectionMode === 'single-file' ? 'file' : 'file+folder'"
             :multiple="selectionMode !== 'single-file'"
-            :accept="accept"
-            hidden
-            @change="chooseLocal"
+            :show-files="false"
+            @upload="(...args) => { uploadError = ''; chooseLocal(...args) }"
+            @error="uploadError = $event"
           />
-          <input
-            ref="folderInput"
-            type="file"
-            webkitdirectory
-            multiple
-            hidden
-            @change="chooseLocal"
-          />
-          <BaseButton
-            v-if="selectionMode !== 'folder'"
-            variant="secondary"
-            size="sm"
-            @click="filesInput?.click()"
-            >Choose files…</BaseButton
-          >
-          <BaseButton
-            v-if="selectionMode !== 'single-file'"
-            variant="secondary"
-            size="sm"
-            @click="folderInput?.click()"
-            >Choose folder…</BaseButton
-          >
-          <span>Files stay in this browser.</span>
+          <p v-if="uploadError || error || resolutionError" role="alert">
+            {{ uploadError || error || resolutionError }}
+          </p>
         </div>
-        <div class="mint-picker__workspace">
+        <div v-else class="mint-picker__workspace">
           <FilePickerTreeInternal
             :empty-title="
               path
                 ? 'No readable files'
-                : source === 'localFile'
-                  ? 'No files chosen'
-                  : 'No server locations configured'
+                : 'No server locations configured'
             "
             :rows="rows"
             :loading="loading"
@@ -274,12 +256,13 @@ const {
           <span v-if="roots.length">{{ resolving ? 'Checking…' : formatBytes(chosen.bytes) }}</span>
           <span v-else>No selection</span>
           <BaseButton
-            v-if="chosen.excluded.length"
+            v-if="chosen.excluded.length && source === 'server'"
             variant="ghost"
             size="sm"
             @click="reviewing = !reviewing"
             >{{ chosen.excluded.length }} skipped</BaseButton
           >
+          <span v-else-if="chosen.excluded.length">{{ chosen.excluded.length }} skipped</span>
           <BaseButton
             v-if="capability?.isBlank"
             size="sm"

package/src/components/FileUploader.vue

@@ -8,7 +8,9 @@ interface Props {
   maxSize?: number
   disabled?: boolean
   size?: 'sm' | 'md' | 'lg'
-  mode?: 'file' | 'folder'
+  mode?: 'file' | 'folder' | 'file+folder'
+  /** Hide the selection list when a parent presents the files itself. */
+  showFiles?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -16,6 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   size: 'md',
   mode: 'file',
+  showFiles: true,
 })
 
 const emit = defineEmits<{
@@ -30,9 +33,10 @@ const selectedFiles = ref<File[]>([])
 const folderName = ref<string | null>(null)
 
 const isFolder = computed(() => props.mode === 'folder')
+const isMixed = computed(() => props.mode === 'file+folder')
 
 const acceptLabel = computed(() => {
-  if (!props.accept) return 'any file'
+  if (!props.accept) return isFolder.value ? 'a folder' : 'any file'
   return props.accept.split(',').map(a => a.trim().replace('.', '').toUpperCase()).join(', ')
 })
 
@@ -154,15 +158,19 @@ function extractFolderName(files: File[]): string | null {
   return null
 }
 
-function handleDrop(event: DragEvent) {
+async function handleDrop(event: DragEvent) {
   event.preventDefault()
   isDragOver.value = false
   if (props.disabled) return
 
-  if (isFolder.value && event.dataTransfer?.items) {
-    handleFolderDrop(event.dataTransfer.items)
-  } else if (event.dataTransfer?.files) {
-    handleFiles(event.dataTransfer.files)
+  try {
+    if (props.mode !== 'file' && event.dataTransfer?.items?.length) {
+      await handleFolderDrop(event.dataTransfer.items)
+    } else if (event.dataTransfer?.files) {
+      handleFiles(event.dataTransfer.files)
+    }
+  } catch (cause) {
+    emit('error', cause instanceof Error ? cause.message : 'Could not read the dropped folder.')
   }
 }
 
@@ -171,8 +179,12 @@ async function handleFolderDrop(items: DataTransferItemList) {
   const relativePaths: string[] = []
   let folderNameFromDrop: string | undefined
 
-  for (const item of Array.from(items)) {
+  // Capture live drag data before awaiting: the browser protects it after the drop handler.
+  const dropped = Array.from(items, (item) => {
     const entry = item.webkitGetAsEntry?.()
+    return { entry, file: entry ? null : item.getAsFile?.() }
+  })
+  for (const { entry, file: droppedFile } of dropped) {
     if (entry?.isDirectory) {
       folderNameFromDrop = entry.name
       await readDirectory(
@@ -181,8 +193,10 @@ async function handleFolderDrop(items: DataTransferItemList) {
         relativePaths,
         entry.name,
       )
-    } else if (entry?.isFile) {
-      const file = await getFile(entry as FileSystemFileEntry)
+    } else {
+      const file = entry?.isFile
+        ? await getFile(entry as FileSystemFileEntry)
+        : droppedFile
       if (file) {
         files.push(file)
         relativePaths.push(file.name)
@@ -291,7 +305,11 @@ function formatFileSize(bytes: number): string {
     <div
       role="button"
       tabindex="0"
-      :aria-label="disabled ? 'File upload disabled' : 'Click or drag files to upload'"
+      :aria-label="disabled
+        ? 'File upload disabled'
+        : isMixed
+          ? 'Drop files or a folder, or click to choose files'
+          : isFolder ? 'Click or drag a folder to upload' : 'Click or drag files to upload'"
       :aria-disabled="disabled"
       :class="[
         'mint-file-uploader__dropzone',
@@ -345,7 +363,7 @@ function formatFileSize(bytes: number): string {
         </svg>
 
         <p class="mint-file-uploader__text">
-          Drop {{ acceptLabel }} or click
+          {{ isMixed ? 'Drop files or a folder, or click to choose files' : `Drop ${acceptLabel} or click` }}
         </p>
       </div>
     </div>
@@ -356,7 +374,7 @@ function formatFileSize(bytes: number): string {
     </div>
 
     <!-- Folder summary display -->
-    <div v-if="isFolder && folderName && selectedFiles.length > 0" class="mint-file-uploader__folder-summary">
+    <div v-if="showFiles && isFolder && folderName && selectedFiles.length > 0" class="mint-file-uploader__folder-summary">
       <div class="mint-file-uploader__folder-info">
         <div class="mint-file-uploader__folder-icon-wrapper">
           <svg class="mint-file-uploader__folder-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
@@ -382,7 +400,7 @@ function formatFileSize(bytes: number): string {
 
     <!-- File list display -->
     <TransitionGroup
-      v-if="!isFolder && selectedFiles.length > 0"
+      v-if="showFiles && !isFolder && selectedFiles.length > 0"
       tag="ul"
       name="mint-file-uploader-item"
       class="mint-file-uploader__list"

package/src/components/GeneratedPlotlyResult.vue

@@ -1,87 +1,52 @@
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type * as PlotlyType from 'plotly.js'
+import { computed, toRaw } from 'vue'
 
-import ChartContainer from './ChartContainer.vue'
+import PlotlyChart from './PlotlyChart.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)
+const data = computed<PlotlyType.Data[]>(() => {
+  const traces = toRaw(props.spec).data
+  return Array.isArray(traces) ? [...toRaw(traces)] as PlotlyType.Data[] : []
 })
+const layout = computed<Partial<PlotlyType.Layout>>(() => (
+  props.spec.layout && typeof props.spec.layout === 'object'
+    ? props.spec.layout as Partial<PlotlyType.Layout>
+    : {}
+))
+const config = computed<Partial<PlotlyType.Config>>(() => (
+  props.spec.config && typeof props.spec.config === 'object'
+    ? props.spec.config as Partial<PlotlyType.Config>
+    : {}
+))
 </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>
+  <PlotlyChart
+    title="Interactive chart"
+    :data="data"
+    :layout="layout"
+    :config="config"
+  >
+    <template v-if="fallback" #error>
+      <img
+        class="mint-generated-result__image"
+        :src="`data:${fallback.media_type};base64,${fallback.data}`"
+        alt="Static Plotly chart fallback"
+      >
+    </template>
+  </PlotlyChart>
 </template>
 
 <style scoped>
-.mint-generated-result__plotly-error {
-  margin: 0;
-  padding: 1rem;
-  border: 1px solid var(--mint-error-border);
-  border-radius: 0.75rem;
-  background: var(--mint-error-bg);
-  color: var(--mint-error);
+.mint-generated-result__image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
 }
 </style>

package/src/components/GeneratedResultRenderer.vue

@@ -128,11 +128,6 @@ function humanize(value: string): string {
   margin: 0 auto;
 }
 
-.mint-generated-result__plotly {
-  width: 100%;
-  min-height: 24rem;
-}
-
 .mint-generated-result__artifact {
   display: flex;
   align-items: center;

package/src/components/PlotlyChart.story.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type * as Plotly from 'plotly.js'
+
+import PlotlyChart from './PlotlyChart.vue'
+
+const data: Plotly.Data[] = [
+  {
+    type: 'scatter',
+    mode: 'lines+markers',
+    name: 'Control',
+    x: ['0 h', '6 h', '12 h', '24 h'],
+    y: [1, 1.3, 1.8, 2.1],
+  },
+  {
+    type: 'scatter',
+    mode: 'lines+markers',
+    name: 'Treatment',
+    x: ['0 h', '6 h', '12 h', '24 h'],
+    y: [1, 1.8, 3.1, 4.4],
+  },
+]
+
+const layout: Partial<Plotly.Layout> = {
+  margin: { t: 24, r: 24, b: 56, l: 56 },
+  xaxis: { title: { text: 'Time' } },
+  yaxis: { title: { text: 'Relative abundance' } },
+}
+</script>
+
+<template>
+  <Story title="Data Display/PlotlyChart">
+    <Variant title="Native Plotly">
+      <div style="max-width: 760px; margin: 0 auto; padding: 2rem;">
+        <PlotlyChart
+          title="Metabolite response"
+          description="Native Plotly traces with MINT theme and resize handling"
+          :data="data"
+          :layout="layout"
+          :config="{ toImageButtonOptions: { filename: 'metabolite-response' } }"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty">
+      <div style="max-width: 760px; margin: 0 auto; padding: 2rem;">
+        <PlotlyChart
+          title="Metabolite response"
+          :data="[]"
+          empty
+          empty-message="No measurements are available."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Loading">
+      <div style="max-width: 760px; margin: 0 auto; padding: 2rem;">
+        <PlotlyChart title="Loading measurements" :data="[]" loading />
+      </div>
+    </Variant>
+  </Story>
+</template>