Skip to content

fix(nativeFilters): Speed up native filters by removing unnecessary rerenders #25282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kgabryje merged 12 commits into from
Sep 28, 2023
Merged

fix(nativeFilters): Speed up native filters by removing unnecessary rerenders #25282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
08305d7
feat(nativeFilters): optimize filters rendering by adding __cache to …
Always-prog Sep 13, 2023
e6fb569
lint fix
Always-prog Sep 13, 2023
64b712c
removed surplus JSON.stringify for dataMask
Always-prog Sep 13, 2023
6a361ae
using ref for dataMask instead of hooking by JSON.stringify
Always-prog Sep 14, 2023
32c7048
OOPS
Always-prog Sep 14, 2023
742fb47
dataMask ref instead of JSON.stringify in Vertical filters
Always-prog Sep 14, 2023
2bc1250
lint fix
Always-prog Sep 14, 2023
d4217bf
removed using ref in vertical filter bar, only in parent - filterBar
Always-prog Sep 14, 2023
1e708ce
update dataMaskSelectedRef sync logic
Always-prog Sep 19, 2023
5d85a0d
return back dataMaskSelected without JSON.strignifying
Always-prog Sep 23, 2023
7e52a69
lint fix
Always-prog Sep 24, 2023
84ba073
fix(native-filters): added shallowEqual for useFilterDependencies sel…
Always-prog Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export enum AppSection {
export type FilterState = { value?: any; [key: string]: any };

export type DataMask = {
__cache?: FilterState;
extraFormData?: ExtraFormData;
filterState?: FilterState;
ownState?: JsonObject;
Expand Down
3 changes: 2 additions & 1 deletion superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { shallowEqual, useSelector } from 'react-redux';
import {
DataMaskStateWithId,
ensureIsArray,
Expand All @@ -32,6 +32,7 @@ export function useFilterDependencies(
): ExtraFormData {
const dependencyIds = useSelector<any, string[] | undefined>(
state => state.nativeFilters.filters[id]?.cascadeParentIds,
shallowEqual,
);
return useMemo(() => {
let dependencies = {};
Expand Down
16 changes: 12 additions & 4 deletions superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,13 @@
*/

/* eslint-disable no-param-reassign */
import React, { useEffect, useState, useCallback, createContext } from 'react';
import React, {
useEffect,
useState,
useCallback,
createContext,
useRef,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
DataMaskStateWithId,
Expand Down Expand Up @@ -144,6 +150,8 @@ const FilterBar: React.FC<FiltersBarProps> = ({

const [filtersInScope] = useSelectFiltersInScope(nativeFilterValues);

const dataMaskSelectedRef = useRef(dataMaskSelected);
dataMaskSelectedRef.current = dataMaskSelected;
const handleFilterSelectionChange = useCallback(
(
filter: Pick<Filter, 'id'> & Partial<Filter>,
Expand All @@ -154,19 +162,19 @@ const FilterBar: React.FC<FiltersBarProps> = ({
if (
// filterState.value === undefined - means that value not initialized
dataMask.filterState?.value !== undefined &&
dataMaskSelected[filter.id]?.filterState?.value === undefined &&
dataMaskSelectedRef.current[filter.id]?.filterState?.value ===
undefined &&
filter.requiredFirst
) {
dispatch(updateDataMask(filter.id, dataMask));
}

draft[filter.id] = {
...(getInitialDataMask(filter.id) as DataMaskWithId),
...dataMask,
};
});
},
[dataMaskSelected, dispatch, setDataMaskSelected],
[dispatch, setDataMaskSelected],
);

useEffect(() => {
Expand Down
1 change: 1 addition & 0 deletions superset-frontend/src/dataMask/reducer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export function getInitialDataMask(
}
return {
...otherProps,
__cache: {},
extraFormData: {},
filterState: {},
ownState: {},
Expand Down