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

View File

@@ -78,7 +78,7 @@
"angular2-grid": "2.0.6",
"ansi_up": "^5.1.0",
"applicationinsights": "1.4.2",
"azdataGraph": "github:Microsoft/azdataGraph#0.0.49",
"azdataGraph": "github:Microsoft/azdataGraph#0.0.54",
"chart.js": "^2.9.4",
"chokidar": "3.5.1",
"graceful-fs": "4.2.8",

View File

@@ -19,7 +19,7 @@
"applicationinsights": "1.4.2",
"angular2-grid": "2.0.6",
"ansi_up": "^5.1.0",
"azdataGraph": "github:Microsoft/azdataGraph#0.0.49",
"azdataGraph": "github:Microsoft/azdataGraph#0.0.54",
"chart.js": "^2.9.4",
"cookie": "^0.4.0",
"graceful-fs": "4.2.8",

View File

@@ -16,7 +16,7 @@
"@vscode/vscode-languagedetection": "1.0.21",
"angular2-grid": "2.0.6",
"ansi_up": "^5.1.0",
"azdataGraph": "github:Microsoft/azdataGraph#0.0.49",
"azdataGraph": "github:Microsoft/azdataGraph#0.0.54",
"chart.js": "^2.9.4",
"gridstack": "^3.1.3",
"kburtram-query-plan": "2.6.1",

View File

@@ -155,9 +155,9 @@ array-uniq@^1.0.2:
resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
"azdataGraph@github:Microsoft/azdataGraph#0.0.49":
version "0.0.49"
resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/f5fd03f79d29ebd8fce35d3289a2b4dbde2d6dc5"
"azdataGraph@github:Microsoft/azdataGraph#0.0.54":
version "0.0.52"
resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/4cce41781e138614007c4239b23fc6954af59703"
chalk@^2.3.0, chalk@^2.4.1:
version "2.4.2"

View File

@@ -220,9 +220,9 @@ async-listener@^0.6.0:
semver "^5.3.0"
shimmer "^1.1.0"
"azdataGraph@github:Microsoft/azdataGraph#0.0.49":
version "0.0.49"
resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/f5fd03f79d29ebd8fce35d3289a2b4dbde2d6dc5"
"azdataGraph@github:Microsoft/azdataGraph#0.0.54":
version "0.0.52"
resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/4cce41781e138614007c4239b23fc6954af59703"
base64-js@^1.3.1:
version "1.5.1"

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);
});
}
/**

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);

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();

View File

@@ -2045,9 +2045,9 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
"azdataGraph@github:Microsoft/azdataGraph#0.0.49":
version "0.0.49"
resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/f5fd03f79d29ebd8fce35d3289a2b4dbde2d6dc5"
"azdataGraph@github:Microsoft/azdataGraph#0.0.54":
version "0.0.52"
resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/4cce41781e138614007c4239b23fc6954af59703"
bach@^1.0.0:
version "1.2.0"