biocore / biocore/empress

Support exactly fitting the tree to the window size

Open
#396 0 comments 0 reactions 0 assignees View on GitHub
feature request
Dominant language
JavaScript
Stars
56
Forks
32
PR merge metrics
No merged PRs in 30d

Description

Periodically, I'll change the layout and find that I'll still need to zoom out / pan a bit in order to have the entire tree visible within the window. This is expected behavior, since the current centering code is a heuristic.

It would be nice to modify `Empress.centerLayoutAvgPoint()` to figure out the zoom level needed to show the entire tree at once, without the need to zoom / pan to show the whole tree. This is currently sort of? doable for the moving pictures dataset, at least, by adjusting the code to center the camera at the center of the tree (`max X + min X` / 2, `max Y + min Y` / 2) and then just kinda multiplying the zoom level by something, but this approach will probably break down for different trees.

```js
Empress.prototype.centerLayoutAvgPoint = function () {
var layoutAvgPoint = [];
// Add up x and y coordinates of all nodes in the tree (using
// current layout).
var minX = Number.POSITIVE_INFINITY,
minY = Number.POSITIVE_INFINITY,
maxX = Number.NEGATIVE_INFINITY,
maxY = Number.NEGATIVE_INFINITY;
for (var node = 1; node <= this._tree.size; node++) {
var x = this.getX(node);
var y = this.getY(node);
minX = Math.min(minX, x);
minY = Math.min(minY, y);
maxX = Math.max(maxX, x);
maxY = Math.max(maxY, y);
}

var dy = maxY - minY;
var dx = maxX - minX;
layoutAvgPoint = [
((minX + maxX) / 2),
((minY + maxY) / 2),
// Not sure why a coefficient of 2.5 works, but 2 seems to zoom in too far
2.5 * Math.max(dx, dy) / this._drawer.dim
];
... rest of code is the same from here down ...
};
```

Contributor guide

Open the contributing guide

Research direction

Start by reading Empress.centerLayoutAvgPoint() and the surrounding camera and drawer-dimension logic. Use the moving pictures dataset as an initial check, then compare behavior across differently shaped trees. Done means the camera centers and zooms so the entire tree is visible within the window without manual panning or zooming.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.