Refactor the interactive trees to be SVG-based

[bartfeenstra]

Refactor the interactive trees to be SVG-based, for improved interactivity as well as easier styling.

Proposals

• What if we do the whole thing in HTML? We can then make everything fully responsive.

[bartfeenstra]

d3.js + https://www.npmjs.com/package/d3-dtree could be a possible replacement for Cytoscape.

[fatso83]

Is there an example of such interactive trees? I have only found one reference example page (your own): https://ancestry.bartfeenstra.com/en/person/. This does not seem to have any such interactivity?

[bartfeenstra]

https://ancestry.bartfeenstra.com/en/person/I0004/ shows one such example. When building your own Betty site, the betty.plugin.trees.Trees plugin (0.2.x) or the betty.trees.Trees extension (0.3.x) must be enabled, and the person whose page you're looking at must have parents or children for anything to be shown.

[fatso83]

Wow, that is fantastic! I really love this (and the entire Betty thing, which makes sharing Gramps data so much nicer). And the zooming in/out works very smooth, so hoping the SVG code ends up as performant 😄