fix(native filters): rendering performance improvement by reduce over…

…rendering (#25901)

(cherry picked from commit e1d73d5)

superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts

@@ -58,7 +58,6 @@ export enum AppSection {
 export type FilterState = { value?: any; [key: string]: any };
 
 export type DataMask = {
-  __cache?: FilterState;
   extraFormData?: ExtraFormData;
   filterState?: FilterState;
   ownState?: JsonObject;

superset-frontend/src/dashboard/components/Dashboard.jsx

@@ -25,9 +25,8 @@ import Loading from 'src/components/Loading';
 import getBootstrapData from 'src/utils/getBootstrapData';
 import getChartIdsFromLayout from '../util/getChartIdsFromLayout';
 import getLayoutComponentFromChartId from '../util/getLayoutComponentFromChartId';
-import DashboardBuilder from './DashboardBuilder/DashboardBuilder';
+
 import {
-  chartPropShape,
   slicePropShape,
   dashboardInfoPropShape,
   dashboardStatePropShape,
@@ -53,7 +52,6 @@ const propTypes = {
   }).isRequired,
   dashboardInfo: dashboardInfoPropShape.isRequired,
   dashboardState: dashboardStatePropShape.isRequired,
-  charts: PropTypes.objectOf(chartPropShape).isRequired,
   slices: PropTypes.objectOf(slicePropShape).isRequired,
   activeFilters: PropTypes.object.isRequired,
   chartConfiguration: PropTypes.object,
@@ -213,11 +211,6 @@ class Dashboard extends React.PureComponent {
     }
   }
 
-  // return charts in array
-  getAllCharts() {
-    return Object.values(this.props.charts);
-  }
-
   applyFilters() {
     const { appliedFilters } = this;
     const { activeFilters, ownDataCharts } = this.props;
@@ -288,11 +281,7 @@ class Dashboard extends React.PureComponent {
     if (this.context.loading) {
       return <Loading />;
     }
-    return (
-      <>
-        <DashboardBuilder />
-      </>
-    );
+    return this.props.children;
   }
 }
 

superset-frontend/src/dashboard/components/Dashboard.test.jsx

@@ -21,7 +21,6 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon';
 
 import Dashboard from 'src/dashboard/components/Dashboard';
-import DashboardBuilder from 'src/dashboard/components/DashboardBuilder/DashboardBuilder';
 import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
 import newComponentFactory from 'src/dashboard/util/newComponentFactory';
 
@@ -63,8 +62,14 @@ describe('Dashboard', () => {
     loadStats: {},
   };
 
+  const ChildrenComponent = () => <div>Test</div>;
+
   function setup(overrideProps) {
-    const wrapper = shallow(<Dashboard {...props} {...overrideProps} />);
+    const wrapper = shallow(
+      <Dashboard {...props} {...overrideProps}>
+        <ChildrenComponent />
+      </Dashboard>,
+    );
     return wrapper;
   }
 
@@ -76,9 +81,9 @@ describe('Dashboard', () => {
     '3_country_name': { values: ['USA'], scope: [] },
   };
 
-  it('should render a DashboardBuilder', () => {
+  it('should render the children component', () => {
     const wrapper = setup();
-    expect(wrapper.find(DashboardBuilder)).toExist();
+    expect(wrapper.find(ChildrenComponent)).toExist();
   });
 
   describe('UNSAFE_componentWillReceiveProps', () => {

superset-frontend/src/dashboard/components/SyncDashboardState/SyncDashboardState.test.tsx

@@ -0,0 +1,34 @@
+/**
+ * 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 React from 'react';
+import { render } from 'spec/helpers/testing-library';
+import { getItem, LocalStorageKeys } from 'src/utils/localStorageHelpers';
+import SyncDashboardState from '.';
+
+test('stores the dashboard info with local storages', () => {
+  const testDashboardPageId = 'dashboardPageId';
+  render(<SyncDashboardState dashboardPageId={testDashboardPageId} />, {
+    useRedux: true,
+  });
+  expect(getItem(LocalStorageKeys.dashboard__explore_context, {})).toEqual({
+    [testDashboardPageId]: expect.objectContaining({
+      dashboardPageId: testDashboardPageId,
+    }),
+  });
+});

superset-frontend/src/dashboard/components/SyncDashboardState/index.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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 React, { useEffect } from 'react';
+import pick from 'lodash/pick';
+import { shallowEqual, useSelector } from 'react-redux';
+import { DashboardContextForExplore } from 'src/types/DashboardContextForExplore';
+import {
+  getItem,
+  LocalStorageKeys,
+  setItem,
+} from 'src/utils/localStorageHelpers';
+import { RootState } from 'src/dashboard/types';
+import { getActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
+
+type Props = { dashboardPageId: string };
+
+const EMPTY_OBJECT = {};
+
+export const getDashboardContextLocalStorage = () => {
+  const dashboardsContexts = getItem(
+    LocalStorageKeys.dashboard__explore_context,
+    {},
+  );
+  // A new dashboard tab id is generated on each dashboard page opening.
+  // We mark ids as redundant when user leaves the dashboard, because they won't be reused.
+  // Then we remove redundant dashboard contexts from local storage in order not to clutter it
+  return Object.fromEntries(
+    Object.entries(dashboardsContexts).filter(
+      ([, value]) => !value.isRedundant,
+    ),
+  );
+};
+
+const updateDashboardTabLocalStorage = (
+  dashboardPageId: string,
+  dashboardContext: DashboardContextForExplore,
+) => {
+  const dashboardsContexts = getDashboardContextLocalStorage();
+  setItem(LocalStorageKeys.dashboard__explore_context, {
+    ...dashboardsContexts,
+    [dashboardPageId]: dashboardContext,
+  });
+};
+
+const SyncDashboardState: React.FC<Props> = ({ dashboardPageId }) => {
+  const dashboardContextForExplore = useSelector<
+    RootState,
+    DashboardContextForExplore
+  >(
+    ({ dashboardInfo, dashboardState, nativeFilters, dataMask }) => ({
+      labelColors: dashboardInfo.metadata?.label_colors || EMPTY_OBJECT,
+      sharedLabelColors:
+        dashboardInfo.metadata?.shared_label_colors || EMPTY_OBJECT,
+      colorScheme: dashboardState?.colorScheme,
+      chartConfiguration:
+        dashboardInfo.metadata?.chart_configuration || EMPTY_OBJECT,
+      nativeFilters: Object.entries(nativeFilters.filters).reduce(
+        (acc, [key, filterValue]) => ({
+          ...acc,
+          [key]: pick(filterValue, ['chartsInScope']),
+        }),
+        {},
+      ),
+      dataMask,
+      dashboardId: dashboardInfo.id,
+      filterBoxFilters: getActiveFilters(),
+      dashboardPageId,
+    }),
+    shallowEqual,
+  );
+
+  useEffect(() => {
+    updateDashboardTabLocalStorage(dashboardPageId, dashboardContextForExplore);
+    return () => {
+      // mark tab id as redundant when dashboard unmounts - case when user opens
+      // Explore in the same tab
+      updateDashboardTabLocalStorage(dashboardPageId, {
+        ...dashboardContextForExplore,
+        isRedundant: true,
+      });
+    };
+  }, [dashboardContextForExplore, dashboardPageId]);
+
+  return null;
+};
+
+export default SyncDashboardState;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx

@@ -52,6 +52,7 @@ import {
   onFiltersRefreshSuccess,
   setDirectPathToChild,
 } from 'src/dashboard/actions/dashboardState';
+import { RESPONSIVE_WIDTH } from 'src/filters/components/common';
 import { FAST_DEBOUNCE } from 'src/constants';
 import { dispatchHoverAction, dispatchFocusAction } from './utils';
 import { FilterControlProps } from './types';
@@ -322,7 +323,7 @@ const FilterValue: React.FC<FilterControlProps> = ({
       ) : (
         <SuperChart
           height={HEIGHT}
-          width="100%"
+          width={RESPONSIVE_WIDTH}
           showOverflow={showOverflow}
           formData={formData}
           displaySettings={displaySettings}

superset-frontend/src/dashboard/containers/Dashboard.ts

@@ -39,7 +39,6 @@ function mapStateToProps(state: RootState) {
   const {
     datasources,
     sliceEntities,
-    charts,
     dataMask,
     dashboardInfo,
     dashboardState,
@@ -54,7 +53,6 @@ function mapStateToProps(state: RootState) {
     userId: dashboardInfo.userId,
     dashboardInfo,
     dashboardState,
-    charts,
     datasources,
     // filters prop: a map structure for all the active filter_box's values and scope in this dashboard,
     // for each filter field. map key is [chartId_column]