From 45c1648773b703d40b6277bfb118b13930a2ec28 Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Sun, 18 Oct 2020 19:25:53 +0200 Subject: [PATCH] POC for detailed gallery view --- .../gallery-item-view.component.html | 51 +++++-- .../gallery-item-view.component.scss | 143 +++++++++++++++++- .../gallery-view/gallery-view.component.html | 5 +- .../gallery-view/gallery-view.component.scss | 7 + .../gallery-view/gallery-view.component.ts | 15 +- pdb-js/src/app/plot.service.ts | 7 + pdb-js/src/assets/img/pointTypes.png | Bin 0 -> 2562 bytes .../lucares/recommind/logs/DataSeries.java | 3 +- .../org/lucares/recommind/logs/LineStyle.java | 27 +++- .../lucares/recommind/logs/PointTypes.java | 9 ++ .../java/org/lucares/pdbui/PdbController.java | 20 --- .../lucares/pdbui/domain/DataSeriesStats.java | 24 ++- .../pdbui/domain/PlotResponseStats.java | 7 +- .../lucares/pdbui/domain/StyleAndColor.java | 36 +++++ 14 files changed, 312 insertions(+), 42 deletions(-) create mode 100644 pdb-js/src/assets/img/pointTypes.png create mode 100644 pdb-plotting/src/main/java/org/lucares/recommind/logs/PointTypes.java create mode 100644 pdb-ui/src/main/java/org/lucares/pdbui/domain/StyleAndColor.java 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 0000000000000000000000000000000000000000..359ffac18b0259f4271ce8b5dde1ab43ce24ba2d GIT binary patch literal 2562 zcmdUxi8~b98^^~|P0Ao^6Ili|veo4xWEs;K{YIe>gKH}q+l>7Rk+oqmA!1MyS+XP* zqZ!*Yhz4aDyJVy+*On#gZ@S&?{Vn(R2mGG%yyra6`#kSC&wIY_`#C4^f;obp56lMu z0QixnCYGEvnq!8*y_~rZQeg}LaK(7SU>A@un2aCJ_ll>NI{LTee(HT1Zcc`XP9D7kXD*aZE?&4!U{!`pRR@T_3!z2Z)!<)Pe( znWJawM&Y4%*C+-ECsp554aW|3o*H?Qpp{UlrINFJ2Ai4AmR!_XtT7Uok6_n+SUNIA zrgL{5Jo33m51VPL9Q5Q}W2sxwE2~#TQi(-f3Rb5j6klamT-m4p^}x+gZ})pM8u7#i zxw|q(G11_*q6XtM>tqpO=-}yE;z!KA-5*iG8~_$40VZUuR~EB=L-> zz1Tj<_hpuwS?e7sJruOeyI{a$V>jgF4frW9pEYF11_Hf##97{`0Up)h8;!>tes)7F zb&K%rdB2@h2R(3bm^(_dy1MU-x%3T+S9C699nW+?@m5-DHA213Y99NYn+JD3CZOY!GQ;bTMRbE~nE+1R>ZQ zb|`^uRo-7=I0`r-2_3!}EdpZiX@#V?hQuszj~mL9+2;8YwxcrCXy!>)>ysSV3q{Q_ zYgXRq=ap+gc6Q9!-+W)ZtgSD}RSIRRPLV=pepA8i%+<_{1&>TY3+nwlq$1*30S+0& z)DE2tzOuOPS=#}eJ9=XSb!uq-*z5LWy}B=nBbc_E$apw0qQ6}TU-8U{v&pFyW+#Rc zbwe~xJHkX)GiB<&rc%gJiTNe9#g%S2?K#ZO{BhSI!S&*(`!oFDBIRzaN!7PYXJ^j<{ZI4=<&K7DNYkj$KA{C&YMe-` z&S#Q;0kPLFOG-gtKy0nsCi33n#cgRPc{Q!2b(g>xgqm-;%B?SSM}qBjZ@Ia`;4$~< z>^v6k`YaeGX+X}&qJ{LtjJaGN&xVi6s;YL{)6n>>m+~c?1J;Mh5-F)BCk44fd4Fx4 z-nO(XV2`I&n;mU7z+6IfQS0NX6v32tCc;g8AwNv7RSHkSv1G zYS|UkFKKwMus)M8Iro4!#InI@2vyVLXw$N_8cS}s8K^aRI$BYgt$_`B8dpbna{e-% zFgAIc$qbC4h)x4XK16i1sIjNO?{%qJ-9xeB#BDX{)Qo zDNSi&kIF8{JLsP6*IH9|<$j2E8>&(q6ox)@C3y8(OD|4=MFbA(vEH-o*kcmokI;y& zm{^k1uZX^dU4Q+^z+hoC5!yyunzXiso?(Ge;lxB4Zk; z1!9TAH=NZF%5^^zS2yvhR%2V#yA!S~i4W^Sb3L<+hl*Qb69>kWmq1u-=;-t$=X?bV zR3)KdN{n%XB!4SPuocn;v!2hmqog2ENWHYAzH|BU>FAH!nk3D)t?7zc+9xb==J>tC zAQf=f++3_oEL7zm_76;JgOZ;3YGVE?)A2H+Wx?+aqjk0h$`aCWmMu)Ar)qu)j0tZ8 z2W_cFdij(?-jrQH)M(e<73efb_}7koi&xTS67Ix%;dKqRdeF%a@wb1cm95nH!WMn- zub!>r1plt>VkPDvb}J$1+Uf@j;RyU?+Q+3Y5q>pBU{9Kf4qyK`5}fO zkS+8{_VL;|Wcr{iW>9tG+*dW3$egpk!Hs^jmYLqu#Y9-;;F`} za5&T}G6TH+pM_j(x#ZVouOKjy_q+t+G3rFWES!w?BqvtMDNH@{Xqf9FSF%POftH!? znx2W?%Ez<-H?6A_)!X1N^f6?8;;GXgTdloUghs&{0^^~NGcd$R*O+Xal##F)E=ybQ zGRz6lU-$=)Kb~$H<_nCe>V}`uPu-n|aGs$QZk=N}{^c4^!RA#D*|I|)cBrnqg&As2 yIX?i^T{ZD%)1vajgKAs 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(); + } +}