Introducing a caching layer

dashed/assets/javascripts/dashboard.js

@@ -22,7 +22,7 @@ var Dashboard = function (dashboardData) {
       dashboard.slices.forEach(function (data) {
         var slice = px.Slice(data, dash);
         $("#slice_" + data.slice_id).find('a.refresh').click(function () {
-          slice.render();
+          slice.render(true);
         });
         sliceObjects.push(slice);
         slice.render();
@@ -90,7 +90,7 @@ var Dashboard = function (dashboardData) {
       var gridster = $(".gridster ul").gridster({
         autogrow_cols: true,
         widget_margins: [10, 10],
-        widget_base_dimensions: [100, 100],
+        widget_base_dimensions: [95, 95],
         draggable: {
           handle: '.drag'
         },
@@ -113,6 +113,16 @@ var Dashboard = function (dashboardData) {
           };
         }
       }).data('gridster');
+
+      // Displaying widget controls on hover
+      $('.chart-header').hover(
+        function () {
+          $(this).find('.chart-controls').fadeIn(300);
+        },
+        function () {
+          $(this).find('.chart-controls').fadeOut(300);
+        }
+      );
       $("div.gridster").css('visibility', 'visible');
       $("#savedash").click(function () {
         var expanded_slices = {};
@@ -168,6 +178,11 @@ var Dashboard = function (dashboardData) {
       $('#filters').click(function () {
         alert(dashboard.readFilters());
       });
+      $('#refresh_dash').click(function () {
+        dashboard.slices.forEach(function (slice) {
+          slice.render(true);
+        });
+      });
       $("a.remove-chart").click(function () {
         var li = $(this).parents("li");
         gridster.remove_widget(li);
@@ -226,4 +241,5 @@ var Dashboard = function (dashboardData) {
 
 $(document).ready(function () {
   Dashboard($('.dashboard').data('dashboard'));
+  $('[data-toggle="tooltip"]').tooltip({ container: 'body' });
 });

dashed/assets/javascripts/explore.js

@@ -53,19 +53,18 @@ function prepForm() {
   });
 }
 
-function renderSlice() {
+function druidify() {
+  $('.query-and-save button').attr('disabled', 'disabled');
+  $('.btn-group.results span,a').attr('disabled', 'disabled');
+  $('div.alert').remove();
+  $('#is_cached').hide();
+  history.pushState({}, document.title, slice.querystring());
   prepForm();
   slice.render();
 }
 
 function initExploreView() {
 
-  function druidify() {
-    $('div.alert').remove();
-    history.pushState({}, document.title, slice.querystring());
-    renderSlice();
-  }
-
   function get_collapsed_fieldsets() {
     var collapsed_fieldsets = $("#collapsed_fieldsets").val();
 
@@ -199,9 +198,7 @@ function initExploreView() {
     bindOrder: 'sortableStop'
   });
   $("form").show();
-  $('[data-toggle="tooltip"]').tooltip({
-    container: 'body'
-  });
+  $('[data-toggle="tooltip"]').tooltip({ container: 'body' });
   $(".ui-helper-hidden-accessible").remove(); // jQuery-ui 1.11+ creates a div for every tooltip
 
   function set_filters() {
@@ -319,7 +316,7 @@ $(document).ready(function () {
   $('.slice').data('slice', slice);
 
   // call vis render method, which issues ajax
-  renderSlice();
+  druidify();
 
   // make checkbox inputs display as toggles
   $(':checkbox')

dashed/assets/javascripts/modules/dashed.js

@@ -169,16 +169,54 @@ var px = (function () {
         }
         return qrystr;
       },
+      getWidgetHeader: function () {
+        return this.container.parents("li.widget").find(".chart-header");
+      },
       jsonEndpoint: function () {
         var parser = document.createElement('a');
         parser.href = data.json_endpoint;
-        var endpoint = parser.pathname + this.querystring() + "&json=true";
+        var endpoint = parser.pathname + this.querystring();
+        endpoint += "&json=true";
+        endpoint += "&force=" + this.force;
         return endpoint;
       },
       done: function (data) {
         clearInterval(timer);
         token.find("img.loading").hide();
         container.show();
+
+        var cachedSelector = null;
+        if (dashboard === undefined) {
+          cachedSelector = $('#is_cached');
+          if (data !== undefined && data.is_cached) {
+            cachedSelector
+              .click(function () {
+                slice.render(true);
+              })
+              .attr('title', 'Served from data cached at ' + data.cached_dttm + '. Click to force-refresh')
+              .show()
+              .tooltip('fixTitle');
+          } else {
+            cachedSelector.hide();
+          }
+        } else {
+          var refresh = this.getWidgetHeader().find('.refresh');
+          if (data !== undefined && data.is_cached) {
+            refresh
+            .addClass('danger')
+            .attr(
+              'title',
+              'Served from data cached at ' + data.cached_dttm + '. Click to force-refresh')
+            .tooltip('fixTitle');
+          } else {
+            refresh
+            .removeClass('danger')
+            .attr(
+              'title',
+              'Click to force-refresh')
+            .tooltip('fixTitle');
+          }
+        }
         if (data !== undefined) {
           $("#query_container").html(data.query);
         }
@@ -194,7 +232,8 @@ var px = (function () {
         $('#csv').click(function () {
           window.location = data.csv_endpoint;
         });
-        $('.btn-group.results span').removeAttr('disabled');
+        $('.btn-group.results span,a').removeAttr('disabled');
+        $('.query-and-save button').removeAttr('disabled');
         always(data);
       },
       error: function (msg) {
@@ -204,6 +243,8 @@ var px = (function () {
         container.show();
         $('span.query').removeClass('disabled');
         $('#timer').addClass('btn-danger');
+        $('.btn-group.results span,a').removeAttr('disabled');
+        $('.query-and-save button').removeAttr('disabled');
         always(data);
       },
       width: function () {
@@ -228,8 +269,11 @@ var px = (function () {
           }, 500);
         });
       },
-      render: function () {
-        $('.btn-group.results span').attr('disabled', 'disabled');
+      render: function (force) {
+        if (force === undefined) {
+          force = false;
+        }
+        this.force = force;
         token.find("img.loading").show();
         container.hide();
         container.html('');