aboutsummaryrefslogtreecommitdiff
path: root/app/components/plan-view/plan-view.html
blob: c63c4d19ac9ba8894e1f1baea72ecc6aa8d2736a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div class="menu" [class.menu-hidden]="hideMenu">
   <header>
      <i class="fa fa-cogs menu-toggle" (click)="hideMenu = !hideMenu"></i>
      <h3>display options</h3>
   </header>

   <ul>
      <li>
         <input id="showPlanStats" type="checkbox" [(ngModel)]="viewOptions.showPlanStats">
         <label class="clickable" for="showPlanStats"> show plan stats</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>graph metric: </label>
         <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>
      </li>
   </ul>
</div>

<div class="page page-stretch">
   <h2>{{plan.name}}</h2>
   <div *ngIf="viewOptions.showPlanStats" class="plan-stats">
      <div>
         <span class="stat-value">{{executionTime}}</span>
         <span class="stat-label">execution time ({{executionTimeUnit}})</span>
      </div>
      <div *ngIf="plan.planStats.planningTime">
         <span class="stat-value">{{plan.planStats.planningTime | number:'.0-2'}}</span>
         <span class="stat-label">planning time (ms)</span>
      </div>
      <div *ngIf="plan.planStats.maxDuration">
         <span class="stat-value">{{plan.planStats.maxDuration | number:'.0-2'}}</span>
         <span class="stat-label">slowest node (ms)</span>
      </div>
      <div *ngIf="plan.planStats.maxRows">
         <span class="stat-value">{{plan.planStats.maxRows | number:'.0-2'}}</span>
         <span class="stat-label">largest node (rows)</span>
      </div>
      <div *ngIf="plan.planStats.maxCost">
         <span class="stat-value">{{plan.planStats.maxCost | number:'.0-2'}}</span>
         <span class="stat-label">costliest node</span>
      </div>
   </div>

   <div class="plan">
      <ul>
         <li>
            <plan-node [plan]="plan" [node]="rootContainer.Plan" [viewOptions]="viewOptions"></plan-node>
         </li>
      </ul>
   </div>
</div>