add date picker to dashboard page

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -3,6 +3,16 @@
     width: 100%;
     height: 100%;
   }
+  .toolbar {
+    display: flex;
+    flex-direction: row;
+  }
+  .toolbar #filter-date-range{
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
   .center {
     position: absolute;
     top: 50%;
@@ -37,6 +47,9 @@
     flex-basis: 0;
     
   }
+  .editable {
+    padding: 0.5em;
+  }
 
   .editable-hovered {
     visibility: hidden;
@@ -73,12 +86,14 @@
     <button mat-button  (click)="addText()">Add Text</button>
     <button mat-button (click)="addPlot()">Add Plot</button>
     <button class="save-button" mat-button (click)="save()" [disabled]="!isDirty()">Save</button>
+    <div id="filter-date-range">
+      Date range: <app-date-picker #datePicker (dateValueSelected)="updateDateRange($event)" ></app-date-picker>
+    </div>
   </div>
   <div class="editable">
     <h1>{{dashboard.name}}<button mat-icon-button (click)="editNameAndDescription()" class="editable-hovered"><img src="/assets/img/edit-outline.svg"/></button></h1>
     <p>{{dashboard.description}}</p>
   </div>
-
   <div cdkDropListGroup class="dashboard-area">
     <div 
       cdkDropList

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

@@ -1,6 +1,6 @@
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, ElementRef, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
@@ -9,6 +9,7 @@ import { PlotConfig, PlotResponse, PlotService } from 'src/app/plot.service';
 import { NewDashboardComponent } from '../new-dashboard/new-dashboard.component';
 import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component';
 import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component';
+import { DatePickerChange, DatePickerComponent } from 'src/app/components/datepicker/date-picker.component';
 
 @Component({
   selector: 'app-dashboard',
@@ -24,6 +25,9 @@ export class DashboardComponent implements OnInit {
 
   plotWidgetRenderData: PlotWidgetRenderData[] = [];
 
+  @ViewChild("datePicker")
+  datePicker!: DatePickerComponent;
+
   constructor(
     private route: ActivatedRoute,  
     private service: DashboardService, 
@@ -58,6 +62,13 @@ export class DashboardComponent implements OnInit {
       });
   }
 
+  updateDateRange(e: DatePickerChange) {
+    this.plotWidgetRenderData.forEach(r => {
+      r.widget.config.dateRange = e.value;
+    });
+    this.loadImages(0, this.plotWidgetRenderData);
+  }
+
   isDirty() {
     return this.pristineDashboardJSON !== JSON.stringify(this.dashboard);
   }
@@ -70,6 +81,9 @@ export class DashboardComponent implements OnInit {
       if (plot.isAborted) {
         this.loadImages(index +1 , plotWidgetQueue);
       }else{
+
+        plot.plotResponse = undefined; // remove old image and show loading icon
+
         const request = PlotWidget.createPlotRequest(plot.widget, plot.submitterId);
         this.plotService.sendPlotRequest(request).subscribe({
           next: (response: PlotResponse)=> {

pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import {  Component, EventEmitter, Input, Output,  ViewChild, input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ConfirmationDialogComponent } from 'src/app/confirmation-dialog/confirmation-dialog.component';
 import { PlotWidget, PlotWidgetRenderData } from 'src/app/dashboard.service';
@@ -18,14 +18,13 @@ export class PlotWidgetComponent  {
   public thumbnailUrl = "";
 
 
-  @ViewChild("plotView") plotView!: PlotViewComponent;
+  //@ViewChild("plotView") plotView!: PlotViewComponent;
 
   @Output()
   deleted : EventEmitter<string> = new EventEmitter<string>();
 
   constructor(private dialog: MatDialog, private service: PlotService){}
 
-
   hasRender(name: string): boolean{
     return this.data !== undefined && this.data.plotResponse !== undefined && this.data.plotResponse?.rendered[name] !== undefined;
   }