From 61a3a9e06d03a7df950a631541a685733e05e99b Mon Sep 17 00:00:00 2001 From: Oliver Gorwits Date: Thu, 14 Dec 2017 19:15:21 +0000 Subject: [PATCH] working worker --- .../Netdisco/Web/Plugin/Device/Neighbors.pm | 17 ++++++--- share/public/javascripts/worker.js | 22 ++++++++--- share/views/ajax/device/netmap.tt | 38 +++++++++---------- share/views/layouts/main.tt | 2 +- 4 files changed, 49 insertions(+), 30 deletions(-) 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 @@ - +