d3graph 3.0.1__tar.gz → 3.1.0__tar.gz

{d3graph-3.0.1/d3graph.egg-info → d3graph-3.1.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 3.0.1
+Version: 3.1.0
 Summary: Python package to create interactive network based on d3js.
 Author-email: Erdogan Taskesen <erdogant@gmail.com>
 License-Expression: BSD-3-Clause
@@ -28,6 +28,7 @@ Requires-Dist: markupsafe
 Requires-Dist: python-louvain
 Requires-Dist: datazets
 Requires-Dist: distfit
+Requires-Dist: tqdm
 Dynamic: license-file
 
 # D3graph: Interactive force-directed networks

{d3graph-3.0.1 → d3graph-3.1.0}/d3graph/__init__.py

@@ -17,7 +17,7 @@ from d3graph.d3graph import (
 
 __author__ = 'Erdogan Tasksen'
 __email__ = 'erdogant@gmail.com'
-__version__ = '3.0.1'
+__version__ = '3.1.0'
 
 # Setup root logger
 _logger = logging.getLogger('d3graph')

{d3graph-3.0.1 → d3graph-3.1.0}/d3graph/d3js/d3graphscript.js

@@ -58,11 +58,26 @@ function d3graphscript(config = {
     var useCanvasEdges = false;
     var canvasEl, ctx;
     var currentTransform = { scale: 1, translate: [0, 0] };
+    var zoomBehavior = null; // set when SVG is created; used by _jumpToNode to sync state
     // Master on/off switch for edges (independent of the weight/component
     // sliders) — lets the user clear visual clutter on large graphs to see
     // node structure/clustering without redrawing or refiltering anything.
     var edgesVisible = true;
 
+    // ---- VISUAL SCALE MULTIPLIERS (physics panel sliders) ----
+    // Independent of the per-node data values; multiplied in at render time so
+    // changing them never mutates the underlying data and is instantly reversible.
+    var edgeWidthMult = 1.0;   // 0.1 – 5.0, driven by the "Edge Width" slider
+    var nodeSizeMult  = 1.0;   // 0.1 – 5.0, driven by the "Node Size" slider
+
+    // ---- PERFORMANCE: cached quadtree for collision detection ----
+    // Rebuilding a quadtree from scratch every single tick is O(N log N) and
+    // dominates frame time on graphs with thousands of nodes.  We reuse one
+    // quadtree across the whole tick instead — the quadtree is still built once
+    // per tick (nodes moved since last tick), but NOT once per node per tick.
+    var _collideQuadtree = null;
+    var _collideTickId   = -1;   // matches tickCount so we rebuild once per tick
+
     // ---- STATS PANEL (recolor nodes by a network statistic) ----
     // node_pagerank / node_hits_hub / node_hits_authority are precomputed
     // server-side (networkx) and normalized to [0, 1]; the panel just picks
@@ -126,6 +141,9 @@ function d3graphscript(config = {
     // structure pops. highlightedNodeIndex is null when nothing is
     // highlighted, or the .index of the currently-highlighted node.
     var highlightedNodeIndex = null;
+
+    // ---- SEARCH ----
+    var searchHighlightedIndex = null; // node .index of the current search hit
     // True (default): clicking a node highlights every node/edge in its whole
     // connected component, however many hops away. False: only its directly-
     // connected (one-hop) neighbors/edges light up, the old behavior.
@@ -400,17 +418,15 @@ function d3graphscript(config = {
       .style("top", 0)
       .style("left", 0)
       .style("background-color", "transparent")
-      .call(d3.behavior.zoom().on("zoom", function () {
+      .call((zoomBehavior = d3.behavior.zoom().on("zoom", function () {
         panOrZoomOccurred = true;
         svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
-        // Single class toggle (cheap) rather than iterating every label on
-        // every zoom/pan event — CSS handles hiding all descendant <text>.
         svg.classed("labels-hidden", d3.event.scale < labelZoomThreshold);
         currentTransform.scale = d3.event.scale;
         currentTransform.translate = d3.event.translate;
         drawCanvasEdges();
         drawDensityLayer();
-      }))
+      })))
       .on("dblclick.zoom", null)
       .append("g")
 
@@ -418,48 +434,104 @@ function d3graphscript(config = {
     // pan/zoom transform. No-ops when the graph is small enough to stay on SVG.
     function drawCanvasEdges() {
       if (!useCanvasEdges || !ctx || !edgesVisible) return;
+
+      var sc = currentTransform.scale;
+      var tx = currentTransform.translate[0];
+      var ty = currentTransform.translate[1];
+
+      // Compute viewport bounds in graph-space so we can skip edges whose
+      // both endpoints are well outside the visible area (cheap early-out).
+      var vpMargin = 20 / sc; // a small buffer in graph units
+      var vpMinX = (-tx / sc) - vpMargin;
+      var vpMaxX = ((canvasEl.width  - tx) / sc) + vpMargin;
+      var vpMinY = (-ty / sc) - vpMargin;
+      var vpMaxY = ((canvasEl.height - ty) / sc) + vpMargin;
+
       ctx.save();
       ctx.setTransform(1, 0, 0, 1, 0, 0);
       ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
-      ctx.setTransform(currentTransform.scale, 0, 0, currentTransform.scale, currentTransform.translate[0], currentTransform.translate[1]);
-      for (var i = 0; i < graph.links.length; i++) {
-        var d = graph.links[i];
+      ctx.setTransform(sc, 0, 0, sc, tx, ty);
+
+      // Batch edges by (strokeStyle + lineWidth + globalAlpha + shadowBlur +
+      // dash pattern) to minimise expensive canvas state changes.  Instead of
+      // setting style then stroking once per edge, we bucket all edges that
+      // share the same style, then set the style once and stroke the whole
+      // bucket in a single path.  On a 20 000-edge graph this typically
+      // reduces unique state-change sequences from 20 000 to a handful.
+
+      // Bucket map: key → { path points, ctx state }
+      // We collect lines per bucket, then replay with a single ctx state set.
+      var buckets = {}; // key → { a, lw, sw, sb, sc_str, dash, lines: [[x1,y1,x2,y2],...] }
+
+      var links = graph.links;
+      var nLinks = links.length;
+
+      for (var i = 0; i < nLinks; i++) {
+        var d = links[i];
         if (!d.source || !d.target || typeof d.source.x !== 'number') continue;
-        ctx.beginPath();
-        ctx.moveTo(d.source.x, d.source.y);
-        ctx.lineTo(d.target.x, d.target.y);
-        ctx.strokeStyle = d.edge_color || '#999';
+
+        var sx = d.source.x, sy = d.source.y;
+        var ex = d.target.x, ey = d.target.y;
+
+        // Viewport cull: skip if both endpoints are outside on the same side.
+        if ((sx < vpMinX && ex < vpMinX) || (sx > vpMaxX && ex > vpMaxX) ||
+            (sy < vpMinY && ey < vpMinY) || (sy > vpMaxY && ey > vpMaxY)) continue;
+
         var baseOpacity = (d.edge_opacity !== undefined && d.edge_opacity !== null) ? d.edge_opacity : 0.6;
-        var baseWidth = d.edge_width || 1;
-        ctx.setLineDash(d.edge_style === 'dashed' ? [6, 3] : d.edge_style === 'dotted' ? [1.5, 3] : []);
+        var baseWidth   = (d.edge_width || 1) * edgeWidthMult;
+        var col         = d.edge_color || '#999';
+        var dashStyle   = d.edge_style;
+
+        var alpha, lw, shadowBlur, shadowColor;
 
         if (highlightedNodeIndex !== null) {
-          // Click-highlight takes priority over the stat-driven boost below —
-          // same precedence SVG-mode edges get in applyNeighborHighlightStyling().
-          // When highlightedComponentSet is set (highlightFullNetwork), an edge
-          // counts as connected if BOTH its ends are anywhere in the clicked
-          // node's connected component, not just directly touching it.
           var isConnected = highlightedComponentSet
             ? (highlightedComponentSet[d.source.index] && highlightedComponentSet[d.target.index])
             : (d.source.index === highlightedNodeIndex || d.target.index === highlightedNodeIndex);
           if (isConnected) {
-            ctx.globalAlpha = 1;
-            ctx.lineWidth = baseWidth * EDGE_GLOW_WIDTH_MULT;
-            ctx.shadowColor = EDGE_GLOW_COLOR;
-            ctx.shadowBlur = EDGE_GLOW_CANVAS_BLUR;
+            alpha = 1; lw = baseWidth * EDGE_GLOW_WIDTH_MULT;
+            shadowBlur = EDGE_GLOW_CANVAS_BLUR; shadowColor = EDGE_GLOW_COLOR;
           } else {
-            ctx.globalAlpha = NEIGHBOR_DIM_OPACITY;
-            ctx.lineWidth = baseWidth;
-            ctx.shadowBlur = 0;
+            alpha = NEIGHBOR_DIM_OPACITY; lw = baseWidth;
+            shadowBlur = 0; shadowColor = '';
           }
         } else {
-          ctx.globalAlpha = statHighlightActive ? Math.min(1, baseOpacity * EDGE_HIGHLIGHT_OPACITY_MULT) : baseOpacity;
-          ctx.lineWidth = statHighlightActive ? baseWidth * EDGE_HIGHLIGHT_WIDTH_MULT : baseWidth;
-          ctx.shadowBlur = 0;
+          alpha      = statHighlightActive ? Math.min(1, baseOpacity * EDGE_HIGHLIGHT_OPACITY_MULT) : baseOpacity;
+          lw         = statHighlightActive ? baseWidth * EDGE_HIGHLIGHT_WIDTH_MULT : baseWidth;
+          shadowBlur = 0; shadowColor = '';
         }
 
+        // Round to 2 decimal places for bucketing to avoid float key explosion.
+        var key = col + '|' + (Math.round(alpha * 100)) + '|' + (Math.round(lw * 100)) +
+                  '|' + shadowBlur + '|' + (shadowColor || '') + '|' + (dashStyle || '');
+        if (!buckets[key]) {
+          buckets[key] = { col: col, alpha: alpha, lw: lw,
+                           shadowBlur: shadowBlur, shadowColor: shadowColor,
+                           dash: dashStyle === 'dashed' ? [6, 3] : dashStyle === 'dotted' ? [1.5, 3] : [],
+                           lines: [] };
+        }
+        buckets[key].lines.push(sx, sy, ex, ey);
+      }
+
+      // Replay each bucket as a single compound path — one state setup, one stroke.
+      for (var key in buckets) {
+        var b = buckets[key];
+        ctx.strokeStyle  = b.col;
+        ctx.globalAlpha  = b.alpha;
+        ctx.lineWidth    = b.lw;
+        ctx.shadowBlur   = b.shadowBlur;
+        ctx.shadowColor  = b.shadowColor || '';
+        ctx.setLineDash(b.dash);
+
+        ctx.beginPath();
+        var pts = b.lines;
+        for (var j = 0, jn = pts.length; j < jn; j += 4) {
+          ctx.moveTo(pts[j],     pts[j + 1]);
+          ctx.lineTo(pts[j + 2], pts[j + 3]);
+        }
         ctx.stroke();
       }
+
       ctx.restore();
     }
 
@@ -601,7 +673,7 @@ function d3graphscript(config = {
         linkEnter.append("title").text(function(d) { return d.tooltip; });
         link.attr("marker-end", function(d) {
           if (config.directed) { return 'url(#marker_' + d.marker_end + ')' } });
-        link.style("stroke-width", function(d) { return d.edge_width; });
+        link.style("stroke-width", function(d) { return (parseFloat(d.edge_width) || 1) * edgeWidthMult; });
         link.style("stroke", function(d) { return d.edge_color; });
         link.style("stroke-dasharray", function(d) { return d.edge_style; });
         link.style("opacity", function(d) { return d.edge_opacity; });
@@ -694,6 +766,17 @@ function d3graphscript(config = {
     // Append the correct shape per node (circle, ellipse, rect, triangle, etc.)
     appendShape(node);
     
+    // Search highlight rings — two concentric circles behind each node,
+    // made visible via the .search-hit CSS class on the parent <g>.
+    // They live in graph-space (same SVG coordinate system as nodes) and
+    // are repositioned every tick alongside node shapes in updatePositions().
+    node.each(function() {
+      var g = d3.select(this);
+      var rings = g.insert('g', ':first-child').attr('class', 'search-rings');
+      rings.append('circle').attr('class', 'search-ring search-ring-border');
+      rings.append('circle').attr('class', 'search-ring search-ring-yellow');
+    });
+
     // Text in nodes
     node.append("text")
       .attr("dx",  function(d) { return config.node_text_inside ? 0 : 10; })
@@ -744,6 +827,8 @@ function d3graphscript(config = {
       //   path              →  transform translate(x, y)
       // Scoped to the bound `node` selection instead of re-querying the
       // entire DOM every tick (was: d3.selectAll(".node-shape")).
+      // nodeSizeMult is applied here for position-independent shapes (path),
+      // and through renderStatStyling / applyNodeSizeScale for radius attrs.
       node.select(".node-shape").each(function(d) {
         var el  = d3.select(this);
         var tag = this.tagName.toLowerCase();
@@ -754,6 +839,12 @@ function d3graphscript(config = {
         }
       });
 
+      // Search ring positions — cheap: two attr sets per node per tick.
+      node.select('.search-rings').each(function(d) {
+        var r = (parseFloat(d.node_size) || 8) * nodeSizeMult + 5;
+        d3.select(this).selectAll('.search-ring').attr('cx', d.x).attr('cy', d.y).attr('r', r);
+      });
+
       // Scoped to node labels only (was: d3.selectAll("text"), which also
       // re-matched every link-text element on every tick).
       node.select("text").attr("x", function(d) { return d.x; })
@@ -765,6 +856,54 @@ function d3graphscript(config = {
       if (densityVisible) drawDensityLayer();
     }
 
+    // One-shot pass to apply the visual scale multipliers to all SVG nodes and
+    // edges without touching positions.  Called when a slider changes, not
+    // every tick — so the cost is negligible compared to the tick loop.
+    function applyVisualScaleMultipliers() {
+      // Node sizes
+      node.select(".node-shape").each(function(d) {
+        var el  = d3.select(this);
+        var tag = this.tagName.toLowerCase();
+        var baseR = parseFloat(d.node_size) || 8;
+        // Also factor in any stat-driven scaling that renderStatStyling applied.
+        var statScale = 1;
+        if (currentStatKey && currentStatKey !== 'network_clustering') {
+          var v = d[currentStatKey + '_colorNorm'];
+          if (typeof v === 'number' && !isNaN(v)) {
+            var isSignificance = (currentStatKey === 'node_proba');
+            var sizeVal = isSignificance ? (1 - (d[currentStatKey] || 0)) : v;
+            statScale = 1.2 + sizeVal * 1.3;
+          }
+        }
+        var r = baseR * nodeSizeMult * statScale;
+        if (tag === 'circle') {
+          el.attr('r', r);
+        } else if (tag === 'ellipse') {
+          el.attr('rx', r * 1.6).attr('ry', r);
+        } else if (tag === 'path') {
+          el.attr('d', shapePathD(d.node_marker, r));
+        }
+      });
+
+      // Search ring radii
+      node.select('.search-rings').each(function(d) {
+        var r = (parseFloat(d.node_size) || 8) * nodeSizeMult + 5;
+        d3.select(this).selectAll('.search-ring').attr('r', r);
+      });
+
+      // SVG edge widths
+      if (!useCanvasEdges) {
+        link.style("stroke-width", function(d) {
+          var w = parseFloat(d.edge_width) || 1;
+          w *= edgeWidthMult;
+          if (statHighlightActive) w *= EDGE_HIGHLIGHT_WIDTH_MULT;
+          return w;
+        });
+      } else {
+        drawCanvasEdges();
+      }
+    }
+
     force.on("tick", function() {
       // Auto-stop after maxTicks so a large graph doesn't keep re-running
       // collision detection / layout math for thousands of frames while
@@ -811,23 +950,31 @@ function d3graphscript(config = {
 
 
   // collision detection
-
-  var padding = 1, // separation between circles
-    radius = 8;
+  // Optimisation: build the quadtree ONCE per tick (stored in _collideQuadtree)
+  // rather than once per visited node.  On a 5 000-node graph this alone cuts
+  // the per-tick cost of collision from O(N² log N) rebuilds to one O(N log N)
+  // build + O(N log N) queries.
+  var padding = 1; // separation between circles
 
   function collide(alpha) {
-    var quadtree = d3.geom.quadtree(graph.nodes);
+    // Rebuild the shared quadtree only when we have advanced to a new tick.
+    if (_collideTickId !== tickCount) {
+      _collideQuadtree = d3.geom.quadtree(graph.nodes);
+      _collideTickId   = tickCount;
+    }
+    var quadtree = _collideQuadtree;
     return function(d) {
-      var rb = 2 * radius + padding,
-        nx1 = d.x - rb,
-        nx2 = d.x + rb,
-        ny1 = d.y - rb,
-        ny2 = d.y + rb;
+      // Use the node's actual rendered radius (scaled by nodeSizeMult) so
+      // collision boundaries match what the user sees on screen.
+      var r  = (parseFloat(d.node_size) || 8) * nodeSizeMult;
+      var rb = r * 2 + padding;
+      var nx1 = d.x - rb, nx2 = d.x + rb,
+          ny1 = d.y - rb, ny2 = d.y + rb;
       quadtree.visit(function(quad, x1, y1, x2, y2) {
         if (quad.point && (quad.point !== d)) {
           var x = d.x - quad.point.x,
-            y = d.y - quad.point.y,
-            l = Math.sqrt(x * x + y * y);
+              y = d.y - quad.point.y,
+              l = Math.sqrt(x * x + y * y);
           if (l < rb) {
             l = (l - rb) / l * alpha;
             d.x -= x *= l;
@@ -1007,7 +1154,7 @@ function d3graphscript(config = {
           var statValue = currentStatKey ? d[currentStatKey] : null;
           var hasStatValue = currentStatKey && typeof statValue === "number" && !isNaN(statValue);
           var statScale = hasStatValue ? 1.2 + statValue * 1.3 : 1;
-          var clickScale = statScale * {{ CLICK_SIZE }};
+          var clickScale = statScale * {{ CLICK_SIZE }} * nodeSizeMult;
 
           if (tag === "circle") {
             el.attr("r", baseR * clickScale);
@@ -1656,12 +1803,13 @@ function d3graphscript(config = {
         ? SIGNIFICANCE_BORDER_COLOR
         : d.node_color_edge;
 
+      var scaledR = baseR * scale * nodeSizeMult;
       if (tag === 'circle') {
-        el.attr('r', baseR * scale);
+        el.attr('r', scaledR);
       } else if (tag === 'ellipse') {
-        el.attr('rx', baseR * 1.6 * scale).attr('ry', baseR * scale);
+        el.attr('rx', scaledR * 1.6).attr('ry', scaledR);
       } else if (tag === 'path') {
-        el.attr('d', shapePathD(d.node_marker, baseR * scale));
+        el.attr('d', shapePathD(d.node_marker, scaledR));
       }
 
       el.style('fill', fillColor)
@@ -1673,7 +1821,7 @@ function d3graphscript(config = {
     // SVG-mode edges: bump width/opacity directly on the current selection.
     // Canvas-mode edges read statHighlightActive inside drawCanvasEdges().
     link.style("stroke-width", function(d) {
-      var w = parseFloat(d.edge_width) || 1;
+      var w = (parseFloat(d.edge_width) || 1) * edgeWidthMult;
       return statHighlightActive ? w * EDGE_HIGHLIGHT_WIDTH_MULT : w;
     });
     link.style("opacity", function(d) {
@@ -1863,26 +2011,53 @@ function d3graphscript(config = {
   wirePhysicsSlider('collisionSlider', 'collisionValue', setCollision);
   wirePhysicsSlider('linkTensionSlider', 'linkTensionValue', setLinkTension);
 
+  // ---- Edge Width multiplier slider ----
+  function setEdgeWidthMult(value) {
+    edgeWidthMult = value;
+    // Cheap visual-only update; no need to reheat the simulation.
+    applyVisualScaleMultipliers();
+  }
+  wirePhysicsSlider('edgeWidthMultSlider', 'edgeWidthMultValue', setEdgeWidthMult);
+
+  // ---- Node Size multiplier slider ----
+  function setNodeSizeMult(value) {
+    nodeSizeMult = value;
+    // Invalidate cached quadtree so collision detection uses updated radii.
+    _collideTickId = -1;
+    applyVisualScaleMultipliers();
+  }
+  wirePhysicsSlider('nodeSizeMultSlider', 'nodeSizeMultValue', setNodeSizeMult);
+
   var physicsResetBtn = document.getElementById('physicsResetButton');
   if (physicsResetBtn) {
     physicsResetBtn.addEventListener('click', function() {
       setCharge(DEFAULT_CHARGE);
       setCollision(DEFAULT_COLLISION);
       setLinkTension(DEFAULT_LINK_TENSION);
+      setEdgeWidthMult(1.0);
+      setNodeSizeMult(1.0);
 
-      var chargeSlider = document.getElementById('chargeSlider');
+      var chargeSlider    = document.getElementById('chargeSlider');
       var collisionSlider = document.getElementById('collisionSlider');
-      var tensionSlider = document.getElementById('linkTensionSlider');
-      if (chargeSlider) chargeSlider.value = DEFAULT_CHARGE;
+      var tensionSlider   = document.getElementById('linkTensionSlider');
+      var ewSlider        = document.getElementById('edgeWidthMultSlider');
+      var nsSlider        = document.getElementById('nodeSizeMultSlider');
+      if (chargeSlider)    chargeSlider.value    = DEFAULT_CHARGE;
       if (collisionSlider) collisionSlider.value = DEFAULT_COLLISION;
-      if (tensionSlider) tensionSlider.value = DEFAULT_LINK_TENSION;
+      if (tensionSlider)   tensionSlider.value   = DEFAULT_LINK_TENSION;
+      if (ewSlider)        ewSlider.value        = 1.0;
+      if (nsSlider)        nsSlider.value        = 1.0;
 
-      var chargeVal = document.getElementById('chargeValue');
+      var chargeVal    = document.getElementById('chargeValue');
       var collisionVal = document.getElementById('collisionValue');
-      var tensionVal = document.getElementById('linkTensionValue');
-      if (chargeVal) chargeVal.textContent = DEFAULT_CHARGE;
+      var tensionVal   = document.getElementById('linkTensionValue');
+      var ewVal        = document.getElementById('edgeWidthMultValue');
+      var nsVal        = document.getElementById('nodeSizeMultValue');
+      if (chargeVal)    chargeVal.textContent    = DEFAULT_CHARGE;
       if (collisionVal) collisionVal.textContent = DEFAULT_COLLISION;
-      if (tensionVal) tensionVal.textContent = DEFAULT_LINK_TENSION;
+      if (tensionVal)   tensionVal.textContent   = DEFAULT_LINK_TENSION;
+      if (ewVal)        ewVal.textContent        = '1';
+      if (nsVal)        nsVal.textContent        = '1';
     });
   }
 
@@ -2036,4 +2211,177 @@ function d3graphscript(config = {
     
     window.addEventListener("resize", resizeGraph);
 
+  // =========================================================================
+  // SEARCH
+  // Matches node_name (label) and name (id) fields.  Results are ranked:
+  // prefix matches first, then substring; ties broken by shorter name.
+  // Selecting a result highlights the node with a yellow ring AND selects it
+  // into the Node Info panel (same as clicking it directly).
+  // =========================================================================
+  var searchInputEl   = document.getElementById('searchInput');
+  var searchResultsEl = document.getElementById('searchResults');
+  if (searchInputEl && searchResultsEl) {
+    var _searchActiveIdx = -1;
+    var _searchMatches   = []; // array of node datum objects
+
+    function _clearSearchHighlight() {
+      searchHighlightedIndex = null;
+      node.classed('search-hit', false);
+    }
+
+    function _highlightSearchNode(datum) {
+      searchHighlightedIndex = datum.index;
+      node.classed('search-hit', function(d) { return d.index === datum.index; });
+    }
+
+    function _jumpToNode(datum) {
+      // 1. Highlight ring
+      _highlightSearchNode(datum);
+
+      // 2. Pan the SVG so the node is centred in the viewport at the current scale.
+      var s  = currentTransform.scale  || 1;
+      var cx = (width  || window.innerWidth)  / 2;
+      var cy = (height || window.innerHeight) / 2;
+      var tx = cx - datum.x * s;
+      var ty = cy - datum.y * s;
+
+      // KEY FIX: tell the zoom behaviour about the new translate/scale BEFORE
+      // the transition fires.  Without this, the next user scroll/drag fires
+      // the zoom handler with the behaviour's stale internal state, snapping
+      // the view back to wherever it was before the jump.
+      if (zoomBehavior) {
+        zoomBehavior.translate([tx, ty]).scale(s);
+      }
+      currentTransform.scale     = s;
+      currentTransform.translate = [tx, ty];
+
+      // Animate the SVG <g> to the new position.
+      var svgG = d3.select(svg.node().parentNode).select('svg g');
+      svg.transition().duration(500)
+        .attr('transform', 'translate(' + tx + ',' + ty + ') scale(' + s + ')')
+        .each('end', function() {
+          // Redraw canvas overlays at the final position once animation settles.
+          drawCanvasEdges();
+          drawDensityLayer();
+        });
+      svg.classed('labels-hidden', s < labelZoomThreshold);
+      // Immediate redraw for canvas edges (they stay correct during animation
+      // because currentTransform is already updated above).
+      drawCanvasEdges();
+
+      // 3. Select the node into the click-highlight / Node Info panel —
+      //    identical to the user clicking it directly.
+      if (highlightedNodeIndex !== datum.index) {
+        navigateNodeInfo(datum, null, false);
+      }
+
+      // 4. Close dropdown
+      searchResultsEl.classList.remove('open');
+      searchInputEl.value  = datum.node_name || datum.name || '';
+      searchInputEl.blur();
+    }
+
+    function _renderSearchResults(query) {
+      var q = query.trim().toLowerCase();
+      _searchActiveIdx = -1;
+      if (!q) {
+        _searchMatches = [];
+        searchResultsEl.innerHTML = '';
+        searchResultsEl.classList.remove('open');
+        return;
+      }
+
+      // Build candidate list from live graph.nodes (respects current slider state)
+      var all = graph.nodes;
+      _searchMatches = all.filter(function(d) {
+        var label = (d.node_name || d.name || '').toLowerCase();
+        return label.indexOf(q) !== -1;
+      }).sort(function(a, b) {
+        var al = (a.node_name || a.name || '').toLowerCase();
+        var bl = (b.node_name || b.name || '').toLowerCase();
+        var ap = al.indexOf(q) === 0 ? 0 : 1;
+        var bp = bl.indexOf(q) === 0 ? 0 : 1;
+        if (ap !== bp) return ap - bp;
+        return al.length - bl.length || al.localeCompare(bl);
+      }).slice(0, 12);
+
+      if (!_searchMatches.length) {
+        searchResultsEl.innerHTML = '<div class="search-item" style="opacity:0.5;cursor:default">No matches</div>';
+        searchResultsEl.classList.add('open');
+        return;
+      }
+      searchResultsEl.innerHTML = _searchMatches.map(function(d, i) {
+        var label = d.node_name || d.name || ('Node ' + d.index);
+        var meta  = 'idx ' + d.index;
+        if (d.group !== undefined && d.group !== null && String(d.group) !== '-1' && String(d.group) !== '') {
+          meta += ' · g' + d.group;
+        }
+        return '<div class="search-item" data-idx="' + i + '">' +
+               escapeHtml(label) +
+               '<div class="meta">' + escapeHtml(meta) + '</div></div>';
+      }).join('');
+      searchResultsEl.classList.add('open');
+    }
+
+    searchInputEl.addEventListener('input', function() {
+      _renderSearchResults(searchInputEl.value);
+    });
+    searchInputEl.addEventListener('focus', function() {
+      if (searchInputEl.value.trim()) _renderSearchResults(searchInputEl.value);
+    });
+    searchInputEl.addEventListener('keydown', function(e) {
+      var open = searchResultsEl.classList.contains('open') && _searchMatches.length;
+      if (!open) {
+        if (e.key === 'Enter' && searchInputEl.value.trim()) {
+          if (_searchMatches.length) _jumpToNode(_searchMatches[0]);
+        }
+        return;
+      }
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        _searchActiveIdx = Math.min(_searchMatches.length - 1, _searchActiveIdx + 1);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        _searchActiveIdx = Math.max(0, _searchActiveIdx - 1);
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        var d = _searchMatches[_searchActiveIdx >= 0 ? _searchActiveIdx : 0];
+        if (d) _jumpToNode(d);
+        return;
+      } else if (e.key === 'Escape') {
+        searchResultsEl.classList.remove('open');
+        searchInputEl.blur();
+        return;
+      } else { return; }
+
+      // Highlight active item
+      searchResultsEl.querySelectorAll('.search-item').forEach(function(el, i) {
+        el.classList.toggle('active', i === _searchActiveIdx);
+        if (i === _searchActiveIdx) el.scrollIntoView({ block: 'nearest' });
+      });
+    });
+
+    searchResultsEl.addEventListener('mousedown', function(e) {
+      // mousedown fires before blur so the list stays open long enough to register
+      var item = e.target.closest('.search-item');
+      if (!item) return;
+      e.preventDefault();
+      var idx = parseInt(item.getAttribute('data-idx'), 10);
+      if (!isNaN(idx) && _searchMatches[idx]) _jumpToNode(_searchMatches[idx]);
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function(e) {
+      if (!e.target.closest('.search-wrap')) searchResultsEl.classList.remove('open');
+    });
+
+    // Clear search highlight when the user clicks empty background
+    var _origBgClick = container.on('click');
+    container.on('click', function() {
+      if (panOrZoomOccurred) { panOrZoomOccurred = false; return; }
+      _clearSearchHighlight();
+      clearNeighborHighlight();
+    });
+  } // end search block
+
 }

{d3graph-3.0.1 → d3graph-3.1.0}/d3graph/d3js/index.html.j2

@@ -19,7 +19,11 @@
      HTML into a page that supplies its own button chrome but still wants
      the slider). -->
 {% if show_controls or max_slider > min_slider %}
-<div class="header-row">
+<div class="header-row">
+    <div class="search-wrap">
+        <input class="search-input" id="searchInput" type="search" placeholder="Find a node…" autocomplete="off" spellcheck="false" />
+        <div class="search-results" id="searchResults"></div>
+    </div>
     {% if max_slider > min_slider %}
     {{ slider_comment_start }}
     <div class="slider-container">
@@ -92,6 +96,14 @@
         <label for="linkTensionSlider">Edge Tension <span id="linkTensionValue">{{ link_tension }}</span></label>
         <input type="range" id="linkTensionSlider" min="0" max="5" step="0.1" value="{{ link_tension }}">
     </div>
+    <div class="physics-control">
+        <label for="edgeWidthMultSlider">Edge Width <span id="edgeWidthMultValue">1</span>×</label>
+        <input type="range" id="edgeWidthMultSlider" min="0.1" max="5" step="0.1" value="1">
+    </div>
+    <div class="physics-control">
+        <label for="nodeSizeMultSlider">Node Size <span id="nodeSizeMultValue">1</span>×</label>
+        <input type="range" id="nodeSizeMultSlider" min="0.1" max="5" step="0.1" value="1">
+    </div>
     <button id="physicsResetButton" class="button-switch">Reset to Default</button>
     </div>
 </div>

{d3graph-3.0.1 → d3graph-3.1.0}/d3graph/d3js/style.css

@@ -434,4 +434,98 @@ h3 {
 .dark-mode .styled-slider::-moz-range-thumb {
     background: #222;
     border: 2px solid #eee;
-}
+}
+/* ---- Search bar ---- */
+.search-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  grid-column: 1;               /* left slot of .header-row grid */
+  justify-self: start;
+  margin: 0;
+}
+.search-input {
+  width: 200px;
+  padding: 5px 10px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  background: #fff;
+  color: #222;
+  font-size: 13px;
+  font-family: "Helvetica", Arial, sans-serif;
+  outline: none;
+  transition: border-color 0.15s, width 0.2s;
+}
+.search-input:focus {
+  border-color: #1ABC9C;
+  width: 260px;
+}
+.dark-mode .search-input {
+  background: #333;
+  color: #eee;
+  border-color: #555;
+}
+.dark-mode .search-input:focus {
+  border-color: #1ABC9C;
+}
+.search-results {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 200px;
+  max-height: 260px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  z-index: 2000;
+  font-family: "Helvetica", Arial, sans-serif;
+  font-size: 13px;
+}
+.search-results.open { display: block; }
+.dark-mode .search-results {
+  background: #2a2a2a;
+  border-color: #555;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+}
+.search-item {
+  padding: 7px 12px;
+  cursor: pointer;
+  color: #222;
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+  line-height: 1.3;
+}
+.search-item:last-child { border-bottom: none; }
+.search-item:hover,
+.search-item.active { background: #e8f8f5; color: #111; }
+.dark-mode .search-item { color: #eee; border-bottom-color: rgba(255,255,255,0.07); }
+.dark-mode .search-item:hover,
+.dark-mode .search-item.active { background: #1e4d42; }
+.search-item .meta {
+  font-size: 11px;
+  color: #888;
+  margin-top: 1px;
+}
+.dark-mode .search-item .meta { color: #aaa; }
+
+/* Search-hit highlight ring on the found node (SVG overlay circle) */
+.search-ring-yellow {
+  fill: none;
+  stroke: #ffe600;
+  stroke-width: 3px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.search-ring-border {
+  fill: none;
+  stroke: rgba(0,0,0,0.25);
+  stroke-width: 5px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.search-hit .search-ring-yellow,
+.search-hit .search-ring-border { opacity: 1; }

{d3graph-3.0.1 → d3graph-3.1.0}/d3graph/examples.py

@@ -6,7 +6,7 @@ d3 = d3graph()
 # Load example data
 df = d3.import_example('socialmedia')
 # Slice first 10000 rows
-df = df[0:1000]
+df = df[0:5000]
 # Create adjmat
 adjmat = vec2adjmat(source=df['source'], target=df['target'], weight=df['weight'])
 # Update matrix with random weights
@@ -17,7 +17,7 @@ adjmat = vec2adjmat(source=df['source'], target=df['target'], weight=df['weight'
 d3.graph(adjmat)
 
 # Compute node significance for specified network statistic
-d3.network_significance(adjmat, 'pagerank', n_top=100, n_random=100)
+# d3.network_significance(adjmat, 'pagerank', n_top=100, n_random=100)
 
 # Show graph with custom specific settings
 d3.show(density_grid_size=60,

{d3graph-3.0.1 → d3graph-3.1.0/d3graph.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 3.0.1
+Version: 3.1.0
 Summary: Python package to create interactive network based on d3js.
 Author-email: Erdogan Taskesen <erdogant@gmail.com>
 License-Expression: BSD-3-Clause
@@ -28,6 +28,7 @@ Requires-Dist: markupsafe
 Requires-Dist: python-louvain
 Requires-Dist: datazets
 Requires-Dist: distfit
+Requires-Dist: tqdm
 Dynamic: license-file
 
 # D3graph: Interactive force-directed networks

{d3graph-3.0.1 → d3graph-3.1.0}/d3graph.egg-info/requires.txt

@@ -9,3 +9,4 @@ markupsafe
 python-louvain
 datazets
 distfit
+tqdm

{d3graph-3.0.1 → d3graph-3.1.0}/pyproject.toml

@@ -46,6 +46,7 @@ dependencies = [
     'python-louvain',
     'datazets',
     'distfit',
+    'tqdm',
     ]
 
 [project.urls]