ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-26 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fixes: (#21004)

Browse Source 
1. Navigation info announcement when user enter graph
2. Allowing users to expand/collapse button
3. Tooltips shown only when enter is pressed
This commit is contained in:
Aasim Khan
2022-10-26 22:16:36 -07:00
committed by GitHub
parent fae8ffbe25
commit 1743c7ea13
9 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,6 +16,7 @@ import { foreground } from 'vs/platform/theme/common/colorRegistry';
import { generateUuid } from 'vs/base/common/uuid';
import { Disposable } from 'vs/base/common/lifecycle';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { status } from 'vs/base/browser/ui/aria/aria';
const azdataGraph = azdataGraphModule();
/**
@@ -37,6 +38,7 @@ export class AzdataGraphView extends Disposable {
constructor(
private _parentContainer: HTMLElement,
private _executionPlan: azdata.executionPlan.ExecutionPlanGraph,
executionPlanDiagramName: string,
@ITextResourcePropertiesService private readonly textResourcePropertiesService: ITextResourcePropertiesService,
@IConfigurationService readonly configurationService: IConfigurationService
) {
@@ -53,6 +55,7 @@ export class AzdataGraphView extends Disposable {
showTooltipOnClick: configurationService.getValue<boolean>('executionPlan.tooltips.enableOnHoverTooltips') ? false : true,
};
this._diagram = new azdataGraph.azdataQueryPlan(queryPlanConfiguration);
(<any>this._parentContainer.firstChild).ariaLabel = localize('executionPlanComparison.bottomPlanDiagram.ariaLabel', '{0}, use arrow keys to navigate between nodes', executionPlanDiagramName);
this.setGraphProperties();
this._cellInFocus = this._diagram.graph.getSelectionCell();
@@ -105,6 +108,10 @@ export class AzdataGraphView extends Disposable {
}
}
});
this._diagram.graph.addListener('tooltipShown', (sender, evt) => {
status(evt.properties.tooltip.textContent);
});
}
/**

7
src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonEditorView.ts
View File

@@ -393,7 +393,8 @@ export class ExecutionPlanComparisonEditorView extends Disposable {
this._topPlanDiagramContainers.push(graphContainer);
this._topPlanContainer.appendChild(graphContainer);
const diagram = this._register(this._instantiationService.createInstance(AzdataGraphView, graphContainer, e));
const diagramName = localize('executionPlanComparison.topPlanDiagram.name', 'Top execution Plan {0}', i + 1);
const diagram = this._register(this._instantiationService.createInstance(AzdataGraphView, graphContainer, e, diagramName));
this._register(diagram.onElementSelected(e => {
this._propertiesView.setPrimaryElement(e);
@@ -438,7 +439,9 @@ export class ExecutionPlanComparisonEditorView extends Disposable {
const graphContainer = DOM.$('.plan-diagram');
this._bottomPlanDiagramContainers.push(graphContainer);
this._bottomPlanContainer.appendChild(graphContainer);
const diagram = this._register(this._instantiationService.createInstance(AzdataGraphView, graphContainer, e));
const diagramName = localize('executionPlanComparison.bottomPlanDiagram.name', 'Bottom execution Plan {0}', i + 1);
const diagram = this._register(this._instantiationService.createInstance(AzdataGraphView, graphContainer, e, diagramName));
this._register(diagram.onElementSelected(e => {
this._propertiesView.setSecondaryElement(e);

4
src/sql/workbench/contrib/executionPlan/browser/executionPlanView.ts
View File

@@ -246,7 +246,9 @@ export class ExecutionPlanView extends Disposable implements IHorizontalSashLayo
}
private createPlanDiagram(container: HTMLElement) {
this.executionPlanDiagram = this._register(this._instantiationService.createInstance(AzdataGraphView, container, this._model));
const diagramName = localize('executionPlan.diagram.ariaLabel', 'Execution Plan {0}', this._graphIndex);
this.executionPlanDiagram = this._register(this._instantiationService.createInstance(AzdataGraphView, container, this._model, diagramName));
this._register(this.executionPlanDiagram.onElementSelected(e => {
container.focus();