Load and render heavy annotation

[magednasan]

Hello,

Thank you for this cool plugin. Currently, I am working on an application to load annotation that was generated offline (with the same structure of annotation drawn manually, see attached image).

The annotation file is 30 Mb size and saved as text file, with a total number of <path> tags in <svg> equals to 50000, and number of points of each <path> varies between [3, 300]. Loading this annotation is performed as:
this.viewer.annotations.set(heavyAnnotation); after cleaning the previous annotation if any using this.viewer.annotations.clean();
heavyAnnotation is an array of elements, each element is an array of length 2, filled as following: ["path", {class: 'myClass', d: 'M37.528 49.5528L37.524 49.5556L37.518 .... z'}].
Loading the annotation in done in 7-10 secs, which consists of downloading and parsing. The loading time is understood, but the navigation (move or zoom) is getting heavy and the unreactive, around [1-2] sec from scroll-event to the end of loading the annotation. One trick that I use currently is to hide the annotation on start-animation re-show it on finish-animation.
The image itself is huge 125984x72104. However, with openseadragon plugin the navigation is still acceptable and reactive. Only, when re-rendering the annotation on (animation) I got this issue and only with huge number of <path> tags in the annotation.
I understand that loading huge is lengthy process, and I wonder whether I can enhance the reactivity (zoom and move) with the annotation. Is it possible to only render the annotation portion that is visible? Also, is there any event to notify us when the annotation is viewed completely? All ideas and suggestions are welcome.

Thank you,

[iangilman]

This isn't my project, so no doubt @emigre knows better than I, but for something with a ton of annotations, you might consider switching away from SVG (which is what this plugin uses) to canvas (there are other overlay plugins for that). With canvas, you re-draw every frame, which means that you're able to be clever about choosing what to draw... For instance, if you are zoomed into a particular area, just draw that area. Or if you're zoomed out, just draw the major annotations, not the details. Of course, that still leaves you to implement the structure that allows you to filter based on the view.

Another option might be to switch to https://github.com/recogito/annotorious-openseadragon, which I believe is more actively maintained, and has been doing some work on large amounts of annotations.