Skip to content
30 changes: 28 additions & 2 deletions src/dashboard/Data/Browser/Browser.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,9 @@ class Browser extends DashboardView {
this.fetchAggregationPanelData = this.fetchAggregationPanelData.bind(this);
this.setAggregationPanelData = this.setAggregationPanelData.bind(this);

// Reference to cancel the ongoing info panel cloud function request
this.currentInfoPanelQuery = null;

this.dataBrowserRef = React.createRef();

window.addEventListener('popstate', () => {
Expand Down Expand Up @@ -299,6 +302,10 @@ class Browser extends DashboardView {
if (this.currentQuery) {
this.currentQuery.cancel();
}
if (this.currentInfoPanelQuery) {
this.currentInfoPanelQuery.cancel();
this.currentInfoPanelQuery = null;
}
this.removeLocation();
window.removeEventListener('mouseup', this.onMouseUpRowCheckBox);
}
Expand Down Expand Up @@ -346,9 +353,15 @@ class Browser extends DashboardView {
}

fetchAggregationPanelData(objectId, className, appId) {
if (this.currentInfoPanelQuery) {
this.currentInfoPanelQuery.cancel();
this.currentInfoPanelQuery = null;
}

this.setState({
isLoadingInfoPanel: true,
});

const params = {
object: Parse.Object.extend(className).createWithoutData(objectId).toPointer(),
};
Expand All @@ -358,8 +371,14 @@ class Browser extends DashboardView {
const appName = this.props.params.appId;
const cloudCodeFunction =
this.state.classwiseCloudFunctions[`${appId}${appName}`]?.[className][0].cloudCodeFunction;
Parse.Cloud.run(cloudCodeFunction, params, options).then(

const promise = Parse.Cloud.run(cloudCodeFunction, params, options);
this.currentInfoPanelQuery = promise;
promise.then(
result => {
if (this.currentInfoPanelQuery !== promise) {
return;
}
if (result && result.panel && result.panel && result.panel.segments) {
this.setState({ AggregationPanelData: result, isLoadingInfoPanel: false });
} else {
Expand All @@ -371,13 +390,20 @@ class Browser extends DashboardView {
}
},
error => {
if (this.currentInfoPanelQuery !== promise) {
return;
}
this.setState({
isLoadingInfoPanel: false,
errorAggregatedData: error.message,
});
this.showNote(this.state.errorAggregatedData, true);
}
);
).finally(() => {
if (this.currentInfoPanelQuery === promise) {
this.currentInfoPanelQuery = null;
}
});
}

setAggregationPanelData(data) {
Expand Down
Loading