Skip to content

Commit

Permalink
fix(native filters): rendering performance improvement by reduce over…
Browse files Browse the repository at this point in the history
…rendering (apache#25901)
  • Loading branch information
justinpark authored Nov 20, 2023
1 parent 92ac6b2 commit e1d73d5
Show file tree
Hide file tree
Showing 12 changed files with 191 additions and 144 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
15 changes: 2 additions & 13 deletions superset-frontend/src/dashboard/components/Dashboard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -288,11 +281,7 @@ class Dashboard extends React.PureComponent {
if (this.context.loading) {
return <Loading />;
}
return (
<>
<DashboardBuilder />
</>
);
return this.props.children;
}
}

Expand Down
13 changes: 9 additions & 4 deletions superset-frontend/src/dashboard/components/Dashboard.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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;
}

Expand All @@ -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', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
}),
});
});
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -322,7 +323,7 @@ const FilterValue: React.FC<FilterControlProps> = ({
) : (
<SuperChart
height={HEIGHT}
width="100%"
width={RESPONSIVE_WIDTH}
showOverflow={showOverflow}
formData={formData}
displaySettings={displaySettings}
Expand Down
2 changes: 0 additions & 2 deletions superset-frontend/src/dashboard/containers/Dashboard.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ function mapStateToProps(state: RootState) {
const {
datasources,
sliceEntities,
charts,
dataMask,
dashboardInfo,
dashboardState,
Expand All @@ -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]
Expand Down
Loading

0 comments on commit e1d73d5

Please sign in to comment.