From b1f4f8b869a216451d5998ff81a10d6dd5af2968 Mon Sep 17 00:00:00 2001
From: Evan Rusackas <evan@preset.io>
Date: Fri, 2 Oct 2020 14:26:18 -0700
Subject: [PATCH] new toys for highlighting dash components

---
 .../dashboard/components/DashboardBuilder.jsx | 42 ++++++++++++++++++-
 .../src/dashboard/stylesheets/builder.less    | 18 --------
 .../stylesheets/components/chart.less         |  8 ----
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder.jsx b/superset-frontend/src/dashboard/components/DashboardBuilder.jsx
index ecaf3cf2ea67..d7012f5aabeb 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder.jsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder.jsx
@@ -25,6 +25,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Sticky, StickyContainer } from 'react-sticky';
 import { TabContainer, TabContent, TabPane } from 'react-bootstrap';
+import { styled } from '@superset-ui/core';
 
 import BuilderComponentPane from './BuilderComponentPane';
 import DashboardHeader from '../containers/DashboardHeader';
@@ -69,6 +70,43 @@ const defaultProps = {
   colorScheme: undefined,
 };
 
+const Styles = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: auto;
+
+  .grid-container .dashboard-component-tabs {
+    box-shadow: none;
+    padding-left: 0;
+  }
+
+  & > div:first-child {
+    width: 100%;
+    flex-grow: 1;
+    position: relative;
+  }
+
+  .dashboard-component-chart-holder {
+    // transitionable traits to show filter relevance
+    transition: all 0.2s;
+    border: 2px solid transparent;
+    box-shadow: 0px 0px 0px #fff;
+  }
+  &.focused-filter-field {
+    .dashboard-component-chart-holder {
+      background: none;
+      filter: blur(2px);
+      opacity: 0.3;
+    }
+    &.scoped-to-focused-filter {
+      border-color: ${({ theme }) => theme.colors.grayscale.light2};
+      opacity: 1;
+      box-shadow: 0px 0px 8px ${({ theme }) => theme.colors.grayscale.light2};
+    }
+  }
+`;
+
 class DashboardBuilder extends React.Component {
   static shouldFocusTabs(event, container) {
     // don't focus the tabs when we click on a tab
@@ -222,7 +260,7 @@ class DashboardBuilder extends React.Component {
           )}
         </Sticky>
 
-        <div className="dashboard-content">
+        <StyledDashboardContent className="dashboard-content">
           <div className="grid-container">
             <ParentSize>
               {({ width }) => (
@@ -277,7 +315,7 @@ class DashboardBuilder extends React.Component {
               colorScheme={colorScheme}
             />
           )}
-        </div>
+        </StyledDashboardContent>
         <ToastPresenter />
       </StickyContainer>
     );
diff --git a/superset-frontend/src/dashboard/stylesheets/builder.less b/superset-frontend/src/dashboard/stylesheets/builder.less
index fbf0ab93fc30..82b4c59ef0de 100644
--- a/superset-frontend/src/dashboard/stylesheets/builder.less
+++ b/superset-frontend/src/dashboard/stylesheets/builder.less
@@ -31,13 +31,6 @@
   box-shadow: 0 4px 4px 0 fade(@darkest, @opacity-light); /* @TODO color */
 }
 
-.dashboard-content {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  height: auto;
-}
-
 /* only top-level tabs have popover, give it more padding to match header + tabs */
 .dashboard > .with-popover-menu > .popover-menu {
   left: 24px;
@@ -49,17 +42,6 @@
   padding-left: 8px; /* note this is added to tab-level padding, to match header */
 }
 
-.dashboard-content .grid-container .dashboard-component-tabs {
-  box-shadow: none;
-  padding-left: 0;
-}
-
-.dashboard-content > div:first-child {
-  width: 100%;
-  flex-grow: 1;
-  position: relative;
-}
-
 .dropdown-toggle.btn.btn-primary .caret {
   color: @lightest;
 }
diff --git a/superset-frontend/src/dashboard/stylesheets/components/chart.less b/superset-frontend/src/dashboard/stylesheets/components/chart.less
index dd613de6ef21..25fb2066cd56 100644
--- a/superset-frontend/src/dashboard/stylesheets/components/chart.less
+++ b/superset-frontend/src/dashboard/stylesheets/components/chart.less
@@ -50,14 +50,6 @@
     box-shadow: none;
     transition: box-shadow 1s ease-in-out;
   }
-
-  &.scoped-to-focused-filter {
-    border: 1px solid green;
-  }
-
-  &.unscoped-to-focused-filter {
-    border: 1px solid red;
-  }
 }
 
 .dashboard-chart {