[GitHub] [superset] suddjian commented on a change in pull request #15424: perf(dashboard): Improve perf of highlighting charts in scope of active filter

[GitBox <gi...@apache.org>]

suddjian commented on a change in pull request #15424:
URL: https://github.com/apache/superset/pull/15424#discussion_r660068657



##########
File path: superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
##########
@@ -16,29 +16,132 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import cx from 'classnames';
 import Icon from 'src/components/Icon';
 import Icons from 'src/components/Icons';
+import { uniqWith } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
 import DetailsPanelPopover from './DetailsPanel';
 import { Pill } from './Styles';
-import { Indicator } from './selectors';
+import {
+  Indicator,
+  IndicatorStatus,
+  selectIndicatorsForChart,
+  selectNativeIndicatorsForChart,
+} from './selectors';
+import { setDirectPathToChild } from '../../actions/dashboardState';
+import {
+  ChartsState,
+  DashboardInfo,
+  DashboardLayout,
+  RootState,
+} from '../../types';
+import { Filters } from '../../reducers/types';
+import { DataMaskStateWithId } from '../../../dataMask/types';
 
 export interface FiltersBadgeProps {
-  appliedCrossFilterIndicators: Indicator[];
-  appliedIndicators: Indicator[];
-  unsetIndicators: Indicator[];
-  incompatibleIndicators: Indicator[];
-  onHighlightFilterSource: (path: string[]) => void;
+  chartId: number;
 }
 
-const FiltersBadge = ({
-  appliedCrossFilterIndicators,
-  appliedIndicators,
-  unsetIndicators,
-  incompatibleIndicators,
-  onHighlightFilterSource,
-}: FiltersBadgeProps) => {
+const sortByStatus = (indicators: Indicator[]): Indicator[] => {
+  const statuses = [
+    IndicatorStatus.Applied,
+    IndicatorStatus.Unset,
+    IndicatorStatus.Incompatible,
+  ];
+  return indicators.sort(
+    (a, b) =>
+      statuses.indexOf(a.status as IndicatorStatus) -
+      statuses.indexOf(b.status as IndicatorStatus),
+  );
+};
+
+export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
+  const dispatch = useDispatch();
+  const datasources = useSelector<RootState, any>(state => state.datasources);
+  const dashboardFilters = useSelector<RootState, any>(
+    state => state.dashboardFilters,
+  );
+  const nativeFilters = useSelector<RootState, Filters>(
+    state => state.nativeFilters?.filters,
+  );
+  const dashboardInfo = useSelector<RootState, DashboardInfo>(
+    state => state.dashboardInfo,
+  );
+  const charts = useSelector<RootState, ChartsState>(state => state.charts);
+  const present = useSelector<RootState, DashboardLayout>(
+    state => state.dashboardLayout.present,
+  );
+  const dataMask = useSelector<RootState, DataMaskStateWithId>(
+    state => state.dataMask,
+  );
+
+  const onHighlightFilterSource = useCallback(
+    (path: string[]) => {
+      dispatch(setDirectPathToChild(path));
+    },
+    [dispatch],
+  );
+
+  const chart = charts[chartId];
+  const dashboardIndicators = useMemo(
+    () =>
+      selectIndicatorsForChart(chartId, dashboardFilters, datasources, chart),
+    [
+      chartId,
+      JSON.stringify(chart),

Review comment:
       Interesting dependency trick! Do we need to suppress linter warnings here?




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org