diff --git a/pdb-js/src/app/gallery-view/gallery-item-view.component.html b/pdb-js/src/app/gallery-view/gallery-item-view.component.html index ec627eb..41e113b 100644 --- a/pdb-js/src/app/gallery-view/gallery-item-view.component.html +++ b/pdb-js/src/app/gallery-view/gallery-item-view.component.html @@ -1,14 +1,44 @@ -
-
-
+ +
+
-
{{data.splitByValue}}
-
Values: - {{data.stats.plottedValues}}/ - {{data.stats.values}} +
+
{{data.splitByValue}}
+
Values: + {{data.stats.plottedValues}}/ + {{data.stats.values}} +
+
Max value: {{ formatMs(data.stats.maxValue) }}
+
Average: {{ formatMs(data.stats.average) }}
-
Max value: {{ formatMs(data.stats.maxValue) }}
-
Average: {{ formatMs(data.stats.average) }}
+ + + + + + + + + + + + + +
NameTypeValuesAvg
{{ stats.name }}
{{ stats.values }}{{ formatMs(stats.average) }}
+ + + + + + + + + +
+
+
+ {{ toPercent(statsRow.average / statsCol.average) }} +
+ > +
\ No newline at end of file diff --git a/pdb-js/src/app/gallery-view/gallery-item-view.component.scss b/pdb-js/src/app/gallery-view/gallery-item-view.component.scss index 3b07781..d616e19 100644 --- a/pdb-js/src/app/gallery-view/gallery-item-view.component.scss +++ b/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; -} \ No newline at end of file +} + +.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;} \ No newline at end of file diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.html b/pdb-js/src/app/gallery-view/gallery-view.component.html index a6f191a..a44e62d 100644 --- a/pdb-js/src/app/gallery-view/gallery-view.component.html +++ b/pdb-js/src/app/gallery-view/gallery-view.component.html @@ -19,6 +19,7 @@ + Show Details
diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.scss b/pdb-js/src/app/gallery-view/gallery-view.component.scss index 55134af..b04b703 100644 --- a/pdb-js/src/app/gallery-view/gallery-view.component.scss +++ b/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; diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.ts b/pdb-js/src/app/gallery-view/gallery-view.component.ts index 9c620fb..5ec0a4d 100644 --- a/pdb-js/src/app/gallery-view/gallery-view.component.ts +++ b/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; } diff --git a/pdb-js/src/app/plot.service.ts b/pdb-js/src/app/plot.service.ts index 6eca1de..f48b501 100644 --- a/pdb-js/src/app/plot.service.ts +++ b/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 { diff --git a/pdb-js/src/assets/img/pointTypes.png b/pdb-js/src/assets/img/pointTypes.png new file mode 100644 index 0000000..359ffac Binary files /dev/null and b/pdb-js/src/assets/img/pointTypes.png differ diff --git a/pdb-plotting/src/main/java/org/lucares/recommind/logs/DataSeries.java b/pdb-plotting/src/main/java/org/lucares/recommind/logs/DataSeries.java index 3fc9514..0c9ddb3 100644 --- a/pdb-plotting/src/main/java/org/lucares/recommind/logs/DataSeries.java +++ b/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++; } diff --git a/pdb-plotting/src/main/java/org/lucares/recommind/logs/LineStyle.java b/pdb-plotting/src/main/java/org/lucares/recommind/logs/LineStyle.java index c950dd4..0165ba8 100644 --- a/pdb-plotting/src/main/java/org/lucares/recommind/logs/LineStyle.java +++ b/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 ", // - colorHex, // - dashType.toGnuplotDashType()// + // TODO revert +// return String.format("lt rgb \"#%s\" dt %s ", // +// 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(); diff --git a/pdb-plotting/src/main/java/org/lucares/recommind/logs/PointTypes.java b/pdb-plotting/src/main/java/org/lucares/recommind/logs/PointTypes.java new file mode 100644 index 0000000..5b91d5d --- /dev/null +++ b/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 + } + +} diff --git a/pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java b/pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java index c7903ce..1348180 100644 --- a/pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java +++ b/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 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, // diff --git a/pdb-ui/src/main/java/org/lucares/pdbui/domain/DataSeriesStats.java b/pdb-ui/src/main/java/org/lucares/pdbui/domain/DataSeriesStats.java index def1afd..9f38e95 100644 --- a/pdb-ui/src/main/java/org/lucares/pdbui/domain/DataSeriesStats.java +++ b/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 = ""; + 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 stats) { diff --git a/pdb-ui/src/main/java/org/lucares/pdbui/domain/PlotResponseStats.java b/pdb-ui/src/main/java/org/lucares/pdbui/domain/PlotResponseStats.java index 0b4ce99..ee59781 100644 --- a/pdb-ui/src/main/java/org/lucares/pdbui/domain/PlotResponseStats.java +++ b/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 - .add(new DataSeriesStats(dataSerie.getValues(), dataSerie.getMaxValue(), dataSerie.getAverage())); + final StyleAndColor lineStyle = new StyleAndColor(dataSerie.getStyle().getColor().getColor(), + dataSerie.getStyle().getPointType()); + + dataSeriesStats.add(new DataSeriesStats(dataSerie.getTitle(), lineStyle, dataSerie.getValues(), + dataSerie.getMaxValue(), dataSerie.getAverage())); } final double average = Math.round(DataSeriesStats.average(dataSeriesStats)); diff --git a/pdb-ui/src/main/java/org/lucares/pdbui/domain/StyleAndColor.java b/pdb-ui/src/main/java/org/lucares/pdbui/domain/StyleAndColor.java new file mode 100644 index 0000000..cdac7c2 --- /dev/null +++ b/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(); + } +}