throttle xy-chart data update

fixes #470 fixes #453 Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
eclipse-cdt-cloud · Mar 31, 2022 · ce5f4d6 · ce5f4d6
1 parent c9250d6
commit ce5f4d6
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git 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
@@ -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) {