App freezes for a while when there are a lot of annotations

[jeanineharb]

I have deployed Beaverdam on a public cloud, and I am using it to annotate multiple objects.
When there are a lot of annotations on a video, the app freezes for a while (3-4 seconds) every time I try to add or resize an annotation.
I suspect it is because of the GUI elements (keyframebar, annotationbar, svg elements) being continuously reloaded after every action.
Any idea how to fix this?

[antingshen]

Hmm, how long is your video? And how many annotations (visible and hidden) are we talking about?

@szhu

[jeanineharb]

My videos are between 5 and 10 minutes long.
The interface is freezing for a video that has around 2000 annotations (individual keyframes).

[szhu]

Can you use Chrome's DevTools and capture a profile of the slow load? In DevTools, click the Performance tab then click record before the freeze happens, then stop recording after the page is responsive again. Then the Bottom-up and Call Tree tabs on the bottom can help us figure out what the slow functions are.

You can attach a screenshot of both profiler tabs and/or save the profile and attach a link to that. If you're looking for a free way to share the profile link, you can try using CloudApp -- I think it's free.

[clayshieh]

It's probably because the js does a for loop search through all the keyframe comparing the time of each keyframe to the current video time +/- some delta to find the current key frame as well as reinserting the keyframe when updating it. You can probably verify this if the problem only occurs when you edit annotations that are later in the video compared to editing annotations in the beginning of the video.

Edit: the getFrameAtTime() function in annotation.js is used for both inserting and updating (updateKeyFrame()) and deleting (deleteKeyFrameAtTime()) key frames

[jeanineharb]

@szhu Here is the profile for when I move an existing annotation.
profile.txt

@clayshieh I notice the same lag whether it is at the beginning or at the end of the video. I believe it's because the following handlers are triggered for every action, therefore the json data containing the annotations is getting parsed and processed over and over again:

$(this).triggerHandler('change-onscreen-annotations');
$(this).triggerHandler('change-keyframes');

Thank you both for your replies.

[szhu]

Sorry, I can't load your profile for some reason. I get a blank "Performance" tab with no error message, even when running the server from localhost:9229 like you did. You can try one of the following:

• Attaching screenshots of the relevant tabs in the Performance tool
• Try to figure out Performance tool works to figure out which function(s) are taking a long time
• Attaching a set of annotations (I forget how to export them) and a video that can be used to reproduce this issue

[jeanineharb]

@szhu Thank you once again for your reply. I had not deployed Beaverdam on localhost:9229 but on a private IP address with port 5000.
Here are some screenshots of the Performance tool, and I have also attached another profile corresponding to these screenshots.



profile-20180316.txt
Much appreciated.