add basic example with cytoscape

Author: rmorshea

Diff for: docs/source/_static/custom.js

@@ -1398,7 +1398,9 @@ function useJsonPatchCallback(initial) {
         // We CANNOT mutate the part of the document because React checks some
         // attributes of the model (e.g. model.attributes.style is checked for
         // identity).
-        doc.current = applyNonMutativePatch(doc, patch);
+        doc.current = applyNonMutativePatch(
+          doc.current,
+          patch);
       } else {
         // We CAN mutate the document here though because we know that nothing above
         // The patch `path` is changing. Thus, maintaining the identity for that section

Diff for: docs/source/custom_js/package-lock.json

@@ -0,0 +1,39 @@
+import idom
+
+
+react_cytoscapejs = idom.web.module_from_template(
+    # we need to use this template because react-cytoscapejs uses a default export
+    "react-default",
+    "react-cytoscapejs",
+    fallback="⌛",
+)
+Cytoscape = idom.web.export(react_cytoscapejs, "default")
+
+
+@idom.component
+def CytoscapeGraph():
+    return Cytoscape(
+        {
+            "style": {"width": "100%", "height": "200px"},
+            "elements": [
+                {
+                    "data": {"id": "one", "label": "Node 1"},
+                    "position": {"x": 100, "y": 100},
+                },
+                {
+                    "data": {"id": "two", "label": "Node 2"},
+                    "position": {"x": 200, "y": 100},
+                },
+                {
+                    "data": {
+                        "source": "one",
+                        "target": "two",
+                        "label": "Edge from Node1 to Node2",
+                    }
+                },
+            ],
+        }
+    )
+
+
+idom.run(CytoscapeGraph)

Diff for: docs/source/examples/cytoscape.py

@@ -70,17 +70,17 @@ A package for building responsive user interfaces in pure Python.
 
             .. grid-item-card::
 
-                .. interactive-widget:: slideshow
+                .. interactive-widget:: cytoscape
                     :no-activate-button:
 
             .. grid-item-card::
 
-                .. interactive-widget:: audio_player
+                .. interactive-widget:: slideshow
                     :no-activate-button:
 
             .. grid-item-card::
 
-                .. interactive-widget:: todo
+                .. interactive-widget:: audio_player
                     :no-activate-button:
 
     .. grid-item::
@@ -93,8 +93,6 @@ A package for building responsive user interfaces in pure Python.
                 .. interactive-widget:: simple_dashboard
                     :no-activate-button:
 
-
-
             .. grid-item-card::
 
                 .. interactive-widget:: matplotlib_plot
@@ -104,3 +102,8 @@ A package for building responsive user interfaces in pure Python.
 
                 .. interactive-widget:: material_ui_button_on_click
                     :no-activate-button:
+
+            .. grid-item-card::
+
+                .. interactive-widget:: todo
+                    :no-activate-button: