add compact view

3 files changed, 65 insertions, 36 deletions

diff --git a/app/components/plan-node/plan-node.html b/app/components/plan-node/plan-node.html
index fdc2c89..a9295dd 100644
--- a/app/components/plan-node/plan-node.html
+++ b/app/components/plan-node/plan-node.html
@@ -1,32 +1,38 @@
-<div class="plan-node" [class.expanded]="showDetails">
+<div class="plan-node" [class.expanded]="showDetails" [class.compact]="viewOptions.showCompactView">
    <header (click)="showDetails = !showDetails" tooltip="view node details">
       <h4>{{node[_planService.NODE_TYPE_PROP] | uppercase}}
       </h4>
-      <span class="node-duration">{{duration}}<span class="text-muted">{{durationUnit}} | </span>
-      <strong>{{executionTimePercent}}</strong><span class="text-muted">%</span>
+      <span *ngIf="!viewOptions.showCompactView">
+         <span class="node-duration">{{duration}}
+            <span class="text-muted">{{durationUnit}} | </span><strong>{{executionTimePercent}}</strong>
+            <span class="text-muted">%</span>
+         </span>
       </span>
    </header>
 
-   <button *ngIf="plan.formattedQuery" tooltip="view corresponding query"
+   <button *ngIf="plan.formattedQuery && !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>
 
-   <div class="relation-name" *ngIf="node[_planService.RELATION_NAME_PROP]">
-      <span class="text-muted">on </span>
-      <span *ngIf="node[_planService.SCHEMA_PROP]">{{node[_planService.SCHEMA_PROP]}}.</span>{{node[_planService.RELATION_NAME_PROP]}}
-      <span *ngIf="node[_planService.ALIAS_PROP]"> ({{node[_planService.ALIAS_PROP]}})</span>
-   </div>
-
-   <div class="relation-name" *ngIf="node[_planService.GROUP_KEY_PROP]">
-      <span class="text-muted">by</span> {{node[_planService.GROUP_KEY_PROP]}}</div>
-   <div class="relation-name" *ngIf="node[_planService.SORT_KEY_PROP]">
-      <span class="text-muted">by</span> {{node[_planService.SORT_KEY_PROP]}}</div>
-   <div class="relation-name" *ngIf="node[_planService.JOIN_TYPE_PROP]">{{node[_planService.JOIN_TYPE_PROP]}}
-      <span class="text-muted">join</span></div>
-   <div class="relation-name" *ngIf="node[_planService.INDEX_NAME_PROP]"><span class="text-muted">
-      using</span> {{node[_planService.INDEX_NAME_PROP]}}</div>
+   <div *ngIf="!viewOptions.showCompactView">
+      <div class="relation-name" *ngIf="node[_planService.RELATION_NAME_PROP]">
+         <span class="text-muted">on </span>
+         <span *ngIf="node[_planService.SCHEMA_PROP]">{{node[_planService.SCHEMA_PROP]}}.</span>{{node[_planService.RELATION_NAME_PROP]}}
+         <span *ngIf="node[_planService.ALIAS_PROP]"> ({{node[_planService.ALIAS_PROP]}})</span>
+      </div>
 
+      <div class="relation-name" *ngIf="node[_planService.GROUP_KEY_PROP]">
+         <span class="text-muted">by</span> {{node[_planService.GROUP_KEY_PROP]}}</div>
+      <div class="relation-name" *ngIf="node[_planService.SORT_KEY_PROP]">
+         <span class="text-muted">by</span> {{node[_planService.SORT_KEY_PROP]}}</div>
+      <div class="relation-name" *ngIf="node[_planService.JOIN_TYPE_PROP]">{{node[_planService.JOIN_TYPE_PROP]}}
+         <span class="text-muted">join</span></div>
+      <div class="relation-name" *ngIf="node[_planService.INDEX_NAME_PROP]"><span class="text-muted">
+         using</span> {{node[_planService.INDEX_NAME_PROP]}}</div>
+      <div class="relation-name" *ngIf="node[_planService.HASH_CONDITION_PROP]"><span class="text-muted">
+         on</span> {{node[_planService.HASH_CONDITION_PROP]}}</div>
+   </div>
    <div class="tags" *ngIf="viewOptions.showTags && tags.length > 0">
       <span *ngFor="#tag of tags">{{tag}}</span>
    </div>
diff --git a/app/components/plan-node/plan-node.ts b/app/components/plan-node/plan-node.ts
index 2f3164e..87445fb 100644
--- a/app/components/plan-node/plan-node.ts
+++ b/app/components/plan-node/plan-node.ts
@@ -19,7 +19,8 @@ import {ColorService} from '../../services/color-service';
 
 export class PlanNode {
     // consts
-    MAX_WIDTH: number = 220;
+    FULL_WIDTH: number = 220;
+    COMPACT_WIDTH: number = 140;
     MIN_ESTIMATE_MISS: number = 100;
     COSTLY_TAG: string = 'costliest';
     SLOW_TAG: string = 'slowest';
@@ -42,17 +43,18 @@ export class PlanNode {
     tags: Array<string>;
     plannerRowEstimateValue: number;
     plannerRowEstimateDirection: EstimateDirection;
-    currentHighlightType: string;
+    currentHighlightType: string; // keep track of highlight type for change detection
+    currentCompactView: boolean;
 
     // expose enum to view
     estimateDirections = EstimateDirection;
     highlightTypes = HighlightType;
 
     constructor(private _planService: PlanService,
-      private _syntaxHighlightService: SyntaxHighlightService,
-      private _helpService: HelpService,
-      private _colorService: ColorService)
-      {}
+        private _syntaxHighlightService: SyntaxHighlightService,
+        private _helpService: HelpService,
+        private _colorService: ColorService)
+    { }
 
     ngOnInit() {
         this.currentHighlightType = this.viewOptions.highlightType;
@@ -70,35 +72,51 @@ export class PlanNode {
             this.currentHighlightType = this.viewOptions.highlightType;
             this.calculateBar();
         }
+
+        if (this.currentCompactView !== this.viewOptions.showCompactView) {
+           this.currentCompactView = this.viewOptions.showCompactView;
+           this.calculateBar();
+        }
     }
 
     getFormattedQuery() {
-      var keyItems: Array<string> = [];
-      keyItems.push(this.node[this._planService.SCHEMA_PROP] + '.' + this.node[this._planService.RELATION_NAME_PROP]);
-      keyItems.push(' ' + this.node[this._planService.RELATION_NAME_PROP] + ' ');
-      keyItems.push(' ' + this.node[this._planService.ALIAS_PROP] + ' ');
-      keyItems.push(this.node[this._planService.GROUP_KEY_PROP]);
-      return this._syntaxHighlightService.highlightKeyItems(this.plan.formattedQuery, keyItems);
+        var keyItems: Array<string> = [];
+
+        var relationName = 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] + ' ');
+        }
+
+        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(', '));
+        }
+        return this._syntaxHighlightService.highlightKeyItems(this.plan.formattedQuery, keyItems);
     }
 
     calculateBar() {
+        var nodeWidth = this.viewOptions.showCompactView ? this.COMPACT_WIDTH : this.FULL_WIDTH;
+
         switch (this.currentHighlightType) {
             case HighlightType.DURATION:
                 this.highlightValue = (this.node[this._planService.ACTUAL_DURATION_PROP]);
-                this.width = Math.round((this.highlightValue / this.plan.planStats.maxDuration) * this.MAX_WIDTH);
+                this.width = Math.round((this.highlightValue / this.plan.planStats.maxDuration) * nodeWidth);
                 break;
             case HighlightType.ROWS:
                 this.highlightValue = (this.node[this._planService.ACTUAL_ROWS_PROP]);
-                this.width = Math.round((this.highlightValue / this.plan.planStats.maxRows) * this.MAX_WIDTH);
+                this.width = Math.round((this.highlightValue / this.plan.planStats.maxRows) * nodeWidth);
                 break;
             case HighlightType.COST:
                 this.highlightValue = (this.node[this._planService.ACTUAL_COST_PROP]);
-                this.width = Math.round((this.highlightValue / this.plan.planStats.maxCost) * this.MAX_WIDTH);
+                this.width = Math.round((this.highlightValue / this.plan.planStats.maxCost) * nodeWidth);
                 break;
         }
 
         if (this.width < 1) { this.width = 1 }
-        this.backgroundColor = this._colorService.numberToColorHsl(1 - this.width / this.MAX_WIDTH);
+        this.backgroundColor = this._colorService.numberToColorHsl(1 - this.width / nodeWidth);
     }
 
     calculateDuration() {
@@ -144,6 +162,6 @@ export class PlanNode {
     }
 
     getNodeTypeDescription() {
-      return this._helpService.getNodeTypeDescription(this.node[this._planService.NODE_TYPE_PROP]);
-   }
+        return this._helpService.getNodeTypeDescription(this.node[this._planService.NODE_TYPE_PROP]);
+    }
 }
diff --git a/app/components/plan-view/plan-view.html b/app/components/plan-view/plan-view.html
index 268bdac..c05a30e 100644
--- a/app/components/plan-view/plan-view.html
+++ b/app/components/plan-view/plan-view.html
@@ -11,6 +11,11 @@
       </li>
 
       <li>
+         <input id="showCompactView" type="checkbox" [(ngModel)]="viewOptions.showCompactView">
+         <label class="clickable" for="showCompactView"> show compact view</label>
+      </li>
+
+      <li>
          <input id="showPlannerEstimate" type="checkbox" [(ngModel)]="viewOptions.showPlannerEstimate">
          <label class="clickable" for="showPlannerEstimate"> show planner estimate</label>
       </li>