diff --git a/frontend/src/_helpers/fakeData.js b/frontend/src/_helpers/fakeData.js index 77e35cc..84f8074 100644 --- 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 } \ No newline at end of file +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 new file mode 100644 index 0000000..24d2698 --- /dev/null +++ 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 index 1d3e2c2..d7390d7 100644 --- a/frontend/src/components/ChartVis.vue +++ b/frontend/src/components/ChartVis.vue @@ -1,6 +1,6 @@ @@ -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 index bf1b026..4e25f50 100644 --- 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 index 3ad8b46..2479039 100644 --- 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 } })