Our pure JavaScript Scheduler component


Post by accounts@projul.com »

Hi,
In our angular application we are using the NGRX/store to bind the data with bryntum scheduler. With smaller no of events everything is fine. But as no of events >= 1000 we are facing the following problems

  • Very slow scheduler performance
  • All the events suddenly disappear from scheduler (It's very weird issue only happens randomly but with large data only. Our accounts having smaller events are not facing this issue)
    More insights:
  • Version of bryntum scheduler that we are using is 5.3.1
  • We are using the 1 day, 1 week, 4 weeks view presets. Depending on the visible data range we are querying our ngrx/store only get the events within that range, and then we are setting the events property. the above issues are only we are facing with 4 weeks view preset might be due to large events (1000 to 2000).
    We are not using the scheduler infinite scroll feature.
    I am going to attach chrome performance profile that might help you to debug the blocking code.
    Let me know if you need anything further, your help will be appreciated as it's continuously problem for us.
<bryntum-scheduler [assignments]="assignmentsData" [barMargin]="5" [cellMenuFeature]="false"
                           [columns]="schedulerConfig.columns" [createEventOnDblClick]="false"
                           [eventDragCreateFeature]="false" [autoAdjustTimeAxis]="false"
                           [eventDragFeature]="true" [preserveScrollOnDatasetChange]="true"
                           [preserveFocusOnDatasetChange]="true"
                           [snapRelativeToEventStartDate]="true"
                           [eventResizeFeature]="false" [eventDragSelectFeature]="false" [eventMenuFeature]="false"
                           (onEventDrag)="onEventDrag($event)" (onEventDragStart)="onEventDragStart($event)"
                           (onAfterEventDrop)="onAfterEventDrop($event)"
                           (onBeforeEventDropFinalize)="onBeforeEventDropFinalize($event)"
                           (onEventDrop)="onEventDrop($event)" [eventRenderer]="fullSchedulerEventRenderer"
                           [eventStyle]="'colored'"
                           (onCellClick)="onSchedulerColumnsClick($event)"
                           [events]="eventsData" [features]="schedulerConfig.features" [fillTicks]="fillTicks"
                           [resources]="resourcesData" [rowHeight]="rowHieght" [scheduleMenuFeature]="false"
                           [timeAxisHeaderMenuFeature]="false" [viewPreset]="defaultViewPreset"
                           [zoomOnMouseWheel]="false"  [snap]="true"
                           [enableRecurringEvents]="true" [transitionDuration]="0" [zoomOnTimeAxisDoubleClick]="false"
                           (onScheduleClick)="onCellClick($event)"
                           (onTimeAxisHeaderClick)="onTimeAxisHeaderClick($event)"
                           [visibleDate]="schedulerConfig.visibleDate" [startDate]="startDate" [endDate]="endDate">
        </bryntum-scheduler>
Attachments
schedule_data_load_profile.json
(11.37 MiB) Downloaded 22 times
scheduler_mockup.png
scheduler_mockup.png (115.96 KiB) Viewed 553 times

Post by marcio »

Hey accounts@projul.com,

We have a big data set demo example with several optimizations for larger amounts of data - https://bryntum.com/products/schedulerpro/examples/bigdataset/

Do you see any information on the console when you have those weird behaviors that you mentioned? Anything that could help identify what's happening there?

If you could assemble a sample project with a sample of data and your configuration/presets, that also could help us to assist you on that.

Best regards,
Márcio


Post by accounts@projul.com »

Sure @marcio let me work on to assemble a sample project for you.


Post by marcio »

Thanks! We'll be waiting to assist you. :)

Best regards,
Márcio


Post by accounts@projul.com »

Hey @marcio, thanks for pointing me to this https://bryntum.com/products/schedulerpro/examples/bigdataset/ demo.
Using the following way to set scheduler data improve the overall performance alot

this.scheduler.suspendRefresh();
this.scheduler.project = {
      assignmentStore : {
          useRawData : true,
          data       : this.assignmentsData
      },
      resourceStore : {
          useRawData : true,
          data       : this.resourcesData
      },
      eventStore : {
          useRawData : true,
          data       : this.eventsData
      }
  } as any;
  this.scheduler.resumeRefresh(true);
  await (this.scheduler.project as any).await('refresh');

Previously we were passing the events, resources & assignments properties to bryntum-scheduler angular component directly as input properties.

Now, the same performance issue exists on our calendar control as well. I tried using the same way of binding the data using calendar.project and using suspendRefresh() & resumeRefresh() methods. Can you help me with any docs to bind the big data in same way to the calendar control as well.


Post by marcio »

Hey,

We have a similar demo for Calendar using big data, please check it live here - https://bryntum.com/products/calendar/examples/bigdataset/

Best regards,
Márcio


Post by accounts@projul.com »

@marcio I am able to produce the performance issues, on megadataset https://bryntum.com/products/calendar/examples/megadataset/
example having only 1500 events per month.
On events drag & drop or going next & previous in the calendar control taking cpu to 100% for some time causing the lag. In our app when ngrx/store data updated or calendar date range change we are getting tasks data from ngrx/store and binding with calendar to refresh. This leads to app crashes.
If you will increase the events count from 1500 to 2000 you will be easily able to see the issues.
Here is the demo video:
https://video.projul.com/watch/DmZ9JgQMaJFTFPP3wPiYsa?

import { Calendar } from '../../build/calendar.module.js?468079';
import shared from '../_shared/shared.module.js?468079';

const
    today       = new Date(),
    currentYear = today.getFullYear(),
    eventColors = [
        '#D50000', '#E67C73', '#F4511E', '#F6BF26',
        '#33B679', '#0B8043', '#039BE5', '#3F51B5',
        '#7986CB', '#8E24AA', '#616161'],
    eventNames  = [
        'Quarterly Board Meeting',
        'Development Meeting',
        'Sales Dept Meeting',
        'Interview with Julia',
        'Interview with Naomi'],
    events      = new Array(2000);

// Create 100,000 events
for (let i = 0; i < 2000; i++) {
    const
        year          = 2023,
        month         = 5,
        day           = Math.round(Math.random() * 31),
        hour          = Math.round(Math.random() * 8) + 4,
        durationHours = Math.round(Math.random() * 71) + 1;

events[i] = {
    name       : eventNames[Math.round(Math.random() * 4)],
    startDate  : new Date(year, month, day, hour),
    endDate    : new Date(year, month, day, hour + durationHours),
    eventColor : eventColors[Math.round(Math.random() * 10)],
    resourceId : Math.round(Math.random() * 4)
};
}

const calendar = new Calendar({
    appendTo : 'container',

// Start life looking at this date
date : new Date(),

modes : {
    list : true,
    month:{
 allowOverlap: false,
      autoRowHeight: true,
      minRowHeight: 100,

   }
},

mode : 'month',

eventStore : {
    useRawData : true,
    data       : events
}
});

Post by accounts@projul.com »

Hi @marcio, any update on this?


Post by marcio »

Hey,

I created a ticket for our team to check the possible performance improvements that could be made in that case https://github.com/bryntum/support/issues/6923

Best regards,
Márcio


Post by accounts@projul.com »

Hello @marcio is there a time frame we could expect #6923 to be worked?


Post Reply