add date picker to dashboard page

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,12 +9,13 @@ 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',
   templateUrl: './dashboard.component.html'
 })
-export class DashboardComponent implements OnInit {
+export class DashboardComponent implements OnInit{
 
   dashboard?: Dashboard = undefined;
 
@@ -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,10 +81,13 @@ 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)=> {
-            plot.plotResponse= response;
+            plot.plotResponse = response;
           },
           error: (error:any)=> {
             plot.error = error;