Merge pull request #50 from NFDI4Chem/development

Development

Author: vcnainala

package-lock.json

@@ -13,10 +13,10 @@
     "node": "16.15.0"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.4",
-    "filelist-utils": "^0.12.0",
-    "nmr-load-save": "^0.3.0",
-    "nmrium": "^0.32.0",
+    "@emotion/react": "^11.10.5",
+    "filelist-utils": "^1.1.1",
+    "nmr-load-save": "^0.4.6",
+    "nmrium": "^0.33.0",
     "react-router-dom": "^6.4.2"
   },
   "scripts": {
@@ -35,35 +35,35 @@
     "test-e2e-server": "serve -l tcp://localhost:3000 build"
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.19.6",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@playwright/test": "^1.27.1",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@types/jest": "^29.1.2",
-    "@types/node": "^18.8.5",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "@vitejs/plugin-react": "^2.2.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.25.0",
+    "eslint": "^8.26.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.1.2",
+    "jest": "^29.2.2",
     "prettier": "2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "serve": "^14.0.1",
     "typescript": "^4.8.4",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   }
 }

package.json

@@ -45,7 +45,6 @@ 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',
-                'https://nmrxiv.org/NRayya/datasets/fsu-nmr-platform-samples/cucurbitacin-e/12',
                 '../data/13c.zip',
               ],
               type: 'url',

src/demo/NMRiumWrapperDemo.tsx

@@ -1,6 +1,6 @@
 import { NMRiumData } from 'nmrium';
 import { State } from 'nmrium/lib/component/reducer/Reducer';
-import { BlobObject } from 'nmrium/lib/component/utility/Export';
+import { BlobObject } from 'nmrium/lib/component/utility/export';
 
 type EventType =
   | 'load'

src/events/types.ts

@@ -1,10 +1,10 @@
 import { useCallback, useMemo, useState } from 'react';
 import { read } from 'nmr-load-save';
-import { fileCollectionFromFiles } from 'filelist-utils';
 import { Spectrum } from 'nmr-load-save/lib/types/Spectra/Spectrum';
 import events from '../events';
 import { isArrayOfString } from '../utilities/isArrayOfString';
 import { loadFilesFromURLs } from '../utilities/loadFilesFromURLs';
+import { createFileCollectionFromFiles } from '../utilities/createFileCollection';
 
 export function useLoadSpectra() {
   const [data, setData] = useState<{
@@ -28,9 +28,8 @@ export function useLoadSpectra() {
         } else if ('files' in options) {
           inputFiles = options.files;
         }
-
-        const fileCollection = await fileCollectionFromFiles(inputFiles);
-
+        // 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) {

src/hooks/useLoadSpectra.ts

@@ -0,0 +1,34 @@
+import { FileCollection, FileCollectionItem } from 'filelist-utils';
+import {
+  maybeFilter,
+  FilterOptions,
+} from 'filelist-utils/lib/utilities/maybeFilter';
+import { maybeExpand } from 'filelist-utils/lib/utilities/maybeExpand';
+import { ExpandOptions } from 'filelist-utils/lib/ExpandOptions';
+
+export async function createFileCollectionFromFiles(
+  files: File[],
+  options: FilterOptions & ExpandOptions = {},
+) {
+  let fileCollections: FileCollectionItem[] = [];
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const file of files) {
+    const data: FileCollectionItem = {
+      name: file.name,
+      size: file.size,
+      arrayBuffer: () => file.arrayBuffer(),
+      relativePath: file.webkitRelativePath || file.name,
+      lastModified: Date.now(),
+      stream: () => file.stream(),
+      text: () => file.text(),
+    };
+
+    fileCollections.push(data);
+  }
+
+  fileCollections = await maybeExpand(fileCollections, options);
+  fileCollections = await maybeFilter(fileCollections, options);
+
+  return new FileCollection(fileCollections);
+}

src/utilities/createFileCollection.ts

@@ -23,6 +23,8 @@ test('should load NMRium from external Urls', async ({ page }) => {
 
   await nmrium.page.click('text=Test Load from URLS');
 
+  await page.locator('text=Loading').waitFor({ state: 'hidden' });
+
   // if loaded successfully, there should be a 1H and 13C tabs
   await test.step('spectra should be loaded', async () => {
     await expect(