Refactor DataViewDrawer.vue to remove dynamic data and add plot button

CUAHSI · Apr 25, 2024 · 792293a · 792293a
1 parent 065ec35
commit 792293a
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 63 deletions.
diff --git a/frontend/src/components/DataViewDrawer.vue b/frontend/src/components/DataViewDrawer.vue
@@ -5,39 +5,27 @@
       :icon="show ? mdiChevronRight : mdiChevronLeft">
     </v-btn>
     <v-container v-if="featureStore.activeFeature">
-      <v-tabs v-model="tab" align-tabs="center">
-        <v-tab :value="1">
-          Static SWORD Metadata
-        </v-tab>
-        <v-tab :value="2">
-          Query dynamic variables
-        </v-tab>
-      </v-tabs>
-
-      <v-window v-model="tab">
-        <v-window-item :value="1">
-          <StaticMetadata />
-        </v-window-item>
-
-        <v-window-item :value="2">
-          <DynamicData />
-        </v-window-item>
-      </v-window>
+      <StaticMetadata />
+      <!-- <DynamicData /> -->
+      <v-btn v-if="!hasResults()" @click="query" color="primary" :loading="querying">
+        <v-icon :icon="mdiChartScatterPlot"></v-icon>Plot
+      </v-btn>
     </v-container>
   </v-navigation-drawer>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { useFeaturesStore } from '@/stores/features'
-import { mdiChevronRight, mdiChevronLeft } from '@mdi/js'
-import DynamicData from '@/components/DynamicData.vue'
+import { mdiChevronRight, mdiChevronLeft, mdiChartScatterPlot } from '@mdi/js'
+// import DynamicData from '@/components/DynamicData.vue'
+import { queryHydroCron } from "../_helpers/hydroCron";
 import StaticMetadata from './StaticMetadata.vue'
+import { useRouter } from 'vue-router'
 
 const featureStore = useFeaturesStore()
 
 let show = ref(false)
-let tab = ref(1)
 
 
 const translate = () => {
@@ -48,6 +36,20 @@ const translate = () => {
   }
 }
 
+let querying = ref(false)
+const router = useRouter()
+
+const query = async () => {
+  querying.value = true
+  await queryHydroCron(featureStore.activeFeature)
+  querying.value = false
+  router.push('/plots')
+}
+
+const hasResults = () => {
+  return featureStore?.activeFeature?.results !== undefined
+}
+
 featureStore.$subscribe((mutation, state) => {
   if (state.activeFeature !== null) {
     // && typeof mutation.events.newValue === 'object'

diff --git a/frontend/src/components/StaticMetadata.vue b/frontend/src/components/StaticMetadata.vue
@@ -8,26 +8,41 @@
                 </v-card-subtitle> -->
       </v-card-item>
       <v-card-text>
-        <div v-for="metadataObject in defaultSwordMetadata(true)" :key="metadataObject.id">
+        <div v-for="metadataObject in defaultSwordMetadata()" :key="metadataObject.id">
           <v-divider />
           <div><strong>{{ metadataObject.short_definition }}:</strong> {{ metadataObject.value }}</div>
         </div>
+        <template v-if="extended">
+          <div v-for="extendedMetadataObject in extendedMetadata" :key="extendedMetadataObject.id">
+            <v-divider />
+            <div><strong>{{ extendedMetadataObject.short_definition }}:</strong> {{ extendedMetadataObject.value }}
+            </div>
+          </div>
+        </template>
       </v-card-text>
     </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>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { useFeaturesStore } from '@/stores/features'
 import { useHydrologicStore } from '@/stores/hydrologic'
+import { mdiSword } from '@mdi/js'
 
 const featureStore = useFeaturesStore()
 const hydrologicStore = useHydrologicStore()
 
-let show = ref(false)
-
+let extendedMetadata = ref([])
+let extended = ref(false)
 
+const extendMetadata = () => {
+  if (!featureStore.activeFeature) return
+  extendedMetadata.value = hydrologicStore.getSwordDescriptions(featureStore.activeFeature.sword, false, 'reach')
+  extended.value = true
+}
 
 const defaultSwordMetadata = () => {
   if (!featureStore.activeFeature) return {}
@@ -39,29 +54,9 @@ const getFeatureName = () => {
   if (!featureStore.activeFeature) return ''
   const river_name = featureStore.activeFeature.sword.river_name
   if (river_name === 'NODATA') {
-    return 'UNNAMED REACH'
+    return 'UNNAMED RIVER'
   }
   return river_name
 }
 
-
-featureStore.$subscribe((mutation, state) => {
-  if (state.activeFeature !== null) {
-    // && typeof mutation.events.newValue === 'object'
-    show.value = true
-  }
-})
-
-</script>
-
-
-<style scoped>
-#chart {
-  height: 40vh;
-}
-
-.v-navigation-drawer--mini-variant,
-.v-navigation-drawer {
-  overflow: visible !important;
-}
-</style>
+</script>
diff --git a/frontend/src/stores/hydrologic.js b/frontend/src/stores/hydrologic.js
@@ -124,7 +124,7 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
       definition: 'Node length measured along the GRWL centerline points',
       fileType: 'node',
       default: false,
-      short_definition: '',
+      short_definition: 'Node length measured along the GRWL centerline points',
       units: 'meters'
     },
     {
@@ -162,7 +162,8 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
         'WSE variance along the GRWL centerline points used to calculate the average WSE for each node or reach',
       fileType: 'all',
       default: false,
-      short_definition: '',
+      short_definition:
+        'WSE variance along the GRWL centerline points used to calculate the average WSE for each node or reach',
       units: 'square meters'
     },
     {
@@ -179,7 +180,8 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
         'Width variance along the GRWL centerline points used to calculate the average width for each node or reach',
       fileType: 'all',
       default: false,
-      short_definition: '',
+      short_definition:
+        'Width variance along the GRWL centerline points used to calculate the average width for each node or reach',
       units: 'square meters'
     },
     {
@@ -188,23 +190,24 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
         'Maximum flow accumulation value for a node or reach. Flow accumulation values are extracted from the MERIT Hydro dataset (Yamazaki et al., 2019)',
       fileType: 'all',
       default: false,
-      short_definition: '',
+      short_definition:
+        'Maximum flow accumulation value for a node or reach. Flow accumulation values are extracted from the MERIT Hydro dataset (Yamazaki et al., 2019)',
       units: 'square kilometers'
     },
     {
       abbreviation: 'n_chan_max',
       definition: 'Maximum number of channels for each node or reach',
       fileType: 'all',
       default: false,
-      short_definition: '',
+      short_definition: 'Maximum number of channels for each node or reach',
       units: ''
     },
     {
       abbreviation: 'n_chan_mod',
       definition: 'Mode of the number of channels for each node or reach',
       fileType: 'all',
       default: false,
-      short_definition: '',
+      short_definition: 'Mode of the number of channels for each node or reach',
       units: ''
     },
     {
@@ -213,31 +216,32 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
         'Type of obstruction for each node or reach based on the Globale Obstruction Database (GROD, Whittemore et al., 2020) and HydroFALLS data (http://wp.geog.mcgill.ca/hydrolab/hydrofalls). Obstr_type values: 0 - No Dam, 1 - Dam, 2 - Channel Dam, 3 - Lock, 4 - Low Permeable Dam, 5 - Waterfall',
       fileType: 'all',
       default: false,
-      short_definition: '',
+      short_definition:
+        'Type of obstruction for each node or reach based on the Globale Obstruction Database (GROD, Whittemore et al., 2020) and HydroFALLS data (http://wp.geog.mcgill.ca/hydrolab/hydrofalls). Obstr_type values: 0 - No Dam, 1 - Dam, 2 - Channel Dam, 3 - Lock, 4 - Low Permeable Dam, 5 - Waterfall',
       units: ''
     },
     {
       abbreviation: 'grod_id',
       definition: 'The unique GROD ID for each node or reach with obstr_type values 1-4',
       fileType: 'all',
       default: false,
-      short_definition: '',
+      short_definition: 'The unique GROD ID for each node or reach with obstr_type values 1-4',
       units: ''
     },
     {
       abbreviation: 'hfalls_id',
       definition: 'The unique HydroFALLS ID for each node or reach with obstr_type value 5',
       fileType: 'all',
       default: false,
-      short_definition: '',
+      short_definition: 'The unique HydroFALLS ID for each node or reach with obstr_type value 5',
       units: ''
     },
     {
       abbreviation: 'dist_out',
       definition: 'Distance from the river outlet for each node or reach',
       fileType: 'all',
       default: false,
-      short_definition: '',
+      short_definition: 'Distance from the river outlet for each node or reach',
       units: 'meters'
     },
     {
@@ -246,7 +250,8 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
         'Type identifier for a node or reach: 1=river, 2=lake off river, 3=lake on river, 4=dam or waterfall, 5=unreliable topology, 6=ghost reach/node',
       fileType: 'all',
       default: false,
-      short_definition: '',
+      short_definition:
+        'Type identifier for a node or reach: 1=river, 2=lake off river, 3=lake on river, 4=dam or waterfall, 5=unreliable topology, 6=ghost reach/node',
       units: ''
     },
     {
@@ -255,7 +260,8 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
         'GRWL water body identifier for each reach:  0=river, 1=lake/reservoir, 2=tidally influenced river,  3=canal',
       fileType: 'reach',
       default: false,
-      short_definition: '',
+      short_definition:
+        'GRWL water body identifier for each reach:  0=river, 1=lake/reservoir, 2=tidally influenced river,  3=canal',
       units: ''
     },
     {
@@ -280,15 +286,15 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
       definition: 'Number of upstream reaches for each reach',
       fileType: 'reach',
       default: false,
-      short_definition: '',
+      short_definition: 'Number of upstream reaches for each reach',
       units: ''
     },
     {
       abbreviation: 'n_rch_down',
       definition: 'Number of downstream reaches for each reach',
       fileType: 'reach',
       default: false,
-      short_definition: '',
+      short_definition: 'Number of downstream reaches for each reach',
       units: ''
     },
     {
@@ -313,7 +319,8 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
         'The maximum number of SWOT passes to intersect each reach during the 21 day orbit cycle',
       fileType: 'reach',
       default: false,
-      short_definition: '',
+      short_definition:
+        'The maximum number of SWOT passes to intersect each reach during the 21 day orbit cycle',
       units: ''
     },
     {
@@ -322,7 +329,8 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
         'A list of the SWOT orbit tracks that intersect each reach during the 21 day orbit cycle',
       fileType: 'reach',
       default: false,
-      short_definition: '',
+      short_definition:
+        'A list of the SWOT orbit tracks that intersect each reach during the 21 day orbit cycle',
       units: ''
     }
   ])
@@ -341,7 +349,8 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
       }
       return (
         variable.abbreviation === abbreviation &&
-        (variable.fileType === fileType || variable.fileType === 'all')
+        (variable.fileType === fileType || variable.fileType === 'all') &&
+        variable.default === defaultOnly
       )
     })
   }