bleed versions

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

@@ -42,7 +42,6 @@ ajax '/ajax/data/device/netmap' => require_login sub {
         SIZEVALUE => 3000,
         COLORVALUE => 10,
         LABEL => $name,
-        fixed => true,
       };
       push @{$v4data{'nodes'}}, { index => ($device->{row_number} - 1) };
 
@@ -68,7 +67,6 @@ ajax '/ajax/data/device/netmap' => require_login sub {
       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),

share/public/css/d3-force-network-chart.css

@@ -38,7 +38,7 @@
 }
 .net_gobrechts_d3_force text.link {
     font-size: 12px;
-    fill: blue;
+    fill: #2a7ae2;
     cursor: pointer;
 }
 .net_gobrechts_d3_force line.link,
@@ -174,7 +174,7 @@
 }
 .net_gobrechts_d3_force_customize a {
     border: 1px solid transparent;
-    color: blue;
+    color: #2a7ae2;
     text-decoration: none;
     cursor: pointer;
 }
@@ -183,8 +183,8 @@
 .net_gobrechts_d3_force_customize textarea:focus,
 .net_gobrechts_d3_force_customize a:focus {
     outline: none !important;
-    border: 1px solid blue !important;
+    border: 1px solid #2a7ae2 !important;
-    background-color: yellow !important;
+    background-color: #ffff99 !important;
     box-shadow: none !important;
 }
 .net_gobrechts_d3_force_customize textarea {

share/views/ajax/device/netmap.tt

@@ -6,119 +6,52 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
 
   function resizeGraphContainer() {
     setTimeout(function(){
-      var graph = jQuery('#netmap_pane');
+      var netmap_pane = jQuery('#netmap_pane');
-      netmap_pane.width( parseInt(graph.parent().css('width')) ).resume();
+      graph.width( parseInt(netmap_pane.parent().css('width')) ).resume();
-      netmap_pane.height( window.innerHeight - 100 ).resume();
+      graph.height( window.innerHeight - 100 ).resume();
     }, 500)
   }
 
   jQuery(document).ready(function() {
-    var canvas = document.querySelector("canvas"),
+    window.graph = netGobrechtsD3Force('netmap_pane')
-        context = canvas.getContext("2d"),
+      .debug(true)
-        width = canvas.width,
+      .lassoMode(true)
-        height = canvas.height;
+      .nodeEventToOpenLink('click')
+      .nodeLinkTarget('none')
+      .labelDistance(2)
+      .zoomMode(true)
+      .pinMode(true)
+      .showLinkDirection(false)
+      .preventLabelOverlappingOnForceEnd(true)
+      // .zoomToFitOnForceEnd(true)
+      .width( parseInt(jQuery('#netmap_pane').parent().css('width')) )
+      .height( window.innerHeight - 100 )
+      .showSelfLinks(true)
+      .minZoomFactor(0.1)
+      .maxZoomFactor(10);
 
-//    window.netmap_pane = netGobrechtsD3Force('netmap_pane')
+    jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
-//      .debug(true)
+    jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
-//      .lassoMode(true)
+    jQuery(window).on("resize", resizeGraphContainer);
-//      .nodeEventToOpenLink('click')
+
-//      .nodeLinkTarget('none')
+    var netmapdata = {'data': {
-//      .labelDistance(2)
+      'nodes': mapdata['v4']['nodes'].map(function(node) {
-//      .zoomMode(true)
+        var index = node['index'];
-//      .showLinkDirection(false)
+        return mapdata['v3']['nodes'][index];
-//      .preventLabelOverlappingOnForceEnd(true)
+      }),
-//      .showSelfLinks(true)
+      'links': mapdata['v3']['links']
-//      .minZoomFactor(0.1)
+    }};
-//      .maxZoomFactor(10);
+    graph.start(netmapdata);
-//
+
-//    var ticker = netmap_pane.inspect().main.force.tick;
+    // center on our selected device
-//    netmap_pane.inspect().main.force.tick = (function(forceTick) {
+//    graph.inspect().main.force.on('end.centernode', function() {
-//      return function() {
+//      var node = graph.nodeDataById( mapdata['v3']['centernode'] );
-//        forceTick();
+//      graph.zoomSmooth(node.x, node.y, node.radius * 200);
-//        return true;
+//      graph.inspect().main.force.on('end.centernode', null);
-//      }
-//    }(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'] );
-//      netmap_pane.zoomSmooth(node.x, node.y, node.radius * 200);
-//      netmap_pane.inspect().main.force.on('end.centernode', null);
 //    });
-//
-//    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' );
-    worker.postMessage(mapdata['v4']);
-    worker.onmessage = function(event) {
-      switch (event.data.type) {
-        case "tick": return ticked(event.data);
-        case "end": return ended(event.data);
-      }
-    };
-
-    function ticked(data) {
-      var progress = data.progress;
-      // console.log( 100 * progress + "%" );
-      //meter.style.width = 100 * progress + "%";
-    }
-
-//    function ended(data) {
-//      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);
-//      netmap_pane.inspect().main.force.alpha(0.005).tick();
-//      netmap_pane.inspect().main.force.stop();
-//      netmap_pane.inspect().main.force.tick = ticker;
-//      resizeGraphContainer();
-//    }
-
-    function ended(data) {
-      var nodes = data.nodes,
-          links = data.links;
-
-      context.clearRect(0, 0, width, height);
-      context.save();
-      context.translate(width / 2, height / 2);
-
-      context.beginPath();
-      links.forEach(drawLink);
-      context.strokeStyle = "#aaa";
-      context.stroke();
-
-      context.beginPath();
-      nodes.forEach(drawNode);
-      context.fill();
-      context.strokeStyle = "#fff";
-      context.stroke();
-
-      context.restore();
-    }
-
-    function drawLink(d) {
-      context.moveTo(d.source.x, d.source.y);
-      context.lineTo(d.target.x, d.target.y);
-    }
-
-    function drawNode(d) {
-      context.moveTo(d.x + 3, d.y);
-      context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
-    }
   });
 
 });
 
 // vim: ft=javascript
 </script>
-
-<canvas width="960" height="960"></canvas>

share/views/layouts/main.tt

@@ -21,7 +21,7 @@
   <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.min.js"></script>
-  <script type="text/javascript" src="[% uri_base %]/javascripts/d3-force.js"></script>
+  <script type="text/javascript" src="[% uri_base %]/javascripts/d3-force-network-chart.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>
   <script type="text/javascript" src="[% uri_base %]/javascripts/daterangepicker.js"></script>
@@ -53,7 +53,7 @@
   <link rel="stylesheet" href="[% uri_base %]/css/smoothness/jquery-ui.custom.min.css"/>
   <link rel="stylesheet" href="[% uri_base %]/css/font-awesome.min.css"/>
   <link rel="stylesheet" href="[% uri_base %]/css/toastr.css"/>
-  <link rel="stylesheet" href="[% uri_base %]/css/d3-force.css"/>
+  <link rel="stylesheet" href="[% uri_base %]/css/d3-force-network-chart.css"/>
   <link rel="stylesheet" href="[% uri_base %]/css/netdisco.css"/>
   <link rel="stylesheet" href="[% uri_base %]/css/bootstrap-tree.css"/>
   <link rel="stylesheet" href="[% uri_base %]/css/daterangepicker-bs2.css"/>