improvements to graphing

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

@@ -16,7 +16,8 @@ ajax '/ajax/content/device/netmap' => require_login sub {
 
 ajax '/ajax/data/device/netmap' => require_login sub {
     my $q = param('q');
-    my %data = ( nodes => [], links => [] );
+    my $qdev = schema('netdisco')->resultset('Device')
+      ->search_for_device($q) or send_error('Bad device', 400);
 
     my $vlan = param('vlan');
     undef $vlan if (defined $vlan and $vlan !~ m/^\d+$/);
@@ -28,7 +29,9 @@ ajax '/ajax/data/device/netmap' => require_login sub {
     })->all;
 
     my %id_for = ();
+    my %data = ( 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$//;
@@ -39,6 +42,9 @@ ajax '/ajax/data/device/netmap' => require_login sub {
         COLORVALUE => 10,
         LABEL => $name,
       };
+
+      $data{'centernode'} = $device->{row_number}
+        if $qdev and $qdev->in_storage and $device->{ip} eq $qdev->ip;
     }
 
     my $rs = schema('netdisco')->resultset('Virtual::DeviceLinks')->search({}, {

share/views/ajax/device/netmap.tt

@@ -1,31 +1,43 @@
 <script>
 
-// load all device connections into neighbors_data dictionary
-$.getJSON('[% uri_for('/ajax/data/device/netmap') %]', function(data) {
+// 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) {
   function resizeGraphContainer() {
       setTimeout(function(){
           var graph = jQuery('#netmap_pane');
-          var toc = jQuery('#dw__toc');
-          netmap_pane.width(
-              parseInt(graph.parent().css('width')) -
-              ( toc.css('float') === 'right' && parseInt(toc.css('height')) > 30 ? parseInt(toc.css('width')) : 0 )
-          ).resume();
+          netmap_pane.width( parseInt(graph.parent().css('width')) ).resume();
+          netmap_pane.height( window.innerHeight - 100 ).resume();
       }, 500)
   }
 
   jQuery(document).ready(function() {
       window.netmap_pane = netGobrechtsD3Force('netmap_pane')
           .debug(true)
-          // .lassoMode(true)
+          .lassoMode(true)
+          .nodeEventToOpenLink('click')
+          .nodeLinkTarget('none')
+          .labelDistance(2)
+          .charge(-850)
+          .zoomMode(true)
+          .preventLabelOverlappingOnForceEnd(true)
+          .showLinkDirection(false)
+          .showSelfLinks(true)
+          .showLoadingIndicatorOnAjaxCall(true)
+          .minZoomFactor(0.1)
+          .maxZoomFactor(10)
           .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);
-      // jQuery('#dw__toc h3').on("click", resizeGraphContainer);
-      $('#nd_waiting').hide();
       resizeGraphContainer();
+
+      // sort-of center on our selected device
+      var node = netmap_pane.nodeDataById( data['data']['centernode'] );
+      netmap_pane.zoom(node.x, node.y, 850);
   });
-}); // jquery getJSON for all connections
+});
 
 // vim: ft=javascript
 </script>
-
-<div id="nd_waiting" class="span2 alert"><i class="icon-spinner icon-spin"></i> Waiting for results...</div>