fix(explore): only refresh data panel on relevant changes (#16699)

* fix(explore): only refresh data panel on relevant changes

* add comment and supress warning
This commit is contained in:
Ville Brofeldt 2021-09-14 15:58:05 +03:00 committed by GitHub
parent 5ac8ac0e6c
commit c99cacbdd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 2 deletions

View File

@ -221,7 +221,7 @@ export const DataTablesPane = ({
...prevState,
[RESULT_TYPES.samples]: true,
}));
}, [queryFormData.adhoc_filters, queryFormData.datasource]);
}, [queryFormData?.adhoc_filters, queryFormData?.datasource]);
useEffect(() => {
if (queriesResponse && chartStatus === 'success') {

View File

@ -152,6 +152,7 @@ const ExploreChartPanel = props => {
},
[slice],
);
useEffect(() => {
updateQueryContext();
}, [updateQueryContext]);
@ -257,6 +258,22 @@ const ExploreChartPanel = props => {
[chartPanelRef, renderChart],
);
const [queryFormData, setQueryFormData] = useState(
props.chart.latestQueryFormData,
);
useEffect(() => {
// only update when `latestQueryFormData` changes AND `triggerRender`
// is false. No update should be done when only `triggerRender` changes,
// as this can trigger a query downstream based on incomplete form data.
// (`latestQueryFormData` is only updated when a a valid request has been
// triggered).
if (!props.triggerRender) {
setQueryFormData(props.chart.latestQueryFormData);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.chart.latestQueryFormData]);
if (props.standalone) {
// dom manipulation hack to get rid of the boostrap theme's body background
const standaloneClass = 'background-transparent';
@ -309,7 +326,7 @@ const ExploreChartPanel = props => {
{panelBody}
<DataTablesPane
ownState={props.ownState}
queryFormData={props.chart.latestQueryFormData}
queryFormData={queryFormData}
tableSectionHeight={tableSectionHeight}
onCollapseChange={onCollapseChange}
chartStatus={props.chart.chartStatus}