Premium support for our pure JavaScript UI components


Post by skylerlutz »

Hi, I added Scheduler to my app but vertical scrolling in the scheduler is choppy. I noticed that if I remove all eventsData and my single column (type=tree), but leave the resourcesData in tact, the vertical scrolling performance is perfect. Note that all resourcesData and eventsData is currently local (test data, declared as a JSON object), and built eagerly (as opposed to lazily, long before being loaded into scheduler.crudManager.inlineData). All event and resource id's are strings containing UUID's. There is no custom rendering, all I did was set eventColor to pink. Here are relevant features/flags:

features: {

        eventMenu: false,
        scheduleMenu: false,
        timeAxisHeaderMenu: false,
        // Shade non-working days
        nonWorkingTime      : {
          highlightWeekends: false,
        },
        // Turn off schedule tooltip to boost scrolling performance a bit
        scheduleTooltip: false,
        // Disabling sticky events speeds up scrolling a bit, since `position: sticky` promotes element to its own layer
        stickyEvents    : false,
        timeRanges : {
          enableResizing: false,
          showHeaderElements : true,
          showCurrentTimeLine : {
            name : 'Now'
          },
          tooltipTemplate     : ({ timeRange }) => timeRange.name
        },
        tree         : true,
        regionResize : false,
        simpleEventEdit: false,
        rowCopyPaste: false,
        eventDrag: false,
        eventResize: false,
        eventEdit : false,
        eventFilter: false,
        eventDragCreate: false,
      },

transitionDuration : 0,
      // Turn off animations, to speed up the demo a bit since a lot will be on screen
      useInitialAnimation           : false,
      enableEventAnimations         : false,
      // Don't track timeline context while scrolling, speeds up scrolling a bit by hitting DOM less
      updateTimelineContextOnScroll : false,
      // Disabling sticky headers speeds up scrolling a bit, since `position: sticky` promotes element to its own layer
      stickyHeaders                 : false,

as well as some other properties:

this.scheduler.enableEventAnimations = false;
this.scheduler.eventColor = 'pink';

Lastly, lots of warnings in the browser console are printed when I scroll:

[Violation] 'requestAnimationFrame' handler took <N>ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 103ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 98ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 91ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 117ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 102ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 92ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 124ms

I am running these versions:
angular 13
scheduler: 15.3.5
node: 16.16.0

I Profiled vertical scrolling in the Chrome DevTools and see multiple Long Tasks resulting in dropped frames. I notice that the long tasks contain lengthy rendering tasks (Animation Frame Fired, Recalculate Style, Layout, and Update Layer Tree)

Can someone please advise on how to work through this performance issue? I'm just about stumped. FYI my existing active enterprise license has Premium support. Thank you


Post by mats »

Can you please share your dataset (just remove any sensitive info) and upload it here? We need to be able to run it to find out what's going on. Also please provide your full Scheduler config.


Post by skylerlutz »

this.scheduler = new Scheduler({
      presets: records,
      appendTo   : 'ganttchart',
      eventColor : null,
      eventStyle : null,
      createEventOnDblClick: false,
      dateFormat: 'YYYY-MM-DDTHH:mm:ss.SSSZ',
      displayDateFormat: 'YYYY-MM-DD HH:mm:ss.SSS Z',
      features: {
        eventMenu: false,
        scheduleMenu: false,
        timeAxisHeaderMenu: false,
        nonWorkingTime      : {
          highlightWeekends: false,
        },
        scheduleTooltip: false,
        // Disabling sticky events speeds up scrolling a bit, since `position: sticky` promotes element to its own layer
        stickyEvents    : false,
        timeRanges : {
          enableResizing: false,
          showHeaderElements : true,
          showCurrentTimeLine : {
            name : 'Now'
          },
          tooltipTemplate     : ({ timeRange }) => timeRange.name
        },
        tree         : true,
        regionResize : false,
        simpleEventEdit: false,
        rowCopyPaste: false,
        eventDrag: false,
        eventResize: false,
        eventEdit : false,
        eventFilter: false,
        eventDragCreate: false,
      },
      rowHeight : 30,
      barMargin : 5,
      columns : [
        {
          type  : 'tree',
          text  : 'Name',
          width : 320,
          field : 'name'
        },
      ],
      startDate  : new Date(2023, 3, 5, 0),
      endDate   : new Date(),
      viewPreset : 'hourAndDay',
      minZoomLevel: 8,
      crudManager : {
        autoLoad      : true,
        resourceStore : {
        },
        inlineData: this.data,
        timeRangeStore: timeRangeStore,
        validateResponse : false
      },
      transitionDuration : 0,
      useInitialAnimation           : false,
      enableEventAnimations         : false,
      updateTimelineContextOnScroll : false,
      stickyHeaders                 : false,
      eventRenderer({ eventRecord, resourceRecord, renderData }: any) {
        return '';
      }
    });
    this.scheduler.enableEventAnimations = false;
    this.scheduler.eventColor = 'pink';

    this.scheduler.readOnly = false;
    this.scheduler.startDate = this.range.start;
    this.scheduler.endDate = this.range.end;
    this.scheduler.maxDate = new Date();
Attachments
dataset.txt
dataset
(262.29 KiB) Downloaded 24 times

Post by mats »

We'll take a look - in your code, move these lines:

 this.scheduler.startDate = this.range.start;
    this.scheduler.endDate = this.range.end;

to be configs instead. You trigger 3x rendering time doing it the current way.

this.scheduler = new Scheduler({
      presets: records,
      startDate : this.range.start,
      endDate : this.range.end

Post by mats »

JSON file is corrupted btw, can you please upload it again?


Post by skylerlutz »

Updated to not triple render -- unfortunately I still see the poor vertical scrolling performance. Sorry about the corrupted dataset ... silly clipboard character limits. Please see attached for the complete dataset . Thank you

Attachments
dataset.json
(275.71 KiB) Downloaded 21 times

Post by tasnim »

Hi,

I tried to reproduce it with our scheduler tree demo https://bryntum.com/products/scheduler/examples/tree/
Here is the code I used

class Gate extends ResourceModel {
    static get fields() {
        return [{
            name : 'capacity',
            type : 'number'
        }];
    }
}

new Scheduler({
    appendTo   : 'container',
    eventColor : null,
    eventStyle : null,
    createEventOnDblClick: false,
    dateFormat: 'YYYY-MM-DDTHH:mm:ss.SSSZ',
    displayDateFormat: 'YYYY-MM-DD HH:mm:ss.SSS Z',
    features: {
        eventMenu: false,
        scheduleMenu: false,
        timeAxisHeaderMenu: false,
        nonWorkingTime      : {
            highlightWeekends: false,
        },
        scheduleTooltip: false,
        // Disabling sticky events speeds up scrolling a bit, since `position: sticky` promotes element to its own layer
        stickyEvents    : false,
        timeRanges : {
            enableResizing: false,
            showHeaderElements : true,
            showCurrentTimeLine : {
            name : 'Now'
            },
            tooltipTemplate     : ({ timeRange }) => timeRange.name
        },
        tree         : true,
        regionResize : false,
        simpleEventEdit: false,
        rowCopyPaste: false,
        eventDrag: false,
        eventResize: false,
        eventEdit : false,
        eventFilter: false,
        eventDragCreate: false,
    },
    rowHeight : 30,
    barMargin : 5,
    columns   : [
        {
            type  : 'tree',
            text  : 'Name',
            width : 320,
            field : 'name'
        }
    ],
    startDate  : new Date(2023, 3, 5, 0),
    endDate   : new Date(),
    viewPreset : 'hourAndDay',
    minZoomLevel: 8,
    crudManager : {
        autoLoad      : true,
        resourceStore : {
            modelClass : Gate
        },
        transport : {
            load : {
                url : 'data/data.json'
            }
        },
        // This config enables response validation and dumping of found errors to the browser console.
        // It's meant to be used as a development stage helper only so please set it to false for production systems.
        validateResponse : true
    },
    transitionDuration            : 0,
    useInitialAnimation           : false,
    enableEventAnimations         : false,
    updateTimelineContextOnScroll : false,
    stickyHeaders                 : false,
    eventRenderer({ eventRecord, resourceRecord, renderData }) {
        return '';
    }
});

But it seems to work completely fine. What else do I need to do the reproduce the problem?

Attachments
chrome_NpoQb3YXHU.gif
chrome_NpoQb3YXHU.gif (10.98 MiB) Viewed 442 times

Post by skylerlutz »

Hi. Thanks for taking a look. To answer your question, I'm not sure yet. I'm currently scanning for differences between that demo and my project. The biggest differences jumping out at me are the fact that mine is an angular application, and the CSS styles appear to be vastly different. Is there an angular application demo that you could plug my dataset into? That would be a closer match to my use case


Post by skylerlutz »

Another observation: I plugged my dataset into the tree example you linked. I notice that vertical scroll performance is excellent when the scheduler is short (height=200px) but when I make it full screen (height=2000px) the scroll performance becomes very choppy. Chrome Devtools Profiler confirms this (there are a flurry of Long Tasks resulting in dropped frames)


Post by skylerlutz »

@tasnim Can you please check the performance when you maximize the window?


Post Reply