@morscherlab/mint-sdk 1.2.0-beta.9 → 1.2.0

package/src/components/FilePicker.vue

@@ -0,0 +1,284 @@
+<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'
+import { formatBytes } from './fileBrowserPresentation'
+import { useFilePicker } from '../composables/useFilePicker'
+import { pickerReason } from '../composables/filePicker/validation'
+import type {
+  PickerAdapter,
+  PickerCapabilities,
+  PickerNode,
+  PickerSelection,
+  PickerSelectionMode,
+  PickerSource,
+} from '../types/filePicker'
+
+interface Props {
+  open: boolean
+  adapter: PickerAdapter
+  selectionMode?: PickerSelectionMode
+  sources?: PickerSource[]
+  capabilities?: PickerCapabilities
+  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',
+  sources: () => ['server'],
+  capabilities: () => ({}),
+  initialPath: '',
+  initialSelection: null,
+  title: 'Choose data',
+})
+const emit = defineEmits<{
+  'update:open': [open: boolean]
+  select: [selection: PickerSelection]
+  cancel: []
+}>()
+const uploadError = ref('')
+const {
+  previewNode,
+  sourceNames,
+  sourceIcons,
+  allowedSources,
+  source,
+  query,
+  recursive,
+  skipBlanks,
+  reviewing,
+  nav,
+  selection,
+  capability,
+  path,
+  trail,
+  loading,
+  error,
+  rows,
+  roots,
+  chosen,
+  focused,
+  resolving,
+  resolutionError,
+  searchArea,
+  confirmLabel,
+  folderCount,
+  canConfirm,
+  switchSource,
+  selectNode,
+  enter,
+  up,
+  refresh,
+  selectParent,
+  chooseLocal,
+  cancel,
+  confirm,
+  keyboard,
+} = useFilePicker(props, emit)
+</script>
+
+<template>
+  <FileBrowserDialogInternal
+    :open="open"
+    :label="title"
+    size="full"
+    variant="picker"
+    @close="cancel"
+  >
+    <template #header>
+      <div v-if="source === 'server'" ref="searchArea" class="mint-picker__search">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          aria-hidden="true"
+        >
+          <circle cx="10.5" cy="10.5" r="7" />
+          <path d="m16 16 5 5" />
+        </svg>
+        <BaseInput
+          v-model="query"
+          aria-label="Search folders and files"
+          placeholder="Search folders and files…"
+        />
+        <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"
+        role="group"
+        aria-label="Data source"
+        :style="{ '--picker-source-index': allowedSources.indexOf(source) }"
+      >
+        <span class="mint-picker__source-indicator" aria-hidden="true" />
+        <IconButton
+          v-for="item in allowedSources"
+          :key="item"
+          size="sm"
+          variant="ghost"
+          :label="sourceNames[item]"
+          :aria-pressed="item === source"
+          @click="switchSource(item)"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.8"
+            aria-hidden="true"
+          >
+            <path :d="sourceIcons[item]" />
+          </svg>
+        </IconButton>
+      </div>
+    </template>
+    <div :key="source" class="mint-picker mint-picker__source-panel" @keydown="keyboard">
+      <div v-if="source === 'server'" class="mint-picker__pathbar">
+        <IconButton
+          label="Up one level"
+          size="sm"
+          variant="secondary"
+          :disabled="!path"
+          @click="up()"
+          ><svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            aria-hidden="true"
+          >
+            <path d="M11 17l-5-5 5-5M6 12h13" /></svg
+        ></IconButton>
+        <nav aria-label="Breadcrumb" class="mint-picker__breadcrumbs">
+          <BaseButton variant="ghost" size="sm" @click="up('')">{{
+            sourceNames[source]
+          }}</BaseButton>
+          <template v-for="crumb in trail" :key="crumb.path"
+            ><span>/</span
+            ><BaseButton variant="ghost" size="sm" @click="up(crumb.path)">{{
+              crumb.label
+            }}</BaseButton></template
+          >
+        </nav>
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          class="mint-picker__scope"
+          :aria-pressed="recursive"
+          @click="recursive = !recursive"
+          >{{ recursive ? 'Subfolders' : 'This folder' }}</BaseButton
+        >
+        <IconButton size="sm" label="Refresh location" :disabled="loading" @click="refresh()"
+          ><svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.8"
+            aria-hidden="true"
+          >
+            <path d="M20 7v5h-5M4 17v-5h5M6 8a7 7 0 0 1 12-2l2 3M4 15l2 3a7 7 0 0 0 12-2" /></svg
+        ></IconButton>
+      </div>
+      <div v-if="!allowedSources.length" class="mint-picker__empty">
+        No data sources are enabled.
+      </div>
+      <template v-else>
+        <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'"
+            :show-files="false"
+            @upload="(...args) => { uploadError = ''; chooseLocal(...args) }"
+            @error="uploadError = $event"
+          />
+          <p v-if="uploadError || error || resolutionError" role="alert">
+            {{ uploadError || error || resolutionError }}
+          </p>
+        </div>
+        <div v-else class="mint-picker__workspace">
+          <FilePickerTreeInternal
+            :empty-title="
+              path
+                ? 'No readable files'
+                : 'No server locations configured'
+            "
+            :rows="rows"
+            :loading="loading"
+            :error="error"
+            :query="query"
+            :mode="selectionMode"
+            :selected="selection.selected"
+            :reason="(node) => pickerReason(selection.exclusion(node), node)"
+            :progress="selection.folderProgress"
+            :focus-path="selection.focusPath.value"
+            @select="selectNode"
+            @enter="enter"
+            @expand="nav.expand"
+            @up="up"
+            @retry="refresh"
+            @parent="selectParent"
+          />
+          <FilePickerPreviewInternal
+            :node="previewNode"
+            :total-count="focused?.kind === 'folder' ? focused.fileCount : undefined"
+            :source="source"
+            :exclusions="chosen.excluded"
+            :busy="resolving"
+            :error="resolutionError"
+            :reviewing="reviewing"
+            @review="reviewing = !reviewing"
+            @retry="selection.resolve"
+          />
+        </div>
+      </template>
+    </div>
+    <template #footer>
+      <div class="mint-picker__footer">
+        <div class="mint-picker__receipt" role="status">
+          <span v-if="folderCount" class="mint-picker__badge"
+            >{{ folderCount }} folder{{ folderCount === 1 ? '' : 's' }}</span
+          >
+          <span v-if="chosen.files.length" class="mint-picker__badge"
+            >{{ chosen.files.length }} {{ chosen.files.length === 1 ? 'file' : 'files' }}</span
+          >
+          <span v-if="roots.length">{{ resolving ? 'Checking…' : formatBytes(chosen.bytes) }}</span>
+          <span v-else>No selection</span>
+          <BaseButton
+            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"
+            variant="ghost"
+            :aria-pressed="skipBlanks"
+            @click="skipBlanks = !skipBlanks"
+            >Skip blanks {{ skipBlanks ? 'on' : 'off' }}</BaseButton
+          >
+        </div>
+        <div class="mint-picker__actions">
+          <BaseButton variant="ghost" size="sm" @click="cancel">Cancel</BaseButton
+          ><BaseButton size="sm" :disabled="!canConfirm" @click="confirm">{{
+            confirmLabel
+          }}</BaseButton>
+        </div>
+      </div>
+    </template>
+  </FileBrowserDialogInternal>
+</template>

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>