Improve state transitions

[kachkaev]

Fixes #12, reduxjs/redux-devtools-chart-monitor#17, zalmoxisus/redux-devtools-extension#269

I did some refactoring of update() function and thus made state transitions a bit less crazy. Node ids are now equal to something like root|branch|subBranch|subBranch[0]|property instead of just an integer, which makes it possible to re-use circles and links correctly. Thus, adding an array item somewhere near the top of the tree does not cause a huge shuffle like this:

The animation is still not ideal in a case when an item is being added to the middle of an array. This is still visualised as last item added, i+1 ... old length items changed instead of item at i added. Persistent string ids do allow for an improvement here, but this will require a complete array diffing and using hashes instead of integers for array indexes. Not sure this is worth it, at least at this point.

A couple of other fixes:

• text alignment is now animated (watch todoStore in the gif above)
• node radius is being taken from options (used to be hardcoded by mistake)
• blinkDuration was added to options

Did not upgrade to d3@4 so keep changes minimal.

Demo: https://kachkaev.github.io/d3-state-visualizer-test/
Demo repo: https://github.com/kachkaev/d3-state-visualizer-test

[kachkaev]

The radius from defaultOptions was not used at all, see nodeUpdate.select('circle').attr('r', 7) on old line 245

[kachkaev]

This value was hardcoded on old line 256

[kachkaev]

No need to pass source any more, because transition positions are now taken from previousNodePositionsById / nodePositionsById

[kachkaev]

ping @romseguy :–)

@zalmoxisus can you please check if all works in redux-devtools-extension by doing npm link? I'm especially interested in knowing that clicking on text for 'zooming in' to the given node is not broken.

Really looking forward to see smooth transitions in the Chart tab! Using your extension nearly every day! 🥇

[romseguy]

@kachkaev thank you very much for this PR. As of now, I have no time to review. Maybe @zalmoxisus or somebody else can confirm everything works fine with your changes? Then I'll merge and release it.

[kachkaev]

Thanks for your comment @romseguy. @zalmoxisus seems to be busy these days too, but says he is open to move his devtools-related repos to a new org called redux-devtools. Details here: zalmoxisus/redux-devtools-extension#269 (comment). What do you think of moving the chart monitor and this repo there too so that more people could help with PRs?

I'm not pretending to become a part of that group because I'm more or less a stranger, but I'm sure you'll find a few enthusiastic folks that have enough time and trust. And the wheels will start rolling again.

[romseguy]

Looks like a good idea to me. I don't have experience with Github organizations so let me know how I should go about it I guess 🤔

[kachkaev]

I guess that after @zalmoxisus creates a new org and makes you a member of it, you'll be able to go to your repo's settings and transfer it from there. The old urls will redirect to a new place, so no troubles for googlers or old blog posts!

If you know anyone else who's been an active contributor to any redux-devtools parts, it'd be great if you also suggested @zalmoxisus to add them. The more trusted people are members of the groups, the higher the probability that the new PRs are merged quicker. I've seen this working in a couple of places around github quite well.

[kachkaev]

Hi again @romseguy. I understand that you are busy, just curious if you'd be interested in finding time to move the project to a group.

@zalmoxisus I saw you started milestone 3.0 for redux-devtools-extension, which sounds like great news! Would you be happy to create a new group for the project and accept d3-state-visualizer and redux-store-visualizer to it as a part of your path to 3.0? This may release more of @romseguy's time and help grow the community around your awesome repos. WDYT?

UPD: Just noticed that milestone 3.0 was around for a few months, but it's still great to see some movement in the repo.

[romseguy]

if you'd be interested in finding time to move the project to a group.

I am, just waiting for @zalmoxisus to create the org.

[kachkaev]

ping @zalmoxisus

[kachkaev]

ping @zalmoxisus

[kachkaev]

Given that we're still waiting for an org, would you mind reviewing and merging this @romseguy?

[romseguy]

I have no time / will to maintain this anymore and it looks life you dived pretty deep in the project, I could give you push access to this repo if you'd like to.

Thank you for the beautiful PR btw :)

[kachkaev]

No worries that you can no longer support the repo – thanks for creating it in the first place! I'll be happy to help as long as I can.

I'll also ask @gaearon if we can move all redux-devtools repos to an org in the near future. Will share a link to an issue once I create it.