Development

package.json

@@ -13,19 +13,19 @@
     "node": "24.4.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^6.2.1",
-    "@blueprintjs/icons": "^6.1.0",
-    "@blueprintjs/select": "^6.0.3",
+    "@blueprintjs/core": "^6.6.1",
+    "@blueprintjs/icons": "^6.5.0",
+    "@blueprintjs/select": "^6.0.13",
     "@emotion/styled": "^11.14.1",
-    "@vitejs/plugin-react": "^5.0.2",
-    "@zakodium/nmrium-core": "^0.1.7",
-    "@zakodium/nmrium-core-plugins": "^0.1.10",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@zakodium/nmrium-core": "^0.5.8",
+    "@zakodium/nmrium-core-plugins": "^0.6.27",
     "fifo-logger": "^2.0.1",
     "filelist-utils": "^1.11.3",
-    "nmr-processing": "^19.1.0",
-    "nmrium": "^1.3.0",
-    "openchemlib": "^9.7.0",
-    "react-science": "^19.1.0"
+    "nmr-processing": "^22.1.0",
+    "nmrium": "^1.10.1",
+    "openchemlib": "^9.19.0",
+    "react-science": "^19.4.0"
   },
   "scripts": {
     "start": "vite --host localhost --port 3000  --open",
@@ -43,28 +43,28 @@
     "test-e2e-server": "serve -l tcp://localhost:3000 dist"
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.27.1",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
-    "@playwright/test": "^1.55.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.28.6",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@playwright/test": "^1.57.0",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.3.0",
+    "@types/node": "^25.0.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "cross-env": "^10.0.0",
-    "eslint": "^9.34.0",
-    "eslint-config-cheminfo-react": "^17.0.1",
-    "eslint-config-cheminfo-typescript": "^19.0.0",
-    "jest": "^30.1.3",
-    "prettier": "3.6.2",
+    "cross-env": "^10.1.0",
+    "eslint": "^9.39.2",
+    "eslint-config-cheminfo-react": "^19.1.0",
+    "eslint-config-cheminfo-typescript": "^21.1.0",
+    "jest": "^30.2.0",
+    "prettier": "3.8.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.8.2",
-    "serve": "^14.2.4",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.4",
-    "vite-plugin-pwa": "^1.0.3"
+    "react-router-dom": "^7.12.0",
+    "serve": "^14.2.5",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-pwa": "^1.2.0"
   }
 }

src/NMRiumWrapper.tsx

@@ -1,7 +1,8 @@
-import type { NMRiumChangeCb, NMRiumData, NMRiumRefAPI } from 'nmrium';
+import type { NmriumData } from '@zakodium/nmrium-core';
+import type { NMRiumChangeCb, NMRiumRefAPI } from 'nmrium';
 import { NMRium } from 'nmrium';
 import type { CSSProperties } from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { RootLayout } from 'react-science/ui';
 
 import events from './events/event.js';
@@ -37,8 +38,6 @@ const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
 export default function NMRiumWrapper() {
   const { allowedOrigins, isFetchAllowedOriginsPending } = useWhiteList();
   const nmriumRef = useRef<NMRiumRefAPI>(null);
-  const [data, setDate] = useState<NMRiumData>();
-
   const { workspace, preferences, defaultEmptyMessage, customWorkspaces } =
     usePreferences();
   const dataChangeHandler = useCallback<NMRiumChangeCb>((state, source) => {
@@ -48,13 +47,7 @@ export default function NMRiumWrapper() {
     });
   }, []);
 
-  const { load: loadSpectra, isLoading, data: loadedData } = useLoadSpectra();
-
-  useEffect(() => {
-    if (!isLoading) {
-      setDate(loadedData as unknown as NMRiumData);
-    }
-  }, [isLoading, loadedData]);
+  const { load: loadSpectra, data, setData } = useLoadSpectra();
 
   useEffect(() => {
     const clearActionListener = events.on(
@@ -85,7 +78,7 @@ export default function NMRiumWrapper() {
       (loadData) => {
         switch (loadData.type) {
           case 'nmrium':
-            setDate(loadData.data);
+            setData(loadData.data as NmriumData);
             break;
           case 'file': {
             const { data: files, activeTab } = loadData;
@@ -122,7 +115,7 @@ export default function NMRiumWrapper() {
       )}
       <NMRium
         ref={nmriumRef}
-        data={data}
+        data={data as unknown as NmriumData}
         onChange={dataChangeHandler}
         preferences={preferences}
         workspace={workspace}
@@ -136,5 +129,3 @@ export default function NMRiumWrapper() {
     </RootLayout>
   );
 }
-
-export { type NMRiumData } from 'nmrium';

src/allowed-origins.json

@@ -41,5 +41,6 @@
     "https://test1.eln.chemotion.scc.kit.edu",
     "https://test.chemdev.scc.kit.edu",
     "http://5.10.12.108",
-    "http://chemotioneln.chemie.uni-kl.de:4000"
+    "http://chemotioneln.chemie.uni-kl.de:4000",
+    "https://eln.crc1333.de/"
 ]

src/hooks/useLoadSpectra.ts

@@ -1,5 +1,5 @@
 import type {
-  NmriumState,
+  NmriumData,
   ParsingOptions,
   ViewState,
 } from '@zakodium/nmrium-core';
@@ -36,7 +36,7 @@ logger.addEventListener('change', handleLogger);
 const PARSING_OPTIONS: Partial<ParsingOptions> = {
   onLoadProcessing: { autoProcessing: true },
   experimentalFeatures: true,
-  sourceSelector: { general: { dataSelection: 'preferFT' } },
+  selector: { general: { dataSelection: 'preferFT' } },
   logger,
 };
 
@@ -60,24 +60,23 @@ async function loadSpectraFromURLs(urls: string[]) {
     return { relativePath: path, baseURL: refURL.origin };
   }, []);
 
-  const { data } = await core.readFromWebSource({ entries }, PARSING_OPTIONS);
+  const [{ data }] = await core.readFromWebSource({ entries }, PARSING_OPTIONS);
   return data;
 }
 
-type NMRiumData = NmriumState['data'];
-
 type LoadOptions =
   | { urls: string[]; activeTab?: string }
   | { files: File[]; activeTab?: string };
 
 interface UseLoadSpectraResult {
-  data: { version: number; data: NMRiumData };
+  data: { version: number; data: NmriumData };
   load: (options: LoadOptions) => void;
+  setData: (data: NmriumData) => void;
   isLoading: boolean;
 }
 
 export function useLoadSpectra(): UseLoadSpectraResult {
-  const [data, setData] = useState<NMRiumData>({ spectra: [], molecules: [] });
+  const [data, setData] = useState<NmriumData>({ spectra: [], molecules: [] });
   const [activeTab, setActiveTab] = useState<string>();
   const [isLoading, setLoading] = useState<boolean>(false);
 
@@ -87,14 +86,14 @@ export function useLoadSpectra(): UseLoadSpectraResult {
       if ('urls' in options) {
         if (isArrayOfString(options.urls)) {
           const result = await loadSpectraFromURLs(options.urls);
-          setData(result as NMRiumData);
+          setData(result as NmriumData);
           setActiveTab(options?.activeTab);
         } else {
           throw new Error('The input must be a valid urls array of string[]');
         }
       } else if ('files' in options) {
         const result = await loadSpectraFromFiles(options.files);
-        setData(result as NMRiumData);
+        setData(result as NmriumData);
         setActiveTab(options?.activeTab);
       }
     } catch (error: unknown) {
@@ -117,6 +116,7 @@ export function useLoadSpectra(): UseLoadSpectraResult {
       data: { version: CURRENT_EXPORT_VERSION, data, view },
       load,
       isLoading,
+      setData,
     };
   }, [activeTab, data, isLoading, load]);
 }

src/hooks/usePreferences.ts

@@ -3,75 +3,78 @@ import type {
   WorkspacePreferences,
 } from '@zakodium/nmrium-core';
 import type { NMRiumWorkspace } from 'nmrium';
-import { useLayoutEffect, useState } from 'react';
 
+import type { WorkspaceOptions } from '../workspaces/integration.js';
+import { getIntegrationWorkspace } from '../workspaces/integration.js';
 import { getNmrXivWorkspace } from '../workspaces/nmrxiv.js';
 
-interface Preferences {
-  preferences: WorkspacePreferences | undefined;
-  workspace: NMRiumWorkspace | undefined;
-  defaultEmptyMessage: string | undefined;
-  customWorkspaces: CustomWorkspaces;
-}
+export function usePreferences() {
+  const { href } = window.location;
+  const parameters = new URL(href).searchParams;
 
-const DEFAULT_PREFERENCES = {
-  preferences: undefined,
-  workspace: undefined,
-  defaultEmptyMessage: undefined,
-  customWorkspaces: {},
-};
+  let preferences: WorkspacePreferences | undefined;
+  let workspace: NMRiumWorkspace | undefined;
+  let defaultEmptyMessage: string | undefined;
+  let hidePanelOnLoad = false;
+  let disableImport = false;
 
-export function usePreferences() {
-  const [configuration, setConfiguration] =
-    useState<Preferences>(DEFAULT_PREFERENCES);
+  if (parameters.has('workspace')) {
+    workspace = parameters.get('workspace') as NMRiumWorkspace;
+  }
 
-  useLayoutEffect(() => {
-    const { href } = window.location;
-    const parameters = new URL(href).searchParams;
+  if (parameters.has('preferences')) {
+    preferences = JSON.parse(parameters.get('preferences') || '');
+  }
 
-    let preferences: WorkspacePreferences | undefined;
-    let workspace: NMRiumWorkspace | undefined;
-    let defaultEmptyMessage: string | undefined;
-    let hidePanelOnLoad = false;
+  if (parameters.has('defaultEmptyMessage')) {
+    defaultEmptyMessage = parameters.get('defaultEmptyMessage') as string;
+  }
+  if (parameters.has('hidePanelOnLoad')) {
+    hidePanelOnLoad =
+      parameters.get('hidePanelOnLoad')?.toLowerCase() === 'true';
+  }
+  if (parameters.has('disableImport')) {
+    disableImport = parameters.get('disableImport')?.toLowerCase() === 'true';
+  }
 
-    if (parameters.has('workspace')) {
-      workspace = parameters.get('workspace') as NMRiumWorkspace;
-    }
+  const customWorkspaces = createCustomWorkspaces({
+    hidePanelOnLoad,
+    disableImport,
+  });
 
-    if (parameters.has('preferences')) {
-      preferences = JSON.parse(parameters.get('preferences') || '');
-    }
+  if (parameters.has('workspace')) {
+    workspace = parameters.get('workspace') as NMRiumWorkspace;
+  }
 
-    if (parameters.has('defaultEmptyMessage')) {
-      defaultEmptyMessage = parameters.get('defaultEmptyMessage') as string;
-    }
-    if (parameters.has('hidePanelOnLoad')) {
-      hidePanelOnLoad =
-        parameters.get('hidePanelOnLoad')?.toLowerCase() === 'true';
-    }
+  if (parameters.has('preferences')) {
+    preferences = JSON.parse(parameters.get('preferences') || '');
+  }
 
-    const customWorkspaces = createCustomWorkspaces({ hidePanelOnLoad });
-    setConfiguration({
-      preferences,
-      workspace,
-      defaultEmptyMessage,
-      customWorkspaces,
-    });
-  }, []);
+  if (parameters.has('defaultEmptyMessage')) {
+    defaultEmptyMessage = parameters.get('defaultEmptyMessage') as string;
+  }
+  if (parameters.has('hidePanelOnLoad')) {
+    hidePanelOnLoad =
+      parameters.get('hidePanelOnLoad')?.toLowerCase() === 'true';
+  }
 
-  return configuration;
+  return {
+    preferences,
+    workspace,
+    defaultEmptyMessage,
+    customWorkspaces,
+  };
 }
 
-interface CreateCustomWorkspacesOptions {
-  hidePanelOnLoad?: boolean;
-}
+type CreateCustomWorkspacesOptions = WorkspaceOptions;
 
 function createCustomWorkspaces(
   options: CreateCustomWorkspacesOptions,
 ): CustomWorkspaces {
-  const { hidePanelOnLoad = false } = options;
+  const { hidePanelOnLoad, disableImport } = options;
 
   return {
+    integration: getIntegrationWorkspace({ disableImport, hidePanelOnLoad }),
     nmrXiv: getNmrXivWorkspace(hidePanelOnLoad),
   };
 }