@morscherlab/mint-sdk 1.0.0-rc.1 → 1.0.0-rc.4

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/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" />

package/src/components/SegmentedControl.vue

@@ -11,6 +11,7 @@ interface Props {
   size?: SegmentedControlSize
   fullWidth?: boolean
   disabled?: boolean
+  disabledValues?: Array<string | number>
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,6 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'md',
   fullWidth: false,
   disabled: false,
+  disabledValues: () => [],
 })
 
 const emit = defineEmits<{
@@ -25,9 +27,18 @@ const emit = defineEmits<{
 }>()
 
 const normalizedOptions = computed<SegmentedOption[]>(() => props.options.map(normalizeOptionInput))
+const disabledValueSet = computed(() => new Set(props.disabledValues))
+
+function isOptionDisabled(option: SegmentedOption) {
+  return option.disabled === true || disabledValueSet.value.has(option.value)
+}
+
+function isSelectionDisabled(option: SegmentedOption) {
+  return props.disabled || isOptionDisabled(option)
+}
 
 function handleSelect(option: SegmentedOption) {
-  if (props.disabled || option.disabled) return
+  if (isSelectionDisabled(option)) return
   emit('update:modelValue', option.value)
 }
 
@@ -56,13 +67,13 @@ function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
       type="button"
       role="radio"
       :aria-checked="modelValue === option.value"
-      :disabled="disabled || option.disabled"
+      :disabled="isSelectionDisabled(option)"
       :class="[
         'mint-segmented-control__option',
         `mint-segmented-control__option--${variant}`,
         `mint-segmented-control__option--${size}`,
         modelValue === option.value ? 'mint-segmented-control__option--active' : '',
-        option.disabled ? 'mint-segmented-control__option--disabled' : '',
+        isOptionDisabled(option) ? 'mint-segmented-control__option--disabled' : '',
       ]"
       @click="handleSelect(option)"
       @keydown="handleKeydown($event, option)"

package/src/components/SequenceProgressBar.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/** Displays LC/MS or GC/MS acquisition sequence progress with ETA and remaining-time labels. */
+import { computed } from 'vue'
+import {
+  formatSequenceEta,
+  formatSequenceRemaining,
+  sequenceProgressPercent,
+} from '../instrument'
+import type { SequenceProgress } from '../types'
+import ProgressBar from './ProgressBar.vue'
+
+interface Props {
+  progress: SequenceProgress
+  compact?: boolean
+  label?: string
+  showEta?: boolean
+  showRemaining?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  compact: false,
+  label: 'samples',
+  showEta: true,
+  showRemaining: true,
+})
+
+const percent = computed(() => sequenceProgressPercent(props.progress))
+const remainingLabel = computed(() => formatSequenceRemaining(props.progress))
+const etaLabel = computed(() => formatSequenceEta(props.progress))
+const hasFooter = computed(() => {
+  if (props.compact) return false
+  return (props.showRemaining && remainingLabel.value) || (props.showEta && etaLabel.value)
+})
+</script>
+
+<template>
+  <div class="mint-sequence-progress">
+    <div class="mint-sequence-progress__header">
+      <span class="mint-sequence-progress__label">
+        {{ progress.current_sample }} / {{ progress.total_samples }} {{ label }}
+      </span>
+      <span class="mint-sequence-progress__percent">{{ percent }}%</span>
+    </div>
+
+    <ProgressBar
+      :value="percent"
+      color="info"
+      size="sm"
+      aria-label="Sequence progress"
+    />
+
+    <div v-if="hasFooter" class="mint-sequence-progress__footer">
+      <span
+        v-if="showRemaining && remainingLabel"
+        class="mint-sequence-progress__remaining"
+      >
+        {{ remainingLabel }}
+      </span>
+      <span
+        v-if="showEta && etaLabel"
+        class="mint-sequence-progress__eta"
+      >
+        ETA {{ etaLabel }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/sequence-progress-bar.css';
+</style>

package/src/components/SettingsModal.vue

@@ -32,6 +32,9 @@ import {
   type ControlWorkspaceOptions,
 } from '../composables/useControlSchema'
 import { useSettingsStore, colorPalettes } from '../stores/settings'
+import { useAuthStore } from '../stores/auth'
+import { usePlatformContext } from '../composables/usePlatformContext'
+import { canAccessByPolicy } from '../permissions'
 import {
   formSchemaFieldNames,
   pickExistingRecordKeys,
@@ -46,10 +49,12 @@ import type {
   SettingsTabInput,
   SettingsModalLayout,
   SettingsModalSchema,
+  SettingsUserType,
   FormSchema,
   FormSectionSchema,
   FormEnhancements,
 } from '../types'
+import type { AccessControlled, PermissionUser } from '../permissions'
 import { normalizeItemInput } from '../utils/items'
 
 // Map our settings groups onto the form-builder's flat-section shape.
@@ -86,6 +91,8 @@ interface Props {
   values?: Record<string, unknown>
   /** Optional dynamic enhancements (validators, dynamic options, callbacks). */
   enhancements?: FormEnhancements<Record<string, unknown>>
+  /** Optional user type override for permission-filtered settings content. Defaults to SDK auth/platform context. */
+  userType?: SettingsUserType
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -104,6 +111,8 @@ const emit = defineEmits<{
 }>()
 
 const settings = useSettingsStore()
+const auth = useAuthStore()
+const { user: platformUser } = usePlatformContext()
 
 const APPEARANCE_TAB_ID = 'appearance'
 
@@ -130,13 +139,34 @@ const resolvedControls = computed<ControlSchema | undefined>(() =>
 const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
   mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
 )
-const settingsSchema = computed<SettingsModalSchema | undefined>(() =>
+const sourceSettingsSchema = computed<SettingsModalSchema | undefined>(() =>
   props.schema ?? (
     resolvedControls.value
       ? controlsToSettingsSchema(resolvedControls.value, resolvedControlOptions.value)
       : undefined
   ),
 )
+const currentAccessUser = computed<PermissionUser | null>(() => {
+  if (props.userType) {
+    return { role: props.userType === 'admin' ? 'admin' : 'user' }
+  }
+  return auth.userInfo ?? platformUser.value ?? null
+})
+const isAccessUserAuthenticated = computed(() =>
+  props.userType !== undefined || auth.isAuthenticated || !!platformUser.value,
+)
+const settingsSchema = computed<SettingsModalSchema | undefined>(() => {
+  if (!sourceSettingsSchema.value) return undefined
+  const groups = sourceSettingsSchema.value.groups.flatMap((group) => {
+    if (!canShowForCurrentUser(group)) return []
+
+    const fields = group.fields.filter(canShowForCurrentUser)
+    if (fields.length === 0) return []
+
+    return [{ ...group, fields }]
+  })
+  return { groups }
+})
 const isSchemaDriven = computed(() => !!settingsSchema.value)
 const resolvedValues = computed<Record<string, unknown>>(() => ({
   ...(resolvedControlOptions.value.initialValues ?? {}),
@@ -201,7 +231,9 @@ const visibleSchemaGroups = computed(() =>
     : [],
 )
 
-const manualTabs = computed<SettingsTab[]>(() => props.tabs.map(normalizeItemInput))
+const manualTabs = computed<SettingsTab[]>(() =>
+  props.tabs.map(normalizeItemInput).filter(canShowForCurrentUser)
+)
 
 const allTabs = computed<SettingsTab[]>(() => {
   const base: SettingsTab[] = settingsSchema.value
@@ -256,6 +288,14 @@ function builderFieldNames(): string[] {
 function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
   return 'controls' in model && 'controlOptions' in model
 }
+
+function canShowForCurrentUser(item: AccessControlled): boolean {
+  return canAccessByPolicy(
+    currentAccessUser.value,
+    item,
+    isAccessUserAuthenticated.value,
+  )
+}
 </script>
 
 <template>