mpilone / timeline-vaadin

A Vaadin component for the vis.js Timeline visualization component.
Apache License 2.0
7 stars 6 forks source link

Loading indicator #2

Open wesoos opened 8 years ago

wesoos commented 8 years ago

Hello, I have a listener for when the range changes, during which I fetch some events for timeline items. However, when I drag left or right to change the range, it does not show the loading indicator. Any ideas?

Thanks

mpilone commented 8 years ago

When you drag the timeline left or right are you getting the range change event on the server side? Can you reproduce the issue with the demo?

wesoos commented 8 years ago

Yes I am getting the event, and yes on the demo it's not showing any indication it's working either...

mpilone commented 8 years ago

So if I understand correctly, the issue is that you're not seeing the Vaadin loading indicator when your performing a long operation as a result of the range change event?

I tested this with the demo and I see the loading indicator if I slow down the work done in response to the range change event. For example, if I add:

       try {
          Thread.sleep(5000);
        }
        catch (InterruptedException ex) {
          // ignore
        }

to the RangedChangeListener#rangeChanged call I get the loading indicator for a few seconds. Is it possible that your operation is just completely so fast that you don't see the indicator?

wesoos commented 8 years ago

No my operation takes some time. In your demo, change the amount of data items to 1,000,000 and zoom out until you see about 8 days. Then drag to the left...

mpilone commented 8 years ago

I think the issue you're seeing is that the browser is spending a ton of time in JavaScript calls marshaling and unmarshmaling the JSON required for that many items. In that case you won't get a progress indicator because JavaScript is single threaded so if the thread is busy handling the UIDL request to/from the server it can't display or update the progress indicator. There isn't much that can be done about that other than using fewer items so the browser can render it efficiently. I don't know how optimized the vis.js Timeline is but I'm guessing a few hundred items would be about all you want on the screen at one time or it is going to spend a lot of time laying out items and drawing plus the overhead of marshaling to/from the server.

You can debug this by looking at the developer tools network console in your browser and seeing how much time is spent waiting for the server reply vs how much is spent in JavaScript processing the JSON and redrawing the timeline.

web_inspector_graph

wesoos commented 8 years ago

Sorry for the delay in my response. The majority of the time is spent on the server side...

mpilone commented 8 years ago

I haven't been able to reproduce the issue if it is all server side. If I put a sleep in the range change event I get the Vaadin spinner client side. If I send thousands of items to the client I don't get the spinner but that is most likely because the client is busy processing the returned UIDL and updating the items in the timeline. If you're sending a ton of items you might want to scale it back to avoid flooding the client side with JSON to be processed.

I can look at it more if you can reproduce the issue in the demo with limited items but a long server side operation.