@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.2

package/src/components/ExperimentDataViewer.story.vue

@@ -1,177 +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
-            :error="state.error || null"
-            :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 }">
-
-        <HstText v-model="state.error" title="Error Message" />
-        <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,313 +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'
-import DataStateInternal from './internal/DataStateInternal.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
-  /**
-   * Error message. When set (or when the auto-fetch fails), the content area
-   * renders an error state instead of the data views.
-   */
-  error?: string | null
-  downloadJsonUrl?: string
-  downloadCsvUrl?: string
-  autoFetch?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: 'Data',
-  defaultView: 'summary',
-  loading: false,
-  error: null,
-  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 activeError = computed<string | null>(() =>
-  props.error ?? expData.error.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="activeError" class="mint-data-viewer__state">
-        <slot name="error" :error="activeError">
-          <DataStateInternal state="error" :title="activeError" />
-        </slot>
-      </div>
-      <div v-else-if="isLoading" class="mint-data-viewer__loading">
-        <slot name="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>
-        </slot>
-      </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__state">
-          <slot name="empty">
-            <DataStateInternal
-              state="empty"
-              title="No tabular data available"
-              description="Switch to the tree view to inspect this experiment."
-              size="sm"
-            />
-          </slot>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>

package/src/components/ExperimentTimeline.story.vue

@@ -1,208 +0,0 @@
-<script setup lang="ts">
-import ExperimentTimeline from './ExperimentTimeline.vue'
-import type { ProtocolStep } from '../types'
-
-const mockSteps: ProtocolStep[] = [
-  {
-    id: 'step-1',
-    type: 'addition',
-    name: 'Seed Cells',
-    description: 'Add 200 uL cell suspension per well at 5000 cells/well density.',
-    duration: 15,
-    status: 'completed',
-    parameters: { 'Cell density': '5000 cells/well', 'Volume': '200 uL' },
-    order: 0,
-  },
-  {
-    id: 'step-2',
-    type: 'incubation',
-    name: 'Overnight Incubation',
-    description: 'Allow cells to attach and reach 70-80% confluency.',
-    duration: 960,
-    status: 'completed',
-    parameters: { 'Temperature': '37 C', 'CO2': '5%' },
-    order: 1,
-  },
-  {
-    id: 'step-3',
-    type: 'wash',
-    name: 'PBS Wash',
-    description: 'Remove old media and wash with PBS.',
-    duration: 5,
-    status: 'in_progress',
-    parameters: { 'Buffer': 'PBS', 'Volume': '200 uL', 'Repeats': '2' },
-    order: 2,
-    progress: 35,
-  },
-  {
-    id: 'step-4',
-    type: 'addition',
-    name: 'Add Treatment',
-    description: 'Add compound dilutions to designated wells.',
-    duration: 30,
-    status: 'pending',
-    parameters: { 'Compound': 'Cisplatin', 'Concentration range': '0.1 - 100 uM' },
-    order: 3,
-  },
-  {
-    id: 'step-5',
-    type: 'measurement',
-    name: 'Cell Viability Assay',
-    description: 'Measure cell viability using CellTiter-Glo assay.',
-    duration: 45,
-    status: 'pending',
-    parameters: { 'Assay': 'CellTiter-Glo', 'Read mode': 'Luminescence' },
-    order: 4,
-  },
-]
-
-function initState() {
-  return {
-    loading: false,
-    error: '',
-    modelValue: mockSteps,
-    orientation: 'vertical' as const,
-    showDuration: true,
-    showTime: false,
-    editable: false,
-    collapsible: true,
-    size: 'md' as const,
-    colorByStatus: true,
-    colorByType: false,
-  }
-}
-
-function initProgressState() {
-  return { progress: 35, size: 'md' as const }
-}
-
-function withProgress(progress: number): ProtocolStep[] {
-  return mockSteps.map(step => (step.status === 'in_progress' ? { ...step, progress } : step))
-}
-</script>
-
-<template>
-  <Story title="Lab/ExperimentTimeline">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 600px;">
-          <ExperimentTimeline
-            :loading="state.loading"
-            :error="state.error || null"
-            v-model="state.modelValue"
-            :orientation="state.orientation"
-            :show-duration="state.showDuration"
-            :show-time="state.showTime"
-            :editable="state.editable"
-            :collapsible="state.collapsible"
-            :size="state.size"
-            :color-by-status="state.colorByStatus"
-            :color-by-type="state.colorByType"
-          />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstCheckbox v-model="state.loading" title="Loading" />
-        <HstText v-model="state.error" title="Error Message" />
-        <HstSelect
-          v-model="state.orientation"
-          title="Orientation"
-          :options="[
-            { value: 'vertical', label: 'Vertical' },
-            { value: 'horizontal', label: 'Horizontal' },
-          ]"
-        />
-        <HstCheckbox v-model="state.showDuration" title="Show Duration" />
-        <HstCheckbox v-model="state.showTime" title="Show Time" />
-        <HstCheckbox v-model="state.editable" title="Editable" />
-        <HstCheckbox v-model="state.collapsible" title="Collapsible" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="[
-            { value: 'sm', label: 'Small' },
-            { value: 'md', label: 'Medium' },
-            { value: 'lg', label: 'Large' },
-          ]"
-        />
-        <HstCheckbox v-model="state.colorByStatus" title="Color by Status" />
-        <HstCheckbox v-model="state.colorByType" title="Color by Type" />
-      </template>
-    </Variant>
-
-    <Variant title="Step Progress" :init-state="initProgressState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 600px;">
-          <ExperimentTimeline :model-value="withProgress(state.progress)" :size="state.size" />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstSlider v-model="state.progress" title="Progress (%)" :min="0" :max="100" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="[
-            { value: 'sm', label: 'Small' },
-            { value: 'md', label: 'Medium' },
-            { value: 'lg', label: 'Large' },
-          ]"
-        />
-      </template>
-    </Variant>
-
-    <Variant title="Horizontal">
-      <div style="padding: 2rem; overflow-x: auto;">
-        <ExperimentTimeline
-          :model-value="mockSteps"
-          orientation="horizontal"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Editable">
-      <div style="padding: 2rem; max-width: 600px;">
-        <ExperimentTimeline
-          :model-value="mockSteps"
-          editable
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Color by Type">
-      <div style="padding: 2rem; max-width: 600px;">
-        <ExperimentTimeline
-          :model-value="mockSteps"
-          :color-by-status="false"
-          color-by-type
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Small">
-      <div style="padding: 2rem; max-width: 400px;">
-        <ExperimentTimeline
-          :model-value="mockSteps"
-          size="sm"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Empty">
-      <div style="padding: 2rem; max-width: 600px;">
-        <ExperimentTimeline :model-value="[]" editable />
-      </div>
-    </Variant>
-
-    <Variant title="Loading">
-      <div style="padding: 2rem; max-width: 600px;">
-        <ExperimentTimeline :model-value="[]" loading />
-      </div>
-    </Variant>
-
-    <Variant title="Error">
-      <div style="padding: 2rem; max-width: 600px;">
-        <ExperimentTimeline :model-value="[]" error="Could not load the protocol." />
-      </div>
-    </Variant>
-  </Story>
-</template>