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 +++++++++++++++++++++++++++++++--
 2 files changed, 66 insertions(+), 11 deletions(-)

(limited to 'app/components/plan-node')

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;
+   }
 }
-- 
cgit v1.2.3


From cd2af1466b1c23f81c13af61fa550475f82e0227 Mon Sep 17 00:00:00 2001
From: Alex Tatiyants <atatiyan@gmail.com>
Date: Sat, 5 Mar 2016 11:58:52 -0800
Subject: better handle CTE scans, including correct duration calculations. fix
 #15

---
 app/components/plan-node/plan-node.html | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'app/components/plan-node')

diff --git a/app/components/plan-node/plan-node.html b/app/components/plan-node/plan-node.html
index 60cdf50..86db018 100644
--- a/app/components/plan-node/plan-node.html
+++ b/app/components/plan-node/plan-node.html
@@ -35,6 +35,9 @@
          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 class="relation-name" *ngIf="node[_planService.CTE_NAME_PROP]">
+            <span class="text-muted">CTE</span> {{node[_planService.CTE_NAME_PROP]}}
+      </div>
    </div>
 
    <div class="tags" *ngIf="viewOptions.showTags && tags.length > 0">
-- 
cgit v1.2.3