menu and node display UI tweaks

2 files changed, 20 insertions, 6 deletions

diff --git a/app/components/plan-node/plan-node.html b/app/components/plan-node/plan-node.html
index da8cc00..5ddf55c 100644
--- a/app/components/plan-node/plan-node.html
+++ b/app/components/plan-node/plan-node.html
@@ -3,8 +3,8 @@
       <h4>{{node[_planService.NODE_TYPE_PROP] | uppercase}}
       </h4>
       <span *ngIf="!viewOptions.showCompactView">
-         <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="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>
          </span>
       </span>
@@ -49,7 +49,7 @@
    <div class="planner-estimate" *ngIf="viewOptions.showPlannerEstimate">
       <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}}</strong>x</span>
+      <span> by <strong>{{plannerRowEstimateValue | number}}</strong>x</span>
    </div>
 
    <div *ngIf="showDetails">
@@ -63,6 +63,7 @@
             <td>{{prop.value}}</td>
          <tr>
       </table>
+      <div class="text-muted pad-top align-right"><em>*Pev calculated value</em></div>
    </div>
 
    <div *ngIf="showQuery" class="plan-query-container">
diff --git a/app/components/plan-view/plan-view.html b/app/components/plan-view/plan-view.html
index 6d6e5d4..0953603 100644
--- a/app/components/plan-view/plan-view.html
+++ b/app/components/plan-view/plan-view.html
@@ -27,18 +27,31 @@
 
       <li>
          <label>graph metric: </label>
-         <select [(ngModel)]="viewOptions.highlightType">
+         <div class="button-group">
+            <button [class.selected]="viewOptions.highlightType === highlightTypes.NONE" (click)="viewOptions.highlightType = highlightTypes.NONE">none</button>
+            <button [class.selected]="viewOptions.highlightType === highlightTypes.DURATION" (click)="viewOptions.highlightType = highlightTypes.DURATION">duration</button>
+            <button [class.selected]="viewOptions.highlightType === highlightTypes.ROWS" (click)="viewOptions.highlightType = highlightTypes.ROWS">rows</button>
+            <button [class.selected]="viewOptions.highlightType === highlightTypes.COST" (click)="viewOptions.highlightType = highlightTypes.COST">cost</button>
+         </div>
+         <!-- <select [(ngModel)]="viewOptions.highlightType">
             <option value="{{highlightTypes.NONE}}">{{highlightTypes.NONE}}</option>
             <option value="{{highlightTypes.DURATION}}">{{highlightTypes.DURATION}}</option>
             <option value="{{highlightTypes.ROWS}}">{{highlightTypes.ROWS}}</option>
             <option value="{{highlightTypes.COST}}">{{highlightTypes.COST}}</option>
-         </select>
+         </select> -->
       </li>
    </ul>
 </div>
 
 <div class="page page-stretch">
-   <h2>{{plan.name}}</h2>
+   <h2><span *ngIf="!editName">{{plan.name}}</span>
+      <input *ngIf="editName" class="input-box input-box-main" type="text" [(ngModel)]="plan.name">
+      <button class="btn btn-link btn-lg" (click) = "editName = !editName">
+         <i class="fa fa-pencil"></i>
+      </button>
+   </h2>
+
+
    <div *ngIf="viewOptions.showPlanStats" class="plan-stats">
       <div>
          <span class="stat-value">{{plan.planStats.executionTime | duration}}</span>