From fb5c8ea0199f4507d0ad8270cb5f79fb48168f9d Mon Sep 17 00:00:00 2001
From: Andreas Huber <andreas.huber@lucares.de>
Date: Sun, 26 Feb 2023 14:07:19 +0100
Subject: [PATCH] first step to show plot on dashboard

---
 pdb-js/src/app/app.component.html             |  8 +------
 pdb-js/src/app/app.module.ts                  |  4 +++-
 .../add-plot-dialog.component.html            |  2 +-
 .../add-plot-dialog.component.ts              |  6 ++++-
 .../dashboard/dashboard.component.html        | 18 +++++++++++++++
 .../dashboard/dashboard.component.scss        | 15 ------------
 .../dashboard/dashboard.component.ts          | 12 +++++-----
 .../plot-widget/plot-widget.component.html    |  4 ++++
 .../plot-widget/plot-widget.component.spec.ts | 23 +++++++++++++++++++
 .../plot-widget/plot-widget.component.ts      | 13 +++++++++++
 pdb-js/src/app/dashboard.service.ts           |  5 ++--
 .../visualization-page.component.scss         |  2 +-
 .../visualization-page.component.ts           | 14 +++++++----
 .../pdb/plot/api/ScatterAggregator.java       |  4 ++--
 .../lucares/pdb/plot/api/YAxisDefinition.java |  8 ++-----
 .../org/lucares/recommind/logs/AxisTime.java  |  6 ++---
 .../lucares/recommind/logs/YAxisTicks.java    |  4 ++--
 .../lucares/pdbui/dashboard/Dashboard.java    |  9 ++++++++
 .../lucares/pdbui/dashboard/PlotWidget.java   | 12 ++++++----
 19 files changed, 114 insertions(+), 55 deletions(-)
 delete mode 100644 pdb-js/src/app/dashboard-page/dashboard/dashboard.component.scss
 create mode 100644 pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.html
 create mode 100644 pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.spec.ts
 create mode 100644 pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts

diff --git a/pdb-js/src/app/app.component.html b/pdb-js/src/app/app.component.html
index 11756ec..7b3d5dd 100644
--- a/pdb-js/src/app/app.component.html
+++ b/pdb-js/src/app/app.component.html
@@ -1,13 +1,7 @@
 
 
 <div id="main-toolbar">
-  <!--
-    <a href="/">Home</a>
-    <a href="/"><img src="assets/img/home.svg" aria-hidden="false" aria-label="go to home page" /></a>
-    <a href="/vis" aria-label="go to visualization page">Visualization</a>
-    <a href="/dashboard" aria-label="go to dashboard page">Dashboards</a>
-  -->
-  <button mat-button [routerLink]="['/']"><img src="assets/img/home.svg"  aria-hidden="false" aria-label="go to home page" /></button>
+  <button mat-button [routerLink]="['/']"><img src="assets/img/scatter-chart2.svg"  aria-hidden="false" aria-label="go to home page" /> Plotilio</button>
   <button mat-button [routerLink]="['/vis']">Visualization</button>
   <button mat-button [routerLink]="['/dashboard']">Dashboards</button>
 </div>
diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts
index 4c2261a..60a666f 100644
--- a/pdb-js/src/app/app.module.ts
+++ b/pdb-js/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { DashboardComponent } from './dashboard-page/dashboard/dashboard.compone
 import { AddTextDialogComponent } from './dashboard-page/dashboard/add-text-dialog/add-text-dialog.component';
 import { TextWidgetComponent } from './dashboard-page/dashboard/text-widget/text-widget.component';
 import { AddPlotDialogComponent } from './dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component';
+import { PlotWidgetComponent } from './dashboard-page/dashboard/plot-widget/plot-widget.component';
 
 @NgModule({
   declarations: [
@@ -59,7 +60,8 @@ import { AddPlotDialogComponent } from './dashboard-page/dashboard/add-plot-dial
     DashboardComponent,
     AddTextDialogComponent,
     TextWidgetComponent,
-    AddPlotDialogComponent
+    AddPlotDialogComponent,
+    PlotWidgetComponent
   ],
   imports: [
     BrowserModule,
diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html
index a238902..1a33ed7 100644
--- a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html
+++ b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html
@@ -14,7 +14,7 @@
 </style>
 <h1 mat-dialog-title>Add Plot</h1>
 
-<pdb-visualization-page mat-dialog-content></pdb-visualization-page>
+<pdb-visualization-page mat-dialog-content #plot></pdb-visualization-page>
 
 <div mat-dialog-actions align="end">
   <button mat-button mat-dialog-close>Cancel</button>
diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts
index cda3170..c3e4fb8 100644
--- a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts
+++ b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts
@@ -1,5 +1,6 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
+import { VisualizationPageComponent } from 'src/app/visualization-page/visualization-page.component';
 
 @Component({
   selector: 'app-add-plot-dialog',
@@ -8,10 +9,13 @@ import { MatDialogRef } from '@angular/material/dialog';
 })
 export class AddPlotDialogComponent {
 
+  @ViewChild("plot") plotElement! :VisualizationPageComponent;
+
   constructor(public dialogRef: MatDialogRef<string>){
   }
 
   onSaveClick(): void {
-    this.dialogRef.close("todo");
+    const config = this.plotElement.createPlotConfig();
+    this.dialogRef.close(config);
   }
 }
diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
index 845f89e..7f70674 100644
--- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
+++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
@@ -1,3 +1,20 @@
+<style>
+  :host {
+    width: 100%;
+    height: 100%;
+    
+  }
+  .spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .content {
+    padding: 0.5em;
+  }
+</style>
 <div *ngIf="dashboard === undefined" class="spinner">
   <mat-spinner></mat-spinner>
 </div>
@@ -11,4 +28,5 @@
   <p>{{dashboard.description}}</p>
 
   <app-text-widget *ngFor="let textWidget of dashboard.texts" [text]="textWidget.text"></app-text-widget>
+  <app-plot-widget *ngFor="let plotWidget of dashboard.plots" [data]="plotWidget"></app-plot-widget>
 </div>
diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.scss b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.scss
deleted file mode 100644
index 401d07e..0000000
--- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-:host {
-  width: 100%;
-  height: 100%;
-  
-}
-.spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.content {
-  padding: 0.5em;
-}
\ No newline at end of file
diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
index 19b7252..3ca0027 100644
--- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
+++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
@@ -2,14 +2,14 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute } from '@angular/router';
-import { Dashboard, DashboardService, TextWidget } from 'src/app/dashboard.service';
+import { Dashboard, DashboardService, PlotWidget, TextWidget } from 'src/app/dashboard.service';
+import { PlotConfig } from 'src/app/plot.service';
 import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component';
 import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component';
 
 @Component({
   selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss']
+  templateUrl: './dashboard.component.html'
 })
 export class DashboardComponent implements OnInit {
 
@@ -34,9 +34,9 @@ export class DashboardComponent implements OnInit {
   addPlot() {
     this.dialog.open(AddPlotDialogComponent,{
       width: 'calc(100% - 1em)',
-      //height: 'calc(100% - 1em)'
-    }).afterClosed().subscribe((text: string) => {
-      //this.dashboard!.texts.push(new TextWidget('MEDIUM', text)); 
+      height: 'calc(100% - 1em)'
+    }).afterClosed().subscribe((config: PlotConfig) => {
+      this.dashboard!.plots.push(new PlotWidget('MEDIUM', config));
     });
   }
 
diff --git a/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.html b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.html
new file mode 100644
index 0000000..04564e4
--- /dev/null
+++ b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.html
@@ -0,0 +1,4 @@
+<style>
+
+</style>
+<p>{{data.config.query}}</p>
diff --git a/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.spec.ts
new file mode 100644
index 0000000..11241e2
--- /dev/null
+++ b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlotWidgetComponent } from './plot-widget.component';
+
+describe('PlotWidgetComponent', () => {
+  let component: PlotWidgetComponent;
+  let fixture: ComponentFixture<PlotWidgetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PlotWidgetComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlotWidgetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts
new file mode 100644
index 0000000..479358a
--- /dev/null
+++ b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { PlotWidget } from 'src/app/dashboard.service';
+
+@Component({
+  selector: 'app-plot-widget',
+  templateUrl: './plot-widget.component.html'
+})
+export class PlotWidgetComponent {
+  @Input("data")
+  data!: PlotWidget;
+
+  
+}
diff --git a/pdb-js/src/app/dashboard.service.ts b/pdb-js/src/app/dashboard.service.ts
index 0b2fbc4..4125d11 100644
--- a/pdb-js/src/app/dashboard.service.ts
+++ b/pdb-js/src/app/dashboard.service.ts
@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+import { PlotConfig } from './plot.service';
 
 @Injectable({
   providedIn: 'root'
@@ -32,7 +33,7 @@ export class DashboardCreationData{
 }
 
 export class Dashboard{
-  constructor(public id: string, public name: string, public description: string, public texts: [TextWidget]){}
+  constructor(public id: string, public name: string, public description: string, public texts: TextWidget[], public plots: PlotWidget[]){}
 }
 
 export class DashboardList{
@@ -49,7 +50,7 @@ export class TextWidget  extends BaseWidget {
   }
 }
 export class PlotWidget extends BaseWidget {
-  constructor(override size: 'SMALL'|'MEDIUM'|'LARGE') {
+  constructor(override size: 'SMALL'|'MEDIUM'|'LARGE', public config: PlotConfig) {
     super('PLOT', size);
   }
 }
\ 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 f205929..6a1192a 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.scss
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.scss
@@ -1,7 +1,7 @@
 :host{
   font-weight: bold;
   width: 100%;
-  height: calc(100% - 29px);
+  height: calc(100% - 43px);
   position: absolute;
   display: grid;
 }
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 d3a7f6a..72c3439 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.ts
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts
@@ -180,15 +180,14 @@ export class VisualizationPageComponent implements OnInit {
       }
     });
   }
-  
-  createPlotRequest(): PlotRequest {
+
+  createPlotConfig(): PlotConfig {
     const aggregates = new Array<string>();
     this.selectedPlotType.forEach(a => aggregates.push(a.id));
     
     const y1 = this.y1AxisDefinitionComponent.getAxisDefinition();
     const y2 = this.y2AxisDefinitionComponent ? this.y2AxisDefinitionComponent.getAxisDefinition() : undefined;
-    const results = document.getElementById("results");
-    
+   
     const config = new PlotConfig(
       this.query.query,
       this.groupBy.map(o => o.name),
@@ -202,6 +201,13 @@ export class VisualizationPageComponent implements OnInit {
       this.intervalValue,
       this.renderBarChartTickLabels, 
     );
+    return config;
+  }
+  
+  createPlotRequest(): PlotRequest {
+     const results = document.getElementById("results");
+    
+    const config = this.createPlotConfig();
 
     const request = new PlotRequest(
       results != null ? results.offsetHeight-1: 1024,
diff --git a/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/ScatterAggregator.java b/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/ScatterAggregator.java
index 6972366..2f7db43 100644
--- a/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/ScatterAggregator.java
+++ b/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/ScatterAggregator.java
@@ -45,8 +45,8 @@ public class ScatterAggregator implements CustomAggregator {
         final YAxisDefinition yAxisDefinition = plotSettings.getyAxisDefinition(yAxis);
 
         final boolean automaticRange = yAxisDefinition.getRangeUnit().isAutomatic();
-        minValue = automaticRange ? 0 : yAxisDefinition.getRangeMinForUnit();
-        maxValue = automaticRange ? Long.MAX_VALUE : yAxisDefinition.getRangeMaxForUnit();
+        minValue = automaticRange ? 0 : yAxisDefinition.rangeMinForUnit();
+        maxValue = automaticRange ? Long.MAX_VALUE : yAxisDefinition.rangeMaxForUnit();
         valuesPerPixel = yAxisDefinition.getAxisScale() == AxisScale.LINEAR && !automaticRange
                 ? Math.max(1, (maxValue - minValue) / plotAreaHeightInPx)
                 : 1;
diff --git a/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/YAxisDefinition.java b/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/YAxisDefinition.java
index 367ff5f..3b87c57 100644
--- a/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/YAxisDefinition.java
+++ b/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/YAxisDefinition.java
@@ -15,11 +15,11 @@ public class YAxisDefinition {
         this.axisScale = axisScale;
     }
 
-    public long getRangeMinForUnit() {
+    public long rangeMinForUnit() {
         return rangeUnit.valueForUnit(rangeMin);
     }
 
-    public long getRangeMaxForUnit() {
+    public long rangeMaxForUnit() {
         return rangeUnit.valueForUnit(rangeMax);
     }
 
@@ -51,8 +51,4 @@ public class YAxisDefinition {
         this.rangeUnit = rangeUnit;
     }
 
-    public boolean isLogscale() {
-        return axisScale == AxisScale.LOG10;
-    }
-
 }
diff --git a/pdb-plotting/src/main/java/org/lucares/recommind/logs/AxisTime.java b/pdb-plotting/src/main/java/org/lucares/recommind/logs/AxisTime.java
index 90ae53b..a91c6c7 100644
--- a/pdb-plotting/src/main/java/org/lucares/recommind/logs/AxisTime.java
+++ b/pdb-plotting/src/main/java/org/lucares/recommind/logs/AxisTime.java
@@ -52,15 +52,15 @@ public class AxisTime {
 
         final int graphOffset = yAxisDefinition.getAxisScale() == AxisScale.LINEAR ? 0 : 1;
         if (yAxisDefinition.hasRange()) {
-            final long min = Math.max(yAxisDefinition.getRangeMinForUnit(), graphOffset);
-            final long max = yAxisDefinition.getRangeMaxForUnit();
+            final long min = Math.max(yAxisDefinition.rangeMinForUnit(), graphOffset);
+            final long max = yAxisDefinition.rangeMaxForUnit();
             result.setFrom(String.valueOf(min));
             result.setTo(String.valueOf(max));
         } else {
             result.setFrom(String.valueOf(graphOffset));
         }
 
-        result.setLogscale(yAxisDefinition.isLogscale());
+        result.setLogscale(yAxisDefinition.getAxisScale() == AxisScale.LOG10);
 
         result.setTics(YAxisTicks.computeYTicks(settings, yAxis, dataSeries));
         result.setShowGrid(yAxis == GnuplotAxis.Y1);
diff --git a/pdb-plotting/src/main/java/org/lucares/recommind/logs/YAxisTicks.java b/pdb-plotting/src/main/java/org/lucares/recommind/logs/YAxisTicks.java
index 7826340..4490c6b 100644
--- a/pdb-plotting/src/main/java/org/lucares/recommind/logs/YAxisTicks.java
+++ b/pdb-plotting/src/main/java/org/lucares/recommind/logs/YAxisTicks.java
@@ -25,8 +25,8 @@ class YAxisTicks {
         final long yRangeMax;
         final long yRangeMin;
         if (yAxisDefinition.hasRange()) {
-            yRangeMin = yAxisDefinition.getRangeMinForUnit();
-            yRangeMax = yAxisDefinition.getRangeMaxForUnit();
+            yRangeMin = yAxisDefinition.rangeMinForUnit();
+            yRangeMax = yAxisDefinition.rangeMaxForUnit();
         } else {
             yRangeMin = 0;
             yRangeMax = DataSeries.maxValue(dataSeries);
diff --git a/pdb-ui/src/main/java/org/lucares/pdbui/dashboard/Dashboard.java b/pdb-ui/src/main/java/org/lucares/pdbui/dashboard/Dashboard.java
index 17daba4..6c1cb5a 100644
--- a/pdb-ui/src/main/java/org/lucares/pdbui/dashboard/Dashboard.java
+++ b/pdb-ui/src/main/java/org/lucares/pdbui/dashboard/Dashboard.java
@@ -22,6 +22,8 @@ public class Dashboard {
 
     private List<TextWidget> texts = new ArrayList<>();
 
+    private List<PlotWidget> plots = new ArrayList<>();
+
     public Dashboard() {
         super();
 
@@ -68,4 +70,11 @@ public class Dashboard {
         this.texts = texts;
     }
 
+    public void setPlots(final List<PlotWidget> plots) {
+        this.plots = plots;
+    }
+
+    public List<PlotWidget> getPlots() {
+        return plots;
+    }
 }
diff --git a/pdb-ui/src/main/java/org/lucares/pdbui/dashboard/PlotWidget.java b/pdb-ui/src/main/java/org/lucares/pdbui/dashboard/PlotWidget.java
index 58751e0..16646a5 100644
--- a/pdb-ui/src/main/java/org/lucares/pdbui/dashboard/PlotWidget.java
+++ b/pdb-ui/src/main/java/org/lucares/pdbui/dashboard/PlotWidget.java
@@ -1,12 +1,16 @@
 package org.lucares.pdbui.dashboard;
 
+import org.lucares.pdbui.domain.PlotConfig;
+
 public class PlotWidget extends BaseDashboardWidget {
 
-    public PlotWidget() {
-        super();
+    private PlotConfig config;
+
+    public PlotConfig getConfig() {
+        return config;
     }
 
-    public PlotWidget(final DashboardWidgetSize size) {
-        super(DashboardWidgetType.PLOT, size);
+    public void setConfig(final PlotConfig config) {
+        this.config = config;
     }
 }