Skip to content
Snippets Groups Projects
Unverified Commit 2555eeba authored by Uladzimir Havenchyk's avatar Uladzimir Havenchyk Committed by GitHub
Browse files

Avoid unnecessary re-renderings in column settings sidebar (#42595)

parent 1d1bcdff
No related branches found
No related tags found
No related merge requests found
import type { LocationDescriptor } from "history";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useMemo, useState, memo } from "react";
import { connect } from "react-redux";
import _ from "underscore";
......@@ -205,4 +205,4 @@ export default _.compose(
loadingAndErrorWrapper: false,
}),
connect(mapStateToProps, mapDispatchToProps),
)(MainNavbarContainer);
)(memo(MainNavbarContainer));
......@@ -61,8 +61,28 @@ class View extends Component {
} = this.props;
if (isShowingChartSettingsSidebar) {
const {
question,
result,
addField,
initialChartSetting,
onReplaceAllVisualizationSettings,
onOpenChartType,
visualizationSettings,
showSidebarTitle,
} = this.props;
return (
<ChartSettingsSidebar {...this.props} onClose={onCloseChartSettings} />
<ChartSettingsSidebar
question={question}
result={result}
addField={addField}
initialChartSetting={initialChartSetting}
onReplaceAllVisualizationSettings={onReplaceAllVisualizationSettings}
onOpenChartType={onOpenChartType}
visualizationSettings={visualizationSettings}
showSidebarTitle={showSidebarTitle}
onClose={onCloseChartSettings}
/>
);
}
......
/* eslint-disable react/prop-types */
import { Component } from "react";
import { useMemo, useCallback, useState, memo } from "react";
import { t } from "ttag";
import ErrorBoundary from "metabase/ErrorBoundary";
......@@ -8,59 +8,71 @@ import SidebarContent from "metabase/query_builder/components/SidebarContent";
import visualizations from "metabase/visualizations";
import ChartSettings from "metabase/visualizations/components/ChartSettings";
export default class ChartSettingsSidebar extends Component {
state = { sidebarPropsOverride: null };
function ChartSettingsSidebar(props) {
const [sidebarPropsOverride, setSidebarPropsOverride] = useState(null);
const handleSidebarPropsOverride = useCallback(
sidebarPropsOverride => {
setSidebarPropsOverride(sidebarPropsOverride);
},
[setSidebarPropsOverride],
);
setSidebarPropsOverride = sidebarPropsOverride =>
this.setState({ sidebarPropsOverride });
const {
question,
result,
addField,
initialChartSetting,
onReplaceAllVisualizationSettings,
onClose,
onOpenChartType,
visualizationSettings,
showSidebarTitle = false,
} = props;
const sidebarContentProps = showSidebarTitle
? {
title: t`${visualizations.get(question.display()).uiName} options`,
onBack: () => onOpenChartType(),
}
: {};
render() {
const {
question,
result,
addField,
initialChartSetting,
onReplaceAllVisualizationSettings,
onClose,
onOpenChartType,
visualizationSettings,
showSidebarTitle = false,
} = this.props;
const { sidebarPropsOverride } = this.state;
const sidebarContentProps = showSidebarTitle
? {
title: t`${visualizations.get(question.display()).uiName} options`,
onBack: () => onOpenChartType(),
}
: {};
return (
result && (
<SidebarContent
className={CS.fullHeight}
onDone={() => onClose()}
{...sidebarContentProps}
{...sidebarPropsOverride}
>
<ErrorBoundary>
<ChartSettings
question={question}
addField={addField}
series={[
{
card: question.card(),
data: result.data,
},
]}
onChange={onReplaceAllVisualizationSettings}
onClose={() => onClose()}
noPreview
initial={initialChartSetting}
setSidebarPropsOverride={this.setSidebarPropsOverride}
computedSettings={visualizationSettings}
/>
</ErrorBoundary>
</SidebarContent>
)
);
}
const handleClose = useCallback(() => {
onClose();
}, [onClose]);
const card = question.card();
const series = useMemo(() => {
return [
{
card,
data: result.data,
},
];
}, [card, result.data]);
return (
result && (
<SidebarContent
className={CS.fullHeight}
onDone={handleClose}
{...sidebarContentProps}
{...sidebarPropsOverride}
>
<ErrorBoundary>
<ChartSettings
question={question}
addField={addField}
series={series}
onChange={onReplaceAllVisualizationSettings}
onClose={handleClose}
noPreview
initial={initialChartSetting}
setSidebarPropsOverride={handleSidebarPropsOverride}
computedSettings={visualizationSettings}
/>
</ErrorBoundary>
</SidebarContent>
)
);
}
export default memo(ChartSettingsSidebar);
......@@ -209,8 +209,7 @@ class ChartSettings extends Component {
).some(widget => !widget.hidden);
}
getStyleWidget = () => {
const widgets = this._getWidgets();
getStyleWidget = widgets => {
const series = this._getTransformedSeries();
const settings = this._getComputedSettings();
const { currentWidget } = this.state;
......@@ -258,8 +257,7 @@ class ChartSettings extends Component {
return null;
};
getFormattingWidget = () => {
const widgets = this._getWidgets();
getFormattingWidget = widgets => {
const { currentWidget } = this.state;
const widget =
currentWidget && widgets.find(widget => widget.id === currentWidget.id);
......@@ -418,9 +416,10 @@ class ChartSettings extends Component {
)}
<ChartSettingsWidgetPopover
anchor={popoverRef}
widgets={[this.getFormattingWidget(), this.getStyleWidget()].filter(
widget => !!widget,
)}
widgets={[
this.getFormattingWidget(widgets),
this.getStyleWidget(widgets),
].filter(widget => !!widget)}
handleEndShowWidget={this.handleEndShowWidget}
/>
</ChartSettingsRoot>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment