Disable graph refresh when it is not visible (#5198)

package-lock.json

@@ -11930,9 +11930,9 @@
       "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q="
     },
     "http-proxy": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
-      "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "dev": true,
       "requires": {
         "eventemitter3": "^4.0.0",
@@ -12375,6 +12375,11 @@
       "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
       "dev": true
     },
+    "intersection-observer": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.10.0.tgz",
+      "integrity": "sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ=="
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -15861,6 +15866,15 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "ng-in-viewport": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ng-in-viewport/-/ng-in-viewport-6.1.0.tgz",
+      "integrity": "sha512-mJlsiGBhOLiqgM4S36zg9IWjv0YsOPuoVB1T4mKaq4NZ2aHB/8t5n5pB+pP93k1mmSUhp+cPscGua5o7gJrURg==",
+      "requires": {
+        "intersection-observer": ">=0.5.1",
+        "tslib": ">=1.9.0"
+      }
+    },
     "ngx-cookie-service": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-2.4.0.tgz",

package.json

@@ -124,6 +124,7 @@
     "highlight.js": "10.0.3",
     "js-yaml": "3.13.1",
     "material-design-icons": "3.0.1",
+    "ng-in-viewport": "6.1.0",
     "ngx-cookie-service": "2.4.0",
     "ngx-filter-pipe": "2.1.2",
     "normalize.css": "8.0.1",

src/app/frontend/common/components/graph/component.ts

@@ -14,6 +14,7 @@
 
 import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
 import {DataPoint, Metric} from '@api/backendapi';
+import {ViewportMetadata} from '@api/frontendapi';
 import {curveMonotoneX, timeFormat} from 'd3';
 
 import {FormattedValue} from './helper';
@@ -38,6 +39,7 @@ export class GraphComponent implements OnInit, OnChanges {
 
   private suffixMap_: Map<number, string> = new Map<number, string>();
   private yAxisSuffix_ = '';
+  private visible_ = false;
 
   ngOnInit(): void {
     if (!this.graphType) {
@@ -50,8 +52,14 @@ export class GraphComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(_: SimpleChanges): void {
-    this.suffixMap_.clear();
-    this.series = this.generateSeries_();
+    if (this.visible_) {
+      this.suffixMap_.clear();
+      this.series = this.generateSeries_();
+    }
+  }
+
+  changeState(isInViewPort: ViewportMetadata): void {
+    this.visible_ = isInViewPort.visible;
   }
 
   getTooltipValue(value: number): string {

src/app/frontend/common/components/graph/template.html

@@ -15,6 +15,9 @@ limitations under the License.
 -->
 
 <ngx-charts-area-chart fxFlex
+                       inViewport
+                       [inViewportOptions]="{partial: false}"
+                       (inViewportAction)="changeState($event)"
                        [xAxis]="true"
                        [yAxis]="true"
                        [showYAxisLabel]="true"

src/app/frontend/shared.module.ts

@@ -43,6 +43,7 @@ import {MatTabsModule} from '@angular/material/tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipModule} from '@angular/material/tooltip';
 import {RouterModule} from '@angular/router';
+import {InViewportModule} from 'ng-in-viewport';
 import {FilterPipeModule} from 'ngx-filter-pipe';
 
 import {PipesModule} from './common/pipes/module';
@@ -88,6 +89,7 @@ const SHARED_DEPENDENCIES = [
   RouterModule,
   FilterPipeModule,
   NgxChartsModule,
+  InViewportModule,
 
   // Custom application modules
   PipesModule,

src/app/frontend/typings/frontendapi.ts

@@ -134,3 +134,8 @@ export interface PluginsConfig {
   plugins: PluginMetadata[];
   errors?: object[];
 }
+
+export interface ViewportMetadata {
+  target: HTMLElement;
+  visible: boolean;
+}