mirror of
https://github.com/apache/superset.git
synced 2026-05-09 18:05:52 +00:00
perf: Fix dashboard performance issues (#36119)
This commit is contained in:
committed by
GitHub
parent
519990e2fb
commit
6723a58780
@@ -110,6 +110,7 @@ const SliceContainer = styled.div`
|
||||
`;
|
||||
|
||||
const EMPTY_OBJECT = {};
|
||||
const EMPTY_ARRAY = [];
|
||||
|
||||
const Chart = props => {
|
||||
const dispatch = useDispatch();
|
||||
@@ -284,7 +285,8 @@ const Chart = props => {
|
||||
state => state.dashboardInfo.metadata?.chart_configuration,
|
||||
);
|
||||
const chartCustomizationItems = useSelector(
|
||||
state => state.dashboardInfo.metadata?.chart_customization_config || [],
|
||||
state =>
|
||||
state.dashboardInfo.metadata?.chart_customization_config || EMPTY_ARRAY,
|
||||
);
|
||||
const colorScheme = useSelector(state => state.dashboardState.colorScheme);
|
||||
const colorNamespace = useSelector(
|
||||
@@ -296,8 +298,8 @@ const Chart = props => {
|
||||
const allSliceIds = useSelector(state => state.dashboardState.sliceIds);
|
||||
const nativeFilters = useSelector(state => state.nativeFilters?.filters);
|
||||
const dataMask = useSelector(state => state.dataMask);
|
||||
const chartStates = useSelector(
|
||||
state => state.dashboardState.chartStates || EMPTY_OBJECT,
|
||||
const chartState = useSelector(
|
||||
state => state.dashboardState.chartStates?.[props.id],
|
||||
);
|
||||
const labelsColor = useSelector(
|
||||
state => state.dashboardInfo?.metadata?.label_colors || EMPTY_OBJECT,
|
||||
@@ -314,7 +316,7 @@ const Chart = props => {
|
||||
const formData = useMemo(
|
||||
() =>
|
||||
getFormDataWithExtraFilters({
|
||||
chart,
|
||||
chart: { id: chart.id, form_data: chart.form_data }, // avoid passing the whole chart object
|
||||
chartConfiguration,
|
||||
chartCustomizationItems,
|
||||
filters: getAppliedFilterValues(props.id),
|
||||
@@ -331,7 +333,8 @@ const Chart = props => {
|
||||
ownColorScheme,
|
||||
}),
|
||||
[
|
||||
chart,
|
||||
chart.id,
|
||||
chart.form_data,
|
||||
chartConfiguration,
|
||||
chartCustomizationItems,
|
||||
props.id,
|
||||
@@ -350,6 +353,25 @@ const Chart = props => {
|
||||
|
||||
formData.dashboardId = dashboardInfo.id;
|
||||
|
||||
const ownState = useMemo(() => {
|
||||
const baseOwnState = dataMask[props.id]?.ownState || EMPTY_OBJECT;
|
||||
|
||||
if (hasChartStateConverter(slice.viz_type) && chartState?.state) {
|
||||
return {
|
||||
...baseOwnState,
|
||||
...convertChartStateToOwnState(slice.viz_type, chartState.state),
|
||||
chartState: chartState.state,
|
||||
};
|
||||
}
|
||||
|
||||
return baseOwnState;
|
||||
}, [
|
||||
dataMask[props.id]?.ownState,
|
||||
props.id,
|
||||
slice.viz_type,
|
||||
chartState?.state,
|
||||
]);
|
||||
|
||||
const onExploreChart = useCallback(
|
||||
async clickEvent => {
|
||||
const isOpenInNewTab =
|
||||
@@ -406,13 +428,10 @@ const Chart = props => {
|
||||
let ownState = dataMask[props.id]?.ownState || {};
|
||||
|
||||
// Convert chart-specific state to backend format using registered converter
|
||||
if (
|
||||
hasChartStateConverter(slice.viz_type) &&
|
||||
chartStates[props.id]?.state
|
||||
) {
|
||||
if (hasChartStateConverter(slice.viz_type) && chartState?.state) {
|
||||
const convertedState = convertChartStateToOwnState(
|
||||
slice.viz_type,
|
||||
chartStates[props.id].state,
|
||||
chartState.state,
|
||||
);
|
||||
ownState = {
|
||||
...ownState,
|
||||
@@ -435,7 +454,7 @@ const Chart = props => {
|
||||
formData,
|
||||
maxRows,
|
||||
dataMask[props.id]?.ownState,
|
||||
chartStates,
|
||||
chartState,
|
||||
props.id,
|
||||
boundActionCreators.logEvent,
|
||||
],
|
||||
@@ -577,19 +596,7 @@ const Chart = props => {
|
||||
formData={formData}
|
||||
labelsColor={labelsColor}
|
||||
labelsColorMap={labelsColorMap}
|
||||
ownState={{
|
||||
...dataMask[props.id]?.ownState,
|
||||
...(hasChartStateConverter(slice.viz_type) &&
|
||||
chartStates[props.id]?.state
|
||||
? {
|
||||
...convertChartStateToOwnState(
|
||||
slice.viz_type,
|
||||
chartStates[props.id].state,
|
||||
),
|
||||
chartState: chartStates[props.id].state,
|
||||
}
|
||||
: {}),
|
||||
}}
|
||||
ownState={ownState}
|
||||
filterState={dataMask[props.id]?.filterState}
|
||||
queriesResponse={chart.queriesResponse}
|
||||
timeout={timeout}
|
||||
|
||||
Reference in New Issue
Block a user