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

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

@@ -1,5 +1,34 @@
 # Changelog
 
+## 0.3.0
+
+### New Features
+
+- **Automatic dark mode**: Detects host theme (marimo `class="dark"`, `data-theme`, `prefers-color-scheme`) and syncs automatically via MutationObserver
+
+### Improvements
+
+- Increased node spread in spring layout: stronger charge repulsion, larger link distance and collision radius for clearer hub-spoke separation
+- Spring layout renamed to "Default" in the layout dropdown
+- Updated color palette: blue accent and slate-based neutrals, replacing the previous indigo tint
+- Theme toggle auto-hidden when running inside a themed host (e.g. marimo)
+- Dark mode label colors update dynamically with theme changes
+
+## 0.2.10
+
+### New Features
+
+- **d3-force spring layout**: New default layout using d3-force with charge, link-distance and collision forces; produces clean hub-spoke rings for hierarchical data
+- **Degree-based node sizing**: Nodes auto-sized by connection count when no explicit `size_field` is set; hub nodes appear larger, pushing neighbors into natural rings
+- **Filter-aware layouts**: Switching layout or clicking refresh re-runs the layout using only visible nodes, respecting type filters and search state
+
+### Improvements
+
+- Spring layout is the new default
+- 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.3.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: anywidget-graph
-Version: 0.2.9
+Version: 0.3.0
 Summary: Interactive graph visualization for Python notebooks using anywidget
 Project-URL: Homepage, https://grafeo.dev/
 Project-URL: Repository, https://github.com/GrafeoDB/anywidget-graph
@@ -45,6 +45,8 @@ Interactive graph visualization for Python notebooks.
 
 Works with Marimo, Jupyter, VS Code, Colab, anywhere [anywidget](https://anywidget.dev/) runs.
 
+![anywidget-graph demo](assets/demo.png)
+
 ## Features
 
 - **Universal**: One widget, every notebook environment

{anywidget_graph-0.2.9 → anywidget_graph-0.3.0}/README.md

@@ -4,6 +4,8 @@ Interactive graph visualization for Python notebooks.
 
 Works with Marimo, Jupyter, VS Code, Colab, anywhere [anywidget](https://anywidget.dev/) runs.
 
+![anywidget-graph demo](assets/demo.png)
+
 ## Features
 
 - **Universal**: One widget, every notebook environment

anywidget_graph-0.3.0/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.3.0}/pyproject.toml

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

{anywidget_graph-0.2.9 → anywidget_graph-0.3.0}/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.3.0}/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),
   };
 }
@@ -266,15 +283,45 @@ function render({ model, el }) {
   wrapper.style.height = model.get("height") + "px";
   wrapper.style.maxHeight = model.get("height") + "px";
 
-  // Apply dark mode
+  // Auto-detect host theme (marimo uses Tailwind class="dark" on <html>)
+  function detectHostDark() {
+    const html = document.documentElement;
+    if (html.classList.contains("dark")) return true;
+    if (html.dataset.theme === "dark") return true;
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) return true;
+    return false;
+  }
+
   function updateTheme() {
-    wrapper.classList.toggle("awg-dark", model.get("dark_mode"));
+    const dark = model.get("dark_mode");
+    wrapper.classList.toggle("awg-dark", dark);
+    rendererRef?.setSetting("labelColor", { color: dark ? "#e0e0e0" : "#333" });
+    rendererRef?.refresh();
+  }
+
+  // Detect if inside a themed host (marimo, etc.)
+  const hasHostTheme = !!el.getRootNode()?.host?.tagName?.startsWith("MARIMO-");
+  if (hasHostTheme) {
+    wrapper.classList.add("awg-auto-theme");
+    model.set("dark_mode", detectHostDark());
+    model.save_changes();
+    updateTheme();
+    const themeObserver = new MutationObserver(() => {
+      const dark = detectHostDark();
+      if (model.get("dark_mode") !== dark) {
+        model.set("dark_mode", dark);
+        model.save_changes();
+        updateTheme();
+      }
+    });
+    themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] });
+  } else {
+    updateTheme();
   }
-  updateTheme();
+
+  // Manual toggle from settings panel still works
   model.on("change:dark_mode", () => {
     updateTheme();
-    rendererRef?.setSetting("labelColor", { color: model.get("dark_mode") ? "#e0e0e0" : "#333" });
-    rendererRef?.refresh();
   });
 
   // Create query executor callback
@@ -308,7 +355,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 +460,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 +473,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 +489,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 +660,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: generous spacing so hub-spoke rings are clear
+        const linkDistance = n < 30 ? 80 : n < 100 ? 60 : 45;
+        const chargeStrength = n < 30 ? -400 : n < 100 ? -300 : -200;
+
+        const simulation = d3Force.forceSimulation(d3Nodes)
+          .force("link", d3Force.forceLink(d3Links).distance(linkDistance).strength(0.4))
+          .force("charge", d3Force.forceManyBody().strength(chargeStrength))
+          .force("center", d3Force.forceCenter(0, 0))
+          .force("collide", d3Force.forceCollide().radius((d) => d.size * 2 + 4).strength(0.8))
+          .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 +756,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 +918,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 +1201,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 +1226,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.3.0}/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.3.0}/src/anywidget_graph/ui/settings.js

@@ -58,9 +58,8 @@ export function createSettingsPanel(model, callbacks) {
   const form = document.createElement("div");
   form.className = "awg-panel-form";
 
-  // Dark mode toggle
-  form.appendChild(
-    createFormGroup("Theme", () => {
+  // Dark mode toggle (hidden when host provides theme)
+  const themeGroup = createFormGroup("Theme", () => {
       const toggle = document.createElement("label");
       toggle.className = "awg-toggle";
       const checkbox = document.createElement("input");
@@ -82,8 +81,9 @@ export function createSettingsPanel(model, callbacks) {
       toggle.appendChild(slider);
       toggle.appendChild(label);
       return toggle;
-    })
-  );
+    });
+  themeGroup.classList.add("awg-theme-toggle");
+  form.appendChild(themeGroup);
 
   // Backend selector
   const backendSelect = document.createElement("select");

{anywidget_graph-0.2.9 → anywidget_graph-0.3.0}/src/anywidget_graph/ui/styles.css

@@ -2,35 +2,35 @@
  * Styles for anywidget-graph UI components.
  */
 
-/* === CSS VARIABLES === */
+/* === CSS VARIABLES (matches marimo theme) === */
 .awg-wrapper {
   --awg-bg: #ffffff;
   --awg-bg-secondary: #f8f9fa;
-  --awg-bg-tertiary: #f3f4f6;
-  --awg-border: #e5e7eb;
-  --awg-text: #111827;
+  --awg-bg-tertiary: #f1f5f9;
+  --awg-border: #e2e8f0;
+  --awg-text: #0f172a;
   --awg-text-secondary: #6b7280;
   --awg-text-muted: #9ca3af;
-  --awg-accent: #6366f1;
-  --awg-accent-hover: #4f46e5;
-  --awg-graph-bg: #fafafa;
+  --awg-accent: #0880ea;
+  --awg-accent-hover: #0670d0;
+  --awg-graph-bg: #ffffff;
   --awg-input-bg: #ffffff;
-  --awg-input-border: #d1d5db;
+  --awg-input-border: #e2e8f0;
 }
 
 .awg-wrapper.awg-dark {
-  --awg-bg: #1a1a2e;
-  --awg-bg-secondary: #252542;
-  --awg-bg-tertiary: #3a3a5c;
-  --awg-border: #3a3a5c;
-  --awg-text: #e0e0e0;
+  --awg-bg: #181c1a;
+  --awg-bg-secondary: #252927;
+  --awg-bg-tertiary: #2f3533;
+  --awg-border: #3b403e;
+  --awg-text: #eceeed;
   --awg-text-secondary: #a0aec0;
-  --awg-text-muted: #888;
-  --awg-accent: #6366f1;
-  --awg-accent-hover: #818cf8;
-  --awg-graph-bg: #1a1a2e;
-  --awg-input-bg: #1a1a2e;
-  --awg-input-border: #3a3a5c;
+  --awg-text-muted: #9ca3af;
+  --awg-accent: #28879f;
+  --awg-accent-hover: #1d5b6a;
+  --awg-graph-bg: #181c1a;
+  --awg-input-bg: #181c1a;
+  --awg-input-border: #3b403e;
 }
 
 /* === BASE === */
@@ -515,6 +515,11 @@
   color: var(--awg-text);
 }
 
+/* Hide dark mode toggle when host provides theme */
+.awg-wrapper.awg-auto-theme .awg-theme-toggle {
+  display: none;
+}
+
 /* === SCHEMA PANEL (LEFT) === */
 .awg-schema-panel {
   width: 0;

{anywidget_graph-0.2.9 → anywidget_graph-0.3.0}/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.3.0}/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

{anywidget_graph-0.2.9 → anywidget_graph-0.3.0}/uv.lock

@@ -154,7 +154,7 @@ wheels = [
 
 [[package]]
 name = "anywidget-graph"
-version = "0.2.9"
+version = "0.3.0"
 source = { editable = "." }
 dependencies = [
     { name = "anywidget" },