search

BenPortner / js_family_tree

An interactive family tree visualization using d3-dag
GNU General Public License v3.0
70 stars 30 forks source link

Rendering Issue when Clicking Rapidly #16

Open bniedzie opened 1 year ago

bniedzie commented 1 year ago

First, thank you for this interesting project!

While testing the example code, I found that I can consistently produce a couple visual glitches while clicking on the same node twice within transition_duration. The most common issue - nodes and their labels disappearing when clicking a node as its children are being hidden - can be seen below, produced on both your githack link and my own fork of the repository: image

I have implemented a couple of exploratory workarounds for this in my own fork at https://github.com/bniedzie/js_family_tree/commit/6331114a4765e904d039b22f26469e51e7adafd3 - speeding up the transitions and preventing click() from firing often enough to cause the problem seems to avoid the above issue. Neither seems particularly elegant, but it has resolved the problem for me.

I have also found that repeatedly clicking the same node causes the view to gradually zoom in, despite the above change.

Thanks in advance for any thoughts you might have on this!

BenPortner commented 8 months ago

Thank a lot @bniedzie for your interest in js_family_tree and even bigger thanks for your contribution! I checked your code and I think the solution is quite good. You hard-coded a timer to prevent additional clicks in a certain time span. However, the optimum timeout will depend on the client and its underlying hardware. I think your approach can be slightly re-modeled to get a solution that will work on any hardware. Instead of the timer, set a property (e.g. self.in_progress = true) and prevent running click again until the property is set to false again at the end of update_roots. With this solution you should also be able to set the transition durations back to their original higher values. Could you give this a shot and let me know if it works? If yes, I will implement it on the master branch.

Regarding the zoom on repeated clicking: This is most likely caused by the default behavior of d3.zoom. I'm not sure if I want to deactivate it, though. I believe repeated, fast clicking on the same spot is a rather rare necessity when exploring family trees? Feel free to convince me otherwise :)

All the best and thanks again! Ben