Scheduler: Add timezones cache (T1296816) (DevExpress#30239)

Co-authored-by: Vladimir Bushmanov <[email protected]>

Author: Ambrozy

packages/devextreme/js/__internal/scheduler/__tests__/performance.test.ts

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  describe, expect, it, jest,
+} from '@jest/globals';
+
+import Scheduler from '../m_scheduler';
+import timezoneUtils from '../m_utils_time_zone';
+
+const startDate = new Date(2025, 0, 6);
+const delta = 15 * 60 * 1000;
+const dataSource = Array.from({ length: 10 }, (_, i) => ({
+  startDate: startDate.getTime() + i * delta,
+  endDate: startDate.getTime() + (i + 1) * delta,
+  recurrenceRule: 'FREQ=DAILY;INTERVAL=7',
+  text: `Appointment ${i + 1}`,
+}));
+
+describe('scheduler', () => {
+  it.each([
+    { timeZone: 'Europe/London' },
+    { timeZone: undefined },
+  ])('should memo Intl object for timezone: $timeZone', async ({ timeZone }) => {
+    const container = document.createElement('div');
+    const scheduler = new Scheduler(container, {
+      dataSource,
+      timeZone,
+      views: ['week'],
+      currentView: 'week',
+      currentDate: new Date(2025, 0, 8, 15),
+      startDayHour: 8,
+      firstDayOfWeek: 1,
+      height: 600,
+    });
+    await timezoneUtils.cacheTimeZones();
+
+    expect(container.classList).toContain('dx-scheduler');
+
+    jest.spyOn(Intl, 'DateTimeFormat');
+
+    const navigator = container.querySelector('.dx-scheduler-header .dx-scheduler-navigator') as HTMLDivElement;
+    const nextButton = navigator.querySelector('.dx-scheduler-navigator-next') as HTMLDivElement;
+    nextButton.click();
+    expect(navigator.querySelector('.dx-scheduler-navigator-caption')?.textContent).toBe('13-19 January 2025');
+    nextButton.click();
+    expect(navigator.querySelector('.dx-scheduler-navigator-caption')?.textContent).toBe('20-26 January 2025');
+
+    expect(Intl.DateTimeFormat).toHaveBeenCalledTimes(0);
+  });
+});

packages/devextreme/js/__internal/scheduler/__tests__/workspace.base.test.ts

@@ -0,0 +1,72 @@
+import {
+  describe, expect, it, jest,
+} from '@jest/globals';
+
+import { getResourceManagerMock } from '../__mock__/resourceManager.mock';
+import SchedulerTimelineDay from '../workspaces/m_timeline_day';
+import SchedulerTimelineMonth from '../workspaces/m_timeline_month';
+import SchedulerTimelineWeek from '../workspaces/m_timeline_week';
+import SchedulerTimelineWorkWeek from '../workspaces/m_timeline_work_week';
+import type SchedulerWorkSpace from '../workspaces/m_work_space';
+import SchedulerWorkSpaceDay from '../workspaces/m_work_space_day';
+import SchedulerWorkSpaceMonth from '../workspaces/m_work_space_month';
+import SchedulerWorkSpaceWeek from '../workspaces/m_work_space_week';
+import SchedulerWorkSpaceWorkWeek from '../workspaces/m_work_space_work_week';
+
+type WorkspaceConstructor<T> = new (container: Element, options?: any) => T;
+
+const createWorkspace = <T extends SchedulerWorkSpace>(
+  WorkSpace: WorkspaceConstructor<T>,
+  currentView: string,
+): T => {
+  const container = document.createElement('div');
+  const workspace = new WorkSpace(container, {
+    views: [currentView],
+    currentView,
+    currentDate: new Date(2017, 4, 25),
+    firstDayOfWeek: 0,
+    getResourceManager: () => getResourceManagerMock([]),
+  });
+  (workspace as any)._isVisible = () => true;
+  expect(container.classList).toContain('dx-scheduler-work-space');
+
+  return workspace;
+};
+const workSpaces: {
+  currentView: string;
+  WorkSpace: WorkspaceConstructor<SchedulerWorkSpace>;
+}[] = [
+  { currentView: 'day', WorkSpace: SchedulerWorkSpaceDay },
+  { currentView: 'week', WorkSpace: SchedulerWorkSpaceWeek },
+  { currentView: 'workWeek', WorkSpace: SchedulerWorkSpaceWorkWeek },
+  { currentView: 'month', WorkSpace: SchedulerWorkSpaceMonth },
+  { currentView: 'timelineDay', WorkSpace: SchedulerTimelineDay },
+  { currentView: 'timelineWeek', WorkSpace: SchedulerTimelineWeek },
+  { currentView: 'timelineWorkWeek', WorkSpace: SchedulerTimelineWorkWeek },
+  { currentView: 'timelineMonth', WorkSpace: SchedulerTimelineMonth },
+];
+
+describe('scheduler workspace', () => {
+  workSpaces.forEach(({ currentView, WorkSpace }) => {
+    it(`should clear cache on dimension change, view: ${currentView}`, () => {
+      const workspace = createWorkspace(WorkSpace, currentView);
+      jest.spyOn(workspace.cache, 'clear');
+
+      workspace.cache.memo('test', () => 'value');
+      workspace._dimensionChanged();
+
+      expect(workspace.cache.clear).toHaveBeenCalledTimes(1);
+    });
+
+    it(`should clear cache on _cleanView call, view: ${currentView}`, () => {
+      const workspace = createWorkspace(WorkSpace, currentView);
+      jest.spyOn(workspace.cache, 'clear');
+
+      workspace.cache.memo('test', () => 'value');
+      workspace._cleanView();
+
+      expect(workspace.cache.clear).toHaveBeenCalledTimes(1);
+      expect(workspace.cache.size).toBe(0);
+    });
+  });
+});

packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts

@@ -580,7 +580,6 @@ class SchedulerAppointments extends CollectionWidget {
     const allowResize = this.option('allowResize') && (!isDefined(settings.skipResizing) || isString(settings.skipResizing));
     const allowDrag = this.option('allowDrag');
     const { allDay } = settings;
-    this.invoke('setCellDataCacheAlias', this._currentAppointmentSettings, geometry);
 
     if (settings.virtual) {
       const appointmentConfig = {

packages/devextreme/js/__internal/scheduler/global_cache.test.ts

@@ -0,0 +1,75 @@
+import {
+  describe, expect, it, jest,
+} from '@jest/globals';
+
+import { Cache } from './global_cache';
+
+describe('global cache', () => {
+  it('should be empty at initialization', () => {
+    const cache = new Cache();
+    expect(cache.size).toBe(0);
+  });
+
+  it('should get non-existed value', () => {
+    const cache = new Cache();
+
+    expect(cache.get('test0')).toBe(undefined);
+  });
+
+  it('should get existed value', () => {
+    const cache = new Cache();
+    cache.memo('test0', () => 'callbackValue');
+
+    expect(cache.get('test0')).toBe('callbackValue');
+  });
+
+  it('should memo value', () => {
+    const cache = new Cache();
+    const valueCallback = jest.fn().mockReturnValue(1).mockReturnValueOnce(2);
+    const memoValue = cache.memo('test', valueCallback);
+
+    expect(cache.get('test')).toBe(memoValue);
+    expect(cache.size).toBe(1);
+  });
+
+  it('should memo twice for deleted value', () => {
+    const cache = new Cache();
+    const valueCallback1 = jest.fn().mockReturnValue(1).mockReturnValueOnce(2);
+    const valueCallback2 = jest.fn().mockReturnValue(1).mockReturnValueOnce(2);
+    const memoValue1 = cache.memo('test1', valueCallback1);
+    const memoValue2 = cache.memo('test2', valueCallback2);
+    cache.delete('test1');
+
+    expect(cache.size).toBe(1);
+    expect(cache.memo('test1', valueCallback1)).not.toBe(memoValue1);
+    expect(cache.memo('test2', valueCallback2)).toBe(memoValue2);
+    expect(cache.size).toBe(2);
+  });
+
+  it('should delete existed value', () => {
+    const cache = new Cache();
+    cache.memo('test1', () => 'callbackValue1');
+    cache.delete('test1');
+
+    expect(cache.get('test1')).toBe(undefined);
+    expect(cache.size).toBe(0);
+  });
+
+  it('should delete non-existed value', () => {
+    const cache = new Cache();
+    cache.memo('test1', () => 'callbackValue1');
+    cache.memo('test2', () => 'callbackValue2');
+    cache.delete('non-existed');
+
+    expect(cache.size).toBe(2);
+  });
+
+  it('should clear all values', () => {
+    const cache = new Cache();
+    cache.memo('test0', () => 'callbackValue');
+    cache.memo('test1', () => 'callbackValue');
+    cache.clear();
+
+    expect(cache.size).toBe(0);
+  });
+});

packages/devextreme/js/__internal/scheduler/global_cache.ts

@@ -0,0 +1,35 @@
+import { isDefined } from '@js/core/utils/type';
+
+export class Cache {
+  private readonly cache = new Map();
+
+  get size(): number { return this.cache.size; }
+
+  clear(): void {
+    this.cache.clear();
+  }
+
+  get<R>(name: string): R | undefined {
+    return this.cache.get(name) as R | undefined;
+  }
+
+  memo<R>(name: string, valueCallback: () => R): R {
+    if (!this.cache.has(name)) {
+      const value = valueCallback();
+
+      if (isDefined(value)) {
+        this.cache.set(name, value);
+      }
+    }
+
+    return this.cache.get(name) as R;
+  }
+
+  delete(name: string): void {
+    this.cache.delete(name);
+  }
+}
+
+export const globalCache = {
+  timezones: new Cache(),
+};

packages/devextreme/js/__internal/scheduler/m_recurrence.ts

@@ -121,7 +121,7 @@ class RecurrenceProcessor {
 
   _getLocalMachineOffset(rruleDate) {
     const machineTimezoneOffset = timeZoneUtils.getClientTimezoneOffset(rruleDate);
-    const machineTimezoneName = dateUtils.getMachineTimezoneName();
+    const machineTimezoneName = timeZoneUtils.getMachineTimezoneName();
     const result = [machineTimezoneOffset];
 
     // NOTE: Workaround for the RRule bug with timezones greater than GMT+12 (e.g. Apia Standard Time GMT+13)

packages/devextreme/js/__internal/scheduler/m_subscribes.ts

@@ -35,10 +35,6 @@ const subscribes = {
     return this.isVirtualScrolling();
   },
 
-  setCellDataCacheAlias(appointment, geometry) {
-    this._workSpace.setCellDataCacheAlias(appointment, geometry);
-  },
-
   isGroupedByDate() {
     return this.getWorkSpace().isGroupedByDate();
   },

packages/devextreme/js/__internal/scheduler/m_utils_time_zone.test.ts

@@ -3,12 +3,35 @@ import {
 } from '@jest/globals';
 import { macroTaskArray } from '@ts/scheduler/utils/index';
 
+import { globalCache } from './global_cache';
 import timeZoneUtils from './m_utils_time_zone';
 import timeZoneList from './timezones/timezone_list';
 
 const defaultTimeZones = timeZoneList.value;
 
 describe('timezone utils', () => {
+  beforeAll(() => {
+    globalCache.timezones.clear();
+  });
+
+  describe('calculateTimezoneByValue', () => {
+    it('should work faster after first run', () => {
+      let now = Date.now();
+      timeZoneList.value.forEach((timezone) => {
+        timeZoneUtils.calculateTimezoneByValue(timezone);
+      });
+      const delta1 = Date.now() - now; // 41
+      now = Date.now();
+      timeZoneList.value.forEach((timezone) => {
+        timeZoneUtils.calculateTimezoneByValue(timezone);
+      });
+      const delta2 = Date.now() - now; // 6
+
+      expect(globalCache.timezones.size).toBe(timeZoneList.value.length);
+      expect(delta2).toBeLessThan(delta1 / 5);
+    });
+  });
+
   describe('cacheTimeZones / getTimeZonesCache', () => {
     beforeAll(() => {
       timeZoneList.value = [