force running spinner

share/views/ajax/device/netmap.tt

@@ -26,9 +26,46 @@ function resizeGraphContainer() {
     var netmap_pane = jQuery('#netmap_pane');
     graph.width( parseInt(netmap_pane.parent().css('width')) ).resume();
     graph.height( window.innerHeight - 100 ).resume();
+    d3.select("#nd2_netmap-spinner-container").attr("transform",
+      "translate(" + (graph.width() - 16) + "," + (graph.height() - 16) + ")")
   }, 500)
 }
 
+$('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
+$('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
+$(window).on("resize", resizeGraphContainer);
+
+var radius = 12;
+var tau = 2 * Math.PI;
+
+var arc = d3.svg.arc()
+  .innerRadius(radius * 0.5)
+  .outerRadius(radius * 0.9)
+  .startAngle(0)
+  .endAngle(0.33 * tau);
+
+var arc2 = d3.svg.arc()
+  .innerRadius(radius * 0.5)
+  .outerRadius(radius * 0.9)
+  .startAngle(0)
+  .endAngle(tau);
+
+function spin(selection, duration) {
+  duration = duration || 1500;
+  if (! graph.inspect().status.forceRunning) {
+    d3.select('#nd2_netmap-spinner').style('fill', '#CCFFCC').attr('d', arc2);
+    return;
+  }
+  d3.select('#nd2_netmap-spinner').style('fill', '#FFE4B5').attr('d', arc);
+  selection.transition()
+    .ease("linear")
+    .duration(duration)
+    .attrTween("transform", function() {
+        return d3.interpolateString("rotate(0)", "rotate(360)");
+    });
+  setTimeout(function() { spin(selection, duration); }, duration);
+}
+
 $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(mapdata) {
 
   jQuery(document).ready(function() {
@@ -58,10 +95,6 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
       .charge(-550)
       .gravity(0.3);
 
-    jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
-    jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
-    jQuery(window).on("resize", resizeGraphContainer);
-
     graph['nd2'] = {};
     graph['nd2']['centernode'] = mapdata['v3']['centernode'];
     graph['nd2']['dragging'] = false;
@@ -108,17 +141,12 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
           });
       });
 
-      graph.inspect().main.force.on('end.setupfornetdisco', null);
+      graph.inspect().main.force.on('start.nd2spinner', function() {
+        d3.select("#nd2_netmap-spinner").call(spin);
       });
 
-    var netmapdata = {'data': {
+      graph.inspect().main.force.on('end.setupfornetdisco', null);
-      'nodes': mapdata['v4']['nodes'].map(function(node) {
+    });
-        var index = node['index'];
-        return mapdata['v3']['nodes'][index];
-      }),
-      'links': mapdata['v3']['links']
-    }};
-    graph.start(netmapdata);
 
     graph.inspect().dom.svg
       .append("svg:text")
@@ -133,6 +161,23 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
         requestFullScreen(document.getElementById('netmap_pane'));
       });
 
+    graph.inspect().dom.svg
+      .append("g")
+      .attr("id", "nd2_netmap-spinner-container")
+      .attr("transform", "translate(" + (graph.width() - 16) + "," + (graph.height() - 16) + ")")
+      .append("path")
+      .attr("id", "nd2_netmap-spinner");
+
+    var netmapdata = {'data': {
+      'nodes': mapdata['v4']['nodes'].map(function(node) {
+        var index = node['index'];
+        return mapdata['v3']['nodes'][index];
+      }),
+      'links': mapdata['v3']['links']
+    }};
+    graph.start(netmapdata);
+    d3.select("#nd2_netmap-spinner").call(spin);
+
     if ('[% params.mapshow %]' == 'neighbors') {
       setTimeout(function() {
         if ('[% params.dynamicsize %]' == 'on') {