Bump anywidget to 0.9 & simplify Wasm initialization (#344)

Author: kylebarron

DEVELOP.md

@@ -33,7 +33,7 @@ poetry run python -m ipykernel install --user --name "lonboard"
 JupyterLab is an included dev dependency, so to start JupyterLab you can run
 
 ```
-poetry run jupyter lab
+ANYWIDGET_HMR=1 poetry run jupyter lab
 ```
 
 Then you should see a tile on the home screen that lets you open a Jupyter Notebook in the `lonboard` environment. You should also be able to open up an example notebook from the `examples/` folder.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@anywidget/react": "^0.0.2",
+    "@anywidget/react": "^0.0.3",
     "@babel/runtime": "^7.23.8",
     "@deck.gl/core": "^8.9.33",
     "@deck.gl/extensions": "^8.9.33",
@@ -17,6 +17,7 @@
   },
   "type": "module",
   "devDependencies": {
+    "@anywidget/types": "^0.1.5",
     "@jupyter-widgets/base": "^6.0.6",
     "@types/react": "^18.2.47",
     "@types/uuid": "^9.0.7",

package.json

@@ -10,7 +10,7 @@ include = ["lonboard/static/*.js", "lonboard/static/*.css"]
 
 [tool.poetry.dependencies]
 python = "^3.8"
-anywidget = "^0.7.1"
+anywidget = "^0.9.0"
 pyarrow = ">=14.0.1"
 geopandas = ">=0.13"
 pandas = "^2"

poetry.lock

@@ -1,12 +1,13 @@
 import * as React from "react";
 import { useState, useEffect } from "react";
 import { createRender, useModelState, useModel } from "@anywidget/react";
+import type { Initialize, InitializeProps, Render } from "@anywidget/types";
 import Map from "react-map-gl/maplibre";
 import DeckGL from "@deck.gl/react/typed";
 import type { Layer } from "@deck.gl/core/typed";
 import { BaseLayerModel, initializeLayer } from "./model/index.js";
 import type { WidgetModel } from "@jupyter-widgets/base";
-import { useParquetWasm } from "./parquet.js";
+import { initParquetWasm } from "./parquet.js";
 import { getTooltip } from "./tooltip/index.js";
 import { loadChildModels } from "./util.js";
 import { v4 as uuidv4 } from "uuid";
@@ -57,7 +58,6 @@ async function getChildModelState(
 }
 
 function App() {
-  let [parquetWasmReady] = useParquetWasm();
   let [initialViewState] = useModelState<DataView>("_initial_view_state");
   let [mapStyle] = useModelState<string>("basemap_style");
   let [mapHeight] = useModelState<number>("_height");
@@ -75,15 +75,7 @@ function App() {
   let [stateCounter, setStateCounter] = useState<Date>(new Date());
 
   useEffect(() => {
-    if (!parquetWasmReady) {
-      return;
-    }
-
     const callback = async () => {
-      if (!parquetWasmReady) {
-        throw new Error("inside callback but parquetWasm not ready!");
-      }
-
       const childModels = await loadChildModels(
         model.widget_manager,
         childLayerIds,
@@ -97,7 +89,7 @@ function App() {
       setSubModelState(newSubModelState);
     };
     callback().catch(console.error);
-  }, [parquetWasmReady, childLayerIds]);
+  }, [childLayerIds]);
 
   const layers: Layer[] = [];
   for (const subModel of Object.values(subModelState)) {
@@ -147,4 +139,13 @@ function App() {
   );
 }
 
-export let render = createRender(App);
+async function initialize({}: InitializeProps) {
+  await initParquetWasm();
+}
+
+const module: { render: Render; initialize: Initialize } = {
+  render: createRender(App),
+  initialize,
+};
+
+export default module;

pyproject.toml

@@ -58,19 +58,3 @@ export function parseParquetBuffers(dataViews: DataView[]): arrow.Table {
 
   return new arrow.Table(batches);
 }
-
-export function useParquetWasm(): [boolean] {
-  const [wasmReady, setWasmReady] = useState<boolean>(false);
-
-  // Init parquet wasm
-  useEffect(() => {
-    const callback = async () => {
-      await initParquetWasm();
-      setWasmReady(true);
-    };
-
-    callback();
-  }, []);
-
-  return [wasmReady];
-}