Periodically update the slices in the dashboard (#374)

* Periodically update the slices in the dashboard

* Make the refresh interval changeable

* Add the button and the modal for the user to change the refresh interval

* Don't use callback for refreshing

* Randomize to prevent all widgets refreshing at the same time

* Show the loading icon as an overlay when the slices refresh

caravel/assets/javascripts/dashboard.js

@@ -31,10 +31,11 @@ var Dashboard = function (dashboardData) {
             slice.render(true);
           });
           sliceObjects.push(slice);
-          slice.render();
         }
       });
       this.slices = sliceObjects;
+      this.refreshTimer = null;
+      this.startPeriodicRender(0);
     },
     setFilter: function (slice_id, col, vals) {
       this.addFilter(slice_id, col, vals, false);
@@ -57,6 +58,36 @@ var Dashboard = function (dashboardData) {
       // Returns a list of human readable active filters
       return JSON.stringify(this.filters, null, 4);
     },
+    stopPeriodicRender: function () {
+      if (this.refreshTimer) {
+        clearTimeout(this.refreshTimer);
+        this.refreshTimer = null;
+      }
+    },
+    startPeriodicRender: function (interval) {
+      this.stopPeriodicRender();
+      var dash = this;
+      var maxRandomDelay = Math.min(interval * 0.1, 5000);
+      var refreshAll = function () {
+        dash.slices.forEach(function (slice) {
+          setTimeout(function () {
+                slice.render(true);
+              },
+              //Randomize to prevent all widgets refreshing at the same time
+              maxRandomDelay * Math.random());
+        });
+      };
+
+      var fetchAndRender = function () {
+        refreshAll();
+        if (interval > 0) {
+          dash.refreshTimer = setTimeout(function () {
+            fetchAndRender();
+          }, interval);
+        }
+      };
+      fetchAndRender();
+    },
     refreshExcept: function (slice_id) {
       var immune = this.metadata.filter_immune_slice || [];
       this.slices.forEach(function (slice) {
@@ -191,6 +222,10 @@ var Dashboard = function (dashboardData) {
           body: "The following global filters are currently applied:<br/>" + dashboard.readFilters()
         });
       });
+      $("#refresh_dash_interval").on("change", function () {
+        var interval = $(this).find('option:selected').val() * 1000;
+        dashboard.startPeriodicRender(interval);
+      });
       $('#refresh_dash').click(function () {
         dashboard.slices.forEach(function (slice) {
           slice.render(true);

caravel/assets/javascripts/modules/caravel.js

@@ -314,8 +314,6 @@ var px = (function () {
         }
         this.force = force;
         token.find("img.loading").show();
-        container.hide();
-        container.html('');
         container.css('height', slice.height());
         dttm = 0;
         timer = setInterval(stopwatch, 10);
@@ -325,9 +323,7 @@ var px = (function () {
       },
       resize: function () {
         token.find("img.loading").show();
-        container.hide();
         container.css('height', slice.height());
-        container.html('');
         this.viz.render();
         this.viz.resize();
       },