Pushing initial work for done in Query plan feature to main (#17986)

* Adding initial boilerplate for qp2

* Adding feature flag in query plan 2

* Clearing show plan 2 after every run

* Adding sub tree cost

* removing unused method.

* WIP 2

* Adding properties view and relative cost to query plan

* WIP

* Add icons to ads

* Assing relative costs and prop windows

* Enabling older query plan again

* Making some PR fixes

* Some more PR related fixes

* Use MS org azdataGraph module

* Moving new properties to azdata proposed.

* Moving new class properties to proposed

* added missing doc component.

* Changing how azdatagraph package is referenced

* Removing empty lines, fixing localization keys

* Removing empty line, localizing some string

* making css classes more specific

* making some logic concise

* localizing some more strings

* Making more css classes specific

* Removing important tag from css props

* Checking if sum is greater than 0 to prevent divide by zero exceptions

* Fixed loader error in bootstrap

* Fixing query index

* -fixing image paths
-making css class more class specific by using nested selectors

Co-authored-by: kburtram <karlb@microsoft.com>

src/sql/workbench/contrib/query/browser/queryResultsView.ts

@@ -25,6 +25,7 @@ import { URI } from 'vs/base/common/uri';
 import { attachTabbedPanelStyler } from 'sql/workbench/common/styler';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import { ILogService } from 'vs/platform/log/common/log';
+import { QueryPlan2Tab } from 'sql/workbench/contrib/queryplan2/browser/queryPlan';
 
 class MessagesView extends Disposable implements IPanelView {
 	private messagePanel: MessagePanel;
@@ -163,6 +164,7 @@ export class QueryResultsView extends Disposable {
 	private messagesTab: MessagesTab;
 	private chartTab: ChartTab;
 	private qpTab: QueryPlanTab;
+	private qp2Tab: QueryPlan2Tab;
 	private topOperationsTab: TopOperationsTab;
 	private dynamicModelViewTabs: QueryModelViewTab[] = [];
 
@@ -183,6 +185,7 @@ export class QueryResultsView extends Disposable {
 		this._panelView = this._register(new TabbedPanel(container, { showHeaderWhenSingleView: true }));
 		this._register(attachTabbedPanelStyler(this._panelView, themeService));
 		this.qpTab = this._register(new QueryPlanTab());
+		this.qp2Tab = this._register(new QueryPlan2Tab());
 		this.topOperationsTab = this._register(new TopOperationsTab(instantiationService));
 
 		this._panelView.pushTab(this.resultsTab);
@@ -223,6 +226,7 @@ export class QueryResultsView extends Disposable {
 			this.hideResults();
 			this.hideChart();
 			this.hidePlan();
+			this.hidePlan2();
 			this.hideDynamicViewModelTabs();
 			this.input?.state.visibleTabs.clear();
 			if (this.input) {
@@ -245,6 +249,15 @@ export class QueryResultsView extends Disposable {
 			}
 		}));
 
+		this.runnerDisposables.add(runner.onQueryPlan2Available(e => {
+			if (this.qp2Tab) {
+				if (!this.input.state.visibleTabs.has(this.qp2Tab.identifier)) {
+					this.showPlan2();
+				}
+				this.qp2Tab.view.addGraphs(e.planGraphs);
+			}
+		}));
+
 		if (this.input?.state.visibleTabs.has(this.chartTab.identifier) && !this._panelView.contains(this.chartTab)) {
 			this._panelView.pushTab(this.chartTab);
 		} else if (!this.input?.state.visibleTabs.has(this.chartTab.identifier) && this._panelView.contains(this.chartTab)) {
@@ -257,6 +270,12 @@ export class QueryResultsView extends Disposable {
 			this._panelView.removeTab(this.qpTab.identifier);
 		}
 
+		if (this.input?.state.visibleTabs.has(this.qp2Tab.identifier) && !this._panelView.contains(this.qp2Tab)) {
+			this._panelView.pushTab(this.qp2Tab);
+		} else if (!this.input?.state.visibleTabs.has(this.qp2Tab.identifier) && this._panelView.contains(this.qp2Tab)) {
+			this._panelView.removeTab(this.qp2Tab.identifier);
+		}
+
 		if (this.input?.state.visibleTabs.has(this.topOperationsTab.identifier) && !this._panelView.contains(this.topOperationsTab)) {
 			this._panelView.pushTab(this.topOperationsTab);
 		} else if (!this.input?.state.visibleTabs.has(this.topOperationsTab.identifier) && this._panelView.contains(this.topOperationsTab)) {
@@ -309,7 +328,7 @@ export class QueryResultsView extends Disposable {
 			this._input = input;
 			this.runnerDisposables.clear();
 
-			[this.resultsTab, this.messagesTab, this.qpTab, this.topOperationsTab, this.chartTab].forEach(t => t.clear());
+			[this.resultsTab, this.messagesTab, this.qpTab, this.qp2Tab, this.topOperationsTab, this.chartTab].forEach(t => t.clear());
 			this.dynamicModelViewTabs.forEach(t => t.clear());
 
 			if (input) {
@@ -412,6 +431,16 @@ export class QueryResultsView extends Disposable {
 		this.topOperationsTab.view.showPlan(xml);
 	}
 
+	public showPlan2() {
+		if (!this._panelView.contains(this.qp2Tab)) {
+			this.input?.state.visibleTabs.add(this.qp2Tab.identifier);
+			if (!this._panelView.contains(this.qp2Tab)) {
+				this._panelView.pushTab(this.qp2Tab);
+			}
+			this._panelView.showTab(this.qp2Tab.identifier);
+		}
+	}
+
 	public hidePlan() {
 		if (this._panelView.contains(this.qpTab)) {
 			this._panelView.removeTab(this.qpTab.identifier);
@@ -422,6 +451,13 @@ export class QueryResultsView extends Disposable {
 		}
 	}
 
+	public hidePlan2() {
+		if (this._panelView.contains(this.qp2Tab)) {
+			this.qp2Tab.clear();
+			this._panelView.removeTab(this.qp2Tab.identifier);
+		}
+	}
+
 	public hideDynamicViewModelTabs() {
 		this.dynamicModelViewTabs.forEach(tab => {
 			if (this._panelView.contains(tab)) {

src/sql/workbench/contrib/queryplan2/browser/actions/propertiesAction.ts

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { QueryPlan2 } from 'sql/workbench/contrib/queryplan2/browser/queryPlan';
+import { Action } from 'vs/base/common/actions';
+import { Codicon } from 'vs/base/common/codicons';
+import { localize } from 'vs/nls';
+
+
+export class PropertiesAction extends Action {
+	public static ID = 'qp.propertiesAction';
+	public static LABEL = localize('queryPlanPropertiesActionLabel', "Properties");
+
+	constructor() {
+		super(PropertiesAction.ID, PropertiesAction.LABEL, Codicon.listUnordered.classNames);
+	}
+
+	public override async run(context: QueryPlan2): Promise<void> {
+		context.propContainer.style.visibility = context.propContainer.style.visibility === 'visible' ? 'hidden' : 'visible';
+	}
+}