feat: update to nmrium pre-relase 0.33.0-pre.1674466111

Author: hamed-musallam

package-lock.json

@@ -15,9 +15,9 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@vitejs/plugin-react-swc": "^3.0.1",
-    "filelist-utils": "^1.1.1",
-    "nmr-load-save": "^0.4.8",
-    "nmrium": "^0.33.0-pre.1667755480",
+    "filelist-utils": "^1.5.1",
+    "nmr-load-save": "^0.7.14",
+    "nmrium": "^0.33.0-pre.1674466111",
     "react-router-dom": "^6.7.0"
   },
   "scripts": {

package.json

@@ -3,6 +3,7 @@ import { useEffect, useState, useCallback, CSSProperties, useRef } from 'react';
 import events from './events';
 import { usePreferences } from './hooks/usePreferences';
 import { useLoadSpectra } from './hooks/useLoadSpectra';
+import { mapSourceObject } from './utilities/mapSourceObject';
 
 const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
   container: {
@@ -33,7 +34,9 @@ export default function NMRiumWrapper() {
   const nmriumRef = useRef<NMRiumRef>(null);
   const [data, setDate] = useState<NMRiumData>();
   const { workspace, preferences } = usePreferences();
-  const dataChangeHandler = useCallback((nmriumData) => {
+  const dataChangeHandler = useCallback((nmriumData: any) => {
+    // eslint-disable-next-line no-param-reassign
+    nmriumData.data.spectra = mapSourceObject(nmriumData.data.spectra);
     events.trigger('data-change', nmriumData);
   }, []);
 

src/NMRiumWrapper.tsx

@@ -45,7 +45,9 @@ export default function NMRiumWrapperDemo() {
                 'https://cheminfo.github.io/nmr-dataset-demo/cytisine/13c.jdx',
                 'https://cheminfo.github.io/nmr-dataset-demo/cytisine/1h.jdx',
                 'https://cheminfo.github.io/bruker-data-test/data/zipped/aspirin-1h.zip',
-                '../data/13c.zip',
+                // '../data/13c.zip',
+                // 'https://cloud.uni-jena.de/s/y72GbCX8bJbmpJT/download/10.zip',
+                // 'https://cloud.uni-jena.de/s/jsMed9fmqWZzo6r/download/53.zip',
               ],
               type: 'url',
             });

src/demo/NMRiumWrapperDemo.tsx

@@ -1,5 +1,4 @@
-import { NMRiumData } from 'nmrium';
-import { State } from 'nmrium/lib/component/reducer/Reducer';
+import { NMRiumData, NMRiumDataReturn } from 'nmrium';
 import { BlobObject } from 'nmrium/lib/component/utility/export';
 
 type EventType =
@@ -34,7 +33,7 @@ type ActionResponse = {
 };
 
 type EventData<T extends EventType> = T extends 'data-change'
-  ? State
+  ? NMRiumDataReturn
   : T extends 'load'
   ? LoadData
   : T extends 'action-request'

src/events/types.ts

@@ -1,10 +1,45 @@
 import { useCallback, useMemo, useState } from 'react';
-import { read } from 'nmr-load-save';
+import { read, readSource, Source } from 'nmr-load-save';
 import { Spectrum } from 'nmr-load-save/lib/types/Spectra/Spectrum';
+import { fileCollectionFromFiles } from 'filelist-utils';
 import events from '../events';
 import { isArrayOfString } from '../utilities/isArrayOfString';
-import { loadFilesFromURLs } from '../utilities/loadFilesFromURLs';
-import { createFileCollectionFromFiles } from '../utilities/createFileCollection';
+import { getFileNameFromURL } from '../utilities/getFileNameFromURL';
+
+async function loadSpectraFromFiles(files: File[]) {
+  // TODO use the new function from filelist-utils once they solve the problem of create filesCollection from files with empty webkitrelativepath
+  const fileCollection = await fileCollectionFromFiles(files);
+  const result = await read(fileCollection);
+  // eslint-disable-next-line no-restricted-syntax
+  for (const spectrum of result.data.spectra) {
+    spectrum.source = {} as Source;
+  }
+  return result;
+}
+
+async function loadSpectraFromURLs(urls: string[]) {
+  const promises = urls.map((url) => {
+    const refURL = new URL(url);
+    let name = getFileNameFromURL(url);
+    const hasExtension = name && name.indexOf('.') !== -1;
+    if (!hasExtension) {
+      name = `${name}.zip`;
+    }
+    return readSource({
+      baseURL: refURL.origin,
+      files: [{ relativePath: refURL.pathname, name }],
+    });
+  }, []);
+  const results = await Promise.all(promises);
+  const spectra: any[] = [];
+  const molecules: any[] = [];
+  // eslint-disable-next-line no-restricted-syntax
+  for (const result of results) {
+    spectra.push(...result.data.spectra);
+    molecules.push(...result.data.spectra);
+  }
+  return { spectra, molecules };
+}
 
 export function useLoadSpectra() {
   const [data, setData] = useState<{
@@ -17,21 +52,22 @@ export function useLoadSpectra() {
     async (options: { urls: string[] } | { files: File[] }) => {
       setLoading(true);
       try {
-        let inputFiles: File[] = [];
-
         if ('urls' in options) {
           if (isArrayOfString(options.urls)) {
-            inputFiles = await loadFilesFromURLs(options.urls);
+            const { spectra, molecules } = await loadSpectraFromURLs(
+              options.urls,
+            );
+            setData({ spectra, molecules });
           } else {
-            throw new Error('The input must be string[] ');
+            throw new Error('The input must be a valid urls array of string[]');
           }
         } else if ('files' in options) {
-          inputFiles = options.files;
+          // TODO use the new function from filelist-utils once they solve the problem of create filesCollection from files with empty webkitrelativepath
+          const {
+            data: { spectra, molecules },
+          } = await loadSpectraFromFiles(options.files);
+          setData({ spectra, molecules });
         }
-        // TODO use the new function from filelist-utils once they solve the problem of create filesCollection from files with empty webkitrelativepath
-        const fileCollection = await createFileCollectionFromFiles(inputFiles);
-        const { spectra, molecules } = await read(fileCollection);
-        setData({ spectra, molecules });
       } catch (error: any) {
         events.trigger('error', error);
         // eslint-disable-next-line no-console

src/hooks/useLoadSpectra.ts

@@ -3,15 +3,15 @@ import { useLayoutEffect, useState } from 'react';
 
 export function usePreferences() {
   const [configuration, setConfiguration] = useState<{
-    preferences: NMRiumPreferences;
+    preferences: any;
     workspace: NMRiumWorkspace;
   }>({ preferences: {}, workspace: 'default' });
 
   useLayoutEffect(() => {
     const { href } = window.location;
     const parameters = new URL(href).searchParams;
 
-    let preferences: NMRiumPreferences = {};
+    let preferences: any | undefined;
     let workspace: NMRiumWorkspace = 'default';
 
     if (parameters.has('workspace')) {

src/hooks/usePreferences.ts

@@ -0,0 +1,18 @@
+import { Spectrum1D } from 'nmr-load-save/lib/types/Spectra/Spectrum1D';
+import { Spectrum2D } from 'nmr-load-save/lib/types/Spectra/Spectrum2D';
+
+export function mapSourceObject(inputSpectra: (Spectrum1D | Spectrum2D)[]) {
+  const spectra = inputSpectra.slice();
+  // eslint-disable-next-line no-restricted-syntax
+  for (const spectrum of spectra) {
+    if (spectrum.source) {
+      const files = spectrum.source?.files?.map((file) => {
+        const { name, relativePath, size = -1, lastModified = 0 } = file as any;
+        return { name, relativePath, size, lastModified };
+      }, []);
+
+      spectrum.source = { ...spectrum.source, files };
+    }
+  }
+  return spectra;
+}