QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-20 08:34:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf(dashboard): Improve perf of highlighting charts in scope of active filter (#15424)

Browse Source 
* perf(dashboard): Improve perf of highlighting charts in scope of active filter

* More optimizations

* fix tests

* Fix lint

* bug fix
This commit is contained in:
Kamil Gabryjelski
2021-06-29 12:55:53 +02:00
committed by GitHub
parent f33a0e1d68
commit f109da479d
12 changed files with 275 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
superset-frontend/spec/javascripts/dashboard/components/FiltersBadge_spec.tsx
View File

@@ -20,10 +20,15 @@ import React from 'react';
import { shallow } from 'enzyme';
import { supersetTheme } from '@superset-ui/core';
import { Provider } from 'react-redux';
import { Store } from 'redux';
import * as SupersetUI from '@superset-ui/core';
import { CHART_UPDATE_SUCCEEDED } from 'src/chart/chartAction';
import { styledMount as mount } from 'spec/helpers/theming';
import {
CHART_RENDERING_SUCCEEDED,
CHART_UPDATE_SUCCEEDED,
} from 'src/chart/chartAction';
import { buildActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
import FiltersBadge from 'src/dashboard/containers/FiltersBadge';
import { FiltersBadge } from 'src/dashboard/components/FiltersBadge';
import {
getMockStoreWithFilters,
getMockStoreWithNativeFilters,
@@ -34,6 +39,15 @@ import { dashboardWithFilter } from 'spec/fixtures/mockDashboardLayout';
import Icons from 'src/components/Icons';
import { FeatureFlag } from 'src/featureFlags';
const defaultStore = getMockStoreWithFilters();
function setup(store: Store = defaultStore) {
return mount(
<Provider store={store}>
<FiltersBadge chartId={sliceId} />
</Provider>,
);
}
describe('FiltersBadge', () => {
// there's this bizarre "active filters" thing
// that doesn't actually use any kind of state management.
@@ -71,9 +85,7 @@ describe('FiltersBadge', () => {
<FiltersBadge chartId={sliceId} />,
</Provider>,
);
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).not.toExist();
expect(wrapper.find('[data-test="applied-filter-count"]')).not.toExist();
});
it('shows the indicator when filters have been applied', () => {
@@ -91,14 +103,13 @@ describe('FiltersBadge', () => {
],
dashboardFilters,
});
const wrapper = shallow(
<FiltersBadge {...{ store }} chartId={sliceId} />,
).dive();
expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).toHaveText('1');
expect(wrapper.dive().find('WarningFilled')).not.toExist();
store.dispatch({ type: CHART_RENDERING_SUCCEEDED, key: sliceId });
const wrapper = setup(store);
expect(wrapper.find('DetailsPanelPopover')).toExist();
expect(wrapper.find('[data-test="applied-filter-count"]')).toHaveText(
'1',
);
expect(wrapper.find('WarningFilled')).not.toExist();
});
it("shows a warning when there's a rejected filter", () => {
@@ -118,19 +129,18 @@ describe('FiltersBadge', () => {
],
dashboardFilters,
});
const wrapper = shallow(
<FiltersBadge {...{ store }} chartId={sliceId} />,
).dive();
expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
store.dispatch({ type: CHART_RENDERING_SUCCEEDED, key: sliceId });
const wrapper = setup(store);
expect(wrapper.find('DetailsPanelPopover')).toExist();
expect(wrapper.find('[data-test="applied-filter-count"]')).toHaveText(
'0',
);
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).toHaveText('0');
expect(
wrapper.dive().find('[data-test="incompatible-filter-count"]'),
wrapper.find('[data-test="incompatible-filter-count"]'),
).toHaveText('1');
// to look at the shape of the wrapper use:
// console.log(wrapper.dive().debug())
expect(wrapper.dive().find(Icons.AlertSolid)).toExist();
// console.log(wrapper.debug())
expect(wrapper.find(Icons.AlertSolid)).toExist();
});
});
@@ -149,14 +159,9 @@ describe('FiltersBadge', () => {
},
],
});
const wrapper = shallow(
<Provider store={store}>
<FiltersBadge chartId={sliceId} />,
</Provider>,
);
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).not.toExist();
store.dispatch({ type: CHART_RENDERING_SUCCEEDED, key: sliceId });
const wrapper = setup(store);
expect(wrapper.find('[data-test="applied-filter-count"]')).not.toExist();
});
it('shows the indicator when filters have been applied', () => {
@@ -177,14 +182,13 @@ describe('FiltersBadge', () => {
},
],
});
const wrapper = shallow(
<FiltersBadge {...{ store }} chartId={sliceId} />,
).dive();
expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).toHaveText('1');
expect(wrapper.dive().find('WarningFilled')).not.toExist();
store.dispatch({ type: CHART_RENDERING_SUCCEEDED, key: sliceId });
const wrapper = setup(store);
expect(wrapper.find('DetailsPanelPopover')).toExist();
expect(wrapper.find('[data-test="applied-filter-count"]')).toHaveText(
'1',
);
expect(wrapper.find('WarningFilled')).not.toExist();
});
it("shows a warning when there's a rejected filter", () => {
@@ -207,17 +211,16 @@ describe('FiltersBadge', () => {
},
],
});
const wrapper = shallow(
<FiltersBadge {...{ store }} chartId={sliceId} />,
).dive();
expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
store.dispatch({ type: CHART_RENDERING_SUCCEEDED, key: sliceId });
const wrapper = setup(store);
expect(wrapper.find('DetailsPanelPopover')).toExist();
expect(wrapper.find('[data-test="applied-filter-count"]')).toHaveText(
'0',
);
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).toHaveText('0');
expect(
wrapper.dive().find('[data-test="incompatible-filter-count"]'),
wrapper.find('[data-test="incompatible-filter-count"]'),
).toHaveText('1');
expect(wrapper.dive().find(Icons.AlertSolid)).toExist();
expect(wrapper.find(Icons.AlertSolid)).toExist();
});
});
});

13
superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tabs_spec.jsx
View File

@@ -31,7 +31,7 @@ import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
import DeleteComponentButton from 'src/dashboard/components/DeleteComponentButton';
import HoverMenu from 'src/dashboard/components/menu/HoverMenu';
import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
import Tabs from 'src/dashboard/components/gridComponents/Tabs';
import { Tabs } from 'src/dashboard/components/gridComponents/Tabs';
import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
import emptyDashboardLayout from 'src/dashboard/fixtures/emptyDashboardLayout';
import { dashboardLayoutWithTabs } from 'spec/fixtures/mockDashboardLayout';
@@ -66,14 +66,15 @@ describe('Tabs', () => {
nativeFilters: nativeFilters.filters,
};
const mockStore = getMockStore({
...initialState,
dashboardLayout: dashboardLayoutWithTabs,
dashboardFilters: {},
});
function setup(overrideProps) {
// We have to wrap provide DragDropContext for the underlying DragDroppable
// otherwise we cannot assert on DragDroppable children
const mockStore = getMockStore({
...initialState,
dashboardLayout: dashboardLayoutWithTabs,
dashboardFilters: {},
});
const wrapper = mount(
<Provider store={mockStore}>
<DndProvider backend={HTML5Backend}>