nteract / semiotic

A data visualization framework combining React & D3
https://semioticv1.nteract.io/
Other
2.43k stars 133 forks source link

Fix canvas renders in the old docs examples #612

Closed alexeyraspopov closed 2 years ago

alexeyraspopov commented 2 years ago

https://github.com/nteract/semiotic/commit/ed8fc7106cc46cb1b0cdc515638deeee50a2a621 canvas interaction example wasn't loading due to a csv file not loading (since the server has been changed). Fixing it by using Parcel to fetch the dataset.

https://github.com/nteract/semiotic/commit/cc80bbb4e467ebf8871e7372197467fb11ddd1a4 XYFrame Overview's canvas example wasn't working primarily if you switch from svg to canvas render for something that is already mounted. The root cause for the issue was the fact that VisualizationLayer is expecting a reference to canvas element, but being sent directly as canvasContext.current actually meant that the first render of canvas was empty due to the ref value not being initialized just yet. I made it so Frame passes the ref itself to VisualizationLayer so by the moment VL needs to read the ref, the element is already there. As a part of this commit I also moved renderCanvas function out of the class since it didn't need to use this at all. Moving forward this should help converting VisualizationLayer to a function and also doing some performance tweaks to canvas rendering.

Fixes #609

vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nteract/semiotic/EmPzG3Lq3oeseps8nNAWCUy5f2pU
✅ Preview: https://semiotic-git-fixcanvasrenders-nteract.vercel.app