ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fixing keyboard navigation in execution plan graph and using selection change events to get selected cells (#19294)

Browse Source
This commit is contained in:
Aasim Khan
2022-05-06 12:31:00 -07:00
committed by GitHub
parent cab9ab3b91
commit 20800a4279
1 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/sql/workbench/contrib/executionPlan/browser/azdataGraphView.ts
View File

@@ -24,6 +24,7 @@ export class AzdataGraphView {
private _diagram: any; private _diagram: any;
private _diagramModel: AzDataGraphCell; private _diagramModel: AzDataGraphCell;
private _uniqueElementId: number = -1; private _uniqueElementId: number = -1;
private _cellInFocus: AzDataGraphCell;
private _graphElementPropertiesSet: Set<string> = new Set(); private _graphElementPropertiesSet: Set<string> = new Set();
@@ -35,9 +36,12 @@ export class AzdataGraphView {
private _executionPlan: azdata.executionPlan.ExecutionPlanGraph, private _executionPlan: azdata.executionPlan.ExecutionPlanGraph,
@ITextResourcePropertiesService private readonly textResourcePropertiesService: ITextResourcePropertiesService, @ITextResourcePropertiesService private readonly textResourcePropertiesService: ITextResourcePropertiesService,
) { ) {
this._parentContainer.tabIndex = 0;
this._diagramModel = this.populate(this._executionPlan.root); this._diagramModel = this.populate(this._executionPlan.root);
this._diagram = new azdataGraph.azdataQueryPlan(this._parentContainer, this._diagramModel, executionPlanNodeIconPaths, badgeIconPaths); this._diagram = new azdataGraph.azdataQueryPlan(this._parentContainer, this._diagramModel, executionPlanNodeIconPaths, badgeIconPaths);
this.setGraphProperties(); this.setGraphProperties();
this.selectElement(this._executionPlan.root);
this._cellInFocus = this._diagram.graph.getSelectionCell();
this.initializeGraphEvents(); this.initializeGraphEvents();
} }
@@ -62,19 +66,26 @@ export class AzdataGraphView {
private initializeGraphEvents(): void { private initializeGraphEvents(): void {
this.onElementSelected = this._onElementSelectedEmitter.event; this.onElementSelected = this._onElementSelectedEmitter.event;
this._diagram.graph.addListener('click', (sender, evt) => { this._diagram.graph.getSelectionModel().addListener('change', (sender, evt) => {
// Updating properties view table on node clicks if (evt.properties?.removed) {
const cell = evt.properties['cell']; if (this._cellInFocus.id === evt.properties.removed[0].id) {
let selectedGraphElement: InternalExecutionPlanElement; return;
if (cell) { }
selectedGraphElement = this.getElementById(cell.id); const newSelection = evt.properties.removed[0];
this.selectElement(cell.id); this._onElementSelectedEmitter.fire(this.getElementById(newSelection.id));
} else if (!this.getSelectedElement()) { this.centerElement(this.getElementById(newSelection.id));
selectedGraphElement = this._executionPlan.root; this._cellInFocus = evt.properties.removed[0];
this.selectElement(undefined); } else {
if (evt.properties?.added) {
const getPreviousSelection = evt.properties.added[0];
this.selectElement(this.getElementById(getPreviousSelection.id));
}
} }
this._onElementSelectedEmitter.fire(selectedGraphElement ?? this.getSelectedElement()); });
evt.consume();
// Focusing the parent container when we click the graph
this._diagram.graph.addListener('click', (sender, evt) => {
this._parentContainer.focus();
}); });
} }
@@ -250,7 +261,6 @@ export class AzdataGraphView {
return; return;
} }
this._diagram.graph.setSelectionCell(cell);
const cellRect = this._diagram.graph.getCellBounds(cell); const cellRect = this._diagram.graph.getCellBounds(cell);
const cellMidPoint: Point = { const cellMidPoint: Point = {