#178 - Graph Resizing

[RChandler234]

Notes

I added in a set range for the graph (currently less than one minute - any longer and the wobbling would occur before the graph reached the end of the range). This seems to consistently solve the issue until right around when the graph reaches the left side of the screen, then it reverts back to the old way sporadically. Still investigating why that's happening, I have a hunch that either something is causing something to render too slowly which causes the issue to start happening or maybe multiple data points are getting added for the same point in time (from the graph's pov) [I'm less convinced of that one because then why is it only happening once the graph makes it to the left side of the range].

• edit: ok yeah upon further investigation, about a minute in is when it starts fucking up on develop as well, so I think it's some issue with how we're updating the data being passed to the graph

Anyways, will look into that, just wanted to make a draft PR for documenting purposes.

N.B. It seems like only the most recent minute (give or take) of data is being saved. Mostly just documenting this for myself

This article was pretty helpful to explain what actually causes the wiggle. I'd still like to try out D3 sometime in the future, just to see if I could get it any more performant (also just I'm interested), but pretty hopeful that I can get something consistently working with Apex for now: https://bost.ocks.org/mike/path/

Checklist

It can be helpful to check the Checks and Files changed tabs. Please review the contributor guide and reach out to your Tech Lead if anything is unclear. Please request reviewers and ping on slack only after you've gone through this whole checklist.

• [ ] All commits are tagged with the ticket number
• [ ] No linting errors / newline at end of file warnings
• [ ] All code follows repository-configured prettier formatting
• [ ] No merge conflicts
• [ ] All checks passing
• [ ] Screenshots of UI changes (see Screenshots section)
• [ ] Remove any non-applicable sections of this template
• [ ] Assign the PR to yourself
• [ ] No package-lock.json changes (unless dependencies have changed)
• [ ] Request reviewers & ping on Slack
• [ ] PR is linked to the ticket (fill in the closes line below)

Closes #178 (issue #)

[RChandler234]

The flow graph works, the kicker is that you can only add points to the graph or it'll do the wobbling thing. This is because when you pop a value off the beginning of the array of graph values, Apex is registering it as a whole new set of points and thinks it has to interpolate between the old points and the new points, even though they're all mostly the same.

I honestly think this is kinda cool, cause if we add in a "pause graph" button, it means you could go back and look at chunks of data on a graph in realtime like you do with historical data.

My only concern with this is that if you leave the realtime graph running for too long, it might lag the page because the graph is storing too many values (even though it's only displaying a certain range), but it hasn't caused an issue with limited testing, so I'm optimistic that Apex is doing something in the background to avoid this issue (like not rendering values at all if they're outside the currently displayed range).

Will do more extensive testing/ comment the result (want to apply this same change to the graphs on the landing page if there's no real hit to the render-time)

[jr1221]

Bug: does not clear graph when switching datapoints.