@morscherlab/mld-sdk 0.7.2 → 0.7.4

package/src/components/BaseModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import type { ModalSize } from '../types'
 
 interface Props {
@@ -23,6 +23,49 @@ const emit = defineEmits<{
   close: []
 }>()
 
+const containerRef = ref<HTMLElement | null>(null)
+let previouslyFocused: HTMLElement | null = null
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ')
+
+function getFocusableElements(): HTMLElement[] {
+  if (!containerRef.value) return []
+  return Array.from(containerRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {
+    close()
+    return
+  }
+
+  if (event.key !== 'Tab' || !containerRef.value) return
+
+  const focusable = getFocusableElements()
+  if (focusable.length === 0) {
+    event.preventDefault()
+    return
+  }
+
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault()
+    last.focus()
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault()
+    first.focus()
+  }
+}
+
 function close() {
   if (props.closable) {
     emit('update:modelValue', false)
@@ -36,26 +79,30 @@ function handleOverlayClick(event: MouseEvent) {
   }
 }
 
-function handleEscape(event: KeyboardEvent) {
-  if (props.closeOnEscape && event.key === 'Escape' && props.modelValue) {
-    close()
-  }
-}
-
-watch(() => props.modelValue, (isOpen) => {
+watch(() => props.modelValue, async (isOpen) => {
   if (isOpen) {
+    previouslyFocused = document.activeElement as HTMLElement | null
     document.body.style.overflow = 'hidden'
+    await nextTick()
+    const focusable = getFocusableElements()
+    if (focusable.length > 0) {
+      focusable[0].focus()
+    } else {
+      containerRef.value?.focus()
+    }
   } else {
     document.body.style.overflow = ''
+    previouslyFocused?.focus()
+    previouslyFocused = null
   }
 })
 
 onMounted(() => {
-  document.addEventListener('keydown', handleEscape)
+  document.addEventListener('keydown', handleKeydown)
 })
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', handleEscape)
+  document.removeEventListener('keydown', handleKeydown)
   document.body.style.overflow = ''
 })
 </script>
@@ -73,12 +120,14 @@ onUnmounted(() => {
 
         <!-- Modal -->
         <div
+          ref="containerRef"
           :class="[
             'mld-modal__container',
             `mld-modal__container--${size}`,
           ]"
           role="dialog"
           aria-modal="true"
+          tabindex="-1"
         >
           <!-- Header -->
           <div v-if="title || closable" class="mld-modal__header">

package/src/components/BaseSelect.vue

@@ -8,6 +8,7 @@ interface Props {
   disabled?: boolean
   error?: boolean
   size?: 'sm' | 'md' | 'lg'
+  ariaDescribedby?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,6 +35,8 @@ function handleChange(event: Event) {
     <select
       :value="modelValue"
       :disabled="disabled"
+      :aria-invalid="error || undefined"
+      :aria-describedby="ariaDescribedby || undefined"
       :class="[
         'mld-select__control',
         `mld-select__control--${size}`,

package/src/components/BaseTextarea.vue

@@ -9,6 +9,7 @@ interface Props {
   rows?: number
   resize?: 'none' | 'vertical' | 'horizontal' | 'both'
   maxlength?: number
+  ariaDescribedby?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,6 +41,8 @@ function handleInput(event: Event) {
     :readonly="props.readonly"
     :rows="props.rows"
     :maxlength="props.maxlength"
+    :aria-invalid="props.error || undefined"
+    :aria-describedby="props.ariaDescribedby || undefined"
     :class="[
       'mld-textarea',
       `mld-textarea--${props.size}`,

package/src/components/ExperimentCodeBadge.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+interface Props {
+  code: string
+  size?: 'sm' | 'md' | 'lg'
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'md',
+})
+</script>
+
+<template>
+  <span :class="['mld-exp-code', `mld-exp-code--${size}`]">
+    {{ code }}
+  </span>
+</template>
+
+<style>
+@import '../styles/components/experiment-code-badge.css';
+</style>

package/src/components/ExperimentDataViewer.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { TreeNode, DataFrameColumn, SummaryData } from '../types'
+import SampleHierarchyTree from './SampleHierarchyTree.vue'
+import DataFrame from './DataFrame.vue'
+import SegmentedControl from './SegmentedControl.vue'
+import BaseButton from './BaseButton.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,
+})
+
+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 (props.summaryData) {
+    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(() => props.summaryData, (val) => {
+  if (!val && viewMode.value === 'summary') {
+    viewMode.value = 'tree'
+  }
+}, { immediate: true })
+
+const hasTableData = computed(() =>
+  props.tableData && props.tableData.length > 0
+)
+
+const metadataEntries = computed(() => {
+  if (!props.summaryData?.metadata) return []
+  return Object.entries(props.summaryData.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="loading" class="mld-data-viewer__loading">
+        Loading...
+      </div>
+      <template v-else>
+        <!-- Summary View -->
+        <div v-if="viewMode === 'summary' && summaryData" 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 summaryData.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="treeData"
+          :expand-all="false"
+          :show-icons="true"
+          :show-counts="true"
+          size="sm"
+        />
+
+        <!-- Table View -->
+        <DataFrame
+          v-else-if="viewMode === 'table' && hasTableData"
+          :data="tableData!"
+          :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>

package/src/components/FormField.vue

@@ -1,13 +1,26 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 interface Props {
   label?: string
   error?: string
   hint?: string
   required?: boolean
   htmlFor?: string
+  fieldId?: string
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const errorId = computed(() =>
+  props.error && props.fieldId ? `${props.fieldId}-error` : undefined
+)
+
+const hintId = computed(() =>
+  !props.error && props.hint && props.fieldId ? `${props.fieldId}-hint` : undefined
+)
+
+const describedBy = computed(() => errorId.value ?? hintId.value)
 </script>
 
 <template>
@@ -21,12 +34,12 @@ defineProps<Props>()
       <span v-if="required" class="mld-form-field__required">*</span>
     </label>
 
-    <slot />
+    <slot :described-by="describedBy" />
 
-    <p v-if="error" class="mld-form-field__error">
+    <p v-if="error" :id="errorId" class="mld-form-field__error" role="alert">
       {{ error }}
     </p>
-    <p v-else-if="hint" class="mld-form-field__hint">
+    <p v-else-if="hint" :id="hintId" class="mld-form-field__hint">
       {{ hint }}
     </p>
   </div>

package/src/components/index.ts

@@ -95,6 +95,10 @@ export { default as FormSection } from './FormSection.vue'
 export { default as FormActions } from './FormActions.vue'
 export { default as FormFieldRenderer } from './FormFieldRenderer.vue'
 
+// Experiment data display components
+export { default as ExperimentDataViewer } from './ExperimentDataViewer.vue'
+export { default as ExperimentCodeBadge } from './ExperimentCodeBadge.vue'
+
 // Scheduling / booking components
 export { default as DateTimePicker } from './DateTimePicker.vue'
 export { default as TimeRangeInput } from './TimeRangeInput.vue'

package/src/index.ts

@@ -82,6 +82,9 @@ export {
   StepWizard,
   AuditTrail,
   BatchProgressList,
+  // Experiment data display components
+  ExperimentDataViewer,
+  ExperimentCodeBadge,
   // Scheduling / booking components
   DateTimePicker,
   TimeRangeInput,
@@ -272,6 +275,13 @@ export type {
   RegisterRequest,
   UpdateProfileRequest,
   CredentialInfo,
+  // Summary types
+  SummaryData,
+  SummarySection,
+  SummarySectionItem,
+  // Tree types
+  TreeNode,
+  TreeNodeType,
   // Platform types
   PluginInfo,
   PluginNavItem,

package/src/styles/components/button.css

@@ -15,12 +15,12 @@
   box-sizing: border-box;
 }
 
-.mld-button:focus {
+.mld-button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-primary);
 }
 
-html.dark .mld-button:focus {
+html.dark .mld-button:focus-visible {
   box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--color-primary);
 }
 
@@ -68,7 +68,7 @@ html.dark .mld-button:focus {
 }
 
 .mld-button--danger:hover:not(.mld-button--disabled) {
-  background-color: #DC2626;
+  background-color: var(--mld-error-hover);
 }
 
 .mld-button--success {
@@ -77,7 +77,7 @@ html.dark .mld-button:focus {
 }
 
 .mld-button--success:hover:not(.mld-button--disabled) {
-  background-color: #059669;
+  background-color: var(--mld-success-hover);
 }
 
 .mld-button--ghost {

package/src/styles/components/collapsible-card.css

@@ -7,6 +7,13 @@
   background-color: var(--bg-card);
 }
 
+/* Allow floating dropdowns (DatePicker, TimePicker, etc.) to escape overflow */
+.mld-collapsible-card:has(.mld-date-picker__dropdown),
+.mld-collapsible-card:has(.mld-time-picker__dropdown),
+.mld-collapsible-card:has(.mld-datetime-picker__dropdown) {
+  overflow: visible;
+}
+
 .mld-collapsible-card__header {
   display: flex;
   align-items: center;

package/src/styles/components/experiment-code-badge.css

@@ -0,0 +1,13 @@
+.mld-exp-code {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--mld-font-mono, ui-monospace, monospace);
+  font-weight: 600;
+  background: var(--mld-color-surface-2, #f0f0f0);
+  color: var(--mld-color-text-secondary, #666);
+  border-radius: var(--mld-radius-sm, 4px);
+  letter-spacing: 0.02em;
+}
+.mld-exp-code--sm { padding: 1px 6px; font-size: 11px; }
+.mld-exp-code--md { padding: 2px 8px; font-size: 12px; }
+.mld-exp-code--lg { padding: 3px 10px; font-size: 14px; }

package/src/styles/components/experiment-data-viewer.css

@@ -0,0 +1,131 @@
+.mld-data-viewer {
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+  border-radius: var(--mld-radius-md, 8px);
+  overflow: hidden;
+}
+.mld-data-viewer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+  background: var(--mld-color-surface-1, #fafafa);
+  gap: 8px;
+}
+.mld-data-viewer__controls { display: flex; gap: 8px; }
+.mld-data-viewer__actions { display: flex; gap: 4px; align-items: center; }
+.mld-data-viewer__content {
+  padding: 12px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+.mld-data-viewer__loading,
+.mld-data-viewer__empty {
+  text-align: center;
+  padding: 32px;
+  color: var(--mld-color-text-muted, #999);
+}
+
+/* Summary view */
+.mld-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Metadata pills row */
+.mld-summary__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.mld-summary__pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+  overflow: hidden;
+  font-size: 0.8125rem;
+  line-height: 1;
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+}
+
+.mld-summary__pill--sm {
+  font-size: 0.75rem;
+}
+
+.mld-summary__pill-key {
+  padding: 4px 8px;
+  background: var(--mld-color-surface-1, #f5f5f5);
+  color: var(--mld-color-text-muted, #666);
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+.mld-summary__pill-value {
+  padding: 4px 8px;
+  color: var(--mld-color-text, #1a1a1a);
+}
+
+/* Section */
+.mld-summary__section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mld-summary__section-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--mld-color-text, #1a1a1a);
+}
+
+.mld-summary__section-count {
+  font-size: 0.75rem;
+  color: var(--mld-color-text-muted, #999);
+  margin-left: 8px;
+}
+
+.mld-summary__table-header {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+/* Group cards */
+.mld-summary__group-card {
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+  border-radius: var(--mld-radius-md, 8px);
+  overflow: hidden;
+}
+
+.mld-summary__group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: var(--mld-color-surface-1, #fafafa);
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+}
+
+.mld-summary__group-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--mld-color-text, #1a1a1a);
+}
+
+.mld-summary__group-count {
+  font-size: 0.75rem;
+  color: var(--mld-color-text-muted, #999);
+  background: var(--mld-color-surface-2, #eee);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.mld-summary__group-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+}

package/src/styles/components/modal.css

@@ -67,7 +67,7 @@
 }
 
 .mld-modal__close {
-  padding: 0.25rem;
+  padding: 0.5rem;
   border-radius: var(--mld-radius-sm);
   color: var(--text-muted);
   background: none;