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

package/src/components/WellPlate.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** Interactive 96/384-well plate grid with drag-to-select, heatmap overlays, per-well editing, and sample-color mapping. */
 import { ref, computed } from 'vue'
-import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition } from '../types'
+import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition, WellSampleDropData, WellSampleDropParser } from '../types'
 import { useEventListener } from '../composables/useEventListener'
 import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
 
@@ -29,6 +29,8 @@ interface Props {
   legendItems?: WellLegendItem[]
   columnConditions?: ColumnCondition[]
   rowConditions?: RowCondition[]
+  allowSampleDrop?: boolean
+  sampleDropParser?: WellSampleDropParser
 }
 
 // Drag state for moving wells
@@ -59,6 +61,8 @@ const props = withDefaults(defineProps<Props>(), {
   legendItems: undefined,
   columnConditions: () => [],
   rowConditions: () => [],
+  allowSampleDrop: false,
+  sampleDropParser: undefined,
 })
 
 const emit = defineEmits<{
@@ -70,6 +74,22 @@ const emit = defineEmits<{
   'well-move': [sourceWellId: string, targetWellId: string]
   'well-edit': [wellId: string, data: WellEditData]
   'well-clear': [wellId: string]
+  'sample-drop': [wellId: string, data: WellSampleDropData, event: DragEvent]
+}>()
+
+interface WellEditorSlotProps {
+  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: WellEditorSlotProps) => unknown
 }>()
 
 const plateRef = ref<HTMLElement | null>(null)
@@ -164,6 +184,7 @@ const defaultLegendItems: WellLegendItem[] = [
   { type: 'sample', label: 'Sample', color: '#10b981' },
   { type: 'blank', label: 'Blank', color: '#f97316' },
   { type: 'qc', label: 'QC', color: '#8b5cf6' },
+  { type: 'iqc', label: 'IQC', color: '#ec4899' },
 ]
 
 const activeLegendItems = computed(() => props.legendItems ?? defaultLegendItems)
@@ -285,6 +306,7 @@ const defaultSampleTypeColors: Record<string, { bg: string; border: string }> =
   control: { bg: 'rgba(59, 130, 246, 0.15)', border: 'rgba(59, 130, 246, 0.4)' },
   blank: { bg: 'rgba(249, 115, 22, 0.15)', border: 'rgba(249, 115, 22, 0.4)' },
   qc: { bg: 'rgba(139, 92, 246, 0.15)', border: 'rgba(139, 92, 246, 0.4)' },
+  iqc: { bg: 'rgba(236, 72, 153, 0.15)', border: 'rgba(236, 72, 153, 0.4)' },
 }
 
 const heatmapColors: Record<string, string[]> = {
@@ -373,6 +395,7 @@ function getSampleTypeIndicator(well: Well): string | null {
     control: 'C',
     blank: 'B',
     qc: 'Q',
+    iqc: 'I',
   }
   return typeMap[well.sampleType] || well.sampleType.charAt(0).toUpperCase()
 }
@@ -511,10 +534,12 @@ function handleDragStart(well: Well, event: DragEvent) {
 }
 
 function handleDragOver(well: Well, event: DragEvent) {
-  if (props.selectionMode !== 'drag' || !dragSourceWell.value) return
+  const isMovingWell = props.selectionMode === 'drag' && !!dragSourceWell.value
+  if (!isMovingWell && !props.allowSampleDrop) return
+
   event.preventDefault()
   if (event.dataTransfer) {
-    event.dataTransfer.dropEffect = 'move'
+    event.dataTransfer.dropEffect = isMovingWell ? 'move' : 'copy'
   }
   dragTargetWell.value = well.id
 }
@@ -524,14 +549,27 @@ function handleDragLeave() {
 }
 
 function handleDrop(well: Well, event: DragEvent) {
+  const isMovingWell = props.selectionMode === 'drag' && !!dragSourceWell.value
+  if (!isMovingWell && !props.allowSampleDrop) return
+
   event.preventDefault()
-  if (props.selectionMode !== 'drag' || !dragSourceWell.value) return
 
-  const sourceId = dragSourceWell.value
-  const targetId = well.id
+  if (isMovingWell && dragSourceWell.value) {
+    const sourceId = dragSourceWell.value
+    const targetId = well.id
+
+    if (sourceId !== targetId) {
+      emit('well-move', sourceId, targetId)
+    }
 
-  if (sourceId !== targetId) {
-    emit('well-move', sourceId, targetId)
+    dragSourceWell.value = null
+    dragTargetWell.value = null
+    return
+  }
+
+  const droppedSample = parseDroppedSample(event, well.id)
+  if (droppedSample) {
+    emit('sample-drop', well.id, droppedSample, event)
   }
 
   dragSourceWell.value = null
@@ -543,6 +581,76 @@ function handleDragEnd() {
   dragTargetWell.value = null
 }
 
+function parseDroppedSample(event: DragEvent, wellId: string): WellSampleDropData | null {
+  if (props.sampleDropParser) {
+    return props.sampleDropParser(event, { wellId, event }) ?? null
+  }
+
+  const transfer = event.dataTransfer
+  if (!transfer) return null
+
+  const json = transfer.getData('application/json') || transfer.getData('text/json')
+  if (json) {
+    try {
+      return normalizeDroppedSample(JSON.parse(json))
+    } catch {
+      return null
+    }
+  }
+
+  const text = transfer.getData('text/plain')?.trim()
+  if (!text) return null
+  return {
+    sampleName: text,
+    label: text,
+    raw: text,
+  }
+}
+
+function normalizeDroppedSample(raw: unknown): WellSampleDropData | null {
+  if (!raw || typeof raw !== 'object') return null
+
+  const record = raw as Record<string, unknown>
+  const sampleName =
+    getString(record.sampleName) ??
+    getString(record.sample_name) ??
+    getString(record.name) ??
+    getString(record.label)
+  const label = getString(record.label) ?? sampleName
+  const sampleType =
+    getString(record.sampleType) ??
+    getString(record.sample_type) ??
+    (record.type === 'sample' ? 'sample' : undefined)
+
+  if (!sampleName && !label && !getString(record.id)) return null
+
+  return {
+    id: getString(record.id),
+    sampleName,
+    label,
+    sampleType,
+    injectionVolume: getNumber(record.injectionVolume ?? record.injection_volume),
+    injectionCount: getNumber(record.injectionCount ?? record.injection_count),
+    customMethod: getString(record.customMethod ?? record.custom_method) ?? null,
+    metadata: getRecord(record.metadata),
+    raw,
+  }
+}
+
+function getString(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined
+}
+
+function getNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined
+}
+
+function getRecord(value: unknown): Record<string, unknown> | undefined {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : undefined
+}
+
 function handleKeyDown(event: KeyboardEvent) {
   if (props.disabled || props.readonly) return
 
@@ -726,9 +834,9 @@ const tableStyle = computed(() => ({
                 @mouseleave="handleWellMouseLeave"
                 @contextmenu="handleContextMenu(well, $event)"
                 @dragstart="handleDragStart(well, $event)"
-                @dragover.prevent="handleDragOver(well, $event)"
+                @dragover="handleDragOver(well, $event)"
                 @dragleave="handleDragLeave"
-                @drop.prevent="handleDrop(well, $event)"
+                @drop="handleDrop(well, $event)"
                 @dragend="handleDragEnd"
                 @keydown.enter="handleWellClick(well, $event as unknown as MouseEvent)"
                 @keydown.space.prevent="handleWellClick(well, $event as unknown as MouseEvent)"
@@ -805,17 +913,30 @@ const tableStyle = computed(() => ({
     </div>
 
     <!-- Edit popup -->
-    <WellEditPopupInternal
-      v-if="editable && editingWellId"
-      :well-id="editingWellId"
-      :well-data="wells[editingWellId]"
-      :edit-fields="editFields"
-      :default-injection-volume="defaultInjectionVolume"
-      :position="editPopupPosition"
-      @save="handleEditSave"
-      @clear="handleEditClear"
-      @close="handleEditClose"
-    />
+    <template v-if="editable && editingWellId">
+      <slot
+        name="well-editor"
+        :well-id="editingWellId"
+        :well-data="wells[editingWellId]"
+        :edit-fields="editFields"
+        :default-injection-volume="defaultInjectionVolume"
+        :position="editPopupPosition"
+        :save="handleEditSave"
+        :clear="handleEditClear"
+        :close="handleEditClose"
+      >
+        <WellEditPopupInternal
+          :well-id="editingWellId"
+          :well-data="wells[editingWellId]"
+          :edit-fields="editFields"
+          :default-injection-volume="defaultInjectionVolume"
+          :position="editPopupPosition"
+          @save="handleEditSave"
+          @clear="handleEditClear"
+          @close="handleEditClose"
+        />
+      </slot>
+    </template>
   </div>
 </template>
 

package/src/components/index.ts

@@ -89,6 +89,11 @@ export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 // Scientific display components
 export { default as ScientificNumber } from './ScientificNumber.vue'
 export { default as ChemicalFormula } from './ChemicalFormula.vue'
+export { default as SequenceProgressBar } from './SequenceProgressBar.vue'
+export { default as InstrumentAlertLog } from './InstrumentAlertLog.vue'
+export { default as InstrumentStateBadge } from './InstrumentStateBadge.vue'
+export { default as InstrumentStatusCard } from './InstrumentStatusCard.vue'
+export { default as LcmsSequenceTable } from './LcmsSequenceTable.vue'
 
 // Scientific input components
 export { default as FormulaInput } from './FormulaInput.vue'

package/src/components/internal/WellEditPopupInternal.vue

@@ -90,6 +90,7 @@ const sampleTypeButtons = [
   { type: 'sample', label: 'S', tooltip: 'Sample' },
   { type: 'blank', label: 'B', tooltip: 'Blank' },
   { type: 'qc', label: 'Q', tooltip: 'QC' },
+  { type: 'iqc', label: 'I', tooltip: 'IQC' },
 ]
 </script>
 

package/src/composables/experimentDesignData.ts

@@ -0,0 +1,182 @@
+import type { SelectOption } from '../types'
+
+export interface ExperimentDesignDataResponse {
+  experiment_id?: number
+  plugin_id?: string
+  data?: Record<string, unknown>
+  schema_version?: string
+  updated_at?: string | null
+}
+
+export interface ExtractExperimentSamplesOptions {
+  includeControls?: boolean
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+function isPlatformDesignDataResponse(value: Record<string, unknown>): boolean {
+  return (
+    'data' in value
+    && (
+      'experiment_id' in value
+      || 'plugin_id' in value
+      || 'schema_version' in value
+      || 'updated_at' in value
+    )
+  )
+}
+
+/** Return the plugin-defined design_data payload from common platform and plugin response shapes. */
+export function unwrapExperimentDesignData(
+  rawData: Record<string, unknown> | null | undefined,
+): Record<string, unknown> | null {
+  if (!rawData) return null
+
+  if (isRecord(rawData.data) && isPlatformDesignDataResponse(rawData)) {
+    return rawData.data
+  }
+
+  if (isRecord(rawData.design_data)) {
+    return rawData.design_data
+  }
+
+  if (isRecord(rawData.designData)) {
+    return rawData.designData
+  }
+
+  return rawData
+}
+
+function shouldIncludeSample(record: Record<string, unknown>, options: ExtractExperimentSamplesOptions): boolean {
+  if (options.includeControls) return true
+  const rawType = record.sample_type ?? record.sampleType ?? record.type ?? record.well_type ?? record.wellType
+  const type = typeof rawType === 'string' ? rawType.toLowerCase() : ''
+  return !['blank', 'qc'].includes(type)
+}
+
+function readSampleValue(record: Record<string, unknown>): string | null {
+  const candidates = [
+    record.sample_name,
+    record.sampleName,
+    record.sample_id,
+    record.sampleId,
+    record.name,
+    record.id,
+    record.label,
+  ]
+
+  for (const candidate of candidates) {
+    if (typeof candidate === 'string' && candidate.trim()) {
+      return candidate
+    }
+    if (typeof candidate === 'number' && Number.isFinite(candidate)) {
+      return String(candidate)
+    }
+  }
+
+  return null
+}
+
+function readSampleLabel(record: Record<string, unknown>, fallback: string): string {
+  const label = record.name ?? record.label ?? record.sample_name ?? record.sampleName
+  return typeof label === 'string' && label.trim() ? label : fallback
+}
+
+function readSampleDescription(record: Record<string, unknown>): string | undefined {
+  const parts = [
+    record.group,
+    record.batch,
+    record.batch_id,
+    record.batchId,
+    record.plate_id,
+    record.plateId,
+    record.well_id,
+    record.wellId,
+  ].filter((value): value is string | number =>
+    (typeof value === 'string' && value.trim().length > 0)
+    || typeof value === 'number',
+  )
+
+  return parts.length > 0 ? parts.map(String).join(' / ') : undefined
+}
+
+function addSampleRecord(
+  options: SelectOption<string>[],
+  seen: Set<string>,
+  value: unknown,
+  extractOptions: ExtractExperimentSamplesOptions,
+): void {
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    if (trimmed && !seen.has(trimmed)) {
+      seen.add(trimmed)
+      options.push({ value: trimmed, label: trimmed })
+    }
+    return
+  }
+
+  if (!isRecord(value) || !shouldIncludeSample(value, extractOptions)) return
+
+  const sampleValue = readSampleValue(value)
+  if (!sampleValue || seen.has(sampleValue)) return
+
+  seen.add(sampleValue)
+  options.push({
+    value: sampleValue,
+    label: readSampleLabel(value, sampleValue),
+    description: readSampleDescription(value),
+  })
+}
+
+function addSampleArray(
+  options: SelectOption<string>[],
+  seen: Set<string>,
+  value: unknown,
+  extractOptions: ExtractExperimentSamplesOptions,
+): void {
+  if (!Array.isArray(value)) return
+  for (const sample of value) {
+    addSampleRecord(options, seen, sample, extractOptions)
+  }
+}
+
+/** Extract selectable sample options from raw or wrapped experiment design_data. */
+export function extractSampleOptionsFromDesignData(
+  rawData: Record<string, unknown> | null | undefined,
+  options: ExtractExperimentSamplesOptions = {},
+): SelectOption<string>[] {
+  const designData = unwrapExperimentDesignData(rawData)
+  if (!designData) return []
+
+  const sampleOptions: SelectOption<string>[] = []
+  const seen = new Set<string>()
+
+  addSampleArray(sampleOptions, seen, designData.samples, options)
+
+  if (isRecord(designData.templates)) {
+    for (const template of Object.values(designData.templates)) {
+      if (!isRecord(template)) continue
+      const templateData = isRecord(template.data) ? template.data : template
+      addSampleArray(sampleOptions, seen, templateData.samples, options)
+    }
+  }
+
+  if (Array.isArray(designData.plates)) {
+    for (const plate of designData.plates) {
+      if (!isRecord(plate)) continue
+      addSampleArray(sampleOptions, seen, plate.samples, options)
+    }
+  }
+
+  return sampleOptions
+}
+
+/** Extract SampleSelector-compatible string values from raw or wrapped experiment design_data. */
+export function extractSampleNamesFromDesignData(
+  rawData: Record<string, unknown> | null | undefined,
+  options: ExtractExperimentSamplesOptions = {},
+): string[] {
+  return extractSampleOptionsFromDesignData(rawData, options).map(sample => sample.value)
+}

package/src/composables/index.ts

@@ -144,6 +144,20 @@ export {
   type UseExperimentDataOptions,
   type UseExperimentDataReturn,
 } from './useExperimentData'
+export {
+  extractSampleNamesFromDesignData,
+  extractSampleOptionsFromDesignData,
+  unwrapExperimentDesignData,
+  type ExperimentDesignDataResponse,
+  type ExtractExperimentSamplesOptions,
+} from './experimentDesignData'
+export {
+  useExperimentSamples,
+  type ExperimentDesignDataSource,
+  type ExperimentIdSource,
+  type UseExperimentSamplesOptions,
+  type UseExperimentSamplesReturn,
+} from './useExperimentSamples'
 export {
   getFieldRegistryEntry,
   getTypeDefault,

package/src/composables/useAuth.ts

@@ -3,6 +3,7 @@ import { ref, onMounted, onUnmounted, watch, getCurrentInstance, type Ref } from
 import { useAuthStore } from '../stores/auth'
 import { useSettingsStore } from '../stores/settings'
 import type { AuthConfig, UserInfo, LoginResponse, TokenVerifyResponse, UpdateProfileRequest } from '../types'
+import type { RoleInfo } from '../permissions'
 
 interface UserResponse {
   id: string
@@ -10,6 +11,7 @@ interface UserResponse {
   shortname: string | null
   email: string | null
   role: string
+  role_obj?: RoleInfo | null
   is_active: boolean
 }
 
@@ -187,6 +189,7 @@ export function useAuth(): UseAuthReturn {
         shortname: response.data.shortname,
         email: response.data.email,
         role: response.data.role,
+        roleObj: response.data.role_obj ?? null,
         isActive: response.data.is_active,
       }
 
@@ -379,6 +382,7 @@ export function useAuth(): UseAuthReturn {
         shortname: response.data.shortname,
         email: response.data.email,
         role: response.data.role,
+        roleObj: response.data.role_obj ?? null,
         isActive: response.data.is_active,
       }
       authStore.setUserInfo(userInfo)

package/src/composables/useAutoGroup.ts

@@ -9,6 +9,7 @@ import type {
   ParsedCsvData,
 } from '../types/auto-group'
 import type { SampleGroup } from '../types/components'
+import { unwrapExperimentDesignData } from './experimentDesignData'
 
 export const DEFAULT_COLORS = [
   '#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6',
@@ -311,7 +312,10 @@ export function computeGroups(
 export function extractSamplesFromDesignData(
   rawData: Record<string, unknown>,
 ): ParsedCsvData | null {
-  const samples = rawData.samples
+  const designData = unwrapExperimentDesignData(rawData)
+  if (!designData) return null
+
+  const samples = designData.samples
   if (!Array.isArray(samples) || samples.length === 0) return null
 
   // Single pass: filter QC/blank and collect all condition keys

package/src/composables/useControlSchema.ts

@@ -6,6 +6,7 @@ import type {
   SettingsModalSchema,
   TopBarSettingsConfig,
 } from '../types'
+import type { AccessPolicy, AccessAudienceInput } from '../permissions'
 import type {
   FieldCondition,
   FieldValidation,
@@ -34,6 +35,11 @@ export interface ControlSectionConfig {
   iconBg?: string
   columns?: 1 | 2 | 3
   condition?: FieldCondition
+  access?: AccessPolicy
+  visibleFor?: AccessAudienceInput
+  requiresAdmin?: boolean
+  permissions?: readonly string[]
+  anyPermissions?: readonly string[]
   defaultOpen?: boolean
   showToggle?: boolean
 }
@@ -70,6 +76,11 @@ export interface ControlDefinition {
   pattern?: string | { value: string; message: string }
   validation?: FieldValidation
   condition?: FieldCondition
+  access?: AccessPolicy
+  visibleFor?: AccessAudienceInput
+  requiresAdmin?: boolean
+  permissions?: readonly string[]
+  anyPermissions?: readonly string[]
   options?: readonly ControlOption[]
   section?: string
   sectionLabel?: string
@@ -760,6 +771,11 @@ export function controlsToSettingsSchema(
         fields: sectionControls.map(controlToFormField),
         columns: config.columns ?? options.columns ?? 1,
         condition: config.condition,
+        access: config.access,
+        visibleFor: config.visibleFor,
+        requiresAdmin: config.requiresAdmin,
+        permissions: config.permissions,
+        anyPermissions: config.anyPermissions,
       }
     }),
   }
@@ -1150,6 +1166,11 @@ function controlToFormField(control: NormalizedControl): FormFieldSchema {
     readonly: definition.readonly,
     validation: validationForControl(definition),
     condition: definition.condition,
+    access: definition.access,
+    visibleFor: definition.visibleFor,
+    requiresAdmin: definition.requiresAdmin,
+    permissions: definition.permissions,
+    anyPermissions: definition.anyPermissions,
     colSpan: definition.colSpan,
     props,
   }