fix: do not call dateRangeChange in live mode

packages/synchro-charts/src/components/sc-table/sc-table.tsx

@@ -5,7 +5,7 @@ import { isThreshold } from '../charts/common/annotations/utils';
 import { Trend } from '../charts/common/trends/types';
 import { Annotations, ChartConfig, Threshold } from '../charts/common/types';
 import { constructTableData, Row } from './constructTableData';
-import { viewportEndDate, viewportStartDate } from '../../utils/viewPort';
+import { viewportEndDate, viewportStartDate, isInLiveMode } from '../../utils/viewPort';
 import { isMinimalStaticViewport } from '../../utils/predicates';
 import { parseDuration } from '../../utils/time';
 import { webGLRenderer } from '../sc-webgl-context/webglContext';
@@ -53,8 +53,8 @@ export class ScTable implements ChartConfig {
     const hasViewPortChanged =
       viewportStartDate(this.viewport).getTime() !== start.getTime() ||
       viewportEndDate(this.viewport).getTime() !== end.getTime();
-    const isInLiveMode = Boolean(duration);
-    if (hasViewPortChanged && !isInLiveMode) {
+    const inLiveMode = isInLiveMode(this.viewport);
+    if (hasViewPortChanged && !inLiveMode) {
       this.onDateRangeChange([start, end, this.viewport.group]);
     }
     // Update active viewport

packages/synchro-charts/src/components/sc-widget-grid/sc-widget-grid.tsx

@@ -15,7 +15,7 @@ import { getThresholds } from '../charts/common/annotations/utils';
 import { breachedThreshold } from '../charts/common/annotations/breachedThreshold';
 import { streamPairs } from '../../utils/streamPairs';
 import { RenderCell } from './types';
-import { viewportEndDate, viewportStartDate } from '../../utils/viewPort';
+import { viewportEndDate, viewportStartDate, isInLiveMode } from '../../utils/viewPort';
 import { Annotations, ChartConfig, Threshold, WidgetConfigurationUpdate } from '../charts/common/types';
 import { LabelsConfig } from '../common/types';
 import { DATA_ALIGNMENT } from '../charts/common/constants';
@@ -120,8 +120,8 @@ export class ScWidgetGrid implements ChartConfig {
     const hasViewPortChanged =
       viewportStartDate(this.viewport).getTime() !== start.getTime() ||
       viewportEndDate(this.viewport).getTime() !== end.getTime();
-    const isInLiveMode = Boolean(duration);
-    if (hasViewPortChanged && !isInLiveMode) {
+    const inLiveMode = isInLiveMode(this.viewport);
+    if (hasViewPortChanged && !inLiveMode) {
       this.onDateRangeChange([start, end, this.viewport.group]);
     }
     // Update active viewport

packages/synchro-charts/src/components/viewportHandler/viewportHandler.spec.ts

@@ -2,7 +2,7 @@ import uuid from 'uuid/v4';
 
 import { ViewportHandler } from './viewportHandler';
 import { ViewPortManager } from './types';
-import { SECOND_IN_MS } from '../../utils/time';
+import { SECOND_IN_MS, MINUTE_IN_MS } from '../../utils/time';
 import { SizeConfig } from '../../utils/dataTypes';
 
 const viewportManager = (viewportGroup?: string): ViewPortManager => ({
@@ -159,7 +159,7 @@ describe('syncing managers', () => {
 
     /** manager added to existing view port group that has had it's viewport synced should have it's viewport synced to the group */
     expect(manager2.updateViewPort).toBeCalledTimes(1);
-    expect(manager2.updateViewPort).toBeCalledWith({ start: START, end: END });
+    expect(manager2.updateViewPort).toBeCalledWith(expect.objectContaining({ start: START, end: END }));
   });
 
   it('will not update viewport when syncUpdate is false', () => {
@@ -409,4 +409,22 @@ describe('internal clock', () => {
       })
     );
   });
+
+  it('blocks dateRangeChanged event emission when viewport group with duration updated', () => {
+    const groups = new ViewportHandler();
+    const VIEWPORT_GROUP_1 = 'view-port-group-1';
+    const manager = viewportManager(VIEWPORT_GROUP_1);
+    const duration = 10 * MINUTE_IN_MS;
+
+    /** Create a viewport group and sync it's viewport */
+    groups.add({ manager, duration: MINUTE_IN_MS, chartSize });
+    groups.add({ manager, duration, chartSize });
+
+    expect(manager.updateViewPort).toBeCalledWith(
+      expect.objectContaining({
+        duration,
+        shouldBlockDateRangeChangedEvent: true,
+      })
+    );
+  });
 });

packages/synchro-charts/src/components/viewportHandler/viewportHandler.ts

@@ -117,7 +117,12 @@ export class ViewportHandler<T extends ViewPortManager> {
      * the current viewport groups time span.
      */
     if (manager.viewportGroup && this.viewportMap[manager.viewportGroup] && shouldSync) {
-      manager.updateViewPort(this.viewportMap[manager.viewportGroup]);
+      const shouldBlockDateRangeChangedEvent = Boolean(duration);
+      manager.updateViewPort({
+        ...this.viewportMap[manager.viewportGroup],
+        duration,
+        shouldBlockDateRangeChangedEvent,
+      });
     }
     // If duration is not null, this means that we want to have live mode
     if (duration != null) {

packages/synchro-charts/src/utils/viewPort.spec.ts

@@ -1,5 +1,5 @@
 import { DAY_IN_MS } from './time';
-import { viewportEndDate, viewportStartDate } from './viewPort';
+import { viewportEndDate, viewportStartDate, isInLiveMode } from './viewPort';
 
 const mockCurrentTime = (mockedDate: Date) => {
   // @ts-ignore
@@ -31,3 +31,13 @@ describe('viewportEnd', () => {
     expect(viewportEndDate({ duration: DAY_IN_MS })).toEqual(TIME);
   });
 });
+
+describe('isInLiveMode', () => {
+  it('returns true when in live mode', () => {
+    expect(isInLiveMode({ duration: 60000 })).toBeTrue();
+  });
+
+  it('returns false when viewport is static', () => {
+    expect(isInLiveMode({ start: new Date(), end: new Date() })).toBeFalse();
+  });
+});

packages/synchro-charts/src/utils/viewPort.ts

@@ -10,3 +10,7 @@ export const viewportStartDate = (viewportConfig: MinimalViewPortConfig): Date =
 export const viewportEndDate = (viewportConfig: MinimalViewPortConfig): Date => {
   return isMinimalStaticViewport(viewportConfig) ? new Date(viewportConfig.end) : new Date(Date.now());
 };
+
+export const isInLiveMode = (viewport: MinimalViewPortConfig): boolean => {
+  return !isMinimalStaticViewport(viewport) && Boolean(viewport.duration);
+};