biocore / biocore/empress

Don't draw vertical lines / arcs for 1-child nodes

Open
#327 0 comments 0 reactions 0 assignees View on GitHub
needs-js-layouts performance
Dominant language
JavaScript
Stars
56
Forks
32
PR merge metrics
No merged PRs in 30d

Description

Continuation of #184.

All internal nodes in the rectangular and circular layouts\* are drawn with a line or arc spanning their child nodes:

![image](https://user-images.githubusercontent.com/4177727/90165012-ed7f0900-dd4c-11ea-832c-43904ad79a97.png)

![image](https://user-images.githubusercontent.com/4177727/90165061-fa9bf800-dd4c-11ea-9691-c621b74a623b.png)

A corner case with this is that internal nodes with just one child are also technically drawn with a vertical line / arc for these layouts. However, since these nodes only have one child, the line / arc doesn't span anywhere and thus isn't visible. (This is intentional.)

To reduce the amount of operations we ask WebGL to do, it would be good to flag certain nodes as being "1-child" so that places like `Empress.getCoords()` (or the line thickening code, or the SVG exporting code potentially?) would know not to draw vertical lines / arcs for these nodes.

This should probably be done after we finish replacing the Python layouts with JS layouts, since at that point it'll be much easier to pass information about the layout process between the layout computation code and the drawing code.

One easy way to handle this is adding a check for:
- Rectangular layout: if a vertical line's top/bottom child y coordinate are identical
- Circular layout: if an arc's largest / smallest child angle are identical
... and not drawing lines / arcs accordingly. This _could_ be vulnerable to precision issues due to "identical" being hard to compute, but if we use some arbitrary epsilon that's probably fine since the resulting arc/line would be super small without zooming anyway. I think. (Or maybe we should handle this more explicitly.)

\* (the root is drawn with a vertical line in the rectangular layout but without an arc in the circular layout)

Contributor guide

Open the contributing guide

Research direction

Start by tracing Empress.getCoords() and the rectangular and circular layout paths, then inspect the line-thickening and SVG-export code mentioned in the issue. Determine how one-child nodes are identified or how identical child coordinates or angles can be handled; done means those nodes no longer trigger invisible vertical lines or arcs while other node connections remain unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization, frontend, performance
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.