From 7307ddad3c9b60ec2178286cbc27a302e158de83 Mon Sep 17 00:00:00 2001
From: vera-liu <vera.liu@airbnb.com>
Date: Wed, 26 Oct 2016 21:22:10 -0700
Subject: [PATCH] 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     |  5 +++++
 .../javascripts/dashboard/components/SliceCell.js      |  2 +-
 caravel/assets/stylesheets/dashboard.css               | 10 ++++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/caravel/assets/javascripts/dashboard/Dashboard.jsx b/caravel/assets/javascripts/dashboard/Dashboard.jsx
index 9142cbebd0..c95824ac3e 100644
--- a/caravel/assets/javascripts/dashboard/Dashboard.jsx
+++ b/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);
         }
       });
     },
diff --git a/caravel/assets/javascripts/dashboard/components/SliceCell.js b/caravel/assets/javascripts/dashboard/components/SliceCell.js
index a9e3a184d5..08aff96a76 100644
--- a/caravel/assets/javascripts/dashboard/components/SliceCell.js
+++ b/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">
diff --git a/caravel/assets/stylesheets/dashboard.css b/caravel/assets/stylesheets/dashboard.css
index 43ec0014a3..b09d9444a2 100644
--- a/caravel/assets/stylesheets/dashboard.css
+++ b/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;