@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/components/GroupAssigner.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+/** Drag-and-drop two-zone assigner for splitting sample groups into control and treatment arms. */
+import { ref } from 'vue'
+import type { GroupItem } from '../types'
+import { useGroupAssignment, type GroupAssignmentState, type GroupAssignmentZone } from '../composables/useGroupAssignment'
+
+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)
+}
+</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"
+            class="mint-group-assigner__pill"
+            draggable="true"
+            @dragstart="handleDragStart($event, group.name)"
+            @dragend="handleDragEnd"
+          >
+            <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"
+            class="mint-group-assigner__pill"
+            draggable="true"
+            @dragstart="handleDragStart($event, group.name)"
+            @dragend="handleDragEnd"
+          >
+            <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"
+          :class="[
+            'mint-group-assigner__pill',
+            'mint-group-assigner__pill--unassigned',
+            draggingGroup === group.name ? 'mint-group-assigner__pill--dragging' : '',
+          ]"
+          draggable="true"
+          @dragstart="handleDragStart($event, group.name)"
+          @dragend="handleDragEnd"
+        >
+          <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>
+
+    <!-- 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>
+
+<style>
+@import '../styles/components/group-assigner.css';
+</style>

package/src/components/IconButton.story.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import IconButton from './IconButton.vue'
+import type { ButtonVariant, ButtonSize } from '../types'
+
+const variants: ButtonVariant[] = ['primary', 'secondary', 'cta', 'danger', 'success', 'ghost']
+const sizes: ButtonSize[] = ['sm', 'md', 'lg']
+
+function handleClick() {
+  console.log('IconButton clicked')
+}
+</script>
+
+<template>
+  <Story title="Action/IconButton">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <IconButton
+            :variant="state.variant"
+            :size="state.size"
+            :disabled="state.disabled"
+            :loading="state.loading"
+            :label="state.label"
+            @click="handleClick"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 5v14M5 12h14" />
+            </svg>
+          </IconButton>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.label" title="Label (aria)" />
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+      </template>
+    </Variant>
+
+    <Variant title="All Variants">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+            <IconButton
+              v-for="variant in variants"
+              :key="variant"
+              :variant="variant"
+              :size="size"
+              :label="variant"
+              @click="handleClick"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </IconButton>
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Loading States">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <IconButton
+          v-for="variant in variants"
+          :key="variant"
+          :variant="variant"
+          :label="`${variant} loading`"
+          loading
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 5v14M5 12h14" />
+          </svg>
+        </IconButton>
+      </div>
+    </Variant>
+
+    <Variant title="Common Icons">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
+        <IconButton label="Add" variant="ghost" @click="handleClick">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 5v14M5 12h14" />
+          </svg>
+        </IconButton>
+        <IconButton label="Edit" variant="ghost" @click="handleClick">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+          </svg>
+        </IconButton>
+        <IconButton label="Delete" variant="danger" @click="handleClick">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+          </svg>
+        </IconButton>
+        <IconButton label="Download" variant="primary" @click="handleClick">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+          </svg>
+        </IconButton>
+        <IconButton label="AI" variant="ghost" @click="handleClick">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 3 14 10 21 12 14 14 12 21 10 14 3 12 10 10Z" />
+          </svg>
+        </IconButton>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled States">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <IconButton
+          v-for="variant in variants"
+          :key="variant"
+          :variant="variant"
+          :label="`${variant} disabled`"
+          disabled
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 5v14M5 12h14" />
+          </svg>
+        </IconButton>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/IconButton.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+/** Square icon-only button with required aria-label, loading spinner state, and ghost/primary/danger variants. */
+import type { ButtonVariant, ButtonSize } from '../types'
+
+interface Props {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  label: string // Required for accessibility
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'ghost',
+  size: 'md',
+  disabled: false,
+  loading: false,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+function handleClick(event: MouseEvent) {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    :disabled="disabled || loading"
+    :aria-label="label"
+    :title="label"
+    :class="[
+      'mint-icon-button',
+      `mint-icon-button--${variant}`,
+      `mint-icon-button--${size}`,
+      (disabled || loading) ? 'mint-icon-button--disabled' : '',
+    ]"
+    @click="handleClick"
+  >
+    <svg
+      v-if="loading"
+      :class="['mint-icon-button__spinner', `mint-icon-button__icon--${size}`]"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        style="opacity: 0.25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        style="opacity: 0.75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+    <span v-else :class="`mint-icon-button__icon--${size}`">
+      <slot />
+    </span>
+  </button>
+</template>
+
+<style>
+@import '../styles/components/icon-button.css';
+</style>

package/src/components/InstrumentAlertLog.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+/** Filterable instrument alert/event list keyed by each alert's required stable event_key. */
+import { computed, ref } from 'vue'
+import type { InstrumentAlert, InstrumentAlertLevel } from '../types'
+
+interface Props {
+  alerts?: InstrumentAlert[]
+  title?: string
+  acknowledgeable?: boolean
+  emptyMessage?: string
+  filteredEmptyMessage?: string
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alerts: () => [],
+  title: 'Event Log',
+  acknowledgeable: true,
+  emptyMessage: 'No alerts received yet',
+  filteredEmptyMessage: 'No alerts match current filters',
+  locale: undefined,
+})
+
+const emit = defineEmits<{
+  acknowledge: [alert: InstrumentAlert]
+}>()
+
+const levelConfig: Record<InstrumentAlertLevel, { label: string; cssClass: string; color: string }> = {
+  critical: { label: 'Critical', cssClass: 'mint-instrument-alert--critical', color: '#ef4444' },
+  warning: { label: 'Warning', cssClass: 'mint-instrument-alert--warning', color: '#eab308' },
+  info: { label: 'Info', cssClass: 'mint-instrument-alert--info', color: '#3b82f6' },
+}
+
+const levels: InstrumentAlertLevel[] = ['critical', 'warning', 'info']
+const activeLevels = ref<Set<InstrumentAlertLevel>>(new Set(levels))
+const activeInstrument = ref<string | null>(null)
+
+const instruments = computed(() => {
+  const counts = new Map<string, number>()
+  for (const alert of props.alerts) {
+    const name = instrumentName(alert)
+    counts.set(name, (counts.get(name) ?? 0) + 1)
+  }
+  return [...counts.entries()].map(([name, count]) => ({ name, count }))
+})
+
+const alertCounts = computed(() => {
+  const counts: Record<InstrumentAlertLevel, number> = { critical: 0, warning: 0, info: 0 }
+  for (const alert of props.alerts) {
+    if (alert.level in counts) counts[alert.level]++
+  }
+  return counts
+})
+
+const filteredAlerts = computed(() =>
+  [...props.alerts]
+    .filter(alert => activeLevels.value.has(alert.level))
+    .filter(alert => !activeInstrument.value || instrumentName(alert) === activeInstrument.value)
+    .sort((a, b) => alertTime(b) - alertTime(a))
+)
+
+function toggleLevel(level: InstrumentAlertLevel) {
+  const next = new Set(activeLevels.value)
+  if (next.has(level)) {
+    if (next.size > 1) next.delete(level)
+  } else {
+    next.add(level)
+  }
+  activeLevels.value = next
+}
+
+function toggleInstrument(name: string) {
+  activeInstrument.value = activeInstrument.value === name ? null : name
+}
+
+function instrumentName(alert: InstrumentAlert): string {
+  return alert.instrument_name || alert.instrument_id
+}
+
+function alertTime(alert: InstrumentAlert): number {
+  if (!alert.timestamp) return 0
+  const date = alert.timestamp instanceof Date ? alert.timestamp : new Date(alert.timestamp)
+  return Number.isNaN(date.getTime()) ? 0 : date.getTime()
+}
+
+function timeAgo(value: string | Date | undefined): string {
+  if (!value) return ''
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
+  if (seconds < 60) return 'just now'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days < 7) return `${days}d ago`
+  return date.toLocaleDateString(props.locale, { month: 'short', day: 'numeric' })
+}
+
+function alertDetail(alert: InstrumentAlert): string {
+  return alert.body?.detail ?? alert.message ?? alert.rule ?? ''
+}
+</script>
+
+<template>
+  <div class="mint-instrument-alert-log">
+    <div class="mint-instrument-alert-log__header">
+      <span class="mint-instrument-alert-log__title">{{ title }}</span>
+    </div>
+
+    <div class="mint-instrument-alert-log__filters">
+      <div class="mint-instrument-alert-log__filter-row">
+        <button
+          v-for="level in levels"
+          :key="level"
+          type="button"
+          class="mint-instrument-alert-log__filter"
+          :class="{ 'mint-instrument-alert-log__filter--active': activeLevels.has(level) }"
+          :style="activeLevels.has(level) ? { '--filter-color': levelConfig[level].color } : undefined"
+          @click="toggleLevel(level)"
+        >
+          <span
+            class="mint-instrument-alert-log__filter-dot"
+            :style="{ backgroundColor: levelConfig[level].color }"
+          />
+          {{ levelConfig[level].label }}
+          <span class="mint-instrument-alert-log__filter-count">{{ alertCounts[level] }}</span>
+        </button>
+      </div>
+      <div v-if="instruments.length > 1" class="mint-instrument-alert-log__filter-row">
+        <button
+          v-for="instrument in instruments"
+          :key="instrument.name"
+          type="button"
+          class="mint-instrument-alert-log__filter"
+          :class="{ 'mint-instrument-alert-log__filter--active': activeInstrument === instrument.name }"
+          @click="toggleInstrument(instrument.name)"
+        >
+          {{ instrument.name }}
+          <span class="mint-instrument-alert-log__filter-count">{{ instrument.count }}</span>
+        </button>
+      </div>
+    </div>
+
+    <TransitionGroup name="mint-instrument-alert" tag="div" class="mint-instrument-alert-log__list">
+      <div
+        v-for="alert in filteredAlerts"
+        :key="alert.event_key"
+        class="mint-instrument-alert"
+        :class="[
+          levelConfig[alert.level]?.cssClass,
+          { 'mint-instrument-alert--acknowledged': alert.acknowledged },
+        ]"
+      >
+        <div class="mint-instrument-alert__header">
+          <span class="mint-instrument-alert__instrument">{{ instrumentName(alert) }}</span>
+          <span v-if="alert.body?.source" class="mint-instrument-alert__source">
+            {{ alert.body.source }}
+          </span>
+          <span class="mint-instrument-alert__time">{{ timeAgo(alert.timestamp) }}</span>
+        </div>
+        <div class="mint-instrument-alert__detail">{{ alertDetail(alert) }}</div>
+        <div
+          v-if="alert.body?.code != null || (acknowledgeable && !alert.acknowledged && alert.level !== 'info')"
+          class="mint-instrument-alert__footer"
+        >
+          <span v-if="alert.body?.code != null" class="mint-instrument-alert__code">
+            Code {{ alert.body.code }}
+          </span>
+          <button
+            v-if="acknowledgeable && !alert.acknowledged && alert.level !== 'info'"
+            type="button"
+            class="mint-instrument-alert__ack"
+            @click="emit('acknowledge', alert)"
+          >
+            Acknowledge
+          </button>
+        </div>
+      </div>
+
+      <div v-if="filteredAlerts.length === 0" key="empty" class="mint-instrument-alert-log__empty">
+        {{ alerts.length === 0 ? emptyMessage : filteredEmptyMessage }}
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/instrument-monitor.css';
+</style>