refactor hydrocron queries

CUAHSI · Feb 26, 2024 · 16f918e · 16f918e
1 parent 629adfe
commit 16f918e
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 69 deletions.
diff --git a/frontend/src/_helpers/fakeData.js b/frontend/src/_helpers/fakeData.js
@@ -3,27 +3,38 @@ const getSingleFakeDataset = () => {
 }
 
 const dynamicColors = function () {
-  var r = Math.floor(Math.random() * 255);
-  var g = Math.floor(Math.random() * 255);
-  var b = Math.floor(Math.random() * 255);
-  return "rgb(" + r + "," + g + "," + b + ")";
-};
+  var r = Math.floor(Math.random() * 255)
+  var g = Math.floor(Math.random() * 255)
+  var b = Math.floor(Math.random() * 255)
+  return 'rgb(' + r + ',' + g + ',' + b + ')'
+}
 
 const getFakeDatasets = (selectedFeatures) => {
   return selectedFeatures.map((feature) => {
     return {
       label: `${feature.sword.river_name} | ${feature.sword.reach_id}`,
       data: getSingleFakeDataset(),
-      borderColor: dynamicColors(),
+      borderColor: dynamicColors()
     }
   })
 }
 
 function buildFakeData(selectedFeatures) {
-  return{
+  return {
     labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
     datasets: getFakeDatasets(selectedFeatures)
   }
 }
 
-export { buildFakeData }
+const knownQueriesWithData = [
+  {
+    feature: 'Reach',
+    feature_id: '72390300011',
+    start_time: '2023-06-01T00:00:00Z',
+    end_time: '2023-10-30T00:00:00Z',
+    output: 'geojson',
+    fields: 'feature_id,time_str,wse'
+  }
+]
+
+export { buildFakeData, knownQueriesWithData }
diff --git a/frontend/src/_helpers/hydroCron.js b/frontend/src/_helpers/hydroCron.js
@@ -0,0 +1,93 @@
+import { APP_API_URL } from '@/constants'
+import { useFeaturesStore } from '@/stores/features'
+import { useAlertStore } from '@/stores/alerts'
+import { buildFakeData, knownQueriesWithData } from '@/_helpers/fakeData'
+
+const queryHydroCron = async (swordFeature = null) => {
+  const featuresStore = useFeaturesStore()
+  const url = `${APP_API_URL}/hydrocron/v1/timeseries`
+  // const url = 'https://soto.podaac.uat.earthdatacloud.nasa.gov/hydrocron/v1/timeseries'
+
+  // TODO: need to get the reach_id from the feature properties
+  // for now, just hardcoding it with a reach that has known data in the beta prevalidated data
+  // '?feature=Reach&feature_id=72390300011&start_time=2023-06-01T00:00:00Z&end_time=2023-10-30T00:00:00Z&output=geojson&fields=reach_id,time_str,wse,geometry'
+  // 'http://localhost:9000/2015-03-31/functions/function/invocations'
+  if (swordFeature == null && !featuresStore.shouldFakeData) {
+    console.error('No hydroCron query params, and shouldFakeData is false')
+    return
+  }
+  console.log('swordFeature', swordFeature)
+  let params = {}
+  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
+    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'
+    }
+  } else {
+    // Build fake data
+    // get a random known query from the knownQueriesWithData array
+    params = knownQueriesWithData[Math.floor(Math.random() * knownQueriesWithData.length)]
+    console.log('fake params', params)
+  }
+  let json = await fetchHydroCronData(url, params, swordFeature)
+  if (featuresStore.shouldFakeData) {
+    let fakeData = buildFakeData([...featuresStore.selectedFeatures, json])
+    // update the visData before selecting the feature otherwise it will show blank
+    featuresStore.visData = fakeData
+    console.log('fakeData', fakeData)
+  }
+  featuresStore.selectFeature(json)
+}
+
+const fetchHydroCronData = async (url, params, swordFeature) => {
+  const alertStore = useAlertStore()
+  const searchParams = new URLSearchParams(params)
+  let query = url + '?' + searchParams.toString()
+  try {
+    let result = await fetch(query, {
+      method: 'GET',
+      mode: 'cors',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    let json = await result.json()
+    json.params = params
+    json.sword = swordFeature.properties
+    console.log('query', query)
+    console.log(result)
+    console.log('json', json)
+    let features = json.results.geojson.features
+    console.log('features', features)
+    if (features.length > 0) {
+      return json
+    }else{
+      alertStore.displayAlert({
+        title: 'No data found',
+        text: `No data found for: ${JSON.stringify(params)}`,
+        type: 'warning',
+        closable: true,
+        duration: 10
+      })
+      return null
+    }
+  } catch (e) {
+    console.error('Error fetching data', e)
+    alertStore.displayAlert({
+      title: 'Error fetching SWOT data',
+      text: `Error while fetching SWOT data from ${url}: ${e}`,
+      type: 'error',
+      closable: true,
+      duration: 3
+    })
+  }
+}
+
+export { queryHydroCron }
diff --git a/frontend/src/components/ChartVis.vue b/frontend/src/components/ChartVis.vue
@@ -1,6 +1,6 @@
 <template>
   <v-theme-provider theme="light" with-background>
-    <Line :data="data" :options="options" />
+    <Line :data="featureStore.visData" :options="options" />
   </v-theme-provider>
 </template>
 
@@ -16,21 +16,9 @@ import {
   Legend
 } from 'chart.js'
 import { Line } from 'vue-chartjs'
-import { ref } from 'vue'
 import { useFeaturesStore } from '@/stores/features'
-import { buildFakeData } from '@/_helpers/fakeData'
 
 const featureStore = useFeaturesStore()
-let shouldFakeData = featureStore.shouldFakeData
-
-let data = ref({})
-
-if (shouldFakeData) {
-  data.value = buildFakeData(featureStore.selectedFeatures)
-}else{
-  // TODO what if not faking data?
-  data.value = {}
-}
 
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)

diff --git a/frontend/src/components/TheLeafletMap.vue b/frontend/src/components/TheLeafletMap.vue
@@ -9,16 +9,14 @@ import L from 'leaflet'
 import * as esriLeaflet from "esri-leaflet";
 // import * as esriLeafletVector from 'esri-leaflet-vector';
 import "leaflet-easybutton/src/easy-button";
-import { onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 import { useMapStore } from '@/stores/map'
-import { useFeaturesStore } from '@/stores/features'
 import { useAlertStore } from '@/stores/alerts'
-import { APP_API_URL } from '@/constants'
 
 const mapStore = useMapStore()
-const featuresStore = useFeaturesStore();
 const alertStore = useAlertStore();
 
+import { queryHydroCron } from "../_helpers/hydroCron";
 
 
 // manually remove the listener
@@ -136,48 +134,7 @@ onMounted(() => {
             weight: 3,
             opacity: 1
         });
-        const url = `${APP_API_URL}/hydrocron/v1/timeseries`
-        // const url = 'https://soto.podaac.uat.earthdatacloud.nasa.gov/hydrocron/v1/timeseries'
-
-        // TODO: need to get the reach_id from the feature properties
-        // for now, just hardcoding it with a reach that has known data in the beta prevalidated data
-        // '?feature=Reach&feature_id=72390300011&start_time=2023-06-01T00:00:00Z&end_time=2023-10-30T00:00:00Z&output=geojson&fields=reach_id,time_str,wse,geometry'
-        // 'http://localhost:9000/2015-03-31/functions/function/invocations'
-        const params = {
-            "feature": "Reach",
-            "feature_id": "72390300011",
-            "start_time": "2023-06-01T00:00:00Z",
-            "end_time": "2023-10-30T00:00:00Z",
-            "output": "geojson",
-            "fields": "feature_id,time_str,wse"
-        }
-        const searchParams = new URLSearchParams(params)
-        let query = url + '?' + searchParams.toString()
-        try {
-            let result = await fetch(query, {
-                method: 'GET',
-                mode: 'cors',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-            })
-            let json = await result.json()
-            json.params = params
-            json.sword = e.layer.feature.properties
-            console.log(result)
-            console.log("json", json)
-            console.log("features", json.results.geojson.features)
-            featuresStore.selectFeature(json)
-        } catch (e) {
-            console.error("Error fetching data", e)
-            alertStore.displayAlert({
-                title: 'Error fetching SWOT data',
-                text: `Error while fetching SWOT data from ${url}: ${e}`,
-                type: 'error',
-                closable: true,
-                duration: 3
-            })
-        }
+        queryHydroCron(e.layer.feature)
     });
 
     // add nodes layer to map

diff --git a/frontend/src/stores/features.js b/frontend/src/stores/features.js
@@ -4,11 +4,16 @@ import { ref } from 'vue'
 export const useFeaturesStore = defineStore('features', () => {
   const selectedFeatures = ref([])
   const shouldFakeData = ref(true)
+  const visData = ref({})
 
   function selectFeature(feature) {
-    console.log('Feature selected: ' + feature)
+    console.log('Feature selected: ', feature)
     this.selectedFeatures.push(feature)
   }
 
-  return { selectedFeatures, selectFeature, shouldFakeData }
+  const updateVisData = (data) => {
+    visData.value = data
+  }
+
+  return { selectedFeatures, selectFeature, shouldFakeData, updateVisData, visData }
 })