Development

Dockerfile.dev

@@ -1,5 +1,5 @@
 # build environment
-FROM node:22-alpine3.18 AS build
+FROM node:24-alpine3.22 AS build
 
 WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH

Dockerfile.prod

@@ -1,5 +1,5 @@
 # Build stage
-FROM node:22-alpine3.18 AS builder
+FROM node:24-alpine3.22 AS builder
 
 # Declare build argument
 ARG RELEASE_VERSION

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.12.1",
+    "@blueprintjs/icons": "^6.9.1",
+    "@blueprintjs/select": "^6.1.10",
     "@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": "^6.0.1",
+    "@zakodium/nmrium-core": "^0.7.16",
+    "@zakodium/nmrium-core-plugins": "^0.7.20",
     "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.10.0",
+    "nmrium": "^2.1.0",
+    "openchemlib": "^9.22.1",
+    "react-science": "^19.11.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.59.1",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.3.0",
+    "@types/node": "^25.6.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": "^20.0.1",
+    "eslint-config-cheminfo-typescript": "^22.0.0",
+    "jest": "^30.3.0",
+    "prettier": "3.8.3",
     "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.14.2",
+    "serve": "^14.2.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10",
+    "vite-plugin-pwa": "https://pkg.pr.new/vite-plugin-pwa@924"
   }
-}
+}

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/Loadingindicator.tsx

@@ -0,0 +1,45 @@
+import { Spinner } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+
+const Overlay = styled.div`
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  gap: 12px;
+  user-select: none;
+  -webkit-user-select: none;
+`;
+
+const Label = styled.span`
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #6b7280;
+`;
+
+interface LoadingIndicatorProps {
+  label?: string;
+  visible: boolean;
+}
+
+export function LoadingIndicator({
+  label = 'Loading',
+  visible,
+}: LoadingIndicatorProps) {
+  if (!visible) return null;
+
+  return (
+    <Overlay>
+      <Spinner size={36} />
+      <Label>{label}</Label>
+    </Overlay>
+  );
+}

src/NMRiumWrapper.tsx

@@ -1,60 +1,37 @@
-import type { NMRiumChangeCb, NMRiumData, NMRiumRefAPI } from 'nmrium';
+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 { LoadingIndicator } from './Loadingindicator.js';
 import events from './events/event.js';
 import { useLoadSpectra } from './hooks/useLoadSpectra.js';
 import { usePreferences } from './hooks/usePreferences.js';
 import { useWhiteList } from './hooks/useWhiteList.js';
 import AboutUsModal from './modal/AboutUsModal.js';
 
-const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
-  container: {
-    height: '100%',
-    width: '100%',
-    position: 'relative',
-  },
-
-  loadingContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#ffffffc9',
-    fontSize: '1.4em',
-    userSelect: 'none',
-    WebkitUserSelect: 'none',
-  },
+const containerStyle: CSSProperties = {
+  height: '100%',
+  width: '100%',
+  position: 'relative',
 };
 
 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) => {
-    events.trigger('data-change', {
-      state,
-      source,
-    });
-  }, []);
 
-  const { load: loadSpectra, isLoading, data: loadedData } = useLoadSpectra();
+  const { load: loadSpectra, data, isLoading } = useLoadSpectra();
 
-  useEffect(() => {
-    if (!isLoading) {
-      setDate(loadedData as unknown as NMRiumData);
+  const dataChangeHandler = useCallback<NMRiumChangeCb>((state, source) => {
+    // avoid triggering data-change event for SET_2D_LEVEL action, This should be handled internally in NMRium
+    if (source === 'view' && state.data.actionType === 'SET_2D_LEVEL') {
+      return;
     }
-  }, [isLoading, loadedData]);
+    events.trigger('data-change', { state, source });
+  }, []);
 
   useEffect(() => {
     const clearActionListener = events.on(
@@ -73,33 +50,36 @@ export default function NMRiumWrapper() {
           }
           default: {
             throw new Error(
-              `ERROR! Property 'type' accept only 'exportViewerAsBlob'.`,
+              `ERROR! Property 'type' accepts only 'exportViewerAsBlob'.`,
             );
           }
         }
       },
       { allowedOrigins },
     );
+
     const clearLoadListener = events.on(
       'load',
       (loadData) => {
         switch (loadData.type) {
-          case 'nmrium':
-            setDate(loadData.data);
+          case 'nmrium': {
+            const { data, activeTab = '' } = loadData;
+            void loadSpectra({ nmrium: data, activeTab });
             break;
+          }
           case 'file': {
-            const { data: files, activeTab } = loadData;
-            loadSpectra({ files, activeTab });
+            const { data: files, activeTab = '' } = loadData;
+            void loadSpectra({ files, activeTab });
             break;
           }
           case 'url': {
-            const { data: urls, activeTab } = loadData;
-            loadSpectra({ urls, activeTab });
+            const { data: urls, activeTab = '' } = loadData;
+            void loadSpectra({ urls, activeTab });
             break;
           }
           default: {
             throw new Error(
-              `ERROR! Property 'type' accept only nmrium, url or file.`,
+              `ERROR! Property 'type' accepts only 'nmrium', 'url', or 'file'.`,
             );
           }
         }
@@ -113,28 +93,25 @@ export default function NMRiumWrapper() {
     };
   });
 
+  const isShowingOverlay = isFetchAllowedOriginsPending || isLoading;
+
   return (
-    <RootLayout style={styles.container}>
-      {isFetchAllowedOriginsPending && (
-        <div style={styles.loadingContainer}>
-          <span>Loading .... </span>
-        </div>
-      )}
+    <RootLayout style={containerStyle}>
+      <LoadingIndicator visible={isShowingOverlay} />
       <NMRium
         ref={nmriumRef}
-        data={data}
+        state={data?.state}
+        aggregator={data?.aggregator}
         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/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/events/types.ts

@@ -26,6 +26,7 @@ type LoadData =
   | {
       data: NMRiumData;
       type: 'nmrium';
+      activeTab?: string;
     };
 
 interface ActionRequest {