diff options
| author | Alex Tatiyants <atatiyan@gmail.com> | 2016-01-07 08:52:03 -0800 |
|---|---|---|
| committer | Alex Tatiyants <atatiyan@gmail.com> | 2016-01-07 08:52:03 -0800 |
| commit | b07f0a403237e46fe0176a2e6a30bc1636322a7b (patch) | |
| tree | 491091252489f2a82fa3daa4d7ac6501525d3e40 /app/components | |
| parent | 4f14eab969c33e506f6a5692392fb8fcf4e83df1 (diff) | |
bar display tweaks
Diffstat (limited to 'app/components')
| -rw-r--r-- | app/components/plan-list/plan-list.html | 2 | ||||
| -rw-r--r-- | app/components/plan-node/plan-node.html | 4 | ||||
| -rw-r--r-- | app/components/plan-node/plan-node.ts | 39 |
3 files changed, 32 insertions, 13 deletions
diff --git a/app/components/plan-list/plan-list.html b/app/components/plan-list/plan-list.html index 9a75ed9..28c95af 100644 --- a/app/components/plan-list/plan-list.html +++ b/app/components/plan-list/plan-list.html @@ -5,7 +5,7 @@ <table class="table"> <tr *ngFor="#plan of plans"> - <td><a [routerLink]="['/PlanView', {id: plan.id}]">{{plan.name}}</a></td> + <td width="30%"><a [routerLink]="['/PlanView', {id: plan.id}]">{{plan.name}}</a></td> <td>created on {{plan.createdOn | momentDate }}</td> <td class="align-right"><button class="btn btn-danger" (click)="requestDelete()"> <i class="fa fa-trash"></i>delete</button> diff --git a/app/components/plan-node/plan-node.html b/app/components/plan-node/plan-node.html index 55809ca..1b53c9c 100644 --- a/app/components/plan-node/plan-node.html +++ b/app/components/plan-node/plan-node.html @@ -38,8 +38,8 @@ </div> <div *ngIf="currentHighlightType !== highlightTypes.NONE"> - <div class="node-bar-container" [style.width]="(MAX_WIDTH)+'px'"> - <span class="node-bar" [style.width]="width+'px'" [style.backgroundColor]="backgroundColor"></span> + <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="text-muted">{{viewOptions.highlightType}}:</span> {{highlightValue | number:'.0-2'}} diff --git a/app/components/plan-node/plan-node.ts b/app/components/plan-node/plan-node.ts index 8e4e261..e78b5a2 100644 --- a/app/components/plan-node/plan-node.ts +++ b/app/components/plan-node/plan-node.ts @@ -19,8 +19,10 @@ import {ColorService} from '../../services/color-service'; export class PlanNode { // consts - FULL_WIDTH: number = 220; + NORMAL_WIDTH: number = 220; COMPACT_WIDTH: number = 140; + EXPANDED_WIDTH: number = 400; + MIN_ESTIMATE_MISS: number = 100; COSTLY_TAG: string = 'costliest'; SLOW_TAG: string = 'slowest'; @@ -32,19 +34,26 @@ export class PlanNode { node: any; viewOptions: any; + // UI flags + showDetails: boolean; + // calculated properties duration: string; durationUnit: string; executionTimePercent: number; backgroundColor: string; highlightValue: number; - width: number; + barContainerWidth: number; + barWidth: number; props: Array<any>; tags: Array<string>; plannerRowEstimateValue: number; plannerRowEstimateDirection: EstimateDirection; - currentHighlightType: string; // keep track of highlight type for change detection + + // required for custom change detection + currentHighlightType: string; currentCompactView: boolean; + currentExpandedView: boolean; // expose enum to view estimateDirections = EstimateDirection; @@ -76,6 +85,11 @@ export class PlanNode { this.currentCompactView = this.viewOptions.showCompactView; this.calculateBar(); } + + if (this.currentExpandedView !== this.showDetails) { + this.currentExpandedView = this.showDetails; + this.calculateBar(); + } } getFormattedQuery() { @@ -108,28 +122,33 @@ export class PlanNode { } calculateBar() { - var nodeWidth = this.viewOptions.showCompactView ? this.COMPACT_WIDTH : this.FULL_WIDTH; + this.barContainerWidth = this.viewOptions.showCompactView ? this.COMPACT_WIDTH : this.NORMAL_WIDTH; + + // expanded view width trumps others + if (this.currentExpandedView) { + this.barContainerWidth = this.EXPANDED_WIDTH; + } switch (this.currentHighlightType) { case HighlightType.DURATION: this.highlightValue = (this.node[this._planService.ACTUAL_DURATION_PROP]); - this.width = Math.round((this.highlightValue / this.plan.planStats.maxDuration) * nodeWidth); + this.barWidth = Math.round((this.highlightValue / this.plan.planStats.maxDuration) * this.barContainerWidth); break; case HighlightType.ROWS: this.highlightValue = (this.node[this._planService.ACTUAL_ROWS_PROP]); - this.width = Math.round((this.highlightValue / this.plan.planStats.maxRows) * nodeWidth); + this.barWidth = Math.round((this.highlightValue / this.plan.planStats.maxRows) * this.barContainerWidth); break; case HighlightType.COST: this.highlightValue = (this.node[this._planService.ACTUAL_COST_PROP]); - this.width = Math.round((this.highlightValue / this.plan.planStats.maxCost) * nodeWidth); + this.barWidth = Math.round((this.highlightValue / this.plan.planStats.maxCost) * this.barContainerWidth); break; } - if (this.width < 1) { - this.width = 1; + if (this.barWidth < 1) { + this.barWidth = 1; } - this.backgroundColor = this._colorService.numberToColorHsl(1 - this.width / nodeWidth); + this.backgroundColor = this._colorService.numberToColorHsl(1 - this.barWidth / this.barContainerWidth); } calculateDuration() { |