Boost performance (for the future)

[yuzhenmi]

Right now, ePlant doesn't have the best performance for its native plugins... especially the eFPs. -cache unmodified shapes in in-memory canvas or as PNG to avoid redrawing everything every frame -if a shape has been translated, draw the cache at the new position -if a shape has been zoomed, try to draw the cache with scaling... this will probably cause the image to get distorted though, so redraw if it doesn't work well -if a shape is not redrawn but mouse movement detection is desired, append the shape to the context buffer and detect mouse collision without rendering

Performance for Cytoscape.js and JSmol cannot be helped though :(

[yuzhenmi]

To determine whether a shape should be redrawn, a JavaScript setter (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters) can be set up that sets a redraw flag to true whenever a property that changes the shape's appearance is modified. This should boost the frame rate of eFP views by at least 3-fold, since the rendering of outlines is the source of bottleneck.

[yuzhenmi]

I've been experimenting with getters and setters. Unfortunately, most IE browsers do not support this.

I speculate if I implement something that monitors for properties changes of renderable shapes, and redraw shapes only if something changes, there can be a huge performance improvement.

I think my options are: (1) Use setters and make ePlant completely non-functional for IE (2) Create methods for setting variables, instead of assigning values to variables directly. This, however, will not prevent codes that do assign values to variables directly, and will cause problems if that happens. But it can be avoided by strictly using the methods for setting variables. Cytoscape.js actually uses something like this (but I don't think it's for this kind of performance optimization), if I don't use their methods for setting variables then they don't get synchronized properly.

Any opinions?

[jamiewaese]

I don't want to get bogged down trying to build for every platform out there. Ideally it should work in all browsers, but I'm prepared to say this was designed for Firefox, Chrome and Safari. It's a shame IE doesn't work the same as the other browsers, but that's their problem not ours.

Are you okay with that, Nick?

On 2013-12-10, at 11:19 PM, Hans Yu wrote:

I've been experimenting with getters and setters. Unfortunately, most IE browsers do not support this.

I speculate if I implement something that monitors for properties changes of renderable shapes, and redraw shapes only if something changes, there can be a huge performance improvement.

I think my options are: (1) Use setters and make ePlant completely non-functional for IE (2) Create methods for setting variables, instead of assigning values to variables directly. This, however, will not prevent codes that do assign values to variables directly, and will cause problems if that happens. But it can be avoided by strictly using the methods for setting variables. Cytoscape.js actually uses something like this (but I don't think it's for this kind of performance optimization), if I don't use their methods for setting variables then they don't get synchronized properly.

Any opinions?

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

I've been trying to apply the optimization on SVGs to try it out. Turned out to be a disaster... In short, I was trying to reposition cached SVGs when the view is panned, to avoid rerendering the SVG, and I encountered some other performance issue that I cannot (yet) overcome. For now, I think the most I can do is optimize performance when the view is static, so that our UI is more responsive when the user is not moving the camera. I'm really disappointed, I was hoping to make panning smooth too!

[nprovart]

IE is used for about 21% of all BAR queries (way down from its peak of around 50% a couple of years ago), see bar.utoronto.ca/bbclone. So maybe that's not such a bad thing to be designed for the 3 major browsers apart from IE. N.

......................................... Nicholas Provart, PhD Associate Professor, Plant Cyberinfrastructure & Systems Biology Chair, Bioinformatics SC, Multinational Arabidopsis Steering Committee Member, North American Arabidopsis Steering Committee and IAIC Member, Centre for the Analysis of Genome Evolution and Function

Currently on sabbatical in the Brady Lab at UC Davis

Phone. +1-530-754-9652 Skype. nicholas.provart, Fax. +1-425-675-7036 URL. http://www.csb.utoronto.ca/faculty/provart-nicholas The Bio-Analytic Resource. http://www.BAR.utoronto.ca email. nicholas.provart@utoronto.ca

On Tue, Dec 10, 2013 at 8:30 PM, Jamie Waese notifications@github.comwrote:

I don't want to get bogged down trying to build for every platform out there. Ideally it should work in all browsers, but I'm prepared to say this was designed for Firefox, Chrome and Safari. It's a shame IE doesn't work the same as the other browsers, but that's their problem not ours.

Are you okay with that, Nick?

On 2013-12-10, at 11:19 PM, Hans Yu wrote:

I've been experimenting with getters and setters. Unfortunately, most IE browsers do not support this.

I speculate if I implement something that monitors for properties changes of renderable shapes, and redraw shapes only if something changes, there can be a huge performance improvement.

I think my options are: (1) Use setters and make ePlant completely non-functional for IE (2) Create methods for setting variables, instead of assigning values to variables directly. This, however, will not prevent codes that do assign values to variables directly, and will cause problems if that happens. But it can be avoided by strictly using the methods for setting variables. Cytoscape.js actually uses something like this (but I don't think it's for this kind of performance optimization), if I don't use their methods for setting variables then they don't get synchronized properly.

Any opinions?

— Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHubhttps://github.com/jamiewaese/ePlant/issues/70#issuecomment-30293198 .

[jamiewaese]

Microsoft should give us a grant if they want us to develop for their noncompliant browser.

On 2013-12-11, at 11:21 AM, nprovart wrote:

IE is used for about 21% of all BAR queries (way down from its peak of around 50% a couple of years ago), see bar.utoronto.ca/bbclone. So maybe that's not such a bad thing to be designed for the 3 major browsers apart from IE. N.

......................................... Nicholas Provart, PhD Associate Professor, Plant Cyberinfrastructure & Systems Biology Chair, Bioinformatics SC, Multinational Arabidopsis Steering Committee Member, North American Arabidopsis Steering Committee and IAIC Member, Centre for the Analysis of Genome Evolution and Function

Currently on sabbatical in the Brady Lab at UC Davis

Phone. +1-530-754-9652 Skype. nicholas.provart, Fax. +1-425-675-7036 URL. http://www.csb.utoronto.ca/faculty/provart-nicholas The Bio-Analytic Resource. http://www.BAR.utoronto.ca email. nicholas.provart@utoronto.ca

On Tue, Dec 10, 2013 at 8:30 PM, Jamie Waese notifications@github.comwrote:

I don't want to get bogged down trying to build for every platform out there. Ideally it should work in all browsers, but I'm prepared to say this was designed for Firefox, Chrome and Safari. It's a shame IE doesn't work the same as the other browsers, but that's their problem not ours.

Are you okay with that, Nick?

On 2013-12-10, at 11:19 PM, Hans Yu wrote:

I've been experimenting with getters and setters. Unfortunately, most IE browsers do not support this.

I speculate if I implement something that monitors for properties changes of renderable shapes, and redraw shapes only if something changes, there can be a huge performance improvement.

I think my options are: (1) Use setters and make ePlant completely non-functional for IE (2) Create methods for setting variables, instead of assigning values to variables directly. This, however, will not prevent codes that do assign values to variables directly, and will cause problems if that happens. But it can be avoided by strictly using the methods for setting variables. Cytoscape.js actually uses something like this (but I don't think it's for this kind of performance optimization), if I don't use their methods for setting variables then they don't get synchronized properly.

Any opinions?

— Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHubhttps://github.com/jamiewaese/ePlant/issues/70#issuecomment-30293198 .

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

I optimized what I call "advshape" (shapes with Bezier curves, like the ones in eFPs) when camera is static. If you go to plant view now, you'll see that the detection of mouse events is almost instant, and the UI does not lag when camera is not moving. Still poor performance when camera moves though. But I think this makes eFPs much more friendly to laptops (it was lagging badly before on mine).