anywidget-graph 0.2.9__tar.gz → 0.2.10__tar.gz

{anywidget_graph-0.2.9 → anywidget_graph-0.2.10}/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.2.10
+
+### New Features
+
+- **Spring layout (d3-force)**: New default layout using d3-force with charge, link-distance and collision forces; produces clean hub-spoke rings for hierarchical data like Neo4j browser
+- **Degree-based node sizing**: When no explicit `size_field` is set, nodes are sized by their connection count; hub nodes appear larger and push neighbors into natural rings
+- **Filter-aware layouts**: Switching layout or clicking refresh now re-runs the layout using only visible nodes, respecting type filters and search state
+
+### Improvements
+
+- Spring layout is the new default (renamed to "Default" in the dropdown)
+- Force layout uses `linLogMode` for better community separation
+- Cluster layout filters out hidden node types before packing
+- Filter panel refresh button triggers a layout refresh
+
 ## 0.2.9
 
 ### New Features

{anywidget_graph-0.2.9 → anywidget_graph-0.2.10}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: anywidget-graph
-Version: 0.2.9
+Version: 0.2.10
 Summary: Interactive graph visualization for Python notebooks using anywidget
 Project-URL: Homepage, https://grafeo.dev/
 Project-URL: Repository, https://github.com/GrafeoDB/anywidget-graph

anywidget_graph-0.2.10/examples/test_hierarchy.py

@@ -0,0 +1,99 @@
+"""Marimo demo: hierarchical repo-like graph to test force layout with hub-spoke data."""
+
+import marimo
+
+__generated_with = "0.19.5"
+app = marimo.App(width="medium")
+
+
+@app.cell
+def _():
+    import marimo as mo
+
+    return (mo,)
+
+
+@app.cell
+def _():
+    from anywidget_graph import Graph
+
+    return (Graph,)
+
+
+@app.cell
+def _(Graph):
+    # Simulate a repository structure:
+    # 1 Repository -> 4 Directories -> Files -> TypeDefinitions
+    nodes = [
+        {"id": "repo", "labels": ["Repository"], "name": "my-app"},
+    ]
+    edges = []
+
+    dirs = ["src", "lib", "tests", "config"]
+    file_id = 0
+    type_id = 0
+
+    for d in dirs:
+        did = f"dir_{d}"
+        nodes.append({"id": did, "labels": ["Directory"], "name": d})
+        edges.append({"source": "repo", "target": did, "label": "CONTAINS", "type": "CONTAINS"})
+
+        # Each directory has 3-8 files
+        import random
+
+        random.seed(hash(d))
+        n_files = random.randint(3, 8)
+        for i in range(n_files):
+            fid = f"file_{file_id}"
+            fname = f"{d}/file_{i}.py"
+            nodes.append({"id": fid, "labels": ["File"], "name": fname})
+            edges.append({"source": did, "target": fid, "label": "CONTAINS", "type": "CONTAINS"})
+            file_id += 1
+
+            # Each file has 1-5 type definitions
+            n_types = random.randint(1, 5)
+            for _j in range(n_types):
+                tid = f"type_{type_id}"
+                tname = f"Class_{type_id}"
+                nodes.append({"id": tid, "labels": ["TypeDefinition"], "name": tname})
+                edges.append({"source": fid, "target": tid, "label": "DEFINES", "type": "DEFINES"})
+                type_id += 1
+
+                # Some types depend on other types (cross-file references)
+                if type_id > 3 and random.random() < 0.3:
+                    dep = f"type_{random.randint(0, type_id - 2)}"
+                    edges.append({"source": tid, "target": dep, "label": "DEPENDS_ON", "type": "DEPENDS_ON"})
+
+        # Some cross-directory imports
+        if d != "src":
+            edges.append(
+                {
+                    "source": did,
+                    "target": "dir_src",
+                    "label": "IMPORTS_FROM",
+                    "type": "IMPORTS_FROM",
+                }
+            )
+
+    graph = Graph.from_dict(
+        {"nodes": nodes, "edges": edges},
+        width=1000,
+        height=700,
+    )
+
+    graph  # noqa: B018
+    return (graph,)
+
+
+@app.cell
+def _(graph, mo):
+    mo.md(f"""
+**Selected node:** {graph.selected_node}
+
+Hierarchical repo graph: Repository -> Directories -> Files -> TypeDefinitions
+""")
+    return ()
+
+
+if __name__ == "__main__":
+    app.run()

{anywidget_graph-0.2.9 → anywidget_graph-0.2.10}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "anywidget-graph"
-version = "0.2.9"
+version = "0.2.10"
 description = "Interactive graph visualization for Python notebooks using anywidget"
 readme = "README.md"
 license = "Apache-2.0"

{anywidget_graph-0.2.9 → anywidget_graph-0.2.10}/src/anywidget_graph/ui/__init__.py

@@ -151,6 +151,7 @@ import Sigma from "https://esm.sh/sigma@3.0.0";
 import circular from "https://esm.sh/graphology-layout@0.6.1/circular.js";
 import random from "https://esm.sh/graphology-layout@0.6.1/random.js";
 import forceAtlas2 from "https://esm.sh/graphology-layout-forceatlas2@0.10.1";
+import * as d3Force from "https://esm.sh/d3-force@3.0.0";
 import neo4j from "https://cdn.jsdelivr.net/npm/neo4j-driver@5.28.0/lib/browser/neo4j-web.esm.min.js";
 
 // === Icons ===

{anywidget_graph-0.2.9 → anywidget_graph-0.2.10}/src/anywidget_graph/ui/index.js

@@ -4,6 +4,7 @@
  */
 import Graph from "https://esm.sh/graphology@0.25.4";
 import Sigma from "https://esm.sh/sigma@3.0.0";
+import * as d3Force from "https://esm.sh/d3-force@3.0.0";
 
 import { createToolbar } from "./toolbar.js";
 import { createSchemaPanel } from "./schema.js";
@@ -97,12 +98,18 @@ function computeNodeColor(node, colorField, colorScale, colorDomain) {
   return getCategoricalColor(value);
 }
 
-function computeNodeSize(node, sizeField, sizeDomain, sizeRange) {
+function computeNodeSize(node, sizeField, sizeDomain, sizeRange, degree) {
   if (node.size !== undefined) return node.size;
-  if (!sizeField || node[sizeField] === undefined || !sizeDomain) return 10;
-  const [min, max] = sizeDomain;
-  const t = max > min ? (node[sizeField] - min) / (max - min) : 0.5;
-  return sizeRange[0] + t * (sizeRange[1] - sizeRange[0]);
+  if (sizeField && node[sizeField] !== undefined && sizeDomain) {
+    const [min, max] = sizeDomain;
+    const t = max > min ? (node[sizeField] - min) / (max - min) : 0.5;
+    return sizeRange[0] + t * (sizeRange[1] - sizeRange[0]);
+  }
+  // Auto-size by degree: hub nodes get bigger, leaf nodes smaller
+  if (degree !== undefined && degree > 0) {
+    return Math.max(4, Math.min(30, 4 + Math.sqrt(degree) * 3));
+  }
+  return 8;
 }
 
 function autoLabel(node) {
@@ -152,10 +159,20 @@ function getStylingOpts(model, nodes, edges) {
     if (vals.length > 0) edgeSizeDomain = [Math.min(...vals), Math.max(...vals)];
   }
 
+  // Compute degree map for auto-sizing when no sizeField is set
+  const degreeMap = new Map();
+  if (!sizeField) {
+    edges.forEach((e) => {
+      degreeMap.set(e.source, (degreeMap.get(e.source) || 0) + 1);
+      degreeMap.set(e.target, (degreeMap.get(e.target) || 0) + 1);
+    });
+  }
+
   return {
     colorField, colorScale, colorDomain, sizeField, sizeDomain, sizeRange,
     edgeColorField, edgeColorScale, edgeColorDomain,
     edgeSizeField, edgeSizeDomain, edgeSizeRange,
+    degreeMap,
   };
 }
 
@@ -166,7 +183,7 @@ function buildNodeAttrs(node, opts) {
     nodeType: (node.labels && node.labels.length > 0) ? node.labels[0] : (node.label || "Unlabeled"),
     x: node.x ?? Math.random() * 100,
     y: node.y ?? Math.random() * 100,
-    size: computeNodeSize(node, opts.sizeField, opts.sizeDomain, opts.sizeRange),
+    size: computeNodeSize(node, opts.sizeField, opts.sizeDomain, opts.sizeRange, opts.degreeMap.get(node.id)),
     color: computeNodeColor(node, opts.colorField, opts.colorScale, opts.colorDomain),
   };
 }
@@ -308,7 +325,13 @@ function render({ model, el }) {
   }
 
   // Create panels first (all collapsed by default)
-  const schema = createSchemaPanel(model, onExecuteQuery, null, onFilterChange, onColorChange);
+  function refreshLayout() {
+    applyLayout(model.get("layout") || "spring");
+    rendererRef?.refresh();
+    rendererRef?.getCamera().animatedReset({ duration: 300 });
+  }
+
+  const schema = createSchemaPanel(model, onExecuteQuery, null, onFilterChange, onColorChange, refreshLayout);
   const properties = createPropertiesPanel(model);
   const settings = model.get("show_settings")
     ? createSettingsPanel(model)
@@ -407,7 +430,7 @@ function render({ model, el }) {
 
   rebuildGraph();
 
-  // Layout application (preserves pinned node positions)
+  // Layout application (preserves pinned positions, respects filters)
   function applyLayout(layoutName) {
     if (graph.order === 0) return;
     const pinned = model.get("pinned_nodes") || {};
@@ -420,6 +443,14 @@ function render({ model, el }) {
       }
     });
 
+    // Build a set of visible nodes (respecting type filters and search)
+    const visibleNodes = new Set();
+    graph.forEachNode((id, attrs) => {
+      if (hiddenNodeTypes.size > 0 && hiddenNodeTypes.has(attrs.nodeType)) return;
+      if (searchTerm && !searchVisibleNodes.has(id)) return;
+      visibleNodes.add(id);
+    });
+
     switch (layoutName) {
       case "circular":
         circular.assign(graph);
@@ -428,10 +459,11 @@ function render({ model, el }) {
         random.assign(graph);
         break;
       case "cluster": {
-        // Step 1: Group nodes by type
+        // Step 1: Group visible nodes by type
         const nodes = model.get("nodes") || [];
         const labelGroups = new Map();
         nodes.forEach((node) => {
+          if (!visibleNodes.has(node.id)) return;
           const label = (node.labels && node.labels[0]) || node.label || "__other";
           if (!labelGroups.has(label)) labelGroups.set(label, []);
           labelGroups.get(label).push(node.id);
@@ -598,22 +630,88 @@ function render({ model, el }) {
         break;
       }
       case "force": {
-        const n = graph.order;
-        // Scale layout parameters to graph size for good spreading
-        const iterations = Math.min(300, Math.max(100, n * 3));
-        const gravity = n < 20 ? 0.3 : n < 100 ? 0.5 : 1;
-        const scalingRatio = n < 20 ? 20 : n < 100 ? 10 : 5;
-        forceAtlas2.assign(graph, {
+        // Build temp subgraph with visible nodes only
+        const tempGraph = new Graph({ multi: true });
+        graph.forEachNode((id, attrs) => {
+          if (visibleNodes.has(id)) tempGraph.addNode(id, { ...attrs });
+        });
+        graph.forEachEdge((edgeId, attrs, source, target) => {
+          if (visibleNodes.has(source) && visibleNodes.has(target)) {
+            tempGraph.addEdge(source, target, { ...attrs });
+          }
+        });
+
+        const n = tempGraph.order;
+        if (n === 0) break;
+        const iterations = Math.min(400, Math.max(100, n * 3));
+        const gravity = n < 20 ? 0.3 : n < 100 ? 0.1 : 0.05;
+        const scalingRatio = n < 20 ? 20 : n < 100 ? 15 : 10;
+        forceAtlas2.assign(tempGraph, {
           iterations,
           settings: {
             gravity,
             scalingRatio,
             barnesHutOptimize: n > 50,
             strongGravityMode: false,
+            linLogMode: true,
             adjustSizes: true,
             slowDown: 1,
           },
         });
+
+        // Copy positions back
+        tempGraph.forEachNode((id, attrs) => {
+          if (graph.hasNode(id)) {
+            graph.setNodeAttribute(id, "x", attrs.x);
+            graph.setNodeAttribute(id, "y", attrs.y);
+          }
+        });
+        break;
+      }
+      case "spring": {
+        // d3-force spring layout: produces clean hub-spoke rings for hierarchical data
+        const n = visibleNodes.size || graph.order;
+
+        // Build node and link arrays for d3 (visible nodes only)
+        const d3Nodes = [];
+        const nodeIndexMap = new Map();
+        let idx = 0;
+        graph.forEachNode((id, attrs) => {
+          if (!visibleNodes.has(id)) return;
+          nodeIndexMap.set(id, idx);
+          d3Nodes.push({ id, x: attrs.x, y: attrs.y, size: attrs.size || 8 });
+          idx++;
+        });
+
+        const d3Links = [];
+        graph.forEachEdge((edgeId, attrs, source, target) => {
+          if (nodeIndexMap.has(source) && nodeIndexMap.has(target)) {
+            d3Links.push({ source: nodeIndexMap.get(source), target: nodeIndexMap.get(target) });
+          }
+        });
+
+        // Configure forces
+        const linkDistance = n < 30 ? 50 : n < 100 ? 40 : 30;
+        const chargeStrength = n < 30 ? -200 : n < 100 ? -150 : -80;
+
+        const simulation = d3Force.forceSimulation(d3Nodes)
+          .force("link", d3Force.forceLink(d3Links).distance(linkDistance).strength(0.5))
+          .force("charge", d3Force.forceManyBody().strength(chargeStrength))
+          .force("center", d3Force.forceCenter(0, 0))
+          .force("collide", d3Force.forceCollide().radius((d) => d.size * 1.5 + 2).strength(0.7))
+          .stop();
+
+        // Run simulation synchronously
+        const ticks = Math.min(300, Math.max(100, n * 2));
+        for (let i = 0; i < ticks; i++) simulation.tick();
+
+        // Write positions back to graphology
+        d3Nodes.forEach((d) => {
+          if (graph.hasNode(d.id)) {
+            graph.setNodeAttribute(d.id, "x", d.x);
+            graph.setNodeAttribute(d.id, "y", d.y);
+          }
+        });
         break;
       }
     }
@@ -628,7 +726,7 @@ function render({ model, el }) {
   }
 
   // Apply initial layout
-  applyLayout(model.get("layout") || "force");
+  applyLayout(model.get("layout") || "spring");
 
   // Initialize Sigma renderer with LOD settings
   const nodeCount = graph.order;
@@ -790,11 +888,11 @@ function render({ model, el }) {
   const layoutSelect = document.createElement("select");
   layoutSelect.className = "awg-layout-select";
   layoutSelect.title = "Layout algorithm";
-  [["force", "Force"], ["cluster", "Cluster"], ["circular", "Circular"], ["random", "Random"]].forEach(([val, text]) => {
+  [["spring", "Default"], ["force", "Force"], ["cluster", "Cluster"], ["circular", "Circular"], ["random", "Random"]].forEach(([val, text]) => {
     const opt = document.createElement("option");
     opt.value = val;
     opt.textContent = text;
-    if (val === (model.get("layout") || "force")) opt.selected = true;
+    if (val === (model.get("layout") || "spring")) opt.selected = true;
     layoutSelect.appendChild(opt);
   });
   layoutSelect.addEventListener("change", () => {
@@ -1073,7 +1171,7 @@ function render({ model, el }) {
   // Update graph when data or styling changes
   function onDataOrStyleChange() {
     rebuildGraph();
-    applyLayout(model.get("layout") || "force");
+    applyLayout(model.get("layout") || "spring");
 
     // Update LOD thresholds based on new graph size
     const n = graph.order;
@@ -1098,11 +1196,7 @@ function render({ model, el }) {
   model.on("change:edge_size_range", onDataOrStyleChange);
 
   // Layout change handler
-  model.on("change:layout", () => {
-    applyLayout(model.get("layout"));
-    renderer.refresh();
-    renderer.getCamera().animatedReset({ duration: 300 });
-  });
+  model.on("change:layout", refreshLayout);
 
   // === Demo Mode: auto-init WASM and populate data ===
   if (model.get("_demo_mode")) {

{anywidget_graph-0.2.9 → anywidget_graph-0.2.10}/src/anywidget_graph/ui/schema.js

@@ -62,7 +62,7 @@ function extractTypesFromData(model) {
  * @param {function} onFilterChange - callback(hiddenNodeTypes: Set, hiddenEdgeTypes: Set)
  * @param {function} onColorChange - callback(typeColorMap: Map<string, string>)
  */
-export function createSchemaPanel(model, onExecuteQuery, callbacks, onFilterChange, onColorChange) {
+export function createSchemaPanel(model, onExecuteQuery, callbacks, onFilterChange, onColorChange, onRefreshLayout) {
   const panel = document.createElement("div");
   panel.className = "awg-schema-panel";
 
@@ -85,8 +85,11 @@ export function createSchemaPanel(model, onExecuteQuery, callbacks, onFilterChan
   const refreshBtn = document.createElement("button");
   refreshBtn.className = "awg-btn awg-btn-icon awg-btn-sm";
   refreshBtn.innerHTML = ICONS.refresh;
-  refreshBtn.title = "Refresh schema";
-  refreshBtn.addEventListener("click", () => refreshSchema(model));
+  refreshBtn.title = "Refresh layout";
+  refreshBtn.addEventListener("click", () => {
+    refreshSchema(model);
+    onRefreshLayout?.();
+  });
   headerBtns.appendChild(refreshBtn);
 
   const closeBtn = document.createElement("button");

{anywidget_graph-0.2.9 → anywidget_graph-0.2.10}/src/anywidget_graph/widget.py

@@ -76,7 +76,7 @@ class Graph(anywidget.AnyWidget):
     edge_size_range = traitlets.List(default_value=[1, 8]).tag(sync=True)
 
     # === Layout ===
-    layout = traitlets.Unicode(default_value="force").tag(sync=True)
+    layout = traitlets.Unicode(default_value="spring").tag(sync=True)
 
     # === Hover / Tooltip ===
     show_tooltip = traitlets.Bool(default_value=True).tag(sync=True)
@@ -929,7 +929,7 @@ edges.forEach(edge => {{
 }});
 
 // --- Apply layout ---
-const layoutName = OPTIONS.layout || "force";
+const layoutName = OPTIONS.layout || "spring";
 if (graph.order > 0) {{
   switch (layoutName) {{
     case "circular":

{anywidget_graph-0.2.9 → anywidget_graph-0.2.10}/tests/test_graph.py

@@ -51,7 +51,7 @@ def test_default_options():
     assert graph.show_labels is True
     assert graph.show_edge_labels is False
     assert graph.dark_mode is True
-    assert graph.layout == "force"
+    assert graph.layout == "spring"
     assert graph.selection_mode == "click"
     assert graph.database_backend == "grafeo"
     assert graph.max_nodes == 300