Highlight affected slices for filter change in dashboard view (#1439)

* Highlight affected slices for filter change in dashboard view
Done:
 - When user adds/deletes a filter in dashboard, affected slices will
   have their header highlighted for 2 seconds

* Modified highlight to a more subtle box shadow

* Added slice-cell class for highlight transition

* Changed class name to slice-cell-highlight

caravel/assets/javascripts/dashboard/Dashboard.jsx

@@ -201,6 +201,11 @@ function dashboardContainer(dashboardData) {
       this.slices.forEach(function (slice) {
         if (slice.data.slice_id !== sliceId && immune.indexOf(slice.data.slice_id) === -1) {
           slice.render();
+          const sliceSeletor = $(`#${slice.data.token}-cell`);
+          sliceSeletor.addClass('slice-cell-highlight');
+          setTimeout(function () {
+            sliceSeletor.removeClass('slice-cell-highlight');
+          }, 1200);
         }
       });
     },

caravel/assets/javascripts/dashboard/components/SliceCell.js

@@ -8,7 +8,7 @@ const propTypes = {
 
 function SliceCell({ expandedSlices, removeSlice, slice }) {
   return (
-    <div>
+    <div className="slice-cell" id={`${slice.token}-cell`}>
       <div className="chart-header">
         <div className="row">
           <div className="col-md-12 header">

caravel/assets/stylesheets/dashboard.css

@@ -81,6 +81,16 @@ div.widget .chart-controls {
 .slice-grid div.separator.widget h1,h2,h3,h4 {
   margin-top: 0px;
 }
+
+.slice-cell {
+  box-shadow: 0px 0px 20px 5px rgba(0,0,0,0);
+  transition: box-shadow 1s ease-in;
+}
+
+.slice-cell-highlight {
+  box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.2);
+}
+
 .dashboard .separator.widget .slice_container {
   padding: 0px;
   overflow: visible;