POC for detailed gallery view

pdb-js/src/app/gallery-view/gallery-item-view.component.html

@@ -1,14 +1,44 @@
-<div class="gallery-item">
-  <div class="gallery-item"> 
-  <div (click)="openImage()"><img src="{{data.thumbnailUrl}}" class="clickable"></div>
+
+<div [ngClass]="{'gallery-item' : !showDetails, 'gallery-item-wide': showDetails}"> 
+  <div (click)="openImage()" class="gallery-item-img"><img src="{{data.thumbnailUrl}}" class="clickable"></div>
   
-  <div class="fieldValue">{{data.splitByValue}}</div>
-  <div class="fieldStatsValue">Values: 
-    <span *ngIf="data.stats.plottedValues != data.stats.values" title="plotted values, some values might be missing due to y-axis range limits">{{data.stats.plottedValues}}/</span>
-    <span title="total number of values in the plot">{{data.stats.values}}</span>
+  <div class="gallery-item-global-stats">
+    <div class="fieldValue">{{data.splitByValue}}</div>
+    <div class="fieldStatsValue">Values: 
+      <span *ngIf="data.stats.plottedValues != data.stats.values" title="plotted values, some values might be missing due to y-axis range limits">{{data.stats.plottedValues}}/</span>
+      <span title="total number of values in the plot">{{data.stats.values}}</span>
+    </div>
+    <div class="fieldStatsMaxValue">Max value: <span class="time">{{ formatMs(data.stats.maxValue) }}</span></div> 
+    <div class="fieldStatsAverage">Average: <span class="time">{{ formatMs(data.stats.average) }}</span></div>
   </div>
-  <div class="fieldStatsMaxValue">Max value: <span class="time">{{ formatMs(data.stats.maxValue) }}</span></div> 
-  <div class="fieldStatsAverage">Average: <span class="time">{{ formatMs(data.stats.average) }}</span></div>
+  <table *ngIf="showDetails" class="gallery-item-details">
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Values</th>
+      <th>Avg</th>
+    </tr>
+    <tr *ngFor="let stats of data.stats.dataSeriesStats">
+      <td>{{ stats.name }}</td>
+      <td><div class="{{ pointTypeClass(stats.dashTypeAndColor) }}" title="{{ stats.name }}"></div></td>
+      <td>{{ stats.values }}</td>
+      <td>{{ formatMs(stats.average) }}</td>
+    </tr>
+  </table>
+  <table *ngIf="showDetails" class="gallery-item-details-matrix">
+    <tr>
+      <th></th>
+      <td *ngFor="let statsCol of data.stats.dataSeriesStats">
+        <div class="{{ pointTypeClass(statsCol.dashTypeAndColor) }}" title="{{ statsCol.name }}"></div>
+      </td>
+    </tr>
+    <tr *ngFor="let statsRow of data.stats.dataSeriesStats">
+      <td><div class="{{ pointTypeClass(statsRow.dashTypeAndColor) }}" title="{{ statsRow.name }}"></div></td>
+      <td *ngFor="let statsCol of data.stats.dataSeriesStats">
+        {{ toPercent(statsRow.average / statsCol.average)  }}
+      </td>
+    </tr>
+  </table>
   <div
     *ngIf="showImage"
     class="gallery-item-big-image-container"
@@ -18,6 +48,7 @@
         class="gallery-item-big-image-close clickable"
         (click)="closeImage()"
         title="Close"
-      ><img src="assets/img/close.svg" class="icon-small" /></div>
+      ><img src="assets/img/close.svg" class="icon-small" />
+    </div>
   </div>
 </div>

pdb-js/src/app/gallery-view/gallery-item-view.component.scss

@@ -5,6 +5,26 @@
   box-shadow: 5px 5px 10px 0px #e0e0e0;
 }
 
+.gallery-item-wide {
+  display: grid;
+  grid: "img details" 200px
+  "stats details" auto/311px auto;
+  width:100%;
+  background: white;
+  box-shadow: 5px 5px 10px 0px #e0e0e0;
+}
+
+.gallery-item-wide .gallery-item-img{
+  grid-area: img;
+}
+.gallery-item-wide .gallery-item-global-stats {
+  grid-area: stats;
+}
+.gallery-item-wide .gallery-item-details{
+  grid-area: details;
+}
+
+
 .gallery-item a {
   align-self: center;
 }
@@ -22,4 +42,125 @@
   position: absolute;
   top: 0;
   right: 0;
-}
+}
+
+.gallery-item-plotType {
+  background-image: url(http://localhost:4200/assets/img/pointTypes.png);
+  width: 9px;
+  height: 7px;
+  transform: scale(2);
+}
+.gallery-item-plotType_0_0051c2 {background-position:    0px 0px;}
+.gallery-item-plotType_1_0051c2 {background-position:  -10px 0px;}
+.gallery-item-plotType_2_0051c2 {background-position:  -20px 0px;}
+.gallery-item-plotType_3_0051c2 {background-position:  -30px 0px;}
+.gallery-item-plotType_4_0051c2 {background-position:  -40px 0px;}
+.gallery-item-plotType_5_0051c2 {background-position:  -50px 0px;}
+.gallery-item-plotType_6_0051c2 {background-position:  -60px 0px;}
+.gallery-item-plotType_7_0051c2 {background-position:  -70px 0px;}
+.gallery-item-plotType_8_0051c2 {background-position:  -80px 0px;}
+.gallery-item-plotType_9_0051c2 {background-position:  -90px 0px;}
+.gallery-item-plotType_10_0051c2 {background-position:-100px 0px;}
+.gallery-item-plotType_11_0051c2 {background-position:-110px 0px;}
+.gallery-item-plotType_12_0051c2 {background-position:-120px 0px;}
+
+
+.gallery-item-plotType_0_bf8300 {background-position:    0px -8px;}
+.gallery-item-plotType_1_bf8300 {background-position:  -10px -8px;}
+.gallery-item-plotType_2_bf8300 {background-position:  -20px -8px;}
+.gallery-item-plotType_3_bf8300 {background-position:  -30px -8px;}
+.gallery-item-plotType_4_bf8300 {background-position:  -40px -8px;}
+.gallery-item-plotType_5_bf8300 {background-position:  -50px -8px;}
+.gallery-item-plotType_6_bf8300 {background-position:  -60px -8px;}
+.gallery-item-plotType_7_bf8300 {background-position:  -70px -8px;}
+.gallery-item-plotType_8_bf8300 {background-position:  -80px -8px;}
+.gallery-item-plotType_9_bf8300 {background-position:  -90px -8px;}
+.gallery-item-plotType_10_bf8300 {background-position:-100px -8px;}
+.gallery-item-plotType_11_bf8300 {background-position:-110px -8px;}
+.gallery-item-plotType_12_bf8300 {background-position:-120px -8px;}
+
+
+
+.gallery-item-plotType_0_9400d3 {background-position:    0px -16px;}
+.gallery-item-plotType_1_9400d3 {background-position:  -10px -16px;}
+.gallery-item-plotType_2_9400d3 {background-position:  -20px -16px;}
+.gallery-item-plotType_3_9400d3 {background-position:  -30px -16px;}
+.gallery-item-plotType_4_9400d3 {background-position:  -40px -16px;}
+.gallery-item-plotType_5_9400d3 {background-position:  -50px -16px;}
+.gallery-item-plotType_6_9400d3 {background-position:  -60px -16px;}
+.gallery-item-plotType_7_9400d3 {background-position:  -70px -16px;}
+.gallery-item-plotType_8_9400d3 {background-position:  -80px -16px;}
+.gallery-item-plotType_9_9400d3 {background-position:  -90px -16px;}
+.gallery-item-plotType_10_9400d3 {background-position:-100px -16px;}
+.gallery-item-plotType_11_9400d3 {background-position:-110px -16px;}
+.gallery-item-plotType_12_9400d3 {background-position:-120px -16px;}
+
+.gallery-item-plotType_0_00c254 {background-position:    0px -24px;}
+.gallery-item-plotType_1_00c254 {background-position:  -10px -24px;}
+.gallery-item-plotType_2_00c254 {background-position:  -20px -24px;}
+.gallery-item-plotType_3_00c254 {background-position:  -30px -24px;}
+.gallery-item-plotType_4_00c254 {background-position:  -40px -24px;}
+.gallery-item-plotType_5_00c254 {background-position:  -50px -24px;}
+.gallery-item-plotType_6_00c254 {background-position:  -60px -24px;}
+.gallery-item-plotType_7_00c254 {background-position:  -70px -24px;}
+.gallery-item-plotType_8_00c254 {background-position:  -80px -24px;}
+.gallery-item-plotType_9_00c254 {background-position:  -90px -24px;}
+.gallery-item-plotType_10_00c254 {background-position:-100px -24px;}
+.gallery-item-plotType_11_00c254 {background-position:-110px -24px;}
+.gallery-item-plotType_12_00c254 {background-position:-120px -24px;}
+
+.gallery-item-plotType_0_e6e600 {background-position:    0px -32px;}
+.gallery-item-plotType_1_e6e600 {background-position:  -10px -32px;}
+.gallery-item-plotType_2_e6e600 {background-position:  -20px -32px;}
+.gallery-item-plotType_3_e6e600 {background-position:  -30px -32px;}
+.gallery-item-plotType_4_e6e600 {background-position:  -40px -32px;}
+.gallery-item-plotType_5_e6e600 {background-position:  -50px -32px;}
+.gallery-item-plotType_6_e6e600 {background-position:  -60px -32px;}
+.gallery-item-plotType_7_e6e600 {background-position:  -70px -32px;}
+.gallery-item-plotType_8_e6e600 {background-position:  -80px -32px;}
+.gallery-item-plotType_9_e6e600 {background-position:  -90px -32px;}
+.gallery-item-plotType_10_e6e600 {background-position:-100px -32px;}
+.gallery-item-plotType_11_e6e600 {background-position:-110px -32px;}
+.gallery-item-plotType_12_e6e600 {background-position:-120px -32px;}
+
+.gallery-item-plotType_0_e51e10 {background-position:    0px -40px;}
+.gallery-item-plotType_1_e51e10 {background-position:  -10px -40px;}
+.gallery-item-plotType_2_e51e10 {background-position:  -20px -40px;}
+.gallery-item-plotType_3_e51e10 {background-position:  -30px -40px;}
+.gallery-item-plotType_4_e51e10 {background-position:  -40px -40px;}
+.gallery-item-plotType_5_e51e10 {background-position:  -50px -40px;}
+.gallery-item-plotType_6_e51e10 {background-position:  -60px -40px;}
+.gallery-item-plotType_7_e51e10 {background-position:  -70px -40px;}
+.gallery-item-plotType_8_e51e10 {background-position:  -80px -40px;}
+.gallery-item-plotType_9_e51e10 {background-position:  -90px -40px;}
+.gallery-item-plotType_10_e51e10 {background-position:-100px -40px;}
+.gallery-item-plotType_11_e51e10 {background-position:-110px -40px;}
+.gallery-item-plotType_12_e51e10 {background-position:-120px -40px;}
+
+.gallery-item-plotType_0_57a1c2 {background-position:    0px -48px;}
+.gallery-item-plotType_1_57a1c2 {background-position:  -10px -48px;}
+.gallery-item-plotType_2_57a1c2 {background-position:  -20px -48px;}
+.gallery-item-plotType_3_57a1c2 {background-position:  -30px -48px;}
+.gallery-item-plotType_4_57a1c2 {background-position:  -40px -48px;}
+.gallery-item-plotType_5_57a1c2 {background-position:  -50px -48px;}
+.gallery-item-plotType_6_57a1c2 {background-position:  -60px -48px;}
+.gallery-item-plotType_7_57a1c2 {background-position:  -70px -48px;}
+.gallery-item-plotType_8_57a1c2 {background-position:  -80px -48px;}
+.gallery-item-plotType_9_57a1c2 {background-position:  -90px -48px;}
+.gallery-item-plotType_10_57a1c2 {background-position:-100px -48px;}
+.gallery-item-plotType_11_57a1c2 {background-position:-110px -48px;}
+.gallery-item-plotType_12_57a1c2 {background-position:-120px -48px;}
+
+.gallery-item-plotType_0_bd36c2 {background-position:    0px -56px;}
+.gallery-item-plotType_1_bd36c2 {background-position:  -10px -56px;}
+.gallery-item-plotType_2_bd36c2 {background-position:  -20px -56px;}
+.gallery-item-plotType_3_bd36c2 {background-position:  -30px -56px;}
+.gallery-item-plotType_4_bd36c2 {background-position:  -40px -56px;}
+.gallery-item-plotType_5_bd36c2 {background-position:  -50px -56px;}
+.gallery-item-plotType_6_bd36c2 {background-position:  -60px -56px;}
+.gallery-item-plotType_7_bd36c2 {background-position:  -70px -56px;}
+.gallery-item-plotType_8_bd36c2 {background-position:  -80px -56px;}
+.gallery-item-plotType_9_bd36c2 {background-position:  -90px -56px;}
+.gallery-item-plotType_10_bd36c2 {background-position:-100px -56px;}
+.gallery-item-plotType_11_bd36c2 {background-position:-110px -56px;}
+.gallery-item-plotType_12_bd36c2 {background-position:-120px -56px;}

pdb-js/src/app/gallery-view/gallery-view.component.html

@@ -19,6 +19,7 @@
     
     <pdb-gallery-filter-view (valueChanged)="filterChanged($event)"></pdb-gallery-filter-view>
     
+    <mat-checkbox [(ngModel)]="showDetails">Show Details</mat-checkbox>
   </div>
   <div
     *ngIf="show && progress != 100 && totalNumberImages > 0" 
@@ -36,9 +37,9 @@
     class="card-grid-container">
     <div
       id="gallery" 
-      class="card-grid-300">
+      [ngClass]="{'card-grid-300' : !showDetails, 'card-grid-100p': showDetails}">
       <pdb-gallery-item-view
-        *ngFor="let galleryItem of filteredSortedGalleryItems()" [data]="galleryItem">
+        *ngFor="let galleryItem of filteredSortedGalleryItems()" [data]="galleryItem" [showDetails]="showDetails">
       </pdb-gallery-item-view>
     </div>
 </div>

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

@@ -18,6 +18,13 @@
   padding: 10px;
 }
 
+.card-grid-100p {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 1fr);
+  grid-gap: 10px;
+  padding: 10px;
+}
+
 #gallery-progress mat-progress-bar {
   width: 20em;
   display: inline-block;

pdb-js/src/app/gallery-view/gallery-view.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { PlotService, PlotRequest, PlotResponse, PlotResponseStats  } from '../plot.service';
+import { PlotService, PlotRequest, PlotResponse, PlotResponseStats, DashTypeAndColor  } from '../plot.service';
 
 export class GalleryFilterData {
   filterBy :string;
@@ -110,6 +110,8 @@ export class GalleryViewComponent implements OnInit {
   totalNumberImages = 0;
   
   sequenceId = 0;
+
+  showDetails = false;
   
   @ViewChild(GalleryFilterView)
   filter : GalleryFilterView;
@@ -304,6 +306,9 @@ export class GalleryViewComponent implements OnInit {
 export class GalleryItemView {
   @Input()
   data: GalleryItem;
+
+  @Input()
+  showDetails: boolean = false;
   
   showImage: boolean= false;
   
@@ -330,7 +335,15 @@ export class GalleryItemView {
     
     return result;
   }
+
+  pointTypeClass(typeAndColor: DashTypeAndColor): string {
+    return "gallery-item-plotType gallery-item-plotType_"+typeAndColor.pointType+"_"+typeAndColor.color.toLocaleLowerCase();
+  }
   
+  toPercent(percentage: number) : string{
+    return (Math.round(percentage * 10000) / 100)+"%";
+  }
+
   openImage() {
     this.showImage=true;
   }

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

@@ -231,10 +231,17 @@ export class PlotResponseStats {
 }
 
 export class DataSeriesStats {
+  name: string;
   values : number;
   maxValue : number;
   average : number;
   plottedValues : number;
+  dashTypeAndColor: DashTypeAndColor;
+}
+
+export class DashTypeAndColor {
+  color: string;
+  pointType: number;
 }
 
 export class FilterDefaults {