[REACT] Performance issues with SchedulerPro Dependencies

Our pure JavaScript Scheduler component


User avatar
tso
Posts: 58
Joined: Wed Jan 03, 2018 1:18 pm

[REACT] Performance issues with SchedulerPro Dependencies

Post by tso »

Hi,

We have some critical performance issues when dependencies are enabled in our SchedulerPro (1.0.1) component.

The initial rendering is done in acceptable time, but after loading there's a 32 second (!!!) delay before the scheduler is interactive. Disabling dependencies removes this delay completely and the scheduler is interactive as soon as the elements are visible. Having an empty dependencyStore (i.e. not loading the dependencies at all) has no impact on the 32 second delay.

We have debugged almost everything on our side, and it seems to be on your side I'm afraid. The function in question is the exitTransition that propagates/triggers a bunch of function calls - we do not call this function explicitly, neither do we know what it does. We have a "large" data set of a several hundred elements, but nothing crazy.

I have attached the result of reloading the scheduler with the chrome "performance" profiler enabled, see

exitTransition.jpg
exitTransition.jpg (223.1 KiB) Viewed 223 times

I have also attached some gifs, (with-deps.gif, no-deps.gif) where you can see how the scheduler freezes for 32 seconds with dependencies and how it works fine without dependencies. I don't know how useful the gifs are, but I have attached them as "proof".

Let me know if you need anything else from us.

Best,
Tobias

Attachments
with-deps.gif
with-deps.gif (1.77 MiB) Viewed 224 times
no-deps.gif
no-deps.gif (1.96 MiB) Viewed 224 times

User avatar
mats
Core Developer
Core Developer
Posts: 16545
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: [REACT] Performance issues with SchedulerPro Dependencies

Post by mats »

  1. Do you have a test case for us?
  2. Can you please test using the 4.0-beta 2 release that we just put out?
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
tso
Posts: 58
Joined: Wed Jan 03, 2018 1:18 pm

Re: [REACT] Performance issues with SchedulerPro Dependencies

Post by tso »

Upgrading to the latest 4.0 beta fixed the freezing issue, but now we're in the middle of dealing with all the things that broke. For instance our custom Viewport that we ported from the Gantt src code on your suggestion. It appears our height/styling no longer works. Do you plan to support viewports for the Scheduler offically so we don't have to "hack" it ourselves?

Another small thing is the group labels that disappear when collapsing/expanding a group.

Thanks.


User avatar
mats
Core Developer
Core Developer
Posts: 16545
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: [REACT] Performance issues with SchedulerPro Dependencies

Post by mats »

Can you please share what your custom Viewport is? We cannot guarantee that your own custom code will be affected by new releases.

We would be happy to take a look if you upload a simple test case showing the problems you face.

Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
tso
Posts: 58
Joined: Wed Jan 03, 2018 1:18 pm

Re: [REACT] Performance issues with SchedulerPro Dependencies

Post by tso »

We ported the Timeline widget from Gantt. To make it work, I had to re-copy the defaultConfig object from gantt v4.0.0.

I'm afraid I don't have the time to provide you a test case without just sending our repo. The timelines are always deeply nested in state management (redux) and async calls and bundled through webpack, meaning trying to pick it apart while still being meaningful takes hours. It always seems to end up with a few hours of trial and error on our part, and in this case we had to re-port the Timeline widget.

We still have the same minor problem that group names disappear, see

group-names.gif
group-names.gif (250.08 KiB) Viewed 205 times

.


User avatar
mats
Core Developer
Core Developer
Posts: 16545
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: [REACT] Performance issues with SchedulerPro Dependencies

Post by mats »

Timeline widget is part of Scheduler Pro in 4.0 so try using that instead of the one you backported yourself? You can look at the 'timeline' demo included in 4.0 for reference.

Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
tso
Posts: 58
Joined: Wed Jan 03, 2018 1:18 pm

Re: [REACT] Performance issues with SchedulerPro Dependencies

Post by tso »

Thanks for the tip, we didn't know it was introduced to the Scheduler.

I gave it a go but had to revert since
1) we don't have a Project (in our port we simply pass it a list of events) "TypeError: Cannot set property 'store' of undefined" if we don't provide anything and "project cannot be null" if we pass project: null.
2) we want to show an abstraction of events (hence the need to pass a list of events instead of providing an EventStore)


User avatar
mats
Core Developer
Core Developer
Posts: 16545
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: [REACT] Performance issues with SchedulerPro Dependencies

Post by mats »

You can simply do:

Code: Select all

project : {
    eventsData : [ ... ]
}
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
tso
Posts: 58
Joined: Wed Jan 03, 2018 1:18 pm

Re: [REACT] Performance issues with SchedulerPro Dependencies

Post by tso »

Thanks.

Seemed like the project was not needed, but the first culprit was instead that we defined a custom eventTooltip and overriding the features key:

Code: Select all

    
features: { eventTooltip: { template: ({eventRecord, startDate, endDate}) => { return ` <table> <tr><td colspan="2"><strong>${eventRecord.name}</strong></td></tr> <tr><td>Start:</td><td>${renderDate(startDate, this.state.useGmtFormat)}</td></tr> <tr><td>End:</td><td>${renderDate(endDate, this.state.useGmtFormat)}</td></tr> </table>`; },

which caused the error I mentioned earlier at Line 225371 in the schedulerpro.umd.js (in the definition of the Timeline widget constructor)
me.features.timeRanges.store = ...

After removing our custom features (which we will need, but we can look at that later) I got the following error (doesn't matter if I pass events: events or project: {eventsData: events}).
TypeError: Cannot read property 'traverse' of undefined in Line 225542 me.taskStore.traverse(...


User avatar
mats
Core Developer
Core Developer
Posts: 16545
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: [REACT] Performance issues with SchedulerPro Dependencies

Post by mats »

Can you please provide a simple clear test case showing the errors you get?

Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

Post Reply