Devlog 10 - We are in the double digits 🎊

UI Redesign Progress

I am slowly redesigning the app to look like the design I made. I started with the sidebar and then the top control panel. All that went well.

The Graphs… 😅

But then I got to the Graphs. *Oh, the graphs…
*I wanted to redo the backend for them because the
multiple-thread approach was just straight up stupid. It was a pain to develop and would be a pain to maintain. So, in my infinite wisdom, I have gone for just a simple async function. That means that right now the frontend is requesting each data point instead of subscribing to a stream.
After that, I needed to revise the frontend graph component itself. At first I just wanted to make a non-messy implementation of the old version. However, it turned out that the HTML <canvas> element is really slow.
And I mean realllllllllly slow.
So after I wasted like 2 hours trying to optimize the design with no success, I rage quit and went to watch a movie.

WebGL to the Rescue

But I don’t give up that easily.
After the movie, I reimplemented the graph view with WebGL through Pixi.js, which wasn’t even that hard like I expected and overall had much better performance.
Well… at least after I fixed one very stupid bug.

The Bug That Ate 10 GB of RAM

I had forgotten everything from the first GraphView.tsx implementation, so I was just mindlessly copying over the code and renaming the variables to what I thought they meant when I first made it.
Then I got to the part which draws the lap (aka the big loop over all the points-up to 10,000 points at a time).
There was an error on one of the variables. It was the length of some array. I just renamed it to the main array length because… *what other thing would it be, right?
*Well…It was the length of the values array, which was always 1 or 2.So I accidentally turned 1 × 10,000 iterations into 10,000^2 iterations.
Somehow the app still wasn’t lagging that much.
It just took like 10 GB of RAM.

The Result

Thankfully, the new WebGL + Pixi.js approach is way more efficient, so after fixing that bug the graph rendering performs much better. It still isn’t perfect on the UI side of things but I am getting there!