@morscherlab/mint-sdk 1.0.0-beta.7 → 1.0.0-rc.2

package/src/components/InstrumentStatusCard.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+/** Compact card for live instrument monitor status, sample, method, sequence progress, and ETA. */
+import { computed } from 'vue'
+import {
+  estimateSequenceFinishDate,
+  formatSequenceRemaining,
+  estimateSequenceRemainingSeconds,
+} from '../instrument'
+import type { InstrumentState, InstrumentStatus, SequenceProgress } from '../types'
+import InstrumentStateBadge from './InstrumentStateBadge.vue'
+import SequenceProgressBar from './SequenceProgressBar.vue'
+
+interface Props {
+  status: InstrumentStatus
+  name?: string
+  showPlaceholders?: boolean
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: undefined,
+  showPlaceholders: true,
+  locale: undefined,
+})
+
+const displayName = computed(() =>
+  props.name
+  ?? props.status.instrument_name
+  ?? props.status.instrument_id
+)
+const isRunning = computed(() => props.status.state === 'running')
+const sampleLabel = computed(() => {
+  const sample = props.status.current_sample
+  return sample ? (sample.sample_name ?? sample.sample_id ?? sample.file_name) : null
+})
+
+const etaDisplay = computed(() => {
+  const progress = props.status.sequence_progress
+  if (!progress) return null
+  const finish = estimateSequenceFinishDate(progress)
+  if (!finish) return null
+
+  const now = new Date()
+  const sameDay =
+    finish.getFullYear() === now.getFullYear()
+    && finish.getMonth() === now.getMonth()
+    && finish.getDate() === now.getDate()
+
+  const time = finish.toLocaleTimeString(props.locale, { hour: 'numeric', minute: '2-digit' })
+  if (sameDay) return time
+
+  const sameYear = finish.getFullYear() === now.getFullYear()
+  const date = finish.toLocaleDateString(props.locale, {
+    month: 'short',
+    day: 'numeric',
+    ...(sameYear ? {} : { year: 'numeric' }),
+  })
+  return `${date}, ${time}`
+})
+
+const remainingLabel = computed(() => {
+  const progress = props.status.sequence_progress
+  if (!progress) return null
+  return formatSequenceRemaining(progress)
+})
+
+const lastSeenAgo = computed(() => {
+  const value = props.status.last_seen ?? props.status.timestamp
+  if (!value) return null
+  return formatRelativeAge(value)
+})
+
+const stateClass = computed(() => `mint-instrument-card--${props.status.state}`)
+
+function stateTone(state: InstrumentState | string): string {
+  if (state === 'running') return 'success'
+  if (state === 'standby') return 'warning'
+  if (state === 'error') return 'error'
+  if (state === 'connected') return 'info'
+  return 'muted'
+}
+
+function formatRelativeAge(value: string | Date): string | null {
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+  const minutes = Math.floor((Date.now() - date.getTime()) / 60_000)
+  if (minutes < 1) return 'just now'
+  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)
+  return days === 1 ? '1 day ago' : `${days} days ago`
+}
+
+function hasRemaining(progress: SequenceProgress | null | undefined): boolean {
+  const remaining = estimateSequenceRemainingSeconds(progress)
+  return remaining !== null && remaining > 0
+}
+</script>
+
+<template>
+  <div class="mint-instrument-card" :class="stateClass">
+    <div class="mint-instrument-card__header">
+      <span
+        class="mint-instrument-card__dot"
+        :class="`mint-instrument-card__dot--${stateTone(status.state)}`"
+      />
+      <strong class="mint-instrument-card__name">{{ displayName }}</strong>
+      <InstrumentStateBadge :state="status.state" />
+    </div>
+
+    <template v-if="isRunning">
+      <div v-if="status.current_sample" class="mint-instrument-card__sample">
+        <span class="mint-instrument-card__sample-label">Currently Running</span>
+        <div class="mint-instrument-card__sample-row">
+          <span class="mint-instrument-card__sample-dot" />
+          <span class="mint-instrument-card__sample-name">{{ sampleLabel }}</span>
+          <span
+            v-if="status.current_sample.vial_position"
+            class="mint-instrument-card__sample-vial"
+          >
+            {{ status.current_sample.vial_position }}
+          </span>
+        </div>
+      </div>
+
+      <span
+        v-if="status.active_method"
+        class="mint-instrument-card__method"
+        :title="status.active_method"
+      >
+        {{ status.active_method }}
+      </span>
+
+      <SequenceProgressBar
+        v-if="status.sequence_progress"
+        :progress="status.sequence_progress"
+        compact
+      />
+
+      <div
+        v-if="etaDisplay || hasRemaining(status.sequence_progress)"
+        class="mint-instrument-card__eta"
+      >
+        <span class="mint-instrument-card__eta-label">ETA</span>
+        <span v-if="etaDisplay" class="mint-instrument-card__eta-time">{{ etaDisplay }}</span>
+        <span v-if="remainingLabel" class="mint-instrument-card__eta-remaining">
+          {{ remainingLabel }}
+        </span>
+      </div>
+
+      <span
+        v-if="status.sequence_progress?.sequence_name"
+        class="mint-instrument-card__sequence"
+        :title="status.sequence_progress.sequence_name"
+      >
+        {{ status.sequence_progress.sequence_name }}
+      </span>
+    </template>
+
+    <template v-else-if="status.state === 'error'">
+      <div class="mint-instrument-card__error">
+        <div class="mint-instrument-card__error-message">
+          {{ status.active_method ?? 'Instrument error' }}
+        </div>
+        <div v-if="lastSeenAgo" class="mint-instrument-card__error-detail">
+          Last seen {{ lastSeenAgo }}
+        </div>
+      </div>
+    </template>
+
+    <template v-else-if="showPlaceholders">
+      <div class="mint-instrument-card__placeholder">
+        <span class="mint-instrument-card__muted">No sample running</span>
+        <span class="mint-instrument-card__muted">No method</span>
+        <SequenceProgressBar
+          :progress="{ current_sample: 0, total_samples: 0 }"
+          compact
+        />
+        <span class="mint-instrument-card__muted">No sequence</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/instrument-monitor.css';
+</style>

package/src/components/LcmsSequenceTable.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+/** Table for Xcalibur-compatible LCMS sequence rows with optional reorder/remove/duplicate controls. */
+import { computed, ref } from 'vue'
+import {
+  basenameFromWindowsPath,
+  DEFAULT_LCMS_SEQUENCE_COLUMNS,
+  type LcmsSequenceItem,
+  type LcmsSequenceTableColumn,
+} from '../lcms'
+
+interface Props {
+  items?: LcmsSequenceItem[]
+  columns?: LcmsSequenceTableColumn[]
+  editable?: boolean
+  maxRows?: number
+  showMoreLabel?: boolean
+  emptyMessage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  columns: () => DEFAULT_LCMS_SEQUENCE_COLUMNS,
+  editable: false,
+  maxRows: undefined,
+  showMoreLabel: true,
+  emptyMessage: 'No sequence items to display',
+})
+
+const emit = defineEmits<{
+  reorder: [fromIndex: number, toIndex: number]
+  remove: [index: number]
+  duplicate: [index: number]
+}>()
+
+const dragIndex = ref<number | null>(null)
+const dropTargetIndex = ref<number | null>(null)
+
+const displayItems = computed(() => {
+  if (!props.maxRows) return props.items
+  return props.items.slice(0, props.maxRows)
+})
+
+const hasMore = computed(() =>
+  props.maxRows != null && props.items.length > props.maxRows
+)
+
+function sampleTypeClass(type: string): string {
+  const normalized = type.toLowerCase()
+  if (normalized === 'blank') return 'mint-lcms-sequence-table__type--blank'
+  if (normalized === 'qc' || normalized === 'iqc' || normalized === 'eqc') {
+    return 'mint-lcms-sequence-table__type--qc'
+  }
+  return 'mint-lcms-sequence-table__type--sample'
+}
+
+function cellValue(item: LcmsSequenceItem, column: LcmsSequenceTableColumn, index: number): string | number {
+  if (column.key === 'index') return index + 1
+  if (column.key === 'actions') return ''
+  if (column.key === 'instrument_method') return basenameFromWindowsPath(item.instrument_method)
+  return item[column.key] ?? ''
+}
+
+function onDragStart(event: DragEvent, index: number) {
+  if (!props.editable) return
+  dragIndex.value = index
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', String(index))
+  }
+}
+
+function onDragOver(event: DragEvent, index: number) {
+  if (!props.editable) return
+  event.preventDefault()
+  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+  if (dragIndex.value !== null && dragIndex.value !== index) {
+    dropTargetIndex.value = index
+  }
+}
+
+function clearDragState() {
+  dragIndex.value = null
+  dropTargetIndex.value = null
+}
+
+function onDrop(event: DragEvent, toIndex: number) {
+  if (!props.editable) return
+  event.preventDefault()
+  if (dragIndex.value !== null && dragIndex.value !== toIndex) {
+    emit('reorder', dragIndex.value, toIndex)
+  }
+  clearDragState()
+}
+</script>
+
+<template>
+  <div class="mint-lcms-sequence-table">
+    <div class="mint-lcms-sequence-table__scroller">
+      <table class="mint-lcms-sequence-table__table">
+        <thead>
+          <tr>
+            <th v-if="editable" class="mint-lcms-sequence-table__drag-header" />
+            <th
+              v-for="column in columns"
+              :key="column.key"
+              :class="[
+                'mint-lcms-sequence-table__th',
+                { 'mint-lcms-sequence-table__th--right': column.align === 'right' },
+              ]"
+            >
+              {{ column.label }}
+            </th>
+            <th v-if="editable" class="mint-lcms-sequence-table__actions-header" />
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(item, index) in displayItems"
+            :key="`${item.file_name}-${item.position}-${index}`"
+            :draggable="editable"
+            class="mint-lcms-sequence-table__row"
+            :class="{
+              'mint-lcms-sequence-table__row--dragging': dragIndex === index,
+              'mint-lcms-sequence-table__row--drop-above': dropTargetIndex === index && dragIndex !== null && dragIndex > index,
+              'mint-lcms-sequence-table__row--drop-below': dropTargetIndex === index && dragIndex !== null && dragIndex < index,
+            }"
+            @dragstart="onDragStart($event, index)"
+            @dragenter.prevent
+            @dragover="onDragOver($event, index)"
+            @dragleave="dropTargetIndex = null"
+            @drop="onDrop($event, index)"
+            @dragend="clearDragState"
+          >
+            <td v-if="editable" class="mint-lcms-sequence-table__drag-cell">
+              <span class="mint-lcms-sequence-table__drag-handle" aria-hidden="true">::</span>
+            </td>
+            <td
+              v-for="column in columns"
+              :key="column.key"
+              :class="[
+                'mint-lcms-sequence-table__td',
+                `mint-lcms-sequence-table__td--${column.key}`,
+                { 'mint-lcms-sequence-table__td--right': column.align === 'right' },
+              ]"
+              :title="column.key === 'instrument_method' ? item.instrument_method : undefined"
+            >
+              <span
+                v-if="column.key === 'sample_type'"
+                class="mint-lcms-sequence-table__type"
+                :class="sampleTypeClass(item.sample_type)"
+              >
+                {{ item.sample_type }}
+              </span>
+              <template v-else>{{ cellValue(item, column, index) }}</template>
+            </td>
+            <td v-if="editable" class="mint-lcms-sequence-table__actions">
+              <button
+                type="button"
+                class="mint-lcms-sequence-table__action"
+                title="Duplicate"
+                @click="emit('duplicate', index)"
+              >
+                +
+              </button>
+              <button
+                type="button"
+                class="mint-lcms-sequence-table__action mint-lcms-sequence-table__action--danger"
+                title="Delete"
+                @click="emit('remove', index)"
+              >
+                x
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="items.length === 0" class="mint-lcms-sequence-table__empty">
+      {{ emptyMessage }}
+    </div>
+
+    <div v-if="hasMore && showMoreLabel" class="mint-lcms-sequence-table__more">
+      Showing first {{ maxRows }} of {{ items.length }} items
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/lcms-sequence-table.css';
+</style>

package/src/components/NumberInput.vue

@@ -28,10 +28,12 @@ const emit = defineEmits<{
 const isSliderMode = computed(() => props.min !== undefined && props.max !== undefined)
 
 const sliderPercent = computed(() => {
-  if (!isSliderMode.value || props.modelValue === undefined) return 0
-  const range = (props.max! - props.min!)
+  const min = props.min
+  const max = props.max
+  if (min === undefined || max === undefined || props.modelValue === undefined) return 0
+  const range = max - min
   if (range === 0) return 0
-  return ((props.modelValue - props.min!) / range) * 100
+  return ((props.modelValue - min) / range) * 100
 })
 
 const canDecrement = computed(() => {

package/src/components/ProgressBar.vue

@@ -12,6 +12,7 @@ interface Props {
   indeterminate?: boolean
   steps?: string[]
   currentStep?: number
+  ariaLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -58,6 +59,7 @@ const segmentCount = computed(() => props.steps.length || 0)
       :aria-valuenow="indeterminate ? undefined : clampedValue"
       :aria-valuemin="indeterminate ? undefined : 0"
       :aria-valuemax="indeterminate ? undefined : 100"
+      :aria-label="ariaLabel ?? label"
     >
       <div
         :class="[
@@ -77,6 +79,7 @@ const segmentCount = computed(() => props.steps.length || 0)
       :aria-valuenow="currentStep"
       :aria-valuemin="0"
       :aria-valuemax="segmentCount"
+      :aria-label="ariaLabel ?? label"
     >
       <span
         v-for="(_step, i) in steps"

package/src/components/RackEditor.vue

@@ -1,7 +1,7 @@
 <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 type { Rack, SlotPosition, WellPlateFormat, WellPlateSize, WellEditData, Well } from '../types'
+import type { Rack, SlotPosition, WellPlateFormat, WellPlateSize, WellEditData, Well, WellEditField, WellSampleDropData, RackSampleDropMapper } from '../types'
 import { useRackEditor } from '../composables/useRackEditor'
 import WellPlate from './WellPlate.vue'
 
@@ -16,6 +16,8 @@ interface Props {
   wellPlateSize?: WellPlateSize
   showLegend?: boolean
   showBadges?: boolean
+  allowSampleDrop?: boolean
+  sampleDropMapper?: RackSampleDropMapper
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -29,6 +31,8 @@ const props = withDefaults(defineProps<Props>(), {
   wellPlateSize: 'md',
   showLegend: true,
   showBadges: true,
+  allowSampleDrop: false,
+  sampleDropMapper: undefined,
 })
 
 const emit = defineEmits<{
@@ -38,6 +42,24 @@ const emit = defineEmits<{
   'rack-remove': [rackId: string]
   'rack-reorder': [rackIds: string[]]
   'well-edit': [rackId: string, wellId: string, data: WellEditData]
+  'sample-drop': [rackId: string, wellId: string, data: WellSampleDropData, event: DragEvent]
+}>()
+
+interface RackWellEditorSlotProps {
+  rack?: Rack
+  rackId: string
+  wellId: string
+  wellData?: Partial<Well>
+  editFields: WellEditField[]
+  defaultInjectionVolume: number
+  position: { x: number; y: number }
+  save: (data: WellEditData) => void
+  clear: () => void
+  close: () => void
+}
+
+defineSlots<{
+  'well-editor'?: (props: RackWellEditorSlotProps) => unknown
 }>()
 
 const editor = useRackEditor(props.modelValue, {
@@ -214,6 +236,37 @@ function handleWellClear(wellId: string) {
   editor.clearWell(editor.activeRack.value.id, wellId)
 }
 
+function handleSampleDrop(wellId: string, data: WellSampleDropData, event: DragEvent) {
+  const rack = editor.activeRack.value
+  if (!rack) return
+
+  emit('sample-drop', rack.id, wellId, data, event)
+
+  const editData = props.sampleDropMapper?.(data, {
+    rack,
+    rackId: rack.id,
+    wellId,
+    event,
+  }) ?? defaultSampleDropEditData(wellId, data, rack)
+
+  if (!editData) return
+  handleWellEdit(wellId, { ...editData, wellId })
+}
+
+function defaultSampleDropEditData(wellId: string, data: WellSampleDropData, rack: Rack): WellEditData | null {
+  const label = data.label ?? data.sampleName ?? data.id ?? ''
+  if (!label.trim()) return null
+
+  return {
+    wellId,
+    label: label.trim(),
+    sampleType: data.sampleType ?? 'sample',
+    injectionVolume: data.injectionVolume ?? rack.injectionVolume,
+    injectionCount: data.injectionCount ?? 1,
+    customMethod: data.customMethod ?? '',
+  }
+}
+
 // Computed well count per rack
 function getWellCount(rack: Rack): number {
   return Object.keys(rack.wells).length
@@ -359,9 +412,27 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
         :readonly="readonly"
         :size="wellPlateSize"
         :show-sample-type-indicator="true"
+        :allow-sample-drop="allowSampleDrop && !readonly"
         @well-edit="handleWellEdit"
         @well-clear="handleWellClear"
-      />
+        @sample-drop="handleSampleDrop"
+      >
+        <template v-if="$slots['well-editor']" #well-editor="slotProps">
+          <slot
+            name="well-editor"
+            :rack="editor.activeRack.value"
+            :rack-id="editor.activeRack.value?.id ?? ''"
+            :well-id="slotProps.wellId"
+            :well-data="slotProps.wellData"
+            :edit-fields="slotProps.editFields"
+            :default-injection-volume="slotProps.defaultInjectionVolume"
+            :position="slotProps.position"
+            :save="slotProps.save"
+            :clear="slotProps.clear"
+            :close="slotProps.close"
+          />
+        </template>
+      </WellPlate>
     </div>
   </div>
 </template>

package/src/components/SampleHierarchyTree.vue

@@ -149,6 +149,7 @@ function canShowChildren(node: TreeNode, depth: number): boolean {
 
 // Render tree node recursively
 function renderNode(node: TreeNode, depth: number): VNode {
+  const children = node.children
   const expanded = isExpanded(node.id)
   const canExpand = hasChildren(node)
   const showChildNodes = canShowChildren(node, depth)
@@ -197,11 +198,11 @@ function renderNode(node: TreeNode, depth: number): VNode {
   )
 
   const childNodes =
-    showChildNodes && node.children
+    showChildNodes && children
       ? h(
           Transition,
           { enterActiveClass: 'mint-sample-tree__children--entering', leaveActiveClass: 'mint-sample-tree__children--leaving' },
-          () => h('div', { class: 'mint-sample-tree__children' }, node.children!.map((child) => renderNode(child, depth + 1)))
+          () => h('div', { class: 'mint-sample-tree__children' }, children.map((child) => renderNode(child, depth + 1)))
         )
       : null
 

package/src/components/SampleSelector.vue

@@ -11,23 +11,27 @@ import { useTextSearch } from '../composables/useTextSearch'
 import { useListSelection } from '../composables/useListSelection'
 import { useSampleGroups, type SampleMajorGroup } from '../composables/useSampleGroups'
 import { useExpansionSet } from '../composables/useExpansionSet'
+import { useExperimentSamples } from '../composables/useExperimentSamples'
 
 interface Props {
-  samples: string[]
+  samples?: string[]
   modelValue: string[]
   groups?: SampleGroup[]
   enableGrouping?: boolean
   enableSmartGroup?: boolean
   experimentId?: number
   designData?: Record<string, unknown>
+  autoloadExperimentData?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  samples: () => [],
   groups: () => [],
   enableGrouping: true,
   enableSmartGroup: true,
   experimentId: undefined,
   designData: undefined,
+  autoloadExperimentData: true,
 })
 
 const emit = defineEmits<{
@@ -66,8 +70,23 @@ const internalGroups = computed({
   set: (value) => emit('update:groups', value),
 })
 
+const providedSamples = computed(() => props.samples)
+const shouldLoadExperimentSamples = computed(() =>
+  props.autoloadExperimentData && providedSamples.value.length === 0,
+)
+const experimentSamples = useExperimentSamples({
+  experimentId: () => props.experimentId,
+  designData: () => props.designData,
+  enabled: shouldLoadExperimentSamples,
+})
+const resolvedSamples = computed(() =>
+  providedSamples.value.length > 0 ? providedSamples.value : experimentSamples.samples.value,
+)
+const resolvedExperimentId = computed(() => props.experimentId ?? experimentSamples.experimentId.value)
+const resolvedDesignData = computed(() => props.designData ?? experimentSamples.designData.value ?? undefined)
+
 const sampleGroups = useSampleGroups({
-  samples: () => props.samples,
+  samples: () => resolvedSamples.value,
   groups: internalGroups,
 })
 const hierarchicalGroups = sampleGroups.hierarchicalGroups
@@ -77,7 +96,7 @@ const groupingEnabled = computed(() => internalGroups.value.length > 0)
 const ungroupedSamples = sampleGroups.ungroupedSamples
 
 const sampleSearch = useTextSearch({
-  items: () => props.samples,
+  items: () => resolvedSamples.value,
   query: searchQuery,
   getText: sample => sample,
 })
@@ -85,7 +104,7 @@ const filteredSamples = sampleSearch.filteredItems
 
 const sampleSelection = useListSelection({
   selected: () => props.modelValue,
-  items: () => props.samples,
+  items: () => resolvedSamples.value,
 })
 const isAllSelected = sampleSelection.isAllSelected
 
@@ -433,7 +452,7 @@ function addNewGroup() {
         class="mint-sample-selector__checkbox"
       />
       <span class="mint-sample-selector__select-all-label">Select All</span>
-      <span class="mint-sample-selector__select-all-count">{{ samples.length }} samples</span>
+      <span class="mint-sample-selector__select-all-count">{{ resolvedSamples.length }} samples</span>
     </label>
 
     <!-- Action Buttons Row -->
@@ -444,7 +463,7 @@ function addNewGroup() {
           v-if="enableSmartGroup"
           :variant="groupingEnabled ? 'primary' : 'secondary'"
           size="sm"
-          :disabled="samples.length === 0"
+          :disabled="resolvedSamples.length === 0"
           class="mint-sample-selector__action-btn"
           @click="showSmartGroupModal = true"
         >
@@ -940,9 +959,9 @@ function addNewGroup() {
     <!-- Smart Grouping Modal -->
     <AutoGroupModal
       v-model="showSmartGroupModal"
-      :samples="samples"
-      :experiment-id="experimentId"
-      :design-data="designData"
+      :samples="resolvedSamples"
+      :experiment-id="resolvedExperimentId"
+      :design-data="resolvedDesignData"
       @apply="handleSmartGroupApply"
     />
   </div>

package/src/components/SegmentedControl.story.vue

@@ -33,7 +33,13 @@ const withDisabledOptions: SegmentedOption[] = [
   { value: 'deleted', label: 'Deleted', disabled: true },
 ]
 
+const twoTabOptions: SegmentedOption[] = [
+  { value: 'table', label: 'Table' },
+  { value: 'chart', label: 'Chart' },
+]
+
 const cardSelectionP3 = ref('list')
+const twoTabSelection = ref('table')
 </script>
 
 <template>
@@ -100,6 +106,17 @@ const cardSelectionP3 = ref('list')
       </div>
     </Variant>
 
+    <Variant title="Disabled By Value">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <SegmentedControl
+          v-model="twoTabSelection"
+          :options="twoTabOptions"
+          :disabled-values="['chart']"
+          variant="simple"
+        />
+      </div>
+    </Variant>
+
     <Variant title="Not Full Width">
       <div style="padding: 2rem;">
         <SegmentedControl :model-value="'day'" :options="basicOptions" :full-width="false" />