Skip to content

Cancel in-flight queries when panel scrolls out of view #1417

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
setoh2000 wants to merge 1 commit into
base: main
Choose a base branch
from
+33 −0
Open

Cancel in-flight queries when panel scrolls out of view #1417

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions packages/scenes/src/querying/SceneQueryRunner.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
private _isInView = true;
private _bypassIsInView = false;
private _queryNotExecutedWhenOutOfView = false;
private _isQueryInFlight = false;

public getResultsStream() {
return this._results;
Expand Down Expand Up @@ -274,6 +275,7 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
* Check if value changed is an adhoc filter or group by variable that did not exist when we issued the last query
*/
private onAnyVariableChanged(variable: SceneVariable) {
// If this variable was already detected as a dependency, onVariableUpdatesCompleted will handle value changes
if (
this._drilldownDependenciesManager.adHocFiltersVar === variable ||
this._drilldownDependenciesManager.groupByVar === variable ||
Expand Down Expand Up @@ -339,6 +341,7 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
this._querySub.unsubscribe();
this._querySub = undefined;
}
this._isQueryInFlight = false;

if (this._dataLayersSub) {
this._dataLayersSub.unsubscribe();
Expand Down Expand Up @@ -414,6 +417,7 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen

public cancelQuery() {
this._querySub?.unsubscribe();
this._isQueryInFlight = false;

if (this._dataLayersSub) {
this._dataLayersSub.unsubscribe();
Expand All @@ -437,6 +441,7 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
}

this._queryNotExecutedWhenOutOfView = false;
this._isQueryInFlight = true;

// If data layers subscription doesn't exist, create one
if (!this._dataLayersSub) {
Expand Down Expand Up @@ -467,6 +472,13 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
const datasource = this.state.datasource ?? findFirstDatasource(queries);
const ds = await getDataSource(datasource, this._scopedVars);

// Re-check viewport after async getDataSource: the panel may have scrolled out of view during the await.
if (this.isQueryModeAuto() && !this._isInView && !this._bypassIsInView) {
this._isQueryInFlight = false;
this._queryNotExecutedWhenOutOfView = true;
return;
}

this._drilldownDependenciesManager.findAndSubscribeToDrilldowns(ds.uid, this);

const runRequest = getRunRequest();
Expand Down Expand Up @@ -502,6 +514,14 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
);

this._querySub = stream.subscribe(this.onDataReceived);

// Re-check viewport after subscribe: the panel may have scrolled out of view while we were setting up the stream.
if (this.isQueryModeAuto() && !this._isInView && !this._bypassIsInView) {
this._querySub.unsubscribe();
this._querySub = undefined;
this._isQueryInFlight = false;
this._queryNotExecutedWhenOutOfView = true;
}
} catch (err) {
console.error('PanelQueryRunner Error', err);

Expand Down Expand Up @@ -656,6 +676,10 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
hasFetchedData = true;
}

if (preProcessedData.state !== LoadingState.Loading) {
this._isQueryInFlight = false;
}

this.setState({ data: dataWithLayersApplied, _hasFetchedData: hasFetchedData });
this._results.next({ origin: this, data: dataWithLayersApplied });
};
Expand Down Expand Up @@ -718,6 +742,15 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
if (isInView && this._queryNotExecutedWhenOutOfView) {
this.runQueries();
}

// Cancel running query when panel leaves the viewport
if (!isInView && this._isQueryInFlight) {
writeSceneLog('SceneQueryRunner', 'Cancelling query for out-of-view panel', this.state.key);
this._querySub?.unsubscribe();
this._querySub = undefined;
this._isQueryInFlight = false;
this._queryNotExecutedWhenOutOfView = true;
}
}

public bypassIsInViewChanged(bypassIsInView: boolean): void {
Expand Down