@morscherlab/mint-sdk 1.3.8 → 1.4.0-beta.1

package/src/components/FitPanel.vue

@@ -1,168 +0,0 @@
-<script setup lang="ts">
-/** Control panel for running a curve-fit job with progress bar, results table, and error display. */
-import { computed } from 'vue'
-import type { FitState, FitResultSummary, FitSeries, FitColumnLabels } from '../types'
-import BaseButton from './BaseButton.vue'
-import SegmentedControl from './SegmentedControl.vue'
-import { SAMPLE_GROUP_TOKENS } from '../utils/color'
-import ProgressBar from './ProgressBar.vue'
-import AlertBox from './AlertBox.vue'
-
-interface Props {
-  state?: FitState
-  progress?: number
-  progressLabel?: string
-  indeterminate?: boolean
-  results?: FitResultSummary[]
-  errorMessage?: string
-  runLabel?: string
-  cancelLabel?: string
-  disabled?: boolean
-  /** Several fitted series, switched by a group-color segmented control. Supersedes `results`. */
-  series?: FitSeries[]
-  /** Header labels of the parameter table. */
-  columnLabels?: FitColumnLabels
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  state: 'idle',
-  progress: 0,
-  progressLabel: 'Fitting...',
-  indeterminate: false,
-  results: () => [],
-  runLabel: 'Run Fit',
-  cancelLabel: 'Cancel',
-  disabled: false,
-})
-
-const emit = defineEmits<{
-  run: []
-  cancel: []
-}>()
-
-/** Index of the shown series (`v-model:active-series`). */
-const activeSeries = defineModel<number>('activeSeries', { default: 0 })
-
-const seriesOptions = computed(() => (props.series ?? []).map((item, index) => ({
-  value: index,
-  label: item.label,
-  color: item.color ?? SAMPLE_GROUP_TOKENS[index % SAMPLE_GROUP_TOKENS.length],
-})))
-
-const shownResults = computed(() => props.series?.length
-  ? (props.series[activeSeries.value] ?? props.series[0]).results
-  : props.results)
-
-const labels = computed(() => ({ parameter: 'Parameter', value: 'Value', ci: '95% CI', ...props.columnLabels }))
-
-const isRunning = computed(() => props.state === 'running')
-const showRunButton = computed(() => !isRunning.value)
-// The series switch lives in the results block, so any series with results keeps it reachable.
-const showResults = computed(() => props.state === 'completed'
-  && (props.series?.length ? props.series.some(item => item.results.length > 0) : props.results.length > 0))
-const showError = computed(() => props.state === 'error' && props.errorMessage)
-
-// Values are never colored (9b): a result marked `verdict` moves to the check
-// row, where the verdict is carried by an icon shape (from `variant`) and the text.
-const isVerdict = (item: FitResultSummary) => !!item.verdict
-const tableResults = computed(() => shownResults.value.filter(item => !isVerdict(item)))
-const checkResults = computed(() => shownResults.value.filter(isVerdict))
-const showCi = computed(() => tableResults.value.some(item => item.ci !== undefined))
-</script>
-
-<template>
-  <div class="mint-fit-panel">
-    <!-- Plugin controls slot -->
-    <slot name="controls" />
-
-    <!-- Action bar -->
-    <div class="mint-fit-panel__actions">
-      <BaseButton
-        v-if="showRunButton"
-        variant="primary"
-        size="sm"
-        :disabled="disabled"
-        full-width
-        @click="emit('run')"
-      >
-        {{ runLabel }}
-      </BaseButton>
-      <BaseButton
-        v-if="isRunning"
-        variant="ghost"
-        size="sm"
-        full-width
-        @click="emit('cancel')"
-      >
-        {{ cancelLabel }}
-      </BaseButton>
-    </div>
-
-    <!-- Progress -->
-    <div v-if="isRunning" class="mint-fit-panel__progress">
-      <ProgressBar
-        :value="progress"
-        :label="progressLabel"
-        :indeterminate="indeterminate"
-        :show-value="!indeterminate"
-        size="sm"
-      />
-    </div>
-
-    <!-- Results -->
-    <div v-if="showResults" class="mint-fit-panel__results">
-      <slot name="results">
-        <div v-if="seriesOptions.length" class="mint-fit-panel__series">
-          <SegmentedControl v-model="activeSeries" :options="seriesOptions" size="sm" />
-        </div>
-        <table v-if="tableResults.length" class="mint-fit-panel__result-list">
-          <thead>
-            <tr class="mint-fit-panel__result-head">
-              <th scope="col">{{ labels.parameter }}</th>
-              <th scope="col" class="mint-fit-panel__result-num">{{ labels.value }}</th>
-              <th v-if="showCi" scope="col" class="mint-fit-panel__result-num">{{ labels.ci }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(item, idx) in tableResults"
-              :key="idx"
-              class="mint-fit-panel__result-row"
-            >
-              <th scope="row" class="mint-fit-panel__result-label">
-                {{ item.label }}<span v-if="item.unit" class="mint-fit-panel__result-unit">{{ item.unit }}</span>
-              </th>
-              <td class="mint-fit-panel__result-value mint-fit-panel__result-num">{{ item.value }}</td>
-              <td v-if="showCi" class="mint-fit-panel__result-ci mint-fit-panel__result-num">{{ item.ci }}</td>
-            </tr>
-          </tbody>
-        </table>
-        <div v-if="checkResults.length" class="mint-fit-panel__checks">
-          <span
-            v-for="(item, idx) in checkResults"
-            :key="idx"
-            :class="['mint-fit-panel__check', `mint-fit-panel__check--${item.variant ?? 'default'}`]"
-          >
-            <svg class="mint-fit-panel__check-icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-              <path v-if="item.variant === 'success'" class="mint-fit-panel__check-stroke" d="M3.5 8.5l3 3 6-7" />
-              <g v-else>
-                <path v-if="item.variant === 'warning'" class="mint-fit-panel__check-shape" d="M8 1.5l7 12.5H1z" />
-                <circle v-else class="mint-fit-panel__check-shape" cx="8" cy="8" r="7" />
-                <path class="mint-fit-panel__check-mark" d="M8 6v3M8 11.5v.01" />
-              </g>
-            </svg>
-            {{ item.label }} {{ item.value }}
-          </span>
-        </div>
-      </slot>
-    </div>
-
-    <!-- Error -->
-    <AlertBox v-if="showError" type="error">
-      {{ errorMessage }}
-    </AlertBox>
-
-    <!-- Footer slot -->
-    <slot name="footer" />
-  </div>
-</template>

package/src/components/FormActions.story.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import FormActions from './FormActions.vue'
-
-function log(event: string) {
-  return () => console.log(event)
-}
-
-function initState() {
-  return {
-    isWizard: false,
-    isFirst: true,
-    isLast: true,
-    canProceed: true,
-    loading: false,
-    disabled: false,
-    showCancel: true,
-    submitLabel: 'Submit',
-    cancelLabel: 'Cancel',
-  }
-}
-</script>
-
-<template>
-  <Story title="Forms/FormActions">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 600px;">
-          <FormActions
-            :is-wizard="state.isWizard"
-            :is-first="state.isFirst"
-            :is-last="state.isLast"
-            :can-proceed="state.canProceed"
-            :loading="state.loading"
-            :disabled="state.disabled"
-            :show-cancel="state.showCancel"
-            :submit-label="state.submitLabel"
-            :cancel-label="state.cancelLabel"
-            @submit="log('submit')()"
-            @cancel="log('cancel')()"
-            @back="log('back')()"
-            @next="log('next')()"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstCheckbox v-model="state.isWizard" title="Wizard mode" />
-        <HstCheckbox v-model="state.isFirst" title="First step" />
-        <HstCheckbox v-model="state.isLast" title="Last step" />
-        <HstCheckbox v-model="state.canProceed" title="Can proceed" />
-        <HstCheckbox v-model="state.loading" title="Loading" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-        <HstCheckbox v-model="state.showCancel" title="Show cancel" />
-        <HstText v-model="state.submitLabel" title="Submit label" />
-        <HstText v-model="state.cancelLabel" title="Cancel label" />
-      </template>
-    </Variant>
-
-    <Variant title="Flat form">
-      <div style="padding: 2rem; max-width: 600px;">
-        <FormActions show-cancel submit-label="Save design" />
-      </div>
-    </Variant>
-
-    <Variant title="Wizard — first step">
-      <!-- Back is hidden on the first step; Next gates on `canProceed`. -->
-      <div style="padding: 2rem; max-width: 600px;">
-        <FormActions is-wizard :is-first="true" :is-last="false" />
-      </div>
-    </Variant>
-
-    <Variant title="Wizard — middle step">
-      <div style="padding: 2rem; max-width: 600px;">
-        <FormActions is-wizard :is-first="false" :is-last="false" />
-      </div>
-    </Variant>
-
-    <Variant title="Wizard — last step">
-      <div style="padding: 2rem; max-width: 600px;">
-        <FormActions is-wizard :is-first="false" :is-last="true" submit-label="Create experiment" />
-      </div>
-    </Variant>
-
-    <Variant title="Blocked by validation">
-      <div style="padding: 2rem; max-width: 600px;">
-        <FormActions is-wizard :is-first="false" :is-last="false" :can-proceed="false" />
-      </div>
-    </Variant>
-
-    <Variant title="Loading">
-      <div style="padding: 2rem; max-width: 600px;">
-        <FormActions show-cancel loading submit-label="Saving…" />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/GroupAssigner.story.vue

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import GroupAssigner from './GroupAssigner.vue'
-import type { GroupItem } from '../types'
-
-const mockGroups: GroupItem[] = [
-  { name: 'Control_Rep1', color: '#3B82F6', count: 8 },
-  { name: 'Control_Rep2', color: '#3B82F6', count: 8 },
-  { name: 'Control_Rep3', color: '#3B82F6', count: 8 },
-  { name: 'Treatment_Rep1', color: '#10B981', count: 12 },
-  { name: 'Treatment_Rep2', color: '#10B981', count: 12 },
-  { name: 'Treatment_Rep3', color: '#10B981', count: 12 },
-  { name: 'Vehicle_Rep1', color: '#F59E0B', count: 4 },
-  { name: 'Vehicle_Rep2', color: '#F59E0B', count: 4 },
-]
-
-function initState() {
-  return {
-    groups: mockGroups,
-    group1: ['Control_Rep1', 'Control_Rep2', 'Control_Rep3'] as string[],
-    group2: ['Treatment_Rep1', 'Treatment_Rep2', 'Treatment_Rep3'] as string[],
-    label1: 'Control',
-    label2: 'Treatment',
-    color1: '#3B82F6',
-    color2: '#F43F5E',
-    minPerGroup: 1,
-  }
-}
-</script>
-
-<template>
-  <Story title="Lab/GroupAssigner">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 700px;">
-          <GroupAssigner
-            :groups="state.groups"
-            v-model:group1="state.group1"
-            v-model:group2="state.group2"
-            :label1="state.label1"
-            :label2="state.label2"
-            :color1="state.color1"
-            :color2="state.color2"
-            :min-per-group="state.minPerGroup"
-          />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstText v-model="state.label1" title="Label 1" />
-        <HstText v-model="state.label2" title="Label 2" />
-        <HstText v-model="state.color1" title="Color 1" />
-        <HstText v-model="state.color2" title="Color 2" />
-        <HstSlider v-model="state.minPerGroup" title="Min per Group" :min="0" :max="5" />
-      </template>
-    </Variant>
-
-    <Variant title="Empty (Unassigned)">
-      <div style="padding: 2rem; max-width: 700px;">
-        <GroupAssigner
-          :groups="mockGroups"
-          :group1="[]"
-          :group2="[]"
-          label1="Baseline"
-          label2="Experiment"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Custom Labels">
-      <div style="padding: 2rem; max-width: 700px;">
-        <GroupAssigner
-          :groups="mockGroups"
-          :group1="['Control_Rep1']"
-          :group2="['Treatment_Rep1']"
-          label1="Wild Type"
-          label2="Knockout"
-          color1="#8B5CF6"
-          color2="#06B6D4"
-          :min-per-group="2"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/GroupAssigner.vue

@@ -1,319 +0,0 @@
-<script setup lang="ts">
-/** Drag-and-drop two-zone assigner for splitting sample groups into control and treatment arms. */
-import { nextTick, ref, type ComponentPublicInstance } from 'vue'
-import type { GroupItem } from '../types'
-import { useGroupAssignment, type GroupAssignmentState, type GroupAssignmentZone } from '../composables/useGroupAssignment'
-import { useReorderAnnouncer } from '../composables/useListReorder'
-
-interface Props {
-  groups: GroupItem[]
-  group1: string[]
-  group2: string[]
-  label1?: string
-  label2?: string
-  color1?: string
-  color2?: string
-  minPerGroup?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label1: 'Control',
-  label2: 'Treatment',
-  color1: '#3B82F6',
-  color2: '#F43F5E',
-  minPerGroup: 1,
-})
-
-const emit = defineEmits<{
-  'update:group1': [names: string[]]
-  'update:group2': [names: string[]]
-}>()
-
-const dragOverZone = ref<'zone1' | 'zone2' | null>(null)
-const draggingGroup = ref<string | null>(null)
-
-const assignment = useGroupAssignment({
-  groups: () => props.groups,
-  group1: () => props.group1,
-  group2: () => props.group2,
-  label1: () => props.label1,
-  label2: () => props.label2,
-  minPerGroup: () => props.minPerGroup,
-})
-const { unassignedGroups, zone1Groups, zone2Groups, zone1Count, zone2Count, validationMessage } = assignment
-
-function handleDragStart(event: DragEvent, groupName: string) {
-  const transfer = event.dataTransfer
-  if (!transfer) return
-
-  draggingGroup.value = groupName
-  transfer.setData('groupName', groupName)
-  transfer.effectAllowed = 'move'
-}
-
-function handleDragEnd() {
-  draggingGroup.value = null
-  dragOverZone.value = null
-}
-
-function handleDragOver(event: DragEvent, zone: GroupAssignmentZone) {
-  event.preventDefault()
-  if (event.dataTransfer) {
-    event.dataTransfer.dropEffect = 'move'
-  }
-  dragOverZone.value = zone
-}
-
-function handleDragLeave() {
-  dragOverZone.value = null
-}
-
-function handleDrop(event: DragEvent, zone: GroupAssignmentZone) {
-  event.preventDefault()
-  dragOverZone.value = null
-
-  const groupName = event.dataTransfer?.getData('groupName')
-  if (!groupName) return
-
-  assignToZone(groupName, zone)
-}
-
-function assignToZone(groupName: string, zone: GroupAssignmentZone) {
-  emitAssignment(assignment.assignToZone(groupName, zone))
-}
-
-function removeFromZone(groupName: string, zone: GroupAssignmentZone) {
-  const state = assignment.removeFromZone(groupName, zone)
-  if (zone === 'zone1') {
-    emit('update:group1', state.group1)
-  } else {
-    emit('update:group2', state.group2)
-  }
-}
-
-function clearAll() {
-  emitAssignment(assignment.clearAll())
-}
-
-function emitAssignment(state: GroupAssignmentState) {
-  emit('update:group1', state.group1)
-  emit('update:group2', state.group2)
-}
-
-// Keyboard alternative to the pointer drag. GroupAssigner moves items between
-// zones rather than reordering one list, so it shares the announcer (and the
-// Alt+Arrow idiom) with useListReorder without its index maths.
-const { announcement, announce, announcerStyle } = useReorderAnnouncer()
-const pillRefs = new Map<string, HTMLElement>()
-
-function setPillRef(name: string, el: Element | ComponentPublicInstance | null) {
-  if (el instanceof HTMLElement) {
-    pillRefs.set(name, el)
-  } else {
-    pillRefs.delete(name)
-  }
-}
-
-function zoneLabel(zone: GroupAssignmentZone | null): string {
-  if (zone === 'zone1') return props.label1
-  if (zone === 'zone2') return props.label2
-  return 'Available Groups'
-}
-
-/** Alt+Left / Alt+Right walk a group through Control → unassigned → Treatment. */
-function handlePillKeydown(event: KeyboardEvent, groupName: string) {
-  if (!event.altKey) return
-  const direction =
-    event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0
-  if (direction === 0) return
-
-  event.preventDefault()
-  const order: Array<GroupAssignmentZone | null> = ['zone1', null, 'zone2']
-  const current = order.indexOf(assignment.getZoneForGroup(groupName))
-  const next = order[current + direction]
-  if (current === -1 || next === undefined) return
-
-  if (next === null) {
-    const from = assignment.getZoneForGroup(groupName)
-    if (from) removeFromZone(groupName, from)
-  } else {
-    assignToZone(groupName, next)
-  }
-
-  announce(`${groupName} moved to ${zoneLabel(next)}.`)
-  void nextTick(() => pillRefs.get(groupName)?.focus())
-}
-
-/** Instructions read out with each pill. */
-function pillLabel(group: GroupItem): string {
-  const zone = assignment.getZoneForGroup(group.name)
-  return `${group.name}, ${zoneLabel(zone)}. Press Alt with the left or right arrow keys to move it.`
-}
-</script>
-
-<template>
-  <div class="mint-group-assigner">
-    <!-- Drop zones -->
-    <div class="mint-group-assigner__zones">
-      <!-- Zone 1 (Control) -->
-      <div
-        :class="[
-          'mint-group-assigner__zone',
-          'mint-group-assigner__zone--1',
-          dragOverZone === 'zone1' ? 'mint-group-assigner__zone--dragover' : '',
-        ]"
-        :style="{ '--zone-color': color1 }"
-        @dragover="handleDragOver($event, 'zone1')"
-        @dragleave="handleDragLeave"
-        @drop="handleDrop($event, 'zone1')"
-      >
-        <div class="mint-group-assigner__zone-header">
-          <span class="mint-group-assigner__zone-label">{{ label1 }}</span>
-          <span class="mint-group-assigner__zone-count">{{ zone1Count }} samples</span>
-        </div>
-
-        <div class="mint-group-assigner__zone-content">
-          <div
-            v-for="group in zone1Groups"
-            :key="group.name"
-            :ref="(el) => setPillRef(group.name, el)"
-            class="mint-group-assigner__pill"
-            draggable="true"
-            tabindex="0"
-            :aria-label="pillLabel(group)"
-            @dragstart="handleDragStart($event, group.name)"
-            @dragend="handleDragEnd"
-            @keydown="handlePillKeydown($event, group.name)"
-          >
-            <span
-              class="mint-group-assigner__pill-color"
-              :style="{ backgroundColor: group.color }"
-            />
-            <span class="mint-group-assigner__pill-name">{{ group.name }}</span>
-            <span class="mint-group-assigner__pill-count">{{ group.count }}</span>
-            <button
-              type="button"
-              class="mint-group-assigner__pill-remove"
-              @click="removeFromZone(group.name, 'zone1')"
-            >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-
-          <div v-if="zone1Groups.length === 0" class="mint-group-assigner__zone-empty">
-            Drag groups here
-          </div>
-        </div>
-      </div>
-
-      <!-- Zone 2 (Treatment) -->
-      <div
-        :class="[
-          'mint-group-assigner__zone',
-          'mint-group-assigner__zone--2',
-          dragOverZone === 'zone2' ? 'mint-group-assigner__zone--dragover' : '',
-        ]"
-        :style="{ '--zone-color': color2 }"
-        @dragover="handleDragOver($event, 'zone2')"
-        @dragleave="handleDragLeave"
-        @drop="handleDrop($event, 'zone2')"
-      >
-        <div class="mint-group-assigner__zone-header">
-          <span class="mint-group-assigner__zone-label">{{ label2 }}</span>
-          <span class="mint-group-assigner__zone-count">{{ zone2Count }} samples</span>
-        </div>
-
-        <div class="mint-group-assigner__zone-content">
-          <div
-            v-for="group in zone2Groups"
-            :key="group.name"
-            :ref="(el) => setPillRef(group.name, el)"
-            class="mint-group-assigner__pill"
-            draggable="true"
-            tabindex="0"
-            :aria-label="pillLabel(group)"
-            @dragstart="handleDragStart($event, group.name)"
-            @dragend="handleDragEnd"
-            @keydown="handlePillKeydown($event, group.name)"
-          >
-            <span
-              class="mint-group-assigner__pill-color"
-              :style="{ backgroundColor: group.color }"
-            />
-            <span class="mint-group-assigner__pill-name">{{ group.name }}</span>
-            <span class="mint-group-assigner__pill-count">{{ group.count }}</span>
-            <button
-              type="button"
-              class="mint-group-assigner__pill-remove"
-              @click="removeFromZone(group.name, 'zone2')"
-            >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-
-          <div v-if="zone2Groups.length === 0" class="mint-group-assigner__zone-empty">
-            Drag groups here
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Unassigned groups -->
-    <div v-if="unassignedGroups.length > 0" class="mint-group-assigner__unassigned">
-      <div class="mint-group-assigner__unassigned-header">
-        <span class="mint-group-assigner__unassigned-title">Available Groups</span>
-        <button
-          v-if="group1.length > 0 || group2.length > 0"
-          type="button"
-          class="mint-group-assigner__clear-btn"
-          @click="clearAll"
-        >
-          Clear all
-        </button>
-      </div>
-
-      <div class="mint-group-assigner__unassigned-list">
-        <div
-          v-for="group in unassignedGroups"
-          :key="group.name"
-          :ref="(el) => setPillRef(group.name, el)"
-          :class="[
-            'mint-group-assigner__pill',
-            'mint-group-assigner__pill--unassigned',
-            draggingGroup === group.name ? 'mint-group-assigner__pill--dragging' : '',
-          ]"
-          draggable="true"
-          tabindex="0"
-          :aria-label="pillLabel(group)"
-          @dragstart="handleDragStart($event, group.name)"
-          @dragend="handleDragEnd"
-          @keydown="handlePillKeydown($event, group.name)"
-        >
-          <span
-            class="mint-group-assigner__pill-color"
-            :style="{ backgroundColor: group.color }"
-          />
-          <span class="mint-group-assigner__pill-name">{{ group.name }}</span>
-          <span class="mint-group-assigner__pill-count">{{ group.count }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Assignment announcements for screen readers -->
-    <div role="status" aria-live="polite" :style="announcerStyle">{{ announcement }}</div>
-
-    <!-- Validation message -->
-    <div v-if="validationMessage" class="mint-group-assigner__validation">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <circle cx="12" cy="12" r="10" />
-        <line x1="12" y1="8" x2="12" y2="12" />
-        <line x1="12" y1="16" x2="12.01" y2="16" />
-      </svg>
-      {{ validationMessage }}
-    </div>
-  </div>
-</template>