feat: Add progress monitoring for RemoteSession downloads

Author: abhinavsns

README.md

@@ -42,6 +42,21 @@ import { createVtkObjectProxy, createNamespace } from "@kitware/vtk-wasm/vtk"
 import { ExportViewer, createViewer } from "@kitware/vtk-wasm/viewer"
 ```
 
+### RemoteSession progress
+
+```js
+import { RemoteSession } from "@kitware/vtk-wasm/remote"
+
+const session = new RemoteSession()
+const removeProgress = session.addProgressCallback(({ active, state, hash }) => {
+  // state: { current, total }, hash: { current, total }
+  // active is true while states/blobs are being fetched
+})
+
+// Later, to stop listening:
+removeProgress()
+```
+
 ### UMD imports
 
 ```js

src/remote.js

@@ -29,6 +29,8 @@ export class RemoteSession {
     this.networkFetchStatus = null;
     this.cameraIds = new Set();
     this.stateCache = {};
+    this.progressCallbacks = new Set();
+    this.progressState = null;
     // FIXME - remove when VTK>=9.5
     this.renderWindowIds = new Set();
     this.renderWindowIdToInteractorId = new Map();
@@ -116,6 +118,52 @@ export class RemoteSession {
     this.networkFetchStatus = fetchStatus;
   }
 
+  /**
+   * Register a callback to monitor download progress.
+   *
+   * @param {Function} callback
+   * @returns {Function} cleanup function
+   */
+  addProgressCallback(callback) {
+    if (callback) {
+      this.progressCallbacks.add(callback);
+    }
+    return () => {
+      this.progressCallbacks.delete(callback);
+    };
+  }
+
+  emitProgress() {
+    if (!this.progressCallbacks.size || !this.progressState) {
+      return;
+    }
+    const { active, state, hash } = this.progressState;
+    const payload = {
+      active,
+      state: {
+        current: state.current,
+        total: state.total,
+      },
+      hash: {
+        current: hash.current,
+        total: hash.total,
+      },
+    };
+    this.progressCallbacks.forEach((cb) => cb(payload));
+  }
+
+  incrementProgress(kind) {
+    if (!this.progressState) {
+      return;
+    }
+    const bucket = this.progressState[kind];
+    if (!bucket) {
+      return;
+    }
+    bucket.current = Math.min(bucket.current + 1, bucket.total);
+    this.emitProgress();
+  }
+
   /**
    * Free old blobs if they go beyond the allowed cache size in Bytes
    * starting with the older ones.
@@ -164,7 +212,9 @@ export class RemoteSession {
    */
   async fetchState(vtkId) {
     const serverState = await this.networkFetchState(vtkId);
-    return this.patchState(serverState);
+    const patchedState = this.patchState(serverState);
+    this.incrementProgress("state");
+    return patchedState;
   }
 
   /**
@@ -221,17 +271,19 @@ export class RemoteSession {
    * @returns typed array matching blob content
    */
   async fetchHash(hash) {
+    let array;
     // pendingArray only filled via pushHash
     if (this.pendingArrays[hash]) {
       await this.pendingArrays[hash];
       this.hashesMTime[hash] = this.currentMTime;
       delete this.pendingArrays[hash];
-      return;
+    } else {
+      // regular network call
+      array = await this.networkFetchHash(hash);
+      this.sceneManager.registerBlob(hash, array);
+      this.hashesMTime[hash] = this.currentMTime;
     }
-    // regular network call
-    const array = await this.networkFetchHash(hash);
-    this.sceneManager.registerBlob(hash, array);
-    this.hashesMTime[hash] = this.currentMTime;
+    this.incrementProgress("hash");
     return array;
   }
 
@@ -274,8 +326,8 @@ export class RemoteSession {
 
     try {
       const serverStatus = await this.networkFetchStatus(vtkId);
-      const pendingHashes = [];
-      const pendingStates = [];
+      const hashesToFetch = [];
+      const statesToFetch = [];
 
       // Handle forcepush if any
       const resetIds = serverStatus.force_push || [];
@@ -286,18 +338,29 @@ export class RemoteSession {
       // Fetch any state that needs update
       serverStatus.ids.forEach(([vtkId, mtime]) => {
         if (!this.stateMTimes[vtkId] || this.stateMTimes[vtkId] < mtime) {
-          pendingStates.push(this.fetchState(vtkId));
+          statesToFetch.push(vtkId);
         }
       });
 
       // Fetch any blob that is missing
       serverStatus.hashes.forEach((hash) => {
         if (!this.hashesMTime[hash]) {
-          pendingHashes.push(this.fetchHash(hash));
+          hashesToFetch.push(hash);
         }
         this.hashesMTime[hash] = this.currentMTime;
       });
 
+      this.progressState = {
+        active: !!(statesToFetch.length + hashesToFetch.length),
+        state: { current: 0, total: statesToFetch.length },
+        hash: { current: 0, total: hashesToFetch.length },
+      };
+      this.emitProgress();
+      const pendingStates = statesToFetch.map((stateId) =>
+        this.fetchState(stateId),
+      );
+      const pendingHashes = hashesToFetch.map((hash) => this.fetchHash(hash));
+
       // Capture cameras
       serverStatus.cameras.forEach((v) => this.cameraIds.add(Number(v)));
 
@@ -344,6 +407,11 @@ export class RemoteSession {
     } catch (e) {
       console.error("Error in update", e);
     } finally {
+      if (this.progressState) {
+        this.progressState.active = false;
+        this.emitProgress();
+        this.progressState = null;
+      }
       this.updateInProgress--;
       if (this.updateInProgress) {
         this.updateInProgress = 0;