Merge pull request #32 from CUAHSI/develop

tooltips and zoom

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 }

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,10 +52,11 @@ 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';
+import { capitalizeFirstLetter } from '@/_helpers/charts/plugins'
 
 const { lgAndUp } = useDisplay()
 
@@ -103,19 +104,43 @@ 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',
       }
     },
+    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: {

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,10 +46,11 @@ 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';
+import { capitalizeFirstLetter } from '@/_helpers/charts/plugins'
 
 const { lgAndUp } = useDisplay()
 
@@ -93,19 +94,46 @@ 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',
       }
     },
+    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: {

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>

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>
@@ -197,8 +197,6 @@ onMounted(() => {
         layers: 0,
         transparent: 'true',
         format: 'image/png',
-        minZoom: 0,
-        maxZoom: minReachSelectionZoom - 1,
     })
 
     // add reaches layer to map

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') {
@@ -108,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
@@ -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
   }
 })

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
   }
 })