Adding accessible tooltips and tooltip based alerts (#20912)

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.graph.tooltipHandler.setEnabled(false);
-		} else {
-			this._diagram.graph.tooltipHandler.setEnabled(true);
-		}
-
-		return this._diagram.graph.tooltipHandler.enabled;
+		this._diagram.showTooltip(!this._diagram.graph.showTooltip);
+		return this._diagram.graph.showTooltip;
 	}
 
 	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.*']
 		}
 	]
 }];