demo: add a test view for auto processing

src/demo/samples.json

@@ -276,6 +276,11 @@
         "file": "https://cheminfo.github.io/bruker-data-test/data/zipped/aspirin-1h.zip",
         "title": "NMR Load Save",
         "view": "WebSourceView"
+      },
+      {
+        "file": "https://cheminfo.github.io/nmr-dataset-demo/oxford/ethylCrotonate.zip",
+        "title": "Auto processing",
+        "view": "AuoProcessingView"
       }
     ]
   },

src/demo/views/AuoProcessingView.tsx

@@ -0,0 +1,61 @@
+import { fileCollectionFromWebSource } from 'filelist-utils';
+import { read } from 'nmr-load-save';
+import { useState, useEffect } from 'react';
+
+import BaseView, { BaseViewProps } from './BaseView';
+import { Loading } from './Loading';
+
+export async function loadData(file) {
+  const response = await fetch(file);
+  checkStatus(response);
+  const data = await response.json();
+  return data;
+}
+
+function checkStatus(response) {
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status} - ${response.statusText}`);
+  }
+  return response;
+}
+
+interface ExternalLoadViewProps extends Omit<BaseViewProps, 'data'> {
+  file: string;
+  baseURL: string;
+}
+
+async function loadSpectrumFromURL(url) {
+  const { pathname: relativePath, origin: baseURL } = new URL(url);
+  const source = {
+    entries: [
+      {
+        relativePath,
+      },
+    ],
+    baseURL,
+  };
+  const fileCollection = await fileCollectionFromWebSource(source, {});
+
+  const { nmriumState } = await read(fileCollection, {
+    experimentalFeatures: true,
+    onLoadProcessing: { autoProcessing: true },
+  });
+  return nmriumState;
+}
+export default function ExternalLoadView(props: ExternalLoadViewProps) {
+  const [data, setData] = useState();
+
+  const { file, baseURL, ...otherProps } = props;
+
+  useEffect(() => {
+    void loadSpectrumFromURL(file).then((d: any) => {
+      setData(d);
+    });
+  }, [baseURL, file]);
+
+  if (!data) {
+    return <Loading />;
+  }
+
+  return <BaseView {...otherProps} data={data} />;
+}

src/demo/views/Loading.tsx

@@ -0,0 +1,50 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+const style = css`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #f4f4f4;
+
+  #title {
+    padding: 20px 0;
+  }
+
+  #title strong:first-child {
+    color: #c25a00;
+  }
+
+  #loader {
+    border: 1px solid #f3f3f3;
+    border-top: 3px solid #c25a00;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 0.6s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export function Loading() {
+  return (
+    <div css={style}>
+      <span id="title">
+        <strong>NMR</strong>
+        <strong>ium</strong> loading ...
+      </span>
+      <div id="loader" />
+    </div>
+  );
+}

src/demo/views/index.ts

@@ -13,4 +13,5 @@ export const possibleViews = {
   CustomWorkspace: memo(lazy(() => import('./CustomWorkspace'))),
   SnapshotView: memo(lazy(() => import('./SnapshotView'))),
   WebSourceView: memo(lazy(() => import('./WebSourceView'))),
+  AuoProcessingView: memo(lazy(() => import('./AuoProcessingView'))),
 };