Don't use anywidget command directly

Author: kylebarron

lonboard/_layer.py

@@ -21,7 +21,6 @@
     Union,
 )
 
-import anywidget
 import ipywidgets
 import traitlets
 from arro3.core import Table
@@ -522,27 +521,28 @@ def _handle_anywidget_dispatch(
         ) -> None:
             self.called += 1
             print(msg)
-            if not isinstance(msg, dict) or msg.get("kind") != "anywidget-dispatch":
+
+            if not isinstance(msg, dict) or msg.get("kind") != "anywidget-command":
                 return
 
             print("test")
             print(msg)
+
+            response = "helloworld from init"
+            buffers = [b"hello world"]
             self.send(
                 {
                     "id": msg["id"],
-                    "kind": "anywidget-dispatch-response",
-                    "response": "hello world",
-                }
+                    "kind": "anywidget-command-response",
+                    "response": response,
+                },
+                buffers,
             )
 
         print("before on msg")
         self.on_msg(_handle_anywidget_dispatch)
         super().__init__(**kwargs)  # type: ignore
 
-    @anywidget.experimental.command
-    def helloworld(self, msg, buffers):
-        return "hello world", buffers
-
     _layer_type = traitlets.Unicode("bitmap-tile").tag(sync=True)
 
     data = traitlets.Union(

lonboard/_map.py

@@ -5,7 +5,6 @@
 from pathlib import Path
 from typing import IO, TYPE_CHECKING, Optional, Sequence, TextIO, Union, overload
 
-import anywidget
 import ipywidgets
 import traitlets
 from ipywidgets.embed import embed_minimal_html
@@ -97,10 +96,6 @@ def __init__(
 
         super().__init__(layers=layers, **kwargs)
 
-    @anywidget.experimental.command
-    def helloworld(self, msg, buffers):
-        return "hello world from top-level map component", buffers
-
     _esm = bundler_output_dir / "index.js"
     _css = bundler_output_dir / "index.css"
 

src/model/invoke.ts

@@ -0,0 +1,53 @@
+// Invoke is vendored from anywidget because we want to ensure we're using the
+// widget messages on the **specific** widget layer, not the top-level Map
+// layer. E.g. when the JS BitmapTileLayer is requesting tiles, we want to make
+// sure that the same, specific BitmapTileLayer on the Python side is receiving
+// the requests.
+//
+// For now, it's simplest to vendor this code and implement our own responses on
+// the Python side.
+
+import { AnyModel } from "@anywidget/types";
+import { v4 } from "uuid";
+
+type InvokeOptions = {
+  buffers?: DataView[];
+  signal?: AbortSignal;
+};
+
+export async function invoke<T>(
+  model: AnyModel,
+  name: string,
+  msg: object,
+  options: InvokeOptions = {},
+): Promise<[T, DataView[]]> {
+  // crypto.randomUUID() is not available in non-secure contexts (i.e., http://)
+  // so we use simple (non-secure) polyfill.
+  const id = v4();
+  const signal = options.signal ?? AbortSignal.timeout(3000);
+
+  return new Promise((resolve, reject) => {
+    if (signal.aborted) {
+      reject(signal.reason);
+    }
+    signal.addEventListener("abort", () => {
+      model.off("msg:custom", handler);
+      reject(signal.reason);
+    });
+
+    function handler(
+      msg: { id: string; kind: "anywidget-command-response"; response: T },
+      buffers: DataView[],
+    ) {
+      if (!(msg.id === id)) return;
+      resolve([msg.response, buffers]);
+      model.off("msg:custom", handler);
+    }
+    model.on("msg:custom", handler);
+    model.send(
+      { id, kind: "anywidget-command", name, msg },
+      undefined,
+      options.buffers ?? [],
+    );
+  });
+}

src/model/layer.ts

@@ -29,6 +29,7 @@ import { TileLayer, TileLayerProps } from "@deck.gl/geo-layers";
 import { isDefined } from "../util.js";
 import { dispatch } from "../dispatch.js";
 import { Experimental } from "@anywidget/types";
+import { invoke } from "./invoke.js";
 
 /**
  * An abstract base class for a layer that uses an Arrow Table as the data prop.
@@ -285,11 +286,11 @@ export class BitmapTileModel extends BaseLayerModel {
 
   async getTileData(tile: TileLoadProps) {
     console.log("in getTileData");
-    const { invoke } = this.anywidgetExperimental;
+    // const { invoke } = this.anywidgetExperimental;
 
     console.log(invoke);
     console.log("calling invoke");
-    const out = await invoke("helloworld");
+    const out = await invoke(this.model, "helloworld", {});
     console.log("returned from invoke");
     console.log(out);