feat: update NMRium to version 1.11.0

package.json

@@ -13,19 +13,19 @@
     "node": "24.4.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^6.6.1",
-    "@blueprintjs/icons": "^6.5.0",
-    "@blueprintjs/select": "^6.0.13",
+    "@blueprintjs/core": "^6.7.0",
+    "@blueprintjs/icons": "^6.5.1",
+    "@blueprintjs/select": "^6.0.14",
     "@emotion/styled": "^11.14.1",
     "@vitejs/plugin-react": "^5.1.2",
-    "@zakodium/nmrium-core": "^0.5.8",
-    "@zakodium/nmrium-core-plugins": "^0.6.27",
+    "@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": "^22.1.0",
-    "nmrium": "^1.10.1",
+    "nmr-processing": "^22.3.0",
+    "nmrium": "^1.11.0",
     "openchemlib": "^9.19.0",
-    "react-science": "^19.4.0"
+    "react-science": "^19.5.0"
   },
   "scripts": {
     "start": "vite --host localhost --port 3000  --open",
@@ -46,10 +46,10 @@
     "@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",
+    "@playwright/test": "^1.58.0",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.0.9",
+    "@types/node": "^25.1.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
@@ -58,10 +58,10 @@
     "eslint-config-cheminfo-react": "^19.1.0",
     "eslint-config-cheminfo-typescript": "^21.1.0",
     "jest": "^30.2.0",
-    "prettier": "3.8.0",
+    "prettier": "3.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.12.0",
+    "react-router-dom": "^7.13.0",
     "serve": "^14.2.5",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",

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

@@ -6,6 +6,7 @@ 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';
@@ -78,15 +79,15 @@ export default function NMRiumWrapper() {
       (loadData) => {
         switch (loadData.type) {
           case 'nmrium':
-            setData(loadData.data as NmriumData);
+            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;
           }
@@ -105,7 +106,6 @@ export default function NMRiumWrapper() {
       clearActionListener();
     };
   });
-
   return (
     <RootLayout style={styles.container}>
       {isFetchAllowedOriginsPending && (
@@ -121,7 +121,7 @@ export default function NMRiumWrapper() {
         workspace={workspace}
         emptyText={defaultEmptyMessage}
         onError={(error) => {
-          events.trigger('error', error);
+          events.trigger('error', error as Error);
         }}
         customWorkspaces={customWorkspaces}
       />

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 {
-  NmriumData,
-  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';
@@ -43,9 +40,9 @@ const PARSING_OPTIONS: Partial<ParsingOptions> = {
 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,23 +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 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;
+  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);
 
@@ -86,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) {
@@ -108,12 +113,10 @@ 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,

test-e2e/NmriumWrapperPage.ts

@@ -1,4 +1,5 @@
 import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
 
 export default class NmriumPage {
   public readonly page: Page;
@@ -11,4 +12,29 @@ export default class NmriumPage {
     await page.goto('http://localhost:3000/#/demo');
     return new NmriumPage(page);
   }
+
+  public async checkSpectraTabsIsVisible(tabs: string[]) {
+    const promises: Array<Promise<any>> = [];
+    for (const tab of tabs) {
+      promises.push(expect(this.page.locator('.tab-list-item').getByText(tab, { exact: true })).toBeVisible());
+    }
+
+    await Promise.all(promises);
+
+  }
+
+  public async dropFile(file: string | string[]) {
+    const filenames: string[] = [];
+
+    if (typeof file === 'string') {
+      filenames.push(file);
+    } else {
+      filenames.push(...file);
+    }
+
+    await this.page
+      .locator('input[type=file]')
+      .setInputFiles(filenames.map((f) => `test-e2e/data/${f}`));
+  }
+
 }

test-e2e/core.test.ts

@@ -27,12 +27,8 @@ test('should load NMRium from external Urls', async ({ page }) => {
 
   // if loaded successfully, there should be a 1H and 13C tabs
   await test.step('spectra should be loaded', async () => {
-    await expect(
-      nmrium.page.locator('.tab-list-item >> text=1H'),
-    ).toBeVisible();
-    await expect(
-      nmrium.page.locator('.tab-list-item >> text=13C'),
-    ).toBeVisible();
+    await nmrium.checkSpectraTabsIsVisible(['1H', '13C'])
+
   });
 
   // await test.step('Molecule structure should be loaded', async () => {
@@ -46,15 +42,9 @@ test('should load NMRium from Files', async ({ page }) => {
 
   // if loaded successfully, there should be a 1H and 13C tabs
   await test.step('spectra should be loaded', async () => {
-    await expect(
-      page.locator('.tab-list-item').getByText('13C', { exact: true }),
-    ).toBeVisible();
-    await expect(
-      page.locator('.tab-list-item').getByText('1H,1H', { exact: true }),
-    ).toBeVisible();
-    await expect(
-      page.locator('.tab-list-item').getByText('1H,13C', { exact: true }),
-    ).toBeVisible();
+
+    await nmrium.checkSpectraTabsIsVisible(['13C', '1H,1H', '1H,13C'])
+
   });
 
   await test.step('Molecule structure should be loaded', async () => {
@@ -78,7 +68,8 @@ test('should load NMRium from URL without .zip extension in the path', async ({
   await nmrium.page.click('text=Test Load URL without extension');
 
   // if loaded successfully, there should be a 1H
-  await expect(nmrium.page.locator('.tab-list-item >> text=1H')).toBeVisible();
+  await nmrium.checkSpectraTabsIsVisible(['1H'])
+
 });
 
 
@@ -108,10 +99,25 @@ test("Should trigger error action and load the other one that parses successfull
 
   // the error event is triggered
   expect(hasError).toBeTruthy();
+  await nmrium.checkSpectraTabsIsVisible(['1H', '13C'])
+});
 
-  // load a 1H spectrum successfully
-  await expect(nmrium.page.locator('.tab-list-item >> text=1H')).toBeVisible();
-  // load a 13C spectrum successfully
-  await expect(nmrium.page.locator('.tab-list-item >> text=13C')).toBeVisible();
 
+
+test('should load Triplinine.nmrium file', async ({
+  page,
+}) => {
+  const nmrium = await NmriumWrapperPage.create(page);
+  await nmrium.dropFile('Triplinine.nmrium');
+
+  await nmrium.checkSpectraTabsIsVisible(['1H', '1H,1H', '1H,13C'])
+});
+
+test('should load test-data.nmrium file', async ({
+  page,
+}) => {
+  const nmrium = await NmriumWrapperPage.create(page);
+  await nmrium.dropFile('test-data.nmrium');
+
+  await nmrium.checkSpectraTabsIsVisible(['1H', '13C', '1H,1H', '1H,13C'])
 });