[feature][dashboard] Show/hide filter indicator on the applicable charts when filter options are open/close

superset/assets/spec/javascripts/dashboard/components/FilterIndicatorsContainer_spec.jsx

@@ -34,6 +34,7 @@ describe('FilterIndicatorsContainer', () => {
     filterImmuneSlices: [],
     filterImmuneSliceFields: {},
     setDirectPathToChild: () => {},
+    filterFieldOnFocus: {},
   };
 
   colorMap.getFilterColorKey = jest.fn(() => 'id_column');

superset/assets/spec/javascripts/dashboard/fixtures/mockDashboardState.js

@@ -29,4 +29,5 @@ export default {
   isStarred: true,
   isPublished: true,
   css: '',
+  focusedFilterField: [],
 };

superset/assets/spec/javascripts/dashboard/reducers/dashboardState_spec.js

@@ -22,6 +22,7 @@ import {
   ON_SAVE,
   REMOVE_SLICE,
   SET_EDIT_MODE,
+  SET_FOCUSED_FILTER_FIELD,
   SET_MAX_UNDO_HISTORY_EXCEEDED,
   SET_UNSAVED_CHANGES,
   TOGGLE_EXPAND_SLICE,
@@ -131,4 +132,38 @@ describe('dashboardState reducer', () => {
       updatedColorScheme: false,
     });
   });
+
+  it('should clear focused filter field', () => {
+    // dashboard only has 1 focused filter field at a time,
+    // but when user switch different filter boxes,
+    // browser didn't always fire onBlur and onFocus events in order.
+    // so in redux state focusedFilterField prop is a queue,
+    // we always shift first element in the queue
+
+    // init state: has 1 focus field
+    const initState = {
+      focusedFilterField: [
+        {
+          chartId: 1,
+          column: 'column_1',
+        },
+      ],
+    };
+    // when user switching filter,
+    // browser focus on new filter first,
+    // then blur current filter
+    const step1 = dashboardStateReducer(initState, {
+      type: SET_FOCUSED_FILTER_FIELD,
+      chartId: 2,
+      column: 'column_2',
+    });
+    const step2 = dashboardStateReducer(step1, {
+      type: SET_FOCUSED_FILTER_FIELD,
+    });
+
+    expect(step2.focusedFilterField.slice(-1).pop()).toEqual({
+      chartId: 2,
+      column: 'column_2',
+    });
+  });
 });

superset/assets/spec/javascripts/dashboard/util/getChartAndLabelComponentIdFromPath_spec.js

@@ -0,0 +1,38 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import getChartAndLabelComponentIdFromPath from '../../../../src/dashboard/util/getChartAndLabelComponentIdFromPath';
+
+describe('getChartAndLabelComponentIdFromPath', () => {
+  it('should return label and component id', () => {
+    const directPathToChild = [
+      'ROOT_ID',
+      'TABS-aX1uNK-ryo',
+      'TAB-ZRgxfD2ktj',
+      'ROW-46632bc2',
+      'COLUMN-XjlxaS-flc',
+      'CHART-x-RMdAtlDb',
+      'LABEL-region',
+    ];
+
+    expect(getChartAndLabelComponentIdFromPath(directPathToChild)).toEqual({
+      label: 'LABEL-region',
+      chart: 'CHART-x-RMdAtlDb',
+    });
+  });
+});

superset/assets/src/chart/Chart.jsx

@@ -58,12 +58,16 @@ const propTypes = {
   // dashboard callbacks
   addFilter: PropTypes.func,
   onQuery: PropTypes.func,
+  onFilterMenuOpen: PropTypes.func,
+  onFilterMenuClose: PropTypes.func,
 };
 
 const BLANK = {};
 
 const defaultProps = {
   addFilter: () => BLANK,
+  onFilterMenuOpen: () => BLANK,
+  onFilterMenuClose: () => BLANK,
   initialValues: BLANK,
   setControlValue() {},
   triggerRender: false,

superset/assets/src/chart/ChartRenderer.jsx

@@ -44,12 +44,16 @@ const propTypes = {
   refreshOverlayVisible: PropTypes.bool,
   // dashboard callbacks
   addFilter: PropTypes.func,
+  onFilterMenuOpen: PropTypes.func,
+  onFilterMenuClose: PropTypes.func,
 };
 
 const BLANK = {};
 
 const defaultProps = {
   addFilter: () => BLANK,
+  onFilterMenuOpen: () => BLANK,
+  onFilterMenuClose: () => BLANK,
   initialValues: BLANK,
   setControlValue() {},
   triggerRender: false,
@@ -73,6 +77,8 @@ class ChartRenderer extends React.Component {
       onError: this.handleRenderFailure,
       setControlValue: this.handleSetControlValue,
       setTooltip: this.setTooltip,
+      onFilterMenuOpen: this.props.onFilterMenuOpen,
+      onFilterMenuClose: this.props.onFilterMenuClose,
     };
   }
 

superset/assets/src/components/FilterBadgeIcon.css

@@ -27,3 +27,8 @@
     cursor: pointer;
     background-color: #9e9e9e;
 }
+
+.color-bar.badge-group,
+.filter-badge.badge-group {
+    background-color: rgb(72, 72, 72);
+}

superset/assets/src/dashboard/actions/dashboardState.js

@@ -331,6 +331,16 @@ export function setDirectPathToChild(path) {
   return { type: SET_DIRECT_PATH, path };
 }
 
+export const SET_FOCUSED_FILTER_FIELD = 'SET_FOCUSED_FILTER_FIELD';
+export function setFocusedFilterField(chartId, column) {
+  return { type: SET_FOCUSED_FILTER_FIELD, chartId, column };
+}
+
+export function unsetFocusedFilterField() {
+  // same ACTION as setFocusedFilterField, without arguments
+  return { type: SET_FOCUSED_FILTER_FIELD };
+}
+
 // Undo history ---------------------------------------------------------------
 export const SET_MAX_UNDO_HISTORY_EXCEEDED = 'SET_MAX_UNDO_HISTORY_EXCEEDED';
 export function setMaxUndoHistoryExceeded(maxUndoHistoryExceeded = true) {

superset/assets/src/dashboard/components/FilterIndicator.jsx

@@ -19,6 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from '@superset-ui/translation';
+import { isEmpty } from 'lodash';
 
 import { filterIndicatorPropShape } from '../util/propShapes';
 import FilterBadgeIcon from '../../components/FilterBadgeIcon';
@@ -43,7 +44,12 @@ class FilterIndicator extends React.PureComponent {
   }
 
   render() {
-    const { colorCode, label, values } = this.props.indicator;
+    const {
+      colorCode,
+      label,
+      values,
+      isFilterFieldActive,
+    } = this.props.indicator;
 
     const filterTooltip = (
       <FilterIndicatorTooltip
@@ -56,12 +62,12 @@ class FilterIndicator extends React.PureComponent {
     return (
       <FilterTooltipWrapper tooltip={filterTooltip}>
         <div
-          className="filter-indicator"
+          className={`filter-indicator ${isFilterFieldActive ? 'active' : ''}`}
           onClick={this.focusToFilterComponent}
           role="none"
         >
           <div className={`color-bar ${colorCode}`} />
-          <FilterBadgeIcon />
+          <FilterBadgeIcon colorCode={isEmpty(values) ? '' : colorCode} />
         </div>
       </FilterTooltipWrapper>
     );

superset/assets/src/dashboard/components/FilterIndicatorGroup.jsx

@@ -19,6 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from '@superset-ui/translation';
+import { isEmpty } from 'lodash';
 
 import FilterBadgeIcon from '../../components/FilterBadgeIcon';
 import FilterIndicatorTooltip from './FilterIndicatorTooltip';
@@ -42,6 +43,13 @@ class FilterIndicatorGroup extends React.PureComponent {
 
   render() {
     const { indicators } = this.props;
+    const hasFilterFieldActive = indicators.some(
+      indicator => indicator.isFilterFieldActive,
+    );
+    const hasFilterApplied = indicators.some(
+      indicator => !isEmpty(indicator.values),
+    );
+
     return (
       <FilterTooltipWrapper
         tooltip={
@@ -63,9 +71,13 @@ class FilterIndicatorGroup extends React.PureComponent {
           </React.Fragment>
         }
       >
-        <div className="filter-indicator-group">
+        <div
+          className={`filter-indicator-group ${
+            hasFilterFieldActive ? 'active' : ''
+          }`}
+        >
           <div className="color-bar badge-group" />
-          <FilterBadgeIcon />
+          <FilterBadgeIcon colorCode={hasFilterApplied ? 'badge-group' : ''} />
         </div>
       </FilterTooltipWrapper>
     );

superset/assets/src/dashboard/components/FilterIndicatorsContainer.jsx

@@ -38,6 +38,7 @@ const propTypes = {
   filterImmuneSlices: PropTypes.arrayOf(PropTypes.number).isRequired,
   filterImmuneSliceFields: PropTypes.object.isRequired,
   setDirectPathToChild: PropTypes.func.isRequired,
+  filterFieldOnFocus: PropTypes.object.isRequired,
 };
 
 const defaultProps = {
@@ -62,6 +63,7 @@ export default class FilterIndicatorsContainer extends React.PureComponent {
       chartId: currentChartId,
       filterImmuneSlices,
       filterImmuneSliceFields,
+      filterFieldOnFocus,
     } = this.props;
 
     if (Object.keys(dashboardFilters).length === 0) {
@@ -108,6 +110,9 @@ export default class FilterIndicatorsContainer extends React.PureComponent {
                 (isDateFilter && columns[name] === 'No filter')
                   ? []
                   : [].concat(columns[name]),
+              isFilterFieldActive:
+                chartId === filterFieldOnFocus.chartId &&
+                name === filterFieldOnFocus.column,
             };
 
             // do not apply filter on fields in the filterImmuneSliceFields map

superset/assets/src/dashboard/components/gridComponents/Chart.jsx

@@ -51,6 +51,8 @@ const propTypes = {
   logEvent: PropTypes.func.isRequired,
   toggleExpandSlice: PropTypes.func.isRequired,
   changeFilter: PropTypes.func.isRequired,
+  setFocusedFilterField: PropTypes.func.isRequired,
+  unsetFocusedFilterField: PropTypes.func.isRequired,
   editMode: PropTypes.bool.isRequired,
   isExpanded: PropTypes.bool.isRequired,
   isCached: PropTypes.bool,
@@ -83,6 +85,8 @@ class Chart extends React.Component {
     };
 
     this.changeFilter = this.changeFilter.bind(this);
+    this.handleFilterMenuOpen = this.handleFilterMenuOpen.bind(this);
+    this.handleFilterMenuClose = this.handleFilterMenuClose.bind(this);
     this.exploreChart = this.exploreChart.bind(this);
     this.exportCSV = this.exportCSV.bind(this);
     this.forceRefresh = this.forceRefresh.bind(this);
@@ -169,6 +173,14 @@ class Chart extends React.Component {
     this.props.changeFilter(this.props.chart.id, newSelectedValues);
   }
 
+  handleFilterMenuOpen(chartId, column) {
+    this.props.setFocusedFilterField(chartId, column);
+  }
+
+  handleFilterMenuClose() {
+    this.props.unsetFocusedFilterField();
+  }
+
   exploreChart() {
     this.props.logEvent(LOG_ACTIONS_EXPLORE_DASHBOARD_CHART, {
       slice_id: this.props.slice.slice_id,
@@ -278,6 +290,8 @@ class Chart extends React.Component {
             width={width}
             height={this.getChartHeight()}
             addFilter={this.changeFilter}
+            onFilterMenuOpen={this.handleFilterMenuOpen}
+            onFilterMenuClose={this.handleFilterMenuClose}
             annotationData={chart.annotationData}
             chartAlert={chart.chartAlert}
             chartId={id}