Added first controls

src/myfasthtml/controls/VisNetwork.py

@@ -0,0 +1,100 @@
+import json
+import logging
+
+from fasthtml.components import Script, Div
+
+from myfasthtml.core.dbmanager import DbObject
+from myfasthtml.core.instances import MultipleInstance
+
+logger = logging.getLogger("VisNetwork")
+
+
+class VisNetworkState(DbObject):
+  def __init__(self, owner):
+    super().__init__(owner)
+    with self.initializing():
+      # persisted in DB
+      self.nodes: list = []
+      self.edges: list = []
+      self.options: dict = {
+          "autoResize": True,
+          "interaction": {
+              "dragNodes": True,
+              "zoomView": True,
+              "dragView": True,
+          },
+          "physics": {"enabled": True}
+      }
+
+
+class VisNetwork(MultipleInstance):
+  def __init__(self, parent, _id=None, nodes=None, edges=None, options=None):
+    super().__init__(parent, _id=_id)
+    logger.debug(f"VisNetwork created with id: {self._id}")
+    
+    self._state = VisNetworkState(self)
+    self._update_state(nodes, edges, options)
+  
+  def _update_state(self, nodes, edges, options):
+    logger.debug(f"Updating VisNetwork state with {nodes=}, {edges=}, {options=}")
+    if not nodes and not edges and not options:
+      return
+    
+    state = self._state.copy()
+    if nodes is not None:
+      state.nodes = nodes
+    if edges is not None:
+      state.edges = edges
+    if options is not None:
+      state.options = options
+    
+    self._state.update(state)
+  
+  def add_to_options(self, **kwargs):
+    logger.debug(f"add_to_options: {kwargs=}")
+    new_options = self._state.options.copy() | kwargs
+    self._update_state(None, None, new_options)
+    return self
+  
+  def render(self):
+    
+    # Serialize nodes and edges to JSON
+    # This preserves all properties (color, shape, size, etc.) that are present
+    js_nodes = ",\n    ".join(
+      json.dumps(node) for node in self._state.nodes
+    )
+    js_edges = ",\n    ".join(
+      json.dumps(edge) for edge in self._state.edges
+    )
+    
+    # Convert Python options to JS
+    js_options = json.dumps(self._state.options, indent=2)
+    
+    return (
+        Div(
+          id=self._id,
+          cls="mf-vis",
+        ),
+        
+        # The script initializing Vis.js
+        Script(f"""
+            (function() {{
+              const container = document.getElementById("{self._id}");
+              const nodes = new vis.DataSet([
+                  {js_nodes}
+              ]);
+              const edges = new vis.DataSet([
+                  {js_edges}
+              ]);
+              const data = {{
+                  nodes: nodes,
+                  edges: edges
+              }};
+              const options = {js_options};
+              const network = new vis.Network(container, data, options);
+            }})();
+        """)
+    )
+  
+  def __ft__(self):
+    return self.render()