From b9f4d911e80780cfe4dbe191a99c74dc1b18444c Mon Sep 17 00:00:00 2001
From: Nick Gottlieb <ngottlieb@gmail.com>
Date: Wed, 12 Jun 2024 11:31:59 -0700
Subject: [PATCH] adjust beta box to use rc instead of rmax and rlow, fixing
 high runnable / low runnable label

---
 .../beta-box/__tests__/beta-box.spec.js       |  9 ++-
 .../main-tab/components/beta-box/beta-box.vue | 62 +++++++++++++------
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/app/views/river-detail/components/main-tab/components/beta-box/__tests__/beta-box.spec.js b/src/app/views/river-detail/components/main-tab/components/beta-box/__tests__/beta-box.spec.js
index 6d7a0866b..77fce27d1 100644
--- a/src/app/views/river-detail/components/main-tab/components/beta-box/__tests__/beta-box.spec.js
+++ b/src/app/views/river-detail/components/main-tab/components/beta-box/__tests__/beta-box.spec.js
@@ -94,6 +94,7 @@ describe("FlowTab", () => {
         {
           rmin: 50,
           rmax: 100,
+          rc: -0.25,
           gauge_reading: 25,
           last_gauge_reading: 25,
           gauge_metric: "2",
@@ -110,13 +111,14 @@ describe("FlowTab", () => {
       "Below Recommended"
     );
   });
-  it("shows runnable tag when flow rate too low", () => {
+  it("shows medium runnable tag when flow rate good", () => {
     river.loading = false;
     mockStore.state.RiverGages.data = {
       gauges: [
         {
           rmin: 50,
           rmax: 100,
+          rc: 0.5,
           gauge_reading: 75,
           last_gauge_reading: 75,
           gauge_metric: "2",
@@ -129,15 +131,16 @@ describe("FlowTab", () => {
     const wrapper = createWrapper(BetaBox, options);
 
     expect(wrapper.findAll(".cv-tag").length).toBe(1);
-    expect(wrapper.find(".cv-tag .bx--tag__label").text()).toBe("Runnable");
+    expect(wrapper.find(".cv-tag .bx--tag__label").text()).toBe("Medium Runnable");
   });
-  it("shows above recommended tag when flow rate too low", () => {
+  it("shows above recommended tag when flow rate too high", () => {
     river.loading = false;
     mockStore.state.RiverGages.data = {
       gauges: [
         {
           rmin: 50,
           rmax: 100,
+          rc: 1.25,
           gauge_reading: 150,
           last_gauge_reading: 150,
           gauge_metric: "2",
diff --git a/src/app/views/river-detail/components/main-tab/components/beta-box/beta-box.vue b/src/app/views/river-detail/components/main-tab/components/beta-box/beta-box.vue
index c8804e074..0cecd6704 100644
--- a/src/app/views/river-detail/components/main-tab/components/beta-box/beta-box.vue
+++ b/src/app/views/river-detail/components/main-tab/components/beta-box/beta-box.vue
@@ -117,13 +117,11 @@
                   :label="reachGage.adjusted_reach_class"
               />
               <cv-tag
-                  v-if="formatTag(reachGage)"
-                  :kind="formatTag(reachGage).kind"
-                  :label="formatTag(reachGage).label"
+                  v-if="reachGage && reachGage.rc"
+                  kind="gray"
+                  :class="formatFlowTag(reachGage).class"
+                  :label="formatFlowTag(reachGage).label"
               />
-              <template v-if="reachGage.gauge_perfect">
-                👍
-              </template>
             </td>
             <td
                 v-else
@@ -287,26 +285,36 @@ export default {
     formatReading (reading, metricID) {
       return formatReadingWithFormat(reading, this.getMetric(metricID)?.format || '')
     },
-    formatTag (gage) {
-      if (gage && gage.rmin && gage.rmax && gage.gauge_reading) {
-        if (gage.gauge_reading < gage.rmin) {
+    formatFlowTag (gauge) {
+      if (gauge && gauge.rc) {
+        if (gauge.rc < 0) {
           return ({
-            kind: 'red',
+            class: 'below-recommended',
             label: 'Below Recommended'
-          })
-        } else if (gage.gauge_reading > gage.rmax) {
+          });
+        } else if (gauge.rc < 0.33) {
           return ({
-            kind: 'blue',
-            label: 'Above Recommended'
-          })
+            class: 'low-runnable',
+            label: 'Low Runnable'
+          });
+        } else if (gauge.rc < 0.66) {
+          return ({
+            class: 'med-runnable',
+            label: 'Medium Runnable'
+          });
+        } else if (gauge.rc < 1) {
+          return ({
+            class: 'high-runnable',
+            label: 'High Runnable'
+          });
         } else {
           return ({
-            kind: 'green',
-            label: 'Runnable'
+            class: 'above-recommended',
+            label: 'Above Recommended'
           })
         }
       }
-      return null
+      return {};
     }
   }
 }
@@ -330,5 +338,23 @@ export default {
       background-color: $ui-02;
     }
   }
+
+  .bx--tag {
+    &.below-recommended {
+      background-color: $flow-low;
+    }
+    &.low-runnable {
+      background-color: $low-runnable;
+    }
+    &.med-runnable {
+      background-color: $med-runnable;
+    }
+    &.high-runnable {
+      background-color: $high-runnable;
+    }
+    &.above-recommended {
+      background-color: $flow-high;
+    }
+  }
 }
 </style>
\ No newline at end of file