expose CyLeaflet subcomponent IDs and demonstrate usage in demo

Author: emilykl

dash_cytoscape/CyLeaflet.py

@@ -64,7 +64,11 @@ def __init__(
             s: {"id": id, "component": "cyleaflet", "sub": s}
             for s in ["cy", "leaf", "elements"]
         }
-        self.ids["component"] = "leaflet"
+
+        self.CYTOSCAPE_ID = self.ids["cy"]
+        self.LEAFLET_ID = self.ids["leaf"]
+        self.ELEMENTS_ID = self.ids["elements"]
+
         cytoscape_props = cytoscape_props or {}
         leaflet_props = leaflet_props or {}
         elements = cytoscape_props.get("elements", [])

demos/usage-cy-leaflet-aio.py

@@ -50,19 +50,23 @@
     "Gold Coast": (-28.026901440211205, 153.4208293956674),
 }
 
+# Create an instance of CyLeaflet
+cyleaflet_instance = cyto.CyLeaflet(
+    id="my-cy-leaflet",
+    cytoscape_props={
+        "elements": [],
+        "stylesheet": cy_stylesheet,
+    },
+    width=int(default_div_style["width"][:-2]),
+    height=int(default_div_style["height"][:-2]),
+)
+
+
 # App
 app.layout = html.Div(
     [
         html.Div(
-            cyto.CyLeaflet(
-                id="my-cy-leaflet",
-                cytoscape_props={
-                    "elements": [],
-                    "stylesheet": cy_stylesheet,
-                },
-                width=int(default_div_style["width"][:-2]),
-                height=int(default_div_style["height"][:-2]),
-            ),
+            cyleaflet_instance,
             id="cy-leaflet-div",
             style=default_div_style,
         ),
@@ -97,9 +101,7 @@
 @callback(
     Output("cy-leaflet-div", "children"),
     Output("cy-leaflet-div", "style"),
-    Output(
-        {"id": "my-cy-leaflet", "sub": "leaf", "component": "cyleaflet"}, "children"
-    ),
+    Output(cyleaflet_instance.LEAFLET_ID, "children"),
     Input("location-dropdown", "value"),
     Input("width-input", "value"),
     Input("height-input", "value"),