Use zustand store inside suspense fetch store to track progress

silx-kit · Aug 20, 2024 · 992975c · 992975c
1 parent 43dfe40
commit 992975c
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 71 deletions.
diff --git a/packages/app/src/__tests__/Explorer.test.tsx b/packages/app/src/__tests__/Explorer.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { expect, test } from 'vitest';
 
-import { SLOW_TIMEOUT } from '../providers/mock/mock-api';
+import { SLOW_TIMEOUT } from '../providers/mock/utils';
 import { renderApp } from '../test-utils';
 
 test('select root group by default', async () => {

diff --git a/packages/app/src/__tests__/NexusPack.test.tsx b/packages/app/src/__tests__/NexusPack.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { expect, test } from 'vitest';
 
-import { SLOW_TIMEOUT } from '../providers/mock/mock-api';
+import { SLOW_TIMEOUT } from '../providers/mock/utils';
 import {
   getSelectedVisTab,
   getVisTabs,

diff --git a/packages/app/src/__tests__/Visualizer.test.tsx b/packages/app/src/__tests__/Visualizer.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { expect, test } from 'vitest';
 
-import { SLOW_TIMEOUT } from '../providers/mock/mock-api';
+import { SLOW_TIMEOUT } from '../providers/mock/utils';
 import { mockConsoleMethod, renderApp } from '../test-utils';
 import { Vis } from '../vis-packs/core/visualizations';
 

diff --git a/packages/app/src/providers/DataProvider.tsx b/packages/app/src/providers/DataProvider.tsx
@@ -11,7 +11,6 @@ import type {
   AttrName,
   AttrValuesStore,
   EntitiesStore,
-  ProgressCallback,
   ValuesStore,
 } from './models';
 
@@ -24,8 +23,6 @@ export interface DataContextValue {
 
   // Undocumented
   getExportURL?: DataProviderApi['getExportURL'];
-  addProgressListener: (cb: ProgressCallback) => void;
-  removeProgressListener: (cb: ProgressCallback) => void;
   getSearchablePaths?: DataProviderApi['getSearchablePaths'];
 }
 
@@ -92,8 +89,6 @@ function DataProvider(props: PropsWithChildren<Props>) {
         valuesStore,
         attrValuesStore,
         getExportURL: api.getExportURL?.bind(api),
-        addProgressListener: api.addProgressListener.bind(api),
-        removeProgressListener: api.removeProgressListener.bind(api),
         getSearchablePaths: api.getSearchablePaths?.bind(api),
       }}
     >

diff --git a/packages/app/src/providers/api.ts b/packages/app/src/providers/api.ts
@@ -1,4 +1,3 @@
-/* eslint-disable promise/prefer-await-to-callbacks */
 import type {
   ArrayShape,
   AttributeValues,
@@ -7,6 +6,7 @@ import type {
   ProvidedEntity,
   Value,
 } from '@h5web/shared/hdf5-models';
+import type { OnProgress } from '@h5web/shared/react-suspense-fetch';
 import type {
   AxiosInstance,
   AxiosProgressEvent,
@@ -16,18 +16,10 @@ import type {
 } from 'axios';
 import axios from 'axios';
 
-import type {
-  ExportFormat,
-  ExportURL,
-  ProgressCallback,
-  ValuesStoreParams,
-} from './models';
+import type { ExportFormat, ExportURL, ValuesStoreParams } from './models';
 
 export abstract class DataProviderApi {
   protected readonly client: AxiosInstance;
-  protected progress = new Map<ValuesStoreParams, number>();
-
-  private readonly progressListeners = new Set<ProgressCallback>();
 
   public constructor(
     public readonly filepath: string,
@@ -53,36 +45,25 @@ export abstract class DataProviderApi {
 
   public getSearchablePaths?(path: string): Promise<string[]>;
 
-  public addProgressListener(cb: ProgressCallback): void {
-    this.progressListeners.add(cb);
-    cb([...this.progress.values()]); // notify once
-  }
-
-  public removeProgressListener(cb: ProgressCallback): void {
-    this.progressListeners.delete(cb);
-  }
-
   protected async cancellableFetchValue(
     endpoint: string,
-    storeParams: ValuesStoreParams,
     queryParams: Record<string, string | boolean | undefined>,
     signal?: AbortSignal,
+    onProgress?: OnProgress,
     responseType?: ResponseType,
   ): Promise<AxiosResponse> {
-    this.progress.set(storeParams, 0);
-    this.notifyProgressChange();
-
     try {
       return await this.client.get(endpoint, {
         signal,
         params: queryParams,
         responseType,
-        onDownloadProgress: (evt: AxiosProgressEvent) => {
-          if (evt.total !== undefined && evt.total > 0) {
-            this.progress.set(storeParams, evt.loaded / evt.total);
-            this.notifyProgressChange();
-          }
-        },
+        onDownloadProgress:
+          onProgress &&
+          ((evt: AxiosProgressEvent) => {
+            if (evt.total !== undefined && evt.total > 0) {
+              onProgress(evt.loaded / evt.total);
+            }
+          }),
       });
     } catch (error) {
       if (axios.isCancel(error)) {
@@ -93,21 +74,16 @@ export abstract class DataProviderApi {
         );
       }
       throw error;
-    } finally {
-      // Remove progress when request fulfills
-      this.progress.delete(storeParams);
-      this.notifyProgressChange();
     }
   }
 
-  private notifyProgressChange() {
-    this.progressListeners.forEach((cb) => cb([...this.progress.values()]));
-  }
-
   public abstract getEntity(path: string): Promise<ProvidedEntity>;
+
   public abstract getValue(
     params: ValuesStoreParams,
     signal?: AbortSignal,
+    onProgress?: OnProgress,
   ): Promise<unknown>;
+
   public abstract getAttrValues(entity: Entity): Promise<AttributeValues>;
 }
diff --git a/packages/app/src/providers/h5grove/h5grove-api.ts b/packages/app/src/providers/h5grove/h5grove-api.ts
@@ -8,6 +8,7 @@ import type {
   Value,
 } from '@h5web/shared/hdf5-models';
 import { DTypeClass } from '@h5web/shared/hdf5-models';
+import type { OnProgress } from '@h5web/shared/react-suspense-fetch';
 import type { AxiosRequestConfig } from 'axios';
 
 import { DataProviderApi } from '../api';
@@ -44,21 +45,29 @@ export class H5GroveApi extends DataProviderApi {
   public override async getValue(
     params: ValuesStoreParams,
     signal?: AbortSignal,
+    onProgress?: OnProgress,
   ): Promise<H5GroveDataResponse> {
     const { dataset } = params;
 
     if (dataset.type.class === DTypeClass.Opaque) {
-      return new Uint8Array(await this.fetchBinaryData(params, signal));
+      return new Uint8Array(
+        await this.fetchBinaryData(params, signal, onProgress),
+      );
     }
 
     const DTypedArray = h5groveTypedArrayFromDType(dataset.type);
     if (DTypedArray) {
-      const buffer = await this.fetchBinaryData(params, signal, true);
+      const buffer = await this.fetchBinaryData(
+        params,
+        signal,
+        onProgress,
+        true,
+      );
       const array = new DTypedArray(buffer);
       return hasScalarShape(dataset) ? array[0] : array;
     }
 
-    return this.fetchData(params, signal);
+    return this.fetchData(params, signal, onProgress);
   }
 
   public override async getAttrValues(
@@ -146,16 +155,17 @@ export class H5GroveApi extends DataProviderApi {
   private async fetchData(
     params: ValuesStoreParams,
     signal?: AbortSignal,
+    onProgress?: OnProgress,
   ): Promise<H5GroveDataResponse> {
     const { data } = await this.cancellableFetchValue(
       `/data/`,
-      params,
       {
         path: params.dataset.path,
         selection: params.selection,
         flatten: true,
       },
       signal,
+      onProgress,
     );
 
     return data;
@@ -164,18 +174,19 @@ export class H5GroveApi extends DataProviderApi {
   private async fetchBinaryData(
     params: ValuesStoreParams,
     signal?: AbortSignal,
+    onProgress?: OnProgress,
     safe = false,
   ): Promise<ArrayBuffer> {
     const { data } = await this.cancellableFetchValue(
       '/data/',
-      params,
       {
         path: params.dataset.path,
         selection: params.selection,
         format: 'bin',
         dtype: safe ? 'safe' : undefined,
       },
       signal,
+      onProgress,
       'arraybuffer',
     );
 

diff --git a/packages/app/src/providers/hsds/hsds-api.ts b/packages/app/src/providers/hsds/hsds-api.ts
@@ -17,6 +17,7 @@ import type {
 } from '@h5web/shared/hdf5-models';
 import { EntityKind } from '@h5web/shared/hdf5-models';
 import { buildEntityPath, getChildEntity } from '@h5web/shared/hdf5-utils';
+import type { OnProgress } from '@h5web/shared/react-suspense-fetch';
 
 import { DataProviderApi } from '../api';
 import type { ExportFormat, ExportURL, ValuesStoreParams } from '../models';
@@ -127,11 +128,12 @@ export class HsdsApi extends DataProviderApi {
   public override async getValue(
     params: ValuesStoreParams,
     signal?: AbortSignal,
+    onProgress?: OnProgress,
   ): Promise<unknown> {
     const { dataset } = params;
     assertHsdsDataset(dataset);
 
-    const value = await this.fetchValue(dataset.id, params, signal);
+    const value = await this.fetchValue(dataset.id, params, signal, onProgress);
 
     // https://github.com/HDFGroup/hsds/issues/88
     // HSDS does not reduce the number of dimensions when selecting indices
@@ -217,13 +219,14 @@ export class HsdsApi extends DataProviderApi {
     entityId: HsdsId,
     params: ValuesStoreParams,
     signal?: AbortSignal,
+    onProgress?: OnProgress,
   ): Promise<HsdsValueResponse> {
     const { selection } = params;
     const { data } = await this.cancellableFetchValue(
       `/datasets/${entityId}/value`,
-      params,
       { select: selection && `[${selection}]` },
       signal,
+      onProgress,
     );
     return data.value;
   }

diff --git a/packages/app/src/vis-packs/ValueLoader.tsx b/packages/app/src/vis-packs/ValueLoader.tsx
@@ -1,5 +1,5 @@
 import { useTimeoutEffect, useToggle } from '@react-hookz/web';
-import { useEffect, useState } from 'react';
+import { useStore } from 'zustand';
 
 import { useDataContext } from '../providers/DataProvider';
 import { CANCELLED_ERROR_MSG } from '../providers/utils';
@@ -13,20 +13,15 @@ interface Props {
 
 function ValueLoader(props: Props) {
   const { isSlice = false } = props;
-  const { valuesStore, addProgressListener, removeProgressListener } =
-    useDataContext();
-
-  const [progress, setProgress] = useState<number[]>();
-
-  useEffect(() => {
-    addProgressListener(setProgress);
-    return () => removeProgressListener(setProgress);
-  }, [addProgressListener, removeProgressListener, setProgress]);
+  const { valuesStore } = useDataContext();
 
   // Wait a bit before showing loader to avoid flash
   const [isReady, toggleReady] = useToggle();
   useTimeoutEffect(toggleReady, 100);
 
+  // Track progress
+  const { ongoing } = useStore(valuesStore.progressStore);
+
   return (
     <div className={styles.loader} data-testid="LoadingDatasetValue">
       {isReady && (
@@ -42,13 +37,17 @@ function ValueLoader(props: Props) {
             <div />
             <div />
           </div>
-          {progress && (
-            <div className={styles.progressBars}>
-              {progress.slice(0, MAX_PROGRESS_BARS).map((val, index) => (
-                <progress className={styles.progress} key={index} value={val} /> // eslint-disable-line react/no-array-index-key
+          <div className={styles.progressBars}>
+            {[...ongoing.entries()]
+              .slice(0, MAX_PROGRESS_BARS)
+              .map(([key, val]) => (
+                <progress
+                  className={styles.progress}
+                  key={`${key.dataset.path}_${key.selection || ''}`}
+                  value={val}
+                />
               ))}
-            </div>
-          )}
+          </div>
           <p>{isSlice ? 'Loading current slice' : 'Loading data'}...</p>
           <p>
             <button

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -35,6 +35,9 @@
     "ndarray-ops": "1.2.2",
     "react": ">=18"
   },
+  "optionalDependencies": {
+    "zustand": "4.5.4"
+  },
   "devDependencies": {
     "@types/d3-array": "~3.2.1",
     "@types/d3-format": "~3.0.4",