From 08328ec1e5193b7d84c2c2210809baa240e47900 Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Sun, 1 Nov 2020 09:15:01 +0100 Subject: [PATCH] extract plot detail view into its own component --- pdb-js/src/app/app.module.ts | 2 + .../gallery-item-view.component.html | 41 ++------------ .../gallery-item-view.component.scss | 29 ---------- .../gallery-view/gallery-view.component.ts | 33 +---------- .../plot-details/plot-details.component.html | 28 ++++++++++ .../plot-details/plot-details.component.scss | 30 ++++++++++ .../plot-details/plot-details.component.ts | 24 ++++++++ .../app/plot-view/plot-view.component.html | 55 +++++++++++++------ .../app/plot-view/plot-view.component.scss | 11 ++++ .../src/app/plot-view/plot-view.component.ts | 13 ++++- pdb-js/src/app/plot.service.ts | 4 -- pdb-js/src/app/utils.service.ts | 38 +++++++++++++ .../visualization-page.component.scss | 1 - .../visualization-page.component.ts | 4 ++ pdb-js/src/styles.scss | 6 ++ 15 files changed, 201 insertions(+), 118 deletions(-) create mode 100644 pdb-js/src/app/plot-details/plot-details.component.html create mode 100644 pdb-js/src/app/plot-details/plot-details.component.scss create mode 100644 pdb-js/src/app/plot-details/plot-details.component.ts create mode 100644 pdb-js/src/app/utils.service.ts diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index bc2ff74..bec94db 100644 --- a/pdb-js/src/app/app.module.ts +++ b/pdb-js/src/app/app.module.ts @@ -24,6 +24,7 @@ import {MatTooltipModule} from '@angular/material/tooltip'; import { YAxisDefinitionComponent } from './y-axis-definition/y-axis-definition.component'; import { QueryAutocompleteComponent } from './query-autocomplete/query-autocomplete.component'; import { LimitByComponent } from './limit-by/limit-by.component'; +import { PlotDetailsComponent } from './plot-details/plot-details.component'; import { PlotViewComponent } from './plot-view/plot-view.component'; import { GalleryViewComponent, GalleryItemView, GalleryFilterView } from './gallery-view/gallery-view.component'; import { ImageToggleComponent } from './image-toggle/image-toggle.component'; @@ -38,6 +39,7 @@ import { ImageToggleComponent } from './image-toggle/image-toggle.component'; YAxisDefinitionComponent, QueryAutocompleteComponent, LimitByComponent, + PlotDetailsComponent, PlotViewComponent, GalleryViewComponent, GalleryItemView, 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 41e113b..a881191 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 @@ -8,47 +8,18 @@ {{data.stats.plottedValues}}/ {{data.stats.values}} -
Max value: {{ formatMs(data.stats.maxValue) }}
-
Average: {{ formatMs(data.stats.average) }}
+
Max value: {{ utils.formatMs(data.stats.maxValue) }}
+
Average: {{ utils.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 5ca976a..38d4707 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 @@ -45,33 +45,4 @@ right: 0; } -.gallery-item-plotType { - background-image: url(/assets/img/pointTypes.png); - width: 9px; - height: 7px; - transform: scale(1.5); -} - -.gallery-item-plotType_0 {background-position-x: 0px;} -.gallery-item-plotType_1 {background-position-x: -10px;} -.gallery-item-plotType_2 {background-position-x: -20px;} -.gallery-item-plotType_3 {background-position-x: -30px;} -.gallery-item-plotType_4 {background-position-x: -40px;} -.gallery-item-plotType_5 {background-position-x: -50px;} -.gallery-item-plotType_6 {background-position-x: -60px;} -.gallery-item-plotType_7 {background-position-x: -70px;} -.gallery-item-plotType_8 {background-position-x: -80px;} -.gallery-item-plotType_9 {background-position-x: -90px;} -.gallery-item-plotType_10 {background-position-x:-100px;} -.gallery-item-plotType_11 {background-position-x:-110px;} -.gallery-item-plotType_12 {background-position-x:-120px;} - -.gallery-item-plotType_0051c2 {background-position-y: 0px;} -.gallery-item-plotType_bf8300 {background-position-y: -8px;} -.gallery-item-plotType_9400d3 {background-position-y: -16px;} -.gallery-item-plotType_00c254 {background-position-y: -24px;} -.gallery-item-plotType_e6e600 {background-position-y: -32px;} -.gallery-item-plotType_e51e10 {background-position-y: -40px;} -.gallery-item-plotType_57a1c2 {background-position-y: -48px;} -.gallery-item-plotType_bd36c2 {background-position-y: -56px;} 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 64e2123..420c4e3 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,7 @@ import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core'; import { MatSnackBar } from '@angular/material/snack-bar'; import { PlotService, PlotRequest, PlotResponse, PlotResponseStats, DashTypeAndColor } from '../plot.service'; +import { UtilService } from '../utils.service'; export class GalleryFilterData { filterBy :string; @@ -312,37 +313,7 @@ export class GalleryItemView { showImage: boolean= false; - - formatMs(valueInMs):string { - const ms = Math.floor(valueInMs % 1000); - const s = Math.floor((valueInMs / 1000) % 60); - const m = Math.floor((valueInMs / (60*1000)) % 60); - const h = Math.floor(valueInMs / (3600*1000)); - - var result = ""; - if (h != 0) { - result += h+"h "; - } - if (h!= 0 || m != 0) { - result += m+"m "; - } - if (h!= 0 || m != 0 || s != 0) { - result += s+"s "; - result += ms+"ms"; - } else { - result += ms+"ms"; - } - - return result; - } - - pointTypeClass(typeAndColor: DashTypeAndColor): string { - return "gallery-item-plotType gallery-item-plotType_"+typeAndColor.pointType+" gallery-item-plotType_"+typeAndColor.color.toLocaleLowerCase(); - } - - toPercent(percentage: number) : string{ - return (Math.round(percentage * 10000) / 100)+"%"; - } + constructor(public utils: UtilService){} openImage() { this.showImage=true; diff --git a/pdb-js/src/app/plot-details/plot-details.component.html b/pdb-js/src/app/plot-details/plot-details.component.html new file mode 100644 index 0000000..7d08561 --- /dev/null +++ b/pdb-js/src/app/plot-details/plot-details.component.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + + +
NameTypeValuesAvg
{{ stat.name }}
{{ stat.values }}{{ utils.formatMs(stats.average) }}
+ + + + + + + + + +
+
+
+ {{ utils.toPercent(statsRow.average / statsCol.average) }} +
\ No newline at end of file diff --git a/pdb-js/src/app/plot-details/plot-details.component.scss b/pdb-js/src/app/plot-details/plot-details.component.scss new file mode 100644 index 0000000..86a0545 --- /dev/null +++ b/pdb-js/src/app/plot-details/plot-details.component.scss @@ -0,0 +1,30 @@ + +.plot-details-plotType { + background-image: url(/assets/img/pointTypes.png); + width: 9px; + height: 7px; + transform: scale(1.5); +} + +.plot-details-plotType_0 {background-position-x: 0px;} +.plot-details-plotType_1 {background-position-x: -10px;} +.plot-details-plotType_2 {background-position-x: -20px;} +.plot-details-plotType_3 {background-position-x: -30px;} +.plot-details-plotType_4 {background-position-x: -40px;} +.plot-details-plotType_5 {background-position-x: -50px;} +.plot-details-plotType_6 {background-position-x: -60px;} +.plot-details-plotType_7 {background-position-x: -70px;} +.plot-details-plotType_8 {background-position-x: -80px;} +.plot-details-plotType_9 {background-position-x: -90px;} +.plot-details-plotType_10 {background-position-x:-100px;} +.plot-details-plotType_11 {background-position-x:-110px;} +.plot-details-plotType_12 {background-position-x:-120px;} + +.plot-details-plotType_0051c2 {background-position-y: 0px;} +.plot-details-plotType_bf8300 {background-position-y: -8px;} +.plot-details-plotType_9400d3 {background-position-y: -16px;} +.plot-details-plotType_00c254 {background-position-y: -24px;} +.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;} \ No newline at end of file diff --git a/pdb-js/src/app/plot-details/plot-details.component.ts b/pdb-js/src/app/plot-details/plot-details.component.ts new file mode 100644 index 0000000..9ebdfc9 --- /dev/null +++ b/pdb-js/src/app/plot-details/plot-details.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit, Input, Output, ViewChild, EventEmitter, ɵpublishDefaultGlobalUtils } from '@angular/core'; +import { DashTypeAndColor, PlotResponseStats } from '../plot.service'; +import { UtilService } from '../utils.service'; + +@Component({ + selector: 'pdb-plot-details', + templateUrl: './plot-details.component.html', + styleUrls: ['./plot-details.component.scss'] +}) +export class PlotDetailsComponent { + + @Input() + stats: PlotResponseStats; + + constructor(public utils: UtilService){ + + } + + pointTypeClass(typeAndColor: DashTypeAndColor): string { + return "plot-details-plotType" + +" plot-details-plotType_"+typeAndColor.pointType + +" plot-details-plotType_"+typeAndColor.color.toLocaleLowerCase(); + } +} \ No newline at end of file diff --git a/pdb-js/src/app/plot-view/plot-view.component.html b/pdb-js/src/app/plot-view/plot-view.component.html index b29e64e..33fa803 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.html +++ b/pdb-js/src/app/plot-view/plot-view.component.html @@ -1,21 +1,42 @@
- +
+ -
+ /> +
+ +
+
+
+
+ +
+ +
+
diff --git a/pdb-js/src/app/plot-view/plot-view.component.scss b/pdb-js/src/app/plot-view/plot-view.component.scss index a5133e5..69ce25c 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.scss +++ b/pdb-js/src/app/plot-view/plot-view.component.scss @@ -8,4 +8,15 @@ img { position: absolute; background: #ccc; opacity:0.4; +} + + +.plot-view-overlay { + position: absolute; + top: 5px; + left: 5px; + right: 5px; + bottom: 5px; + background-color: white; + box-shadow: 5px 5px 10px 0px #e0e0e0; } \ No newline at end of file diff --git a/pdb-js/src/app/plot-view/plot-view.component.ts b/pdb-js/src/app/plot-view/plot-view.component.ts index 0ff48c4..63ea16e 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.ts +++ b/pdb-js/src/app/plot-view/plot-view.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core'; -import { DataType, AxesTypes } from '../plot.service'; +import { DataType, AxesTypes, PlotResponseStats } from '../plot.service'; @Component({ selector: 'pdb-plot-view', @@ -16,6 +16,7 @@ export class PlotViewComponent implements OnInit { imageUrl : string; + stats : PlotResponseStats; axes: AxesTypes; @@ -38,6 +39,8 @@ export class PlotViewComponent implements OnInit { zoomInSliderStyleLeft = "0"; zoomInSliderStyleWidth = "0"; + showStats = false; + constructor() { } ngOnInit() { @@ -175,6 +178,14 @@ export class PlotViewComponent implements OnInit { this.zoomWithDateAnchor.emit(new DateAnchor(cursorPercentOfDateRange, zoomFactor)); } } + + showDetails() { + this.showStats = true; + } + + hideDetails() { + this.showStats = false; + } } export class SelectionRange { diff --git a/pdb-js/src/app/plot.service.ts b/pdb-js/src/app/plot.service.ts index f48b501..c85c15c 100644 --- a/pdb-js/src/app/plot.service.ts +++ b/pdb-js/src/app/plot.service.ts @@ -30,11 +30,7 @@ export class PlotService { this.plotTypes.push(new PlotType("LAG", "Lag", "lag-plot", false, DataType.Other, DataType.Other)); this.plotTypes.push(new PlotType("ACF", "ACF", "acf-plot", false, DataType.Other, DataType.Other)); } - - ngOnInit() { - } - getPlotTypes(): Array { return this.plotTypes.filter(plotType => plotType.active); } diff --git a/pdb-js/src/app/utils.service.ts b/pdb-js/src/app/utils.service.ts new file mode 100644 index 0000000..b22d184 --- /dev/null +++ b/pdb-js/src/app/utils.service.ts @@ -0,0 +1,38 @@ + +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' + }) +export class UtilService { + + constructor() { + } + + formatMs(valueInMs):string { + const ms = Math.floor(valueInMs % 1000); + const s = Math.floor((valueInMs / 1000) % 60); + const m = Math.floor((valueInMs / (60*1000)) % 60); + const h = Math.floor(valueInMs / (3600*1000)); + + var result = ""; + if (h != 0) { + result += h+"h "; + } + if (h!= 0 || m != 0) { + result += m+"m "; + } + if (h!= 0 || m != 0 || s != 0) { + result += s+"s "; + result += ms+"ms"; + } else { + result += ms+"ms"; + } + + return result; + } + + toPercent(percentage: number) : string{ + return (Math.round(percentage * 10000) / 100)+"%"; + } +} \ No newline at end of file diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss index da9349f..09fc714 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.scss +++ b/pdb-js/src/app/visualization-page/visualization-page.component.scss @@ -65,4 +65,3 @@ #plot-button-bar { text-align: right; } - diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts index 13fc208..ebc59da 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts @@ -105,6 +105,7 @@ export class VisualizationPageComponent implements OnInit { gallery(){ const that = this; this.plotView.imageUrl = ''; + that.plotView.stats = null; that.galleryView.show=true; const request = this.createPlotRequest(); this.galleryView.renderGallery(request, this.splitBy.name); @@ -132,6 +133,7 @@ export class VisualizationPageComponent implements OnInit { const that = this; that.plotView.imageUrl = ''; + that.plotView.stats = null; this.plotView.axes = this.getAxes(); console.log(JSON.stringify(this.getAxes())); that.galleryView.show=false; @@ -142,10 +144,12 @@ export class VisualizationPageComponent implements OnInit { this.plotService.sendPlotRequest(request).subscribe(function(plotResponse){ console.log("response: " + JSON.stringify(plotResponse)); that.plotView.imageUrl = "http://"+window.location.hostname+':'+window.location.port+'/'+plotResponse.imageUrl; + that.plotView.stats = plotResponse.stats; document.dispatchEvent(new Event("invadersPause", {})); }, error => { that.plotView.imageUrl = ''; + that.plotView.stats = null; that.showError(error.error.message); document.dispatchEvent(new Event("invadersPause", {})); }); diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss index 4675461..bdd0409 100644 --- a/pdb-js/src/styles.scss +++ b/pdb-js/src/styles.scss @@ -105,6 +105,12 @@ a.external-link:after { cursor: pointer; } +.top-right { + position: absolute; + top: 0; + right: 0; +} + body .mat-select-panel, body .mat-autocomplete-panel { max-height: 300px; }