Merge commit '731e9264e334043d2f36bc35bfd0231447dfb8dc' into dashboard

The legend ("key" in Gnuplot speak) is no longer part of the image.
Instead it is a floating&movable overlay.

In the gallery we still use the legend/key in the image.

build.gradle

@@ -4,7 +4,7 @@ import org.apache.tools.ant.filters.ReplaceTokens
 plugins {
   id 'java'
   id 'eclipse'            
-  id 'com.github.ben-manes.versions' version "0.46.0" // check for dependency updates run: gradlew dependenyUpdates
+  id 'com.github.ben-manes.versions' version "0.48.0" // check for dependency updates run: gradlew dependenyUpdates
 }
 
 
@@ -12,19 +12,19 @@ ext {
 
   javaVersion=17
 
-  version_log4j2= '2.19.0' // keep in sync with spring-boot-starter-log4j2
+  version_log4j2= '2.20.0' // keep in sync with spring-boot-starter-log4j2
-  version_spring = '3.0.4'
+  version_spring = '3.1.4'
-  version_junit = '5.9.2'
+  version_junit = '5.10.0'
-  version_junit_platform = '1.9.2'
+  version_junit_platform = '1.10.0'
   version_nodejs = '16.17.1' // keep in sync with npm
   version_npm = '8.15.0'    // keep in sync with nodejs
 
-  lib_antlr = "org.antlr:antlr4:4.11.1"
+  lib_antlr = "org.antlr:antlr4:4.13.1"
 
   lib_commons_collections4 = 'org.apache.commons:commons-collections4:4.4'
   lib_commons_csv= 'org.apache.commons:commons-csv:1.10.0'
-  lib_commons_lang3 = 'org.apache.commons:commons-lang3:3.12.0'
+  lib_commons_lang3 = 'org.apache.commons:commons-lang3:3.13.0'
-  lib_jackson_databind = 'com.fasterxml.jackson.core:jackson-databind:2.14.2'
+  lib_jackson_databind = 'com.fasterxml.jackson.core:jackson-databind:2.15.2'
 
   lib_log4j2_core = "org.apache.logging.log4j:log4j-core:${version_log4j2}"
   lib_log4j2_slf4j_impl = "org.apache.logging.log4j:log4j-slf4j-impl:${version_log4j2}"

liquibase.properties

@@ -1,2 +0,0 @@
-
-liquibase.hub.mode=off

pdb-js/build.gradle

@@ -2,7 +2,7 @@ import java.nio.file.Files
 import java.nio.file.Paths
 
 plugins {
-	id("com.github.node-gradle.node") version "3.5.1"
+	id("com.github.node-gradle.node") version "7.0.0"
 }
 
 

pdb-js/package.json

@@ -13,37 +13,38 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.0.2",
+    "@angular/animations": "^16.2.7",
-    "@angular/cdk": "^15.0.1",
+    "@angular/cdk": "^16.2.6",
-    "@angular/common": "^15.0.2",
+    "@angular/common": "^16.2.7",
-    "@angular/compiler": "^15.0.2",
+    "@angular/compiler": "^16.2.7",
-    "@angular/core": "^15.0.2",
+    "@angular/core": "^16.2.7",
-    "@angular/forms": "^15.0.2",
+    "@angular/forms": "^16.2.7",
-    "@angular/material": "^15.0.1",
+    "@angular/material": "^16.2.6",
-    "@angular/platform-browser": "^15.0.2",
+    "@angular/platform-browser": "^16.2.7",
-    "@angular/platform-browser-dynamic": "^15.0.2",
+    "@angular/platform-browser-dynamic": "^16.2.7",
-    "@angular/router": "^15.0.2",
+    "@angular/router": "^16.2.7",
+    "luxon": "^3.4.3",
     "marked": "^4.2.12",
-    "moment": "^2.29.1",
+    "ngx-markdown": "^16.0.0",
-    "ngx-markdown": "^15.1.2",
     "rxjs": "~7.5.0",
     "rxjs-compat": "^6.6.7",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.2",
+    "@angular-devkit/build-angular": "^16.2.4",
-    "@angular/cli": "^15.0.2",
+    "@angular/cli": "^16.2.4",
-    "@angular/compiler-cli": "^15.0.2",
+    "@angular/compiler-cli": "^16.2.7",
-    "@types/jasmine": "~3.10.0",
+    "@types/jasmine": "~4.3.0",
+    "@types/luxon": "^3.3.2",
     "@types/marked": "^4.0.8",
     "@types/node": "^12.11.1",
-    "jasmine-core": "~3.10.0",
+    "jasmine-core": "~4.6.0",
-    "karma": "~6.3.0",
+    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.1.0",
+    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~4.0.0",
+    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "4.8"
+    "typescript": "5.1"
   }
 }

pdb-js/src/app/app.module.ts

@@ -22,6 +22,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {OverlayModule} from '@angular/cdk/overlay';
 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';
@@ -101,7 +102,8 @@ import { MarkdownModule } from 'ngx-markdown';
     MatTableModule,
     MatTooltipModule,
     BrowserAnimationsModule,
-    HttpClientModule
+    HttpClientModule,
+    OverlayModule
   ],
   providers: [{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: true}}],
   bootstrap: [AppComponent]

pdb-js/src/app/plot-details/plot-details.component.scss

@@ -1,33 +1,4 @@
 
-.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;}
 
 
 .gallery-item-details td {

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

@@ -1,3 +1,14 @@
+
+<!---->
+<div cdkDrag 
+    [ngClass]="{'hidden': !imageUrl || showStats}" 
+    class="plot-view--legend" 
+    [cdkDragFreeDragPosition]="legendInitialPosition">
+  <div cdkDragHandle></div>
+  <ol>
+    <li *ngFor="let stat of dataSeries()"><div class="{{ pointTypeClass(stat.dashTypeAndColor) }}" title="{{ stat.name }}"></div>{{ stat.name }}</li>
+  </ol>
+</div>
 <div
   *ngIf="imageUrl">
   <div 

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

@@ -21,3 +21,49 @@ img {
   box-shadow: 5px 5px 10px 0px #e0e0e0;
   overflow: auto;
 }
+
+.plot-view--legend {
+  padding-bottom: 0.5em;
+  border: solid 1px #ccc;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 4px;
+  position: fixed;
+  z-index: 1;
+  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+              0 2px 2px 0 rgba(0, 0, 0, 0.14),
+              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  background-color: white;
+}
+
+.plot-view--legend:active {
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.plot-view--legend div[cdkDragHandle] {
+  visibility: hidden;
+  height: 1.2rem;
+}
+
+.plot-view--legend:hover div[cdkDragHandle] {
+  cursor: move;
+  visibility: visible;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAF0lEQVQI12P4//8/AwMDhGSEUFCAUwYAJl4R8Z1D4wIAAAAASUVORK5CYII=);
+}
+
+.plot-view--legend ol {
+  padding-inline-start: 0.7em;
+}
+
+.plot-view--legend ol li {
+  list-style-type: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center
+}
+.plot-view--legend ol li .plot-details-plotType{
+  margin-right: 0.3em; 
+}

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

@@ -1,23 +1,27 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter } from '@angular/core';
-import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions  } from '../plot.service';
+import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions, DataSeriesStats, DashTypeAndColor  } from '../plot.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import * as moment from 'moment';
+//import * as moment from 'moment';
 import { WidgetDimensions } from '../dashboard.service';
+import { Overlay } from "@angular/cdk/overlay";
+
+import { DateTime, Duration } from "luxon";
 
 @Component({
   selector: 'pdb-plot-view',
   templateUrl: './plot-view.component.html',
   styleUrls: ['./plot-view.component.scss']
 })
-export class PlotViewComponent implements OnInit {
+export class PlotViewComponent {
 
-  readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS
+  readonly DATE_PATTERN = "yyyy-MM-dd HH:mm:ss"; // for moment-JS
 
   readonly gnuplotLMargin = 110; // The left margin configured for gnuplot
   readonly gnuplotRMargin = 110; // The right margin configured for gnuplot
   readonly gnuplotTMargin = 57; // The top margin configured for gnuplot
   readonly gnuplotBMargin = 76; // The bottom margin configured for gnuplot
 
+  isOpen = false;
 
   imageUrl! : string;
   stats: PlotResponseStats | null = null;
@@ -47,10 +51,9 @@ export class PlotViewComponent implements OnInit {
 
   config? : PlotConfig;
 
-  constructor(private service : PlotService, private snackBar: MatSnackBar) { }
+  legendInitialPosition = {x:115,y:60};
 
-  ngOnInit() {
+  constructor(private service : PlotService, private snackBar: MatSnackBar, private overlay: Overlay) { }
-  }
 
 
   showError(message:string) {
@@ -177,8 +180,8 @@ export class PlotViewComponent implements OnInit {
   }
 
   setDateRange(startDate: any, endDate: any) {
-    const formattedStartDate = startDate.format(this.DATE_PATTERN);
+    const formattedStartDate = startDate.toFormat(this.DATE_PATTERN);
-    const formattedEndDate = endDate.format(this.DATE_PATTERN);
+    const formattedEndDate = endDate.toFormat(this.DATE_PATTERN);
     
     const newDateRange = formattedStartDate+" - "+formattedEndDate;
     
@@ -294,13 +297,13 @@ export class PlotViewComponent implements OnInit {
  shiftDateByAnchor(dateRange:string, anchorInPercentOfDateRange:number, zoomFactor:number)
  {
      const dateRangeParsed = this.parseDateRange(dateRange);
-     const dateRangeInSeconds = dateRangeParsed.duration.asSeconds();
+     const dateRangeInSeconds = Math.floor(dateRangeParsed.duration.toMillis()/1000);
      
-     const anchorTimestampInSeconds = dateRangeParsed.startDate.clone().add(Math.floor(dateRangeInSeconds*anchorInPercentOfDateRange), "seconds");
+     const anchorTimestampInSeconds = dateRangeParsed.startDate.plus(Math.floor(dateRangeInSeconds*anchorInPercentOfDateRange)*1000);
      const newDateRangeInSeconds = dateRangeInSeconds * zoomFactor;
      
-     const newStartDate = anchorTimestampInSeconds.clone().subtract(newDateRangeInSeconds*anchorInPercentOfDateRange, "seconds");
+     const newStartDate = anchorTimestampInSeconds.minus(newDateRangeInSeconds*anchorInPercentOfDateRange*1000);
-     const newEndDate = newStartDate.clone().add({seconds: newDateRangeInSeconds});;
+     const newEndDate = newStartDate.plus({seconds: newDateRangeInSeconds});;
      
      this.setDateRange(newStartDate, newEndDate);
  }
@@ -317,24 +320,37 @@ export class PlotViewComponent implements OnInit {
  shiftDate(dateRange: string, factorStartDate: number, factorEndDate: number)
  {
      const dateRangeParsed = this.parseDateRange(dateRange);
-     const dateRangeInSeconds = dateRangeParsed.duration.asSeconds();
+     const dateRangeInSeconds = Math.floor(dateRangeParsed.duration.toMillis()/1000);
      
-     const newStartDate = dateRangeParsed.startDate.add({seconds: dateRangeInSeconds*factorStartDate});
+     const newStartDate = dateRangeParsed.startDate.plus({seconds: dateRangeInSeconds*factorStartDate});
-     const newEndDate = dateRangeParsed.endDate.add({seconds: dateRangeInSeconds*factorEndDate});
+     const newEndDate = dateRangeParsed.endDate.plus({seconds: dateRangeInSeconds*factorEndDate});
      
      this.setDateRange(newStartDate, newEndDate);
  }
  
   parseDateRange(dateRangeAsString : string) : DateRange {
-   const startDate = moment(dateRangeAsString.slice(0, 19));
+    const startDate = DateTime.fromFormat(dateRangeAsString.slice(0, 19), this.DATE_PATTERN );
-   const endDate = moment(dateRangeAsString.slice(22, 41));
+    const endDate = DateTime.fromFormat(dateRangeAsString.slice(22, 41), this.DATE_PATTERN );
+   
 
    return {
      startDate: startDate,
      endDate: endDate,
-     duration: moment.duration(endDate.diff(startDate))
+     duration: endDate.diff(startDate),
    };
   }
+
+
+
+  dataSeries(): Array<DataSeriesStats> {
+    return this.stats ? this.stats.dataSeriesStats : [];
+  }
+
+  pointTypeClass(typeAndColor: DashTypeAndColor): string {
+    return "plot-details-plotType"
+      +" plot-details-plotType_"+typeAndColor.pointType
+      +" plot-details-plotType_"+typeAndColor.color.toLocaleLowerCase();
+  } 
 }
 
 export class SelectionRange {
@@ -362,7 +378,8 @@ export class LoadingEvent {
 }
 
 export class DateRange {
-  startDate: any;
+  constructor(
-  endDate: any;
+    public startDate: DateTime,
-  duration: any;
+    public endDate: DateTime,
+    public duration: Duration){}
 }

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

@@ -239,7 +239,7 @@ export class RenderOptions {
   constructor(
     public height: number, 
     public width: number, 
-    public keyOutside: boolean, 
+    public showKey: boolean, 
     public renderLabels: boolean) {}
 }
 

pdb-js/src/app/visualization-page/visualization-page.component.ts

@@ -243,7 +243,7 @@ toggleGallery(event: Event){
     const config = this.createPlotConfig();
 
     const renderOptions : RenderOptionsMap = {
-      'main': new RenderOptions(results!.offsetHeight-1, results!.offsetWidth-1, false, true),
+      'main': new RenderOptions(results!.offsetHeight-1, results!.offsetWidth-1, true, true),
       'thumbnail': new RenderOptions(200, 300, false, false),
     };
     

pdb-js/src/styles.scss

@@ -97,6 +97,10 @@ h2 {
   margin-block-end: 0.83rem;
 }
 
+.hidden {
+  visibility: hidden;
+}
+
 .icon-inline {
   width: 1em;
   height: 1em;
@@ -247,3 +251,34 @@ markdown tfoot {
 markdown pre {
   font-family: monospace;
 }
+
+
+.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;}

pdb-plotting/src/main/java/org/lucares/pdb/plot/api/RenderOptions.java

@@ -3,7 +3,7 @@ package org.lucares.pdb.plot.api;
 public class RenderOptions {
     private int height;
     private int width;
-    private boolean keyOutside;
+    private boolean showKey;
     private boolean renderLabels;
 
     public int getHeight() {
@@ -22,12 +22,12 @@ public class RenderOptions {
         this.width = width;
     }
 
-    public boolean isKeyOutside() {
+    public boolean isShowKey() {
-        return keyOutside;
+        return showKey;
     }
 
-    public void setKeyOutside(final boolean keyOutside) {
+    public void setShowKey(final boolean showKey) {
-        this.keyOutside = keyOutside;
+        this.showKey = showKey;
     }
 
     public boolean isRenderLabels() {

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

@@ -50,10 +50,9 @@ public class GnuplotFileGenerator implements Appender {
 
             appendln(result, "set nokey");
         } else {
-            if (settings.isKeyOutside()) {
+            if (!settings.isShowKey()) {
-                appendfln(result, "set key outside");
+                appendfln(result, "set nokey");
-            } else {
+            }
-
             // make sure left and right margins are always the same
             // this is need to be able to zoom in by selecting a region
             // (horizontal: 1 unit = 10px; vertical: 1 unit = 19px)
@@ -62,7 +61,6 @@ public class GnuplotFileGenerator implements Appender {
             appendln(result, "set tmargin 3"); // margin 3 -> 57px - marker (1)
             appendln(result, "set bmargin 4"); // margin 4 -> 76
         }
-        }
 
         // appendfln(result, "set xrange [-1:1]");
         appendfln(result, "set boxwidth 0.5");

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

@@ -30,7 +30,7 @@ public class GnuplotSettings {
     private YAxisDefinition y1;
     private YAxisDefinition y2;
     private AggregateHandlerCollection aggregates;
-    private boolean keyOutside = false;
+    private boolean showKey = false;
 
     private AxisSettings xAxisSettings = new AxisSettings();
     private boolean renderLabels = true;
@@ -101,12 +101,12 @@ public class GnuplotSettings {
         return aggregates;
     }
 
-    public void setKeyOutside(final boolean keyOutside) {
+    public void setShowKey(final boolean showKey) {
-        this.keyOutside = keyOutside;
+        this.showKey = showKey;
     }
 
-    public boolean isKeyOutside() {
+    public boolean isShowKey() {
-        return keyOutside;
+        return showKey;
     }
 
     public void renderLabels(final boolean renderLabels) {

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

@@ -126,7 +126,7 @@ public class Plotter {
                 gnuplotSettings.setY1(plotSettings.getY1());
                 gnuplotSettings.setY2(plotSettings.getY2());
                 gnuplotSettings.setAggregates(plotSettings.getAggregates());
-                gnuplotSettings.setKeyOutside(renderOptions.isKeyOutside());
+                gnuplotSettings.setShowKey(renderOptions.isShowKey());
                 gnuplotSettings.renderLabels(renderOptions.isRenderLabels());
                 gnuplot.plot(gnuplotSettings, dataSeries);
             }