Device Neighbor Map can have max depth and VLAN filter

Netdisco/share/views/ajax/device/netmap.tt

@@ -3,10 +3,6 @@
 var winHeight = window.innerHeight;
 var winWidth  = window.innerWidth;
 
-var tree = d3.layout.tree()
-    .size([360, winHeight])
-    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
-
 // links in the initial tree drawing use this generator
 var treeLink = d3.svg.diagonal.radial()
     .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
@@ -60,7 +56,10 @@ function to_class(name) { return 'nd_' + name.replace(/\./g, "_") }
 
 // handler for clicking on a circle - redirect to that device's netmap
 function circleClick(d) {
-    window.location = '[% uri_for('/device') %]?tab=netmap&q=' + d.fullname;
+    window.location = '[% uri_for('/device') %]?tab=netmap'
+                      + '&q=' + d.fullname
+                      + '&depth=[% params.depth | uri %]'
+                      + '&vlan=[% params.vlan | uri %]';
 }
 
 // handler for mouseover on a circle - show that device's real neighbors
@@ -92,7 +91,15 @@ $.getJSON('[% uri_for('/ajax/data/device/alldevicelinks') %]', function(data) {
   neighbors_data = data;
 
   // draw the tree
-  d3.json("[% uri_for('/ajax/data/device/netmap') %]?&q=[% params.q | uri %]", function(error, root) {
+  d3.json("[% uri_for('/ajax/data/device/netmap') %]?"
+          + '&q=[% params.q | uri %]'
+          + '&depth=[% params.depth | uri %]'
+          + '&vlan=[% params.vlan | uri %]', function(error, root) {
+    var tree = d3.layout.tree()
+        // magic number "8" for scaling (network depth). seems to make things look right for me.
+        .size([360, (winHeight / 8 * (root['scale'] || 0))])
+        .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
+
     var nodes = tree.nodes(root),
         links = tree.links(nodes);
 
@@ -171,4 +178,5 @@ $.getJSON('[% uri_for('/ajax/data/device/alldevicelinks') %]', function(data) {
 
 }); // jquery getJSON for all connections
 
+// vim: ft=javascript
 </script>

Netdisco/share/views/device.tt

@@ -1,16 +1,5 @@
 <i class="nd_sidebar-toggle icon-wrench icon-large" id="nd_sidebar-toggle-img-out"
   rel="tooltip" data-placement="left" data-offset="5" data-title="Show Sidebar"></i>
-<i class="icon-question-sign icon-large" id="nd_netmap-help" rel="popover"
-  data-title="Neighbor Map Controls"
-  data-html="true"
-  data-content="
-    <ul>
-      <li>Click and drag to pan</li>
-      <li>Mouse-wheel scroll to zoom</li>
-      <li>Hover to hightlight neighbors</li>
-      <li>Click to view device's map</li>
-    </ul>"
-  data-placement='left' data-trigger='click'></i>
 <div class="container-fluid">
   <div class="nd_sidebar nd_sidebar-pinned">
     <div class="well">

Netdisco/share/views/js/common.js

@@ -95,7 +95,12 @@
       $('#nd_sidebar-reset-link').attr('href', uri_base + '/device?tab=[% tab.tag %]&reset=on&' +
         $('#ports_form')
           .find('input[name="q"],input[name="f"],input[name="partial"],input[name="invert"]')
-          .serialize())
+          .serialize());
+
+      [% ELSIF tab.tag == 'netmap' %]
+      // form reset icon on netmap tab
+      $('#nd_sidebar-reset-link').attr('href', uri_base + '/device?tab=[% tab.tag %]&reset=on&' +
+        $('#netmap_form').find('input[name="q"]').serialize());
       [% END %]
 
       do_search(event, '[% tab.tag %]');

Netdisco/share/views/js/device.js

@@ -19,14 +19,6 @@
     // changes, and only reset when they submit or cancel the change
     var dirty = false;
 
-    // show or hide netmap help button
-    if (tab == 'netmap') {
-      $('#nd_netmap-help').show();
-    }
-    else {
-      $('#nd_netmap-help').hide();
-    }
-
     // activate modals, tooltips and popovers
     $('.nd_modal').modal({show: false});
     $("[rel=tooltip]").tooltip({live: true});

Netdisco/share/views/sidebar/device/netmap.tt

@@ -0,0 +1,24 @@
+
+            <span class="nd_sidebar-title"><em>Neighbor Map Controls</em></span>
+            <input name="q" value="[% params.q | html_entity %]" type="hidden"/>
+            <div class="clearfix nd_netmap-sidebar">
+              <ul class="muted">
+                <li>Click and drag to pan</li>
+                <li>Scroll to zoom</li>
+                <li>Hover shows neighbors</li>
+                <li>Click to center device</li>
+              </ul>
+
+              <em class="muted nd_sidebar-label">Draw to Depth:</em><br/>
+              <input id="nd_port-query" placeholder="" type="number"
+                name="depth" value="[% params.depth | html_entity %]" type="text"
+                rel="tooltip" data-placement="left" data-offset="5" data-title="Max Depth"/>
+
+              <em class="muted nd_sidebar-label">Filter by VLAN:</em><br/>
+              <input id="nd_port-query" placeholder="" type="number"
+                name="vlan" value="[% params.vlan | html_entity %]" type="text"
+                rel="tooltip" data-placement="left" data-offset="5" data-title="VLAN"/>
+            </div>
+            <button id="[% tab.id %]_submit" type="submit" class="btn btn-info">
+                <i class="icon-pencil icon-large pull-left nd_navbar-icon"></i> Redraw Map</button>
+