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

package/src/components/EmptyState.vue

@@ -0,0 +1,71 @@
+<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

@@ -0,0 +1,77 @@
+<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

@@ -0,0 +1,64 @@
+<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

@@ -0,0 +1,174 @@
+<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

@@ -0,0 +1,293 @@
+<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>