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 [ngClass]="{'gallery-item' : !showDetails, 'gallery-item-wide': showDetails}"> 
-  <div (click)="openImage()"><img src="{{data.thumbnailUrl}}" class="clickable"></div>
+  <div (click)="openImage()" class="gallery-item-img"><img src="{{data.thumbnailUrl}}" class="clickable"></div>
   
-  <div class="fieldValue">{{data.splitByValue}}</div>
+  <div class="gallery-item-global-stats">
-  <div class="fieldStatsValue">Values: 
+    <div class="fieldValue">{{data.splitByValue}}</div>
-    <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>
+    <div class="fieldStatsValue">Values: 
-    <span title="total number of values in the plot">{{data.stats.values}}</span>
+      <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> 
+  <table *ngIf="showDetails" class="gallery-item-details">
-  <div class="fieldStatsAverage">Average: <span class="time">{{ formatMs(data.stats.average) }}</span></div>
+    <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 {

pdb-plotting/src/main/java/org/lucares/recommind/logs/DataSeries.java

@@ -98,7 +98,8 @@ public interface DataSeries {
             final GnuplotColor color = GnuplotColorPalettes.DEFAULT.get(i % numColors);
 
             final DashTypes dashType = DashTypes.get(i / numColors);
-            final LineStyle lineStyle = new LineStyle(color, dashType);
+            final int pointType = PointTypes.getPointType(i);
+            final LineStyle lineStyle = new LineStyle(color, dashType, pointType);
             dataSerie.setStyle(lineStyle);
             i++;
         }

pdb-plotting/src/main/java/org/lucares/recommind/logs/LineStyle.java

@@ -4,16 +4,23 @@ public class LineStyle {
 
     private final GnuplotColor color;
     private final DashTypes dashType;
+    private final int pointType;
 
-    public LineStyle(final GnuplotColor color, final DashTypes dashType) {
+    public LineStyle(final GnuplotColor color, final DashTypes dashType, final int pointType) {
         this.color = color;
         this.dashType = dashType;
+        this.pointType = pointType;
     }
 
     private String asGnuplotLineStyle(final String colorHex) {
-        return String.format("lt rgb \"#%s\" dt %s ", //
+        // TODO revert
-                colorHex, //
+//        return String.format("lt rgb \"#%s\" dt %s ", //
-                dashType.toGnuplotDashType()//
+//                colorHex, //
+//                dashType.toGnuplotDashType()//
+//        );
+
+        return String.format("lt rgb \"#%s\" ", //
+                colorHex//
         );
     }
 
@@ -29,6 +36,18 @@ public class LineStyle {
         return asGnuplotLineStyle("77" + color.getDark());
     }
 
+    public GnuplotColor getColor() {
+        return color;
+    }
+
+    public DashTypes getDashType() {
+        return dashType;
+    }
+
+    public int getPointType() {
+        return pointType;
+    }
+
     @Override
     public String toString() {
         return asGnuplotLineStyle();

pdb-plotting/src/main/java/org/lucares/recommind/logs/PointTypes.java

@@ -0,0 +1,9 @@
+package org.lucares.recommind.logs;
+
+public class PointTypes {
+
+    static int getPointType(final int i) {
+        return i % 13;// gnuplot has 13 point types
+    }
+
+}

pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java

@@ -54,10 +54,6 @@ import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.bind.annotation.ResponseStatus;
 import org.springframework.web.multipart.MultipartFile;
 
-import com.fasterxml.jackson.core.JsonParseException;
-import com.fasterxml.jackson.databind.JsonMappingException;
-import com.fasterxml.jackson.databind.ObjectMapper;
-
 @Controller
 @EnableAutoConfiguration
 @RequestMapping(path = "/api")
@@ -91,22 +87,6 @@ public class PdbController implements HardcodedValues, PropertyKeys {
         this.csvUploadHandler = csvUploadHandler;
     }
 
-    @RequestMapping(path = "/plots", //
-            method = RequestMethod.GET, //
-            consumes = MediaType.APPLICATION_JSON_VALUE, //
-            produces = MediaType.APPLICATION_JSON_VALUE //
-    )
-    @ResponseBody
-    ResponseEntity<PlotResponse> createPlotGet(@RequestParam(name = "request") final String request)
-            throws InternalPlottingException, InterruptedException, JsonParseException, JsonMappingException,
-            IOException {
-
-        final ObjectMapper objectMapper = new ObjectMapper();
-        final PlotRequest plotRequest = objectMapper.readValue(request, PlotRequest.class);
-
-        return createPlot(plotRequest);
-    }
-
     @RequestMapping(path = "/plots", //
             method = RequestMethod.POST, //
             consumes = MediaType.APPLICATION_JSON_VALUE, //

pdb-ui/src/main/java/org/lucares/pdbui/domain/DataSeriesStats.java

@@ -6,8 +6,21 @@ public class DataSeriesStats {
     private final int values;
     private final long maxValue;
     private final double average;
+    private final String name;
+    private final StyleAndColor dashTypeAndColor;
 
     public DataSeriesStats(final int values, final long maxValue, final double average) {
+        this.name = "<noName>";
+        this.dashTypeAndColor = new StyleAndColor("000", 0);
+        this.values = values;
+        this.maxValue = maxValue;
+        this.average = average;
+    }
+
+    public DataSeriesStats(final String name, final StyleAndColor dashTypeAndColor, final int values,
+            final long maxValue, final double average) {
+        this.name = name;
+        this.dashTypeAndColor = dashTypeAndColor;
         this.values = values;
         this.maxValue = maxValue;
         this.average = average;
@@ -22,6 +35,10 @@ public class DataSeriesStats {
         return values;
     }
 
+    public StyleAndColor getDashTypeAndColor() {
+        return dashTypeAndColor;
+    }
+
     public long getMaxValue() {
         return maxValue;
     }
@@ -30,9 +47,14 @@ public class DataSeriesStats {
         return average;
     }
 
+    public String getName() {
+        return name;
+    }
+
     @Override
     public String toString() {
-        return "[values=" + values + ", maxValue=" + maxValue + ", average=" + average + "]";
+        return "[name=" + name + ", dashTypeAndColor=" + dashTypeAndColor + ", values=" + values + ", maxValue="
+                + maxValue + ", average=" + average + "]";
     }
 
     public static double average(final Collection<DataSeriesStats> stats) {

pdb-ui/src/main/java/org/lucares/pdbui/domain/PlotResponseStats.java

@@ -75,8 +75,11 @@ public class PlotResponseStats {
             values += dataSerie.getValues();
             maxValue = Math.max(maxValue, dataSerie.getMaxValue());
 
-            dataSeriesStats
+            final StyleAndColor lineStyle = new StyleAndColor(dataSerie.getStyle().getColor().getColor(),
-                    .add(new DataSeriesStats(dataSerie.getValues(), dataSerie.getMaxValue(), dataSerie.getAverage()));
+                    dataSerie.getStyle().getPointType());
+
+            dataSeriesStats.add(new DataSeriesStats(dataSerie.getTitle(), lineStyle, dataSerie.getValues(),
+                    dataSerie.getMaxValue(), dataSerie.getAverage()));
         }
 
         final double average = Math.round(DataSeriesStats.average(dataSeriesStats));

pdb-ui/src/main/java/org/lucares/pdbui/domain/StyleAndColor.java

@@ -0,0 +1,36 @@
+package org.lucares.pdbui.domain;
+
+public class StyleAndColor {
+    private String color;
+
+    private final int pointType;
+
+    public StyleAndColor(final String color, final int pointType) {
+        super();
+        this.color = color;
+        this.pointType = pointType;
+    }
+
+    public String getColor() {
+        return color;
+    }
+
+    public void setColor(final String color) {
+        this.color = color;
+    }
+
+    public int getPointType() {
+        return pointType;
+    }
+
+    @Override
+    public String toString() {
+        final StringBuilder builder = new StringBuilder();
+        builder.append("LineStyleAndColor [color=");
+        builder.append(color);
+        builder.append(", pointType=");
+        builder.append(pointType);
+        builder.append("]");
+        return builder.toString();
+    }
+}