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.7.0",
+    "@blueprintjs/icons": "^6.5.1",
+    "@blueprintjs/select": "^6.0.14",
     "@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.6.1",
+    "@zakodium/nmrium-core-plugins": "^0.6.32",
     "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.3.0",
+    "nmrium": "^1.11.0",
+    "openchemlib": "^9.19.0",
+    "react-science": "^19.5.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.58.0",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.3.0",
+    "@types/node": "^25.1.0",
     "@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.1",
     "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.13.0",
+    "serve": "^14.2.5",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-pwa": "^1.2.0"
   }
 }

playwright.config.ts

@@ -9,6 +9,10 @@ const viewportOverride: ViewportSize = {
 const config: PlaywrightTestConfig = {
   testDir: 'test-e2e',
   retries: 1,
+  timeout: 60_000,
+  expect: {
+    timeout: 30_000,
+  },
   use: {
     headless: true,
     ignoreHTTPSErrors: true,
@@ -21,6 +25,7 @@ const config: PlaywrightTestConfig = {
       strictSelectors: true,
     },
   },
+
   webServer: {
     command: 'npm run test-e2e-server',
     port: 3000,

src/NMRiumWrapper.tsx

@@ -1,10 +1,12 @@
-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';
+import type { NMRiumData } from './hooks/useLoadSpectra.js';
 import { useLoadSpectra } from './hooks/useLoadSpectra.js';
 import { usePreferences } from './hooks/usePreferences.js';
 import { useWhiteList } from './hooks/useWhiteList.js';
@@ -37,8 +39,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 +48,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,15 +79,15 @@ export default function NMRiumWrapper() {
       (loadData) => {
         switch (loadData.type) {
           case 'nmrium':
-            setDate(loadData.data);
+            setData(loadData.data as unknown as NMRiumData);
             break;
           case 'file': {
-            const { data: files, activeTab } = loadData;
+            const { data: files, activeTab = '' } = loadData;
             loadSpectra({ files, activeTab });
             break;
           }
           case 'url': {
-            const { data: urls, activeTab } = loadData;
+            const { data: urls, activeTab = '' } = loadData;
             loadSpectra({ urls, activeTab });
             break;
           }
@@ -112,7 +106,6 @@ export default function NMRiumWrapper() {
       clearActionListener();
     };
   });
-
   return (
     <RootLayout style={styles.container}>
       {isFetchAllowedOriginsPending && (
@@ -122,19 +115,17 @@ export default function NMRiumWrapper() {
       )}
       <NMRium
         ref={nmriumRef}
-        data={data}
+        data={data as unknown as NmriumData}
         onChange={dataChangeHandler}
         preferences={preferences}
         workspace={workspace}
         emptyText={defaultEmptyMessage}
         onError={(error) => {
-          events.trigger('error', error);
+          events.trigger('error', error as Error);
         }}
         customWorkspaces={customWorkspaces}
       />
       <AboutUsModal />
     </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/demo/NMRiumWrapperDemo.tsx

@@ -51,6 +51,7 @@ export default function NMRiumWrapperDemo() {
                 // 'https://cloud.uni-jena.de/s/jsMed9fmqWZzo6r/download/53.zip',
               ],
               type: 'url',
+              activeTab: '13C',
             });
           }}
         >

src/hooks/useLoadSpectra.ts

@@ -1,12 +1,9 @@
-import type {
-  NmriumState,
-  ParsingOptions,
-  ViewState,
-} from '@zakodium/nmrium-core';
+import type { ParsingOptions, ViewState } from '@zakodium/nmrium-core';
 import { CURRENT_EXPORT_VERSION } from '@zakodium/nmrium-core';
 import init from '@zakodium/nmrium-core-plugins';
 import { FifoLogger } from 'fifo-logger';
 import { FileCollection } from 'file-collection';
+import type { NMRiumState } from 'nmrium';
 import { useCallback, useMemo, useState } from 'react';
 
 import events from '../events/event.js';
@@ -36,16 +33,16 @@ logger.addEventListener('change', handleLogger);
 const PARSING_OPTIONS: Partial<ParsingOptions> = {
   onLoadProcessing: { autoProcessing: true },
   experimentalFeatures: true,
-  sourceSelector: { general: { dataSelection: 'preferFT' } },
+  selector: { general: { dataSelection: 'preferFT' } },
   logger,
 };
 
 async function loadSpectraFromFiles(files: File[]) {
   const fileCollection = await new FileCollection().appendFileList(files);
   const {
-    nmriumState: { data },
+    nmriumState: { data, version },
   } = await core.read(fileCollection, PARSING_OPTIONS);
-  return data;
+  return { data, version } as NMRiumData;
 }
 
 async function loadSpectraFromURLs(urls: string[]) {
@@ -60,24 +57,31 @@ async function loadSpectraFromURLs(urls: string[]) {
     return { relativePath: path, baseURL: refURL.origin };
   }, []);
 
-  const { data } = await core.readFromWebSource({ entries }, PARSING_OPTIONS);
-  return data;
+  const [{ data, version }] = await core.readFromWebSource(
+    { entries },
+    PARSING_OPTIONS,
+  );
+  return { data, version } as NMRiumData;
 }
 
-type NMRiumData = NmriumState['data'];
-
 type LoadOptions =
   | { urls: string[]; activeTab?: string }
   | { files: File[]; activeTab?: string };
 
+export type NMRiumData = Pick<NMRiumState, 'data' | 'version'>;
+
 interface UseLoadSpectraResult {
-  data: { version: number; data: NMRiumData };
+  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>({
+    data: { spectra: [], molecules: [] },
+    version: CURRENT_EXPORT_VERSION,
+  });
   const [activeTab, setActiveTab] = useState<string>();
   const [isLoading, setLoading] = useState<boolean>(false);
 
@@ -87,14 +91,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);
           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);
         setActiveTab(options?.activeTab);
       }
     } catch (error: unknown) {
@@ -109,14 +113,13 @@ export function useLoadSpectra(): UseLoadSpectraResult {
 
   return useMemo(() => {
     let view: DeepPartial<ViewState> = {};
-    if (activeTab) {
-      view = { spectra: { activeTab } };
-    }
-
+    view = { spectra: { activeTab } };
+    const { version, ...other } = data;
     return {
-      data: { version: CURRENT_EXPORT_VERSION, data, view },
+      data: { version: version ?? CURRENT_EXPORT_VERSION, ...other, view },
       load,
       isLoading,
+      setData,
     };
   }, [activeTab, data, isLoading, load]);
 }