query hydrocron with selected variables

CUAHSI · Feb 27, 2024 · f67ccc7 · f67ccc7
1 parent 0b5da84
commit f67ccc7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 17 deletions.
diff --git a/frontend/src/_helpers/hydroCron.js b/frontend/src/_helpers/hydroCron.js
@@ -1,10 +1,12 @@
 import { APP_API_URL } from '@/constants'
 import { useFeaturesStore } from '@/stores/features'
 import { useAlertStore } from '@/stores/alerts'
+import { useHydrologicStore } from '@/stores/hydrologic'
 import { buildFakeData, knownQueriesWithData } from '@/_helpers/fakeData'
 
 const queryHydroCron = async (swordFeature = null) => {
   const featuresStore = useFeaturesStore()
+  const hydrologicStore = useHydrologicStore()
   const url = `${APP_API_URL}/hydrocron/v1/timeseries`
   // const url = 'https://soto.podaac.uat.earthdatacloud.nasa.gov/hydrocron/v1/timeseries'
 
@@ -21,14 +23,16 @@ const queryHydroCron = async (swordFeature = null) => {
   if (!featuresStore.shouldFakeData) {
     // TODO: get the feature type dynamically
     // get the start and end time from the date range
-    // get the fields from the selected fields
+
+    let fields = hydrologicStore.selectedVariables.map((variable) => variable.abbreviation).join(',')
+
     params = {
       feature: 'Reach',
       feature_id: swordFeature.properties.reach_id,
       start_time: '2023-06-01T00:00:00Z',
       end_time: '2023-10-30T00:00:00Z',
       output: 'geojson',
-      fields: 'feature_id,time_str,wse'
+      fields: `feature_id,${fields}`
     }
   } else {
     // Build fake data

diff --git a/frontend/src/components/VariableSelectDrawer.vue b/frontend/src/components/VariableSelectDrawer.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-navigation-drawer location="left" width="auto" :model-value="show" temporary>
-    <v-btn v-if="!show" size="large" color="primary" class="ma-0 pa-2 drawer-handle" @click="hydrologicStore.toggleVariableSelectDrawer">
+  <v-navigation-drawer location="left" width="auto" v-model="show" temporary>
+    <v-btn v-if="!show" size="large" color="primary" class="ma-0 pa-2 drawer-handle" @click="show=!show">
       <v-icon :icon="mdiGlobeModel"></v-icon>
       <span>Select Variables</span>
     </v-btn>
@@ -21,13 +21,9 @@ import { ref } from 'vue'
 
 const hydrologicStore = useHydrologicStore();
 const variables = hydrologicStore.hydroVariables
-let show = ref(hydrologicStore.showVariableDrawer)
+let show = ref(false)
 
 const { mdAndDown } = useDisplay()
-
-hydrologicStore.$subscribe((mutation, state) => {
-    show.value = state.showVariableDrawer
-})
 </script>
 
 <style scoped>

diff --git a/frontend/src/stores/hydrologic.js b/frontend/src/stores/hydrologic.js
@@ -34,7 +34,7 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
     },
     {
       abbreviation: 'd_x_area',
-      name: 'Change in cross-sectional area from a reference value',
+      name: 'Change in area',
       unit: 'm^3/s*m^2',
       definition:
         'Change in the channel cross-sectional area from the value reported in the PRD. This parameter is used in the computation of discharge'
@@ -49,15 +49,9 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
 
   const selectedVariables = ref([])
 
-  const showVariableDrawer = ref(false)
-
   const addVariable = (variable) => {
     this.selectedVariables.push(variable)
   }
 
-  const toggleVariableSelectDrawer = () => {  
-    showVariableDrawer.value = !showVariableDrawer.value
-  }
-
-  return { hydroVariables, addVariable, toggleVariableSelectDrawer, selectedVariables, showVariableDrawer }
+  return { hydroVariables, addVariable, selectedVariables }
 })