From 54a3c2951e25b8b5ff02bd0a16fc268471e018ff Mon Sep 17 00:00:00 2001
From: Nick Gottlieb <ngottlieb@gmail.com>
Date: Thu, 9 Jan 2025 14:12:38 -0800
Subject: [PATCH] move gauge correlation comment above graph and add helper
 text to form

---
 .../edit-flows/components/correlation-details.vue    |  7 ++++---
 .../river-detail/components/flow-tab/flow-tab.vue    | 12 +++++++-----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/app/views/river-detail/components/edit-flows/components/correlation-details.vue b/src/app/views/river-detail/components/edit-flows/components/correlation-details.vue
index 4af225f0..67261401 100644
--- a/src/app/views/river-detail/components/edit-flows/components/correlation-details.vue
+++ b/src/app/views/river-detail/components/edit-flows/components/correlation-details.vue
@@ -72,9 +72,9 @@
         </div>
 
         <div class="mb-spacing-sm">
-          <cv-text-input v-if="editing" v-model="comment" label="Correlation comment:" class="correlation-comment" />
+          <cv-text-input v-if="editing" v-model="comment" label="Correlation details (optional):" :helperText="commentHelperText" class="correlation-comment" />
           <template v-else-if="comment">
-            <label for="comment" class="bx--label">Correlation comment:</label>
+            <label for="comment" class="bx--label">Correlation details:</label>
             <p v-text="comment" />
           </template>
         </div>
@@ -261,7 +261,8 @@ export default {
           adjustedDifficultyField: null,
           description: "The river in this range is below the recommended flow, indicating that even a majority of paddlers seeking a technical low-water paddling trip would not enjoy the river, would have difficulty navigating the river, and would be unlikely to return at this flow. Flows in this category are below the minimum acceptable flow for most people."
         },
-      ]
+      ],
+      commentHelperText: "This comment will appear above the graph on the flow tab. Comments might include location of the gauge relative to the reach, time delays, tributary inputs, or other factors that affect the accuracy of the gage for this reach."
   }),
   computed: {
     correlationDetails() {
diff --git a/src/app/views/river-detail/components/flow-tab/flow-tab.vue b/src/app/views/river-detail/components/flow-tab/flow-tab.vue
index a21799a2..1bc2886f 100644
--- a/src/app/views/river-detail/components/flow-tab/flow-tab.vue
+++ b/src/app/views/river-detail/components/flow-tab/flow-tab.vue
@@ -48,6 +48,11 @@
                 <div v-if="adjustedReachDifficulty(gauge)" class="gauge-class">
                   <cv-tag kind="cool-gray" :label="adjustedReachDifficulty(gauge)" />
                 </div>
+                <div v-if="gauge.comment" class="gauge-comment bx--tile bx--type-caption">
+                  <label class="bx--label">Correlation details: </label>
+                  <br>
+                  <span v-text="gauge.comment" />
+                </div>
                 <div v-if="activeGaugeIndex === index" class="gauge-chart-container background">
                   <layout
                       name="layout-two-thirds"
@@ -97,11 +102,6 @@
                         <cv-skeleton-text headline/>
                       </template>
                       <template v-else>
-                        <div v-if="gauge.comment" class="gauge-comment bx--tile bx--type-caption">
-                          <label class="bx--label">Correlation comment</label>
-                          <br>
-                          <span v-text="gauge.comment" />
-                        </div>
                         <div v-if="gauge.gaugeInfo.externalSourceLinks" class="gauge-links">
                           <h6 class="mb-spacing-sm">View at source:</h6>
                           <cv-link v-if="gauge.gaugeInfo.externalSourceLinks.sourceLink" 
@@ -177,6 +177,7 @@
 
                       </template>
                     </template>
+                    
                   </layout>
                 </div>
               </div>
@@ -380,6 +381,7 @@ export default {
   .gauge-name,
   .gauge-meta,
   .gauge-chart-container,
+  .gauge-comment,
   .range-comment {
     grid-column: 1/4;
   }