Apply changes from master for 1.3 release

.github/workflows/nvl-entrypoint-test.yml

@@ -28,7 +28,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "24.x"
+          node-version: "lts/*"
       - name: Setup
         run: yarn
       - name: Build

changelog.md

@@ -1,23 +1,24 @@
-# Changes in 1.2.0
+# Changes in 1.3.0
 
 ## Breaking changes
 
-- Removed the `show_hover_tooltip` parameter from `render()`. The visualization now shows a detail side panel for selected nodes and relationships, replacing the previous hover tooltip.
-- Nodes are colored by default by their caption. Use `VG.color_nodes(field="caption", colors=[neo4j_viz.colors.NEO4J_COLORS_DISCRETE[0]])` to apply the previous coloring.
-
-
 ## New features
 
-- Nodes are now automatically colored by their caption (label) in the JavaScript visualization. This works out of the box without needing to call `color_nodes()`, and applies regardless of how the graph was created. Explicit colors set via `color_nodes()` or directly on nodes take precedence. There is no longer a limit on the number of unique labels for auto-coloring.
-- New `Zoom to fit` button in the visualization.
-- New `render_widget()` method on `VisualizationGraph` returns a `GraphWidget` (anywidget) for interactive two-way data sync in Jupyter environments (JupyterLab, Notebook 7, VS Code, Colab).
+- Add convenience method `add_data` and `remove_data` to `GraphWidget`.
+- Added a selection button to the toolbar.
+- Added a layout button to the toolbar if `VG.render_widget` is used.
+- Support the new circular layout.
 
 ## Bug fixes
 
+- Fixed a bug with the theme detection inn VSCode.
+
 ## Improvements
 
-- Migrated JavaScript visualization from `@neo4j-nvl/base` to `@neo4j-ndl/react-graph` React component.
-- Migrated build system from Webpack to Vite.
-- Added anywidget integration as the primary rendering path for Jupyter environments.
+- Allow setting the theme manually in `VG.render(theme="light")` and `VG.render_widget(theme="dark")`.
+- Use typed nodes and relationship traitlets in GraphWidget, i.e., list of Node and Relationship instead of dictionaries.
+- `render` now allows to pass `layout` as a string as well. Previously expected to be a typed `neo4j_viz.Layout`. 
+- Fixed rendering in Marimo notebooks
+
 
 ## Other changes

examples/.gitignore

@@ -1,3 +1,4 @@
 .ipynb_checkpoints
-
+__marimo__
 out/*
+__pycache__

examples/marimo-example.py

@@ -0,0 +1,118 @@
+# type: ignore
+
+import marimo
+
+__generated_with = "0.20.4"
+app = marimo.App(width="full", app_title="Neo4jVizExample")
+
+
+@app.cell
+def _():
+    import marimo as mo
+
+    return (mo,)
+
+
+@app.cell(hide_code=True)
+def _(mo):
+    mo.md(r"""
+    # Neo4j Graph Visualization with Marimo
+
+    This example demonstrates how to use `neo4j-viz` to visualize graphs in Marimo notebooks.
+    We'll create a simple graph representing a social network with people and their relationships.
+    """)
+    return
+
+
+@app.cell
+def _():
+    from neo4j_viz import Node, Relationship, VisualizationGraph
+
+    return Node, Relationship, VisualizationGraph
+
+
+@app.cell(hide_code=True)
+def _(mo):
+    mo.md(r"""
+    ## Create Nodes and Relationships
+    """)
+    return
+
+
+@app.cell
+def _(Node, Relationship):
+    # Create nodes representing people
+    nodes = [
+        Node(id=0, size=10, caption="Person", properties={"age": 25}),
+        Node(id=1, size=10, caption="Product", properties={"price": 100}),
+        Node(id=2, size=20, caption="Product", properties={"price": 200}),
+        Node(id=3, size=10, caption="Person", properties={"age": 30}),
+        Node(id=4, size=10, caption="Product"),
+    ]
+    relationships = [
+        Relationship(source=0, target=1, caption="BUYS"),
+        Relationship(source=0, target=2, caption="BUYS"),
+        Relationship(source=3, target=2, caption="BUYS"),
+    ]
+    return nodes, relationships
+
+
+@app.cell(hide_code=True)
+def _(mo):
+    mo.md(r"""
+    ## Visualize the Graph as a Widget
+    """)
+    return
+
+
+@app.cell
+def _(VisualizationGraph, nodes, relationships):
+    # Create and render the visualization
+    VG = VisualizationGraph(nodes=nodes, relationships=relationships)
+    # Note, we need to pass the theme explicitly in Marimo.
+    widget = VG.render_widget(renderer="canvas")
+    widget
+    return VG, widget
+
+
+@app.cell
+def _(widget):
+    print(widget.theme)
+    print(widget.options)
+    return
+
+
+@app.cell
+def _(Node, Relationship, widget):
+    # Run this cell multiple times - each run adds a new node to the widget above
+    import random
+
+    new_id = len(widget.nodes)
+    target_id = random.choice([n.id for n in widget.nodes])
+
+    new_node = Node(id=new_id, size=10, caption="Person")
+    new_rel = Relationship(source=new_id, target=target_id, caption="KNOWS")
+
+    widget.add_data(nodes=[new_node], relationships=[new_rel])
+    return
+
+
+@app.cell(hide_code=True)
+def _(mo):
+    mo.md(r"""
+    ## Standalone Visualization the Graph
+    """)
+    return
+
+
+@app.cell
+def _(VG):
+    # Save the visualization to a file
+    with open("out/marimo_output.html", "w") as f:
+        print(f"{f}")
+        f.write(VG.render(renderer="canvas").data)
+    return
+
+
+if __name__ == "__main__":
+    app.run()

js-applet/package.json

@@ -27,12 +27,12 @@
   },
   "dependencies": {
     "@anywidget/react": "^0.2.0",
-    "@neo4j-ndl/base": "^4.7.1",
-    "@neo4j-ndl/react": "^4.7.3",
-    "@neo4j-ndl/react-graph": "^1.2.8",
-    "@neo4j-nvl/base": "^1.0.0",
-    "@neo4j-nvl/interaction-handlers": "^1.0.0",
-    "@neo4j-nvl/react": "^1.0.0",
+    "@neo4j-ndl/base": "4.9.7",
+    "@neo4j-ndl/react": "4.9.17",
+    "@neo4j-ndl/react-graph": "1.2.35",
+    "@neo4j-nvl/base": "^1.1.0",
+    "@neo4j-nvl/interaction-handlers": "^1.1.0",
+    "@neo4j-nvl/react": "^1.1.0",
     "@tanstack/react-table": "^8.20.5",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"