Adding execution plan component to model view. (#23620)

extensions/dacpac/src/test/testContext.ts

@@ -317,7 +317,8 @@ export function createViewContext(): ViewTestContext {
 			separator: undefined!,
 			propertiesContainer: undefined!,
 			infoBox: undefined!,
-			slider: undefined!
+			slider: undefined!,
+			executionPlan: undefined!,
 		}
 	};
 	return {

extensions/datavirtualization/src/test/stubs.ts

@@ -480,6 +480,9 @@ export class MockComponentBuilder implements azdata.ComponentBuilder<any, any> {
 }
 
 export class MockModelBuilder implements azdata.ModelBuilder {
+	executionPlan(): azdata.ComponentBuilder<azdata.ExecutionPlanComponent, azdata.ExecutionPlanComponentProperties> {
+		throw new Error('Method not implemented.');
+	}
 	infoBox(): azdata.ComponentBuilder<azdata.InfoBoxComponent, azdata.InfoBoxComponentProperties> {
 		throw new Error('Method not implemented.');
 	}

extensions/machine-learning/src/test/views/utils.ts

@@ -264,7 +264,8 @@ export function createViewContext(): ViewTestContext {
 			separator: undefined!,
 			propertiesContainer: undefined!,
 			infoBox: undefined!,
-			slider: undefined!
+			slider: undefined!,
+			executionPlan: undefined!,
 		}
 	};
 	let tab: azdata.window.DialogTab = {

extensions/notebook/src/test/managePackages/managePackagesDialog.test.ts

@@ -303,7 +303,8 @@ describe('Manage Package Dialog', () => {
 				separator: undefined!,
 				propertiesContainer: undefined!,
 				infoBox: undefined!,
-				slider: undefined!
+				slider: undefined!,
+				executionPlan: undefined!,
 			}
 		};
 

extensions/schema-compare/src/test/testContext.ts

@@ -359,7 +359,8 @@ export function createViewContext(): ViewTestContext {
 			separator: undefined!,
 			propertiesContainer: undefined!,
 			infoBox: undefined!,
-			slider: undefined!
+			slider: undefined!,
+			executionPlan: undefined!,
 		}
 	};
 	return {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "azuredatastudio",
   "version": "1.45.0",
-  "distro": "8edcf26f189f3a51a08760d4ba37474efd402fa4",
+  "distro": "5b5e4db7e6626e7ef71996bed02cd46a060ca0c2",
   "author": {
     "name": "Microsoft Corporation"
   },
@@ -84,7 +84,7 @@
     "angular2-grid": "2.0.6",
     "ansi_up": "^5.1.0",
     "applicationinsights": "1.4.2",
-    "azdataGraph": "github:Microsoft/azdataGraph#0.0.58",
+    "azdataGraph": "github:Microsoft/azdataGraph#0.0.59",
     "chart.js": "^4.3.0",
     "chartjs-adapter-moment": "^1.0.1",
     "chokidar": "3.5.1",

remote/package.json

@@ -22,7 +22,7 @@
     "applicationinsights": "1.4.2",
     "angular2-grid": "2.0.6",
     "ansi_up": "^5.1.0",
-    "azdataGraph": "github:Microsoft/azdataGraph#0.0.58",
+    "azdataGraph": "github:Microsoft/azdataGraph#0.0.59",
     "chart.js": "^4.3.0",
     "chartjs-adapter-moment": "^1.0.1",
     "cookie": "^0.4.0",

remote/web/package.json

@@ -17,7 +17,7 @@
 		"@vscode/vscode-languagedetection": "1.0.21",
 		"angular2-grid": "2.0.6",
 		"ansi_up": "^5.1.0",
-		"azdataGraph": "github:Microsoft/azdataGraph#0.0.58",
+		"azdataGraph": "github:Microsoft/azdataGraph#0.0.59",
 		"chart.js": "^4.3.0",
     "chartjs-adapter-moment": "^1.0.1",
 		"gridstack": "^3.1.3",

remote/web/yarn.lock

@@ -115,9 +115,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.58":
-  version "0.0.58"
-  resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/45c88554e98ed3b41cd283a672bd497af08c7ac3"
+"azdataGraph@github:Microsoft/azdataGraph#0.0.59":
+  version "0.0.59"
+  resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/d8eebd0e0af55fae332a5922971c52772df7792d"
 
 chalk@^2.3.0, chalk@^2.4.1:
   version "2.4.2"

remote/yarn.lock

@@ -217,9 +217,9 @@ async-listener@^0.6.0:
     semver "^5.3.0"
     shimmer "^1.1.0"
 
-"azdataGraph@github:Microsoft/azdataGraph#0.0.58":
-  version "0.0.58"
-  resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/45c88554e98ed3b41cd283a672bd497af08c7ac3"
+"azdataGraph@github:Microsoft/azdataGraph#0.0.59":
+  version "0.0.59"
+  resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/d8eebd0e0af55fae332a5922971c52772df7792d"
 
 base64-js@^1.3.1:
   version "1.5.1"

src/sql/azdata.proposed.d.ts

@@ -703,6 +703,25 @@ declare module 'azdata' {
 		headerFilter?: boolean,
 	}
 
+	export type ExecutionPlanData = executionPlan.ExecutionPlanGraphInfo | executionPlan.ExecutionPlanGraph[];
+
+	export interface ExecutionPlanComponentProperties extends ComponentProperties {
+		/**
+		 * Provide the execution plan file to be displayed. In case of execution plan graph info, the file type will determine the provider to be used to generate execution plan graphs
+		 */
+		data?: ExecutionPlanData;
+	}
+
+	/**
+	 * Defines the executionPlan component
+	 */
+	export interface ExecutionPlanComponent extends Component, ExecutionPlanComponentProperties {
+	}
+
+	export interface ModelBuilder {
+		executionPlan(): ComponentBuilder<ExecutionPlanComponent, ExecutionPlanComponentProperties>;
+	}
+
 	export interface ListViewOption {
 		/**
 		 * The optional accessibility label for the column. Default is the label for the list view option.

src/sql/platform/dashboard/browser/interfaces.ts

@@ -150,5 +150,6 @@ export enum ModelComponentTypes {
 	Separator,
 	PropertiesContainer,
 	InfoBox,
-	Slider
+	Slider,
+	ExecutionPlan
 }

src/sql/workbench/api/common/extHostModelView.ts

@@ -281,6 +281,14 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
 		return builder;
 	}
 
+	executionPlan(): azdata.ComponentBuilder<azdata.ExecutionPlanComponent, azdata.ExecutionPlanComponentProperties> {
+		const id = this.getNextComponentId();
+		const builder: ComponentBuilderImpl<azdata.ExecutionPlanComponent, azdata.ExecutionPlanComponentProperties> = this.getComponentBuilder(new ExecutionPlanComponentWrapper(this._proxy, this._handle, id, this.logService), id);
+
+		this._componentBuilders.set(id, builder);
+		return builder;
+	}
+
 	getComponentBuilder<T extends azdata.Component, TPropertyBag extends azdata.ComponentProperties>(component: ComponentWrapper, id: string): ComponentBuilderImpl<T, TPropertyBag> {
 		let componentBuilder: ComponentBuilderImpl<T, TPropertyBag> = new ComponentBuilderImpl<T, TPropertyBag>(component);
 		this._componentBuilders.set(id, componentBuilder);
@@ -2226,6 +2234,21 @@ class SliderComponentWrapper extends ComponentWrapper implements azdata.SliderCo
 	}
 }
 
+class ExecutionPlanComponentWrapper extends ComponentWrapper implements azdata.ExecutionPlanComponent {
+	constructor(proxy: MainThreadModelViewShape, handle: number, id: string, logService: ILogService) {
+		super(proxy, handle, ModelComponentTypes.ExecutionPlan, id, logService);
+		this.properties = {};
+	}
+
+	public get data(): azdata.ExecutionPlanData {
+		return this.properties['data'];
+	}
+
+	public set data(v: azdata.ExecutionPlanData) {
+		this.setProperty('data', v);
+	}
+}
+
 class GroupContainerComponentWrapper extends ComponentWrapper implements azdata.GroupContainer {
 	constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string, logService: ILogService) {
 		super(proxy, handle, type, id, logService);

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -180,7 +180,8 @@ export enum ModelComponentTypes {
 	Separator,
 	PropertiesContainer,
 	InfoBox,
-	Slider
+	Slider,
+	ExecutionPlan
 }
 
 export enum ModelViewAction {

src/sql/workbench/browser/modelComponents/executionPlan.component.html

@@ -0,0 +1,2 @@
+<div #executionPlanContainer style="width: 100%; height: 100%; overflow: scroll"></div>
+

src/sql/workbench/browser/modelComponents/executionPlan.component.ts

@@ -0,0 +1,89 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as azdata from 'azdata';
+import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
+import { ILogService } from 'vs/platform/log/common/log';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { ExecutionPlanFileView } from 'sql/workbench/contrib/executionPlan/browser/executionPlanFileView';
+import { equals } from 'vs/base/common/objects';
+import * as DOM from 'vs/base/browser/dom';
+
+@Component({
+	selector: 'modelview-executionplan',
+	templateUrl: decodeURI(require.toUrl('./executionPlan.component.html'))
+})
+
+export default class ExecutionPlanComponent extends ContainerBase<any, azdata.ExecutionPlanComponentProperties> implements
+	IComponent, OnDestroy, AfterViewInit {
+	//no-op
+	override ngAfterViewInit(): void {
+	}
+	//no-op
+	override setLayout(layout: any): void {
+	}
+
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+
+	@ViewChild('executionPlanContainer') private _container: ElementRef;
+
+	private _data: azdata.ExecutionPlanData | undefined;
+	private _executionPlanFileView: ExecutionPlanFileView;
+	constructor(
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
+		@Inject(ILogService) logService: ILogService,
+		@Inject(IInstantiationService) private _instantiationService: IInstantiationService) {
+		super(changeRef, el, logService);
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+		this._executionPlanFileView = this._instantiationService.createInstance(ExecutionPlanFileView, undefined);
+		this._executionPlanFileView.render(this._container.nativeElement);
+		if (this._data) {
+			this.loadData(this._data);
+		}
+	}
+
+	override ngOnDestroy(): void {
+		this.baseDestroy();
+		this._executionPlanFileView.dispose();
+		this._data = undefined;
+	}
+
+	public override setProperties(properties: { [key: string]: any; }): void {
+		super.setProperties(properties);
+		if (properties.data) {
+			if (equals(this._data, properties.data) === false) {
+				this._data = properties.data;
+				this.clearExecutionPlan();
+				this.loadData(this._data);
+			}
+		}
+	}
+
+	public clearExecutionPlan(): void {
+		if (this._executionPlanFileView) {
+			DOM.clearNode(this._container.nativeElement);
+			this._executionPlanFileView.dispose();
+			this._executionPlanFileView = this._instantiationService.createInstance(ExecutionPlanFileView, undefined);
+			this._executionPlanFileView.render(this._container.nativeElement);
+		}
+	}
+
+	public loadData(data: azdata.ExecutionPlanData): void {
+		if (this._executionPlanFileView) {
+			if ((<azdata.executionPlan.ExecutionPlanGraphInfo>this._data).graphFileContent !== undefined) {
+				this._executionPlanFileView.loadGraphFile(<azdata.executionPlan.ExecutionPlanGraphInfo>this._data);
+			} else {
+				this._executionPlanFileView.addGraphs(<azdata.executionPlan.ExecutionPlanGraph[]>this._data);
+			}
+		}
+	}
+}

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

@@ -497,6 +497,14 @@ export class AzdataGraphView extends Disposable {
 	public disableNodeCollapse(disable: boolean): void {
 		this._diagram.disableNodeCollapse(disable);
 	}
+
+	public override dispose(): void {
+		super.dispose();
+		if (this._diagram) {
+			this._diagram.graph.destroy();
+			this._diagram = null;
+		}
+	}
 }
 
 export interface InternalExecutionPlanEdge extends azdata.executionPlan.ExecutionPlanEdge {

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

@@ -28,7 +28,7 @@ export class ExecutionPlanFileView extends Disposable {
 	private _planCache: Map<string, azdata.executionPlan.ExecutionPlanGraph[]> = new Map();
 
 	constructor(
-		private _queryResultsView: QueryResultsView,
+		private _queryResultsView: QueryResultsView | undefined,
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@IExecutionPlanService private executionPlanService: IExecutionPlanService
 	) {

src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css

@@ -73,7 +73,7 @@ However we always want it to be the width of the container it is resizing.
 }
 
 .eps-container .execution-plan .plan .plan-action-container .search-node-widget .property-name-label {
-	flex: 0 60px;
+	flex: 0 80px;
 	line-height: 26px
 }
 

src/sql/workbench/contrib/modelView/browser/components.contribution.ts

@@ -36,6 +36,7 @@ import PropertiesContainerComponent from 'sql/workbench/browser/modelComponents/
 import ListViewComponent from 'sql/workbench/browser/modelComponents/listView.component';
 import InfoBoxComponent from 'sql/workbench/browser/modelComponents/infoBox.component';
 import SliderComponent from 'sql/workbench/browser/modelComponents/slider.component';
+import ExecutionPlanComponent from 'sql/workbench/browser/modelComponents/executionPlan.component';
 
 export const DIV_CONTAINER = 'div-container';
 registerComponentType(DIV_CONTAINER, ModelComponentTypes.DivContainer, DivContainer);
@@ -130,3 +131,6 @@ registerComponentType(INFOBOX_COMPONENT, ModelComponentTypes.InfoBox, InfoBoxCom
 
 export const SLIDER_COMPONENT = 'slider-component';
 registerComponentType(SLIDER_COMPONENT, ModelComponentTypes.Slider, SliderComponent);
+
+export const EXECUTION_PLAN_COMPONENT = 'executionplan-component';
+registerComponentType(EXECUTION_PLAN_COMPONENT, ModelComponentTypes.ExecutionPlan, ExecutionPlanComponent);

yarn.lock

@@ -2149,9 +2149,9 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-"azdataGraph@github:Microsoft/azdataGraph#0.0.58":
-  version "0.0.58"
-  resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/45c88554e98ed3b41cd283a672bd497af08c7ac3"
+"azdataGraph@github:Microsoft/azdataGraph#0.0.59":
+  version "0.0.59"
+  resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/d8eebd0e0af55fae332a5922971c52772df7792d"
 
 bach@^1.0.0:
   version "1.2.0"