From 7eceb140be58d30f0caafa196f687b489012607d Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Fri, 26 Aug 2016 15:21:16 -0700
Subject: [PATCH] [bugfix] slice description makes charts overflow (#993)
 (#1010)

---
 .../javascripts/explore/components/QueryAndSaveBtns.jsx  | 4 ++--
 caravel/assets/javascripts/modules/caravel.js            | 8 ++++----
 .../explore/components/QueryAndSaveBtns_spec.jsx         | 4 ++--
 caravel/templates/caravel/explore.html                   | 9 ++++++++-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx b/caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
index 22a30a7e58..1a52139340 100644
--- a/caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
+++ b/caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
@@ -14,7 +14,7 @@ export default function QueryAndSaveBtns({ canAdd, onQuery }) {
   return (
     <div className="btn-group query-and-save">
       <button type="button" className="btn btn-primary btn-sm" onClick={onQuery}>
-        <i className="fa fa-bolt"></i>Query
+        <i className="fa fa-bolt"></i> Query
       </button>
       <button
         type="button"
@@ -22,7 +22,7 @@ export default function QueryAndSaveBtns({ canAdd, onQuery }) {
         data-target="#save_modal"
         data-toggle="modal"
       >
-        <i className="fa fa-plus-circle"></i>Save as
+        <i className="fa fa-plus-circle"></i> Save as
       </button>
     </div>
   );
diff --git a/caravel/assets/javascripts/modules/caravel.js b/caravel/assets/javascripts/modules/caravel.js
index 81473558ae..4b013fa87a 100644
--- a/caravel/assets/javascripts/modules/caravel.js
+++ b/caravel/assets/javascripts/modules/caravel.js
@@ -153,8 +153,8 @@ const px = function () {
         if (data !== undefined) {
           $('#query_container').html(data.query);
         }
-        $('#timer').removeClass('btn-warning');
-        $('#timer').addClass('btn-success');
+        $('#timer').removeClass('label-warning label-danger');
+        $('#timer').addClass('label-success');
         $('span.view_query').removeClass('disabled');
         $('#json').click(function () {
           window.location = data.json_endpoint;
@@ -231,8 +231,8 @@ const px = function () {
         container.css('height', this.height());
         dttm = 0;
         timer = setInterval(stopwatch, 10);
-        $('#timer').removeClass('btn-danger btn-success');
-        $('#timer').addClass('btn-warning');
+        $('#timer').removeClass('label-danger label-success');
+        $('#timer').addClass('label-warning');
         this.viz.render();
       },
       resize() {
diff --git a/caravel/assets/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx b/caravel/assets/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx
index e4872f8ddf..f870b7303e 100644
--- a/caravel/assets/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx
+++ b/caravel/assets/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx
@@ -28,8 +28,8 @@ describe('QueryAndSaveButtons', () => {
     });
 
     it('renders buttons with correct text', () => {
-      expect(wrapper.find('button').contains('Query')).to.eql(true);
-      expect(wrapper.find('button').contains('Save as')).to.eql(true);
+      expect(wrapper.find('button').contains(' Query')).to.eql(true);
+      expect(wrapper.find('button').contains(' Save as')).to.eql(true);
     });
   });
 });
diff --git a/caravel/templates/caravel/explore.html b/caravel/templates/caravel/explore.html
index ec1010c45b..846a26528c 100644
--- a/caravel/templates/caravel/explore.html
+++ b/caravel/templates/caravel/explore.html
@@ -192,9 +192,16 @@
                 </div>
                 <div class="col-md-6">
                   <div class="slice-meta-controls pull-right">
-                    <span id="is_cached" class="label label-default" title="{{ _("Force refresh" )}}" data-toggle="tooltip">
+                    <span id="is_cached" class="label label-default m-r-3" title="{{ _("Force refresh" )}}" data-toggle="tooltip">
                       cached
                     </span>
+                    <span
+                      class="label label-warning m-r-3"
+                      id="timer"
+                      title="{{ _("Query timer") }}"
+                      data-toggle="tooltip">
+                      {{ _("0 sec") }}
+                    </span>
                     <div class="btn-group results" role="group">
                       <a role="button" tabindex="0" class="btn btn-default btn-sm" id="shortner" data-toggle="popover" data-trigger="focus">
                         <i class="fa fa-link" data-toggle="tooltip" title="{{ _("Short URL") }}"></i>&nbsp;