add percentile information if available

pdb-js/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatRadioModule} from '@angular/material/radio';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import { YAxisDefinitionComponent } from './y-axis-definition/y-axis-definition.component';
@@ -56,6 +57,7 @@ import { ImageToggleComponent } from './image-toggle/image-toggle.component';
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,
+    MatRadioModule,
     MatProgressBarModule,
     MatProgressSpinnerModule,
     MatSelectModule,

pdb-js/src/app/plot-details/plot-details.component.html

@@ -1,28 +1,59 @@
+<mat-radio-group [(ngModel)]="valueFormat" aria-label="Value format">
+  <mat-radio-button value="time">Time</mat-radio-button>
+  <mat-radio-button value="numbers">Numbers</mat-radio-button>
+</mat-radio-group>
+
 <table  class="gallery-item-details">
   <tr>
     <th>Name</th>
     <th>Type</th>
     <th>Values</th>
     <th>Avg</th>
+    <td *ngFor="let label of percentilesToPlot.keys()">{{label}}</td>
+    <td>Max</td>
   </tr>
   <tr *ngFor="let stat of stats.dataSeriesStats">
     <td>{{ stat.name }}</td>
     <td><div class="{{ pointTypeClass(stat.dashTypeAndColor) }}" title="{{ stat.name }}"></div></td>
     <td>{{ stat.values }}</td>
-    <td>{{ utils.formatMs(stat.average) }}</td>
+    <td>{{ utils.format(stat.average, valueFormat) }}</td>
+    <td *ngFor="let key of percentilesToPlot.keys()">{{utils.format(stat.percentiles[percentilesToPlot.get(key)], valueFormat)}}</td>
+    <td>{{ utils.format(stat.maxValue, valueFormat)}}</td>
   </tr>
 </table>
-<table  class="gallery-item-details-matrix">
-  <tr>
-    <th></th>
-    <th *ngFor="let statsCol of stats.dataSeriesStats">
-      <div class="{{ pointTypeClass(statsCol.dashTypeAndColor) }}" title="{{ statsCol.name }}"></div>
-    </th>
-  </tr>
-  <tr *ngFor="let statsRow of stats.dataSeriesStats">
-    <td><div class="{{ pointTypeClass(statsRow.dashTypeAndColor) }}" title="{{ statsRow.name }}"></div></td>
-    <td *ngFor="let statsCol of stats.dataSeriesStats">
-      {{ utils.toPercent(statsRow.average / statsCol.average)  }}
-    </td>
-  </tr>
-</table>
+<div *ngIf="stats.dataSeriesStats.length > 1">
+  <h2>Compare Averages</h2>
+  <table  class="gallery-item-details-matrix">
+    <tr>
+      <th></th>
+      <th *ngFor="let statsCol of stats.dataSeriesStats">
+        <div class="{{ pointTypeClass(statsCol.dashTypeAndColor) }}" title="{{ statsCol.name }}"></div>
+      </th>
+    </tr>
+    <tr *ngFor="let statsRow of stats.dataSeriesStats">
+      <td><div class="{{ pointTypeClass(statsRow.dashTypeAndColor) }}" title="{{ statsRow.name }}"></div></td>
+      <td *ngFor="let statsCol of stats.dataSeriesStats">
+        {{ utils.toPercent(statsRow.average / statsCol.average)  }}
+      </td>
+    </tr>
+  </table>
+
+  <h2>Compare Percentiles</h2>
+  <div *ngFor="let p of percentilesToPlot.keys()">
+    <h3>{{p}} percentile</h3>
+    <table  class="gallery-item-details-matrix">
+      <tr>
+        <th></th>
+        <th *ngFor="let statsCol of stats.dataSeriesStats">
+          <div class="{{ pointTypeClass(statsCol.dashTypeAndColor) }}" title="{{ statsCol.name }}"></div>
+        </th>
+      </tr>
+      <tr *ngFor="let statsRow of stats.dataSeriesStats">
+        <td><div class="{{ pointTypeClass(statsRow.dashTypeAndColor) }}" title="{{ statsRow.name }}"></div></td>
+        <td *ngFor="let statsCol of stats.dataSeriesStats">
+          {{ utils.toPercent(statsRow.percentiles[percentilesToPlot.get(p)] / statsCol.percentiles[percentilesToPlot.get(p)])  }}
+        </td>
+      </tr>
+    </table>
+  </div>
+</div>

pdb-js/src/app/plot-details/plot-details.component.scss

@@ -27,4 +27,9 @@
 .plot-details-plotType_e6e600 {background-position-y: -32px;}
 .plot-details-plotType_e51e10 {background-position-y: -40px;}
 .plot-details-plotType_57a1c2 {background-position-y: -48px;}
-.plot-details-plotType_bd36c2 {background-position-y: -56px;}
+.plot-details-plotType_bd36c2 {background-position-y: -56px;}
+
+
+.gallery-item-details td {
+  white-space: pre;
+}

pdb-js/src/app/plot-details/plot-details.component.ts

@@ -12,10 +12,38 @@ export class PlotDetailsComponent {
   @Input()
   stats: PlotResponseStats;
 
+  hasPercentiles = false;
+  
+  valueFormat = "time";
+
+  percentilesToPlot : Map<string,string> = new Map();
+
   constructor(public utils: UtilService){
 
   }
 
+  ngOnInit() {
+    this.hasPercentiles = false;
+    this.percentilesToPlot.clear();
+    for (let i = 0; i < this.stats.dataSeriesStats.length; i++)
+    {
+      const stat = this.stats.dataSeriesStats[i];
+      if (stat.percentiles.hasOwnProperty("50.000"))
+      {
+        this.hasPercentiles = true;
+        this.percentilesToPlot.set('median','50.000');
+        this.percentilesToPlot.set('75th','75.000');
+        this.percentilesToPlot.set('95th','95.000');
+        this.percentilesToPlot.set('99th','99.000');
+        break;
+      }
+    }
+  }
+
+  percentile(value: number): string {
+    return this.utils.format(value, this.valueFormat);
+  }
+
   pointTypeClass(typeAndColor: DashTypeAndColor): string {
     return "plot-details-plotType"
       +" plot-details-plotType_"+typeAndColor.pointType

pdb-js/src/app/plot-view/plot-view.component.scss

@@ -19,4 +19,5 @@ img {
   bottom: 5px;
   background-color: white;
   box-shadow: 5px 5px 10px 0px #e0e0e0;
+  overflow: auto;
 }

pdb-js/src/app/plot.service.ts

@@ -249,6 +249,7 @@ export class DataSeriesStats {
   average : number;
   plottedValues : number;
   dashTypeAndColor: DashTypeAndColor;
+  percentiles: Map<string, number>
 }
 
 export class DashTypeAndColor {

pdb-js/src/app/utils.service.ts

@@ -9,6 +9,14 @@ export class UtilService {
     constructor() {
     }
 
+    format(value: number, type: string) {
+        if (type == "time"){
+            return this.formatMs(value);
+        } else {
+            return ""+value;
+        }
+    }
+
     formatMs(valueInMs):string {
         const ms = Math.floor(valueInMs % 1000);
         const s = Math.floor((valueInMs / 1000) % 60);

pdb-js/src/app/visualization-page/visualization-page.component.scss

@@ -48,6 +48,7 @@
 
 #filters {
   grid-area: filters;
+  overflow: auto;
 }
 #filterpanel {
   background-color: #f8f8f8;/*#fafafa;*/