perf(dashboard): reduce number of rerenders of Charts (apache#16444)

* perf(dashboard): reduce number of rerenders of Charts * Remove static property * Cleanup
opus-42 · Nov 14, 2021 · c5924c7 · c5924c7
1 parent cf3eee9
commit c5924c7
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/superset-frontend/src/dashboard/actions/hydrate.js b/superset-frontend/src/dashboard/actions/hydrate.js
@@ -371,8 +371,8 @@ export const hydrateDashboard = (dashboardData, chartData) => (
         // only persistent refreshFrequency will be saved to backend
         shouldPersistRefreshFrequency: false,
         css: dashboardData.css || '',
-        colorNamespace: metadata?.color_namespace || null,
-        colorScheme: metadata?.color_scheme || null,
+        colorNamespace: metadata?.color_namespace,
+        colorScheme: metadata?.color_scheme,
         editMode: canEdit && editMode,
         isPublished: dashboardData.published,
         hasUnsavedChanges: false,

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
@@ -87,7 +87,8 @@ const defaultProps = {
 // resizing across all slices on a dashboard on every update
 const RESIZE_TIMEOUT = 350;
 const SHOULD_UPDATE_ON_PROP_CHANGES = Object.keys(propTypes).filter(
-  prop => prop !== 'width' && prop !== 'height',
+  prop =>
+    prop !== 'width' && prop !== 'height' && prop !== 'isComponentVisible',
 );
 const OVERFLOWABLE_VIZ_TYPES = new Set(['filter_box']);
 const DEFAULT_HEADER_HEIGHT = 22;

diff --git a/superset-frontend/src/dashboard/containers/Chart.jsx b/superset-frontend/src/dashboard/containers/Chart.jsx
@@ -37,7 +37,7 @@ import getFormDataWithExtraFilters from '../util/charts/getFormDataWithExtraFilt
 import Chart from '../components/gridComponents/Chart';
 import { PLACEHOLDER_DATASOURCE } from '../constants';
 
-const EMPTY_FILTERS = {};
+const EMPTY_OBJECT = {};
 
 function mapStateToProps(
   {
@@ -54,7 +54,7 @@ function mapStateToProps(
   ownProps,
 ) {
   const { id } = ownProps;
-  const chart = chartQueries[id] || {};
+  const chart = chartQueries[id] || EMPTY_OBJECT;
   const datasource =
     (chart && chart.form_data && datasources[chart.form_data.datasource]) ||
     PLACEHOLDER_DATASOURCE;
@@ -82,7 +82,7 @@ function mapStateToProps(
     datasource,
     slice: sliceEntities.slices[id],
     timeout: dashboardInfo.common.conf.SUPERSET_WEBSERVER_TIMEOUT,
-    filters: getActiveFilters() || EMPTY_FILTERS,
+    filters: getActiveFilters() || EMPTY_OBJECT,
     formData,
     editMode: dashboardState.editMode,
     isExpanded: !!dashboardState.expandedSlices[id],

diff --git a/superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts b/superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts
@@ -25,6 +25,7 @@ import {
 import { ChartQueryPayload, Charts, LayoutItem } from 'src/dashboard/types';
 import { getExtraFormData } from 'src/dashboard/components/nativeFilters/utils';
 import { DataMaskStateWithId } from 'src/dataMask/types';
+import { areObjectsEqual } from 'src/reduxUtils';
 import getEffectiveExtraFilters from './getEffectiveExtraFilters';
 import { ChartConfiguration, NativeFiltersState } from '../../reducers/types';
 import { getAllActiveFilters } from '../activeAllDashboardFilters';
@@ -67,16 +68,18 @@ export default function getFormDataWithExtraFilters({
   const labelColors = scale.getColorMap();
 
   // if dashboard metadata + filters have not changed, use cache if possible
+  const cachedFormData = cachedFormdataByChart[sliceId];
   if (
-    (cachedFiltersByChart[sliceId] || {}) === filters &&
-    (colorScheme == null ||
-      cachedFormdataByChart[sliceId].color_scheme === colorScheme) &&
-    cachedFormdataByChart[sliceId].color_namespace === colorNamespace &&
-    isEqual(cachedFormdataByChart[sliceId].label_colors, labelColors) &&
-    !!cachedFormdataByChart[sliceId] &&
-    dataMask === undefined
+    cachedFiltersByChart[sliceId] === filters &&
+    cachedFormData?.color_scheme === colorScheme &&
+    cachedFormData?.color_namespace === colorNamespace &&
+    isEqual(cachedFormData?.label_colors, labelColors) &&
+    !!cachedFormData &&
+    areObjectsEqual(cachedFormData?.dataMask, dataMask, {
+      ignoreUndefined: true,
+    })
   ) {
-    return cachedFormdataByChart[sliceId];
+    return cachedFormData;
   }
 
   let extraData: { extra_form_data?: JsonObject } = {};