@morscherlab/mld-sdk 0.7.8 → 0.8.2

package/src/composables/experiment-utils.ts

@@ -0,0 +1,32 @@
+import type { ExperimentStatus, SelectOption, PillVariant } from '../types'
+
+export function formatExperimentDate(dateStr: string): string {
+  try {
+    return new Date(dateStr).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  } catch {
+    return dateStr
+  }
+}
+
+export const EXPERIMENT_STATUS_OPTIONS: SelectOption<string>[] = [
+  { value: '', label: 'All statuses' },
+  { value: 'planned', label: 'Planned' },
+  { value: 'ongoing', label: 'Ongoing' },
+  { value: 'completed', label: 'Completed' },
+]
+
+export const EXPERIMENT_STATUS_VARIANT_MAP: Record<ExperimentStatus, PillVariant> = {
+  planned: 'default',
+  ongoing: 'primary',
+  completed: 'success',
+}
+
+export const EXPERIMENT_STATUS_LABELS: Record<ExperimentStatus, string> = {
+  planned: 'Planned',
+  ongoing: 'Ongoing',
+  completed: 'Completed',
+}

package/src/composables/index.ts

@@ -93,6 +93,17 @@ export {
   type UseExperimentSelectorOptions,
   type UseExperimentSelectorReturn,
 } from './useExperimentSelector'
+export {
+  formatExperimentDate,
+  EXPERIMENT_STATUS_OPTIONS,
+  EXPERIMENT_STATUS_VARIANT_MAP,
+  EXPERIMENT_STATUS_LABELS,
+} from './experiment-utils'
+export {
+  useExperimentData,
+  type UseExperimentDataOptions,
+  type UseExperimentDataReturn,
+} from './useExperimentData'
 export {
   getFieldRegistryEntry,
   getTypeDefault,

package/src/composables/useExperimentData.ts

@@ -0,0 +1,85 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import { useApi } from './useApi'
+import type { TreeNode, SummaryData } from '../types'
+
+export interface UseExperimentDataOptions {
+  apiBaseUrl?: string
+  immediate?: boolean
+}
+
+export interface UseExperimentDataReturn {
+  data: Ref<Record<string, unknown> | null>
+  treeData: ComputedRef<TreeNode[]>
+  tableData: ComputedRef<Record<string, unknown>[]>
+  summaryData: ComputedRef<SummaryData | null>
+  isLoading: Ref<boolean>
+  error: Ref<string | null>
+  fetch: (experimentId: number) => Promise<void>
+  refresh: () => Promise<void>
+}
+
+export function useExperimentData(
+  options: UseExperimentDataOptions = {},
+): UseExperimentDataReturn {
+  const api = useApi({ baseUrl: options.apiBaseUrl })
+
+  const data = ref<Record<string, unknown> | null>(null)
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+  let lastExperimentId: number | null = null
+
+  const treeData = computed<TreeNode[]>(() => {
+    if (!data.value) return []
+    const tree = data.value.tree_data ?? data.value.treeData
+    return Array.isArray(tree) ? tree as TreeNode[] : []
+  })
+
+  const tableData = computed<Record<string, unknown>[]>(() => {
+    if (!data.value) return []
+    const table = data.value.table_data ?? data.value.tableData
+    return Array.isArray(table) ? table as Record<string, unknown>[] : []
+  })
+
+  const summaryData = computed<SummaryData | null>(() => {
+    if (!data.value) return null
+    const summary = data.value.summary_data ?? data.value.summaryData
+    if (summary && typeof summary === 'object' && 'metadata' in (summary as Record<string, unknown>)) {
+      return summary as SummaryData
+    }
+    return null
+  })
+
+  async function fetchData(experimentId: number): Promise<void> {
+    lastExperimentId = experimentId
+    isLoading.value = true
+    error.value = null
+    try {
+      const result = await api.get<Record<string, unknown>>(
+        `/api/experiments/${experimentId}/data`,
+      )
+      data.value = result
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'Failed to fetch experiment data'
+      data.value = null
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function refresh(): Promise<void> {
+    if (lastExperimentId !== null) {
+      await fetchData(lastExperimentId)
+    }
+  }
+
+  return {
+    data,
+    treeData,
+    tableData,
+    summaryData,
+    isLoading,
+    error,
+    fetch: fetchData,
+    refresh,
+  }
+}

package/src/composables/useExperimentSelector.ts

@@ -1,4 +1,4 @@
-import { ref, reactive, watch, type Ref } from 'vue'
+import { ref, reactive, computed, watch, onScopeDispose, type Ref, type ComputedRef } from 'vue'
 import { useApi } from './useApi'
 import type { ExperimentSummary, ExperimentListResponse, ExperimentFilters } from '../types'
 
@@ -16,7 +16,11 @@ export interface UseExperimentSelectorReturn {
   filters: ExperimentFilters
   isLoading: Ref<boolean>
   error: Ref<string | null>
+  page: Ref<number>
+  hasMore: ComputedRef<boolean>
   fetch: () => Promise<void>
+  loadMore: () => Promise<void>
+  reset: () => void
   select: (experiment: ExperimentSummary) => void
   clear: () => void
 }
@@ -32,12 +36,9 @@ export function useExperimentSelector(
   const selectedExperiment = ref<ExperimentSummary | null>(null)
   const isLoading = ref(false)
   const error = ref<string | null>(null)
+  const page = ref(0)
 
-  const filters: ExperimentFilters = reactive({
-    search: undefined,
-    status: undefined,
-    project: undefined,
-  })
+  const hasMore = computed(() => experiments.value.length < total.value)
 
   async function fetchExperiments(): Promise<void> {
     isLoading.value = true
@@ -49,21 +50,42 @@ export function useExperimentSelector(
       if (filters.search) params.set('search', filters.search)
       if (filters.project) params.set('project', filters.project)
       params.set('limit', String(limit))
+      params.set('skip', String(page.value * limit))
 
       const query = params.toString()
       const url = `/api/experiments${query ? `?${query}` : ''}`
       const data = await api.get<ExperimentListResponse>(url)
-      experiments.value = data.experiments
+
+      if (page.value === 0) {
+        experiments.value = data.experiments
+      } else {
+        experiments.value = [...experiments.value, ...data.experiments]
+      }
       total.value = data.total
     } catch (e) {
       error.value = e instanceof Error ? e.message : 'Failed to fetch experiments'
-      experiments.value = []
-      total.value = 0
+      if (page.value === 0) {
+        experiments.value = []
+        total.value = 0
+      }
     } finally {
       isLoading.value = false
     }
   }
 
+  async function loadMore(): Promise<void> {
+    if (!hasMore.value || isLoading.value) return
+    page.value++
+    await fetchExperiments()
+  }
+
+  function reset(): void {
+    page.value = 0
+    experiments.value = []
+    total.value = 0
+    fetchExperiments()
+  }
+
   function select(experiment: ExperimentSummary): void {
     selectedExperiment.value = experiment
   }
@@ -73,8 +95,15 @@ export function useExperimentSelector(
     filters.search = undefined
     filters.status = undefined
     filters.project = undefined
+    page.value = 0
   }
 
+  const filters: ExperimentFilters = reactive({
+    search: undefined,
+    status: undefined,
+    project: undefined,
+  })
+
   // Debounced watch on search filter
   let debounceTimer: ReturnType<typeof setTimeout> | null = null
   watch(
@@ -82,6 +111,7 @@ export function useExperimentSelector(
     () => {
       if (debounceTimer) clearTimeout(debounceTimer)
       debounceTimer = setTimeout(() => {
+        page.value = 0
         fetchExperiments()
       }, 300)
     },
@@ -91,10 +121,15 @@ export function useExperimentSelector(
   watch(
     () => [filters.status, filters.project],
     () => {
+      page.value = 0
       fetchExperiments()
     },
   )
 
+  onScopeDispose(() => {
+    if (debounceTimer) clearTimeout(debounceTimer)
+  })
+
   if (immediate) {
     fetchExperiments()
   }
@@ -106,7 +141,11 @@ export function useExperimentSelector(
     filters,
     isLoading,
     error,
+    page,
+    hasMore,
     fetch: fetchExperiments,
+    loadMore,
+    reset,
     select,
     clear,
   }

package/src/index.ts

@@ -150,6 +150,15 @@ export {
   useExperimentSelector,
   type UseExperimentSelectorOptions,
   type UseExperimentSelectorReturn,
+  // Experiment utilities
+  formatExperimentDate,
+  EXPERIMENT_STATUS_OPTIONS,
+  EXPERIMENT_STATUS_VARIANT_MAP,
+  EXPERIMENT_STATUS_LABELS,
+  // Experiment data
+  useExperimentData,
+  type UseExperimentDataOptions,
+  type UseExperimentDataReturn,
 } from './composables'
 
 // Stores

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

@@ -7,7 +7,27 @@
   color: var(--mld-color-text-secondary, #666);
   border-radius: var(--mld-radius-sm, 4px);
   letter-spacing: 0.02em;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 .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; }
+
+/* Copyable state */
+.mld-exp-code--copyable {
+  cursor: pointer;
+  user-select: none;
+}
+.mld-exp-code--copyable:hover {
+  background: var(--mld-color-surface-3, #e4e4e4);
+}
+.mld-exp-code--copyable:focus-visible {
+  outline: 2px solid var(--color-primary, #3b82f6);
+  outline-offset: 1px;
+}
+
+/* Copied feedback */
+.mld-exp-code--copied {
+  background: var(--mld-color-success-soft, #dcfce7);
+  color: var(--mld-color-success, #16a34a);
+}

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

@@ -19,7 +19,14 @@
   max-height: 600px;
   overflow-y: auto;
 }
-.mld-data-viewer__loading,
+.mld-data-viewer__loading {
+  padding: 24px 12px;
+}
+.mld-data-viewer__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
 .mld-data-viewer__empty {
   text-align: center;
   padding: 32px;

package/src/styles/components/experiment-selector-modal.css

@@ -22,11 +22,28 @@
   width: 10rem;
 }
 
-/* Loading */
-.mld-experiment-selector__loading {
+/* Loading skeleton */
+.mld-experiment-selector__skeleton {
   display: flex;
-  justify-content: center;
-  padding: 2rem 0;
+  flex-direction: column;
+  gap: 1px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--mld-radius);
+}
+
+.mld-experiment-selector__skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background-color: var(--bg-primary);
+}
+
+.mld-experiment-selector__skeleton-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 /* Error */
@@ -76,6 +93,18 @@
   background-color: var(--color-primary-soft);
 }
 
+/* Keyboard focused row */
+.mld-experiment-selector__row--focused {
+  background-color: var(--bg-hover);
+  outline: 2px solid var(--color-primary, #3b82f6);
+  outline-offset: -2px;
+  border-radius: 2px;
+}
+
+.mld-experiment-selector__row--active.mld-experiment-selector__row--focused {
+  background-color: var(--color-primary-soft);
+}
+
 /* Row content */
 .mld-experiment-selector__row-content {
   flex: 1;
@@ -83,9 +112,15 @@
 }
 
 .mld-experiment-selector__name {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--text-primary);
+}
+
+.mld-experiment-selector__name > span:first-child {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;