From 9554ab8c51c0a5853a58be98936223908eabcbb9 Mon Sep 17 00:00:00 2001
From: Alex Tatiyants <atatiyan@gmail.com>
Date: Mon, 4 Jan 2016 21:32:55 -0800
Subject: add node descriptions, clean up plan-node.ts

---
 app/components/plan-node/plan-node.html | 40 +++++++++++-------
 app/components/plan-node/plan-node.ts   | 73 ++++++++-------------------------
 2 files changed, 43 insertions(+), 70 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 ddf6722..08a7a96 100644
--- a/app/components/plan-node/plan-node.html
+++ b/app/components/plan-node/plan-node.html
@@ -1,26 +1,30 @@
-<div class="plan-node">
+<div class="plan-node" [class.expanded]="showDetails">
    <header (click)="showDetails = !showDetails">
-      <h4>{{node['Node Type'] | uppercase}}
+      <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>
    </header>
 
-   <div class="relation-name" *ngIf="node['Relation Name']">
+   <div class="relation-name" *ngIf="node[_planService.RELATION_NAME_PROP]">
       <button *ngIf="plan.formattedQuery" class="btn btn-sm btn-default btn-slim pull-right" (click)="showQuery = !showQuery">
          <i class="fa fa-database"></i>
       </button>
 
       <span class="text-muted">on </span>
-      <span *ngIf="node['Schema']">{{node['Schema']}}.</span>{{node['Relation Name']}}
-      <span *ngIf="node['Alias']"> ({{node['Alias']}})</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['Group Key']"><span class="text-muted">by</span> {{node['Group Key']}}</div>
-   <div class="relation-name" *ngIf="node['Sort Key']"><span class="text-muted">by</span> {{node['Sort Key']}}</div>
-   <div class="relation-name" *ngIf="node['Join Type']">{{node['Join Type']}} <span class="text-muted">join</span></div>
-   <div class="relation-name" *ngIf="node['Index Name']"><span class="text-muted">using</span> {{node['Index Name']}}</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="tags" *ngIf="viewOptions.showTags && tags.length > 0">
       <span *ngFor="#tag of tags">{{tag}}</span>
@@ -41,12 +45,18 @@
       <span> by <strong>{{plannerRowEstimateValue}}</strong>x</span>
    </div>
 
-   <table  *ngIf="showDetails" class="table prop-list">
-      <tr *ngFor="#prop of props">
-         <td width="40%">{{prop.key}}</td>
-         <td>{{prop.value}}</td>
-      <tr>
-   </table>
+   <div *ngIf="showDetails">
+      <div *ngIf="getNodeTypeDescription()" class="node-description">
+         <span class="node-type">{{node[_planService.NODE_TYPE_PROP]}} Node</span> <span [innerHtml]="getNodeTypeDescription()"></span>
+      </div>
+
+      <table class="table prop-list">
+         <tr *ngFor="#prop of props">
+            <td width="40%">{{prop.key}}</td>
+            <td>{{prop.value}}</td>
+         <tr>
+      </table>
+   </div>
 
    <div *ngIf="showQuery" class="plan-query-container">
       <button class="btn btn-close pull-right" (click)="showQuery = false">
diff --git a/app/components/plan-node/plan-node.ts b/app/components/plan-node/plan-node.ts
index 8aaab2c..fc865b8 100644
--- a/app/components/plan-node/plan-node.ts
+++ b/app/components/plan-node/plan-node.ts
@@ -1,8 +1,12 @@
 import {IPlan} from '../../interfaces/iplan';
 import {Component, OnInit} from 'angular2/core';
 import {HighlightType, EstimateDirection} from '../../enums';
+
 import {PlanService} from '../../services/plan-service';
 import {SyntaxHighlightService} from '../../services/syntax-highlight-service';
+import {HelpService} from '../../services/help-service';
+import {ColorService} from '../../services/color-service';
+
 /// <reference path="lodash.d.ts" />
 
 @Component({
@@ -10,7 +14,7 @@ import {SyntaxHighlightService} from '../../services/syntax-highlight-service';
     inputs: ['plan', 'node', 'viewOptions'],
     templateUrl: './components/plan-node/plan-node.html',
     directives: [PlanNode],
-    providers: [PlanService, SyntaxHighlightService]
+    providers: [PlanService, SyntaxHighlightService, HelpService, ColorService]
 })
 
 export class PlanNode {
@@ -44,7 +48,11 @@ export class PlanNode {
     estimateDirections = EstimateDirection;
     highlightTypes = HighlightType;
 
-    constructor(private _planService: PlanService, private _syntaxHighlightService: SyntaxHighlightService) { }
+    constructor(private _planService: PlanService,
+      private _syntaxHighlightService: SyntaxHighlightService,
+      private _helpService: HelpService,
+      private _colorService: ColorService)
+      {}
 
     ngOnInit() {
         this.currentHighlightType = this.viewOptions.highlightType;
@@ -67,9 +75,9 @@ export class PlanNode {
 
     getFormattedQuery() {
       var keyItems: Array<string> = [];
-      keyItems.push(this.node['Schema'] + '.' + this.node['Relation Name']);
-      keyItems.push(' ' + this.node['Relation Name'] + ' ');
-      keyItems.push(' ' + this.node['Alias'] + ' ');
+      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] + ' ');
       return this._syntaxHighlightService.highlightKeyItems(this.plan.formattedQuery, keyItems);
     }
 
@@ -90,7 +98,7 @@ export class PlanNode {
         }
 
         if (this.width < 1) { this.width = 1 }
-        this.backgroundColor = this.numberToColorHsl(1 - this.width / this.MAX_WIDTH);
+        this.backgroundColor = this._colorService.numberToColorHsl(1 - this.width / this.MAX_WIDTH);
     }
 
     calculateDuration() {
@@ -112,7 +120,7 @@ export class PlanNode {
     // create an array of node propeties so that they can be displayed in the view
     calculateProps() {
         this.props = _.chain(this.node)
-            .omit('Plans')
+            .omit(this._planService.PLANS_PROP)
             .map((value, key) => {
                 return { key: key, value: value };
             })
@@ -135,52 +143,7 @@ export class PlanNode {
         }
     }
 
-    /**
-     * http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
-     *
-     * Converts an HSL color value to RGB. Conversion formula
-     * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
-     * Assumes h, s, and l are contained in the set [0, 1] and
-     * returns r, g, and b in the set [0, 255].
-     *
-     * @param   Number  h       The hue
-     * @param   Number  s       The saturation
-     * @param   Number  l       The lightness
-     * @return  Array           The RGB representation
-     */
-    hslToRgb(h, s, l) {
-        var r, g, b;
-
-        if (s == 0) {
-            r = g = b = l; // achromatic
-        } else {
-            function hue2rgb(p, q, t) {
-                if (t < 0) t += 1;
-                if (t > 1) t -= 1;
-                if (t < 1 / 6) return p + (q - p) * 6 * t;
-                if (t < 1 / 2) return q;
-                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-                return p;
-            }
-
-            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-            var p = 2 * l - q;
-            r = hue2rgb(p, q, h + 1 / 3);
-            g = hue2rgb(p, q, h);
-            b = hue2rgb(p, q, h - 1 / 3);
-        }
-
-        return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)];
-    }
-
-    // convert a number to a color using hsl
-    numberToColorHsl(i) {
-        // as the function expects a value between 0 and 1, and red = 0° and green = 120°
-        // we convert the input to the appropriate hue value
-        var hue = i * 100 * 1.2 / 360;
-        // we convert hsl to rgb (saturation 100%, lightness 50%)
-        var rgb = this.hslToRgb(hue, .9, .4);
-        // we format to css value and return
-        return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
-    }
+    getNodeTypeDescription() {
+      return this._helpService.getNodeTypeDescription(this.node[this._planService.NODE_TYPE_PROP]);
+   }
 }
-- 
cgit v1.2.3