Adding properties view and action bar to graph and fixing styling. (#18185)

* Adding properties view and action bar to graph.

* Open Graph File

* replacing innerhtml with  innertext

* Fixing floating promises

* Fixed typo

* renaming

* Fixing hardcoded colors and comments

* Removing todo and hardcoded colors

* renaming method

* removed unused contract

* Fixed path in comment

* converting div to button

* adding checks to table width and height setter

* Make method name more meaningful

* adding method return types

* concising repeated logic

* removing unused styling

* better sorting logic

* Fixing graph parsing
Renaming some stuff
Implementing IDisposable

* Fixing bad props logic

* Fixed image loading issue

* Removing hardcoded colors

* Adding comments to localize and handling undefined cases in sort

* Changed ch to px

* moving util function to strings

src/sql/azdata.proposed.d.ts

@@ -915,9 +915,9 @@ declare module 'azdata' {
 
 	export interface QueryExecuteResultSetNotificationParams {
 		/**
-		 * Contains query plans returned by the database in ResultSets.
+		 * Contains execution plans returned by the database in ResultSets.
 		 */
-		executionPlans: QueryPlanGraph[];
+		executionPlans: ExecutionPlanGraph[];
 	}
 
 	export interface ResultSetSummary {
@@ -925,10 +925,6 @@ declare module 'azdata' {
 		 * The visualization options for the result set.
 		 */
 		visualization?: VisualizationOptions;
-		/**
-		 * Generic query plan graph to be displayed in the results view.
-		 */
-		showplangraph?: QueryPlanGraph;
 	}
 
 	/**
@@ -1435,18 +1431,26 @@ declare module 'azdata' {
 		}
 	}
 
-	export interface QueryPlanGraph {
+	export interface ExecutionPlanGraph {
 		/**
-		 * Root of the query plan tree
+		 * Root of the execution plan tree
 		 */
-		root: QueryPlanGraphNode;
+		root: ExecutionPlanNode;
 		/**
-		 * Underlying query for the query plan graph.
+		 * Underlying query for the execution plan graph.
 		 */
 		query: string;
+		/**
+		 * String representation of graph
+		 */
+		graphFile: ExecutionPlanGraphFile;
+		/**
+		 * Query recommendations for optimizing performance
+		 */
+		recommendations: ExecutionPlanRecommendations[];
 	}
 
-	export interface QueryPlanGraphNode {
+	export interface ExecutionPlanNode {
 		/**
 		 * Type of the node. This property determines the icon that is displayed for it
 		 */
@@ -1470,7 +1474,7 @@ declare module 'azdata' {
 		/**
 		 * Node properties to be shown in the tooltip
 		 */
-		properties: QueryPlanGraphElementProperty[];
+		properties: ExecutionPlanGraphElementProperty[];
 		/**
 		 * Display name for the node
 		 */
@@ -1486,14 +1490,14 @@ declare module 'azdata' {
 		/**
 		 * Direct children of the nodes.
 		 */
-		children: QueryPlanGraphNode[];
+		children: ExecutionPlanNode[];
 		/**
 		 * Edges corresponding to the children.
 		 */
-		edges: QueryGraphEdge[];
+		edges: ExecutionPlanEdge[];
 	}
 
-	export interface QueryGraphEdge {
+	export interface ExecutionPlanEdge {
 		/**
 		 * Count of the rows returned by the subtree of the edge.
 		 */
@@ -1505,18 +1509,18 @@ declare module 'azdata' {
 		/**
 		 * Edge properties to be shown in the tooltip.
 		 */
-		properties: QueryPlanGraphElementProperty[]
+		properties: ExecutionPlanGraphElementProperty[]
 	}
 
-	export interface QueryPlanGraphElementProperty {
+	export interface ExecutionPlanGraphElementProperty {
 		/**
 		 * Name of the property
 		 */
 		name: string;
 		/**
-		 * Formatted value for the property
+		 * value for the property
 		 */
-		formattedValue: string;
+		value: string | ExecutionPlanGraphElementProperty[];
 		/**
 		 * Flag to show/hide props in tooltip
 		 */
@@ -1530,4 +1534,30 @@ declare module 'azdata' {
 		 */
 		isLongString: boolean;
 	}
+
+	export interface ExecutionPlanRecommendations {
+		/**
+		 * Text displayed in the show plan graph control description
+		 */
+		displayString: string;
+		/**
+		 * Query that is recommended to the user
+		 */
+		queryText: string;
+		/**
+		 * Query that will be opened in a new file once the user click on the recommendation
+		 */
+		queryWithDescription: string;
+	}
+
+	export interface ExecutionPlanGraphFile {
+		/**
+		 * File contents
+		 */
+		graphFileContent: string;
+		/**
+		 * File type for execution plan. This will be the file type of the editor when the user opens the graph file
+		 */
+		graphFileType: string;
+	}
 }