Use FRC Colors API for bubble and scatter plots

jonahsnider commented 9 months ago

Description

Right now, all graphs use a single blue color for all teams. This makes it difficult to understand at a glance, since all the points look the same. Using the FRC Colors API, we can take the list of teams on the graph, fetch their colors, and use that to color the markers on the plot.

As a disclaimer, I'm the creator of FRC Colors.

Implementation

The FRC Colors API doesn't use API keys, so each Statbotics visitor can just send a request from their browser. The API request runs in the background, and the chart is rerendered once the colors are received.

If a team is missing colors from the API, it uses the standard blue color as a fallback.

If the API request fails, an error is logged to the console. The chart will still render like normal.

Examples

example2 example1

vercel[bot] commented 9 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
statbotics	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2023 10:29pm
statbotics-v3	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2023 10:29pm

vercel[bot] commented 9 months ago

Someone is attempting to deploy a commit to a Personal Account owned by @avgupta456 on Vercel.

@avgupta456 first needs to authorize it.

William5553 commented 9 months ago

I think it should be toggleable between the single colour and team colour

avgupta456 commented 8 months ago

Thanks for working on this! FRC Colors looks super cool! Would you be interested in having the data stored in the Statbotics Database so it doesn't query your API every time someone opens the website? And if so, would you want the colors to be included or excluded in the Statbotics API?

I agree with @William5553 that this should ideally be toggle-able. I can add that to this PR in the next couple days hopefully.

jonahsnider commented 8 months ago

FRC Colors looks super cool!

Thank you!

Would you be interested in having the data stored in the Statbotics Database so it doesn't query your API every time someone opens the website? And if so, would you want the colors to be included or excluded in the Statbotics API?

Having clients hit FRC Colors directly is fine.

I agree with @William5553 that this should ideally be toggle-able. I can add that to this PR in the next couple days hopefully.

Sounds good, thanks!

jonahsnider commented 8 months ago

I can add that to this PR in the next couple days hopefully.

@avgupta456 Any updates on this? I'm happy to make the requested changes myself if you give a little guidance on where the toggle should be & how it should look.

avgupta456 commented 8 months ago

Thanks for the ping. I realized I would need to do a bit of refactoring to have toggle buttons so we can skip that for now.

However before we merge, I tried rendering the Bubble Chart on the Teams page with 3000+ teams and realized the colors do not work. There seems to be a lot of latency and the page is rerendering multiple times. Could you check that out and fix the useColor() hook if needed? Thanks again for working on this!

jonahsnider commented 8 months ago

However before we merge, I tried rendering the Bubble Chart on the Teams page with 3000+ teams and realized the colors do not work.

This is intentional behavior. The FRC Colors API has a limit of 100 teams per request, so for all teams that would be 30+ requests. Additionally, I don't think there is value in being able to see team colors from graph views with so many teams. IMO, the main use case for having team colors is looking at the plot for an event, and being able to glance at a point and have an idea of who it is, without needing to hover over each point to check.

There seems to be a lot of latency and the page is rerendering multiple times. Could you check that out and fix the useColor() hook if needed? Thanks again for working on this!

This shouldn't be happening? Is this definitely a problem with the useColors() hook? It doesn't even try sending a request when there's more than 100 teams in the input array, so it shouldn't be causing any lag.

For graphs with less than 100 teams, it should only do a single rerender once the API request is finished. If the request is finished before the user clicks on any of the graph tabs, team colors will be shown from the start, there won't be any additional renders.

I just pushed an optimization that helps avoid sending the same request multiple times in parallel. This should help reduce resource consumption by a bit, since there's only a single HTTP request going out for each page.

jonahsnider commented 8 months ago

@avgupta456 bumping this

avgupta456 commented 8 months ago

@avgupta456 bumping this

Sorry for the delay, I'll take a look tomorrow!

avgupta456 commented 8 months ago

@jonahsnider Fixed a bug with a useEffect that was firing repeatedly. Also added some toggles. Let me know what you think

jonahsnider commented 7 months ago

Thanks! I'll test out the changes tonight and let you know if there's anything unusual I notice. Should be good to merge if nothing comes up though, right?

avgupta456 commented 7 months ago

Yeah if you're happy with it then I can merge it in a bit. I'll keep an eye on things to make sure the deployment goes smoothly. When I revamp the website for next season I'll add an acknowledgements section where I will shout out FRC Colors.

jonahsnider commented 7 months ago

@avgupta456 I just pushed a change which builds on the toggle & loading functionality you wrote earlier. It does two main things:

Improve the accessibility & behavior of the color toggle buttons
Use a single React context to store colors
- I noticed that the hacky request deduplication code I had written was throwing errors, so I came up with a more robust approach using a context
- This makes it a lot nicer to check if colors are still loading in
- Also enables simpler ways to access colors in the chart components

Please LMK if that change seems okay to you, or if there's anything I should modify.

avgupta456 commented 7 months ago

Thanks, I'll check it out tonight!

avgupta456 commented 7 months ago

Looks great to me, I'm going to go ahead and merge it now. Thanks again for working on this! If you want to make a post on Chief Delphi about it feel free, otherwise I can also highlight this new feature and FRC Colors in the 2023 season thread.

jonahsnider commented 7 months ago

Yay! Thank you!

I'm planning on writing a little announcement post tomorrow. Feel free to mention FRC Colors in the Statbotics thread and/or link to the thread I'll create.

Thank you again for your help with this PR, very exciting to have this functionality available for so many people!

avgupta456 / statbotics