From 6d9112d3266c67c4d977a062941d6261eb30fc7c Mon Sep 17 00:00:00 2001
From: Nick Gottlieb <ngottlieb@gmail.com>
Date: Mon, 3 Jun 2024 15:31:19 -0700
Subject: [PATCH] refactor flow querying for nwi table to only submit single
 queries per reach

---
 src/app/assets/scss/abstracts/_variables.scss |  6 +-
 .../components/nwi-rivers-table.vue           | 92 +++++++++----------
 src/app/views/river-index/rivers-by-state.vue |  6 +-
 3 files changed, 46 insertions(+), 58 deletions(-)

diff --git a/src/app/assets/scss/abstracts/_variables.scss b/src/app/assets/scss/abstracts/_variables.scss
index f8615d1a..ebe0d284 100644
--- a/src/app/assets/scss/abstracts/_variables.scss
+++ b/src/app/assets/scss/abstracts/_variables.scss
@@ -9,16 +9,16 @@ $flow-medium: #59E78D;
 $high-runnable: lighten($flow-medium, 15%);
 $med-runnable: $flow-medium;
 $low-runnable: darken($flow-medium, 15%);
-$stale: #ffcc00;
+$flow-warning: #ffcc00;
 
 // maps flow classes to their color
 $flow-map: (
   "above-recommended": $flow-high,
   "high-runnable": $high-runnable,
-  "runnable": $med-runnable,
+  "medium-runnable": $med-runnable,
   "low-runnable": $low-runnable,
   "below-recommended": $flow-low,
-  "stale": $stale
+  "stale": #dfe3e6 // use ui-03 for unknown/stale
 );
 
 // high contrast/accessibility flow colors
diff --git a/src/app/views/river-index/components/nwi-rivers-table.vue b/src/app/views/river-index/components/nwi-rivers-table.vue
index de5088a7..38e2b07e 100644
--- a/src/app/views/river-index/components/nwi-rivers-table.vue
+++ b/src/app/views/river-index/components/nwi-rivers-table.vue
@@ -3,7 +3,7 @@
     <template v-if="searchLoading">
       <utility-block state="loading" />
     </template>
-    <template v-else-if="reachesInTable && reachesInTable.length > 0">
+    <template v-else-if="reaches && reaches.length > 0">
       <div class="bx--data-table-container river-index">
         <table class="bx--data-table river-table">
           <thead>
@@ -17,24 +17,19 @@
             </tr>
           </thead>
           <tbody>
-            <template v-if="reachesInTable && reachesInTable.length > 0">
+            <template v-if="reaches && reaches.length > 0">
               <tr
-                v-for="reach in reachesInTable"
+                v-for="reach in reaches"
                 :key="reach.id"
                 :ref="`reach-${reach.id}`"
                 :class="[
                   mouseoveredFeature && reach.id === mouseoveredFeature.properties.id ? 'active' : '',
-                  classForGaugeCorrelation(reach.correlation)
+                  classForGaugeCorrelation(reachFlows[reach.id].correlation)
                 ]"
                 @mouseover="debouncedMouseover(reach.feature)"
                 @mouseleave="debouncedMouseover()"
               >
-                <td
-                  :class="[
-                    `${classForGaugeCorrelation(reach.correlation)}`,
-                    'river-name-section',
-                  ]"
-                >
+                <td class="river-name-section">
                   <router-link :to="`/river-detail/${reach.id}/main`">
                     <strong>{{ displayReachTitle(reach) }}</strong>
                     <br >
@@ -43,17 +38,17 @@
                   </router-link>
                 </td>
                 <td class="level">
-                  <template v-if="reach.loading">
+                  <template v-if="reachFlows[reach.id].loading">
                     <cv-inline-loading
                       small
                       state="loading"
                       loading-text=""
                     />
                   </template>
-                  <template v-else-if="reach.correlation && reach.correlation.status">
-                    {{ reach.correlation.status.latestReading.value }} {{ correlationMetrics[reach.correlation.status.metric].unit }}
+                  <template v-else-if="reachFlows[reach.id].correlation && reachFlows[reach.id].correlation.status">
+                    {{ reachFlows[reach.id].correlation.status.latestReading.value }} {{ correlationMetrics[reachFlows[reach.id].correlation.status.metric].unit }}
                     <cv-tooltip
-                      v-if="reach.correlation.status.status === 'stale'"
+                      v-if="reachFlows[reach.id].correlation.status.status === 'stale'"
                       tip="reading is out of date"
                       direction="left"
                     >
@@ -121,7 +116,7 @@ export default {
   data: () => ({
     windowWidth: 0,
     mq: Breakpoints,
-    reachesInTable: []
+    reachFlows: {}
   }),
   computed: {
     ...mapState({
@@ -217,20 +212,19 @@ export default {
     },
     // update reactive data property with map or search results whenever they change
     reaches(newReaches) {
-      this.reachesInTable = [...newReaches];
-    },
-    // retrieve flow information for table reaches
-    reachesInTable(newReaches) {
-      // TODO: use new query that retrieves correlation data with batch of IDs
       newReaches.forEach(async r => {
-        r.loading = true;
-        try {
-          r.correlation = await reachClient.primaryGaugeStub.query({ reachID: `${r.id}` });
-        } finally {
-          r.loading = false;
+        if (!this.reachFlows[r.id]) {
+          this.reachFlows[r.id] = {
+            loading: true
+          };
+          try {
+            this.reachFlows[r.id].correlation = await reachClient.primaryGaugeStub.query({ reachID: `${r.id}` });
+          } finally {
+            this.reachFlows[r.id].loading = false;
+          }
         }
       })
-    }
+    },
   },
   methods: {
     displayReachTitle(reach) {
@@ -313,36 +307,34 @@ export default {
     cursor: pointer;
   }
 
-  &.river-table {
-    tr.stale button.cv-tooltip {
-      background-color: $stale;
-      padding: 0 0.47rem;
-      border-radius: 1rem;
-    }
+  tr.stale button.cv-tooltip {
+    background-color: $flow-warning;
+    padding: 0 0.47rem;
+    border-radius: 1rem;
+  }
 
-    tr {
-      @include ease;
-      // lines up header background with borders from the rows
-      border-left: 0.5rem solid $ui-03;
+  tr {
+    @include ease;
+    // lines up header background with borders from the rows
+    border-left: 0.5rem solid $ui-03;
 
-      .level {
-        white-space: nowrap;
-      }
+    .level {
+      white-space: nowrap;
+    }
 
-      td {
-        padding: 0.5rem 0;
-        &:first-child {
-          @each $class, $color in $flow-map {
-            &.#{$class} {
-              border-left: 0.5rem solid $color;
-            }
-          }
+    @each $class, $color in $flow-map {
+      &.#{$class} {
+        td:first-child {
+          border-left: 0.5rem solid $color;
         }
       }
+    }
+    td {
+      padding: 0.5rem 0;
+    }
 
-      &.active, &.active td {
-        background: #e5e5e5;
-      }
+    &.active, &.active td {
+      background: #e5e5e5;
     }
   }
 }
diff --git a/src/app/views/river-index/rivers-by-state.vue b/src/app/views/river-index/rivers-by-state.vue
index 286c487f..e0200220 100644
--- a/src/app/views/river-index/rivers-by-state.vue
+++ b/src/app/views/river-index/rivers-by-state.vue
@@ -126,11 +126,7 @@ export default {
 </script>
 <style lang="scss">
 .bx--tag--stale {
-  background-color: #dfe3e6;
-
-  :hover > & {
-    background-color: $stale;
-  }
+  background-color: $flow-warning;
 }
 
 #rivers-by-state {