add integrated query view with syntax highlighting

2 files changed, 22 insertions, 24 deletions

diff --git a/app/components/plan-view/plan-view.html b/app/components/plan-view/plan-view.html
index 8ebe525..c63c4d1 100644
--- a/app/components/plan-view/plan-view.html
+++ b/app/components/plan-view/plan-view.html
@@ -39,20 +39,20 @@
          <span class="stat-value">{{executionTime}}</span>
          <span class="stat-label">execution time ({{executionTimeUnit}})</span>
       </div>
-      <div *ngIf="planStats.planningTime">
-         <span class="stat-value">{{planStats.planningTime | number:'.0-2'}}</span>
+      <div *ngIf="plan.planStats.planningTime">
+         <span class="stat-value">{{plan.planStats.planningTime | number:'.0-2'}}</span>
          <span class="stat-label">planning time (ms)</span>
       </div>
-      <div *ngIf="planStats.maxDuration">
-         <span class="stat-value">{{planStats.maxDuration | number:'.0-2'}}</span>
+      <div *ngIf="plan.planStats.maxDuration">
+         <span class="stat-value">{{plan.planStats.maxDuration | number:'.0-2'}}</span>
          <span class="stat-label">slowest node (ms)</span>
       </div>
-      <div *ngIf="planStats.maxRows">
-         <span class="stat-value">{{planStats.maxRows | number:'.0-2'}}</span>
+      <div *ngIf="plan.planStats.maxRows">
+         <span class="stat-value">{{plan.planStats.maxRows | number:'.0-2'}}</span>
          <span class="stat-label">largest node (rows)</span>
       </div>
-      <div *ngIf="planStats.maxCost">
-         <span class="stat-value">{{planStats.maxCost | number:'.0-2'}}</span>
+      <div *ngIf="plan.planStats.maxCost">
+         <span class="stat-value">{{plan.planStats.maxCost | number:'.0-2'}}</span>
          <span class="stat-label">costliest node</span>
       </div>
    </div>
@@ -60,7 +60,7 @@
    <div class="plan">
       <ul>
          <li>
-            <plan-node [node]="rootContainer.Plan" [planStats]="planStats" [viewOptions]="viewOptions"></plan-node>
+            <plan-node [plan]="plan" [node]="rootContainer.Plan" [viewOptions]="viewOptions"></plan-node>
          </li>
       </ul>
    </div>
diff --git a/app/components/plan-view/plan-view.ts b/app/components/plan-view/plan-view.ts
index 1ec3855..e1700ba 100644
--- a/app/components/plan-view/plan-view.ts
+++ b/app/components/plan-view/plan-view.ts
@@ -2,15 +2,16 @@ import {Component, OnInit} from 'angular2/core';
 import {ROUTER_DIRECTIVES, RouteParams} from 'angular2/router';
 
 import {IPlan} from '../../interfaces/iplan';
-import {PlanService} from '../../services/plan-service';
 import {HighlightType} from '../../enums';
 import {PlanNode} from '../plan-node/plan-node';
+import {PlanService} from '../../services/plan-service';
+import {SyntaxHighlightService} from '../../services/syntax-highlight-service';
 
 @Component({
     selector: 'plan-view',
     templateUrl: './components/plan-view/plan-view.html',
     directives: [ROUTER_DIRECTIVES, PlanNode],
-    providers: [PlanService]
+    providers: [PlanService, SyntaxHighlightService]
 })
 export class PlanView {
     id: string;
@@ -20,13 +21,6 @@ export class PlanView {
     executionTimeUnit: string;
     hideMenu: boolean = true;
 
-    planStats: any = {
-        executionTime: 0,
-        maxRows: 0,
-        maxCost: 0,
-        maxDuration: 0
-    };
-
     viewOptions: any = {
         showPlanStats: true,
         showHighlightBar: true,
@@ -40,7 +34,7 @@ export class PlanView {
 
     highlightTypes = HighlightType; // exposing the enum to the view
 
-    constructor(private _planService: PlanService, routeParams: RouteParams) {
+    constructor(private _planService: PlanService, routeParams: RouteParams, private _syntaxHighlightService: SyntaxHighlightService) {
         this.id = routeParams.get('id');
     }
 
@@ -55,13 +49,17 @@ export class PlanView {
         var executionTime: number = this.rootContainer['Execution Time'] || this.rootContainer['Total Runtime'];
         [this.executionTime, this.executionTimeUnit] = this.calculateDuration(executionTime);
 
-        this.planStats = {
+        this.plan.planStats = {
             executionTime: executionTime,
-            planningTime: this.rootContainer['Planning Time'],
-            maxRows: this.rootContainer[this._planService.MAXIMUM_ROWS_PROP],
-            maxCost: this.rootContainer[this._planService.MAXIMUM_COSTS_PROP],
-            maxDuration: this.rootContainer[this._planService.MAXIMUM_DURATION_PROP]
+            planningTime: this.rootContainer['Planning Time'] || 0,
+            maxRows: this.rootContainer[this._planService.MAXIMUM_ROWS_PROP] || 0,
+            maxCost: this.rootContainer[this._planService.MAXIMUM_COSTS_PROP] || 0,
+            maxDuration: this.rootContainer[this._planService.MAXIMUM_DURATION_PROP] || 0
         }
+
+        // get syntax highlighted query
+        this._syntaxHighlightService.init();
+        this.plan.formattedQuery = this._syntaxHighlightService.highlight(this.plan.query);
     }
 
     ngOnInit() {