[REACT] drag an drop events

Our pure JavaScript Scheduler component


User avatar
Haithem.Gaaloul
Posts: 2
Joined: Thu Nov 12, 2020 5:38 pm

[REACT] drag an drop events

Post by Haithem.Gaaloul »

Hello,

Currently I'm working on migrating bryntum scheduler version 4.0.2 into our project using integration with React.
During the non-regression testing, I noticed two bugs while dragging and dropping events quickly, knowing that in our code we refresh the scheduler data after each drag and drop.
You will find attached the two bugs that I managed to produce.

Best regards
Haithem GAALOUL

Attachments
bug2.gif
bug2.gif (648.35 KiB) Viewed 99 times
bug1.gif
bug1.gif (753.15 KiB) Viewed 99 times

User avatar
fabio.policeno
Core Developer
Core Developer
Posts: 204
Joined: Sun Jul 12, 2020 8:22 pm

Re: [REACT] drag an drop events

Post by fabio.policeno »

Hi Haithem,

Hi have tested our demo Scheduler/examples/react/javascript/advanced and I was unable to replicate the problem.

Could you please provide a test case to reproduce the problem? Thank you.

Fabio Jr. Policeno
Core Developer


User avatar
Haithem.Gaaloul
Posts: 2
Joined: Thu Nov 12, 2020 5:38 pm

Re: [REACT] drag an drop events

Post by Haithem.Gaaloul »

Hello,

I just migrated to the new version 4.0.3

The problem still persists with drag & drop events in a fast way (You will find attached the case reproduced in our example).

The bug is in the "scheduler.module.js" file:

  • Function isElementDraggable => eventRecord is undefined
  • function selectEvent => event is undefined

It should be noted that in our example we make updates in the database for each drop event and resize event therefore we have an execution time a little long compared to the examples of your demos.

Haithem GAALOUL

Attachments
bug3.gif
bug3.gif (827.78 KiB) Viewed 69 times

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

Re: [REACT] drag an drop events

Post by mats »

We cannot help you without a proper test case I'm afraid. We advise you to set breakpoints and try to debug your app to find the problem.

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
CatalinManoliu_COLAS
Posts: 5
Joined: Mon Mar 02, 2020 10:42 am

Re: [REACT] drag an drop events

Post by CatalinManoliu_COLAS »

Hello,

I am the Technical Lead of the project Haithem is working on. By the way, I am also the one that recommended to our client to buy the scheduler component. We are very pleased until now, the scheduler is very appreciated !

It is difficult and time consuming for us to reproduce this problem with a simple solution based on your demos. And we already encountered another error in the same file, scheduler.module.js

We need to continue with more important (business) features in our project and updating to the 4.0.3 version of the scheduler will be suspended for now.

However, I think we are giving you now enough details to improve the robustness of the scheduler and avoid these errors :

For the first error: a check is required in the scheduler code before accessing the event.assignments property to avoid the error

TypeError: Cannot read property 'assignments' of undefined
In the “Scheduler.selectEvent” function in /build/scheduler.module.js:137590

Scheduler code having the issue :

137590 | preserveSelection ? this.selectedCollection.add(event.assignments) : this.selectedEvents = event;

Code: Select all

  137587 |   // If the event is already selected, this is a no-op.
  137588 |   // In this case, selection must not be cleared even in the absence of preserveSelection
  137589 |   if (!this.isEventSelected(event)) {
137590 |     preserveSelection ? this.selectedCollection.add(event.assignments) : this.selectedEvents = event;
         | ^
  137591 |   }
  137592 | }
  137593 | /**

I also attached a picture with the full stacktrace of the error.

For the second (other) error: checks are required in the scheduler code before accessing the eventRecord.resizable and eventRecord.isMilestone properties to avoid the error

TypeError: Cannot read property 'resizable' of undefined
In the “EventDrag.isElementDraggable” function in /build/scheduler.module.js:123471

Scheduler code having the issue :

123471 | return !(eventResize && eventRecord.resizable && !eventRecord.isMilestone && eventResize.resize.overAnyHandle(event, eventElement));

Code: Select all

  123468 |    const eventRecord = scheduler.resolveEventRecord(eventElement); // using EventResize and over a virtual handle?
  123469 |    // Milestones cannot be resized
  123470 | 
123471 |    return !(eventResize && eventRecord.resizable && !eventRecord.isMilestone && eventResize.resize.overAnyHandle(event, eventElement));
         | ^  123472 |  }
  123473 | 
  123474 |  getTriggerParams(dragData) {

I also attached a picture with the full stacktrace of the error.

I really hope you will use all the information we gave you and the context provided in order to improve the scheduler.
Some context reminder : the scheduler "events" are changing after the drag/drop operation is initiated. The change is happening in response of an (asynchroneous) network request completion. When the drag/drop is completing the events are not the same as when the drag/drop was initiated.

Thank you for your support. I hope to see these issues resolved in a future version of the scheduler.

Best regards,

Catalin

Attachments
Error 2 - TypeError Cannot read property 'resizable' of undefined.png
Error 2 - TypeError Cannot read property 'resizable' of undefined.png (94.19 KiB) Viewed 57 times
Error 1 - TypeError Cannot read property 'assignments' of undefined.png
Error 1 - TypeError Cannot read property 'assignments' of undefined.png (552.44 KiB) Viewed 57 times

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

Re: [REACT] drag an drop events

Post by mats »

We're glad you appreciate our product. But we need a bit more to debug. We do need to get as much info from you as possible (see forum guidelines here: viewtopic.php?f=16&t=772). A stack trace means nothing in an application with state. So at the very least - if you cannot create a simple test case please provide detailed step-by-step descriptions of the two bugs:

  1. How do you reproduce it? Drag an event while it's being saved?
  2. Please post a sample JSON response that your server would respond with.
  3. Do you use our basic stores, our Crud Manager or do you handle server communication yourself, and if so how do you apply the response after a save to our eventStore?
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
CatalinManoliu_COLAS
Posts: 5
Joined: Mon Mar 02, 2020 10:42 am

Re: [REACT] drag an drop events

Post by CatalinManoliu_COLAS »

Thank you for your reply.

Ok, I took a look at forum guidelines. Unfortunately we cannot spend more time for the moment trying to reproduce these errors in a sample.

Our events are stored on server and updated/refreshed with rest api requests. Each time an event is moved on the scheduler we post requests to the server and in response will (partially) refresh the events of the scheduler on the involved resources (there are multiple users working on the same scheduler). We thing that the errors are occurring because when the drag/drop is completing the events are not exactly the same as those that existed when the drag/drop was initiated (in the meantime, the callback of a refresh api request happens and events were changed).

With all the respect, I disagree about "A stack trace means nothing in an application with state" as this statement is a bit strong. A stack trace is extremely valuable even if don't have state or dump. In our case, it provides the path where the scheduler code lacks for undefined/null values checking at its public surface. And I think you can already use this it in order to improve its robustness.

For now we will stay with the 3.1.9 version and will reevaluate upgrading to a 4.x.x version later. If the errors are still present at that time, we will see if we can find more time to provide a full sample.

Regards,

Catalin


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

Re: [REACT] drag an drop events

Post by mats »

We would love to help you with this. Answers to these 2 questions would be very valuable:

  1. Please post a sample JSON response that your server would respond with. You can copy this directly from the Network tab in Chrome dev tools.

  2. Do you use our basic stores, our Crud Manager or do you handle server communication yourself, and if so how do you apply the response after a save to our eventStore?

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
CatalinManoliu_COLAS
Posts: 5
Joined: Mon Mar 02, 2020 10:42 am

Re: [REACT] drag an drop events

Post by CatalinManoliu_COLAS »

I will send you some code fragments and real data in a private message. The communication with the server api is handled by us.


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

Re: [REACT] drag an drop events

Post by mats »

Reproduced, thanks for info. Ticket opened: https://github.com/bryntum/support/issues/1929

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