feat(widgets): Support custom widgets in pydeck via custom_libraries (#9745)

Author: atmorling

bindings/pydeck/pydeck/bindings/widget.py

@@ -1,3 +1,4 @@
+import uuid
 from .json_tools import JSONMixin
 
 TYPE_IDENTIFIER = "@@type"
@@ -30,7 +31,7 @@ class Widget(JSONMixin):
 
     def __init__(self, type, id=None, placement=None, view_id=None, **kwargs):
         self.type = type
-        self.id = id
+        self.id = id or str(uuid.uuid4())
         self.placement = placement
         self.view_id = view_id
         self.__dict__.update(kwargs)

bindings/pydeck/tests/bindings/test_widget.py

@@ -4,5 +4,5 @@
 
 
 def test_widget_constructor():
-    EXPECTED = {"@@type": "ZoomWidget", "placement": "top-right"}
-    assert json.loads(Widget(type="ZoomWidget", placement="top-right", view_id=None).to_json()) == EXPECTED
+    EXPECTED = {"@@type": "ZoomWidget", "placement": "top-right", "id": "test-widget"}
+    assert json.loads(Widget(type="ZoomWidget", placement="top-right", view_id=None, id="test-widget").to_json()) == EXPECTED

modules/jupyter-widget/src/playground/create-deck.js

@@ -111,8 +111,8 @@ function updateDeck(inputJson, deckgl) {
   deckgl.setProps(results);
 }
 
-function missingLayers(oldLayers, newLayers) {
-  return oldLayers.filter(ol => ol && ol.id && !newLayers.find(nl => nl.id === ol.id));
+function missingProps(oldProps, newProps) {
+  return oldProps.filter(op => op && op.id && !newProps.find(np => np.id === op.id));
 }
 
 function createStandaloneFromProvider({
@@ -217,14 +217,17 @@ function createDeck({
     }
 
     const oldLayers = jsonInput.layers || [];
+    const oldWidgets = jsonInput.widgets || [];
     const props = jsonConverter.convert(jsonInput);
 
     addSupportComponents(container, props);
 
     const convertedLayers = (props.layers || []).filter(l => l);
+    const convertedWidgets = (props.widgets || []).filter(w => w);
 
-    // loading custom library is async, some layers might not be convertable before custom library loads
-    const layerToLoad = missingLayers(oldLayers, convertedLayers);
+    // loading custom library is async, some layers/widgets might not be convertable before custom library loads
+    const layersToLoad = missingProps(oldLayers, convertedLayers);
+    const widgetsToLoad = missingProps(oldWidgets, convertedWidgets);
     const getTooltip = makeTooltip(tooltip);
     const {mapProvider} = props;
 
@@ -240,14 +243,21 @@ function createDeck({
     });
 
     const onComplete = () => {
-      if (layerToLoad.length) {
-        // convert input layer again to presist layer order
-        const newProps = jsonConverter.convert({layers: jsonInput.layers});
-        const newLayers = (newProps.layers || []).filter(l => l);
+      if (layersToLoad.length || widgetsToLoad.length) {
+        const newProps = jsonConverter.convert({
+          layers: jsonInput.layers,
+          widgets: jsonInput.widgets
+        });
 
-        if (newLayers.length > convertedLayers.length) {
-          // if more layers are converted
-          deckgl.setProps({layers: newLayers});
+        const newLayers = (newProps.layers || []).filter(l => l);
+        const newWidgets = (newProps.widgets || []).filter(w => w);
+
+        if (
+          newLayers.length > convertedLayers.length ||
+          newWidgets.length > convertedWidgets.length
+        ) {
+          // if more layers/widgets are converted
+          deckgl.setProps({layers: newLayers, widgets: newWidgets});
         }
       }
     };