Convert react spring animations to CSS transitions

[joglr]

This PR converts react spring animations to CSS transitions. It should be faster and have less overhead for the Chart component.

I tried recording it, but the video does not do it justice.

Git.Truck.-.Google.Chrome.2023-11-10.02-03-31.mp4

This PR also adds a transition between the tree map and the circle packing!

Git.Truck.-.Google.Chrome.2023-11-10.02-07-25.mp4

The performance is much improved, compared to the old implementation.

You can compare this and current GT like so:

npx git-truck@0.0.0-d21ce66

npx git-truck@latest

My testing has showed that the user experience is much smoother and snappier.

Changes:

• Remove @react-spring/web dependency
• Remove useToggleableSpring hook
• Refactor Node rendering to always use rect (with varying corner radius)
  • Circles have a corner radius of their radius
  • Rectangles have a fixed corner radius of 8 pixels
• Refactor to single NodeText that handles both labels for circles and rectangles
• Adjust animation duration and animation function

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (cf157b9) 59.52% compared to head (b61a78f) 59.52%.
Report is 7 commits behind head on main.

❗ Current head b61a78f differs from pull request most recent head b9f7d88. Consider uploading reports for the commit b9f7d88 to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #662   +/-   ##
=======================================
  Coverage   59.52%   59.52%           
=======================================
  Files           2        2           
  Lines          42       42           
  Branches        7        7           
=======================================
  Hits           25       25           
  Misses         16       16           
  Partials        1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mircealungu]

when running: npx git-truck@0.0.0-9ac4b13 i see the following in the browser:

while this is what I see in the terminal:

[joglr]

when running: npx git-truck@0.0.0-9ac4b13 i see the following in the browser:

while this is what I see in the terminal:

Hey Mircea, thank you for taking the time to test this.

Does it work after a refresh of the page?

With Remix >2.0.0, we are no longer able to know when the web server is ready, as they removed an undocunented API that we relied on, so this might be a race condition issue with the web server not being ready yet. We will have to do some migration to a custom web server to fix this issue, or experiment with the new vite integration from Remix.

If you got the page to show, did the styles seem missing? I think I have narrowed the CSS issue down to occurring when publishing the package, which is always fun to debug, I will look into it.

[mircealungu]

@joglr - indeed, the page loads if I give it enough time!

and you're also right: the stylesheets do not load

[joglr]

I have provided a fix in another PR, should be incorporated into here as well.

Feel free to try it out with:

npx -y git-truck@0.0.0-d21ce66

[mircealungu]

I have provided a fix in another PR, should be incorporated into here as well.

Feel free to try it out with:

npx -y git-truck@0.0.0-d21ce66

This works!

Also, animation is faster:

• zooming out from pandas/docs to pandas with the new version ~2.20s and old version ~3.80s

What I realized is that on this branch, the comments panel is visible to the detriment of the legend:

Can we make the legend panel always be visible? Either at the top of the right-hand side panel, or maybe as a separate panel, in bottom-right which pushes the details panel above it?

[dawidwoz]

I have provided a fix in another PR, should be incorporated into here as well.

Feel free to try it out with:

npx -y git-truck@0.0.0-d21ce66

The animations are much smoother now. Good job. I found one bug when you set the depth to 1, you can see in this version the labels of nested folders (left on the picture) where they are not visible in the current main version (right on the picture).

[joglr]

I have provided a fix in another PR, should be incorporated into here as well.

Feel free to try it out with:

npx -y git-truck@0.0.0-d21ce66

This works!

Also, animation is faster:

• zooming out from pandas/docs to pandas with the new version ~2.20s and old version ~3.80s

That is great to hear!

What I realized is that on this branch, the comments panel is visible to the detriment of the legend:

Can we make the legend panel always be visible? Either at the top of the right-hand side panel, or maybe as a separate panel, in bottom-right which pushes the details panel above it?

As far as I can tell, this is not new and I don't think it is related to this PR? I have created a new issue that address this.

#678

[joglr]

I have provided a fix in another PR, should be incorporated into here as well.

Feel free to try it out with:

npx -y git-truck@0.0.0-d21ce66

The animations are much smoother now. Good job. I found one bug when you set the depth to 1, you can see in this version the labels of nested folders (left on the picture) where they are not visible in the current main version (right on the picture).

Good catch! Will address this soon and update the PR.

[joglr]

@dawidwoz I have pushed a commit that address the bug that you noticed. Feel free to checkout the code and verify it works as intended.

[dawidwoz]

Now, it works great! 🙂

[mircealungu]

Nice :)