feat(widget): Batch tile requests within an animation frame (#181)

* feat(widget): Batch tile requests within an animation frame

HiGlass's built-in data fetching logic is designed to optimize API calls
by consolidating requests based on time, ID, and server. Our custom
Jupyter data fetcher doesn't include these optimizations.

This PR introduces a `consolidator` helper, which performs a much simpler
form of batching. Since we assume a single server, this function only
batches tile requests that occur within the same animation frame and
submits them together. This helps reduce the number of comms calls and
deduplicates requests efficiently.

Initial testing suggests it feels quite responsive!

* Add `MAX_TILES_PER_REQUEST` const

* Use `Promise.withResolvers`

* Remove chunkIterable for now

Author: manzt

src/higlass/types.ts

@@ -70,7 +70,7 @@ export type HGC = {
     tileResponseToData<T>(
       inputData: Record<string, T>,
       server: string,
-      theseTileIds: Array<string>,
+      tileIds: Array<string>,
     ): Record<string, unknown>;
   };
 };

src/higlass/widget.js

@@ -194,6 +194,7 @@ async function registerJupyterHiGlassDataFetcher(model) {
   /** @type {(...args: ConstructorParameters<PluginDataFetcherConstructor>) => DataFetcher} */
   function DataFetcher(hgc, dataConfig, pubSub) {
     let config = { ...dataConfig, server: NAME };
+
     return new hgc.dataFetchers.DataFetcher(config, pubSub, {
       async fetchTilesetInfo({ server, tilesetUid }) {
         assert(server === NAME, "must be a jupyter server");
@@ -202,17 +203,29 @@ async function registerJupyterHiGlassDataFetcher(model) {
         });
         return response.payload;
       },
-      async fetchTiles({ tileIds }) {
-        let response = await sendCustomMessage(tModel, {
-          payload: { type: "tiles", tileIds },
-        });
-        let result = hgc.services.tileResponseToData(
-          response.payload,
-          NAME,
-          tileIds,
-        );
-        return result;
-      },
+      fetchTiles: consolidator(
+        /** @param {Array<WithResolvers<{ tileIds: Array<string> }, Record<string, any>>>} requests */
+        async (requests) => {
+          let tileIds = [...new Set(requests.flatMap((r) => r.data.tileIds))];
+          let response = await sendCustomMessage(tModel, {
+            payload: { type: "tiles", tileIds },
+          });
+          let tiles = hgc.services.tileResponseToData(
+            response.payload,
+            NAME,
+            tileIds,
+          );
+          for (let request of requests) {
+            /** @type {Record<string, unknown>} */
+            const requestData = {};
+            for (let id of request.data.tileIds) {
+              let tileData = tiles[id];
+              if (tileData) requestData[id] = tileData;
+            }
+            request.resolve(requestData);
+          }
+        },
+      ),
       registerTileset() {
         throw new Error("Not implemented");
       },
@@ -302,3 +315,40 @@ export default {
     };
   },
 };
+
+/**
+ * @template T
+ * @template U
+ * @typedef {{ data: T, resolve: (success: U) => void, reject: (err: unknown) => void }} WithResolvers
+ */
+
+/**
+ * Collects multiple calls within the same frame to processes them as a batch.
+ *
+ * The provided `processBatch` function receives an array of items, each with
+ * associated resolvers for fulfilling the original request.
+ *
+ * @template T
+ * @template U
+ * @param {(batch: Array<WithResolvers<T, U>>) => void} processBatch - A function to process each batch.
+ * @returns {(item: T) => Promise<U>} - A function to enqueue items.
+ */
+function consolidator(processBatch) {
+  /** @type {Array<WithResolvers<T, U>>} */
+  let pending = [];
+  /** @type {number} */
+  let id = 0;
+
+  function run() {
+    processBatch(pending);
+    pending = [];
+    id = 0;
+  }
+
+  return function enqueue(data) {
+    id = id || requestAnimationFrame(() => run());
+    let { promise, resolve, reject } = Promise.withResolvers();
+    pending.push({ data, resolve, reject });
+    return promise;
+  };
+}