Merge pull request #1206 from Cuiyansong/master

refactor(chart): add debounce event action in event chart broker

Author: scottsut

frontend/src/app/components/ChartIFrameContainer/ChartIFrameEventBroker.ts

@@ -18,6 +18,8 @@
 
 import { ChartLifecycle } from 'app/constants';
 import { IChart } from 'app/types/Chart';
+import { EVENT_ACTION_DELAY_MS } from 'globalConstants';
+import debounce from 'lodash/debounce';
 import { ValueOf } from 'types';
 import { Debugger } from 'utils/debugger';
 
@@ -33,26 +35,70 @@ type HooksEvent = ValueOf<typeof ChartLifecycle>;
 
 class ChartIFrameEventBroker {
   private _listeners: Map<HooksEvent, Function> = new Map();
+  private _eventCache: Map<
+    HooksEvent,
+    { options?: any; context?: BrokerContext }
+  > = new Map();
   private _chart?: IChart;
+  private _eventActions = {
+    [ChartLifecycle.MOUNTED]: this.createImmediatelyAction(
+      ChartLifecycle.MOUNTED,
+    ),
+    [ChartLifecycle.UPDATED]: this.createDebounceAction(ChartLifecycle.UPDATED),
+    [ChartLifecycle.RESIZE]: this.createDebounceAction(ChartLifecycle.RESIZE),
+    [ChartLifecycle.UNMOUNTED]: this.createImmediatelyAction(
+      ChartLifecycle.UNMOUNTED,
+    ),
+  };
 
-  register(c: IChart) {
+  public register(c: IChart) {
     this._chart = c;
     this.registerListener(c);
   }
 
-  subscribe(event: HooksEvent, callback?: Function) {
+  public subscribe(event: HooksEvent, callback?: Function) {
     if (!callback || this._listeners.has(event)) {
       return;
     }
     this._listeners.set(event, callback);
   }
 
-  publish(event: HooksEvent, options, context?: BrokerContext) {
+  public publish(event: HooksEvent, options, context?: BrokerContext) {
     if (!this._listeners.has(event) || !this._listeners.get(event)) {
       return;
     }
+    this._eventCache[event] = { options, context };
+    return this._eventActions[event]?.();
+  }
 
-    this.invokeEvent(event, options, context);
+  public dispose() {
+    if (this._listeners && this._listeners.size > 0) {
+      this._listeners = new Map();
+    }
+    if (this._eventCache && this._eventCache.size > 0) {
+      this._eventCache = new Map();
+    }
+    if (this._chart) {
+      this._chart = undefined;
+    }
+  }
+
+  private createImmediatelyAction(event: HooksEvent) {
+    return () => this.actionCreator(event);
+  }
+
+  private createDebounceAction(event: HooksEvent) {
+    return debounce(() => this.actionCreator(event), EVENT_ACTION_DELAY_MS, {
+      // NOTE: in order to get a better optimization, we set `EVENT_ACTION_DELAY_MS` milliseconds delay in first time
+      // see more information with lodash doc https://www.lodashjs.com/docs/lodash.debounce
+      leading: false,
+    });
+  }
+
+  private actionCreator(event: HooksEvent) {
+    const options = this._eventCache[event]?.options;
+    const context = this._eventCache[event]?.context;
+    return this.invokeEvent(event, options, context);
   }
 
   private invokeEvent(event: HooksEvent, options, context?: BrokerContext) {
@@ -108,12 +154,6 @@ class ChartIFrameEventBroker {
     this.subscribe(ChartLifecycle.RESIZE, c?.onResize);
     this.subscribe(ChartLifecycle.UNMOUNTED, c?.onUnMount);
   }
-
-  dispose() {
-    if (this._listeners && this._listeners.size > 0) {
-      this._listeners = new Map();
-    }
-  }
 }
 
 export default ChartIFrameEventBroker;

frontend/src/app/components/ChartIFrameContainer/__tests__/ChartIFrameEventBroker.test.jsx

@@ -68,13 +68,32 @@ describe('ChartIFrameEventBroker Tests', () => {
     expect(chart.onMount).toHaveBeenCalledWith(mockOptions, mockContext);
   });
 
-  test('should call chart onUpdated lifecycle after mounted', () => {
+  test('should call chart onUpdated lifecycle after mounted', async () => {
     const chart = {
       state: 'ready',
       onUpdated: jest.fn().mockImplementation(),
     };
     broker.register(chart);
     broker.publish('updated', mockOptions, mockContext);
+
+    // NOTE: the milliseconds is from EVENT_ACTION_DELAY_MS
+    await new Promise(r => setTimeout(r, 300));
+    expect(chart.onUpdated).toHaveBeenCalledTimes(1);
+    expect(chart.onUpdated).toHaveBeenCalledWith(mockOptions, mockContext);
+  });
+
+  test('should invoke once onUpdated lifecycle with many update events', async () => {
+    const chart = {
+      state: 'ready',
+      onUpdated: jest.fn().mockImplementation(),
+    };
+    broker.register(chart);
+    broker.publish('updated', mockOptions, mockContext);
+    broker.publish('updated', mockOptions, mockContext);
+    broker.publish('updated', mockOptions, mockContext);
+
+    // NOTE: the milliseconds is from EVENT_ACTION_DELAY_MS
+    await new Promise(r => setTimeout(r, 300));
     expect(chart.onUpdated).toHaveBeenCalledTimes(1);
     expect(chart.onUpdated).toHaveBeenCalledWith(mockOptions, mockContext);
   });
@@ -88,13 +107,32 @@ describe('ChartIFrameEventBroker Tests', () => {
     expect(chart.onUpdated).toHaveBeenCalledTimes(0);
   });
 
-  test('should call chart onResize lifecycle after mounted', () => {
+  test('should call chart onResize lifecycle after mounted', async () => {
     const chart = {
       state: 'ready',
       onResize: jest.fn().mockImplementation(),
     };
     broker.register(chart);
     broker.publish('resize', mockOptions, mockContext);
+
+    // NOTE: the milliseconds is from EVENT_ACTION_DELAY_MS
+    await new Promise(r => setTimeout(r, 300));
+    expect(chart.onResize).toHaveBeenCalledTimes(1);
+    expect(chart.onResize).toHaveBeenCalledWith(mockOptions, mockContext);
+  });
+
+  test('should invoke once onResize lifecycle with many resize events', async () => {
+    const chart = {
+      state: 'ready',
+      onResize: jest.fn().mockImplementation(),
+    };
+    broker.register(chart);
+    broker.publish('resize', mockOptions, mockContext);
+    broker.publish('resize', mockOptions, mockContext);
+    broker.publish('resize', mockOptions, mockContext);
+
+    // NOTE: the milliseconds is from EVENT_ACTION_DELAY_MS
+    await new Promise(r => setTimeout(r, 300));
     expect(chart.onResize).toHaveBeenCalledTimes(1);
     expect(chart.onResize).toHaveBeenCalledWith(mockOptions, mockContext);
   });
@@ -160,13 +198,16 @@ describe('ChartIFrameEventBroker Tests', () => {
     expect(chart.state).toEqual('ready');
   });
 
-  test('should set state to ready after updated', () => {
+  test('should set state to ready after updated', async () => {
     const chart = {
       state: 'ready',
       onUpdated: jest.fn().mockImplementation(),
     };
     broker.register(chart);
     broker.publish('updated', mockOptions, mockContext);
+
+    // NOTE: the milliseconds is from EVENT_ACTION_DELAY_MS
+    await new Promise(r => setTimeout(r, 300));
     expect(chart.onUpdated).toHaveBeenCalledTimes(1);
     expect(chart.state).toEqual('ready');
   });

frontend/src/globalConstants.ts

@@ -21,6 +21,7 @@ import { FONT_FAMILY } from 'styles/StyleConstants';
 export const DATARTSEPERATOR = '@datart@';
 export const CHARTCONFIG_FIELD_PLACEHOLDER_UID = '@placeholder@';
 export const DATART_TRANSLATE_HOLDER = '@global@';
+export const EVENT_ACTION_DELAY_MS = 200;
 
 export enum StorageKeys {
   AuthorizationToken = 'AUTHORIZATION_TOKEN',