@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/components/FileUploader.vue

@@ -0,0 +1,424 @@
+<script setup lang="ts">
+/** Drag-and-drop file upload zone with type filtering, size validation, and folder mode. */
+import { ref, computed } from 'vue'
+
+interface Props {
+  accept?: string
+  multiple?: boolean
+  maxSize?: number
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  mode?: 'file' | 'folder'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  multiple: false,
+  disabled: false,
+  size: 'md',
+  mode: 'file',
+})
+
+const emit = defineEmits<{
+  upload: [files: File[], rootName?: string, relativePaths?: string[]]
+  remove: [files: File[]]
+  error: [message: string]
+}>()
+
+const isDragOver = ref(false)
+const inputRef = ref<HTMLInputElement>()
+const selectedFiles = ref<File[]>([])
+const folderName = ref<string | null>(null)
+
+const isFolder = computed(() => props.mode === 'folder')
+
+const acceptLabel = computed(() => {
+  if (!props.accept) return 'any file'
+  return props.accept.split(',').map(a => a.trim().replace('.', '').toUpperCase()).join(', ')
+})
+
+const maxSizeLabel = computed(() => {
+  if (!props.maxSize) return null
+  if (props.maxSize >= 1024 * 1024 * 1024) {
+    return `${(props.maxSize / (1024 * 1024 * 1024)).toFixed(1)} GB`
+  }
+  if (props.maxSize >= 1024 * 1024) {
+    return `${(props.maxSize / (1024 * 1024)).toFixed(1)} MB`
+  }
+  if (props.maxSize >= 1024) {
+    return `${(props.maxSize / 1024).toFixed(1)} KB`
+  }
+  return `${props.maxSize} bytes`
+})
+
+const fileTypeMap: Record<string, { color: string; label: string }> = {
+  csv: { color: '#10B981', label: 'CSV' },
+  tsv: { color: '#10B981', label: 'TSV' },
+  xlsx: { color: '#10B981', label: 'XLSX' },
+  xls: { color: '#10B981', label: 'XLS' },
+  pdf: { color: '#EF4444', label: 'PDF' },
+  png: { color: '#8B5CF6', label: 'PNG' },
+  jpg: { color: '#8B5CF6', label: 'JPG' },
+  jpeg: { color: '#8B5CF6', label: 'JPEG' },
+  gif: { color: '#8B5CF6', label: 'GIF' },
+  svg: { color: '#8B5CF6', label: 'SVG' },
+  webp: { color: '#8B5CF6', label: 'WEBP' },
+  json: { color: '#F59E0B', label: 'JSON' },
+  xml: { color: '#F59E0B', label: 'XML' },
+  txt: { color: '#64748B', label: 'TXT' },
+  zip: { color: '#6366F1', label: 'ZIP' },
+  gz: { color: '#6366F1', label: 'GZ' },
+  py: { color: '#3B82F6', label: 'PY' },
+  js: { color: '#EAB308', label: 'JS' },
+  ts: { color: '#3B82F6', label: 'TS' },
+  fasta: { color: '#EC4899', label: 'FASTA' },
+  fastq: { color: '#EC4899', label: 'FASTQ' },
+  bam: { color: '#EC4899', label: 'BAM' },
+  vcf: { color: '#EC4899', label: 'VCF' },
+}
+
+function getFileType(filename: string): { color: string; label: string } {
+  const ext = filename.split('.').pop()?.toLowerCase() || ''
+  return fileTypeMap[ext] || { color: '#94A3B8', label: ext.toUpperCase() || 'FILE' }
+}
+
+function validateFiles(files: FileList | File[]): File[] {
+  const validFiles: File[] = []
+
+  for (const file of Array.from(files)) {
+    if (props.maxSize && file.size > props.maxSize) {
+      emit('error', `File "${file.name}" exceeds maximum size of ${maxSizeLabel.value}`)
+      continue
+    }
+
+    if (props.accept) {
+      const acceptedTypes = props.accept.split(',').map(t => t.trim().toLowerCase())
+      const fileExt = '.' + file.name.split('.').pop()?.toLowerCase()
+      const fileType = file.type.toLowerCase()
+
+      const isAccepted = acceptedTypes.some(type => {
+        if (type.startsWith('.')) {
+          return fileExt === type
+        }
+        if (type.endsWith('/*')) {
+          return fileType.startsWith(type.replace('/*', '/'))
+        }
+        return fileType === type
+      })
+
+      if (!isAccepted) {
+        emit('error', `File "${file.name}" is not an accepted file type`)
+        continue
+      }
+    }
+
+    validFiles.push(file)
+  }
+
+  return validFiles
+}
+
+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, folderName.value ?? undefined, relativePaths)
+  } else if (!props.multiple) {
+    selectedFiles.value = [validFiles[0]]
+    emit('upload', [validFiles[0]], undefined, [relativePaths[0]])
+  } else {
+    selectedFiles.value = [...selectedFiles.value, ...validFiles]
+    emit('upload', validFiles, undefined, relativePaths)
+  }
+}
+
+function extractFolderName(files: File[]): string | null {
+  if (files.length === 0) return null
+  const firstPath = files[0].webkitRelativePath
+  if (firstPath) {
+    return firstPath.split('/')[0]
+  }
+  return null
+}
+
+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)
+  }
+}
+
+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,
+        relativePaths,
+        entry.name,
+      )
+    } else if (entry?.isFile) {
+      const file = await getFile(entry as FileSystemFileEntry)
+      if (file) {
+        files.push(file)
+        relativePaths.push(file.name)
+      }
+    }
+  }
+
+  if (files.length > 0) {
+    handleFiles(files, folderNameFromDrop, relativePaths)
+  }
+}
+
+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[]
+  do {
+    batch = await new Promise<FileSystemEntry[]>((resolve, reject) => {
+      reader.readEntries(resolve, reject)
+    })
+    for (const entry of batch) {
+      if (entry.isFile) {
+        const file = await getFile(entry as FileSystemFileEntry)
+        if (file) {
+          files.push(file)
+          relativePaths.push(`${prefix}/${file.name}`)
+        }
+      } else if (entry.isDirectory) {
+        await readDirectory(
+          entry as FileSystemDirectoryEntry,
+          files,
+          relativePaths,
+          `${prefix}/${entry.name}`,
+        )
+      }
+    }
+  } while (batch.length > 0)
+}
+
+function getFile(entry: FileSystemFileEntry): Promise<File | null> {
+  return new Promise((resolve) => {
+    entry.file(resolve, () => resolve(null))
+  })
+}
+
+function handleDragOver(event: DragEvent) {
+  event.preventDefault()
+  if (!props.disabled) {
+    isDragOver.value = true
+  }
+}
+
+function handleDragLeave() {
+  isDragOver.value = false
+}
+
+function handleInputChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (target.files) {
+    handleFiles(target.files)
+  }
+  target.value = ''
+}
+
+function openFilePicker() {
+  if (!props.disabled) {
+    inputRef.value?.click()
+  }
+}
+
+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 {
+  if (bytes >= 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  }
+  if (bytes >= 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`
+  }
+  return `${bytes} bytes`
+}
+</script>
+
+<template>
+  <div class="mint-file-uploader">
+    <!-- Dropzone -->
+    <div
+      role="button"
+      tabindex="0"
+      :aria-label="disabled ? 'File upload disabled' : 'Click or drag files to upload'"
+      :aria-disabled="disabled"
+      :class="[
+        'mint-file-uploader__dropzone',
+        `mint-file-uploader__dropzone--${size}`,
+        isDragOver ? 'mint-file-uploader__dropzone--dragover' : '',
+        disabled ? 'mint-file-uploader__dropzone--disabled' : '',
+        selectedFiles.length > 0 ? 'mint-file-uploader__dropzone--has-files' : '',
+      ]"
+      @click="openFilePicker"
+      @keydown.enter="openFilePicker"
+      @keydown.space.prevent="openFilePicker"
+      @drop="handleDrop"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+    >
+      <input
+        ref="inputRef"
+        type="file"
+        :accept="accept"
+        :multiple="isFolder || multiple"
+        :disabled="disabled"
+        :webkitdirectory="isFolder || undefined"
+        class="mint-file-uploader__input"
+        @change="handleInputChange"
+      />
+
+      <div class="mint-file-uploader__content">
+        <svg
+          v-if="isFolder"
+          class="mint-file-uploader__icon"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          viewBox="0 0 24 24"
+        >
+          <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+        </svg>
+        <svg
+          v-else
+          class="mint-file-uploader__icon"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          viewBox="0 0 24 24"
+        >
+          <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" /><path d="m16 16-4-4-4 4" /><path d="M12 12v9" />
+        </svg>
+
+        <p class="mint-file-uploader__text">
+          Drop {{ acceptLabel }} or click
+        </p>
+      </div>
+    </div>
+
+    <!-- Actions slot (e.g. template buttons) -->
+    <div v-if="$slots.actions" class="mint-file-uploader__actions">
+      <slot name="actions" />
+    </div>
+
+    <!-- Folder summary display -->
+    <div v-if="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">
+            <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" />
+          </svg>
+        </div>
+        <div class="mint-file-uploader__folder-details">
+          <span class="mint-file-uploader__folder-name">{{ folderName }}</span>
+          <span class="mint-file-uploader__folder-count">{{ selectedFiles.length }} file{{ selectedFiles.length !== 1 ? 's' : '' }}</span>
+        </div>
+      </div>
+      <button
+        type="button"
+        aria-label="Clear folder"
+        class="mint-file-uploader__remove-btn"
+        @click.stop="clearAll"
+      >
+        <svg class="mint-file-uploader__remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+          <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- File list display -->
+    <TransitionGroup
+      v-if="!isFolder && selectedFiles.length > 0"
+      tag="ul"
+      name="mint-file-uploader-item"
+      class="mint-file-uploader__list"
+    >
+      <li
+        v-for="(file, index) in selectedFiles"
+        :key="`${file.name}-${file.size}-${index}`"
+        class="mint-file-uploader__file"
+      >
+        <div class="mint-file-uploader__file-info">
+          <span
+            class="mint-file-uploader__file-badge"
+            :style="{ '--badge-color': getFileType(file.name).color }"
+          >
+            {{ getFileType(file.name).label }}
+          </span>
+          <div class="mint-file-uploader__file-meta">
+            <span class="mint-file-uploader__file-name">{{ file.name }}</span>
+            <span class="mint-file-uploader__file-size">{{ formatFileSize(file.size) }}</span>
+          </div>
+        </div>
+        <button
+          type="button"
+          :aria-label="`Remove ${file.name}`"
+          class="mint-file-uploader__remove-btn"
+          @click.stop="removeFile(index)"
+        >
+          <svg class="mint-file-uploader__remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </li>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/file-uploader.css';
+</style>

package/src/components/FitPanel.story.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import FitPanel from './FitPanel.vue'
+import type { FitState, FitResultSummary } from '../types'
+
+const states: FitState[] = ['idle', 'running', 'completed', 'error']
+
+const sampleResults: FitResultSummary[] = [
+  { label: 'IC50', value: '2.34 uM', variant: 'success' },
+  { label: 'Hill Slope', value: '-1.12' },
+  { label: 'R-squared', value: '0.987', variant: 'success' },
+  { label: 'Max Response', value: '98.2%' },
+]
+
+const playgroundState = ref<FitState>('idle')
+const playgroundProgress = ref(45)
+const playgroundDisabled = ref(false)
+
+function handleRun() {
+  playgroundState.value = 'running'
+  playgroundProgress.value = 0
+  const interval = setInterval(() => {
+    playgroundProgress.value += 10
+    if (playgroundProgress.value >= 100) {
+      clearInterval(interval)
+      playgroundState.value = 'completed'
+    }
+  }, 500)
+}
+</script>
+
+<template>
+  <Story title="Experiment/FitPanel">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
+          <FitPanel
+            :state="state.state"
+            :progress="state.progress"
+            :disabled="state.disabled"
+            :indeterminate="state.indeterminate"
+            progress-label="Fitting dose-response curve..."
+            :results="state.state === 'completed' ? sampleResults : []"
+            :error-message="state.state === 'error' ? 'Convergence failed: insufficient data points for 4PL fit' : undefined"
+            run-label="Run IC50 Fit"
+            @run="state.state = 'running'"
+            @cancel="state.state = 'idle'"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.state"
+          title="State"
+          :options="states.map(s => ({ label: s, value: s }))"
+        />
+        <HstSlider v-model="state.progress" title="Progress" :min="0" :max="100" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.indeterminate" title="Indeterminate" />
+      </template>
+    </Variant>
+
+    <Variant title="Idle">
+      <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
+        <FitPanel
+          state="idle"
+          run-label="Run IC50 Fit"
+          @run="() => console.log('Run fit')"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Running">
+      <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
+        <FitPanel
+          state="running"
+          :progress="65"
+          progress-label="Fitting dose-response curve..."
+          @cancel="() => console.log('Cancel fit')"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Completed">
+      <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
+        <FitPanel
+          state="completed"
+          :results="sampleResults"
+          run-label="Re-run Fit"
+          @run="() => console.log('Re-run fit')"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
+        <FitPanel
+          state="error"
+          error-message="Convergence failed: insufficient data points for 4PL fit. Ensure at least 4 dose levels with valid responses."
+          run-label="Retry Fit"
+          @run="() => console.log('Retry fit')"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Interactive Demo">
+      <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Click "Run IC50 Fit" to see the full state flow
+        </p>
+        <FitPanel
+          :state="playgroundState"
+          :progress="playgroundProgress"
+          :disabled="playgroundDisabled"
+          progress-label="Fitting dose-response curve..."
+          :results="playgroundState === 'completed' ? sampleResults : []"
+          run-label="Run IC50 Fit"
+          @run="handleRun"
+          @cancel="playgroundState = 'idle'"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/FitPanel.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+/** Control panel for running a curve-fit job with progress bar, results table, and error display. */
+import { computed } from 'vue'
+import type { FitState, FitResultSummary } from '../types'
+import BaseButton from './BaseButton.vue'
+import ProgressBar from './ProgressBar.vue'
+import AlertBox from './AlertBox.vue'
+
+interface Props {
+  state?: FitState
+  progress?: number
+  progressLabel?: string
+  indeterminate?: boolean
+  results?: FitResultSummary[]
+  errorMessage?: string
+  runLabel?: string
+  cancelLabel?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  state: 'idle',
+  progress: 0,
+  progressLabel: 'Fitting...',
+  indeterminate: false,
+  results: () => [],
+  runLabel: 'Run Fit',
+  cancelLabel: 'Cancel',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  run: []
+  cancel: []
+}>()
+
+const isRunning = computed(() => props.state === 'running')
+const showRunButton = computed(() => !isRunning.value)
+const showResults = computed(() => props.state === 'completed' && props.results.length > 0)
+const showError = computed(() => props.state === 'error' && props.errorMessage)
+
+function variantClass(variant?: string): string {
+  if (!variant || variant === 'default') return ''
+  return `mint-fit-panel__result-value--${variant}`
+}
+</script>
+
+<template>
+  <div class="mint-fit-panel">
+    <!-- Plugin controls slot -->
+    <slot name="controls" />
+
+    <!-- Action bar -->
+    <div class="mint-fit-panel__actions">
+      <BaseButton
+        v-if="showRunButton"
+        variant="primary"
+        size="sm"
+        :disabled="disabled"
+        full-width
+        @click="emit('run')"
+      >
+        {{ runLabel }}
+      </BaseButton>
+      <BaseButton
+        v-if="isRunning"
+        variant="ghost"
+        size="sm"
+        full-width
+        @click="emit('cancel')"
+      >
+        {{ cancelLabel }}
+      </BaseButton>
+    </div>
+
+    <!-- Progress -->
+    <div v-if="isRunning" class="mint-fit-panel__progress">
+      <ProgressBar
+        :value="progress"
+        :label="progressLabel"
+        :indeterminate="indeterminate"
+        :show-value="!indeterminate"
+        size="sm"
+      />
+    </div>
+
+    <!-- Results -->
+    <div v-if="showResults" class="mint-fit-panel__results">
+      <slot name="results">
+        <div class="mint-fit-panel__result-list">
+          <div
+            v-for="(item, idx) in results"
+            :key="idx"
+            class="mint-fit-panel__result-row"
+          >
+            <span class="mint-fit-panel__result-label">{{ item.label }}</span>
+            <span
+              class="mint-fit-panel__result-value"
+              :class="variantClass(item.variant)"
+            >
+              {{ item.value }}
+            </span>
+          </div>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Error -->
+    <AlertBox v-if="showError" type="error">
+      {{ errorMessage }}
+    </AlertBox>
+
+    <!-- Footer slot -->
+    <slot name="footer" />
+  </div>
+</template>
+
+<style>
+@import '../styles/components/fit-panel.css';
+</style>