From 854f37fc9480b88e6012cc4b4e9a9f93b59f127f Mon Sep 17 00:00:00 2001
From: Oliver Gorwits <oliver@cpan.org>
Date: Thu, 14 Dec 2017 21:34:49 +0000
Subject: [PATCH] more fiddling with d3

---
 .../Netdisco/Web/Plugin/Device/Neighbors.pm   |  1 +
 share/public/javascripts/worker.js            |  2 +-
 share/views/ajax/device/netmap.tt             | 40 ++++++++++++-------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm b/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm
index c82a2553..4df378b2 100644
--- a/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm
+++ b/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm
@@ -42,6 +42,7 @@ ajax '/ajax/data/device/netmap' => require_login sub {
         SIZEVALUE => 3000,
         COLORVALUE => 10,
         LABEL => $name,
+        fixed => true,
       };
       push @{$v4data{'nodes'}}, { index => ($device->{row_number} - 1) };
 
diff --git a/share/public/javascripts/worker.js b/share/public/javascripts/worker.js
index 2452f720..898b30be 100644
--- a/share/public/javascripts/worker.js
+++ b/share/public/javascripts/worker.js
@@ -10,7 +10,7 @@ onmessage = function(event) {
 
   var simulation = d3.forceSimulation(nodes)
       .force("charge", d3.forceManyBody())
-      .force("link", d3.forceLink(links).distance(20).strength(1))
+      .force("link", d3.forceLink(links).distance(200).strength(0.5))
       .force("x", d3.forceX())
       .force("y", d3.forceY())
       .stop();
diff --git a/share/views/ajax/device/netmap.tt b/share/views/ajax/device/netmap.tt
index 9ae99571..efebfc13 100644
--- a/share/views/ajax/device/netmap.tt
+++ b/share/views/ajax/device/netmap.tt
@@ -13,20 +13,27 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
   }
 
   jQuery(document).ready(function() {
-    window.netmap_pane = netGobrechtsD3Force()
+    window.netmap_pane = netGobrechtsD3Force('netmap_pane')
       .debug(true)
       .lassoMode(true)
       .nodeEventToOpenLink('click')
       .nodeLinkTarget('none')
       .labelDistance(2)
-      .charge(-850)
       .zoomMode(true)
-      .preventLabelOverlappingOnForceEnd(true)
       .showLinkDirection(false)
+      .preventLabelOverlappingOnForceEnd(true)
       .showSelfLinks(true)
       .minZoomFactor(0.1)
       .maxZoomFactor(10);
 
+    var ticker = netmap_pane.inspect().main.force.tick;
+    netmap_pane.inspect().main.force.tick = (function(forceTick) {
+      return function() {
+        forceTick();
+        return true;
+      }
+    }(netmap_pane.inspect().main.force.tick));
+
     // center on our selected device
     netmap_pane.inspect().main.force.on('end.centernode', function() {
       var node = netmap_pane.nodeDataById( mapdata['v3']['centernode'] );
@@ -39,7 +46,6 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
     jQuery(window).on("resize", resizeGraphContainer);
 
     var worker = new Worker( 'http://localhost:5000/javascripts/worker.js' );
-
     worker.postMessage(mapdata['v4']);
     worker.onmessage = function(event) {
       switch (event.data.type) {
@@ -55,20 +61,26 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
     }
 
     function ended(data) {
-      var newnodes = data.nodes.map(function(node) {
-        var index = node['index'];
-        var x = mapdata['v3']['nodes'][index];
-        x['x'] = node['x'];
-        x['y'] = node['y'];
-        return x;
-      });
-
-      var netmapdata = {'data': {'nodes': newnodes, 'links': mapdata['v3']['links']}};
+      var netmapdata = {'data': {
+        'nodes': data.nodes.map(function(node) {
+          var index = node['index'];
+          var x = mapdata['v3']['nodes'][index];
+          x['x'] = node['x'];
+          x['y'] = node['y'];
+          return x;
+        }),
+        'links': mapdata['v3']['links']
+      }};
       netmap_pane.start(netmapdata);
       resizeGraphContainer();
+      netmap_pane.inspect().main.force.alpha(0.005).tick();
+      netmap_pane.inspect().main.force.stop();
+      netmap_pane.inspect().main.force.tick = ticker;
+      var node = netmap_pane.nodeDataById( mapdata['v3']['centernode'] );
+      netmap_pane.zoomSmooth(node.x, node.y, node.radius * 200);
     }
-
   });
+
 });
 
 // vim: ft=javascript