@morscherlab/mld-sdk 0.9.6 → 0.9.8

package/src/components/PlateMapEditor.vue

@@ -112,7 +112,7 @@ watch(
 watch(
   () => props.modelValue,
   (newValue) => {
-    if (newValue) editor.reset()
+    if (newValue) editor.loadState(newValue)
   }
 )
 

package/src/composables/useAuth.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { ref, onMounted, onUnmounted, watch, type Ref } from 'vue'
+import { ref, onMounted, onUnmounted, watch, getCurrentInstance, type Ref } from 'vue'
 import { useAuthStore } from '../stores/auth'
 import { useSettingsStore } from '../stores/settings'
 import type { AuthConfig, UserInfo, LoginResponse, TokenVerifyResponse, UpdateProfileRequest } from '../types'
@@ -66,8 +66,6 @@ export function useAuth(): UseAuthReturn {
   const authStore = useAuthStore()
   const settingsStore = useSettingsStore()
 
-  // Track refresh timer (module-level to prevent timer multiplication)
-  const refreshTimerId = ref<number | null>(_refreshTimerId)
   const isRefreshing = ref(false)
 
   function getApiBaseUrl(): string {
@@ -281,7 +279,7 @@ export function useAuth(): UseAuthReturn {
 
     // Schedule refresh
     const delay = refreshAt - now
-    refreshTimerId.value = window.setTimeout(() => {
+    _refreshTimerId = window.setTimeout(() => {
       refreshToken()
     }, delay)
   }
@@ -290,9 +288,9 @@ export function useAuth(): UseAuthReturn {
    * Stop automatic token refresh.
    */
   function stopTokenRefresh(): void {
-    if (refreshTimerId.value !== null) {
-      window.clearTimeout(refreshTimerId.value)
-      refreshTimerId.value = null
+    if (_refreshTimerId !== null) {
+      window.clearTimeout(_refreshTimerId)
+      _refreshTimerId = null
     }
   }
 
@@ -382,34 +380,34 @@ export function useAuth(): UseAuthReturn {
     }
   }
 
-  // Set up periodic check as safety net
+  // Set up periodic check as safety net (only inside component setup)
   let checkInterval: number | null = null
 
-  onMounted(() => {
-    // Start periodic check
-    checkInterval = window.setInterval(checkAndRefreshIfNeeded, TOKEN_REFRESH_CHECK_INTERVAL_MS)
-  })
+  if (getCurrentInstance()) {
+    onMounted(() => {
+      checkInterval = window.setInterval(checkAndRefreshIfNeeded, TOKEN_REFRESH_CHECK_INTERVAL_MS)
+    })
 
-  onUnmounted(() => {
-    // Clean up on unmount
-    stopTokenRefresh()
-    if (checkInterval !== null) {
-      window.clearInterval(checkInterval)
-      checkInterval = null
-    }
-  })
-
-  // Watch for token changes to reschedule refresh
-  watch(
-    () => authStore.tokenExpires,
-    (newExpires) => {
-      if (newExpires) {
-        scheduleTokenRefresh()
-      } else {
-        stopTokenRefresh()
+    onUnmounted(() => {
+      stopTokenRefresh()
+      if (checkInterval !== null) {
+        window.clearInterval(checkInterval)
+        checkInterval = null
       }
-    }
-  )
+    })
+
+    // Watch for token changes to reschedule refresh
+    watch(
+      () => authStore.tokenExpires,
+      (newExpires) => {
+        if (newExpires) {
+          scheduleTokenRefresh()
+        } else {
+          stopTokenRefresh()
+        }
+      }
+    )
+  }
 
   return {
     // Core auth methods

package/src/composables/useAutoGroup.ts

@@ -331,24 +331,9 @@ export function useAutoGroup() {
     }))
   })
 
-  const groups = computed(() => {
+  const _computedResult = computed(() => {
     if (effectiveColumns.value.length === 0 || enabledFields.value.size === 0) {
-      return []
-    }
-    const result = computeGroups(
-      samples.value,
-      effectiveColumns.value,
-      enabledFields.value,
-      outlierActions.value,
-      delimiter.value,
-      minFieldCount.value,
-    )
-    return result.groups
-  })
-
-  const metadata = computed(() => {
-    if (effectiveColumns.value.length === 0 || enabledFields.value.size === 0) {
-      return []
+      return { groups: [] as SampleGroup[], metadata: [] as MetadataRow[], excludedSamples: [] as string[] }
     }
     return computeGroups(
       samples.value,
@@ -357,25 +342,14 @@ export function useAutoGroup() {
       outlierActions.value,
       delimiter.value,
       minFieldCount.value,
-    ).metadata
+    )
   })
 
-  const excludedSamples = computed(() => {
-    return computeGroups(
-      samples.value,
-      effectiveColumns.value,
-      enabledFields.value,
-      outlierActions.value,
-      delimiter.value,
-      minFieldCount.value,
-    ).excludedSamples
-  })
+  const groups = computed(() => _computedResult.value.groups)
+  const metadata = computed(() => _computedResult.value.metadata)
+  const excludedSamples = computed(() => _computedResult.value.excludedSamples)
 
-  const result = computed<AutoGroupResult>(() => ({
-    groups: groups.value,
-    metadata: metadata.value,
-    excludedSamples: excludedSamples.value,
-  }))
+  const result = computed<AutoGroupResult>(() => _computedResult.value)
 
   function parseInput() {
     if (inputMode.value === 'csv' && csvData.value) {

package/src/composables/useForm.ts

@@ -354,7 +354,7 @@ export function useForm<T extends Record<string, unknown>>(
   function reset(values?: Partial<T>): void {
     const resetValues = values ? { ..._initialValues, ...values } : _initialValues
     for (const key of Object.keys(data)) {
-      ;(data as Record<string, unknown>)[key] = resetValues[key as keyof T]
+      ;(data as Record<string, unknown>)[key] = structuredClone(resetValues[key as keyof T])
       errors[key] = null
       touched[key] = false
       dirty[key] = false

package/src/composables/useWellPlateEditor.ts

@@ -52,6 +52,7 @@ export interface UseWellPlateEditorReturn {
   redo: () => void
   exportData: (format: 'json' | 'csv') => string
   importData: (data: string, format: 'json' | 'csv') => boolean
+  loadState: (state: Partial<PlateMapEditorState>) => void
   reset: () => void
 }
 
@@ -103,14 +104,10 @@ export function useWellPlateEditor(
   const canUndo = computed(() => historyIndex.value >= 0)
   const canRedo = computed(() => historyIndex.value < history.value.length - 1)
 
-  function deepClone<T>(obj: T): T {
-    return structuredClone(obj)
-  }
-
   function saveToHistory() {
     const entry: HistoryEntry = {
-      plates: deepClone(internalState.value.plates),
-      samples: deepClone(internalState.value.samples),
+      plates: structuredClone(internalState.value.plates),
+      samples: structuredClone(internalState.value.samples),
     }
 
     if (historyIndex.value < history.value.length - 1) {
@@ -257,8 +254,8 @@ export function useWellPlateEditor(
     const entry = history.value[historyIndex.value]
     historyIndex.value--
 
-    internalState.value.plates = deepClone(entry.plates)
-    internalState.value.samples = deepClone(entry.samples)
+    internalState.value.plates = structuredClone(entry.plates)
+    internalState.value.samples = structuredClone(entry.samples)
 
     const activePlateExists = internalState.value.plates.some(p => p.id === internalState.value.activePlateId)
     if (!activePlateExists) {
@@ -273,8 +270,8 @@ export function useWellPlateEditor(
     historyIndex.value++
     const entry = history.value[historyIndex.value]
 
-    internalState.value.plates = deepClone(entry.plates)
-    internalState.value.samples = deepClone(entry.samples)
+    internalState.value.plates = structuredClone(entry.plates)
+    internalState.value.samples = structuredClone(entry.samples)
     internalState.value.selectedWells = []
   }
 
@@ -368,6 +365,20 @@ export function useWellPlateEditor(
     }
   }
 
+  function loadState(state: Partial<PlateMapEditorState>) {
+    saveToHistory()
+    if (state.plates && state.plates.length > 0) {
+      internalState.value.plates = structuredClone(state.plates)
+      internalState.value.activePlateId = state.activePlateId ?? state.plates[0].id
+    }
+    if (state.samples) {
+      internalState.value.samples = structuredClone(state.samples)
+    }
+    internalState.value.selectedWells = state.selectedWells ?? []
+    internalState.value.activeSampleId = state.activeSampleId
+    updateSampleCounts()
+  }
+
   function reset() {
     const plate = createEmptyPlate('Plate 1', defaultFormat)
     internalState.value = {
@@ -403,6 +414,7 @@ export function useWellPlateEditor(
     redo,
     exportData,
     importData,
+    loadState,
     reset,
   }
 }

package/src/stores/settings.ts

@@ -33,8 +33,12 @@ function getDefaultServerHost(): string {
 }
 
 function getDefaultServerPort(): number {
-  if (typeof window !== 'undefined' && window.location.port) {
-    return parseInt(window.location.port, 10)
+  if (typeof window !== 'undefined') {
+    if (window.location.port) {
+      return parseInt(window.location.port, 10)
+    }
+    // Standard ports: 443 for HTTPS, 80 for HTTP (browser omits from location.port)
+    return window.location.protocol === 'https:' ? 443 : 80
   }
   return 8000
 }
@@ -92,34 +96,26 @@ export const useSettingsStore = defineStore('mld-settings', () => {
   // API prefix - can be configured via env variable VITE_API_PREFIX
   const apiPrefix: string = (import.meta.env?.VITE_API_PREFIX as string | undefined) ?? '/api'
 
-  function getApiBaseUrl(): string {
+  function _isSameOrigin(): { same: boolean; currentHost: string; currentPort: string } {
     const currentHost = typeof window !== 'undefined' ? window.location.hostname : 'localhost'
     const currentPort = typeof window !== 'undefined' ? window.location.port : '8000'
+    const effectivePort = currentPort || (window.location.protocol === 'https:' ? '443' : '80')
+    const same =
+      (serverHost.value === currentHost && String(serverPort.value) === effectivePort) ||
+      (serverHost.value === 'localhost' && currentHost !== 'localhost')
+    return { same, currentHost, currentPort }
+  }
 
-    if (serverHost.value === currentHost && String(serverPort.value) === currentPort) {
-      return apiPrefix
-    }
-
-    if (serverHost.value === 'localhost' && currentHost !== 'localhost') {
-      return apiPrefix
-    }
-
+  function getApiBaseUrl(): string {
+    const { same } = _isSameOrigin()
+    if (same) return apiPrefix
     return `http://${serverHost.value}:${serverPort.value}${apiPrefix}`
   }
 
   function getWsBaseUrl(): string {
-    const currentHost = typeof window !== 'undefined' ? window.location.hostname : 'localhost'
-    const currentPort = typeof window !== 'undefined' ? window.location.port : '8000'
+    const { same, currentHost, currentPort } = _isSameOrigin()
     const protocol = typeof window !== 'undefined' && window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-
-    if (serverHost.value === currentHost && String(serverPort.value) === currentPort) {
-      return `${protocol}//${currentHost}:${currentPort}${apiPrefix}`
-    }
-
-    if (serverHost.value === 'localhost' && currentHost !== 'localhost') {
-      return `${protocol}//${currentHost}:${currentPort}${apiPrefix}`
-    }
-
+    if (same) return `${protocol}//${currentHost}${currentPort ? ':' + currentPort : ''}${apiPrefix}`
     return `ws://${serverHost.value}:${serverPort.value}${apiPrefix}`
   }
 
@@ -138,19 +134,10 @@ export const useSettingsStore = defineStore('mld-settings', () => {
   }
 
   function applyTheme() {
-    let isDark = false
-
-    if (theme.value === 'system') {
-      isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-    } else {
-      isDark = theme.value === 'dark'
-    }
-
-    if (isDark) {
-      document.documentElement.classList.add('dark')
-    } else {
-      document.documentElement.classList.remove('dark')
-    }
+    const dark = theme.value === 'system'
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
+      : theme.value === 'dark'
+    document.documentElement.classList.toggle('dark', dark)
   }
 
   watch(theme, () => {
@@ -206,7 +193,6 @@ export const useSettingsStore = defineStore('mld-settings', () => {
   }
 
   return {
-    // State
     serverHost,
     serverPort,
     requestTimeout,
@@ -215,8 +201,6 @@ export const useSettingsStore = defineStore('mld-settings', () => {
     theme,
     colorPalette,
     tableDensity,
-
-    // Actions
     initialize,
     applyTheme,
     persistSettings,

package/src/styles/components/experiment-popover.css

@@ -181,8 +181,15 @@
   color: var(--text-muted, var(--mld-text-muted, #94a3b8));
 }
 
-.mld-experiment-popover__change-btn {
+.mld-experiment-popover__card-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.125rem;
   flex-shrink: 0;
+}
+
+.mld-experiment-popover__change-btn {
   padding: 0.25rem 0.375rem;
   border: none;
   background: transparent;
@@ -198,6 +205,23 @@
   background: rgba(99, 102, 241, 0.08);
 }
 
+.mld-experiment-popover__detach-btn {
+  padding: 0.25rem 0.375rem;
+  border: none;
+  background: transparent;
+  border-radius: 0.25rem;
+  color: var(--text-muted, var(--mld-text-muted, #94a3b8));
+  font-size: 0.6875rem;
+  font-weight: 400;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.mld-experiment-popover__detach-btn:hover {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.08);
+}
+
 /* Divider */
 .mld-experiment-popover__divider {
   height: 1px;

package/src/styles/components/formula-input.css

@@ -65,22 +65,29 @@
   background-color: var(--bg-tertiary);
 }
 
-/* Preview */
+/* Preview row */
 .mld-formula-input__preview {
-  padding: 0.375rem 0.75rem;
+  padding: 0.25rem 0.75rem;
   background-color: var(--bg-tertiary);
   border-top: 1px solid var(--border-color);
-  font-size: 1.125rem;
-  min-height: 1.75rem;
+  min-height: 1.5rem;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.mld-formula-input__preview-formula {
+  font-size: 1rem;
+  line-height: 1.4;
 }
 
 /* Molecular weight display */
 .mld-formula-input__mw {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   color: var(--text-muted);
-  padding-left: 0.125rem;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .mld-formula-input__mw::before {