From 7fc812bc761c95e508e1c540393b12b03cdf1d03 Mon Sep 17 00:00:00 2001
From: Alex Tatiyants <atatiyan@gmail.com>
Date: Sat, 27 Feb 2016 14:38:42 -0800
Subject: add Dot view mode to make large plans easier to view

---
 app/components/plan-node/plan-node.html | 22 +++++++------
 app/components/plan-node/plan-node.ts   | 55 +++++++++++++++++++++++++++++++--
 app/components/plan-view/plan-view.html | 15 ++++-----
 app/components/plan-view/plan-view.ts   |  6 ++--
 4 files changed, 78 insertions(+), 20 deletions(-)

(limited to 'app/components')

diff --git a/app/components/plan-node/plan-node.html b/app/components/plan-node/plan-node.html
index 5ddf55c..60cdf50 100644
--- a/app/components/plan-node/plan-node.html
+++ b/app/components/plan-node/plan-node.html
@@ -1,8 +1,11 @@
-<div class="plan-node" [class.expanded]="showDetails" [class.compact]="viewOptions.showCompactView">
+<div class="plan-node"
+   [class.expanded]="showDetails"
+   [class.compact]="viewOptions.viewMode === viewModes.COMPACT"
+   [class.dot]="viewOptions.viewMode === viewModes.DOT">
+
    <header (click)="showDetails = !showDetails" tooltip="view node details">
-      <h4>{{node[_planService.NODE_TYPE_PROP] | uppercase}}
-      </h4>
-      <span *ngIf="!viewOptions.showCompactView">
+      <h4>{{getNodeName()}}</h4>
+      <span *ngIf="viewOptions.viewMode === viewModes.FULL || showDetails">
          <span class="node-duration">{{node[_planService.ACTUAL_DURATION_PROP] | duration}}<span class="text-muted">{{node[_planService.ACTUAL_DURATION_PROP] | durationUnit}}
              | </span><strong>{{executionTimePercent}}</strong>
             <span class="text-muted">%</span>
@@ -10,12 +13,12 @@
       </span>
    </header>
 
-   <button *ngIf="plan.query && !viewOptions.showCompactView" tooltip="view corresponding query"
+   <button *ngIf="plan.query && viewOptions.viewMode === viewModes.FULL" 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 *ngIf="!viewOptions.showCompactView">
+   <div *ngIf="viewOptions.viewMode === viewModes.FULL">
       <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]}}
@@ -33,20 +36,21 @@
       <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>
+      <span *ngFor="#tag of tags">{{getTagName(tag)}}</span>
    </div>
 
    <div *ngIf="currentHighlightType !== highlightTypes.NONE">
       <div class="node-bar-container">
          <span class="node-bar" [style.width]="barWidth+'px'" [style.backgroundColor]="backgroundColor"></span>
       </div>
-      <span class="node-bar-label">
+      <span class="node-bar-label" *ngIf="shouldShowNodeBarLabel()">
          <span class="text-muted">{{viewOptions.highlightType}}:</span> {{highlightValue | number:'.0-2'}}
       </span>
    </div>
 
-   <div class="planner-estimate" *ngIf="viewOptions.showPlannerEstimate">
+   <div class="planner-estimate" *ngIf="shouldShowPlannerEstimate()">
       <span *ngIf="plannerRowEstimateDirection === estimateDirections.over"><strong>over</strong> estimated rows</span>
       <span *ngIf="plannerRowEstimateDirection === estimateDirections.under"><strong>under</strong> estimated rows</span>
       <span> by <strong>{{plannerRowEstimateValue | number}}</strong>x</span>
diff --git a/app/components/plan-node/plan-node.ts b/app/components/plan-node/plan-node.ts
index 0d3c420..52590e8 100644
--- a/app/components/plan-node/plan-node.ts
+++ b/app/components/plan-node/plan-node.ts
@@ -1,6 +1,6 @@
 import {IPlan} from '../../interfaces/iplan';
 import {Component, OnInit} from 'angular2/core';
-import {HighlightType, EstimateDirection} from '../../enums';
+import {HighlightType, EstimateDirection, ViewMode} from '../../enums';
 import {DurationPipe, DurationUnitPipe} from '../../pipes';
 
 import {PlanService} from '../../services/plan-service';
@@ -23,6 +23,7 @@ export class PlanNode {
     // consts
     NORMAL_WIDTH: number = 220;
     COMPACT_WIDTH: number = 140;
+    DOT_WIDTH: number = 30;
     EXPANDED_WIDTH: number = 400;
 
     MIN_ESTIMATE_MISS: number = 100;
@@ -58,6 +59,7 @@ export class PlanNode {
     // expose enum to view
     estimateDirections = EstimateDirection;
     highlightTypes = HighlightType;
+    viewModes = ViewMode;
 
     constructor(private _planService: PlanService,
         private _syntaxHighlightService: SyntaxHighlightService,
@@ -122,7 +124,17 @@ export class PlanNode {
     }
 
     calculateBar() {
-        this.barContainerWidth = this.viewOptions.showCompactView ? this.COMPACT_WIDTH : this.NORMAL_WIDTH;
+        switch (this.viewOptions.viewMode) {
+            case ViewMode.DOT:
+                this.barContainerWidth = this.DOT_WIDTH;
+                break;
+            case ViewMode.COMPACT:
+                this.barContainerWidth = this.COMPACT_WIDTH;
+                break;
+            default:
+                this.barContainerWidth = this.NORMAL_WIDTH;
+                break;
+        }
 
         // expanded view width trumps others
         if (this.currentExpandedView) {
@@ -184,4 +196,43 @@ export class PlanNode {
     getNodeTypeDescription() {
         return this._helpService.getNodeTypeDescription(this.node[this._planService.NODE_TYPE_PROP]);
     }
+
+    getNodeName() {
+        if (this.viewOptions.viewMode === ViewMode.DOT && !this.showDetails) {
+            return this.node[this._planService.NODE_TYPE_PROP].replace(/[^A-Z]/g, '').toUpperCase();
+        }
+
+        return (this.node[this._planService.NODE_TYPE_PROP]).toUpperCase();
+    }
+
+    getTagName(tagName: String) {
+        if (this.viewOptions.viewMode === ViewMode.DOT && !this.showDetails) {
+            return tagName.charAt(0);
+        }
+        return tagName;
+    }
+
+    shouldShowPlannerEstimate() {
+        if (this.viewOptions.showPlannerEstimate && this.showDetails) {
+            return true;
+        }
+
+        if (this.viewOptions.viewMode === ViewMode.DOT) {
+            return false;
+        }
+
+        return this.viewOptions.showPlannerEstimate;
+    }
+
+    shouldShowNodeBarLabel() {
+      if (this.showDetails) {
+         return true;
+      }
+
+      if (this.viewOptions.viewMode === ViewMode.DOT) {
+         return false;
+      }
+
+      return true;
+   }
 }
diff --git a/app/components/plan-view/plan-view.html b/app/components/plan-view/plan-view.html
index 4ebb70c..70278f4 100644
--- a/app/components/plan-view/plan-view.html
+++ b/app/components/plan-view/plan-view.html
@@ -9,21 +9,22 @@
          <input id="showPlanStats" type="checkbox" [(ngModel)]="viewOptions.showPlanStats">
          <label class="clickable" for="showPlanStats"> show plan stats</label>
       </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>
-
       <li>
          <input id="showTags" type="checkbox" [(ngModel)]="viewOptions.showTags">
          <label class="clickable" for="showTags"> show analysis tags</label>
       </li>
+      <li>
+         <label>view mode: </label>
+         <div class="button-group">
+            <button [class.selected]="viewOptions.viewMode == viewModes.FULL" (click)="viewOptions.viewMode = viewModes.FULL">full</button>
+            <button [class.selected]="viewOptions.viewMode == viewModes.COMPACT" (click)="viewOptions.viewMode = viewModes.COMPACT">compact</button>
+            <button [class.selected]="viewOptions.viewMode == viewModes.DOT" (click)="viewOptions.viewMode = viewModes.DOT">dot</button>
+         </div>
+      </li>
 
       <li>
          <label>graph metric: </label>
diff --git a/app/components/plan-view/plan-view.ts b/app/components/plan-view/plan-view.ts
index 895cccf..9ba8782 100644
--- a/app/components/plan-view/plan-view.ts
+++ b/app/components/plan-view/plan-view.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from 'angular2/core';
 import {ROUTER_DIRECTIVES, RouteParams} from 'angular2/router';
 
 import {IPlan} from '../../interfaces/iplan';
-import {HighlightType} from '../../enums';
+import {HighlightType, ViewMode} from '../../enums';
 import {PlanNode} from '../plan-node/plan-node';
 import {PlanService} from '../../services/plan-service';
 import {SyntaxHighlightService} from '../../services/syntax-highlight-service';
@@ -26,13 +26,15 @@ export class PlanView {
         showHighlightBar: true,
         showPlannerEstimate: false,
         showTags: true,
-        highlightType: HighlightType.NONE
+        highlightType: HighlightType.NONE,
+        viewMode: ViewMode.FULL
     };
 
     showPlannerEstimate: boolean = true;
     showMenu: boolean = false;
 
     highlightTypes = HighlightType; // exposing the enum to the view
+    viewModes = ViewMode;
 
     constructor(private _planService: PlanService, routeParams: RouteParams) {
         this.id = routeParams.get('id');
-- 
cgit v1.2.3