improve syntax highlighting

3 files changed, 19 insertions, 12 deletions

diff --git a/app/components/plan-node/plan-node.html b/app/components/plan-node/plan-node.html
index a9295dd..55809ca 100644
--- a/app/components/plan-node/plan-node.html
+++ b/app/components/plan-node/plan-node.html
@@ -10,7 +10,7 @@
       </span>
    </header>
 
-   <button *ngIf="plan.formattedQuery && !viewOptions.showCompactView" tooltip="view corresponding query"
+   <button *ngIf="plan.query && !viewOptions.showCompactView" tooltip="view corresponding query"
       class="btn btn-sm btn-default btn-slim pull-right" (click)="showQuery = !showQuery">
       <i class="fa fa-database"></i>
    </button>
diff --git a/app/components/plan-node/plan-node.ts b/app/components/plan-node/plan-node.ts
index 87445fb..ce5f5db 100644
--- a/app/components/plan-node/plan-node.ts
+++ b/app/components/plan-node/plan-node.ts
@@ -74,27 +74,38 @@ export class PlanNode {
         }
 
         if (this.currentCompactView !== this.viewOptions.showCompactView) {
-           this.currentCompactView = this.viewOptions.showCompactView;
-           this.calculateBar();
+            this.currentCompactView = this.viewOptions.showCompactView;
+            this.calculateBar();
         }
     }
 
     getFormattedQuery() {
         var keyItems: Array<string> = [];
 
-        var relationName = this.node[this._planService.RELATION_NAME_PROP];
+        // relation name will be highlighted for SCAN nodes
+        var relationName: string = this.node[this._planService.RELATION_NAME_PROP];
         if (relationName) {
             keyItems.push(this.node[this._planService.SCHEMA_PROP] + '.' + relationName);
             keyItems.push(' ' + relationName);
             keyItems.push(' ' + this.node[this._planService.ALIAS_PROP] + ' ');
         }
 
+        // group key will be highlighted for AGGREGATE nodes
         var groupKey: Array<string> = this.node[this._planService.GROUP_KEY_PROP];
         if (groupKey) {
-            keyItems.push('BY</span> ' + groupKey.join(','));
-            keyItems.push('BY</span> ' + groupKey.join(', '));
+            keyItems.push('GROUP BY ' + groupKey.join(','));
+        }
+
+        // hash condition will be highlighted for HASH JOIN nodes
+        var hashCondition: string = this.node[this._planService.HASH_CONDITION_PROP];
+        if (hashCondition) {
+            keyItems.push(hashCondition.replace('(', '').replace(')', ''));
+        }
+
+        if (this.node[this._planService.NODE_TYPE_PROP].toUpperCase() === 'LIMIT') {
+           keyItems.push('LIMIT');
         }
-        return this._syntaxHighlightService.highlightKeyItems(this.plan.formattedQuery, keyItems);
+        return this._syntaxHighlightService.highlight(this.plan.query, keyItems);
     }
 
     calculateBar() {
diff --git a/app/components/plan-view/plan-view.ts b/app/components/plan-view/plan-view.ts
index e1700ba..302d8ee 100644
--- a/app/components/plan-view/plan-view.ts
+++ b/app/components/plan-view/plan-view.ts
@@ -34,7 +34,7 @@ export class PlanView {
 
     highlightTypes = HighlightType; // exposing the enum to the view
 
-    constructor(private _planService: PlanService, routeParams: RouteParams, private _syntaxHighlightService: SyntaxHighlightService) {
+    constructor(private _planService: PlanService, routeParams: RouteParams) {
         this.id = routeParams.get('id');
     }
 
@@ -56,10 +56,6 @@ export class PlanView {
             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() {