Our pure JavaScript Scheduler component


Post by SIM-LTD »

Hi There,

As per our project, we needed to measure the performance and we pointed out something pretty much weird..

Whenever an event is "Added" "Updated" or "Deleted" then, the EventStore is refreshed that leads to run a couple of internal events (please have a glance at the screenshot) :
* eventPaint
* renderEvent

Our Scheduler displays 200 resources that have 5-10 tasks a day and the timeline is a month (ie: 30 days); Then our main concern is the lead time (or time consumption) that the internal process is taking.

Thus, why a single change such as "Adding 1 event" has to lead to redrawing (eventPaint + renderEvent) the overall tasks that are displayed (only the Visible one) within the timeline (please have a glance at the screenshot). Which means redrawing a couple of hundred events, whenever a single change occurs.

In the attached screenshot, there is only 4 Task; and whenever a change occurs the 4 tasks are redrawn (eventPaint + renderEvent).

Does this thing make sense, because while this internal process is being run the other processes we have implemented in Async/Await; are on hold and makes the whole application frozen for the user.

Could not it be possible to redraw only the event concerned by the change ??
Attachments
Capture d’écran 2019-05-02 à 11.32.07.png
Capture d’écran 2019-05-02 à 11.32.07.png (445.47 KiB) Viewed 2110 times

Post by johan.isaksson »

Hi,

That is the behaviour we currently have. If an event is changed, it might lead to the rows height changing. And if height changes, everything below needs redrawing.

This could be optimized, I have created a ticket on investigating it: https://app.assembla.com/spaces/bryntum/tickets/8303
Best regards,
Johan Isaksson

Post by SIM-LTD »

Hi Johan

Thank you for that.
Do you think that we have any chance of having an improvement on that topic, in the next upcoming release?

Post by johan.isaksson »

Hi,

Next release (2.0.1) is planned for tomorrow, that wont be possible. But hopefully for the next release after that
Best regards,
Johan Isaksson

Post by SIM-LTD »

Hi

According to your ticket, you made a couple of enhancement regarding the overall process of Task Rendering.
We just wonder if you could tell us more about that improvement; because now with the release 2.0.2 we got something really strange. It seems that the overall process of redrawing the task is performed twice.

Look at our both screenshot :
  • First screenshot is under version 2.0.0 - that is the issue we raised and you created a ticket (see our comment on the top of this post)
  • Second screenshot is under version 2.0.2, the one you just released.
As you can see, all the tasks are redrawn twice?

Our code is the same, we have simply re-run our apps but switched the library "shceduler.module.js" from 2.0.0 to 2.0.2 to see what would be the improvements. But it turned out that the rendering process is not getting better.
(Just to let you know, we did not have "scheduler.refresh()" code, at all)

So, we would really appreciate if you could tell us what was that enhancement (https://app.assembla.com/spaces/bryntum/tickets/8303) about. I quote you :
That is the behavior we currently have. If an event is changed, it might lead to the rows height changing. And if height changes, everything below needs redrawing.
The new release (20.2) brings something that was not in the previous one (20.0) and this is not better


Thank you
Attachments
Capture d’écran 2019-05-12 à 15.39.21 - v.2.0.0.png
Capture d’écran 2019-05-12 à 15.39.21 - v.2.0.0.png (175.37 KiB) Viewed 2074 times
Capture d’écran 2019-05-12 à 14.56.39 - v.2.0.2.png
Capture d’écran 2019-05-12 à 14.56.39 - v.2.0.2.png (323.67 KiB) Viewed 2074 times

Post by johan.isaksson »

Hi,

I have tried this on our basic demo online, it runs on 2.0.2:
Screenshot 2019-05-15 at 08.18.36.png
Screenshot 2019-05-15 at 08.18.36.png (100.36 KiB) Viewed 2056 times
The code above on console does the following:

1. Adds a listener for `renderEvent` that dumps to console
2. Adds a new event to the first resource

The first resource in that demo has a single event before the add, and thus two after. The expected outcome is that we get two calls to our `renderEvent` listener. And that is what happens.

Please try to reproduce your issue on one of our demos or supply a testcase that shows this behaviour that we can debug
Best regards,
Johan Isaksson

Post by SIM-LTD »

Hi Johan


Thank for taking a bit of your time to that post.

Look, your demonstration is not quite clear and fair, I tell you why :

1) First, you have set a listener on the "renderEvent". But, if you pay attention to our screen shoot when an event is added there are 2 methods:
  • 1) eventRepaint
  • 2) renderEvent (the one you're listening)
There are two methods that run right after an event is added and not only one method

2) Secondly, you have just demonstrated and confirmed that, in the internal routine, the method "renderEvent", is called 2 times, one time for the added event, and the second time for the event already in the resource schedule.

In fact, you should have said that in the internal routine both "eventRepaint" and "renderEvent" are called for every single event displayed on the schedule; which is quite weird if you take into account that in your release note 2.0.2, you made an improvement in order to avoid redrawing the entire rows....see (Fixed #8303)

So :
Why the adding an event leads to redrawing ( "eventRepaint" + "renderEvent") all the event visible?
Of course, as we do not know the internal process of drawing an event, it may be necessary to do so; but you can admit that from an outside eye point of view this is pretty much strange to redraw all event when only one is added.

Finally, the second screenshot shows that the redrawing ( "eventRepaint" + "renderEvent") is carried out 2 times, since the release 2.0.2.... WE ARE RUNNING WITH VueCLI....
We think that if you do the same test you have just done, but with the framework VueCLI and not pure JS, you might see something different.

With VueCli hereunder the code used to listen up all event broadcasted from the Scheduler :

        mounted() {

            const config = {

               // Listeners, will relay events using $emit
                listeners : {
                
                   // Render grid to components element
                    appendTo : this.$el,
                
                  // Listeners, will relay events using $emit
                    catchAll(event) {
                    
                        // Uncomment this line to log events being emitted to console
                       console.log(event.type);
               
                        this.$emit(event.type, event);
                    },
            
            //....................................

Then whenever an event is added, we can see the full internal process that occurs within the Scheduler.
And this is how we found out and raised the issue.

Post by johan.isaksson »

The improvement was to only redraw the affected row, and not all rows following it. We do not currently redraw single events, so it is behaving as it should and redrawing all the events within that row
Best regards,
Johan Isaksson

Post by SIM-LTD »

Hi

Ok, for the improvement. We won't dwell at length on it.

Nonetheless, You just said
The first resource in that demo has a single event before the add, and thus two after. The expected outcome is that we get two calls to our `renderEvent` listener. And that is what happens.
We do not argue about what happens or should happen; but we simply wonder: Why TWO Calls ? and not ONE, since only ONE event is added!
Your sample has ONE event, before adding another one; just guess what it'll be with 100.
Adding one event will call ( "eventRepaint" + "renderEvent") 101 times?

Post by johan.isaksson »

As I said, that is the way it is designed. If you urgently need it to work some other way, please contact sales about our services: https://www.bryntum.com/services
Best regards,
Johan Isaksson

Post Reply