working worker

lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm

@@ -29,21 +29,23 @@ ajax '/ajax/data/device/netmap' => require_login sub {
     })->all;
 
     my %id_for = ();
-    my %data = ( nodes => [], links => [] );
+    my %v3data = ( nodes => {}, links => [] );
+    my %v4data = ( nodes => [], links => [] );
     my $domain = quotemeta( setting('domain_suffix') || '' );
 
     foreach my $device (@devices) {
       $id_for{$device->{ip}} = $device->{'row_number'};
       (my $name = ($device->{dns} || lc($device->{name}) || $device->{ip})) =~ s/$domain$//;
 
-      push @{$data{'nodes'}}, {
+      $v3data{nodes}->{ ($device->{row_number} - 1) } = {
         ID => $device->{row_number},
         SIZEVALUE => 3000,
         COLORVALUE => 10,
         LABEL => $name,
       };
+      push @{$v4data{'nodes'}}, { index => ($device->{row_number} - 1) };
 
-      $data{'centernode'} = $device->{row_number}
+      $v3data{'centernode'} = $device->{row_number}
         if $qdev and $qdev->in_storage and $device->{ip} eq $qdev->ip;
     }
 
@@ -62,14 +64,19 @@ ajax '/ajax/data/device/netmap' => require_login sub {
     }
 
     while (my $l = $rs->next) {
-      push @{$data{'links'}}, {
+      push @{$v3data{'links'}}, {
         FROMID => $id_for{$l->{left_ip}},
         TOID   => $id_for{$l->{right_ip}},
+        fixed  => 1,
+      };
+      push @{$v4data{'links'}}, {
+        source => ($id_for{$l->{left_ip}} - 1),
+        target => ($id_for{$l->{right_ip}} - 1),
       };
     }
 
     content_type('application/json');
-    to_json({data => \%data});
+    to_json({ v3 => \%v3data, v4 => \%v4data});
 };
 
 true;

share/public/javascripts/worker.js

@@ -1,12 +1,24 @@
-importScripts( 'http://localhost:5000/javascripts/d3-3.5.6.js' );
+importScripts("https://d3js.org/d3-collection.v1.min.js");
+importScripts("https://d3js.org/d3-dispatch.v1.min.js");
+importScripts("https://d3js.org/d3-quadtree.v1.min.js");
+importScripts("https://d3js.org/d3-timer.v1.min.js");
+importScripts("https://d3js.org/d3-force.v1.min.js");
 
 onmessage = function(event) {
-  var force = event.data.force;
+  var nodes = event.data.nodes,
+      links = event.data.links;
 
-  for (var i = 0, n = Math.ceil(Math.log(0.001) / Math.log(1 - (1 - Math.pow(0.001, 1 / 300)))); i < n; ++i) {
+  var simulation = d3.forceSimulation(nodes)
+      .force("charge", d3.forceManyBody())
+      .force("link", d3.forceLink(links).distance(20).strength(1))
+      .force("x", d3.forceX())
+      .force("y", d3.forceY())
+      .stop();
+
+  for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
     postMessage({type: "tick", progress: i / n});
-    force.tick();
+    simulation.tick();
   }
 
-  postMessage({type: "end", force: force});
+  postMessage({type: "end", nodes: nodes, links: links});
 };

share/views/ajax/device/netmap.tt

@@ -2,7 +2,7 @@
 
 // custom resize function as there is no event to fire and we need
 // to react to the sidebar.
-$.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, function(data) {
+$.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, function(mapdata) {
 
   function resizeGraphContainer() {
     setTimeout(function(){
@@ -27,25 +27,20 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
       .minZoomFactor(0.1)
       .maxZoomFactor(10);
 
-    // stop force
-    netmap_pane.inspect().main.force.stop();
-
     // center on our selected device
     netmap_pane.inspect().main.force.on('end.centernode', function() {
-      var node = netmap_pane.nodeDataById( data['data']['centernode'] );
+      var node = netmap_pane.nodeDataById( mapdata['v3']['centernode'] );
       netmap_pane.zoomSmooth(node.x, node.y, node.radius * 200);
       netmap_pane.inspect().main.force.on('end.centernode', null);
     });
 
-    // disable the default ticker  
+    jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
-    netmap_pane.inspect().main.force.on('tick', function() {} );
+    jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
-
+    jQuery(window).on("resize", resizeGraphContainer);
-    // now start, but without a ticker
-    netmap_pane.start(data);
 
     var worker = new Worker( 'http://localhost:5000/javascripts/worker.js' );
-    console.log(netmap_pane.inspect().main.force);
+
-    worker.postMessage({force: netmap_pane.inspect().main.force});
+    worker.postMessage(mapdata['v4']);
     worker.onmessage = function(event) {
       switch (event.data.type) {
         case "tick": return ticked(event.data);
@@ -55,18 +50,23 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
 
     function ticked(data) {
       var progress = data.progress;
-      console.log(100 * progress + "%");
+      // console.log( 100 * progress + "%" );
       //meter.style.width = 100 * progress + "%";
     }
 
     function ended(data) {
-      console.log( 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;
+      });
 
-  //  jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
+      var netmapdata = {'data': {'nodes': newnodes, 'links': mapdata['v3']['links']}};
-  //  jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
+      netmap_pane.start(netmapdata);
-  //  jQuery(window).on("resize", resizeGraphContainer);
+      resizeGraphContainer();
-  //  resizeGraphContainer();
+    }
 
   });
 });

share/views/layouts/main.tt

@@ -20,7 +20,7 @@
   <script type="text/javascript" src="[% uri_base %]/javascripts/bootstrap.min.js"></script>
   <script type="text/javascript" src="[% uri_base %]/javascripts/underscore.min.js"></script>
   <script type="text/javascript" src="[% uri_base %]/javascripts/jquery.qtip.min.js"></script>
-  <script type="text/javascript" src="[% uri_base %]/javascripts/d3-3.5.6.js"></script>
+  <script type="text/javascript" src="[% uri_base %]/javascripts/d3.min.js"></script>
   <script type="text/javascript" src="[% uri_base %]/javascripts/d3-force.js"></script>
   <script type="text/javascript" src="[% uri_base %]/javascripts/toastr.js"></script>
   <script type="text/javascript" src="[% uri_base %]/javascripts/jquery.floatThead.js"></script>