@morscherlab/mint-sdk 1.2.1 → 1.2.3

package/src/components/NumberInput.story.vue

@@ -133,7 +133,7 @@ const percent = ref<number | undefined>(45)
         <NumberInput v-model="sliderPh" :min="0" :max="14" :step="0.1" unit="pH" />
         <NumberInput v-model="percent" :min="0" :max="100" :step="1" unit="%" />
         <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
-          Drag anywhere in the field (outside the text) to scrub. Home/End jump to min/max.
+          Drag the number left or right to adjust; click to type. Home/End on the slider jump to min/max.
         </p>
       </div>
     </Variant>

package/src/components/NumberInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Numeric input with always-visible steppers, optional unit label, and (with min+max) an in-field drag-to-scrub range fill. */
-import { computed } from 'vue'
+import { computed, onBeforeUnmount } from 'vue'
 
 interface Props {
   modelValue?: number
@@ -115,8 +115,8 @@ function handleKeydown(event: KeyboardEvent, allowJump = false) {
   event.preventDefault()
 }
 
-// Drag-to-scrub across the field. Pointerdown on the <input> itself is left
-// alone so click-to-place-caret and double-click-to-select keep working.
+// The surrounding range uses absolute position; dragging the number uses a
+// relative offset so grabbing it never jumps away from the current value.
 function scrubTo(clientX: number, area: HTMLElement) {
   const rect = area.getBoundingClientRect()
   if (rect.width === 0 || props.min === undefined || props.max === undefined) return
@@ -124,22 +124,50 @@ function scrubTo(clientX: number, area: HTMLElement) {
   emit('update:modelValue', snap(props.min + ratio * (props.max - props.min)))
 }
 
+let stopScrubbing: (() => void) | undefined
+onBeforeUnmount(() => stopScrubbing?.())
+
 function handleScrubStart(event: PointerEvent) {
-  if (props.disabled || !isSliderMode.value) return
-  if ((event.target as HTMLElement).tagName === 'INPUT') return
+  const target = event.target as HTMLElement
+  const onNumber = target.tagName === 'INPUT'
+  if (props.disabled || event.button !== 0 || (!onNumber && !isSliderMode.value)) return
+  stopScrubbing?.()
   const area = event.currentTarget as HTMLElement
-  event.preventDefault()
-  area.setPointerCapture?.(event.pointerId)
-  scrubTo(event.clientX, area)
-  const move = (e: PointerEvent) => scrubTo(e.clientX, area)
+  const startValue = props.modelValue ?? props.min ?? 0
+  const width = area.getBoundingClientRect().width
+  const unitsPerPixel = isSliderMode.value && width > 0
+    ? (props.max! - props.min!) / width
+    : props.step / 8
+  // Preserve ordinary clicks and double-clicks for caret placement and typing.
+  if (!onNumber) {
+    event.preventDefault()
+    scrubTo(event.clientX, area)
+  }
+  target.setPointerCapture?.(event.pointerId)
+  let dragging = false
+  const move = (e: PointerEvent) => {
+    if (e.pointerId !== event.pointerId) return
+    if (props.disabled) { stop(); return }
+    if (!onNumber) { scrubTo(e.clientX, area); return }
+    const delta = e.clientX - event.clientX
+    if (!dragging && Math.abs(delta) < 4) return
+    dragging = true
+    e.preventDefault()
+    emit('update:modelValue', settle(startValue + Math.round(delta * unitsPerPixel / props.step) * props.step))
+  }
   const stop = () => {
     area.removeEventListener('pointermove', move)
     area.removeEventListener('pointerup', stop)
     area.removeEventListener('pointercancel', stop)
+    area.removeEventListener('lostpointercapture', stop)
+    if (target.hasPointerCapture?.(event.pointerId)) target.releasePointerCapture(event.pointerId)
+    stopScrubbing = undefined
   }
+  stopScrubbing = stop
   area.addEventListener('pointermove', move)
   area.addEventListener('pointerup', stop)
   area.addEventListener('pointercancel', stop)
+  area.addEventListener('lostpointercapture', stop)
 }
 </script>
 

package/src/components/PlotlyChart.vue

@@ -16,7 +16,7 @@
  * ```
  */
 import type * as PlotlyType from 'plotly.js'
-import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
 
 import ChartContainer from './ChartContainer.vue'
 
@@ -30,6 +30,16 @@ interface Props {
   empty?: boolean
   emptyMessage?: string
   ariaLabel?: string
+  /** Use a custom Plotly build instead of the SDK's lazy-loaded default bundle. */
+  plotly?: typeof PlotlyType
+  /** Pause rendering and resize work while a tab or panel is inactive. */
+  active?: boolean
+  /** Plot canvas height. Numbers are interpreted as pixels. */
+  height?: string | number
+  /** Forward Plotly point clicks through the `plotly-click` event. */
+  clickEvents?: boolean
+  /** Shared chart container chrome. `frame` fills a workbench panel. */
+  variant?: 'card' | 'frame'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -39,11 +49,28 @@ const props = withDefaults(defineProps<Props>(), {
   empty: false,
   emptyMessage: 'No data available',
   ariaLabel: 'Interactive Plotly chart',
+  active: true,
+  clickEvents: false,
+  variant: 'card',
 })
 
+const emit = defineEmits<{
+  'plotly-click': [event: PlotlyType.PlotMouseEvent]
+}>()
+
+defineSlots<{
+  header?: () => unknown
+  toolbar?: () => unknown
+  subhead?: () => unknown
+  empty?: () => unknown
+  error?: () => unknown
+  legend?: () => unknown
+  footer?: () => unknown
+}>()
+
 const chartElement = ref<HTMLDivElement | null>(null)
 const failed = ref(false)
-let plotly: typeof PlotlyType | null = null
+let plotly: typeof PlotlyType | null = props.plotly ?? null
 let resizeObserver: ResizeObserver | null = null
 let themeObserver: MutationObserver | null = null
 let renderedElement: HTMLDivElement | null = null
@@ -52,10 +79,24 @@ let disposed = false
 let revision = 0
 
 async function loadPlotly(): Promise<typeof PlotlyType> {
+  if (props.plotly) return props.plotly
   const module = await import('plotly.js-dist-min')
   return ('default' in module ? module.default : module) as unknown as typeof PlotlyType
 }
 
+type PlotlyEventHost = HTMLDivElement & {
+  on?: (eventName: string, callback: (event: PlotlyType.PlotMouseEvent) => void) => void
+  removeAllListeners?: (eventName: string) => void
+}
+
+function bindEvents(element: HTMLDivElement): void {
+  const host = element as PlotlyEventHost
+  host.removeAllListeners?.('plotly_click')
+  if (props.clickEvents) {
+    host.on?.('plotly_click', event => emit('plotly-click', event))
+  }
+}
+
 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
@@ -98,17 +139,17 @@ function purgeChart(): void {
 
 async function renderChart(): Promise<void> {
   revision++
-  if (rendering || disposed || props.loading || props.empty) return
+  if (rendering || disposed || !props.active || props.loading || props.empty) return
   rendering = true
   try {
-    while (!disposed && !props.loading && !props.empty) {
+    while (!disposed && props.active && !props.loading && !props.empty) {
       const currentRevision = revision
       failed.value = false
       await nextTick()
-      if (disposed || props.loading || props.empty) break
+      if (disposed || !props.active || props.loading || props.empty) break
       try {
         plotly ??= await loadPlotly()
-        if (disposed || props.loading || props.empty) break
+        if (disposed || !props.active || props.loading || props.empty) break
         if (currentRevision !== revision) continue
         const element = chartElement.value
         if (!element) break
@@ -122,7 +163,8 @@ async function renderChart(): Promise<void> {
         )
         if (disposed || props.loading || props.empty || element !== chartElement.value) {
           purgeChart()
-        } else {
+        } else if (props.active) {
+          bindEvents(element)
           resizeObserver?.observe(element)
         }
       } catch {
@@ -140,7 +182,7 @@ async function renderChart(): Promise<void> {
 onMounted(() => {
   if (typeof ResizeObserver !== 'undefined') {
     resizeObserver = new ResizeObserver(() => {
-      if (rendering || !plotly || !renderedElement) return
+      if (rendering || !props.active || !plotly || !renderedElement) return
       // A tab can become hidden or unmount before Plotly's async resize finishes.
       void Promise.resolve(plotly.Plots.resize(renderedElement)).catch(() => {})
     })
@@ -157,16 +199,29 @@ onMounted(() => {
 })
 
 watch(
-  [() => props.data, () => props.layout, () => props.config, () => props.loading, () => props.empty],
+  [() => props.data, () => props.layout, () => props.config, () => props.loading, () => props.empty, () => props.active],
   () => {
-    if (props.loading || props.empty) {
+    if (props.loading || props.empty || !props.active) {
       resizeObserver?.disconnect()
-      if (!rendering) purgeChart()
+      if ((props.loading || props.empty) && !rendering) purgeChart()
     }
     void renderChart()
   },
 )
 
+watch(
+  () => props.clickEvents,
+  () => {
+    if (renderedElement) bindEvents(renderedElement)
+  },
+)
+
+const chartStyle = computed(() => {
+  if (props.height === undefined) return undefined
+  const height = typeof props.height === 'number' ? `${props.height}px` : props.height
+  return { height, minHeight: height }
+})
+
 onBeforeUnmount(() => {
   disposed = true
   resizeObserver?.disconnect()
@@ -183,10 +238,17 @@ onBeforeUnmount(() => {
     :loading="loading"
     :empty="empty"
     :empty-message="emptyMessage"
+    :variant="variant"
   >
+    <template v-if="$slots.header" #header>
+      <slot name="header" />
+    </template>
     <template v-if="$slots.toolbar" #toolbar>
       <slot name="toolbar" />
     </template>
+    <template v-if="$slots.subhead" #subhead>
+      <slot name="subhead" />
+    </template>
     <template v-if="$slots.empty" #empty>
       <slot name="empty" />
     </template>
@@ -204,11 +266,15 @@ onBeforeUnmount(() => {
       class="mint-plotly-chart__plot"
       role="group"
       :aria-label="ariaLabel"
+      :style="chartStyle"
     />
 
     <template v-if="$slots.legend" #legend>
       <slot name="legend" />
     </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
   </ChartContainer>
 </template>
 

package/src/components/RackEditor.vue

@@ -259,51 +259,57 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
     <!-- Rack tabs -->
     <div class="mint-rack-editor__tabs">
       <div class="mint-rack-editor__tabs-inner">
-        <button
+        <div
           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',
-            {
-              'mint-rack-editor__tab--active': editor.activeRackId.value === rack.id,
-              'mint-rack-editor__tab--dragging': draggingRackId === rack.id,
-              'mint-rack-editor__tab--drag-over': dragOverRackId === rack.id,
-            },
-          ]"
-          @click="handleTabClick(rack.id)"
-          @keydown="onRackReorderKeydown($event, rack, rackIndex)"
-          @dragstart="onRackDragStart($event, rack, rackIndex)"
-          @dragover="onRackDragOver($event, rack, rackIndex)"
-          @dragleave="onRackDragLeave"
-          @drop="onRackDrop($event, rack, rackIndex)"
-          @dragend="onRackDragEnd"
+          class="mint-rack-editor__tab-item"
         >
-          <span
-            class="mint-rack-editor__slot-dot"
-            :style="{ backgroundColor: SLOT_COLORS[rack.slot] }"
-          />
-          {{ rack.name }}
-          <span
-            v-if="getWellCount(rack) > 0"
+          <button
+            :ref="(el) => setTabRef(rack.id, el)"
+            type="button"
+            :draggable="allowReorder && !readonly"
+            :title="allowReorder && !readonly ? `${rack.name} — press Alt with the arrow keys to reorder` : undefined"
             :class="[
-              'mint-rack-editor__count',
-              editor.activeRackId.value === rack.id ? 'mint-rack-editor__count--active' : 'mint-rack-editor__count--inactive',
+              'mint-rack-editor__tab',
+              {
+                'mint-rack-editor__tab--active': editor.activeRackId.value === rack.id,
+                'mint-rack-editor__tab--dragging': draggingRackId === rack.id,
+                'mint-rack-editor__tab--drag-over': dragOverRackId === rack.id,
+              },
             ]"
+            @click="handleTabClick(rack.id)"
+            @keydown="onRackReorderKeydown($event, rack, rackIndex)"
+            @dragstart="onRackDragStart($event, rack, rackIndex)"
+            @dragover="onRackDragOver($event, rack, rackIndex)"
+            @dragleave="onRackDragLeave"
+            @drop="onRackDrop($event, rack, rackIndex)"
+            @dragend="onRackDragEnd"
           >
-            {{ getWellCount(rack) }}
-          </span>
-          <!-- Remove button -->
+            <span
+              class="mint-rack-editor__slot-dot"
+              :style="{ backgroundColor: SLOT_COLORS[rack.slot] }"
+            />
+            {{ rack.name }}
+            <span
+              v-if="getWellCount(rack) > 0"
+              :class="[
+                'mint-rack-editor__count',
+                editor.activeRackId.value === rack.id ? 'mint-rack-editor__count--active' : 'mint-rack-editor__count--inactive',
+              ]"
+            >
+              {{ getWellCount(rack) }}
+            </span>
+          </button>
           <button
             v-if="editor.racks.value.length > minRacks && !readonly"
+            type="button"
             class="mint-rack-editor__tab-remove"
+            :aria-label="`Remove ${rack.name}`"
             @click.stop="handleRemoveRack(rack.id)"
           >
             &times;
           </button>
-        </button>
+        </div>
       </div>
 
       <!-- Add rack button -->

package/src/components/SearchableSelect.story.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { SelectOption } from '../types'
+import SearchableSelect from './SearchableSelect.vue'
+
+const value = ref<string | number>('viability')
+const options: SelectOption[] = [
+  { value: 'viability', label: 'Live cells (%)', description: 'Primary response metric', meta: 'pct' },
+  { value: 'count', label: 'Cell count', description: 'Absolute cell count', meta: 'count' },
+  { value: 'position', label: 'Well position', disabled: true, disabledReason: 'Coordinate columns cannot be analyzed', meta: 'text' },
+]
+</script>
+
+<template>
+  <Story title="Base Inputs/SearchableSelect">
+    <Variant title="Rich options">
+      <div style="padding: 2rem; max-width: 28rem; min-height: 24rem;">
+        <SearchableSelect v-model="value" :options="options">
+          <template #footer>Disabled options remain visible with their reason.</template>
+        </SearchableSelect>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SearchableSelect.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+/** Searchable single-select listbox with descriptions, disabled reasons, and custom slots. */
+import { computed, nextTick, ref, useId, watch } from 'vue'
+import type { SelectOption, SelectOptionInput } from '../types'
+import { useEventListener } from '../composables/useEventListener'
+import { normalizeOptionInput } from '../utils/options'
+
+interface Props {
+  modelValue?: string | number
+  options: SelectOptionInput<string | number>[]
+  placeholder?: string
+  searchPlaceholder?: string
+  noResultsText?: string
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Select an option',
+  searchPlaceholder: 'Search options…',
+  noResultsText: 'No matching options',
+  size: 'md',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+defineSlots<{
+  option?: (props: { option: SelectOption<string | number>; selected: boolean; active: boolean }) => unknown
+  footer?: () => unknown
+}>()
+
+const id = useId().replace(/:/g, '')
+const listboxId = `mint-searchable-select-${id}`
+const root = ref<HTMLElement | null>(null)
+const trigger = ref<HTMLButtonElement | null>(null)
+const search = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+const query = ref('')
+const activeIndex = ref(-1)
+const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
+  props.options.map(normalizeOptionInput),
+)
+const selectedOption = computed(() =>
+  normalizedOptions.value.find(option => option.value === props.modelValue),
+)
+const visibleOptions = computed(() => {
+  const needle = query.value.trim().toLocaleLowerCase()
+  if (!needle) return normalizedOptions.value
+  return normalizedOptions.value.filter(option =>
+    [option.label, option.description, option.meta, option.disabledReason]
+      .some(value => value?.toLocaleLowerCase().includes(needle)),
+  )
+})
+const activeDescendant = computed(() =>
+  activeIndex.value >= 0 ? `${listboxId}-option-${activeIndex.value}` : undefined,
+)
+
+function firstEnabledIndex(options = visibleOptions.value): number {
+  return options.findIndex(option => !option.disabled)
+}
+
+async function openPanel(): Promise<void> {
+  if (props.disabled) return
+  query.value = ''
+  open.value = true
+  activeIndex.value = firstEnabledIndex(normalizedOptions.value)
+  await nextTick()
+  search.value?.focus()
+}
+
+async function closePanel(restoreFocus = false): Promise<void> {
+  open.value = false
+  query.value = ''
+  activeIndex.value = -1
+  if (restoreFocus) {
+    await nextTick()
+    trigger.value?.focus()
+  }
+}
+
+function moveActive(direction: 1 | -1): void {
+  const enabled = visibleOptions.value
+    .map((option, index) => ({ option, index }))
+    .filter(({ option }) => !option.disabled)
+  if (enabled.length === 0) return
+  const current = enabled.findIndex(({ index }) => index === activeIndex.value)
+  const next = current < 0
+    ? (direction === 1 ? 0 : enabled.length - 1)
+    : (current + direction + enabled.length) % enabled.length
+  activeIndex.value = enabled[next]!.index
+  void nextTick(() => document.getElementById(activeDescendant.value ?? '')?.scrollIntoView({ block: 'nearest' }))
+}
+
+function select(option: SelectOption<string | number>): void {
+  if (option.disabled) return
+  emit('update:modelValue', option.value)
+  void closePanel(true)
+}
+
+function handleSearchKeydown(event: KeyboardEvent): void {
+  if (event.key === 'ArrowDown') moveActive(1)
+  else if (event.key === 'ArrowUp') moveActive(-1)
+  else if (event.key === 'Home') activeIndex.value = firstEnabledIndex()
+  else if (event.key === 'End') {
+    for (let index = visibleOptions.value.length - 1; index >= 0; index--) {
+      if (!visibleOptions.value[index]?.disabled) {
+        activeIndex.value = index
+        break
+      }
+    }
+  } else if (event.key === 'Enter') {
+    const option = visibleOptions.value[activeIndex.value]
+    if (option) select(option)
+  } else if (event.key === 'Escape') {
+    void closePanel(true)
+  } else return
+  event.preventDefault()
+}
+
+function handleTriggerKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+  event.preventDefault()
+  void openPanel().then(() => {
+    if (event.key === 'ArrowUp') moveActive(-1)
+  })
+}
+
+watch(visibleOptions, options => { activeIndex.value = firstEnabledIndex(options) })
+watch(() => props.disabled, disabled => { if (disabled) void closePanel() })
+useEventListener(() => document, 'pointerdown', event => {
+  if (open.value && !root.value?.contains(event.target as Node)) void closePanel()
+})
+</script>
+
+<template>
+  <div
+    ref="root"
+    :class="['mint-searchable-select', `mint-searchable-select--${size}`]"
+    @focusout="!root?.contains($event.relatedTarget as Node | null) && closePanel()"
+  >
+    <button
+      ref="trigger"
+      type="button"
+      class="mint-searchable-select__trigger"
+      :disabled="disabled"
+      :aria-expanded="open"
+      :aria-controls="listboxId"
+      aria-haspopup="listbox"
+      @click="open ? closePanel() : openPanel()"
+      @keydown="handleTriggerKeydown"
+    >
+      <span :class="['mint-searchable-select__value', { 'mint-searchable-select__value--placeholder': !selectedOption }]">
+        {{ selectedOption?.label ?? placeholder }}
+      </span>
+      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="m6 8 4 4 4-4" />
+      </svg>
+    </button>
+
+    <div v-if="open" class="mint-searchable-select__panel">
+      <div class="mint-searchable-select__search-wrap">
+        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+          <circle cx="8.5" cy="8.5" r="5.5" /><path d="m13 13 4 4" />
+        </svg>
+        <input
+          ref="search"
+          v-model="query"
+          role="combobox"
+          type="search"
+          class="mint-searchable-select__search"
+          :placeholder="searchPlaceholder"
+          :aria-label="searchPlaceholder"
+          :aria-expanded="open"
+          :aria-controls="listboxId"
+          :aria-activedescendant="activeDescendant"
+          aria-autocomplete="list"
+          @keydown="handleSearchKeydown"
+        >
+      </div>
+
+      <ul :id="listboxId" class="mint-searchable-select__list" role="listbox">
+        <li
+          v-for="(option, index) in visibleOptions"
+          :id="`${listboxId}-option-${index}`"
+          :key="String(option.value)"
+          role="option"
+          class="mint-searchable-select__option"
+          :class="{
+            'mint-searchable-select__option--active': activeIndex === index,
+            'mint-searchable-select__option--selected': modelValue === option.value,
+            'mint-searchable-select__option--disabled': option.disabled,
+          }"
+          :aria-selected="modelValue === option.value"
+          :aria-disabled="option.disabled || undefined"
+          @mousedown.prevent
+          @mouseenter="!option.disabled && (activeIndex = index)"
+          @click="select(option)"
+        >
+          <slot name="option" :option="option" :selected="modelValue === option.value" :active="activeIndex === index">
+            <span class="mint-searchable-select__option-text">
+              <span class="mint-searchable-select__option-label">{{ option.label }}</span>
+              <span v-if="option.disabled ? option.disabledReason || option.description : option.description" class="mint-searchable-select__option-description">
+                {{ option.disabled ? option.disabledReason || option.description : option.description }}
+              </span>
+            </span>
+            <span v-if="option.meta" class="mint-searchable-select__option-meta">{{ option.meta }}</span>
+            <svg v-if="modelValue === option.value" class="mint-searchable-select__check" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 10 3 3 7-7" />
+            </svg>
+          </slot>
+        </li>
+        <li v-if="visibleOptions.length === 0" class="mint-searchable-select__empty">{{ noResultsText }}</li>
+      </ul>
+
+      <div v-if="$slots.footer" class="mint-searchable-select__footer">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/WellPlate.story.vue

@@ -211,6 +211,22 @@ function initState() {
       </div>
     </Variant>
 
+    <Variant title="Heatmap QC Decorations">
+      <div style="padding: 2rem;">
+        <WellPlate
+          :format="96"
+          :wells="heatmapWells"
+          :heatmap="{ enabled: true, min: 0, max: 1, colorScale: 'viridis', showLegend: true }"
+          :well-class="well => well.id === 'A1'
+            ? 'mint-well-plate__well--outlier'
+            : well.id === 'A2' ? 'mint-well-plate__well--conflict' : ''"
+          selection-mode="none"
+          show-labels
+          size="md"
+        />
+      </div>
+    </Variant>
+
     <Variant title="6-Well Plate">
       <div style="padding: 2rem;">
         <WellPlate