Connecting lines overlap with tip labels

[stenglein-lab]

This is somewhat tricky because tip labels have variable lengths and also it is a function of the browser width.

Perhaps some combination of maximum label length (labels would be truncated past a certain character count) and factoring in label length in line drawing

[meekrob]

https://github.com/stenglein-lab/TreeTangler/blob/b1aebf176f96a8eb7e6a863e621d9d08c12bdb45/lib/cophylogeny/src/cophylogeny-draw.js#L77 the pixel offset (40) doesn't work for long names. The width of the text label can be gotten by SVGElement.getBBox().width, where SVGElement is the actual <SVG:text> element from the DOM. Extracting it from the d3 object sometimes works d3Obj.node() but that function doesn't appear to be available in this context. This object is itself gotten by rightDescendants.filter() in https://github.com/stenglein-lab/TreeTangler/blob/b1aebf176f96a8eb7e6a863e621d9d08c12bdb45/lib/cophylogeny/src/cophylogeny-draw.js#L26 which seems like it should return a standard D3 object.

To select or keep track of the DOM object, perhaps it should be labelled with an id that is connected to the "unique_id" that I assign to the newick object, and is accessible via ".data" in the object returned by .filter().

[meekrob]

The solution:

1. adds an "id" attribute to the text elements of the tree, prefixing "label_" to the unique ID.
2. retrieves each label element from the DOM (document.getElementById) and measures it via getBBox().width

[meekrob]

http://localhost:8000/?left=trees/Nairovirus_L&right=trees/Nairovirus_M: A very long label 'Crimean-Congo_hemorrhagic_fever_reference' (41 characters), is longer than the distance between the trees.