Development

.eslintignore

@@ -5,3 +5,4 @@ build
 src/*.json
 vite.config.*
 lib
+coverage

package.json

@@ -3,23 +3,24 @@
   "version": "0.4.0",
   "private": false,
   "license": "MIT",
-  "main": "lib-cjs/NMRiumWrapper.js",
+  "main": "lib/NMRiumWrapper.js",
   "module": "lib/NMRiumWrapper.js",
   "files": [
-    "lib",
-    "lib-cjs"
+    "lib"
   ],
   "volta": {
     "node": "20.2.0"
   },
   "dependencies": {
+    "@blueprintjs/core": "^5.7.2",
+    "@blueprintjs/icons": "^5.5.0",
     "@emotion/react": "^11.11.1",
     "filelist-utils": "^1.10.2",
-    "nmr-load-save": "^0.21.0",
-    "nmr-processing": "^11.2.0",
-    "nmrium": "0.44.1-pre.1696502379",
-    "react-science": "^0.27.0",
-    "vite-plugin-pwa": "^0.16.5"
+    "nmr-load-save": "^0.23.11",
+    "nmr-processing": "^11.7.0",
+    "nmrium": "^0.46.1",
+    "react-science": "^0.32.2",
+    "vite-plugin-pwa": "^0.17.4"
   },
   "scripts": {
     "start": "vite --host localhost --port 3000  --open",
@@ -29,36 +30,36 @@
     "test": "jest --coverage",
     "eslint": "eslint . --cache",
     "eslint-fix": "npm run eslint -- --fix",
-    "compile": "tsc --project tsconfig.esm.json && tsc --project tsconfig.cjs.json",
+    "compile": "tsc --project tsconfig.esm.json",
     "check-types": "tsc --project tsconfig.esm.json",
     "prettier": "prettier --check src",
     "prettier-write": "prettier --write src",
     "test-e2e": "playwright test --project chromium",
     "test-e2e-server": "serve -l tcp://localhost:3000 build"
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.23.0",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.0",
-    "@playwright/test": "^1.38.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@playwright/test": "^1.40.1",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@types/jest": "^29.5.5",
-    "@types/node": "^20.8.2",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.10",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.4.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.50.0",
-    "eslint-config-cheminfo-react": "^10.0.0",
-    "eslint-config-cheminfo-typescript": "^12.0.4",
+    "eslint": "^8.56.0",
+    "eslint-config-cheminfo-react": "^10.1.0",
+    "eslint-config-cheminfo-typescript": "^12.1.0",
     "jest": "^29.7.0",
-    "prettier": "3.0.3",
+    "prettier": "3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.21.0",
     "serve": "^14.2.1",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.11"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
   }
-}
+}

src/NMRiumWrapper.tsx

@@ -39,7 +39,10 @@ export default function NMRiumWrapper() {
 
   const { workspace, preferences, defaultEmptyMessage } = usePreferences();
   const dataChangeHandler = useCallback<NMRiumChangeCb>((state, source) => {
-    events.trigger('data-change', { state, source });
+    events.trigger('data-change', {
+      state,
+      source,
+    });
   }, []);
 
   const { load: loadSpectra, isLoading, data: loadedData } = useLoadSpectra();
@@ -82,10 +85,10 @@ export default function NMRiumWrapper() {
             setDate(loadData.data);
             break;
           case 'file':
-            void loadSpectra({ files: loadData.data });
+            loadSpectra({ files: loadData.data });
             break;
           case 'url':
-            void loadSpectra({ urls: loadData.data });
+            loadSpectra({ urls: loadData.data });
             break;
 
           default: {
@@ -119,6 +122,9 @@ export default function NMRiumWrapper() {
         preferences={preferences}
         workspace={workspace}
         emptyText={defaultEmptyMessage}
+        onError={(error) => {
+          events.trigger('error', error);
+        }}
       />
       <AboutUsModal />
     </RootLayout>

src/events/types.ts

@@ -40,12 +40,12 @@ interface DataChange {
 type EventData<T extends EventType> = T extends 'data-change'
   ? DataChange
   : T extends 'load'
-  ? LoadData
-  : T extends 'action-request'
-  ? ActionRequest
-  : T extends 'action-response'
-  ? ActionResponse
-  : T extends 'error'
-  ? Error
-  : never;
+    ? LoadData
+    : T extends 'action-request'
+      ? ActionRequest
+      : T extends 'action-response'
+        ? ActionResponse
+        : T extends 'error'
+          ? Error
+          : never;
 export type { EventType, EventData };

src/hooks/useLoadSpectra.ts

@@ -4,20 +4,25 @@ import {
   readFromWebSource,
   NmriumState,
   CURRENT_EXPORT_VERSION,
+  ParsingOptions,
 } from 'nmr-load-save';
 import { useCallback, useMemo, useState } from 'react';
 
 import events from '../events';
-import { appendFilters } from '../utilities/appendFilters';
 import { getFileNameFromURL } from '../utilities/getFileNameFromURL';
 import { isArrayOfString } from '../utilities/isArrayOfString';
 
+const PARSING_OPTIONS: Partial<ParsingOptions> = {
+  onLoadProcessing: { autoProcessing: true },
+  sourceSelector: { general: { dataSelection: 'preferFT' } },
+};
+
 async function loadSpectraFromFiles(files: File[]) {
   const fileCollection = await fileCollectionFromFiles(files);
 
   const {
     nmriumState: { data },
-  } = await read(fileCollection);
+  } = await read(fileCollection, PARSING_OPTIONS);
   return data;
 }
 
@@ -33,48 +38,47 @@ async function loadSpectraFromURLs(urls: string[]) {
     return { relativePath: path, baseURL: refURL.origin };
   }, []);
 
-  const { data } = await readFromWebSource({ entries });
+  const { data } = await readFromWebSource({ entries }, PARSING_OPTIONS);
   return data;
 }
 
 type NMRiumData = NmriumState['data'];
 
-export function useLoadSpectra() {
+type LoadOptions = { urls: string[] } | { files: File[] };
+
+interface UseLoadSpectraResult {
+  data: { version: number; data: NMRiumData };
+  load: (options: LoadOptions) => void;
+  isLoading: boolean;
+}
+
+export function useLoadSpectra(): UseLoadSpectraResult {
   const [data, setData] = useState<NMRiumData>({ spectra: [], molecules: [] });
   const [isLoading, setLoading] = useState<boolean>(false);
 
-  const load = useCallback(
-    async (options: { urls: string[] } | { files: File[] }) => {
-      setLoading(true);
-      try {
-        if ('urls' in options) {
-          if (isArrayOfString(options.urls)) {
-            const result = await loadSpectraFromURLs(options.urls);
-            if (result?.spectra) {
-              appendFilters(result?.spectra);
-            }
-            setData(result as NMRiumData);
-          } 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);
-          if (result?.spectra) {
-            appendFilters(result?.spectra);
-          }
+  const load = useCallback(async (options: LoadOptions) => {
+    setLoading(true);
+    try {
+      if ('urls' in options) {
+        if (isArrayOfString(options.urls)) {
+          const result = await loadSpectraFromURLs(options.urls);
           setData(result as NMRiumData);
+        } else {
+          throw new Error('The input must be a valid urls array of string[]');
         }
-      } catch (error: unknown) {
-        const loadError = error as Error;
-        events.trigger('error', loadError);
-        // eslint-disable-next-line no-console
-        console.log(error);
-      } finally {
-        setLoading(false);
+      } else if ('files' in options) {
+        const result = await loadSpectraFromFiles(options.files);
+        setData(result as NMRiumData);
       }
-    },
-    [],
-  );
+    } catch (error: unknown) {
+      const loadError = error as Error;
+      events.trigger('error', loadError);
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
 
   return useMemo(
     () => ({

src/index.tsx

@@ -1,4 +1,6 @@
 import 'react-science/styles/preflight.css';
+import '@blueprintjs/core/lib/css/blueprint.css';
+import '@blueprintjs/icons/lib/css/blueprint-icons.css';
 
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router, Route, Routes } from 'react-router-dom';
@@ -21,10 +23,6 @@ const updateSW = registerSW({
       void updateSW(true);
     }
   },
-  onOfflineReady() {
-    // eslint-disable-next-line no-alert
-    window.alert('NMRium wrapper is ready to run in offline mode');
-  },
 });
 
 const root = createRoot(rootContainer);