From ce5f4d6d523ec4ab4d8d4571485364cf2c0836dd Mon Sep 17 00:00:00 2001
From: hriday-panchasara <hriday.panchasara@ericsson.com>
Date: Tue, 22 Mar 2022 15:21:34 -0500
Subject: [PATCH] throttle xy-chart data update

fixes #470

fixes #453

Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
---
 .../src/components/datatree-output-component.tsx             | 1 -
 .../react-components/src/components/xy-output-component.tsx  | 5 ++++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/components/datatree-output-component.tsx b/packages/react-components/src/components/datatree-output-component.tsx
index a317454cb..f70b070b0 100644
--- a/packages/react-components/src/components/datatree-output-component.tsx
+++ b/packages/react-components/src/components/datatree-output-component.tsx
@@ -8,7 +8,6 @@ import { EntryTree } from './utils/filter-tree/entry-tree';
 import { getAllExpandedNodeIds } from './utils/filter-tree/utils';
 import { TreeNode } from './utils/filter-tree/tree-node';
 import ColumnHeader from './utils/filter-tree/column-header';
-import { cloneDeep } from 'lodash';
 import debounce from 'lodash.debounce';
 
 type DataTreeOutputProps = AbstractOutputProps & {
diff --git a/packages/react-components/src/components/xy-output-component.tsx b/packages/react-components/src/components/xy-output-component.tsx
index 24db26507..ada969adc 100644
--- a/packages/react-components/src/components/xy-output-component.tsx
+++ b/packages/react-components/src/components/xy-output-component.tsx
@@ -18,6 +18,7 @@ import { BIMath } from 'timeline-chart/lib/bigint-utils';
 import { scaleLinear } from 'd3-scale';
 import { axisLeft } from 'd3-axis';
 import { select } from 'd3-selection';
+import { throttle } from 'lodash';
 
 type XYOuputState = AbstractOutputState & {
     selectedSeriesId: number[];
@@ -83,6 +84,8 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
 
     private onSelectionChanged = (payload: { [key: string]: string; }) => this.doHandleSelectionChangedSignal(payload);
 
+    private _throttledUpdateXY = throttle(() => this.updateXY(), 500);
+
     constructor(props: AbstractOutputProps) {
         super(props);
         this.state = {
@@ -167,7 +170,7 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
         const outputStatusChanged = this.state.outputStatus !== prevState.outputStatus;
         const needToUpdate = viewRangeChanged || checkedSeriesChanged || collapsedNodesChanged || chartWidthChanged || outputStatusChanged;
         if (needToUpdate) {
-            this.updateXY();
+            this._throttledUpdateXY();
         }
         if (this.chartRef.current) {
             if (this.preventDefaultHandler === undefined) {