perf: Fix dashboard performance issues (#36119)

This commit is contained in:
Kamil Gabryjelski
2025-11-17 19:28:53 +01:00
committed by GitHub
parent 519990e2fb
commit 6723a58780
10 changed files with 154 additions and 135 deletions

View File

@@ -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}