From 7774d76cb7a07416798babd76117a70fe44bb815 Mon Sep 17 00:00:00 2001
From: Devin Cowan <dcowan@cuahsi.org>
Date: Thu, 16 May 2024 12:00:54 -0400
Subject: [PATCH 1/6] Refactor to use featureStore.getFeatureName()
 consistently

---
 frontend/src/components/StaticMetadata.vue | 14 +++-----------
 frontend/src/stores/charts.js              | 13 ++++++++-----
 frontend/src/stores/features.js            | 15 ++++++++++++++-
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/StaticMetadata.vue b/frontend/src/components/StaticMetadata.vue
index 7106dd4..bf91739 100644
--- a/frontend/src/components/StaticMetadata.vue
+++ b/frontend/src/components/StaticMetadata.vue
@@ -2,7 +2,7 @@
   <v-sheet class="mx-auto" elevation="8">
     <v-card v-if="featureStore.activeFeature" height="100%">
       <v-card-item class="text-center">
-        <v-card-title>{{ getFeatureName() }}</v-card-title>
+        <v-card-title>{{ featureStore.getFeatureName() }}</v-card-title>
         <!-- <v-card-subtitle>
                   {{ featureStore.activeFeature.properties.reach_id }}
                 </v-card-subtitle> -->
@@ -23,7 +23,8 @@
     </v-card>
   </v-sheet>
   <v-btn v-if="!extended" @click="extendMetadata" color="primary"><v-icon :icon="mdiSword"></v-icon>Metadata</v-btn>
-  <v-btn v-else @click="extended = false" color="primary"><v-icon :icon="mdiSword"></v-icon>Hide Extended Metadata</v-btn>
+  <v-btn v-else @click="extended = false" color="primary"><v-icon :icon="mdiSword"></v-icon>Hide Extended
+    Metadata</v-btn>
 </template>
 
 <script setup>
@@ -55,13 +56,4 @@ const defaultSwordMetadata = () => {
   return hydrologicStore.getSwordDescriptions(featureStore.activeFeature.properties, true, 'reach')
 }
 
-const getFeatureName = () => {
-  if (!featureStore.activeFeature) return ''
-  const river_name = featureStore.activeFeature.properties.river_name
-  if (river_name === 'NODATA') {
-    return 'UNNAMED RIVER'
-  }
-  return river_name
-}
-
 </script>
\ No newline at end of file
diff --git a/frontend/src/stores/charts.js b/frontend/src/stores/charts.js
index 7525386..513bb7e 100644
--- a/frontend/src/stores/charts.js
+++ b/frontend/src/stores/charts.js
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { useFeaturesStore } from '@/stores/features'
 
 export const useChartsStore = defineStore('charts', () => {
   let chartData = ref({})
@@ -91,8 +92,8 @@ export const useChartsStore = defineStore('charts', () => {
   }
 
   const filterMeasurements = (measurements, dataQualityFlags) => {
-      // TODO: this is a hack to remove the invalid measurements
-      // need to handle this with a formal validator
+    // TODO: this is a hack to remove the invalid measurements
+    // need to handle this with a formal validator
     console.log('Starting number of measurements', measurements.length)
     measurements = measurements.filter((m) => {
       if (m.time_str == 'no_data') {
@@ -124,6 +125,7 @@ export const useChartsStore = defineStore('charts', () => {
   }
 
   const getChartDatasets = (selectedFeatures, dataQualityFlags = null) => {
+    const featureStore = useFeaturesStore()
     // TODO: need to update just for the newly selected feature: this currently will re-map all selected features
     console.log('Getting chart datasets for selected features', selectedFeatures)
     return selectedFeatures.map((feature) => {
@@ -136,7 +138,7 @@ export const useChartsStore = defineStore('charts', () => {
       console.log('SWOT feature', feature)
       return {
         // TODO: nodes label assumes reach
-        label: `${feature?.properties?.river_name} | ${feature?.feature_id}`,
+        label: `${featureStore.getFeatureName(feature)} | ${feature?.feature_id}`,
         data: measurements,
         parsing: {
           xAxisKey: 'datetime',
@@ -149,6 +151,7 @@ export const useChartsStore = defineStore('charts', () => {
   }
 
   const getNodeChartDatasets = (nodes) => {
+    const featureStore = useFeaturesStore()
     console.log('getting node chart datasets for nodes', nodes)
     // TODO:nodes I was expecting that the node_dist would be constant across timestamps but it isn't
     // https://www.chartjs.org/docs/latest/general/data-structures.html#parsing
@@ -163,7 +166,7 @@ export const useChartsStore = defineStore('charts', () => {
     console.log('Node measurements parsed', measurements)
     console.log('using reach from ', nodes[0])
     const dataSet = {
-      label: `${nodes[0]?.properties?.river_name} | ${nodes[0]?.properties?.reach_id}`,
+      label: `${featureStore.getFeatureName(nodes[0])} | ${nodes[0]?.properties?.reach_id}`,
       data: measurements,
       parsing: {
         xAxisKey: 'node_dist',
@@ -258,6 +261,6 @@ export const useChartsStore = defineStore('charts', () => {
     showChart,
     hasNodeData,
     dynamicColors,
-    filterDataQuality,
+    filterDataQuality
   }
 })
diff --git a/frontend/src/stores/features.js b/frontend/src/stores/features.js
index 1237881..a4db56f 100644
--- a/frontend/src/stores/features.js
+++ b/frontend/src/stores/features.js
@@ -42,7 +42,7 @@ export const useFeaturesStore = defineStore('features', () => {
 
   const clearSelectedFeatures = () => {
     for (const feature of selectedFeatures.value) {
-      console.log("Deselecting feature", feature)
+      console.log('Deselecting feature', feature)
       mapStore.deselectFeature(feature)
     }
     selectedFeatures.value = []
@@ -55,6 +55,18 @@ export const useFeaturesStore = defineStore('features', () => {
     return selectedFeatures.value.some((f) => f.id === feature.id)
   }
 
+  const getFeatureName = (feature = null) => {
+    if (feature == null) {
+      feature = activeFeature.value
+    }
+    if (!feature) return ''
+    const river_name = feature.properties.river_name
+    if (river_name === 'NODATA') {
+      return 'UNNAMED RIVER'
+    }
+    return river_name
+  }
+
   return {
     selectedFeatures,
     selectFeature,
@@ -64,5 +76,6 @@ export const useFeaturesStore = defineStore('features', () => {
     checkFeatureSelected,
     mergeFeature,
     nodes,
+    getFeatureName
   }
 })

From b9a8f4b542ad7c86d951fc24dc8b45a79a9b0c64 Mon Sep 17 00:00:00 2001
From: Devin Cowan <dcowan@cuahsi.org>
Date: Thu, 16 May 2024 12:54:09 -0400
Subject: [PATCH 2/6] Update zoom indicator logic to only show when the map is
 visible and zoom level is below the minimum reach selection zoom level

---
 frontend/src/components/TheLeafletMap.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/TheLeafletMap.vue b/frontend/src/components/TheLeafletMap.vue
index e5dbb3a..35d2cf9 100644
--- a/frontend/src/components/TheLeafletMap.vue
+++ b/frontend/src/components/TheLeafletMap.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-show="$route.meta.showMap" id="mapContainer"></div>
-    <v-card v-if="zoom < minReachSelectionZoom" id="zoomIndicator" color="info">
+    <v-card v-if="$route.meta.showMap && zoom < minReachSelectionZoom" id="zoomIndicator" color="info">
         <v-card-text>
             <v-icon :icon="mdiMagnifyPlus"></v-icon> Zoom in to select reaches
         </v-card-text>

From 82c9da1a14147762c6d17969a57aa8dbd0b2180c Mon Sep 17 00:00:00 2001
From: Devin Cowan <dcowan@cuahsi.org>
Date: Thu, 16 May 2024 13:10:41 -0400
Subject: [PATCH 3/6] Correct typo in width property check

---
 frontend/src/stores/charts.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/stores/charts.js b/frontend/src/stores/charts.js
index 513bb7e..a391fb1 100644
--- a/frontend/src/stores/charts.js
+++ b/frontend/src/stores/charts.js
@@ -109,7 +109,7 @@ export const useChartsStore = defineStore('charts', () => {
       if (m.slope == '-999999999999.0') {
         return false
       }
-      if (m.with == '-999999999999.0') {
+      if (m.width == '-999999999999.0') {
         return false
       }
       // check data quality flags

From acc1b01475f7dab1b97faf1d4b1fcc827927fcfd Mon Sep 17 00:00:00 2001
From: Devin Cowan <dcowan@cuahsi.org>
Date: Thu, 16 May 2024 13:13:26 -0400
Subject: [PATCH 4/6] esri hydro layer zooms

---
 frontend/src/components/TheLeafletMap.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/components/TheLeafletMap.vue b/frontend/src/components/TheLeafletMap.vue
index 35d2cf9..7a9742b 100644
--- a/frontend/src/components/TheLeafletMap.vue
+++ b/frontend/src/components/TheLeafletMap.vue
@@ -197,8 +197,6 @@ onMounted(() => {
         layers: 0,
         transparent: 'true',
         format: 'image/png',
-        minZoom: 0,
-        maxZoom: minReachSelectionZoom - 1,
     })
 
     // add reaches layer to map

From 499ad88a37f7dadae1d9a5bbd0daebb73399f467 Mon Sep 17 00:00:00 2001
From: Devin Cowan <dcowan@cuahsi.org>
Date: Thu, 16 May 2024 14:05:47 -0400
Subject: [PATCH 5/6] update zooming

---
 frontend/src/components/LineChart.vue | 12 ++++++++----
 frontend/src/components/NodeChart.vue | 12 ++++++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue
index beac4e0..a19907d 100644
--- a/frontend/src/components/LineChart.vue
+++ b/frontend/src/components/LineChart.vue
@@ -26,7 +26,7 @@
             Download JSON
           </v-btn>
           <v-btn @click="resetZoom()" color="input" class="ma-1">
-            <v-icon :icon="mdiLoupe"></v-icon>
+            <v-icon :icon="mdiMagnifyMinusOutline"></v-icon>
             Reset Zoom
           </v-btn>
         </v-sheet>
@@ -52,7 +52,7 @@ import { enUS } from 'date-fns/locale';
 import { useChartsStore } from '@/stores/charts'
 import { ref } from 'vue'
 import { customCanvasBackgroundColor } from '@/_helpers/charts/plugins'
-import { mdiPalette, mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiLoupe } from '@mdi/js'
+import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiMagnifyMinusOutline } from '@mdi/js'
 import { downloadCsv, downloadFeatureJson } from '../_helpers/hydroCron';
 import { useDisplay } from 'vuetify'
 import zoomPlugin from 'chartjs-plugin-zoom';
@@ -103,15 +103,19 @@ const options = {
       color: 'white',
     },
     zoom: {
+      pan: {
+        enabled: true,
+        mode: 'xy',
+      },
       zoom: {
         wheel: {
-          enabled: false,
+          enabled: true,
         },
         pinch: {
           enabled: false
         },
         drag: {
-          enabled: true
+          enabled: false
         },
         mode: 'xy',
       }
diff --git a/frontend/src/components/NodeChart.vue b/frontend/src/components/NodeChart.vue
index afeb2ea..14f8061 100644
--- a/frontend/src/components/NodeChart.vue
+++ b/frontend/src/components/NodeChart.vue
@@ -22,7 +22,7 @@
             Download JSON
           </v-btn>
           <v-btn @click="resetZoom()" color="input" class="ma-1">
-            <v-icon :icon="mdiLoupe"></v-icon>
+            <v-icon :icon="mdiMagnifyMinusOutline"></v-icon>
             Reset Zoom
           </v-btn>
         </v-sheet>
@@ -46,7 +46,7 @@ import { Line } from 'vue-chartjs'
 import 'chartjs-adapter-date-fns';
 import { ref } from 'vue'
 import { customCanvasBackgroundColor } from '@/_helpers/charts/plugins'
-import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiLoupe } from '@mdi/js'
+import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiMagnifyMinusOutline } from '@mdi/js'
 import { downloadMultiNodesCsv, downloadMultiNodesJson } from '../_helpers/hydroCron';
 import { useDisplay } from 'vuetify'
 import zoomPlugin from 'chartjs-plugin-zoom';
@@ -93,15 +93,19 @@ const options = {
       color: 'white',
     },
     zoom: {
+      pan: {
+        enabled: true,
+        mode: 'xy',
+      },
       zoom: {
         wheel: {
-          enabled: false,
+          enabled: true,
         },
         pinch: {
           enabled: false
         },
         drag: {
-          enabled: true
+          enabled: false
         },
         mode: 'xy',
       }

From ef13411a8df2a58683dafa7d23c5b6ea0793746b Mon Sep 17 00:00:00 2001
From: Devin Cowan <dcowan@cuahsi.org>
Date: Thu, 16 May 2024 14:41:08 -0400
Subject: [PATCH 6/6] improve tooltips

---
 frontend/src/_helpers/charts/plugins.js |  6 +++++-
 frontend/src/components/LineChart.vue   | 21 +++++++++++++++++++++
 frontend/src/components/NodeChart.vue   | 24 ++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/frontend/src/_helpers/charts/plugins.js b/frontend/src/_helpers/charts/plugins.js
index a37b33b..c602fcb 100644
--- a/frontend/src/_helpers/charts/plugins.js
+++ b/frontend/src/_helpers/charts/plugins.js
@@ -10,4 +10,8 @@ const customCanvasBackgroundColor = {
   }
 }
 
-export { customCanvasBackgroundColor }
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+export { customCanvasBackgroundColor, capitalizeFirstLetter }
diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue
index a19907d..80714bd 100644
--- a/frontend/src/components/LineChart.vue
+++ b/frontend/src/components/LineChart.vue
@@ -56,6 +56,7 @@ import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiMagnifyMinusOutline }
 import { downloadCsv, downloadFeatureJson } from '../_helpers/hydroCron';
 import { useDisplay } from 'vuetify'
 import zoomPlugin from 'chartjs-plugin-zoom';
+import { capitalizeFirstLetter } from '@/_helpers/charts/plugins'
 
 const { lgAndUp } = useDisplay()
 
@@ -120,6 +121,26 @@ const options = {
         mode: 'xy',
       }
     },
+    tooltip: {
+      // https://www.chartjs.org/docs/latest/configuration/tooltip.html
+      callbacks: {
+        label: function (context) {
+          // var label = context.dataset.label || '';
+          let selectedVariable = props.chosenVariable
+          let label = `${capitalizeFirstLetter(selectedVariable.abbreviation)}`
+          if (label) {
+            label += ': ';
+          }
+          if (context.parsed.y !== null) {
+            // label += new Intl.NumberFormat('en-US', { style: 'decimal', maximumFractionDigits: 5 }).format(context.parsed.y);
+            label += context.parsed.y
+          }
+          label += ` ${selectedVariable.unit}`
+          return label;
+        }
+      },
+      displayColors: false,
+    }
   },
   scales: {
     x: {
diff --git a/frontend/src/components/NodeChart.vue b/frontend/src/components/NodeChart.vue
index 14f8061..b05ea9c 100644
--- a/frontend/src/components/NodeChart.vue
+++ b/frontend/src/components/NodeChart.vue
@@ -50,6 +50,7 @@ import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiMagnifyMinusOutline }
 import { downloadMultiNodesCsv, downloadMultiNodesJson } from '../_helpers/hydroCron';
 import { useDisplay } from 'vuetify'
 import zoomPlugin from 'chartjs-plugin-zoom';
+import { capitalizeFirstLetter } from '@/_helpers/charts/plugins'
 
 const { lgAndUp } = useDisplay()
 
@@ -110,6 +111,29 @@ const options = {
         mode: 'xy',
       }
     },
+    tooltip: {
+      // https://www.chartjs.org/docs/latest/configuration/tooltip.html
+      callbacks: {
+        label: function (context) {
+          // var label = context.dataset.label || '';
+          let selectedVariable = props.chosenVariable
+          let label = `${capitalizeFirstLetter(selectedVariable.abbreviation)}`
+          if (label) {
+            label += ': ';
+          }
+          if (context.parsed.y !== null) {
+            // label += new Intl.NumberFormat('en-US', { style: 'decimal', maximumFractionDigits: 5 }).format(context.parsed.y);
+            label += context.parsed.y
+          }
+          label += ` ${selectedVariable.unit}`
+          return label;
+        },
+        title: function (context) {
+          return `Distance: ${context[0].parsed.x} m`
+        },
+      },
+      displayColors: false,
+    },
   },
   scales: {
     x: {