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

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

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



##########
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:
       It turned out that it wasn't necessary here, but we do use that trick throughout our codebase. ESLint complains about that, but I think that we can live with that if we must use complex objects in the dependency array




-- 
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