[explore] Prevent duplicated query by data table (#12404)

This commit is contained in:
Grace Guo 2021-01-11 11:37:54 -08:00 committed by GitHub
parent 4cf3f99ee8
commit 9618f0786c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 7 deletions

View File

@ -73,16 +73,21 @@ export const DataTablesPane = ({
queryFormData,
tableSectionHeight,
onCollapseChange,
chartStatus,
}: {
queryFormData: Record<string, any>;
tableSectionHeight: number;
onCollapseChange: (openPanelName: string) => void;
chartStatus: string;
}) => {
const [data, setData] = useState<{
[RESULT_TYPES.results]?: Record<string, any>[];
[RESULT_TYPES.samples]?: Record<string, any>[];
}>(NULLISH_RESULTS_STATE);
const [isLoading, setIsLoading] = useState(NULLISH_RESULTS_STATE);
const [isLoading, setIsLoading] = useState({
[RESULT_TYPES.results]: true,
[RESULT_TYPES.samples]: true,
});
const [error, setError] = useState(NULLISH_RESULTS_STATE);
const [filterText, setFilterText] = useState('');
const [activeTabKey, setActiveTabKey] = useState<string>(
@ -150,11 +155,18 @@ export const DataTablesPane = ({
useEffect(() => {
if (panelOpen && isRequestPending[RESULT_TYPES.results]) {
setIsRequestPending(prevState => ({
...prevState,
[RESULT_TYPES.results]: false,
}));
getData(RESULT_TYPES.results);
if (chartStatus === 'loading') {
setIsLoading(prevIsLoading => ({
...prevIsLoading,
[RESULT_TYPES.results]: true,
}));
} else {
setIsRequestPending(prevState => ({
...prevState,
[RESULT_TYPES.results]: false,
}));
getData(RESULT_TYPES.results);
}
}
if (
panelOpen &&
@ -167,7 +179,7 @@ export const DataTablesPane = ({
}));
getData(RESULT_TYPES.samples);
}
}, [panelOpen, isRequestPending, getData, activeTabKey]);
}, [panelOpen, isRequestPending, getData, activeTabKey, chartStatus]);
const filteredData = {
[RESULT_TYPES.results]: useFilteredTableData(

View File

@ -248,6 +248,7 @@ const ExploreChartPanel = props => {
queryFormData={props.chart.latestQueryFormData}
tableSectionHeight={tableSectionHeight}
onCollapseChange={onCollapseChange}
chartStatus={props.chart.chartStatus}
/>
</Split>
)}