Query new gauges API in all remaining places where flows are displayed

[ngottlieb]

• add new flow queries for the reach map table component
• add new flow queries for state table component
• update reach beta box to query new flow API
• update flow tab chart to read data from new API

Updating description with ongoing todo list from comments:

• Need to add color legend to state tables
• Can we make it so that clicking anywhere on the row of a river takes someone to the river page? Knowing to click on the name of the river is not intuitive, which is also the case on production now.
• Beta does not have the color blind option (high contrast) or the "only show runnable filter." Can we at least restore the color blind option, or is that a weird thing to offer?
• default graph to week
• chart and table buttons are out of alignment
• attempt to define flow legend on the graph as "1000-3333cfs" (for example) rather than "> 1000", "> 3333"
• medium runnable range appears black in the legend and should be green
• Gage Detail link spelling fix (Gauge), and needs to point to something
• Add source gauge link to flow tab
• Indicate gauge source on flow tab
• switch "low runnable" and "high runnable" colors — darker should indicate more water than less
• update NWI map table flow query to use new endpoint
• handle "migration-runnable" status on frontend

[ngottlieb]

beta box changes incorporated into #591

[ngottlieb]

flow tab changes incorporated into #591

[ngottlieb]

The existing state lists, it turns out, are still Laravel-based – e.g. https://www.americanwhitewater.org/content/River/state-summary/?state=AK. I don't think it makes sense to make changes to the Laravel code-base to incorporate retrieving data from the new gauge API, which leaves us with two options:

1. launch new gauge system without a state-by-state table
2. re-write the state by state table in the Vue app

Any thoughts @AWKevin @tallowen ?

[tallowen]

I think if it's not too much work, getting the state-by-state tab into vue makes sense to me.

[ngottlieb]

I think if it's not too much work, getting the state-by-state tab into vue makes sense to me.

does an API already exist to support this? I'll look but you may know off the top of your head if the mobile app is doing something similar. I would need: query reaches by state and include correlation details with the response @tallowen

[tallowen]

@ngottlieb - we don't have that API yet - the mobile app does all of it's sorting/filtering client side after it already has all of the information right now.

[ngottlieb]

state table work is functional, merged into #591 via #593. It will continue to be updated when new APIs are available from @tallowen

[ngottlieb]

Tweaks from @AWKevin after initial review:

• default graph to week
• chart and table buttons are out of alignment
• attempt to define flow legend on the graph as "1000-3333cfs" (for example) rather than "> 1000", "> 3333"
• medium runnable range appears black in the legend and should be green
• Gage Detail link spelling fix (Gauge), and needs to point to something
• Add source gauge link to flow tab
• Indicate gauge source on flow tab
• switch "low runnable" and "high runnable" colors — darker should indicate more water than less

[ngottlieb]

Additional tweaks from @AWKevin

• Need to add color legend to state tables
• Can we make it so that clicking anywhere on the row of a river takes someone to the river page? Knowing to click on the name of the river is not intuitive, which is also the case on production now.
• Beta does not have the color blind option (high contrast) or the "only show runnable filter." Can we at least restore the color blind option, or is that a weird thing to offer?

[ngottlieb]

this PR https://github.com/AmericanWhitewater/aw-components/pull/354 supports a new endpoint for a better approach to displaying flow data in the NWI map table. pending its release:

• update NWI map table flow query to use new endpoint