Adding accessible tooltips and tooltip based alerts (#20912)

This commit is contained in:
Aasim Khan
2022-10-21 14:28:27 -07:00
committed by GitHub
parent daf81cc9e7
commit 84305c32c0
9 changed files with 50 additions and 21 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.46",
"azdataGraph": "github:Microsoft/azdataGraph#0.0.49",
"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.46",
"azdataGraph": "github:Microsoft/azdataGraph#0.0.49",
"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.46",
"azdataGraph": "github:Microsoft/azdataGraph#0.0.49",
"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.46":
version "0.0.46"
resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/1b9745bbf343b958e44e739c7bcde0d6bdf16c48"
"azdataGraph@github:Microsoft/azdataGraph#0.0.49":
version "0.0.49"
resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/f5fd03f79d29ebd8fce35d3289a2b4dbde2d6dc5"
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.46":
version "0.0.46"
resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/1b9745bbf343b958e44e739c7bcde0d6bdf16c48"
"azdataGraph@github:Microsoft/azdataGraph#0.0.49":
version "0.0.49"
resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/f5fd03f79d29ebd8fce35d3289a2b4dbde2d6dc5"
base64-js@^1.3.1:
version "1.5.1"

View File

@@ -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 {

View File

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

View File

@@ -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.*']
}
]
}];

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