@morscherlab/mld-sdk 0.7.7 → 0.7.8

package/src/composables/useExperimentSelector.ts

@@ -0,0 +1,113 @@
+import { ref, reactive, watch, type Ref } from 'vue'
+import { useApi } from './useApi'
+import type { ExperimentSummary, ExperimentListResponse, ExperimentFilters } from '../types'
+
+export interface UseExperimentSelectorOptions {
+  experimentType?: string
+  apiBaseUrl?: string
+  limit?: number
+  immediate?: boolean
+}
+
+export interface UseExperimentSelectorReturn {
+  experiments: Ref<ExperimentSummary[]>
+  total: Ref<number>
+  selectedExperiment: Ref<ExperimentSummary | null>
+  filters: ExperimentFilters
+  isLoading: Ref<boolean>
+  error: Ref<string | null>
+  fetch: () => Promise<void>
+  select: (experiment: ExperimentSummary) => void
+  clear: () => void
+}
+
+export function useExperimentSelector(
+  options: UseExperimentSelectorOptions = {},
+): UseExperimentSelectorReturn {
+  const { limit = 100, immediate = false, experimentType, apiBaseUrl } = options
+  const api = useApi({ baseUrl: apiBaseUrl })
+
+  const experiments = ref<ExperimentSummary[]>([])
+  const total = ref(0)
+  const selectedExperiment = ref<ExperimentSummary | null>(null)
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  const filters: ExperimentFilters = reactive({
+    search: undefined,
+    status: undefined,
+    project: undefined,
+  })
+
+  async function fetchExperiments(): Promise<void> {
+    isLoading.value = true
+    error.value = null
+    try {
+      const params = new URLSearchParams()
+      if (experimentType) params.set('experiment_type', experimentType)
+      if (filters.status) params.set('status', filters.status)
+      if (filters.search) params.set('search', filters.search)
+      if (filters.project) params.set('project', filters.project)
+      params.set('limit', String(limit))
+
+      const query = params.toString()
+      const url = `/api/experiments${query ? `?${query}` : ''}`
+      const data = await api.get<ExperimentListResponse>(url)
+      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
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  function select(experiment: ExperimentSummary): void {
+    selectedExperiment.value = experiment
+  }
+
+  function clear(): void {
+    selectedExperiment.value = null
+    filters.search = undefined
+    filters.status = undefined
+    filters.project = undefined
+  }
+
+  // Debounced watch on search filter
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+  watch(
+    () => filters.search,
+    () => {
+      if (debounceTimer) clearTimeout(debounceTimer)
+      debounceTimer = setTimeout(() => {
+        fetchExperiments()
+      }, 300)
+    },
+  )
+
+  // Immediate watch on status/project filters (no debounce needed)
+  watch(
+    () => [filters.status, filters.project],
+    () => {
+      fetchExperiments()
+    },
+  )
+
+  if (immediate) {
+    fetchExperiments()
+  }
+
+  return {
+    experiments,
+    total,
+    selectedExperiment,
+    filters,
+    isLoading,
+    error,
+    fetch: fetchExperiments,
+    select,
+    clear,
+  }
+}

package/src/index.ts

@@ -91,6 +91,9 @@ export {
   TimeRangeInput,
   ScheduleCalendar,
   ResourceCard,
+  // Experiment / analysis components
+  ExperimentSelectorModal,
+  FitPanel,
 } from './components'
 
 // Composables
@@ -143,6 +146,10 @@ export {
   // Auto-group
   useAutoGroup,
   DEFAULT_COLORS,
+  // Experiment selector
+  useExperimentSelector,
+  type UseExperimentSelectorOptions,
+  type UseExperimentSelectorReturn,
 } from './composables'
 
 // Stores
@@ -267,6 +274,14 @@ export type {
   // Resource types
   ResourceStatus,
   ResourceSpec,
+  // Experiment selector types
+  ExperimentStatus,
+  ExperimentSummary,
+  ExperimentListResponse,
+  ExperimentFilters,
+  // FitPanel types
+  FitState,
+  FitResultSummary,
   // UnitInput types
   UnitOption,
   // StepWizard types

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

@@ -0,0 +1,101 @@
+/* ExperimentSelectorModal Component Styles */
+
+.mld-experiment-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Filter bar */
+.mld-experiment-selector__filters {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.mld-experiment-selector__search {
+  flex: 1;
+  min-width: 0;
+}
+
+.mld-experiment-selector__status-filter {
+  flex-shrink: 0;
+  width: 10rem;
+}
+
+/* Loading */
+.mld-experiment-selector__loading {
+  display: flex;
+  justify-content: center;
+  padding: 2rem 0;
+}
+
+/* Error */
+.mld-experiment-selector__error {
+  padding: 0.75rem;
+  border-radius: var(--mld-radius-sm);
+  background-color: var(--mld-error-bg);
+  color: var(--mld-error);
+  font-size: 0.875rem;
+}
+
+/* Scrollable list */
+.mld-experiment-selector__list {
+  max-height: 400px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--mld-radius);
+}
+
+/* Row */
+.mld-experiment-selector__row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  background-color: var(--bg-primary);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.mld-experiment-selector__row:hover {
+  background-color: var(--bg-hover);
+}
+
+.mld-experiment-selector__row--active {
+  border-left-color: var(--color-primary);
+  background-color: var(--color-primary-soft);
+}
+
+.mld-experiment-selector__row--active:hover {
+  background-color: var(--color-primary-soft);
+}
+
+/* Row content */
+.mld-experiment-selector__row-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mld-experiment-selector__name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mld-experiment-selector__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.125rem;
+}

package/src/styles/components/fit-panel.css

@@ -0,0 +1,67 @@
+/* FitPanel Component Styles */
+
+.mld-fit-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Action bar */
+.mld-fit-panel__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* Progress */
+.mld-fit-panel__progress {
+  padding: 0.25rem 0;
+}
+
+/* Result list */
+.mld-fit-panel__results {
+  border: 1px solid var(--border-color);
+  border-radius: var(--mld-radius-sm);
+  overflow: hidden;
+}
+
+.mld-fit-panel__result-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.mld-fit-panel__result-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.mld-fit-panel__result-row:last-child {
+  border-bottom: none;
+}
+
+.mld-fit-panel__result-label {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+
+.mld-fit-panel__result-value {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Result value variants */
+.mld-fit-panel__result-value--success {
+  color: var(--mld-success);
+}
+
+.mld-fit-panel__result-value--warning {
+  color: var(--mld-warning);
+}
+
+.mld-fit-panel__result-value--error {
+  color: var(--mld-error);
+}

package/src/styles/index.css

@@ -82,3 +82,5 @@
 @import './components/form-builder.css';
 @import './components/experiment-data-viewer.css';
 @import './components/experiment-code-badge.css';
+@import './components/experiment-selector-modal.css';
+@import './components/fit-panel.css';

package/src/types/components.ts

@@ -601,3 +601,41 @@ export interface ResourceSpec {
   label: string
   value: string
 }
+
+// Experiment selector types
+export type ExperimentStatus = 'planned' | 'ongoing' | 'completed'
+
+export interface ExperimentSummary {
+  id: number
+  experiment_code?: string
+  name: string
+  status: ExperimentStatus
+  experiment_type: string
+  project?: string
+  project_id?: number
+  notes?: string
+  tags?: Record<string, unknown>
+  created_at: string
+  updated_at: string
+  has_design_data: boolean
+}
+
+export interface ExperimentListResponse {
+  experiments: ExperimentSummary[]
+  total: number
+}
+
+export interface ExperimentFilters {
+  search?: string
+  status?: ExperimentStatus | null
+  project?: string | null
+}
+
+// FitPanel types
+export type FitState = 'idle' | 'running' | 'completed' | 'error'
+
+export interface FitResultSummary {
+  label: string
+  value: string | number
+  variant?: 'default' | 'success' | 'warning' | 'error'
+}

package/src/types/index.ts

@@ -126,6 +126,14 @@ export type {
   ResourceSpec,
   // MoleculeInput types
   MoleculeData,
+  // Experiment selector types
+  ExperimentStatus,
+  ExperimentSummary,
+  ExperimentListResponse,
+  ExperimentFilters,
+  // FitPanel types
+  FitState,
+  FitResultSummary,
   // ReagentList types
   StorageCondition,
   ReagentColumn,