Scheduler(T1269168): fix appointment popup delay performance issue (DevExpress#29069)

Author: wdevfx

packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts

@@ -11,11 +11,13 @@ import $ from '@js/core/renderer';
 import dateUtils from '@js/core/utils/date';
 import dateSerialization from '@js/core/utils/date_serialization';
 import { extend } from '@js/core/utils/extend';
+import type AbstractStore from '@js/data/abstract_store';
 import Form from '@js/ui/form';
 import { current, isFluent } from '@js/ui/themes';
 import { ExpressionUtils } from '@ts/scheduler/m_expression_utils';
 
 import { createAppointmentAdapter } from '../m_appointment_adapter';
+import type { TimezoneLabel } from '../m_utils_time_zone';
 import timeZoneUtils from '../m_utils_time_zone';
 
 const SCREEN_SIZE_OF_SINGLE_COLUMN = 600;
@@ -40,6 +42,11 @@ const E2E_TEST_CLASSES = {
   recurrenceSwitch: 'e2e-dx-scheduler-form-recurrence-switch',
 };
 
+const DEFAULT_TIMEZONE_EDITOR_DATA_SOURCE_OPTIONS = {
+  paginate: true,
+  pageSize: 10,
+};
+
 const getStylingModeFunc = (): string | undefined => (isFluent(current()) ? 'filled' : undefined);
 
 const getStartDateWithStartHour = (startDate, startDayHour) => new Date(new Date(startDate).setHours(startDayHour));
@@ -141,40 +148,13 @@ export class AppointmentForm {
       onInitialized: (e) => {
         this.form = e.component;
       },
-      customizeItem: (e) => {
-        if (this.form && e.itemType === 'group') {
-          const dataExprs = this.scheduler.getDataAccessors().expr;
-
-          const startDate = new Date(this.formData[dataExprs.startDateExpr]);
-          const endDate = new Date(this.formData[dataExprs.endDateExpr]);
-
-          const startTimeZoneEditor = e.items.find((i) => i.dataField === dataExprs.startDateTimeZoneExpr);
-          const endTimeZoneEditor = e.items.find((i) => i.dataField === dataExprs.endDateTimeZoneExpr);
-
-          if (startTimeZoneEditor) {
-            startTimeZoneEditor.editorOptions.dataSource = this.createTimeZoneDataSource(startDate);
-          }
-
-          if (endTimeZoneEditor) {
-            endTimeZoneEditor.editorOptions.dataSource = this.createTimeZoneDataSource(endDate);
-          }
-        }
-      },
       screenByWidth: (width) => (width < SCREEN_SIZE_OF_SINGLE_COLUMN || devices.current().deviceType !== 'desktop' ? 'xs' : 'lg'),
       elementAttr: {
         class: E2E_TEST_CLASSES.form,
       },
     });
   }
 
-  createTimeZoneDataSource(date) {
-    return new DataSource({
-      store: timeZoneUtils.getTimeZones(date),
-      paginate: true,
-      pageSize: 10,
-    });
-  }
-
   _createAppointmentAdapter(rawAppointment) {
     return createAppointmentAdapter(
       rawAppointment,
@@ -449,12 +429,60 @@ export class AppointmentForm {
     editor && this.form.itemOption(editorPath, 'editorOptions', extend({}, editor.editorOptions, options));
   }
 
-  setTimeZoneEditorDataSource(date, name) {
-    const dataSource = this.createTimeZoneDataSource(date);
-    this.setEditorOptions(name, 'Main', { dataSource });
+  private scheduleTimezoneEditorDataSourceUpdate(
+    editorName: string,
+    dataSource: { store: () => AbstractStore; reload: () => void },
+    selectedTimezoneLabel: TimezoneLabel | null,
+    date: Date,
+  ): void {
+    timeZoneUtils.getTimeZoneLabelsAsyncBatch(date)
+      .catch(() => [] as TimezoneLabel[])
+      .then(async (timezones) => {
+        const store = dataSource.store();
+
+        await store.remove(selectedTimezoneLabel?.id);
+
+        // NOTE: Unfortunately, our store not support bulk operations
+        // So, we update it record-by-record
+        const insertPromises = timezones.reduce<Promise<void>[]>((result, timezone) => {
+          result.push(store.insert(timezone));
+          return result;
+        }, []);
+
+        // NOTE: We should wait for all insertions before reload
+        await Promise.all(insertPromises);
+
+        dataSource.reload();
+        // NOTE: We should re-assign dataSource to the editor
+        // to repaint this editor after dataSource update
+        this.setEditorOptions(editorName, 'Main', { dataSource });
+      }).catch(() => {});
+  }
+
+  private setupTimezoneEditorDataSource(
+    editorName: string,
+    selectedTimezoneId: string | null,
+    date: Date,
+  ): void {
+    const selectedTimezoneLabel = selectedTimezoneId
+      ? timeZoneUtils.getTimeZoneLabel(selectedTimezoneId, date)
+      : null;
+
+    const dataSource = new DataSource({
+      ...DEFAULT_TIMEZONE_EDITOR_DATA_SOURCE_OPTIONS,
+      store: selectedTimezoneLabel ? [selectedTimezoneLabel] : [],
+    });
+
+    this.setEditorOptions(editorName, 'Main', { dataSource });
+    this.scheduleTimezoneEditorDataSourceUpdate(
+      editorName,
+      dataSource,
+      selectedTimezoneLabel,
+      date,
+    );
   }
 
-  updateFormData(formData) {
+  updateFormData(formData: Record<string, any>): void {
     this.isFormUpdating = true;
     this.form.option('formData', formData);
 
@@ -463,13 +491,15 @@ export class AppointmentForm {
 
     const rawStartDate = ExpressionUtils.getField(dataAccessors, 'startDate', formData);
     const rawEndDate = ExpressionUtils.getField(dataAccessors, 'endDate', formData);
+    const startDateTimezone = ExpressionUtils.getField(dataAccessors, 'startDateTimeZone', formData) ?? null;
+    const endDateTimezone = ExpressionUtils.getField(dataAccessors, 'endDateTimeZone', formData) ?? null;
 
     const allDay = ExpressionUtils.getField(dataAccessors, 'allDay', formData);
     const startDate = new Date(rawStartDate);
     const endDate = new Date(rawEndDate);
 
-    this.setTimeZoneEditorDataSource(startDate, expr.startDateTimeZoneExpr);
-    this.setTimeZoneEditorDataSource(endDate, expr.endDateTimeZoneExpr);
+    this.setupTimezoneEditorDataSource(expr.startDateTimeZoneExpr, startDateTimezone, startDate);
+    this.setupTimezoneEditorDataSource(expr.endDateTimeZoneExpr, endDateTimezone, endDate);
 
     this.updateRecurrenceEditorStartDate(startDate, expr.recurrenceRuleExpr);
 

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

@@ -43,6 +43,7 @@ import {
   getPreparedDataItems,
   isDateAndTimeView, isTimelineView, viewsUtils,
 } from '@ts/scheduler/r1/utils/index';
+import { macroTaskArray } from '@ts/scheduler/utils/index';
 
 import { AppointmentForm } from './appointment_popup/m_form';
 import { ACTION_TO_APPOINTMENT, AppointmentPopup } from './appointment_popup/m_popup';
@@ -1281,6 +1282,9 @@ class Scheduler extends Widget<any> {
     this._asyncTemplatesTimers.forEach(clearTimeout);
     this._asyncTemplatesTimers = [];
 
+    // NOTE: Stop all scheduled macro tasks
+    macroTaskArray.dispose();
+
     // @ts-expect-error
     super._dispose();
   }

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

@@ -1,14 +1,29 @@
+// TODO(Refactoring): move this module to ./utils directory
 import errors from '@js/core/errors';
 import { dateUtilsTs } from '@ts/core/utils/date';
+import { macroTaskArray } from '@ts/scheduler/utils/index';
 
 import dateUtils from '../../core/utils/date';
 import DateAdapter from './m_date_adapter';
 import timeZoneDataUtils from './timezones/m_utils_timezones_data';
 import timeZoneList from './timezones/timezone_list';
 
+export interface TimezoneLabel {
+  /** uniq timezone id, e.g: 'America/Los_Angeles' */
+  id: string;
+  /** timezone display string, e.g: '(GMT -08:00) America - Los Angeles' */
+  title?: string;
+}
+
+export interface TimezoneData extends TimezoneLabel {
+  /** timezone offset in hours */
+  offset?: number;
+}
+
 const toMs = dateUtils.dateToMilliseconds;
 const MINUTES_IN_HOUR = 60;
 const MS_IN_MINUTE = 60000;
+const GET_TIMEZONES_BATCH_SIZE = 20;
 const GMT = 'GMT';
 const offsetFormatRegexp = /^GMT(?:[+-]\d{2}:\d{2})?$/;
 
@@ -37,12 +52,6 @@ const createDateFromUTCWithLocalOffset = (date) => {
   return result.source;
 };
 
-const getTimeZones = (date = new Date()) => timeZoneList.value.map((tz) => ({
-  offset: calculateTimezoneByValue(tz, date),
-  title: getTimezoneTitle(tz, date),
-  id: tz,
-}));
-
 const createUTCDate = (date) => new Date(Date.UTC(
   date.getUTCFullYear(),
   date.getUTCMonth(),
@@ -326,6 +335,33 @@ const addOffsetsWithoutDST = (date: Date, ...offsets: number[]): Date => {
     : newDate;
 };
 
+const getTimeZoneLabelsAsyncBatch = (
+  date = new Date(),
+): Promise<TimezoneLabel[]> => macroTaskArray.map(
+  timeZoneList.value,
+  (timezoneId) => ({
+    id: timezoneId,
+    title: getTimezoneTitle(timezoneId, date),
+  }),
+  GET_TIMEZONES_BATCH_SIZE,
+);
+
+const getTimeZoneLabel = (
+  timezoneId: string,
+  date = new Date(),
+): TimezoneLabel => ({
+  id: timezoneId,
+  title: getTimezoneTitle(timezoneId, date),
+});
+
+const getTimeZones = (
+  date = new Date(),
+): TimezoneData[] => timeZoneList.value.map((timezoneId) => ({
+  id: timezoneId,
+  title: getTimezoneTitle(timezoneId, date),
+  offset: calculateTimezoneByValue(timezoneId, date),
+}));
+
 const utils = {
   getDaylightOffset,
   getDaylightOffsetInMs,
@@ -347,10 +383,13 @@ const utils = {
   hasDSTInLocalTimeZone,
   isEqualLocalTimeZone,
   isEqualLocalTimeZoneByDeclaration,
-  getTimeZones,
 
   setOffsetsToDate,
   addOffsetsWithoutDST,
+
+  getTimeZoneLabelsAsyncBatch,
+  getTimeZoneLabel,
+  getTimeZones,
 };
 
 export default utils;

packages/devextreme/js/__internal/scheduler/utils/index.ts

@@ -0,0 +1,5 @@
+import macroTaskArray from '@ts/scheduler/utils/macro_task_array/index';
+
+export {
+  macroTaskArray,
+};

packages/devextreme/js/__internal/scheduler/utils/macro_task_array/dispatcher.test.ts

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import {
+  describe, expect, it, jest,
+} from '@jest/globals';
+
+import dispatcher, { macroTaskIdSet } from './dispatcher';
+
+jest.useFakeTimers();
+
+describe('Scheduler', () => {
+  describe('MacroTaskArray', () => {
+    describe('Dispatcher', () => {
+      describe('schedule', () => {
+        it('should add timeout ids to timeout ids set', () => {
+          dispatcher.schedule(jest.fn(), 0).finally(() => {});
+          dispatcher.schedule(jest.fn(), 0).finally(() => {});
+
+          expect(macroTaskIdSet.size).toBe(2);
+        });
+
+        it('should remove timeout id from timeout ids set after macro task execution', async () => {
+          const p1 = dispatcher.schedule(jest.fn(), 0);
+          const p2 = dispatcher.schedule(jest.fn(), 0);
+
+          jest.advanceTimersByTime(0);
+
+          await Promise.all([p1, p2]);
+
+          expect(macroTaskIdSet.size).toBe(0);
+        });
+
+        it('should call callback as macro task', () => {
+          const callbackMock = jest.fn();
+          dispatcher.schedule(callbackMock, 0).finally(() => {});
+
+          expect(callbackMock).toHaveBeenCalledTimes(0);
+
+          jest.advanceTimersByTime(0);
+
+          expect(callbackMock).toHaveBeenCalledTimes(1);
+        });
+
+        it('should use macroTaskTimeoutMs form macro task delay', () => {
+          const callbackMock = jest.fn();
+          const macroTaskDelayMs = 1000;
+          dispatcher.schedule(callbackMock, macroTaskDelayMs).finally(() => {});
+
+          expect(callbackMock).toHaveBeenCalledTimes(0);
+
+          jest.advanceTimersByTime(macroTaskDelayMs / 2);
+
+          expect(callbackMock).toHaveBeenCalledTimes(0);
+
+          jest.advanceTimersByTime(macroTaskDelayMs / 2);
+
+          expect(callbackMock).toHaveBeenCalledTimes(1);
+        });
+      });
+
+      describe('dispose', () => {
+        it('should clear scheduled macro tasks', () => {
+          const clearTimeoutSpy = jest.spyOn(window, 'clearTimeout');
+
+          dispatcher.schedule(jest.fn(), 0).finally(() => {});
+          dispatcher.schedule(jest.fn(), 0).finally(() => {});
+
+          const [firstId, secondId] = Array.from(macroTaskIdSet);
+
+          dispatcher.dispose();
+
+          expect(clearTimeoutSpy).toHaveBeenCalledTimes(2);
+          expect(clearTimeoutSpy.mock.calls).toEqual([
+            [firstId],
+            [secondId],
+          ]);
+        });
+
+        it('should clear timeout ids set', () => {
+          dispatcher.schedule(jest.fn(), 0).finally(() => {});
+          dispatcher.schedule(jest.fn(), 0).finally(() => {});
+
+          expect(macroTaskIdSet.size).toBe(2);
+
+          dispatcher.dispose();
+
+          expect(macroTaskIdSet.size).toBe(0);
+        });
+      });
+    });
+  });
+});

packages/devextreme/js/__internal/scheduler/utils/macro_task_array/dispatcher.ts

@@ -0,0 +1,29 @@
+// eslint-disable-next-line no-restricted-globals
+export const macroTaskIdSet = new Set<ReturnType<typeof setTimeout>>();
+
+const schedule = async (
+  callback: () => void,
+  macroTaskTimeoutMs: number,
+): Promise<void> => new Promise<void>((resolve) => {
+  // NOTE: Used setTimeout here because this method is used in heavy calculations,
+  // and we wouldn't like to freeze the event loop by them
+  // eslint-disable-next-line no-restricted-globals
+  const taskId = setTimeout(() => {
+    callback();
+    macroTaskIdSet.delete(taskId);
+    resolve();
+  }, macroTaskTimeoutMs);
+  macroTaskIdSet.add(taskId);
+});
+
+const dispose = (): void => {
+  Array.from(macroTaskIdSet).forEach((id) => {
+    clearTimeout(id);
+    macroTaskIdSet.delete(id);
+  });
+};
+
+export default {
+  schedule,
+  dispose,
+};

packages/devextreme/js/__internal/scheduler/utils/macro_task_array/index.ts

@@ -0,0 +1,8 @@
+import dispatcher from './dispatcher';
+import { macroTaskArrayForEach, macroTaskArrayMap } from './methods';
+
+export default {
+  forEach: macroTaskArrayForEach,
+  map: macroTaskArrayMap,
+  dispose: dispatcher.dispose,
+};