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

package/src/components/PlotlyChart.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+/**
+ * Render native Plotly data with MINT loading, empty, theme, and error states.
+ *
+ * Plotly is loaded only when the component is mounted, so importing the SDK does
+ * not add Plotly to the application's initial bundle.
+ *
+ * @example
+ * ```vue
+ * <PlotlyChart
+ *   title="QC overview"
+ *   :data="traces"
+ *   :layout="{ xaxis: { title: { text: 'Sample' } } }"
+ *   :config="{ toImageButtonOptions: { filename: 'qc-overview' } }"
+ * />
+ * ```
+ */
+import type * as PlotlyType from 'plotly.js'
+import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
+
+import ChartContainer from './ChartContainer.vue'
+
+interface Props {
+  data: PlotlyType.Data[]
+  layout?: Partial<PlotlyType.Layout>
+  config?: Partial<PlotlyType.Config>
+  title?: string
+  description?: string
+  loading?: boolean
+  empty?: boolean
+  emptyMessage?: string
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: () => ({}),
+  config: () => ({}),
+  loading: false,
+  empty: false,
+  emptyMessage: 'No data available',
+  ariaLabel: 'Interactive Plotly chart',
+})
+
+const chartElement = ref<HTMLDivElement | null>(null)
+const failed = ref(false)
+let plotly: typeof PlotlyType | null = null
+let resizeObserver: ResizeObserver | null = null
+let themeObserver: MutationObserver | null = null
+let renderedElement: HTMLDivElement | null = null
+let rendering = false
+let disposed = false
+let revision = 0
+
+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
+}
+
+function cssValue(name: string, fallback: string): string {
+  const value = getComputedStyle(chartElement.value ?? document.documentElement).getPropertyValue(name).trim()
+  return value || getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback
+}
+
+// Unwrap nested Vue proxies while copying Plotly's mutable input tree. Keep
+// native dates/typed arrays and callbacks instead of round-tripping through JSON.
+function clonePlotlyInput<T>(value: T): T {
+  const raw = toRaw(value)
+  if (Array.isArray(raw)) return raw.map(clonePlotlyInput) as T
+  if (raw !== null && typeof raw === 'object') {
+    if (Object.getPrototypeOf(raw) === Object.prototype) {
+      return Object.fromEntries(Object.entries(raw).map(([key, item]) => [key, clonePlotlyInput(item)])) as T
+    }
+    return structuredClone(raw)
+  }
+  return raw
+}
+
+function themedLayout(): Partial<PlotlyType.Layout> {
+  const textColor = cssValue('--text-primary', '#1E293B')
+  const gridColor = cssValue('--border-color', '#E5E7EB')
+  const layout = clonePlotlyInput(props.layout)
+  return {
+    autosize: true,
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
+    ...layout,
+    font: { color: textColor, family: cssValue('--font-sans', 'Arial, sans-serif'), ...layout.font },
+    xaxis: { gridcolor: gridColor, ...layout.xaxis },
+    yaxis: { gridcolor: gridColor, ...layout.yaxis },
+  }
+}
+
+function purgeChart(): void {
+  resizeObserver?.disconnect()
+  if (renderedElement) plotly?.purge(renderedElement)
+  renderedElement = null
+}
+
+async function renderChart(): Promise<void> {
+  revision++
+  if (rendering || disposed || props.loading || props.empty) return
+  rendering = true
+  try {
+    while (!disposed && !props.loading && !props.empty) {
+      const currentRevision = revision
+      failed.value = false
+      await nextTick()
+      if (disposed || props.loading || props.empty) break
+      try {
+        plotly ??= await loadPlotly()
+        if (disposed || props.loading || props.empty) break
+        if (currentRevision !== revision) continue
+        const element = chartElement.value
+        if (!element) break
+        renderedElement = element
+        // Plotly mutates traces and nested layout fields; keep caller-owned values intact.
+        await plotly.react(
+          element,
+          clonePlotlyInput(props.data),
+          themedLayout(),
+          { responsive: true, displaylogo: false, ...props.config },
+        )
+        if (disposed || props.loading || props.empty || element !== chartElement.value) {
+          purgeChart()
+        } else {
+          resizeObserver?.observe(element)
+        }
+      } catch {
+        purgeChart()
+        if (!disposed && currentRevision === revision) failed.value = true
+      }
+      if (currentRevision === revision) break
+    }
+  } finally {
+    rendering = false
+    if (disposed || props.loading || props.empty) purgeChart()
+  }
+}
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => {
+      if (rendering || !plotly || !renderedElement) return
+      // A tab can become hidden or unmount before Plotly's async resize finishes.
+      void Promise.resolve(plotly.Plots.resize(renderedElement)).catch(() => {})
+    })
+  }
+
+  if (typeof MutationObserver !== 'undefined') {
+    themeObserver = new MutationObserver(() => void renderChart())
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'style'],
+    })
+  }
+  void renderChart()
+})
+
+watch(
+  [() => props.data, () => props.layout, () => props.config, () => props.loading, () => props.empty],
+  () => {
+    if (props.loading || props.empty) {
+      resizeObserver?.disconnect()
+      if (!rendering) purgeChart()
+    }
+    void renderChart()
+  },
+)
+
+onBeforeUnmount(() => {
+  disposed = true
+  resizeObserver?.disconnect()
+  themeObserver?.disconnect()
+  // An in-flight react must finish before its resources can be purged completely.
+  if (!rendering) purgeChart()
+})
+</script>
+
+<template>
+  <ChartContainer
+    :title="title"
+    :description="description"
+    :loading="loading"
+    :empty="empty"
+    :empty-message="emptyMessage"
+  >
+    <template v-if="$slots.toolbar" #toolbar>
+      <slot name="toolbar" />
+    </template>
+    <template v-if="$slots.empty" #empty>
+      <slot name="empty" />
+    </template>
+
+    <template v-if="failed">
+      <slot name="error">
+        <div class="mint-plotly-chart__error">
+          <p role="alert">Unable to display this chart.</p>
+        </div>
+      </slot>
+    </template>
+    <div
+      ref="chartElement"
+      v-show="!failed"
+      class="mint-plotly-chart__plot"
+      role="group"
+      :aria-label="ariaLabel"
+    />
+
+    <template v-if="$slots.legend" #legend>
+      <slot name="legend" />
+    </template>
+  </ChartContainer>
+</template>
+
+<style scoped>
+.mint-plotly-chart__plot {
+  width: 100%;
+  min-height: 24rem;
+}
+
+.mint-plotly-chart__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-hover);
+}
+
+.mint-plotly-chart__error :deep(p) {
+  margin: 0;
+}
+</style>

package/src/components/SegmentedControl.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Renders a segmented button group for single-option selection, with simple or solid variants. */
+/** Renders a segmented button group for single-option selection, defaulting to the card variant. */
 import { computed, type ComponentPublicInstance } from 'vue'
 import type { SegmentedOption, SegmentedOptionInput, SegmentedControlVariant, SegmentedControlSize } from '../types'
 import { normalizeOptionInput } from '../utils/options'
@@ -16,7 +16,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'simple',
+  variant: 'card',
   size: 'md',
   fullWidth: false,
   disabled: false,

package/src/components/fileBrowserPresentation.ts

@@ -0,0 +1,39 @@
+import type { FileEntry } from '../types/fileBrowserTypes'
+
+export const FILE_BROWSER_ICONS = {
+  disk: 'M4 5h16v14H4zM8 9h.01M4 12h16',
+  folder: 'M4 7h6l2 2h8v10H4z',
+  file: 'M14 3v5h5M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z',
+}
+
+export function formatCount(value: number): string {
+  // Thin spaces group digits without the comma/period ambiguity across locales.
+  return value.toLocaleString('en-US').replace(/,/g, ' ')
+}
+
+export function formatSize(entry: FileEntry): string {
+  if (entry.kind === 'directory') {
+    return entry.child_count === null || entry.child_count === undefined
+      ? '—'
+      : `${entry.child_count} item${entry.child_count === 1 ? '' : 's'}`
+  }
+  return formatBytes(entry.size_bytes ?? null)
+}
+
+export function formatBytes(bytes: number | null): string {
+  if (bytes === null) return '—'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let value = bytes
+  let unit = 0
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024
+    unit += 1
+  }
+  const rounded = value >= 100 || unit === 0 ? Math.round(value) : Number(value.toFixed(1))
+  return `${rounded} ${units[unit]}`
+}
+
+export function entryType(entry: FileEntry): string {
+  if (entry.kind === 'directory') return 'Folder'
+  return entry.extension ? entry.extension.replace('.', '').toUpperCase() : 'File'
+}

package/src/components/index.ts

@@ -99,6 +99,7 @@ export { default as SampleHierarchyTree } from './SampleHierarchyTree.vue'
 export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 
 // Scientific display components
+export { default as PlotlyChart } from './PlotlyChart.vue'
 export { default as ScientificNumber } from './ScientificNumber.vue'
 /** Renders a chemical formula string (H₂O, C₆H₁₂O₆, Ca(OH)₂) with typographically correct subscripts and superscripts for charges. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; no platform replacement is planned. */
 export { default as ChemicalFormula } from './ChemicalFormula.vue'
@@ -142,7 +143,11 @@ export { default as SectionCard } from './SectionCard.vue'
 // Experiment / analysis components
 export { default as ExperimentSelectorModal } from './ExperimentSelectorModal.vue'
 export { default as ArtifactSelectorModal } from './ArtifactSelectorModal.vue'
+/** Modal picker over the read-only server mounts, recording paths rather than copying data. */
+export { default as FileBrowserModal } from './FileBrowserModal.vue'
 export { default as GeneratedPathInput } from './GeneratedPathInput.vue'
 export { default as ArtifactSaveDialog } from './ArtifactSaveDialog.vue'
 export { default as ExperimentPopover } from './ExperimentPopover.vue'
 export { default as FitPanel } from './FitPanel.vue'
+
+export { default as FilePicker } from './FilePicker.vue'

package/src/components/internal/FileBrowserDialogInternal.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+import type { ModalSize } from '../../types'
+import { useFocusTrap } from '../../composables/useFocusTrap'
+import IconButton from '../IconButton.vue'
+
+const props = defineProps<{ open: boolean; label: string; size: ModalSize; variant?: 'picker' }>()
+const emit = defineEmits<{ close: [] }>()
+const containerRef = shallowRef<HTMLElement | null>(null)
+const active = shallowRef(false)
+useFocusTrap({ containerRef, active })
+
+// Activate after mounting so an initially open picker traps focus too.
+onMounted(() => {
+  active.value = props.open
+})
+watch(
+  () => props.open,
+  (open) => {
+    active.value = open
+  },
+)
+watch(
+  active,
+  (open, _, onCleanup) => {
+    if (!open) return
+    const overflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    onCleanup(() => {
+      document.body.style.overflow = overflow
+    })
+  },
+  { flush: 'sync' },
+)
+onBeforeUnmount(() => {
+  active.value = false
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="mint-file-browser-overlay">
+      <section
+        ref="containerRef"
+        class="mint-file-browser-dialog"
+        :class="[
+          `mint-file-browser-dialog--${size}`,
+          variant === 'picker' ? 'mint-picker-dialog' : '',
+        ]"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="label"
+        tabindex="-1"
+        @keydown.esc.stop.prevent="emit('close')"
+      >
+        <header class="mint-file-browser-dialog__header">
+          <slot name="header" />
+          <IconButton size="sm" label="Close modal" @click="emit('close')">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              aria-hidden="true"
+            >
+              <path d="M6 6l12 12M18 6L6 18" />
+            </svg>
+          </IconButton>
+        </header>
+        <slot />
+        <footer class="mint-file-browser-dialog__footer"><slot name="footer" /></footer>
+      </section>
+    </div>
+  </Teleport>
+</template>

package/src/components/internal/FileBrowserListingInternal.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FileEntry, FileSelection } from '../../types/fileBrowserTypes'
+import {
+  FILE_BROWSER_ICONS as ICON,
+  formatCount,
+  formatSize,
+  entryType,
+} from '../fileBrowserPresentation'
+import EmptyState from '../EmptyState.vue'
+import BaseButton from '../BaseButton.vue'
+import IconButton from '../IconButton.vue'
+import Skeleton from '../Skeleton.vue'
+const props = defineProps<{
+  mountId: string
+  entries: FileEntry[]
+  selected: FileSelection[]
+  loading: boolean
+  error?: string | null
+  dimNonMatching: boolean
+  totalCount: number | null
+  matchCount: number | null
+  truncated: boolean
+  hasMounts: boolean
+  hasAvailableMounts: boolean
+  search: string
+}>()
+const emit = defineEmits<{ toggle: [entry: FileEntry]; open: [entry: FileEntry]; refresh: [] }>()
+const emptyTitle = computed(() =>
+  !props.hasMounts
+    ? 'No server mounts configured'
+    : !props.hasAvailableMounts
+      ? 'Server mounts are offline'
+      : props.search
+        ? 'No matching files or folders'
+        : 'This folder is empty',
+)
+const emptyDescription = computed(() =>
+  !props.hasMounts
+    ? 'Ask your administrator to configure a read-only data mount.'
+    : !props.hasAvailableMounts
+      ? 'Refresh when the data mount is available again.'
+      : props.search
+        ? 'Try a different search or clear the search field.'
+        : 'Choose another folder from the mount list or breadcrumbs.',
+)
+function isSelected(entry: FileEntry) {
+  return props.selected.some((item) => item.mount_id === props.mountId && item.path === entry.path)
+}
+function isDimmed(entry: FileEntry) {
+  return props.dimNonMatching && entry.matches_type_rules === false
+}
+function entryIcon(entry: FileEntry) {
+  return entry.kind === 'directory' ? ICON.folder : ICON.file
+}
+function handleRowClick(entry: FileEntry) {
+  if (!props.loading && !props.error && props.mountId && entry.kind === 'directory')
+    emit('open', entry)
+}
+function toggleEntry(entry: FileEntry) {
+  if (!props.loading && !props.error && props.mountId) emit('toggle', entry)
+}
+function folderNote(entry: FileEntry) {
+  if (entry.kind !== 'directory' || !isSelected(entry)) return ''
+  return entry.child_count == null
+    ? 'whole folder'
+    : `whole folder, ${entry.child_count} item${entry.child_count === 1 ? '' : 's'}`
+}
+const statusLine = computed(() => {
+  if (props.loading) return 'Loading folder…'
+  if (props.error || !props.mountId) return ''
+  const total = props.totalCount ?? props.entries.length
+  const parts = [`${formatCount(total)} item${total === 1 ? '' : 's'}`]
+  if (props.entries.length !== total) parts.push(`${formatCount(props.entries.length)} shown`)
+  if (props.matchCount !== null && props.matchCount !== total)
+    parts.push(`${formatCount(props.matchCount)} match the type rules`)
+  if (props.truncated) parts.push('listing capped')
+  return parts.join(' · ')
+})
+</script>
+<template>
+  <div class="mint-file-browser__listing" :aria-busy="loading">
+    <div class="mint-file-browser__head">
+      <span class="mint-file-browser__col-check" />
+      <span class="mint-file-browser__col-icon" />
+      <span class="mint-file-browser__col-name">Name</span>
+      <span class="mint-file-browser__col-size">Size</span>
+      <span class="mint-file-browser__col-type">Type</span>
+      <span class="mint-file-browser__col-open" />
+    </div>
+
+    <div v-if="loading" class="mint-file-browser__skeleton">
+      <div v-for="n in 6" :key="n" class="mint-file-browser__skeleton-row">
+        <Skeleton width="60%" height="14px" />
+        <Skeleton width="60px" height="10px" />
+      </div>
+    </div>
+
+    <div v-else-if="error" class="mint-file-browser__error" role="alert">
+      <span>{{ error }}</span>
+      <BaseButton
+        variant="secondary"
+        size="sm"
+        class="mint-file-browser__retry"
+        aria-label="Retry folder listing"
+        @click="emit('refresh')"
+      >
+        Try again
+      </BaseButton>
+    </div>
+
+    <EmptyState
+      v-else-if="!entries.length"
+      :title="emptyTitle"
+      :description="emptyDescription"
+      size="sm"
+    />
+
+    <div v-else class="mint-file-browser__rows">
+      <div
+        v-for="entry in entries"
+        :key="entry.path"
+        class="mint-file-browser__row"
+        :class="{
+          'mint-file-browser__row--selected': isSelected(entry),
+          'mint-file-browser__row--dimmed': isDimmed(entry),
+          'mint-file-browser__row--dir': entry.kind === 'directory',
+        }"
+        @click="handleRowClick(entry)"
+      >
+        <input
+          class="mint-file-browser__checkbox"
+          type="checkbox"
+          :checked="isSelected(entry)"
+          :title="entry.kind === 'directory' ? 'Select the whole folder' : 'Select this file'"
+          :aria-label="
+            entry.kind === 'directory'
+              ? `Select the whole ${entry.name} folder`
+              : `Select ${entry.name}`
+          "
+          @click.stop
+          @change="toggleEntry(entry)"
+        />
+        <span
+          class="mint-file-browser__row-icon"
+          :class="`mint-file-browser__row-icon--${entry.kind}`"
+        >
+          <svg
+            class="mint-file-browser__icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.8"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path :d="entryIcon(entry)" />
+          </svg>
+        </span>
+        <span class="mint-file-browser__name-cell">
+          <span class="mint-file-browser__name" :title="entry.name">{{ entry.name }}</span>
+          <span v-if="folderNote(entry)" class="mint-file-browser__note-pill">Whole folder</span>
+        </span>
+        <span class="mint-file-browser__size">{{ formatSize(entry) }}</span>
+        <span class="mint-file-browser__type">{{ entryType(entry) }}</span>
+        <!-- The chevron is the keyboard route into a folder: the row
+                   itself is a div, so this button is what Tab can reach. -->
+        <IconButton
+          v-if="entry.kind === 'directory'"
+          size="sm"
+          class="mint-file-browser__open"
+          :label="`Open ${entry.name}`"
+          @click.stop="handleRowClick(entry)"
+        >
+          <svg
+            class="mint-file-browser__icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M9 6l6 6-6 6" />
+          </svg>
+        </IconButton>
+        <span v-else class="mint-file-browser__open" aria-hidden="true" />
+      </div>
+    </div>
+
+    <div class="mint-file-browser__status" role="status" aria-live="polite">
+      <span>{{ statusLine }}</span>
+      <div class="mint-file-browser__status-spacer" />
+      <span class="mint-file-browser__legend">Read-only · Select paths, not copies</span>
+    </div>
+  </div>
+</template>