feat: add hook to load data from filelist URL

Closes: #365

package.json

@@ -66,6 +66,7 @@
     "@headlessui/react": "^1.7.4",
     "@lukeed/uuid": "^2.0.0",
     "@popperjs/core": "^2.11.6",
+    "@tanstack/react-query": "^4.16.1",
     "@tanstack/react-table": "^8.5.30",
     "biologic-converter": "^0.5.0",
     "cheminfo-types": "^1.4.0",

src/app/hooks/file-loading.ts

@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query';
+import { FileCollection, fileCollectionFromWebservice } from 'filelist-utils';
+import { useCallback } from 'react';
+
+import { AppDispatch, useAppDispatch } from '../../app-data/index';
+import { useHashSearchParams } from '../../components/index';
+
+type LoadFn = (
+  files: File[] | FileCollection,
+  dispatch: AppDispatch,
+) => Promise<void>;
+
+export function useLoadFileCollectionFromHash(onLoad: LoadFn) {
+  const appDispatch = useAppDispatch();
+  const hashParams = useHashSearchParams();
+  const filelistUrl = hashParams.get('filelist');
+  const query = useQuery({
+    queryKey: ['filelist', filelistUrl],
+    queryFn: async () => {
+      if (!filelistUrl) {
+        return null;
+      }
+      const fileCollection = await fileCollectionFromWebservice(filelistUrl);
+      void onLoad(fileCollection, appDispatch);
+    },
+  });
+  return query;
+}
+
+export function useDropFiles(onLoad: LoadFn) {
+  const dispatch = useAppDispatch();
+  const onDrop = useCallback(
+    (files: File[]) => {
+      void onLoad(files, dispatch);
+    },
+    [dispatch, onLoad],
+  );
+  return onDrop;
+}

src/components/root-layout/RootLayout.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { Global } from '@emotion/react';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactNode, CSSProperties, useState, useCallback } from 'react';
 import root from 'react-shadow/emotion.esm';
 
@@ -8,6 +9,7 @@ import { AccordionProvider } from '../accordion/AccordionContext';
 import { RootLayoutProvider } from './RootLayoutContext';
 import { customDivPreflight } from './css-reset/customPreflight';
 import { preflight } from './css-reset/preflight';
+import { queryClient } from './queryClient';
 
 interface RootLayoutProps {
   style?: CSSProperties;
@@ -40,7 +42,9 @@ export function RootLayout(props: RootLayoutProps) {
         style={{ width: '100%', height: '100%', position: 'relative' }}
       >
         <RootLayoutProvider innerRef={rootRef}>
-          <AccordionProvider>{props.children}</AccordionProvider>
+          <QueryClientProvider client={queryClient}>
+            <AccordionProvider>{props.children}</AccordionProvider>
+          </QueryClientProvider>
         </RootLayoutProvider>
       </div>
     </root.div>

src/components/root-layout/queryClient.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+});

src/pages/big-map/MainLayout.tsx

@@ -6,6 +6,10 @@ import {
   useAppDispatch,
   useAppState,
 } from '../../app-data/index';
+import {
+  useDropFiles,
+  useLoadFileCollectionFromHash,
+} from '../../app/hooks/file-loading';
 import {
   MeasurementInfoPanel,
   MeasurementsPanel,
@@ -22,7 +26,7 @@ import {
 } from '../../components/index';
 import { assert } from '../../utils/assert';
 
-import { useLoadFiles } from './hooks/useLoadFiles';
+import { loadFiles } from './helpers/loadFiles';
 
 const mainCss = {
   root: css`
@@ -58,7 +62,8 @@ export default function MainLayout() {
   const measurement = getCurrentMeasurementData(appState);
   assert(!measurement || measurement.kindAndId.kind === 'iv');
 
-  const loadFiles = useLoadFiles();
+  useLoadFileCollectionFromHash(loadFiles);
+  const onDrop = useDropFiles(loadFiles);
 
   return (
     <div css={mainCss.root}>
@@ -83,7 +88,7 @@ export default function MainLayout() {
             controlledSide="end"
           >
             <div css={mainCss.measurement}>
-              <DropZoneContainer onDrop={loadFiles}>
+              <DropZoneContainer onDrop={onDrop}>
                 {measurement ? (
                   <IvMainView
                     measurement={measurement.data}

src/pages/big-map/helpers/loadFiles.ts

@@ -0,0 +1,27 @@
+import { FileCollection, fileCollectionFromFiles } from 'filelist-utils';
+
+import {
+  loadMeasurements,
+  biologicLoader,
+  AppDispatch,
+} from '../../../app-data/index';
+
+const options = {
+  loaders: [biologicLoader],
+};
+
+export async function loadFiles(
+  files: File[] | FileCollection,
+  dispatch: AppDispatch,
+) {
+  try {
+    const fileCollection =
+      files instanceof FileCollection
+        ? files
+        : await fileCollectionFromFiles(files);
+    const { measurements } = await loadMeasurements(fileCollection, options);
+    dispatch({ type: 'ADD_MEASUREMENTS', payload: measurements });
+  } catch (error) {
+    reportError(error);
+  }
+}

src/pages/demo/MainLayout.tsx

@@ -1,5 +1,3 @@
-import { fileCollectionFromWebservice } from 'filelist-utils';
-import { useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import {
   FaBook,
@@ -18,6 +16,10 @@ import {
   useAppDispatch,
   useAppState,
 } from '../../app-data/index';
+import {
+  useLoadFileCollectionFromHash,
+  useDropFiles,
+} from '../../app/hooks/file-loading';
 import {
   MeasurementInfoPanel,
   MeasurementsPanel,
@@ -31,10 +33,9 @@ import {
   Header,
   SplitPane,
   Toolbar,
-  useHashSearchParams,
 } from '../../components/index';
 
-import { useLoadFiles } from './hooks/useLoadFiles';
+import { loadFiles } from './helpers/loadFiles';
 
 function ErrorFallback({ error, resetErrorBoundary }) {
   return (
@@ -48,13 +49,12 @@ function ErrorFallback({ error, resetErrorBoundary }) {
   );
 }
 
-export default function DropZoneArea() {
+export default function MainLayout() {
   const dispatch = useAppDispatch();
   const appState = useAppState();
   const measurement = getCurrentMeasurementData(appState);
-  const hashSearchParams = useHashSearchParams();
-  const fileListParam = hashSearchParams.get('filelist');
-  const loadFiles = useLoadFiles();
+  useLoadFileCollectionFromHash(loadFiles);
+  const onDrop = useDropFiles(loadFiles);
 
   function saveHandler(filename = 'file', spaceIndent = 0) {
     const data = JSON.stringify(
@@ -74,15 +74,6 @@ export default function DropZoneArea() {
       },
     },
   ]);
-  useEffect(() => {
-    async function getData(url: string | null) {
-      if (url) {
-        const fileCollection = await fileCollectionFromWebservice(url);
-        loadFiles(fileCollection);
-      }
-    }
-    void getData(fileListParam);
-  }, [loadFiles, fileListParam]);
   return (
     <div
       style={{
@@ -155,7 +146,7 @@ export default function DropZoneArea() {
                   height: '100%',
                 }}
               >
-                <DropZoneContainer onDrop={loadFiles}>
+                <DropZoneContainer onDrop={onDrop}>
                   {measurement ? <ExplorerMainView /> : null}
                 </DropZoneContainer>
               </div>

src/pages/demo/hooks/useLoadFiles.ts → src/pages/demo/helpers/loadFiles.ts

@@ -1,12 +1,10 @@
 import { FileCollection, fileCollectionFromFiles } from 'filelist-utils';
-import { useCallback } from 'react';
 
 import {
   getIRAutoPeakPickingEnhancer,
   irMeasurementEnhancer,
   AppDispatch,
   AppState,
-  useAppDispatch,
   biologicLoader,
   cdfLoader,
   jcampLoader,
@@ -33,7 +31,7 @@ const options = {
   },
 };
 
-async function doLoadFiles(
+export async function loadFiles(
   files: File[] | FileCollection,
   dispatch: AppDispatch,
 ) {
@@ -57,13 +55,3 @@ async function doLoadFiles(
     reportError(error);
   }
 }
-
-export function useLoadFiles() {
-  const dispatch = useAppDispatch();
-  return useCallback(
-    (files: File[] | FileCollection) => {
-      void doLoadFiles(files, dispatch);
-    },
-    [dispatch],
-  );
-}

src/pages/demo/main.tsx

@@ -44,7 +44,10 @@ createRoot(document.querySelector('#root') as HTMLDivElement).render(
         <a href="#?filelist=https%3A%2F%2Fzakodium-oss.github.io%2Fanalysis-dataset%2Ffull.json">
           All the data we have
         </a>
-        <a href="big-map.html">BIG-MAP application</a>
+        <a href="big-map.html">BIG-MAP App</a>
+        <a href="big-map.html#?filelist=https%3A%2F%2Fzakodium-oss.github.io%2Fanalysis-dataset%2Fbiologic.json">
+          BIG-MAP App + Data
+        </a>
         {import.meta.env.PROD ? (
           <a href={`${import.meta.env.BASE_URL}stories/`}>Open stories</a>
         ) : null}