diff --git a/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm b/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm
index 9e602f23..c82a2553 100644
--- a/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm
+++ b/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;
diff --git a/share/public/javascripts/worker.js b/share/public/javascripts/worker.js
index 1b6e8e77..2452f720 100644
--- a/share/public/javascripts/worker.js
+++ b/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});
};
diff --git a/share/views/ajax/device/netmap.tt b/share/views/ajax/device/netmap.tt
index 18b20d57..9ae99571 100644
--- a/share/views/ajax/device/netmap.tt
+++ b/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
- netmap_pane.inspect().main.force.on('tick', function() {} );
-
- // now start, but without a ticker
- netmap_pane.start(data);
+ jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
+ jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
+ jQuery(window).on("resize", resizeGraphContainer);
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);
- // jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
- // jQuery(window).on("resize", resizeGraphContainer);
- // resizeGraphContainer();
+ var netmapdata = {'data': {'nodes': newnodes, 'links': mapdata['v3']['links']}};
+ netmap_pane.start(netmapdata);
+ resizeGraphContainer();
+ }
});
});
diff --git a/share/views/layouts/main.tt b/share/views/layouts/main.tt
index 03808a18..0580772a 100644
--- a/share/views/layouts/main.tt
+++ b/share/views/layouts/main.tt
@@ -20,7 +20,7 @@
-
+