fix: charts would load multiple times whenever dashboard would init (#1933)

* skip first time loading, merged two subscriptions, and increased throttle time so that activating the filter does not trigger loading two times

* AB#76508_fix_grids_loading_multiple_times refactor: merge filter enable and filter value properties into same stream as we are using it in all the widgets to trigger filtering values refactor: apply the new merge stream into the components using both filter enable and filter value stream for the same purpose fix: trigger filter value only when source changes to avoid multiple stream emitted values fix: added some timeout cleaners to avoid memory leaks

* AB#76508_fix_grids_loading_multiple_times refactor: listen to filter value changes only for related widget as the filter injection method would take care of applying filters or not if enabled or not. fix: add again the isEnabled filter property for filter toggle and dashboard loading

---------

Co-authored-by: Unai Zalba <[email protected]>
Co-authored-by: Antoine Hurard <[email protected]>

Author: 3 people

apps/back-office/src/app/dashboard/pages/dashboard/dashboard.component.ts

@@ -333,6 +333,7 @@ export class DashboardComponent
           this.showFilter = this.dashboard.showFilter ?? false;
           this.contextService.isFilterEnabled.next(this.showFilter);
         } else {
+          this.contextService.isFilterEnabled.next(false);
           this.snackBar.openSnackBar(
             this.translate.instant('common.notifications.accessNotProvided', {
               type: this.translate
@@ -688,8 +689,8 @@ export class DashboardComponent
             this.handleDashboardMutationResponse(errors, data);
           },
           complete: () => {
-            this.loading = false;
             this.contextService.isFilterEnabled.next(this.showFilter);
+            this.loading = false;
           },
         });
     }

apps/front-office/src/app/application/pages/dashboard/dashboard.component.ts

@@ -214,6 +214,7 @@ export class DashboardComponent
           this.showFilter = this.dashboard.showFilter ?? false;
           this.contextService.isFilterEnabled.next(this.showFilter);
         } else {
+          this.contextService.isFilterEnabled.next(false);
           this.snackBar.openSnackBar(
             this.translate.instant('common.notifications.accessNotProvided', {
               type: this.translate

libs/shared/src/lib/components/aggregation/aggregation-grid/aggregation-grid.component.ts

@@ -100,20 +100,12 @@ export class AggregationGridComponent
   }
 
   ngOnInit(): void {
-    this.getAggregationData();
-    this.getAggregationFields();
-
     this.contextService.filter$
       .pipe(debounceTime(500), takeUntil(this.destroy$))
       .subscribe(() => {
         this.getAggregationData();
       });
-
-    this.contextService.isFilterEnabled$
-      .pipe(debounceTime(500), takeUntil(this.destroy$))
-      .subscribe(() => {
-        this.getAggregationData();
-      });
+    this.getAggregationFields();
   }
 
   ngOnChanges(): void {

libs/shared/src/lib/components/dashboard-filter/dashboard-filter.component.ts

@@ -169,6 +169,8 @@ export class DashboardFilterComponent
 
   override ngOnDestroy(): void {
     super.ngOnDestroy();
+    // Trigger filtering with no values on deactivating context filter
+    this.contextService.filter.next({});
     this.resizeObserver.disconnect();
   }
 
@@ -446,7 +448,6 @@ export class DashboardFilterComponent
         };
         return acc;
       }, {});
-
     this.contextService.filter.next(surveyData);
     this.ngZone.run(() => {
       this.quickFilters = displayValues

libs/shared/src/lib/components/ui/map/map.component.ts

@@ -52,7 +52,13 @@ import {
   isEqual,
   flatMapDeep,
 } from 'lodash';
-import { BehaviorSubject, concatMap, debounceTime, takeUntil } from 'rxjs';
+import {
+  BehaviorSubject,
+  concatMap,
+  debounceTime,
+  filter,
+  takeUntil,
+} from 'rxjs';
 import { MapPopupService } from './map-popup/map-popup.service';
 import { Platform } from '@angular/cdk/platform';
 import { ContextService } from '../../../services/context/context.service';
@@ -155,6 +161,9 @@ export class MapComponent
   /** Refreshing layers. When true, should prevent layers to be duplicated  */
   private refreshingLayers = new BehaviorSubject<boolean>(true);
 
+  /** Timeout listeners */
+  firstLoadEmitTimeoutListener!: NodeJS.Timeout;
+
   /**
    * Map widget component
    *
@@ -244,7 +253,10 @@ export class MapComponent
 
     this.setUpMapListeners();
 
-    setTimeout(() => {
+    if (this.firstLoadEmitTimeoutListener) {
+      clearTimeout(this.firstLoadEmitTimeoutListener);
+    }
+    this.firstLoadEmitTimeoutListener = setTimeout(() => {
       this.map.invalidateSize();
       this.mapEvent.emit({
         type: MapEventType.FIRST_LOAD,
@@ -256,15 +268,26 @@ export class MapComponent
       });
       //}
     }, 1000);
+
     /**
      * Keep checking until filters are applied in order to apply next one
      */
+    let filterCheckTimeoutListener: NodeJS.Timeout;
     const loadNextFilters = (): Promise<void> => {
       const checkAgain = (resolve: () => void) => {
         if (this.refreshingLayers.getValue()) {
+          if (filterCheckTimeoutListener) {
+            clearTimeout(filterCheckTimeoutListener);
+          }
           resolve();
         } else {
-          setTimeout(() => checkAgain(resolve), 100);
+          if (filterCheckTimeoutListener) {
+            clearTimeout(filterCheckTimeoutListener);
+          }
+          filterCheckTimeoutListener = setTimeout(
+            () => checkAgain(resolve),
+            100
+          );
         }
       };
       return new Promise(checkAgain);
@@ -274,22 +297,23 @@ export class MapComponent
     this.contextService.filter$
       .pipe(
         debounceTime(500),
+        filter(() => {
+          const filters = this.contextService.filter.getValue();
+          return !isEqual(filters, this.appliedDashboardFilters);
+        }),
         concatMap(() => loadNextFilters()),
         takeUntil(this.destroy$)
       )
       .subscribe(() => {
         this.filterLayers();
       });
-
-    this.contextService.isFilterEnabled$
-      .pipe(debounceTime(500), takeUntil(this.destroy$))
-      .subscribe(() => {
-        this.filterLayers();
-      });
   }
 
   override ngOnDestroy(): void {
     super.ngOnDestroy();
+    if (this.firstLoadEmitTimeoutListener) {
+      clearTimeout(this.firstLoadEmitTimeoutListener);
+    }
     this.resizeObserver?.disconnect();
   }
 
@@ -967,9 +991,6 @@ export class MapComponent
   private async filterLayers() {
     this.document.getElementById('layer-control-button-close')?.click();
     const filters = this.contextService.filter.getValue();
-    if (isEqual(filters, this.appliedDashboardFilters)) {
-      return;
-    }
     this.refreshingLayers.next(false);
     this.appliedDashboardFilters = filters;
     const { layers: layersToGet, controls } = this.extractSettings();

libs/shared/src/lib/components/widgets/chart/chart.component.ts

@@ -1,19 +1,19 @@
 import {
-  ChangeDetectorRef,
   Component,
   Input,
   OnChanges,
   SimpleChanges,
   ViewChild,
   Inject,
+  OnInit,
 } from '@angular/core';
 import { LineChartComponent } from '../../ui/charts/line-chart/line-chart.component';
 import { PieDonutChartComponent } from '../../ui/charts/pie-donut-chart/pie-donut-chart.component';
 import { BarChartComponent } from '../../ui/charts/bar-chart/bar-chart.component';
 import { uniq, get, groupBy, isEqual } from 'lodash';
 import { AggregationService } from '../../../services/aggregation/aggregation.service';
 import { UnsubscribeComponent } from '../../utils/unsubscribe/unsubscribe.component';
-import { debounceTime, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 import { BehaviorSubject } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 import { ContextService } from '../../../services/context/context.service';
@@ -32,7 +32,10 @@ const DEFAULT_FILE_NAME = 'chart';
   templateUrl: './chart.component.html',
   styleUrls: ['./chart.component.scss'],
 })
-export class ChartComponent extends UnsubscribeComponent implements OnChanges {
+export class ChartComponent
+  extends UnsubscribeComponent
+  implements OnInit, OnChanges
+{
   // === DATA ===
   public loading = true;
   public options: any = null;
@@ -78,38 +81,22 @@ export class ChartComponent extends UnsubscribeComponent implements OnChanges {
    * @param aggregationService Shared aggregation service
    * @param translate Angular translate service
    * @param contextService Shared context service
-   * @param cdr Angular change detector
    * @param document document
    */
   constructor(
     private aggregationService: AggregationService,
     private translate: TranslateService,
     private contextService: ContextService,
-    private cdr: ChangeDetectorRef,
     @Inject(DOCUMENT) private document: Document
   ) {
     super();
+  }
 
-    this.contextService.filter$
-      .pipe(debounceTime(500), takeUntil(this.destroy$))
-      .subscribe(() => {
-        this.loadChart();
-        this.getOptions();
-      });
-
-    this.contextService.isFilterEnabled$
-      .pipe(debounceTime(500), takeUntil(this.destroy$))
-      .subscribe(() => {
-        this.loadChart();
-        this.getOptions();
-      });
-
-    // Not entirely sure why the change detection is not happening automatically
-    // when the series are updated, but this forces it to happen
-    this.series$.pipe(takeUntil(this.destroy$)).subscribe(() => {
-      setTimeout(() => {
-        this.cdr.detectChanges();
-      }, 100);
+  ngOnInit(): void {
+    this.contextService.filter$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.series.next([]);
+      this.loadChart();
+      this.getOptions();
     });
   }
 
@@ -133,7 +120,9 @@ export class ChartComponent extends UnsubscribeComponent implements OnChanges {
       },
     };
 
-    if (!isEqual(previousDatasource, currentDatasource)) this.loadChart();
+    if (!isEqual(previousDatasource, currentDatasource)) {
+      this.loadChart();
+    }
     this.getOptions();
   }
 

libs/shared/src/lib/components/widgets/summary-card/summary-card.component.ts

@@ -196,7 +196,11 @@ export class SummaryCardComponent
     this.setupDynamicCards();
     this.setupGridSettings();
     this.searchControl.valueChanges
-      .pipe(debounceTime(2000), distinctUntilChanged())
+      .pipe(
+        debounceTime(2000),
+        distinctUntilChanged(),
+        takeUntil(this.destroy$)
+      )
       .subscribe((value) => {
         this.handleSearch(value || '');
       });
@@ -212,18 +216,6 @@ export class SummaryCardComponent
           totalItems: 0,
         });
       });
-
-    this.contextService.isFilterEnabled$
-      .pipe(debounceTime(500), takeUntil(this.destroy$))
-      .subscribe(() => {
-        this.onPage({
-          pageSize: DEFAULT_PAGE_SIZE,
-          skip: 0,
-          previousPageIndex: 0,
-          pageIndex: 0,
-          totalItems: 0,
-        });
-      });
   }
 
   ngAfterViewInit(): void {

libs/shared/src/lib/services/context/context.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, filter, map, pairwise } from 'rxjs';
 import { ApplicationService } from '../application/application.service';
 import { Application } from '../../models/application.model';
 import localForage from 'localforage';
@@ -8,7 +8,7 @@ import {
   FilterDescriptor,
 } from '@progress/kendo-data-query';
 import { cloneDeep } from '@apollo/client/utilities';
-import { isNil, isEmpty, get } from 'lodash';
+import { isNil, isEmpty, get, isEqual } from 'lodash';
 
 /**
  * Application context service
@@ -35,7 +35,16 @@ export class ContextService {
 
   /** @returns filter value as observable */
   get filter$() {
-    return this.filter.asObservable();
+    return this.filter.asObservable().pipe(
+      pairwise(),
+      // We only emit a filter value if filter value changes and we send back the actual(curr) value
+      filter(
+        ([prev, curr]: [Record<string, any>, Record<string, any>]) =>
+          !isEqual(prev, curr)
+      ),
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      map(([prev, curr]: [Record<string, any>, Record<string, any>]) => curr)
+    );
   }
 
   /** @returns filterStructure value as observable */