@morscherlab/mint-sdk 1.2.0-beta.8 → 1.2.0

package/src/components/PlotlyChart.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+/**
+ * Render native Plotly data with MINT loading, empty, theme, and error states.
+ *
+ * Plotly is loaded only when the component is mounted, so importing the SDK does
+ * not add Plotly to the application's initial bundle.
+ *
+ * @example
+ * ```vue
+ * <PlotlyChart
+ *   title="QC overview"
+ *   :data="traces"
+ *   :layout="{ xaxis: { title: { text: 'Sample' } } }"
+ *   :config="{ toImageButtonOptions: { filename: 'qc-overview' } }"
+ * />
+ * ```
+ */
+import type * as PlotlyType from 'plotly.js'
+import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
+
+import ChartContainer from './ChartContainer.vue'
+
+interface Props {
+  data: PlotlyType.Data[]
+  layout?: Partial<PlotlyType.Layout>
+  config?: Partial<PlotlyType.Config>
+  title?: string
+  description?: string
+  loading?: boolean
+  empty?: boolean
+  emptyMessage?: string
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: () => ({}),
+  config: () => ({}),
+  loading: false,
+  empty: false,
+  emptyMessage: 'No data available',
+  ariaLabel: 'Interactive Plotly chart',
+})
+
+const chartElement = ref<HTMLDivElement | null>(null)
+const failed = ref(false)
+let plotly: typeof PlotlyType | null = null
+let resizeObserver: ResizeObserver | null = null
+let themeObserver: MutationObserver | null = null
+let renderedElement: HTMLDivElement | null = null
+let rendering = false
+let disposed = false
+let revision = 0
+
+async function loadPlotly(): Promise<typeof PlotlyType> {
+  const module = await import('plotly.js-dist-min')
+  return ('default' in module ? module.default : module) as unknown as typeof PlotlyType
+}
+
+function cssValue(name: string, fallback: string): string {
+  const value = getComputedStyle(chartElement.value ?? document.documentElement).getPropertyValue(name).trim()
+  return value || getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback
+}
+
+// Unwrap nested Vue proxies while copying Plotly's mutable input tree. Keep
+// native dates/typed arrays and callbacks instead of round-tripping through JSON.
+function clonePlotlyInput<T>(value: T): T {
+  const raw = toRaw(value)
+  if (Array.isArray(raw)) return raw.map(clonePlotlyInput) as T
+  if (raw !== null && typeof raw === 'object') {
+    if (Object.getPrototypeOf(raw) === Object.prototype) {
+      return Object.fromEntries(Object.entries(raw).map(([key, item]) => [key, clonePlotlyInput(item)])) as T
+    }
+    return structuredClone(raw)
+  }
+  return raw
+}
+
+function themedLayout(): Partial<PlotlyType.Layout> {
+  const textColor = cssValue('--text-primary', '#1E293B')
+  const gridColor = cssValue('--border-color', '#E5E7EB')
+  const layout = clonePlotlyInput(props.layout)
+  return {
+    autosize: true,
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
+    ...layout,
+    font: { color: textColor, family: cssValue('--font-sans', 'Arial, sans-serif'), ...layout.font },
+    xaxis: { gridcolor: gridColor, ...layout.xaxis },
+    yaxis: { gridcolor: gridColor, ...layout.yaxis },
+  }
+}
+
+function purgeChart(): void {
+  resizeObserver?.disconnect()
+  if (renderedElement) plotly?.purge(renderedElement)
+  renderedElement = null
+}
+
+async function renderChart(): Promise<void> {
+  revision++
+  if (rendering || disposed || props.loading || props.empty) return
+  rendering = true
+  try {
+    while (!disposed && !props.loading && !props.empty) {
+      const currentRevision = revision
+      failed.value = false
+      await nextTick()
+      if (disposed || props.loading || props.empty) break
+      try {
+        plotly ??= await loadPlotly()
+        if (disposed || props.loading || props.empty) break
+        if (currentRevision !== revision) continue
+        const element = chartElement.value
+        if (!element) break
+        renderedElement = element
+        // Plotly mutates traces and nested layout fields; keep caller-owned values intact.
+        await plotly.react(
+          element,
+          clonePlotlyInput(props.data),
+          themedLayout(),
+          { responsive: true, displaylogo: false, ...props.config },
+        )
+        if (disposed || props.loading || props.empty || element !== chartElement.value) {
+          purgeChart()
+        } else {
+          resizeObserver?.observe(element)
+        }
+      } catch {
+        purgeChart()
+        if (!disposed && currentRevision === revision) failed.value = true
+      }
+      if (currentRevision === revision) break
+    }
+  } finally {
+    rendering = false
+    if (disposed || props.loading || props.empty) purgeChart()
+  }
+}
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => {
+      if (rendering || !plotly || !renderedElement) return
+      // A tab can become hidden or unmount before Plotly's async resize finishes.
+      void Promise.resolve(plotly.Plots.resize(renderedElement)).catch(() => {})
+    })
+  }
+
+  if (typeof MutationObserver !== 'undefined') {
+    themeObserver = new MutationObserver(() => void renderChart())
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'style'],
+    })
+  }
+  void renderChart()
+})
+
+watch(
+  [() => props.data, () => props.layout, () => props.config, () => props.loading, () => props.empty],
+  () => {
+    if (props.loading || props.empty) {
+      resizeObserver?.disconnect()
+      if (!rendering) purgeChart()
+    }
+    void renderChart()
+  },
+)
+
+onBeforeUnmount(() => {
+  disposed = true
+  resizeObserver?.disconnect()
+  themeObserver?.disconnect()
+  // An in-flight react must finish before its resources can be purged completely.
+  if (!rendering) purgeChart()
+})
+</script>
+
+<template>
+  <ChartContainer
+    :title="title"
+    :description="description"
+    :loading="loading"
+    :empty="empty"
+    :empty-message="emptyMessage"
+  >
+    <template v-if="$slots.toolbar" #toolbar>
+      <slot name="toolbar" />
+    </template>
+    <template v-if="$slots.empty" #empty>
+      <slot name="empty" />
+    </template>
+
+    <template v-if="failed">
+      <slot name="error">
+        <div class="mint-plotly-chart__error">
+          <p role="alert">Unable to display this chart.</p>
+        </div>
+      </slot>
+    </template>
+    <div
+      ref="chartElement"
+      v-show="!failed"
+      class="mint-plotly-chart__plot"
+      role="group"
+      :aria-label="ariaLabel"
+    />
+
+    <template v-if="$slots.legend" #legend>
+      <slot name="legend" />
+    </template>
+  </ChartContainer>
+</template>
+
+<style scoped>
+.mint-plotly-chart__plot {
+  width: 100%;
+  min-height: 24rem;
+}
+
+.mint-plotly-chart__error {
+  margin: 0;
+  padding: 1rem;
+  border: 1px solid var(--mint-error-border);
+  border-radius: 0.75rem;
+  background: var(--mint-error-bg);
+  color: var(--mint-error-hover);
+}
+
+.mint-plotly-chart__error :deep(p) {
+  margin: 0;
+}
+</style>

package/src/components/PluginIcon.vue

@@ -152,7 +152,3 @@ const rootStyle = computed(() =>
     />
   </span>
 </template>
-
-<style>
-@import '../styles/components/plugin-icon.css';
-</style>

package/src/components/ProgressBar.vue

@@ -111,7 +111,3 @@ const segmentCount = computed(() => props.steps.length || 0)
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/progress-bar.css';
-</style>

package/src/components/ProtocolStepEditor.vue

@@ -53,6 +53,7 @@ const selectedTemplateId = ref<string | null>(null)
 const {
   isOpen: templateDropdownOpen,
   rootRef: templateDropdownRef,
+  triggerRef: templateTriggerRef,
   close: closeTemplateDropdown,
   toggle: toggleTemplateDropdown,
 } = useDropdownState()
@@ -204,6 +205,7 @@ watch(
         <label class="mint-protocol-editor__template-label">Template</label>
         <div ref="templateDropdownRef" class="mint-protocol-editor__template-dropdown">
           <button
+            ref="templateTriggerRef"
             type="button"
             class="mint-protocol-editor__template-btn"
             @click="toggleTemplateDropdown"
@@ -376,7 +378,3 @@ watch(
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/protocol-step-editor.css';
-</style>

package/src/components/RackEditor.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 /** Multi-rack editor for managing collections of well-plate racks with add/remove/reorder controls and per-well editing. */
-import { ref, computed, watch } from 'vue'
+import { computed, watch, type ComponentPublicInstance } from 'vue'
+import { SLOT_COLORS, SLOT_ORDER } from '../utils/color'
 import type { Rack, SlotPosition, WellPlateFormat, WellPlateSize, WellEditData, Well, WellEditField, WellSampleDropData, RackSampleDropMapper } from '../types'
+import { useListReorder } from '../composables/useListReorder'
 import { useRackEditor } from '../composables/useRackEditor'
 import WellPlate from './WellPlate.vue'
 
@@ -104,23 +106,48 @@ watch(
   },
 )
 
-const SLOT_COLORS: Record<SlotPosition, string> = {
-  R: '#ef4444',
-  G: '#22c55e',
-  B: '#3b82f6',
-  Y: '#eab308',
-}
-
-const SLOT_OPTIONS: SlotPosition[] = ['R', 'G', 'B', 'Y']
+const SLOT_OPTIONS: readonly SlotPosition[] = SLOT_ORDER
 
 const FORMAT_OPTIONS: { value: WellPlateFormat; label: string }[] = [
   { value: 54, label: '54' },
   { value: 96, label: '96' },
 ]
 
-// Drag state for rack reordering
-const draggingRackId = ref<string | null>(null)
-const dragOverRackId = ref<string | null>(null)
+// Rack tab reordering: HTML5 drag for pointers, Alt+Arrow for the keyboard,
+// both owned by the shared reorder composable.
+const tabRefs = new Map<string, HTMLElement>()
+
+const {
+  draggingId: draggingRackId,
+  dragOverId: dragOverRackId,
+  announcement: reorderAnnouncement,
+  announcerStyle,
+  onDragStart: onRackDragStart,
+  onDragOver: onRackDragOver,
+  onDragLeave: onRackDragLeave,
+  onDrop: onRackDrop,
+  onDragEnd: onRackDragEnd,
+  onKeydown: onRackReorderKeydown,
+} = useListReorder<Rack>({
+  items: () => editor.racks.value,
+  getId: (rack) => rack.id,
+  getLabel: (rack) => rack.name,
+  disabled: () => !props.allowReorder || props.readonly,
+  getElement: (id) => tabRefs.get(id),
+  itemNoun: 'Rack',
+  onReorder: ({ fromIndex, toIndex }) => {
+    editor.reorderRacks(fromIndex, toIndex)
+    emit('rack-reorder', editor.racks.value.map(r => r.id))
+  },
+})
+
+function setTabRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    tabRefs.set(id, el)
+  } else {
+    tabRefs.delete(id)
+  }
+}
 
 function handleAddRack() {
   const rack = editor.addRack()
@@ -136,54 +163,6 @@ function handleTabClick(rackId: string) {
   editor.setActiveRack(rackId)
 }
 
-// Rack drag handlers
-function handleRackDragStart(event: DragEvent, rackId: string) {
-  if (!props.allowReorder) return
-  draggingRackId.value = rackId
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-    event.dataTransfer.setData('text/plain', rackId)
-  }
-}
-
-function handleRackDragOver(event: DragEvent, rackId: string) {
-  event.preventDefault()
-  if (draggingRackId.value && draggingRackId.value !== rackId) {
-    dragOverRackId.value = rackId
-  }
-}
-
-function handleRackDragLeave() {
-  dragOverRackId.value = null
-}
-
-function handleRackDrop(event: DragEvent, targetRackId: string) {
-  event.preventDefault()
-  if (!draggingRackId.value || draggingRackId.value === targetRackId) {
-    clearDragState()
-    return
-  }
-
-  const fromIndex = editor.racks.value.findIndex(r => r.id === draggingRackId.value)
-  const toIndex = editor.racks.value.findIndex(r => r.id === targetRackId)
-
-  if (fromIndex !== -1 && toIndex !== -1) {
-    editor.reorderRacks(fromIndex, toIndex)
-    emit('rack-reorder', editor.racks.value.map(r => r.id))
-  }
-
-  clearDragState()
-}
-
-function handleRackDragEnd() {
-  clearDragState()
-}
-
-function clearDragState() {
-  draggingRackId.value = null
-  dragOverRackId.value = null
-}
-
 // Toolbar actions
 function handleFormatChange(format: WellPlateFormat) {
   if (!editor.activeRack.value) return
@@ -281,9 +260,11 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
     <div class="mint-rack-editor__tabs">
       <div class="mint-rack-editor__tabs-inner">
         <button
-          v-for="rack in editor.racks.value"
+          v-for="(rack, rackIndex) in editor.racks.value"
           :key="rack.id"
+          :ref="(el) => setTabRef(rack.id, el)"
           :draggable="allowReorder && !readonly"
+          :title="allowReorder && !readonly ? `${rack.name} — press Alt with the arrow keys to reorder` : undefined"
           :class="[
             'mint-rack-editor__tab',
             {
@@ -293,11 +274,12 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
             },
           ]"
           @click="handleTabClick(rack.id)"
-          @dragstart="handleRackDragStart($event, rack.id)"
-          @dragover="handleRackDragOver($event, rack.id)"
-          @dragleave="handleRackDragLeave"
-          @drop="handleRackDrop($event, rack.id)"
-          @dragend="handleRackDragEnd"
+          @keydown="onRackReorderKeydown($event, rack, rackIndex)"
+          @dragstart="onRackDragStart($event, rack, rackIndex)"
+          @dragover="onRackDragOver($event, rack, rackIndex)"
+          @dragleave="onRackDragLeave"
+          @drop="onRackDrop($event, rack, rackIndex)"
+          @dragend="onRackDragEnd"
         >
           <span
             class="mint-rack-editor__slot-dot"
@@ -434,9 +416,8 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
         </template>
       </WellPlate>
     </div>
+
+    <!-- Reorder announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/rack-editor.css';
-</style>

package/src/components/ReagentEditor.vue

@@ -412,7 +412,3 @@ function formatLevel(value: number): string {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/reagent-editor.css';
-</style>

package/src/components/ReagentList.story.vue

@@ -76,6 +76,8 @@ const mockReagents: Reagent[] = [
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     modelValue: mockReagents,
     readonly: false,
     showStockLevel: true,
@@ -92,6 +94,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <ReagentList
+            :loading="state.loading"
+            :error="state.error || null"
             v-model="state.modelValue"
             :readonly="state.readonly"
             :show-stock-level="state.showStockLevel"
@@ -102,6 +106,8 @@ function initState() {
         </div>
       </template>
       <template #controls="{ state }">
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstText v-model="state.error" title="Error Message" />
         <HstCheckbox v-model="state.readonly" title="Readonly" />
         <HstCheckbox v-model="state.showStockLevel" title="Show Stock Level" />
         <HstSlider v-model="state.lowStockThreshold" title="Low Stock Threshold (%)" :min="0" :max="50" />
@@ -133,5 +139,17 @@ function initState() {
         <ReagentList :model-value="[]" />
       </div>
     </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem;">
+        <ReagentList :model-value="[]" loading />
+      </div>
+    </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem;">
+        <ReagentList :model-value="[]" error="Could not load reagents." />
+      </div>
+    </Variant>
   </Story>
 </template>