Adding accessible tooltips and tooltip based alerts (#20912)

package.json

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

remote/package.json

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

remote/web/package.json

@@ -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.46",
+		"azdataGraph": "github:Microsoft/azdataGraph#0.0.49",
 		"chart.js": "^2.9.4",
 		"gridstack": "^3.1.3",
 		"kburtram-query-plan": "2.6.1",

remote/web/yarn.lock

@@ -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.46":
+"azdataGraph@github:Microsoft/azdataGraph#0.0.49":
-  version "0.0.46"
+  version "0.0.49"
-  resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/1b9745bbf343b958e44e739c7bcde0d6bdf16c48"
+  resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/f5fd03f79d29ebd8fce35d3289a2b4dbde2d6dc5"
 
 chalk@^2.3.0, chalk@^2.4.1:
   version "2.4.2"

remote/yarn.lock

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

src/sql/workbench/contrib/executionPlan/browser/azdataGraphView.ts

@@ -15,6 +15,7 @@ import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/
 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';
 const azdataGraph = azdataGraphModule();
 
 /**
@@ -37,6 +38,7 @@ export class AzdataGraphView extends Disposable {
 		private _parentContainer: HTMLElement,
 		private _executionPlan: azdata.executionPlan.ExecutionPlanGraph,
 		@ITextResourcePropertiesService private readonly textResourcePropertiesService: ITextResourcePropertiesService,
+		@IConfigurationService readonly configurationService: IConfigurationService
 	) {
 		super();
 
@@ -47,13 +49,24 @@ export class AzdataGraphView extends Disposable {
 			queryPlanGraph: this._diagramModel,
 			iconPaths: executionPlanNodeIconPaths,
 			badgeIconPaths: badgeIconPaths,
-			expandCollapsePaths: collapseExpandNodeIconPaths
+			expandCollapsePaths: collapseExpandNodeIconPaths,
+			showTooltipOnClick: configurationService.getValue<boolean>('executionPlan.tooltips.enableOnHoverTooltips') ? false : true,
 		};
 		this._diagram = new azdataGraph.azdataQueryPlan(queryPlanConfiguration);
 
 		this.setGraphProperties();
 		this._cellInFocus = this._diagram.graph.getSelectionCell();
 		this.initializeGraphEvents();
+
+		configurationService.onDidChangeConfiguration(e => {
+			if (e.affectedKeys.includes('executionPlan.tooltips.enableOnHoverTooltips')) {
+				const enableHoverOnTooltip = configurationService.getValue<boolean>('executionPlan.tooltips.enableOnHoverTooltips');
+				if (this._diagram) {
+					this._diagram.setShowTooltipOnClick(!enableHoverOnTooltip);
+					this._diagram.showTooltip(this._diagram.graph.showTooltip);
+				}
+			}
+		});
 	}
 
 	private setGraphProperties(): void {
@@ -84,7 +97,6 @@ export class AzdataGraphView extends Disposable {
 				}
 
 				this._onElementSelectedEmitter.fire(this.getElementById(newSelection.id));
-				this.centerElement(this.getElementById(newSelection.id));
 				this._cellInFocus = evt.properties.removed[0];
 			} else {
 				if (evt.properties?.added) {
@@ -462,13 +474,8 @@ export class AzdataGraphView extends Disposable {
 	 * @returns state of the tooltip after toggling
 	 */
 	public toggleTooltip(): boolean {
-		if (this._diagram.graph.tooltipHandler.enabled) {
+		this._diagram.showTooltip(!this._diagram.graph.showTooltip);
-			this._diagram.graph.tooltipHandler.setEnabled(false);
+		return this._diagram.graph.showTooltip;
-		} else {
-			this._diagram.graph.tooltipHandler.setEnabled(true);
-		}
-
-		return this._diagram.graph.tooltipHandler.enabled;
 	}
 
 	public drawSubtreePolygon(subtreeRoot: string, fillColor: string, borderColor: string): void {

src/sql/workbench/contrib/executionPlan/browser/executionPlanContribution.ts

@@ -23,6 +23,7 @@ import { localize } from 'vs/nls';
 import { CommandsRegistry } from 'vs/platform/commands/common/commands';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { CATEGORIES } from 'sql/workbench/contrib/query/browser/queryActions';
+import { IConfigurationRegistry, Extensions as ConfigExtensions, IConfigurationNode } from 'vs/platform/configuration/common/configurationRegistry';
 
 // Execution Plan editor registration
 
@@ -118,3 +119,19 @@ CommandsRegistry.registerCommand(COMPARE_EXECUTION_PLAN_COMMAND_ID, (accessors:
 		pinned: true
 	});
 });
+
+const executionPlanContribution: IConfigurationNode = {
+	id: 'executionPlan',
+	type: 'object',
+	title: localize('executionPlanConfigurationTitle', "Execution Plan"),
+	properties: {
+		'executionPlan.tooltips.enableOnHoverTooltips': {
+			'type': 'boolean',
+			'description': localize('executionPlan.tooltips.enableOnHoverTooltips', "When true, enables tooltips on hover for execution plan. When false, tooltips are shown on node click or F3 key press."),
+			'default': false
+		},
+	}
+};
+
+const configurationRegistry = <IConfigurationRegistry>Registry.as(ConfigExtensions.Configuration);
+configurationRegistry.registerConfiguration(executionPlanContribution);

src/sql/workbench/contrib/preferences/browser/sqlSettingsLayout.ts

@@ -46,6 +46,11 @@ let sqlTocItems: ITOCEntry<string>[] = [{
 			id: 'data/tableDesigner',
 			label: localize('tableDesigner', "Table Designer"),
 			settings: ['tableDesigner.*']
+		},
+		{
+			id: 'data/executionPlan',
+			label: localize('executionPlan', "Execution Plan"),
+			settings: ['executionPlan.*']
 		}
 	]
 }];

yarn.lock

@@ -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.46":
+"azdataGraph@github:Microsoft/azdataGraph#0.0.49":
-  version "0.0.46"
+  version "0.0.49"
-  resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/1b9745bbf343b958e44e739c7bcde0d6bdf16c48"
+  resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/f5fd03f79d29ebd8fce35d3289a2b4dbde2d6dc5"
 
 bach@^1.0.0:
   version "1.2.0"