@morscherlab/mint-sdk 1.0.0-alpha.2

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,288 @@
+<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
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Data',
+  defaultView: 'summary',
+  loading: false,
+})
+
+// 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 (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="mld-data-viewer">
+    <div class="mld-data-viewer__header">
+      <div class="mld-data-viewer__controls">
+        <SegmentedControl
+          v-model="viewMode"
+          :options="viewOptions"
+          variant="card"
+          size="sm"
+          :full-width="false"
+        />
+      </div>
+      <div class="mld-data-viewer__actions">
+        <BaseButton
+          v-if="pluginRoutePrefix && experimentId"
+          variant="secondary"
+          size="sm"
+          @click="emit('open-plugin')"
+        >
+          Open in {{ pluginName || 'Plugin' }}
+        </BaseButton>
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          @click="handleDownloadJson"
+        >
+          JSON
+        </BaseButton>
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          @click="handleDownloadCsv"
+        >
+          CSV
+        </BaseButton>
+      </div>
+    </div>
+
+    <div class="mld-data-viewer__content">
+      <div v-if="isLoading" class="mld-data-viewer__loading">
+        <div class="mld-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="mld-summary">
+          <!-- Metadata pills -->
+          <div v-if="metadataEntries.length" class="mld-summary__metadata">
+            <span
+              v-for="entry in metadataEntries"
+              :key="entry.key"
+              class="mld-summary__pill"
+            >
+              <span class="mld-summary__pill-key">{{ entry.key }}</span>
+              <span class="mld-summary__pill-value">{{ entry.value }}</span>
+            </span>
+          </div>
+
+          <!-- Sections -->
+          <div
+            v-for="section in mergedSummaryData.sections"
+            :key="section.key"
+            class="mld-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="mld-summary__group-card"
+              >
+                <div class="mld-summary__group-header">
+                  <span class="mld-summary__group-label">{{ item.label }}</span>
+                  <span class="mld-summary__group-count">
+                    {{ item.item_count }} {{ item.item_key }}
+                  </span>
+                </div>
+                <div v-if="item.metadata && Object.keys(item.metadata).length" class="mld-summary__group-meta">
+                  <span
+                    v-for="(val, key) in item.metadata"
+                    :key="String(key)"
+                    class="mld-summary__pill mld-summary__pill--sm"
+                  >
+                    <span class="mld-summary__pill-key">{{ String(key).replace(/_/g, ' ') }}</span>
+                    <span class="mld-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"
+                  size="sm"
+                />
+              </div>
+            </template>
+
+            <!-- Table section: flat table -->
+            <template v-else-if="section.type === 'table' && section.rows">
+              <div class="mld-summary__table-header">
+                <span class="mld-summary__section-label">{{ section.label }}</span>
+                <span class="mld-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="mld-data-viewer__empty">
+          No tabular data available. Use tree view.
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/experiment-data-viewer.css';
+</style>