Our pure JavaScript Scheduler component


Post by SIM-LTD »

Hi There

Referring to our previous post (viewtopic.php?f=44&t=11032) where we were wondering why adding a single event (that worth also for updating and deleting) leads to redrawing all the visible task on the schedule; we are now facing a very bad performance since the release 2.0.2. In fact it was bad since the v2.0.1, but did not perform all our fullCycleTest under 2.0.1

Indeed, if you pay attention to our screenshot, herewith, you'll see that :
  • Under the release 2.0.0 all events were redrawn when adding an event
  • Under the release 2.0.2 (and 2.0.1), now the tasks are redrawn TWICE
Our screenshot shows only 2 tasks; we let you guess what happened with thousand tasks...

We might have a suggestion, in one of our previous post (viewtopic.php?f=44&t=11004#p59236) we have been told that the code "Scheduler.refresh()" won't be necessary for the next release when using the "Batch" mode. Thus, as you can see our screenshot (v.2.0.2) it seems that the overall task redrawing is performed 2 times.

We hope you guys will fix this in the next release.
Attachments
A-2019-05-12 à 15.39.21 - v.2.0.0.png
A-2019-05-12 à 15.39.21 - v.2.0.0.png (175.37 KiB) Viewed 1783 times
A-2019-05-12 à 14.56.39 - v.2.0.2.png
A-2019-05-12 à 14.56.39 - v.2.0.2.png (323.67 KiB) Viewed 1783 times

Post by mats »

What's the code required to see your double refresh? Can you please show a pure test case based on one of our samples?

Post by SIM-LTD »

Hi there

As we told you, the same code gives us 2 different outcomes.
We only changed the core library "scheduler.module.js" (from version 2.0.0 TO version 2.0.2) and that's it.
The screenshot posted earlier, speak to themself...

The code we have is quite simple :

Task Updated
                        scheduler.eventStore.getById(obj.id).name        = obj.name;
                        scheduler.eventStore.getById(obj.id).startDate   = obj.startDate;
                        scheduler.eventStore.getById(obj.id).endDate     = obj.endDate;
                        scheduler.eventStore.getById(obj.id).eventColor  = obj.eventColor;
Task Deleted
			scheduler.eventStore.getById(obj.id).remove();
Task Added
We simply add an item in the arrayCollection "events" which a property of the scheduler.
the array tabTask is bind to the scheduler events.
	tabTask.push(obj);
In both screenshot post earlier, the function "Scheduler.refresh()" is not used at all.
The code listed above is the same whether we use the core library "scheduler.module.js" version 2.0.0 OR version 2.0.2.
A task which is added to the arrayCollection (events) OR updated from the "eventStore." leads the overall visible task to be redrawn ONCE with the release 2.0.0 and TWICE with the release 2.0.2 (and 2.0.1)


Moreover, if you take the sample from demo "VueCLI" and run couple test you'll see it easily.
Just add this code (but we believe this is already set)
        mounted() {

               // Listeners, will relay events using $emit
                listeners : {

                    catchAll(event) {
                        // Uncomment this line to log events being emitted to console
                        console.log(event.type);
                        this.$emit(event.type, event);
                    },
			.....
Look thus screnshot now, when we run "Add a Task" from the standard context menu option.
Nonetheless, all the event are redrawn anyway.

The main question is why the behavior from the version 2.0.0 and the later one (2.0.1 / 2.0.2), taking into account that our code did not change at all, is so different.
Both screenshots sent earlier show that the redrawing is performed 2 times.
Attachments
Capture d’écran 2019-05-13 à 08.26.40.png
Capture d’écran 2019-05-13 à 08.26.40.png (255.82 KiB) Viewed 1774 times

Post by mats »

We cannot assist without seeing the full picture, just small code snippets doesn't help I'm afraid. Please upload something we can run, or provide exact instructions.

Post by SIM-LTD »

Hi There

With all our respect, we do not understand your answer! most of the time, you (matts) ask us to justify our case and you do not take into account our screenshot. The screenshot is very obvious, but for some reason, you don't want to consider them!

Just to make it clear, our current post refers to a previous post (viewtopic.php?f=44&t=11032) where your colleague Johan.isaksson has created a ticket and mentioned :
This could be optimized, I have created a ticket on investigating it: https://app.assembla.com/spaces/bryntum/tickets/8303

Thus, why are you saying that you cannot assist us and we must provide a test case; whilst this is a very simple case to investigate!
It only requires you to :
Take one of your demo samples under VueCLI then add a button in which you will add an item in the array "events" property of scheduler and then you'll see in the console.log.
Just add an item in the array "Events" then, the task will be created in the schedule but the overall process of redrawing will be done twice as shown in our print screen (v2.0.2) herewith.

Maybe you should share with your colleague Johan.isaksson this post; Because according to his answer and according to the release notes you have made a couple of changes in order to enhance the redrawing.
But it tuned out that the redrawing process is not getting better in some case, since when a task is added to the array "Events" then the redrawing process is performed twice (our both screenshot are very clear compare what occurs under v2.0.0 and under V2.0.2).

We're sorry to insist but all we do here is to help you to improve your product, in reporting issues; we're not here to bother you and wasting our time.
Then, please consider our screenshot and our topics as tangible evidence since the redrawing processes are different in version 2.0.0 and version 2.0.2
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 1765 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 1765 times

Post by mats »

Understand your frustration, but we cannot debug a screenshot. We need to see the exact code you use to produce the console log. Please read our forum rules here, for posting for help: viewtopic.php?f=16&t=772

When you write
Just add an item in the array "Events" then, the task will be created in the schedule but the overall process of redrawing will be done twice as shown in our print screen (v2.0.2) herewith.
We need to know exactly how you do this, to be able to determine if error is on your side or in our core. Please provide the exact code you use (include full code of your button onClick method for example).

Post by SIM-LTD »

Hi There

We're not frustrated at all; we just wonder if you read our post.
Because we raised a similar issue (previous post = viewtopic.php?f=44&t=11032) where your colleague Johan.isaksson has created a ticket and mentioned :
This could be optimized, I have created a ticket on investigating it: https://app.assembla.com/spaces/bryntum
It turned out that you made some changes to improve the task rendering (read that ticket please)

So, we are quite a bit of surprise the way you (especially) treat the "Issue" we posted. It seems that others just take into account our screenshot and according to the level of gravity they open up a ticket, without asking us to provide a test case. Anyway.
We had the same strange exchange with you regarding the "CurrentTimeLine that does not show up" issue we have raised a couple of days ago, and it turned out that you realized we were right and created a ticket. And you guys fixed it, in this new release 2.0.2

Thus, if you do not know how to add an event (task) into the array property of the scheduler "Events" in order to create a task in the schedule, well send you the code... :D

Cheers

Post by mats »

The way you describe adding events sounds wrong:
Task Added
We simply add an item in the arrayCollection "events" which a property of the scheduler.
the array tabTask is bind to the scheduler events.
Thus, if you do not know how to add an event (task) into the array property of the scheduler "Events" in order to create a task in the schedule, well send you the code..
Still don't understand the above and request to see the exact code of how you add tasks. Adding a task should be done using our Store#add API: https://bryntum.com/docs/scheduler/#Com ... nction-add

Post by SIM-LTD »

Hi Mats

Sorry if we're are a bit straight...
Look the case is quite simple.

In our Resources Planning the event is added either from :
  • 1) EventEdit Panel
  • 2) Drag & Drop
  • 3) From the server (Push method we have implemented
(We work with the framework VueCLI)

In the case (1) & (2) the task is created like this
scheduler.eventStore.add ({item})
IN that case we do not have much to say.

Therefore, in the case (3) the task is created by adding an item in an array that is bind to the "events" property of the scheduler; like this :

<template>
  ............
  ............
   <scheduler
                    ref="scheduler"
                    :events="events"
                    :resources="resources"     
                    .........
                    .........
    />
</template>                    
     
<script>     
 	export default {    
 	       .........
 	       .........
 		 data() {
            			return {
              		.........
              		.........
          			computed: {               
                               
                               	  	events() {
                				return this.tabTask;
           			 	 },

              		.........
              		.........
The server broadcasts some task which is added like this :
	tabTask.push(item);
As you can see the Scheduler.events property is bind to the tabTask (array);
whenever an item is added/updated then the schedule is updated accordingly, since the array tabTask is updated.

What we try to tell you is very simple; The process of "Task Rendering" is pretty weird when a task is added or updated, not directly from the eventStore, but from the property "events" of the scheduler.
Look in the code above, the property "events" of the scheduler is bind (with the semi column : ) to a computed property events which is an array.

From the release 2.0.0 we raised a post and asked why adding a task leads to redrawing all visible task.
But with the release 2.0.2, the process of redrawing the Task is carried out twice.

We simply want to draw you guys attention on something that might be an issue in the new release 2.0.2, which was not there in the release 2.0.0. That's it. (look our both screenshot).
Nonetheless, the point of redrawing the visible task remains a question/issue, knowing that with the v2.0.2 this is done 2 times.

I do hope is a bit more precise. Feel free to ask more details if necessary

Thank you

Post by johan.isaksson »

Hi,

When binding to `events` it will replace the entire dataset, forcing a full update. A better approach if performance is an issue is to do a differential update yourselves. Something similar to:

1. Retreive new data and compare to existing data.
2. Start a batch
3. Add whats new
4. Remove whats no longer there
5. End batch

I have also created a ticket on investigating the possibility of doing this internally: https://app.assembla.com/spaces/bryntum/tickets/8410
Best regards,
Johan Isaksson

Post Reply