Populate hydrograph and monthly flow charts based on "mid" or "extremes" mode

webapp/components/Viz/Hydrograph.vue

@@ -7,6 +7,10 @@ import type { Data } from 'plotly.js'
 
 const props = defineProps(['streamHydrograph'])
 
+import { useStreamSegmentStore } from '~/stores/streamSegment'
+const streamSegmentStore = useStreamSegmentStore()
+let { appContext } = storeToRefs(streamSegmentStore)
+
 onMounted(() => {
   initializeChart(
     $Plotly,
@@ -16,8 +20,13 @@ onMounted(() => {
   )
 })
 
-watch(props.streamHydrograph, newValue => {
-  initializeChart($Plotly, 'hydrograph', buildChart, toRaw(newValue))
+watch(appContext, () => {
+  initializeChart(
+    $Plotly,
+    'hydrograph',
+    buildChart,
+    toRaw(props.streamHydrograph)
+  )
 })
 
 // Round to significant digits.  Stub.
@@ -107,9 +116,7 @@ const buildChart = hg => {
     name: 'Historical Mean (Modeled), 1976-2005',
   })
 
-  // There's a gotcha here: two scenarios (ACCESS1-0, BNU-ESM) don't have RCP 2.6 or 6.0.
-  // Historical needs to have been removed.
-  let projectedFlowData = hg['projected']
+  let projectedFlowData = hg['projected'][appContext.value]
 
   let traceConfig = {
     doy_min: {

webapp/components/Viz/MonthlyFlow.vue

@@ -6,6 +6,10 @@ import type { Data } from 'plotly.js'
 
 const props = defineProps(['streamMonthlyFlow'])
 
+import { useStreamSegmentStore } from '~/stores/streamSegment'
+const streamSegmentStore = useStreamSegmentStore()
+let { appContext } = storeToRefs(streamSegmentStore)
+
 const monthLabels = {
   ma21: 'Oct',
   ma22: 'Nov',
@@ -30,8 +34,13 @@ onMounted(() => {
   )
 })
 
-watch(props.streamMonthlyFlow, newValue => {
-  initializeChart($Plotly, 'monthly-flow', buildChart, toRaw(newValue))
+watch(appContext, () => {
+  initializeChart(
+    $Plotly,
+    'monthly-flow',
+    buildChart,
+    toRaw(props.streamMonthlyFlow)
+  )
 })
 
 // stats is assumed to be non-null, raw, and only dynamic land cover now.
@@ -46,28 +55,53 @@ const buildChart = () => {
     return historicalFlowData[monthKey]
   })
 
-  // Historical needs to have been removed.
-  let projectedFlowData = props.streamMonthlyFlow['projected']
-
-  // Each box plot needs to be its own trace (due to Plotly.js limitations),
-  // and a new legend entry is added for each trace. To clean this up, show
-  // the legend for just the first box plot trace, hide the rest, and override
-  // the name of the first legend entry to make it more general & apply to all
-  // of the box plots. Also, make sure all box plots have the same color.
-  let showLegend = true
-  Object.keys(monthLabels).forEach(monthKey => {
+  let projectedFlowData: number[]
+  if (appContext.value === 'mid') {
+    projectedFlowData = []
+    Object.keys(monthLabels).forEach(monthKey => {
+      projectedFlowData.push(
+        props.streamMonthlyFlow['projected'][appContext.value][monthKey]
+      )
+    })
+  } else {
+    projectedFlowData = props.streamMonthlyFlow['projected'][appContext.value]
+  }
+
+  // For "extremes" mode, show a boxplot populated by all values across all models
+  // and scenarios for each month. For "mid" mode, show a single point of the mean
+  // of all models at RCP 6.0 for each month.
+  if (appContext.value === 'extremes') {
+    // Each box plot needs to be its own trace (due to Plotly.js limitations),
+    // and a new legend entry is added for each trace. To clean this up, show
+    // the legend for just the first box plot trace, hide the rest, and override
+    // the name of the first legend entry to make it more general & apply to all
+    // of the box plots. Also, make sure all box plots have the same color.
+    let showLegend = true
+    Object.keys(monthLabels).forEach(monthKey => {
+      traces.push({
+        x: Array(projectedFlowData[monthKey].length).fill(
+          monthLabels[monthKey]
+        ),
+        y: projectedFlowData[monthKey],
+        type: 'box',
+        name: 'Projected (Modeled), 2046-2075',
+        marker: { color: '#3182bd', size: 8 },
+        line: { color: '#3182bd', width: 1.5 },
+        fillcolor: '#6baed6',
+        showlegend: showLegend,
+      })
+      showLegend = false
+    })
+  } else {
     traces.push({
-      x: Array(projectedFlowData[monthKey].length).fill(monthLabels[monthKey]),
-      y: projectedFlowData[monthKey],
-      type: 'box',
+      x: Object.values(monthLabels),
+      y: projectedFlowData,
+      type: 'scatter',
+      mode: 'markers',
       name: 'Projected (Modeled), 2046-2075',
-      marker: { color: '#3182bd' },
-      line: { color: '#3182bd', width: 1.5 },
-      fillcolor: '#6baed6',
-      showlegend: showLegend,
+      marker: { color: '#3182bd', size: 8 },
     })
-    showLegend = false
-  })
+  }
 
   let monthMarkers = Object.values(monthLabels)
   traces.push({
@@ -78,11 +112,12 @@ const buildChart = () => {
     name: 'Historical (Modeled), 1976-2005',
     marker: {
       size: 8,
+      symbol: 'square',
       color: '#666666',
     },
   })
 
-  const titleText: string = 'Mean monthly modeled flow rate, RCP 8.5'
+  const titleText: string = 'Mean monthly modeled flow rate'
 
   const layout = getLayout(titleText, 'Mean monthly flow, cf/s', {
     type: 'category',

webapp/stores/streamSegment.ts

@@ -61,7 +61,7 @@ export const useStreamSegmentStore = defineStore('streamSegmentStore', () => {
     streamStats.value = null
     var dataResponse
 
-    let dataUrl = `${$config.public.snapApiUrl}/conus_hydrology/hydroviz/${segmentId.value}/CCSM4`
+    let dataUrl = `${$config.public.snapApiUrl}/conus_hydrology/hydroviz/${segmentId.value}`
 
     // Needs error checking, etc.
     isLoading.value = true