@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/ExperimentTimeline.vue

@@ -1,383 +0,0 @@
-<script setup lang="ts">
-/** Horizontal or vertical timeline of ordered protocol steps with status indicators, drag-to-reorder, and step-type iconography. */
-import { ref, computed, type ComponentPublicInstance } from 'vue'
-import type { ProtocolStep, ProtocolStepStatus } from '../types'
-import { useListReorder } from '../composables/useListReorder'
-import {
-  PROTOCOL_STEP_TYPE_COLORS as stepTypeColors,
-  PROTOCOL_STEP_TYPE_ICONS as stepTypeIcons,
-  formatProtocolDuration as formatDuration,
-} from './ProtocolStep.presentation'
-import DataStateInternal from './internal/DataStateInternal.vue'
-
-interface Props {
-  modelValue?: ProtocolStep[]
-  orientation?: 'horizontal' | 'vertical'
-  showDuration?: boolean
-  showTime?: boolean
-  editable?: boolean
-  collapsible?: boolean
-  expandedStepId?: string
-  size?: 'sm' | 'md' | 'lg'
-  colorByStatus?: boolean
-  colorByType?: boolean
-  /** Replace the timeline with a loading placeholder. */
-  loading?: boolean
-  /**
-   * Error message. When set, the timeline is replaced by an error state.
-   * `null`/`undefined` renders normally.
-   */
-  error?: string | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [],
-  orientation: 'vertical',
-  showDuration: true,
-  showTime: false,
-  editable: false,
-  collapsible: true,
-  expandedStepId: undefined,
-  size: 'md',
-  colorByStatus: true,
-  colorByType: false,
-  loading: false,
-  error: null,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [steps: ProtocolStep[]]
-  'step-click': [step: ProtocolStep]
-  'step-expand': [stepId: string | undefined]
-  'step-add': [afterStepId?: string]
-  'step-remove': [stepId: string]
-  'step-update': [step: ProtocolStep]
-  'step-reorder': [stepId: string, newOrder: number]
-  'step-status-change': [stepId: string, status: ProtocolStepStatus]
-}>()
-
-const localExpandedId = ref<string | undefined>(props.expandedStepId)
-const stepRefs = new Map<string, HTMLElement>()
-
-const expandedId = computed({
-  get: () => props.expandedStepId ?? localExpandedId.value,
-  set: (id) => {
-    localExpandedId.value = id
-    emit('step-expand', id)
-  },
-})
-
-const sortedSteps = computed(() => {
-  if (props.modelValue.every((step, i, arr) => i === 0 || step.order >= arr[i - 1].order)) {
-    return props.modelValue
-  }
-  return [...props.modelValue].sort((a, b) => a.order - b.order)
-})
-
-const statusClasses: Record<ProtocolStepStatus, string> = {
-  pending: 'mint-timeline__card--pending',
-  in_progress: 'mint-timeline__card--in-progress',
-  completed: 'mint-timeline__card--completed',
-  failed: 'mint-timeline__card--failed',
-  skipped: 'mint-timeline__card--skipped',
-}
-
-const iconStatusClasses: Record<ProtocolStepStatus, string> = {
-  pending: 'mint-timeline__icon--pending',
-  in_progress: 'mint-timeline__icon--in-progress',
-  completed: 'mint-timeline__icon--completed',
-  failed: 'mint-timeline__icon--failed',
-  skipped: 'mint-timeline__icon--skipped',
-}
-
-function getStepColor(step: ProtocolStep): string {
-  return props.colorByType && !props.colorByStatus ? stepTypeColors[step.type] : ''
-}
-
-function getStatusClass(step: ProtocolStep): string {
-  return props.colorByStatus ? statusClasses[step.status] : statusClasses.pending
-}
-
-function getIconStatusClass(step: ProtocolStep): string {
-  return props.colorByStatus ? iconStatusClasses[step.status] : iconStatusClasses.pending
-}
-
-/** Rounded, clamped percent for the running step; `null` hides the bar (3d). */
-function stepProgress(step: ProtocolStep): number | null {
-  if (step.status !== 'in_progress' || step.progress == null) return null
-  return Math.round(Math.min(100, Math.max(0, step.progress)))
-}
-
-function toggleExpand(step: ProtocolStep) {
-  expandedId.value = expandedId.value === step.id ? undefined : step.id
-}
-
-function handleStepClick(step: ProtocolStep) {
-  emit('step-click', step)
-  if (props.collapsible) {
-    toggleExpand(step)
-  }
-}
-
-function handleStatusChange(step: ProtocolStep, status: ProtocolStepStatus) {
-  const updatedSteps = props.modelValue.map(s =>
-    s.id === step.id ? { ...s, status } : s
-  )
-  emit('step-status-change', step.id, status)
-  emit('update:modelValue', updatedSteps)
-}
-
-function handleRemoveStep(stepId: string) {
-  const updatedSteps = props.modelValue
-    .filter(s => s.id !== stepId)
-    .map((s, i) => ({ ...s, order: i }))
-  emit('step-remove', stepId)
-  emit('update:modelValue', updatedSteps)
-}
-
-function handleAddStep(afterStepId?: string) {
-  emit('step-add', afterStepId)
-}
-
-// Steps are a plain ordered list, so pointer drag and the Alt+Arrow keyboard
-// alternative both come from the shared reorder composable.
-const {
-  draggingId: draggedStepId,
-  dragOverId: dragOverStepId,
-  announcement: reorderAnnouncement,
-  announcerStyle,
-  onDragStart: onStepDragStart,
-  onDragOver: onStepDragOver,
-  onDragLeave: onStepDragLeave,
-  onDrop: onStepDrop,
-  onDragEnd: onStepDragEnd,
-  onKeydown: onStepReorderKeydown,
-} = useListReorder<ProtocolStep>({
-  items: () => sortedSteps.value,
-  getId: (step) => step.id,
-  getLabel: (step) => step.name,
-  disabled: () => !props.editable,
-  getElement: (id) => stepRefs.get(id),
-  itemNoun: 'Step',
-  onReorder: ({ toIndex, items }) => {
-    emit('step-reorder', items[toIndex].id, toIndex)
-    emit('update:modelValue', items.map((step, index) => ({ ...step, order: index })))
-  },
-})
-
-function setStepRef(id: string, el: Element | ComponentPublicInstance | null) {
-  if (el instanceof HTMLElement) {
-    stepRefs.set(id, el)
-  } else {
-    stepRefs.delete(id)
-  }
-}
-
-</script>
-
-<template>
-  <div
-    :class="['mint-timeline', orientation === 'horizontal' ? 'mint-timeline--horizontal' : 'mint-timeline--vertical']"
-    role="list"
-    :aria-label="`Protocol timeline with ${sortedSteps.length} steps`"
-  >
-    <div
-      v-for="(step, index) in (loading || error ? [] : sortedSteps)"
-      :key="step.id"
-      :ref="(el) => setStepRef(step.id, el)"
-      class="mint-timeline__step"
-      role="listitem"
-      :draggable="editable"
-      :tabindex="editable ? 0 : undefined"
-      :aria-label="editable
-        ? `${step.name}, step ${index + 1} of ${sortedSteps.length}. Press Alt with the arrow keys to reorder.`
-        : undefined"
-      @dragstart="onStepDragStart($event, step, index)"
-      @dragover="onStepDragOver($event, step, index)"
-      @dragleave="onStepDragLeave"
-      @drop="onStepDrop($event, step, index)"
-      @dragend="onStepDragEnd"
-      @keydown="onStepReorderKeydown($event, step, index)"
-    >
-      <div
-        v-if="index < sortedSteps.length - 1"
-        class="mint-timeline__connector"
-      />
-
-      <div
-        :class="[
-          'mint-timeline__card',
-          `mint-timeline__card--${size}`,
-          getStatusClass(step),
-          dragOverStepId === step.id ? 'mint-timeline__card--drag-over' : '',
-          draggedStepId === step.id ? 'mint-timeline__card--dragging' : '',
-          editable ? 'mint-timeline__card--editable' : '',
-        ]"
-        :style="colorByType ? { borderColor: getStepColor(step) } : {}"
-        @click="handleStepClick(step)"
-      >
-        <div :class="['mint-timeline__header', `mint-timeline__header--${size}`]">
-          <div
-            :class="[
-              'mint-timeline__icon',
-              `mint-timeline__icon--${size}`,
-              getIconStatusClass(step),
-            ]"
-            :style="colorByType ? { backgroundColor: `${getStepColor(step)}20`, color: getStepColor(step) } : {}"
-          >
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="stepTypeIcons[step.type]" />
-            </svg>
-          </div>
-
-          <div class="mint-timeline__content">
-            <div class="mint-timeline__title-row">
-              <span :class="['mint-timeline__title', `mint-timeline__title--${size}`]">
-                {{ step.name }}
-              </span>
-              <span
-                v-if="showDuration && step.duration"
-                :class="['mint-timeline__duration', size === 'sm' ? 'mint-timeline__duration--sm' : '']"
-              >
-                {{ formatDuration(step.duration) }}
-              </span>
-              <span v-if="stepProgress(step) !== null" class="mint-timeline__progress-value">
-                {{ stepProgress(step) }}%
-              </span>
-            </div>
-            <div :class="['mint-timeline__type', `mint-timeline__type--${size}`]">
-              {{ step.type.replace('_', ' ') }}
-            </div>
-            <div
-              v-if="stepProgress(step) !== null"
-              class="mint-timeline__progress"
-              role="progressbar"
-              aria-valuemin="0"
-              aria-valuemax="100"
-              :aria-valuenow="stepProgress(step)!"
-              :aria-label="`${step.name} progress`"
-            >
-              <div class="mint-timeline__progress-fill" :style="{ width: `${stepProgress(step)}%` }" />
-            </div>
-          </div>
-
-          <svg
-            v-if="collapsible && (step.description || step.parameters)"
-            :class="[
-              'mint-timeline__expand-icon',
-              expandedId === step.id ? 'mint-timeline__expand-icon--expanded' : '',
-            ]"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-          </svg>
-
-          <button
-            v-if="editable"
-            type="button"
-            class="mint-timeline__remove-btn"
-            :aria-label="`Remove ${step.name}`"
-            @click.stop="handleRemoveStep(step.id)"
-          >
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        <div
-          v-if="expandedId === step.id && (step.description || step.parameters)"
-          :aria-expanded="expandedId === step.id"
-          class="mint-timeline__expanded"
-        >
-          <p v-if="step.description" :class="['mint-timeline__description', `mint-timeline__description--${size}`]">
-            {{ step.description }}
-          </p>
-
-          <div v-if="step.parameters && Object.keys(step.parameters).length > 0" class="mint-timeline__parameters">
-            <div
-              v-for="(value, key) in step.parameters"
-              :key="String(key)"
-              :class="['mint-timeline__param', `mint-timeline__param--${size}`]"
-            >
-              <span class="mint-timeline__param-key">{{ key }}:</span>
-              <span class="mint-timeline__param-value">{{ value }}</span>
-            </div>
-          </div>
-
-          <div v-if="editable" class="mint-timeline__status-controls">
-            <button
-              v-for="status in (['pending', 'in_progress', 'completed', 'failed', 'skipped'] as const)"
-              :key="status"
-              type="button"
-              :class="[
-                'mint-timeline__status-btn',
-                `mint-timeline__status-btn--${status}`,
-                step.status === status ? 'mint-timeline__status-btn--active' : '',
-              ]"
-              @click.stop="handleStatusChange(step, status)"
-            >
-              {{ status.replace('_', ' ') }}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <button
-        v-if="editable && orientation === 'vertical'"
-        type="button"
-        class="mint-timeline__add-inline"
-        :aria-label="`Add step after ${step.name}`"
-        @click.stop="handleAddStep(step.id)"
-      >
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-        </svg>
-      </button>
-
-      <div v-if="orientation === 'vertical' && index < sortedSteps.length - 1" class="mint-timeline__spacer--vertical" />
-      <div v-if="orientation === 'horizontal' && index < sortedSteps.length - 1" class="mint-timeline__spacer--horizontal" />
-    </div>
-
-    <div v-if="error" class="mint-timeline__state">
-      <slot name="error" :error="error">
-        <DataStateInternal state="error" size="sm" :title="error" />
-      </slot>
-    </div>
-
-    <div v-else-if="loading" class="mint-timeline__state">
-      <slot name="loading">
-        <DataStateInternal state="loading" size="sm" loading-label="Loading protocol" />
-      </slot>
-    </div>
-
-    <div v-else-if="sortedSteps.length === 0" class="mint-timeline__state">
-      <slot name="empty">
-        <DataStateInternal
-          state="empty"
-          size="sm"
-          title="No protocol steps defined"
-          :action-label="editable ? 'Add First Step' : undefined"
-          @action="handleAddStep()"
-        />
-      </slot>
-    </div>
-
-    <button
-      v-if="editable && !loading && !error && sortedSteps.length > 0"
-      type="button"
-      :class="['mint-timeline__add-end', `mint-timeline__add-end--${size}`]"
-      @click="handleAddStep()"
-    >
-      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-      </svg>
-      <span :class="`mint-timeline__add-end-text--${size}`">Add Step</span>
-    </button>
-
-    <!-- Reorder announcements for screen readers -->
-    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
-  </div>
-</template>

package/src/components/FitPanel.story.vue

@@ -1,191 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import FitPanel from './FitPanel.vue'
-import type { FitState, FitResultSummary, FitSeries } from '../types'
-
-const states: FitState[] = ['idle', 'running', 'completed', 'error']
-
-const sampleResults: FitResultSummary[] = [
-  { label: 'IC50', value: '2.34 µM' },
-  { label: 'Hill slope', value: '-1.12' },
-  { label: 'Max response', value: '98.2%' },
-  { label: 'R²', value: '0.987 ≥ 0.95', variant: 'success', verdict: true },
-  { label: 'Outliers', value: '2 excluded', variant: 'warning', verdict: true },
-]
-
-const fitSeries: FitSeries[] = [
-  {
-    label: 'Control',
-    results: [
-      { label: 'IC50', unit: 'nM', value: '631', ci: '512 – 778' },
-      { label: 'Hill slope', value: '1.10', ci: '0.94 – 1.26' },
-      { label: 'Top', unit: '%', value: '99.2', ci: '96.8 – 101.6' },
-      { label: 'Bottom', unit: '%', value: '0.8', ci: '−1.9 – 3.5' },
-      { label: 'R²', value: '0.991 ≥ 0.95', variant: 'success', verdict: true },
-      { label: 'No outliers', value: '', variant: 'success', verdict: true },
-    ],
-  },
-  {
-    label: 'Treatment A',
-    results: [
-      { label: 'IC50', unit: 'nM', value: '39.8', ci: '33.1 – 47.9' },
-      { label: 'Hill slope', value: '1.21', ci: '1.02 – 1.40' },
-      { label: 'Top', unit: '%', value: '98.7', ci: '95.9 – 101.5' },
-      { label: 'Bottom', unit: '%', value: '1.4', ci: '−1.2 – 4.0' },
-      { label: 'R²', value: '0.982 ≥ 0.95', variant: 'success', verdict: true },
-      { label: '2 outliers excluded', value: '(Grubbs)', variant: 'warning', verdict: true },
-    ],
-  },
-  {
-    label: 'Treatment B',
-    results: [
-      { label: 'IC50', unit: 'nM', value: '7.94', ci: '5.62 – 11.2' },
-      { label: 'Hill slope', value: '0.88', ci: '0.66 – 1.10' },
-      { label: 'Top', unit: '%', value: '97.1', ci: '93.0 – 101.2' },
-      { label: 'Bottom', unit: '%', value: '3.2', ci: '−0.8 – 7.2' },
-      { label: 'R²', value: '0.931 < 0.95', variant: 'warning', verdict: true },
-      { label: '1 outlier excluded', value: '(Grubbs)', variant: 'warning', verdict: true },
-    ],
-  },
-]
-
-function initSeriesState() {
-  return { activeSeries: 1, parameterLabel: 'Parameter', valueLabel: 'Value', ciLabel: '95% CI' }
-}
-
-const playgroundState = ref<FitState>('idle')
-const playgroundProgress = ref(45)
-const playgroundDisabled = ref(false)
-
-function handleRun() {
-  playgroundState.value = 'running'
-  playgroundProgress.value = 0
-  const interval = setInterval(() => {
-    playgroundProgress.value += 10
-    if (playgroundProgress.value >= 100) {
-      clearInterval(interval)
-      playgroundState.value = 'completed'
-    }
-  }, 500)
-}
-</script>
-
-<template>
-  <Story title="Experiment/FitPanel">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
-          <FitPanel
-            :state="state.state"
-            :progress="state.progress"
-            :disabled="state.disabled"
-            :indeterminate="state.indeterminate"
-            progress-label="Fitting dose-response curve..."
-            :results="state.state === 'completed' ? sampleResults : []"
-            :error-message="state.state === 'error' ? 'Convergence failed: insufficient data points for 4PL fit' : undefined"
-            run-label="Run IC50 Fit"
-            @run="state.state = 'running'"
-            @cancel="state.state = 'idle'"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.state"
-          title="State"
-          :options="states.map(s => ({ label: s, value: s }))"
-        />
-        <HstSlider v-model="state.progress" title="Progress" :min="0" :max="100" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-        <HstCheckbox v-model="state.indeterminate" title="Indeterminate" />
-      </template>
-    </Variant>
-
-    <Variant title="Multi-series with CI" :init-state="initSeriesState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 420px; margin: 0 auto;">
-          <FitPanel
-            v-model:active-series="state.activeSeries"
-            state="completed"
-            :series="fitSeries"
-            :column-labels="{ parameter: state.parameterLabel, value: state.valueLabel, ci: state.ciLabel }"
-            run-label="Re-run Fit"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.activeSeries"
-          title="Active series"
-          :options="fitSeries.map((s, i) => ({ label: s.label, value: i }))"
-        />
-        <HstText v-model="state.parameterLabel" title="Parameter column" />
-        <HstText v-model="state.valueLabel" title="Value column" />
-        <HstText v-model="state.ciLabel" title="CI column" />
-      </template>
-    </Variant>
-
-    <Variant title="Idle">
-      <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
-        <FitPanel
-          state="idle"
-          run-label="Run IC50 Fit"
-          @run="() => console.log('Run fit')"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Running">
-      <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
-        <FitPanel
-          state="running"
-          :progress="65"
-          progress-label="Fitting dose-response curve..."
-          @cancel="() => console.log('Cancel fit')"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Completed">
-      <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
-        <FitPanel
-          state="completed"
-          :results="sampleResults"
-          run-label="Re-run Fit"
-          @run="() => console.log('Re-run fit')"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Error">
-      <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
-        <FitPanel
-          state="error"
-          error-message="Convergence failed: insufficient data points for 4PL fit. Ensure at least 4 dose levels with valid responses."
-          run-label="Retry Fit"
-          @run="() => console.log('Retry fit')"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Interactive Demo">
-      <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
-        <p style="font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 1rem;">
-          Click "Run IC50 Fit" to see the full state flow
-        </p>
-        <FitPanel
-          :state="playgroundState"
-          :progress="playgroundProgress"
-          :disabled="playgroundDisabled"
-          progress-label="Fitting dose-response curve..."
-          :results="playgroundState === 'completed' ? sampleResults : []"
-          run-label="Run IC50 Fit"
-          @run="handleRun"
-          @cancel="playgroundState = 'idle'"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>