make plot view standalone

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

@@ -1,5 +1,7 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { DataType, AxesTypes, PlotResponseStats  } from '../plot.service';
+import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest  } from '../plot.service';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import * as moment from 'moment';
 
 @Component({
   selector: 'pdb-plot-view',
@@ -8,6 +10,7 @@ import { DataType, AxesTypes, PlotResponseStats  } from '../plot.service';
 })
 export class PlotViewComponent implements OnInit {
 
+  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
@@ -19,12 +22,12 @@ export class PlotViewComponent implements OnInit {
   stats: PlotResponseStats | null = null;
   
   axes!: AxesTypes;
-  
+
   @Output()
-  zoomRange : EventEmitter<SelectionRange> = new EventEmitter<SelectionRange>();
-  
+  loadingEvent : EventEmitter<LoadingEvent> = new EventEmitter<LoadingEvent>();
+
   @Output()
-  zoomWithDateAnchor : EventEmitter<DateAnchor> = new EventEmitter<DateAnchor>();
+  dateRangeUpdateEvent : EventEmitter<string> = new EventEmitter<string>();
   
   in_drag_mode = false;
   drag_start_x = 0;
@@ -41,10 +44,22 @@ export class PlotViewComponent implements OnInit {
 
   showStats = false; 
 
-  constructor() { }
+  config? : PlotConfig;
+
+  submitterId = crypto.randomUUID();
+
+  constructor(private service : PlotService, private snackBar: MatSnackBar) { }
 
   ngOnInit() {
   }
+
+
+  showError(message:string) {
+    this.snackBar.open(message, "", {
+      duration: 5000,
+      verticalPosition: 'top'
+    });
+  }
   
   hideZoomInSlider() {
     this.zoomInSliderStyleDisplay = "none";
@@ -147,7 +162,7 @@ export class PlotViewComponent implements OnInit {
         const startPercentOfDateRange = startPxWithinPlotArea / widthPlotArea;
         const endPercentOfDateRange = endPxWithinPlotArea / widthPlotArea;
         
-        this.zoomRange.emit(new SelectionRange(startPercentOfDateRange, endPercentOfDateRange));
+        this.zoomRange(new SelectionRange(startPercentOfDateRange, endPercentOfDateRange));
       }     
     }
   }
@@ -161,6 +176,25 @@ export class PlotViewComponent implements OnInit {
       this.hideZoomInSlider();
     }
   }
+
+  setDateRange(startDate: any, endDate: any) {
+    const formattedStartDate = startDate.format(this.DATE_PATTERN);
+    const formattedEndDate = endDate.format(this.DATE_PATTERN);
+    
+    const newDateRange = formattedStartDate+" - "+formattedEndDate;
+    
+    //(<HTMLInputElement>document.getElementById("search-date-range")).value = newDateRange;
+    this.dateRangeUpdateEvent.emit(newDateRange);
+    //this.plot();
+  }
+
+  zoomRange(range: SelectionRange) {
+    this.shiftDate(this.config?.dateRange!, range.startPercentOfDateRange, range.endPercentOfDateRange-1);
+  }
+  
+  zoomWithDateAnchor(dateAnchor: DateAnchor){
+    this.shiftDateByAnchor(this.config?.dateRange!, dateAnchor.cursorPercentOfDateRange, dateAnchor.zoomFactor);
+  }
   
   zoomByScroll(event: WheelEvent) {
     if (this.isInImage(event) && event.deltaY != 0 && this.axes.hasXAxis(DataType.Time)) {
@@ -175,7 +209,7 @@ export class PlotViewComponent implements OnInit {
       
       const zoomFactor = event.deltaY < 0 ? 0.5 : 2;
       
-      this.zoomWithDateAnchor.emit(new DateAnchor(cursorPercentOfDateRange, zoomFactor));
+      this.zoomWithDateAnchor(new DateAnchor(cursorPercentOfDateRange, zoomFactor));
     }
   }
 
@@ -186,6 +220,100 @@ export class PlotViewComponent implements OnInit {
   hideDetails() {
     this.showStats = false;
   }
+
+
+
+  plot(config : PlotConfig, axes: AxesTypes){
+    this.config = config;
+    this.axes = axes;
+
+    const request = this.createPlotRequest();
+    
+    this.loadingEvent.emit(new LoadingEvent(true));
+    const x = this.service.sendPlotRequest(request).subscribe({
+      next: (plotResponse: PlotResponse) => {
+        this.imageUrl = "http://"+window.location.hostname+':'+window.location.port+'/'+plotResponse.imageUrl;
+        this.stats = plotResponse.stats;
+        document.dispatchEvent(new Event("invadersPause", {}));
+        this.loadingEvent.emit(new LoadingEvent(false));
+      },
+      error: (error:any) => {
+        this.imageUrl = '';
+        this.stats = null;
+        this.showError(error.error.message);
+        document.dispatchEvent(new Event("invadersPause", {}));
+        this.loadingEvent.emit(new LoadingEvent(false));
+      }
+    });
+  }
+
+  createPlotRequest(): PlotRequest {
+    const results = document.getElementById("results");
+   
+   
+
+   const request = new PlotRequest(
+     results != null ? results.offsetHeight-1: 1024,
+     results != null ? results.offsetWidth-1 : 1024,
+     300, // thumbnailMaxWidth
+     200, // thumbnailMaxHeight
+     false, // keyOutside
+     false, // generateThumbnail
+     this.submitterId,
+     this.config!);
+   return request;
+ }
+
+ /**
+   * Zoom in/out by zoomFaktor, so that the anchorInPercentOfDateRange keeps the same position.
+   *
+   * shiftDateByAnchor(dateRangeAsString, 0.20, 0.5) zooms in by 50%, so that the date that was at 20% before the zoom is still at 20% after the zoom
+   * shiftDateByAnchor(dateRangeAsString, 0.33, 2) zooms out by 50%, so that the date that was at 33% before the zoom is still at 33% after the zoom
+   */
+ shiftDateByAnchor(dateRange:string, anchorInPercentOfDateRange:number, zoomFactor:number)
+ {
+     const dateRangeParsed = this.parseDateRange(dateRange);
+     const dateRangeInSeconds = dateRangeParsed.duration.asSeconds();
+     
+     const anchorTimestampInSeconds = dateRangeParsed.startDate.clone().add(Math.floor(dateRangeInSeconds*anchorInPercentOfDateRange), "seconds");
+     const newDateRangeInSeconds = dateRangeInSeconds * zoomFactor;
+     
+     const newStartDate = anchorTimestampInSeconds.clone().subtract(newDateRangeInSeconds*anchorInPercentOfDateRange, "seconds");
+     const newEndDate = newStartDate.clone().add({seconds: newDateRangeInSeconds});;
+     
+     this.setDateRange(newStartDate, newEndDate);
+ }
+ 
+ /**
+  * Zoom in/out or shift date by adding factorStartDate*dateRangeInSeconds seconds to the start date
+  * and factorEndDate*dateRangeInSeconds seconds to the end date.
+  * 
+  * shiftDate(dateRangeAsString, 0.25, -0.25) will zoom in, making the range half its size
+  * shiftDate(dateRangeAsString, -0.5, 0.5) will zoom out, making the range double its size
+  * shiftDate(dateRangeAsString, -0.5, -0.5) will move the range by half its size to older values
+  * shiftDate(dateRangeAsString, 1, 1) will move the range by its size to newer values
+  */
+ shiftDate(dateRange: string, factorStartDate: number, factorEndDate: number)
+ {
+     const dateRangeParsed = this.parseDateRange(dateRange);
+     const dateRangeInSeconds = dateRangeParsed.duration.asSeconds();
+     
+     const newStartDate = dateRangeParsed.startDate.add({seconds: dateRangeInSeconds*factorStartDate});
+     const newEndDate = dateRangeParsed.endDate.add({seconds: dateRangeInSeconds*factorEndDate});
+     
+     this.setDateRange(newStartDate, newEndDate);
+ }
+ 
+  parseDateRange(dateRangeAsString : string) : DateRange {
+   const startDate = moment(dateRangeAsString.slice(0, 19));
+   const endDate = moment(dateRangeAsString.slice(22, 41));
+   
+   return {
+     startDate: startDate,
+     endDate: endDate,
+     duration: moment.duration(endDate.diff(startDate))
+   };
+  }
 }
 
 export class SelectionRange {
@@ -206,4 +334,14 @@ export class DateAnchor {
     this.cursorPercentOfDateRange = cursorPercentOfDateRange;
     this.zoomFactor = zoomFactor;
   }
+}
+
+export class LoadingEvent {
+  constructor(public loading: boolean){}
+}
+
+export class DateRange {
+  startDate: any;
+  endDate: any;
+  duration: any;
 }