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

package/src/components/EmptyState.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-/** Empty-state placeholder with icon badge, headline, description, default slot, and optional CTA button. */
-import BaseButton from './BaseButton.vue'
-
-interface Props {
-  title?: string
-  description?: string
-  iconPath?: string
-  color?: 'primary' | 'cta' | 'success' | 'warning' | 'error' | 'muted'
-  size?: 'sm' | 'md' | 'lg'
-  variant?: 'illustrated' | 'inline'
-  actionLabel?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  color: 'primary',
-  size: 'md',
-  variant: 'illustrated',
-})
-
-const emit = defineEmits<{
-  action: []
-}>()
-
-const defaultIconPaths = [
-  'M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z',
-  'M7 11h10',
-  'M7 15h6',
-  'M7 7h8',
-]
-</script>
-
-<template>
-  <div :class="['mint-empty-state', `mint-empty-state--${variant}`, `mint-empty-state--${size}`]">
-    <div :class="['mint-empty-state__icon-wrapper', `mint-empty-state__icon-wrapper--${color}`]">
-      <slot name="icon">
-        <svg
-          class="mint-empty-state__icon"
-          :class="`mint-empty-state__icon--${color}`"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <template v-if="iconPath">
-            <path :d="iconPath" />
-          </template>
-          <template v-else>
-            <path v-for="(d, i) in defaultIconPaths" :key="i" :d="d" />
-          </template>
-        </svg>
-      </slot>
-    </div>
-    <div class="mint-empty-state__body">
-      <h3 v-if="title" class="mint-empty-state__title">{{ title }}</h3>
-      <p v-if="description" class="mint-empty-state__description">{{ description }}</p>
-      <slot />
-    </div>
-    <div v-if="actionLabel" class="mint-empty-state__action">
-      <BaseButton @click="emit('action')">
-        {{ actionLabel }}
-      </BaseButton>
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/empty-state.css';
-</style>

package/src/components/ExperimentCodeBadge.story.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import ExperimentCodeBadge from './ExperimentCodeBadge.vue'
-
-const sizes = ['sm', 'md', 'lg'] as const
-</script>
-
-<template>
-  <Story title="Experiment/ExperimentCodeBadge">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-          <ExperimentCodeBadge
-            :code="state.code"
-            :size="state.size"
-            :copyable="state.copyable"
-            @copy="(code) => console.log('Copied:', code)"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.code" title="Code" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-        <HstCheckbox v-model="state.copyable" title="Copyable" />
-      </template>
-    </Variant>
-
-    <Variant title="All Sizes">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
-        <div v-for="size in sizes" :key="size" style="display: flex; align-items: center; gap: 1rem;">
-          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; width: 2rem;">
-            {{ size }}
-          </span>
-          <ExperimentCodeBadge :code="'EXP-2024-001'" :size="size" :copyable="false" />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Long Code">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start;">
-        <ExperimentCodeBadge code="EXP-2024-001" :copyable="false" />
-        <ExperimentCodeBadge code="DR-CV-HEK293T-2024-12-001" :copyable="false" />
-        <ExperimentCodeBadge code="IC50-PANC1-GEM-SERIES-A" :copyable="false" />
-      </div>
-    </Variant>
-
-    <Variant title="Copyable Demo">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
-        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0;">
-          Click any badge to copy its code to clipboard
-        </p>
-        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
-          <ExperimentCodeBadge
-            code="EXP-2024-001"
-            @copy="(code) => console.log('Copied:', code)"
-          />
-          <ExperimentCodeBadge
-            code="DR-HeLa-DOX-003"
-            @copy="(code) => console.log('Copied:', code)"
-          />
-          <ExperimentCodeBadge
-            code="CV-MCF7-24H"
-            @copy="(code) => console.log('Copied:', code)"
-          />
-        </div>
-        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0;">
-          Non-copyable badge (display only)
-        </p>
-        <ExperimentCodeBadge code="EXP-2024-001" :copyable="false" />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/ExperimentCodeBadge.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-/** Inline badge that displays an experiment code and copies it to the clipboard on click. */
-import { ref } from 'vue'
-
-interface Props {
-  code: string
-  size?: 'sm' | 'md' | 'lg'
-  copyable?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'md',
-  copyable: true,
-})
-
-const emit = defineEmits<{
-  copy: [code: string]
-}>()
-
-const copied = ref(false)
-let copyTimeout: ReturnType<typeof setTimeout> | null = null
-
-async function handleCopy() {
-  if (!props.copyable) return
-  try {
-    await navigator.clipboard.writeText(props.code)
-    copied.value = true
-    emit('copy', props.code)
-    if (copyTimeout) clearTimeout(copyTimeout)
-    copyTimeout = setTimeout(() => { copied.value = false }, 1500)
-  } catch {
-    // Clipboard API not available (e.g. insecure context)
-  }
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  if (!props.copyable) return
-  if (event.key === 'Enter' || event.key === ' ') {
-    event.preventDefault()
-    handleCopy()
-  }
-}
-</script>
-
-<template>
-  <span
-    :class="[
-      'mint-exp-code',
-      `mint-exp-code--${size}`,
-      { 'mint-exp-code--copyable': copyable, 'mint-exp-code--copied': copied },
-    ]"
-    :role="copyable ? 'button' : undefined"
-    :tabindex="copyable ? 0 : undefined"
-    :title="copyable ? (copied ? 'Copied!' : 'Click to copy') : undefined"
-    @click="handleCopy"
-    @keydown="handleKeydown"
-  >
-    {{ copied ? 'Copied!' : code }}
-  </span>
-</template>
-
-<style>
-@import '../styles/components/experiment-code-badge.css';
-</style>

package/src/components/ExperimentDataViewer.story.vue

@@ -1,174 +0,0 @@
-<script setup lang="ts">
-import ExperimentDataViewer from './ExperimentDataViewer.vue'
-import type { TreeNode, SummaryData } from '../types'
-
-const treeData: TreeNode[] = [
-  {
-    id: 'plate-1',
-    label: 'Plate PLT-001',
-    type: 'plate',
-    badge: 96,
-    badgeVariant: 'default',
-    children: [
-      {
-        id: 'group-ctrl',
-        label: 'Vehicle Control',
-        type: 'treatment',
-        badge: 12,
-        children: [
-          { id: 's-1', label: 'Well A01', type: 'sample', metadata: { viability: 98.5 } },
-          { id: 's-2', label: 'Well A02', type: 'sample', metadata: { viability: 97.2 } },
-          { id: 's-3', label: 'Well A03', type: 'sample', metadata: { viability: 99.1 } },
-        ],
-      },
-      {
-        id: 'group-dox',
-        label: 'Doxorubicin 1uM',
-        type: 'treatment',
-        badge: 12,
-        children: [
-          { id: 's-4', label: 'Well B01', type: 'sample', metadata: { viability: 45.2 } },
-          { id: 's-5', label: 'Well B02', type: 'sample', metadata: { viability: 42.8 } },
-          { id: 's-6', label: 'Well B03', type: 'sample', metadata: { viability: 48.1 } },
-        ],
-      },
-    ],
-  },
-]
-
-const tableData = [
-  { well: 'A01', group: 'Vehicle Control', concentration: 0, viability: 98.5, normalized: 100 },
-  { well: 'A02', group: 'Vehicle Control', concentration: 0, viability: 97.2, normalized: 98.7 },
-  { well: 'A03', group: 'Vehicle Control', concentration: 0, viability: 99.1, normalized: 100.6 },
-  { well: 'B01', group: 'Doxorubicin', concentration: 1.0, viability: 45.2, normalized: 45.9 },
-  { well: 'B02', group: 'Doxorubicin', concentration: 1.0, viability: 42.8, normalized: 43.5 },
-  { well: 'B03', group: 'Doxorubicin', concentration: 1.0, viability: 48.1, normalized: 48.8 },
-]
-
-const summaryData: SummaryData = {
-  metadata: {
-    cell_line: 'HeLa',
-    passage: 'P12',
-    plate_format: '96-well',
-    seeding_density: '5000 cells/well',
-  },
-  sections: [
-    {
-      key: 'treatments',
-      label: 'Treatments',
-      type: 'group',
-      items: [
-        {
-          label: 'Vehicle Control',
-          metadata: { type: 'negative control' },
-          item_count: 12,
-          item_key: 'wells',
-          columns: ['well', 'viability', 'normalized'],
-          rows: [
-            { well: 'A01', viability: 98.5, normalized: 100 },
-            { well: 'A02', viability: 97.2, normalized: 98.7 },
-            { well: 'A03', viability: 99.1, normalized: 100.6 },
-          ],
-        },
-        {
-          label: 'Doxorubicin 1uM',
-          metadata: { type: 'treatment', compound: 'Doxorubicin' },
-          item_count: 12,
-          item_key: 'wells',
-          columns: ['well', 'viability', 'normalized'],
-          rows: [
-            { well: 'B01', viability: 45.2, normalized: 45.9 },
-            { well: 'B02', viability: 42.8, normalized: 43.5 },
-            { well: 'B03', viability: 48.1, normalized: 48.8 },
-          ],
-        },
-      ],
-    },
-  ],
-}
-
-const views = ['summary', 'tree', 'table'] as const
-</script>
-
-<template>
-  <Story title="Experiment/ExperimentDataViewer">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
-          <ExperimentDataViewer
-            :tree-data="treeData"
-            :table-data="tableData"
-            :summary-data="state.showSummary ? summaryData : null"
-            :default-view="state.defaultView"
-            :loading="state.loading"
-            title="Cell Viability Data"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.defaultView"
-          title="Default View"
-          :options="views.map(v => ({ label: v, value: v }))"
-        />
-        <HstCheckbox v-model="state.loading" title="Loading" />
-        <HstCheckbox v-model="state.showSummary" title="Show Summary" />
-      </template>
-    </Variant>
-
-    <Variant title="Summary View">
-      <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
-        <ExperimentDataViewer
-          :tree-data="treeData"
-          :table-data="tableData"
-          :summary-data="summaryData"
-          default-view="summary"
-          title="Dose Response - HeLa"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Tree View">
-      <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
-        <ExperimentDataViewer
-          :tree-data="treeData"
-          :table-data="tableData"
-          default-view="tree"
-          title="Sample Hierarchy"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Table View">
-      <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
-        <ExperimentDataViewer
-          :tree-data="treeData"
-          :table-data="tableData"
-          default-view="table"
-          title="Raw Measurements"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Loading">
-      <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
-        <ExperimentDataViewer
-          :tree-data="[]"
-          :loading="true"
-          title="Loading Data..."
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Empty">
-      <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
-        <ExperimentDataViewer
-          :tree-data="[]"
-          default-view="tree"
-          title="Empty Experiment"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/ExperimentDataViewer.vue

@@ -1,293 +0,0 @@
-<script setup lang="ts">
-/** Tabbed viewer for experiment output data with summary, hierarchy tree, and table views. */
-import { ref, computed, watch } from 'vue'
-import type { TreeNode, DataFrameColumn, SummaryData } from '../types'
-import { useExperimentData } from '../composables/useExperimentData'
-import SampleHierarchyTree from './SampleHierarchyTree.vue'
-import DataFrame from './DataFrame.vue'
-import SegmentedControl from './SegmentedControl.vue'
-import BaseButton from './BaseButton.vue'
-import Skeleton from './Skeleton.vue'
-
-interface Props {
-  treeData?: TreeNode[]
-  tableData?: Record<string, unknown>[]
-  tableColumns?: DataFrameColumn[] | undefined
-  summaryData?: SummaryData | null
-  defaultView?: 'summary' | 'tree' | 'table'
-  title?: string
-  pluginName?: string
-  pluginRoutePrefix?: string
-  experimentId?: number
-  loading?: boolean
-  downloadJsonUrl?: string
-  downloadCsvUrl?: string
-  autoFetch?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: 'Data',
-  defaultView: 'summary',
-  loading: false,
-  autoFetch: true,
-})
-
-// Auto-fetch when experimentId is provided and no prop data is given
-const expData = useExperimentData()
-const hasPropData = computed(() =>
-  (props.treeData && props.treeData.length > 0) || props.summaryData,
-)
-
-watch(
-  () => props.experimentId,
-  (id) => {
-    if (props.autoFetch && id && !hasPropData.value) {
-      expData.fetch(id)
-    }
-  },
-  { immediate: true },
-)
-
-// Merge: props take priority over composable data
-const mergedTreeData = computed(() =>
-  props.treeData?.length ? props.treeData : expData.treeData.value,
-)
-const mergedTableData = computed(() =>
-  props.tableData?.length ? props.tableData : expData.tableData.value,
-)
-const mergedSummaryData = computed(() =>
-  props.summaryData ?? expData.summaryData.value,
-)
-const isLoading = computed(() =>
-  props.loading || expData.isLoading.value,
-)
-
-const emit = defineEmits<{
-  'open-plugin': []
-  'download-json': []
-  'download-csv': []
-}>()
-
-const viewMode = ref<string | number>(props.defaultView)
-
-// Reset view mode when defaultView prop changes
-watch(() => props.defaultView, (val) => { viewMode.value = val })
-
-const viewOptions = computed(() => {
-  const opts = []
-  if (mergedSummaryData.value) {
-    opts.push({ value: 'summary', label: 'Summary' })
-  }
-  opts.push({ value: 'tree', label: 'Tree' })
-  opts.push({ value: 'table', label: 'Table' })
-  return opts
-})
-
-// Fall back to tree if summary is selected but no summary data
-watch(mergedSummaryData, (val) => {
-  if (!val && viewMode.value === 'summary') {
-    viewMode.value = 'tree'
-  }
-}, { immediate: true })
-
-const hasTableData = computed(() =>
-  mergedTableData.value && mergedTableData.value.length > 0,
-)
-
-const metadataEntries = computed(() => {
-  if (!mergedSummaryData.value?.metadata) return []
-  return Object.entries(mergedSummaryData.value.metadata)
-    .filter(([, v]) => v !== null && v !== undefined && v !== '')
-    .map(([key, value]) => ({
-      key: key.replace(/_/g, ' '),
-      value: String(value),
-    }))
-})
-
-function humanizeColumn(col: string): string {
-  return col.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
-}
-
-function formatCellValue(value: unknown): string {
-  if (value === null || value === undefined) return ''
-  if (typeof value === 'object') return JSON.stringify(value)
-  return String(value)
-}
-
-function columnsForSection(columns: string[]): DataFrameColumn[] {
-  return columns.map((col) => ({
-    key: col,
-    label: humanizeColumn(col),
-    sortable: true,
-    formatter: (value: unknown) => formatCellValue(value),
-  }))
-}
-
-function handleDownloadJson() {
-  if (props.downloadJsonUrl) {
-    window.open(props.downloadJsonUrl, '_blank')
-  }
-  emit('download-json')
-}
-
-function handleDownloadCsv() {
-  if (props.downloadCsvUrl) {
-    window.open(props.downloadCsvUrl, '_blank')
-  }
-  emit('download-csv')
-}
-</script>
-
-<template>
-  <div class="mint-data-viewer">
-    <div class="mint-data-viewer__header">
-      <div class="mint-data-viewer__controls">
-        <SegmentedControl
-          v-model="viewMode"
-          :options="viewOptions"
-          variant="card"
-          size="sm"
-          :full-width="false"
-        />
-      </div>
-      <div class="mint-data-viewer__actions">
-        <BaseButton
-          v-if="pluginRoutePrefix && experimentId"
-          variant="secondary"
-          size="sm"
-          @click="emit('open-plugin')"
-        >
-          Open in {{ pluginName || 'Plugin' }}
-        </BaseButton>
-        <BaseButton
-          v-if="downloadJsonUrl"
-          variant="ghost"
-          size="sm"
-          @click="handleDownloadJson"
-        >
-          JSON
-        </BaseButton>
-        <BaseButton
-          v-if="downloadCsvUrl"
-          variant="ghost"
-          size="sm"
-          @click="handleDownloadCsv"
-        >
-          CSV
-        </BaseButton>
-      </div>
-    </div>
-
-    <div class="mint-data-viewer__content">
-      <div v-if="isLoading" class="mint-data-viewer__loading">
-        <div class="mint-data-viewer__skeleton">
-          <Skeleton width="40%" height="16px" />
-          <Skeleton width="100%" height="12px" />
-          <Skeleton width="100%" height="12px" />
-          <Skeleton width="75%" height="12px" />
-        </div>
-      </div>
-      <template v-else>
-        <!-- Summary View -->
-        <div v-if="viewMode === 'summary' && mergedSummaryData" class="mint-summary">
-          <!-- Metadata pills -->
-          <div v-if="metadataEntries.length" class="mint-summary__metadata">
-            <span
-              v-for="entry in metadataEntries"
-              :key="entry.key"
-              class="mint-summary__pill"
-            >
-              <span class="mint-summary__pill-key">{{ entry.key }}</span>
-              <span class="mint-summary__pill-value">{{ entry.value }}</span>
-            </span>
-          </div>
-
-          <!-- Sections -->
-          <div
-            v-for="section in mergedSummaryData.sections"
-            :key="section.key"
-            class="mint-summary__section"
-          >
-            <!-- Group section: cards with embedded tables -->
-            <template v-if="section.type === 'group' && section.items">
-              <div
-                v-for="(item, idx) in section.items"
-                :key="idx"
-                class="mint-summary__group-card"
-              >
-                <div class="mint-summary__group-header">
-                  <span class="mint-summary__group-label">{{ item.label }}</span>
-                  <span class="mint-summary__group-count">
-                    {{ item.item_count }} {{ item.item_key }}
-                  </span>
-                </div>
-                <div v-if="item.metadata && Object.keys(item.metadata).length" class="mint-summary__group-meta">
-                  <span
-                    v-for="(val, key) in item.metadata"
-                    :key="String(key)"
-                    class="mint-summary__pill mint-summary__pill--sm"
-                  >
-                    <span class="mint-summary__pill-key">{{ String(key).replace(/_/g, ' ') }}</span>
-                    <span class="mint-summary__pill-value">{{ val }}</span>
-                  </span>
-                </div>
-                <DataFrame
-                  v-if="item.rows.length"
-                  :data="item.rows"
-                  :columns="columnsForSection(item.columns)"
-                  :searchable="item.rows.length > 10"
-                  :sortable="true"
-                  :striped="true"
-                  :bordered="false"
-                  size="sm"
-                />
-              </div>
-            </template>
-
-            <!-- Table section: flat table -->
-            <template v-else-if="section.type === 'table' && section.rows">
-              <div class="mint-summary__table-header">
-                <span class="mint-summary__section-label">{{ section.label }}</span>
-                <span class="mint-summary__section-count">{{ section.row_count }} rows</span>
-              </div>
-              <DataFrame
-                :data="section.rows"
-                :columns="columnsForSection(section.columns || [])"
-                :searchable="(section.rows?.length || 0) > 10"
-                :sortable="true"
-                :striped="true"
-                size="sm"
-              />
-            </template>
-          </div>
-        </div>
-
-        <!-- Tree View -->
-        <SampleHierarchyTree
-          v-else-if="viewMode === 'tree'"
-          :nodes="mergedTreeData"
-          :expand-all="false"
-          :show-icons="true"
-          :show-counts="true"
-          size="sm"
-        />
-
-        <!-- Table View -->
-        <DataFrame
-          v-else-if="viewMode === 'table' && hasTableData"
-          :data="mergedTableData!"
-          :columns="tableColumns ?? []"
-          :searchable="true"
-          :sortable="true"
-        />
-        <div v-else-if="viewMode === 'table'" class="mint-data-viewer__empty">
-          No tabular data available. Use tree view.
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/experiment-data-viewer.css';
-</style>