Adding search, zoom, custom zoom and additional stylings to showplan (#18255)

* Lot of changes -Updating azdata to 0.0.13 -Updating prop views on node clicks -Context menu on graphs -Updating edge color on theme -Scrolling graph control like ssms -Zooming in, out and custom zoom on graph -Custom zoom widget -Node search widget * Fixing hygine errors * Code cleanup * Fixing action name * Renaming actions * equals dropdown * fixing tooltip * Code cleanup Fixing sorting function Adding functionality for replacement strings * Removing internal facing props from azdata proposed * Fixing hygine issue * Fixing web package hygiene * Updating yarn lock files * Fixing initial click
2026-01-26 17:23:15 -05:00 · 2022-02-10 14:43:35 -08:00
parent 7bc954f942
commit 8ac09917ca
16 changed files with 656 additions and 77 deletions
--- a/src/sql/workbench/contrib/queryplan2/browser/queryPlan.ts
+++ b/src/sql/workbench/contrib/queryplan2/browser/queryPlan.ts
@@ -16,15 +16,15 @@ import * as azdataGraphModule from 'azdataGraph';
 import { queryPlanNodeIconPaths } from 'sql/workbench/contrib/queryplan2/browser/constants';
 import { isString } from 'vs/base/common/types';
 import { PlanHeader } from 'sql/workbench/contrib/queryplan2/browser/planHeader';
-import { GraphElementPropertiesView } from 'sql/workbench/contrib/queryplan2/browser/graphElementPropertiesView';
+import { QueryPlanPropertiesView } from 'sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView';
 import { Action } from 'vs/base/common/actions';
 import { Codicon } from 'vs/base/common/codicons';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { openNewQuery } from 'sql/workbench/contrib/query/browser/queryActions';
 import { RunQueryOnConnectionMode } from 'sql/platform/connection/common/connectionManagement';
 import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { editorBackground, foreground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
+import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { editorBackground, editorWidgetBackground, foreground, textLinkForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
 import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
 import { ISashEvent, ISashLayoutProvider, Orientation, Sash } from 'vs/base/browser/ui/sash/sash';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
@@ -32,11 +32,29 @@ import { IUntitledTextEditorService } from 'vs/workbench/services/untitled/commo
 import { formatDocumentWithSelectedProvider, FormattingMode } from 'vs/editor/contrib/format/format';
 import { Progress } from 'vs/platform/progress/common/progress';
 import { CancellationToken } from 'vs/base/common/cancellation';
+import { EDITOR_FONT_DEFAULTS } from 'vs/editor/common/config/editorOptions';
+import { QueryPlanWidgetController } from 'sql/workbench/contrib/queryplan2/browser/queryPlanWidgetController';
+import { CustomZoomWidget } from 'sql/workbench/contrib/queryplan2/browser/widgets/customZoomWidget';
+import { NodeSearchWidget } from 'sql/workbench/contrib/queryplan2/browser/widgets/nodeSearchWidget';

 let azdataGraph = azdataGraphModule();

+export interface InternalExecutionPlanNode extends azdata.ExecutionPlanNode {
+	/**
+	 * Unique internal id given to graph node by ADS.
+	 */
+	id?: string;
+}
+
+export interface InternalExecutionPlanEdge extends azdata.ExecutionPlanEdge {
+	/**
+	 * Unique internal id given to graph edge by ADS.
+	 */
+	id?: string;
+}
+
 export class QueryPlan2Tab implements IPanelTab {
-	public readonly title = localize('queryPlanTitle', "Query Plan");
+	public readonly title = localize('queryPlanTitle', "Query Plan (Preview)");
 	public readonly identifier = 'QueryPlan2Tab';
 	public readonly view: QueryPlan2View;

@@ -92,7 +110,7 @@ export class QueryPlan2View implements IPanelView {
 		if (newGraphs) {
 			newGraphs.forEach(g => {
 				const qp2 = this.instantiationService.createInstance(QueryPlan2, this._container, this._qps.length + 1);
-				qp2.graph = g;
+				qp2.graphModel = g;
 				this._qps.push(qp2);
 				this._graphs.push(g);
 				this.updateRelativeCosts();
@@ -107,14 +125,14 @@ export class QueryPlan2View implements IPanelView {

 		if (sum > 0) {
 			this._qps.forEach(qp => {
-				qp.planHeader.relativeCost = ((qp.graph.root.subTreeCost + qp.graph.root.cost) / sum) * 100;
+				qp.planHeader.relativeCost = ((qp.graphModel.root.subTreeCost + qp.graphModel.root.cost) / sum) * 100;
 			});
 		}
 	}
 }

 export class QueryPlan2 implements ISashLayoutProvider {
-	private _graph?: azdata.ExecutionPlanGraph;
+	private _graphModel?: azdata.ExecutionPlanGraph;

 	private _container: HTMLElement;

@@ -125,25 +143,33 @@ export class QueryPlan2 implements ISashLayoutProvider {
 	private _planContainer: HTMLElement;
 	private _planHeaderContainer: HTMLElement;

-	public propertiesView: GraphElementPropertiesView;
+	public propertiesView: QueryPlanPropertiesView;
 	private _propContainer: HTMLElement;

-	private _azdataGraphDiagram: any;
+	private _planActionContainer: HTMLElement;
+	public planActionView: QueryPlanWidgetController;
+
+	public azdataGraphDiagram: any;
+
+	public graphElementPropertiesSet: Set<string> = new Set();
+
+	private uniqueElementId: number = -1;

 	constructor(
-		parent: HTMLElement,
+		private _parent: HTMLElement,
 		private _graphIndex: number,
 		@IInstantiationService public readonly _instantiationService: IInstantiationService,
 		@IThemeService private readonly _themeService: IThemeService,
 		@IContextViewService public readonly contextViewService: IContextViewService,
 		@IUntitledTextEditorService private readonly _untitledEditorService: IUntitledTextEditorService,
-		@IEditorService private readonly editorService: IEditorService
+		@IEditorService private readonly editorService: IEditorService,
+		@IContextMenuService private _contextMenuService: IContextMenuService,
 	) {
 		// parent container for query plan.
 		this._container = DOM.$('.query-plan');
-		parent.appendChild(this._container);
+		this._parent.appendChild(this._container);
 		const sashContainer = DOM.$('.query-plan-sash');
-		parent.appendChild(sashContainer);
+		this._parent.appendChild(sashContainer);

 		const sash = new Sash(sashContainer, this, { orientation: Orientation.HORIZONTAL });
 		let originalHeight = this._container.offsetHeight;
@@ -178,6 +204,12 @@ export class QueryPlan2 implements ISashLayoutProvider {

 		// container that holds plan header info
 		this._planHeaderContainer = DOM.$('.header');
+
+		// Styling header text like the query editor
+		this._planHeaderContainer.style.fontFamily = EDITOR_FONT_DEFAULTS.fontFamily;
+		this._planHeaderContainer.style.fontSize = EDITOR_FONT_DEFAULTS.fontSize.toString();
+		this._planHeaderContainer.style.fontWeight = EDITOR_FONT_DEFAULTS.fontWeight;
+
 		this._planContainer.appendChild(this._planHeaderContainer);
 		this.planHeader = this._instantiationService.createInstance(PlanHeader, this._planHeaderContainer, {
 			planIndex: this._graphIndex,
@@ -186,7 +218,11 @@ export class QueryPlan2 implements ISashLayoutProvider {
 		// container properties
 		this._propContainer = DOM.$('.properties');
 		this._container.appendChild(this._propContainer);
-		this.propertiesView = new GraphElementPropertiesView(this._propContainer, this._themeService);
+		this.propertiesView = new QueryPlanPropertiesView(this._propContainer, this._themeService);
+
+		this._planActionContainer = DOM.$('.plan-action-container');
+		this._planContainer.appendChild(this._planActionContainer);
+		this.planActionView = new QueryPlanWidgetController(this._planActionContainer);

 		// container that holds actionbar icons
 		this._actionBarContainer = DOM.$('.action-bar-container');
@@ -197,7 +233,7 @@ export class QueryPlan2 implements ISashLayoutProvider {


 		const actions = [
-			new SaveXml(),
+			new SavePlanFile(),
 			new OpenGraphFile(),
 			new OpenQueryAction(),
 			new SearchNodeAction(),
@@ -209,7 +245,22 @@ export class QueryPlan2 implements ISashLayoutProvider {
 		];
 		this._actionBar.pushAction(actions, { icon: true, label: false });

-
+		// Setting up context menu
+		const self = this;
+		this._container.oncontextmenu = (e: MouseEvent) => {
+			if (actions) {
+				this._contextMenuService.showContextMenu({
+					getAnchor: () => {
+						return {
+							x: e.x,
+							y: e.y
+						};
+					},
+					getActions: () => actions,
+					getActionsContext: () => (self)
+				});
+			}
+		};
 	}

 	getHorizontalSashTop(sash: Sash): number {
@@ -222,8 +273,11 @@ export class QueryPlan2 implements ISashLayoutProvider {
 		return this._container.clientWidth;
 	}

-	private populate(node: azdata.ExecutionPlanNode, diagramNode: any): any {
+	private populate(node: InternalExecutionPlanNode, diagramNode: any): any {
 		diagramNode.label = node.name;
+		const nodeId = this.createGraphElementId();
+		diagramNode.id = nodeId;
+		node.id = nodeId;

 		if (node.properties && node.properties.length > 0) {
 			diagramNode.metrics = this.populateProperties(node.properties);
@@ -233,6 +287,13 @@ export class QueryPlan2 implements ISashLayoutProvider {
 			diagramNode.icon = node.type;
 		}

+		if (node.edges) {
+			diagramNode.edges = [];
+			for (let i = 0; i < node.edges.length; i++) {
+				diagramNode.edges.push(this.populateEdges(node.edges[i], new Object()));
+			}
+		}
+
 		if (node.children) {
 			diagramNode.children = [];
 			for (let i = 0; i < node.children.length; ++i) {
@@ -240,55 +301,80 @@ export class QueryPlan2 implements ISashLayoutProvider {
 			}
 		}

-		if (node.edges) {
-			diagramNode.edges = [];
-			for (let i = 0; i < node.edges.length; i++) {
-				diagramNode.edges.push(this.populateEdges(node.edges[i], new Object()));
-			}
+		if (node.description) {
+			diagramNode.description = node.description;
 		}
 		return diagramNode;
 	}

-	private populateEdges(edge: azdata.ExecutionPlanEdge, diagramEdge: any) {
+	private populateEdges(edge: InternalExecutionPlanEdge, diagramEdge: any) {
 		diagramEdge.label = '';
+		const edgeId = this.createGraphElementId();
+		diagramEdge.id = edgeId;
+		edge.id = edgeId;
 		diagramEdge.metrics = this.populateProperties(edge.properties);
 		diagramEdge.weight = Math.max(0.5, Math.min(0.5 + 0.75 * Math.log10(edge.rowCount), 6));
 		return diagramEdge;
 	}

 	private populateProperties(props: azdata.ExecutionPlanGraphElementProperty[]) {
-		return props.filter(e => isString(e.value))
+		return props.filter(e => isString(e.displayValue) && e.showInTooltip)
+			.sort((a, b) => a.displayOrder - b.displayOrder)
 			.map(e => {
+				this.graphElementPropertiesSet.add(e.name);
 				return {
 					name: e.name,
-					value: e.value.toString().substring(0, 75)
+					value: e.displayValue,
+					isLongString: e.positionAtBottom
 				};
 			});
 	}

-	private createPlanDiagram(container: HTMLElement): void {
+	private createGraphElementId(): string {
+		this.uniqueElementId += 1;
+		return `element-${this.uniqueElementId}`;
+	}
+
+	private createPlanDiagram(container: HTMLElement) {
 		let diagramRoot: any = new Object();
-		let graphRoot: azdata.ExecutionPlanNode = this._graph.root;
+		let graphRoot: azdata.ExecutionPlanNode = this._graphModel.root;
+
 		this.populate(graphRoot, diagramRoot);
-		this._azdataGraphDiagram = new azdataGraph.azdataQueryPlan(container, diagramRoot, queryPlanNodeIconPaths);
+		this.azdataGraphDiagram = new azdataGraph.azdataQueryPlan(container, diagramRoot, queryPlanNodeIconPaths);
+
+		this.azdataGraphDiagram.graph.addListener('click', (sender, evt) => {
+			// Updating properties view table on node clicks
+			const cell = evt.properties['cell'];
+			if (cell) {
+				this.propertiesView.graphElement = this.searchNodes(cell.id);
+			} else if (!this.azdataGraphDiagram.graph.getSelectionCell()) {
+				const root = this.azdataGraphDiagram.graph.model.getCell(diagramRoot.id);
+				this.azdataGraphDiagram.graph.getSelectionModel().setCell(root);
+				this.propertiesView.graphElement = this.searchNodes(diagramRoot.id);
+				evt.consume();
+			} else {
+				evt.consume();
+			}
+		});

 		registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
 			const iconBackground = theme.getColor(editorBackground);
 			if (iconBackground) {
-				this._azdataGraphDiagram.setIconBackgroundColor(iconBackground);
+				this.azdataGraphDiagram.setIconBackgroundColor(iconBackground);
 			}

 			const iconLabelColor = theme.getColor(foreground);
 			if (iconLabelColor) {
-				this._azdataGraphDiagram.setTextFontColor(iconLabelColor);
+				this.azdataGraphDiagram.setTextFontColor(iconLabelColor);
+				this.azdataGraphDiagram.setEdgeColor(iconLabelColor);
 			}
 		});
 	}


-	public set graph(graph: azdata.ExecutionPlanGraph | undefined) {
-		this._graph = graph;
-		if (this._graph) {
+	public set graphModel(graph: azdata.ExecutionPlanGraph | undefined) {
+		this._graphModel = graph;
+		if (this._graphModel) {
 			this.planHeader.graphIndex = this._graphIndex;
 			this.planHeader.query = graph.query;
 			if (graph.recommendations) {
@@ -296,27 +382,59 @@ export class QueryPlan2 implements ISashLayoutProvider {
 			}
 			let diagramContainer = DOM.$('.diagram');
 			this.createPlanDiagram(diagramContainer);
+
+			/**
+			 * We do not want to scroll the diagram through mouse wheel.
+			 * Instead, we pass this event to parent control. So, when user
+			 * uses the scroll wheel, they scroll through graphs present in
+			 * the graph control. To scroll the individual graphs, users should
+			 * use the scroll bars.
+			 */
+			diagramContainer.addEventListener('wheel', e => {
+				e.preventDefault();
+				e.stopPropagation();
+				this._parent.scrollTop += e.deltaY;
+			});
+
 			this._planContainer.appendChild(diagramContainer);

-			this.propertiesView.graphElement = this._graph.root;
+			this.propertiesView.graphElement = this._graphModel.root;
 		}
 	}

-	public get graph(): azdata.ExecutionPlanGraph | undefined {
-		return this._graph;
+	public get graphModel(): azdata.ExecutionPlanGraph | undefined {
+		return this._graphModel;
 	}

 	public openQuery() {
-		return this._instantiationService.invokeFunction(openNewQuery, undefined, this.graph.query, RunQueryOnConnectionMode.none).then();
+		return this._instantiationService.invokeFunction(openNewQuery, undefined, this.graphModel.query, RunQueryOnConnectionMode.none).then();
 	}

 	public async openGraphFile() {
-		const input = this._untitledEditorService.create({ mode: this.graph.graphFile.graphFileType, initialValue: this.graph.graphFile.graphFileContent });
+		const input = this._untitledEditorService.create({ mode: this.graphModel.graphFile.graphFileType, initialValue: this.graphModel.graphFile.graphFileContent });
 		await input.resolve();
 		await this._instantiationService.invokeFunction(formatDocumentWithSelectedProvider, input.textEditorModel, FormattingMode.Explicit, Progress.None, CancellationToken.None);
 		input.setDirty(false);
 		this.editorService.openEditor(input);
 	}
+
+
+	public searchNodes(searchId: string): InternalExecutionPlanNode | InternalExecutionPlanEdge | undefined {
+		let stack: InternalExecutionPlanNode[] = [];
+		stack.push(this._graphModel.root);
+		while (stack.length !== 0) {
+			const currentNode = stack.pop();
+			if (currentNode.id === searchId) {
+				return currentNode;
+			}
+			stack.push(...currentNode.children);
+			const resultEdge = currentNode.edges.find(e => (<InternalExecutionPlanEdge>e).id === searchId);
+			if (resultEdge) {
+				return resultEdge;
+			}
+		}
+		return undefined;
+	}
 }

 class OpenQueryAction extends Action {
@@ -354,6 +472,7 @@ class ZoomInAction extends Action {
 	}

 	public override async run(context: QueryPlan2): Promise<void> {
+		context.azdataGraphDiagram.graph.zoomIn();
 	}
 }

@@ -366,6 +485,7 @@ class ZoomOutAction extends Action {
 	}

 	public override async run(context: QueryPlan2): Promise<void> {
+		context.azdataGraphDiagram.graph.zoomOut();
 	}
 }

@@ -378,22 +498,24 @@ class ZoomToFitAction extends Action {
 	}

 	public override async run(context: QueryPlan2): Promise<void> {
+		context.azdataGraphDiagram.graph.fit();
+		context.azdataGraphDiagram.graph.view.rendering = true;
+		context.azdataGraphDiagram.graph.refresh();
 	}
 }

-class SaveXml extends Action {
+class SavePlanFile extends Action {
 	public static ID = 'qp.saveXML';
-	public static LABEL = localize('queryPlanSavePlanXML', "Save XML");
+	public static LABEL = localize('queryPlanSavePlanXML', "Save Plan File");

 	constructor() {
-		super(SaveXml.ID, SaveXml.LABEL, Codicon.save.classNames);
+		super(SavePlanFile.ID, SavePlanFile.LABEL, Codicon.save.classNames);
 	}

 	public override async run(context: QueryPlan2): Promise<void> {
 	}
 }

-
 class CustomZoomAction extends Action {
 	public static ID = 'qp.customZoom';
 	public static LABEL = localize('queryPlanCustomZoom', "Custom Zoom");
@@ -403,6 +525,7 @@ class CustomZoomAction extends Action {
 	}

 	public override async run(context: QueryPlan2): Promise<void> {
+		context.planActionView.toggleWidget(context._instantiationService.createInstance(CustomZoomWidget, context));
 	}
 }

@@ -415,6 +538,7 @@ class SearchNodeAction extends Action {
 	}

 	public override async run(context: QueryPlan2): Promise<void> {
+		context.planActionView.toggleWidget(context._instantiationService.createInstance(NodeSearchWidget, context));
 	}
 }

@@ -448,6 +572,27 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
 		}
 		`);
 	}
+	const shadow = theme.getColor(widgetShadow);
+	const widgetBackgroundColor = theme.getColor(editorWidgetBackground);
+
+	if (shadow) {
+		collector.addRule(`
+		.qps-container .query-plan .plan .plan-action-container .child {
+			box-shadow: 0 0 8px 2px ${shadow};
+			background-color: ${widgetBackgroundColor};
+		}
+		`);
+	}
+
+	const textColor = theme.getColor(foreground);
+	if (widgetBackgroundColor && foreground) {
+		collector.addRule(`
+		.mxTooltip  {
+			color: ${textColor};
+			background-color: ${widgetBackgroundColor};
+		}
+		`);
+	}
 });