make the legend movable

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.
2023-09-30 17:12:49 +02:00
parent f8a199fd6a
commit 43e13b53b1
12 changed files with 138 additions and 62 deletions
--- a/pdb-js/src/app/app.module.ts
+++ b/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]
--- a/pdb-js/src/app/plot-details/plot-details.component.scss
+++ b/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 {
--- a/pdb-js/src/app/plot-view/plot-view.component.html
+++ b/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 
--- a/pdb-js/src/app/plot-view/plot-view.component.scss
+++ b/pdb-js/src/app/plot-view/plot-view.component.scss
@@ -20,4 +20,50 @@ img {
  background-color: white;
  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; 
 }
--- a/pdb-js/src/app/plot-view/plot-view.component.ts
+++ b/pdb-js/src/app/plot-view/plot-view.component.ts
@@ -1,15 +1,16 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions  } from '../plot.service';
+import { Component, Output, EventEmitter } from '@angular/core';
+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 { WidgetDimensions } from '../dashboard.service';
+import { Overlay } from "@angular/cdk/overlay";

@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

@@ -18,6 +19,7 @@ export class PlotViewComponent implements OnInit {
  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 +49,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) {
@@ -283,7 +284,7 @@ export class PlotViewComponent implements OnInit {
        'main': new RenderOptions(actualDimension.height, actualDimension.width, false, true)
      });
    return request;
- }
+  }

 /**
   * Zoom in/out by zoomFaktor, so that the anchorInPercentOfDateRange keeps the same position.
@@ -335,6 +336,18 @@ export class PlotViewComponent implements OnInit {
     duration: moment.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 {
--- a/pdb-js/src/app/plot.service.ts
+++ b/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) {}
 }

--- a/pdb-js/src/app/visualization-page/visualization-page.component.ts
+++ b/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),
    };
    
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -97,6 +97,10 @@ h2 {
  margin-block-end: 0.83rem;
 }

+.hidden {
+  visibility: hidden;
+}
+
 .icon-inline {
  width: 1em;
  height: 1em;
@@ -246,4 +250,35 @@ 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;}