From 150d2c1dfe2c528199bebcbb02ff7796adb8df5d Mon Sep 17 00:00:00 2001 From: Devin Cowan Date: Fri, 19 Apr 2024 11:51:37 -0400 Subject: [PATCH] playing with some geocoding --- .github/workflows/frontend-gh-pages.yml | 2 +- env.template | 4 +- frontend/docker-entrypoint.sh | 2 +- frontend/package-lock.json | 10 + frontend/package.json | 1 + frontend/src/_helpers/fakeData.js | 41 --- frontend/src/_helpers/hydroCron.js | 141 ---------- frontend/src/components/LineChart.vue | 85 ------ frontend/src/components/TheAppBar.vue | 2 +- frontend/src/components/TheBottomSheet.vue | 5 - frontend/src/components/TheLeafletMap.vue | 302 +++------------------ frontend/src/constants.js | 2 +- frontend/src/plugins/vuetify.js | 2 +- frontend/src/router/index.js | 5 - frontend/src/views/ChartsView.vue | 69 ----- 15 files changed, 55 insertions(+), 618 deletions(-) delete mode 100644 frontend/src/_helpers/fakeData.js delete mode 100644 frontend/src/_helpers/hydroCron.js delete mode 100644 frontend/src/components/LineChart.vue delete mode 100644 frontend/src/views/ChartsView.vue diff --git a/.github/workflows/frontend-gh-pages.yml b/.github/workflows/frontend-gh-pages.yml index 5334f03..14d99db 100644 --- a/.github/workflows/frontend-gh-pages.yml +++ b/.github/workflows/frontend-gh-pages.yml @@ -46,7 +46,7 @@ jobs: echo VITE_APP_FULL_URL=${{ secrets.VITE_APP_FULL_URL }} >> .env echo VITE_OAUTH2_REDIRECT_URL=${{ secrets.VITE_OAUTH2_REDIRECT_URL }} >> .env echo VITE_APP_BASE=${{ secrets.VITE_APP_BASE }} >> .env - echo VITE_HYDROCRON_URL=${{ secrets.VITE_HYDROCRON_URL }} >> .env + echo VITE_ARCGIS_API_KEY=${{ secrets.VITE_ARCGIS_API_KEY }} >> .env cp .env ../.env - name: Install dependencies run: npm install diff --git a/env.template b/env.template index 6fc3092..303dd5e 100644 --- a/env.template +++ b/env.template @@ -4,7 +4,7 @@ MONGO_DATABASE=swotvis OAUTH2_CLIENT_ID=swotvis OAUTH2_CLIENT_SECRET="Get From Keycloak" -VITE_APP_NAME=swotvis +VITE_APP_NAME=hydroprocess-db # if using npm run dev, set VITE_APP_ORIGIN=http://localhost:5173 VITE_APP_ORIGIN=https://localhost @@ -32,4 +32,4 @@ VITE_OAUTH2_REDIRECT_URL="https://localhost/#/auth-redirect" OIDC_BASE_URL=https://auth.cuahsi.org/realms/CUAHSI/protocol/openid-connect/ -VITE_HYDROCRON_URL=https://soto.podaac.uat.earthdatacloud.nasa.gov/hydrocron \ No newline at end of file +VITE_ARCGIS_API_KEY=asdfasdf \ No newline at end of file diff --git a/frontend/docker-entrypoint.sh b/frontend/docker-entrypoint.sh index bb582dc..25a97c9 100755 --- a/frontend/docker-entrypoint.sh +++ b/frontend/docker-entrypoint.sh @@ -8,7 +8,7 @@ do sed -i 's|VITE_APP_API_URL_PLACEHOLDER|'${VITE_APP_API_URL}'|g' $file sed -i 's|VITE_APP_FULL_URL_PLACEHOLDER|'${VITE_APP_FULL_URL}'|g' $file sed -i 's|VITE_APP_BASE_PLACEHOLDER|'${VITE_APP_BASE}'|g' $file - sed -i 's|VITE_HYDROCRON_URL_PLACEHOLDER|'${VITE_HYDROCRON_URL}'|g' $file + sed -i 's|VITE_ARCGIS_API_KEY_PLACEHOLDER|'${VITE_ARCGIS_API_KEY}'|g' $file done exec "$@" diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cf5e152..fcb692e 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,6 +14,7 @@ "chartjs-adapter-date-fns": "^3.0.0", "date-fns": "^3.6.0", "esri-leaflet": "^3.0.12", + "esri-leaflet-geocoder": "^3.1.4", "esri-leaflet-vector": "^4.2.3", "leaflet": "^1.9.4", "leaflet-easybutton": "^2.4.0", @@ -2918,6 +2919,15 @@ "leaflet": "^1.0.0" } }, + "node_modules/esri-leaflet-geocoder": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/esri-leaflet-geocoder/-/esri-leaflet-geocoder-3.1.4.tgz", + "integrity": "sha512-VMqWgbB7/3X8GuIaUemn/NGlLr3BB51ZpBWBfj/Q71HDXBKIPnGExUuXU9wqblYlj1j3w8uhwVKSGEHPpX+QiA==", + "dependencies": { + "esri-leaflet": "^3.0.2", + "leaflet": "^1.0.0" + } + }, "node_modules/esri-leaflet-vector": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/esri-leaflet-vector/-/esri-leaflet-vector-4.2.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 55db3bf..aa632e6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,6 +20,7 @@ "chartjs-adapter-date-fns": "^3.0.0", "date-fns": "^3.6.0", "esri-leaflet": "^3.0.12", + "esri-leaflet-geocoder": "^3.1.4", "esri-leaflet-vector": "^4.2.3", "leaflet": "^1.9.4", "leaflet-easybutton": "^2.4.0", diff --git a/frontend/src/_helpers/fakeData.js b/frontend/src/_helpers/fakeData.js deleted file mode 100644 index 7f12855..0000000 --- a/frontend/src/_helpers/fakeData.js +++ /dev/null @@ -1,41 +0,0 @@ -const getSingleFakeDataset = () => { - return Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)) -} - -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 + ')' -} - -const getFakeDatasets = (selectedFeatures) => { - return selectedFeatures.map((feature) => { - return { - label: `${feature.sword.river_name} | ${feature.sword.reach_id}`, - data: getSingleFakeDataset(), - borderColor: dynamicColors() - } - }) -} - -function buildFakeData(selectedFeatures) { - return { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: getFakeDatasets(selectedFeatures) - } -} - -// https://soto.podaac.uat.earthdatacloud.nasa.gov/hydrocron/v1/timeseries?feature=Reach&feature_id=72390300011&start_time=2024-01-01T00:00:00Z&end_time=2024-10-30T00:00:00Z&output=geojson&fields=reach_id,time_str,wse,geometry -const knownQueriesWithData = [ - { - feature: 'Reach', - feature_id: '72390300011', - start_time: '2024-01-01T00:00:00Z', - end_time: '2024-10-30T00:00:00Z', - output: 'geojson', - fields: 'time_str,wse' - } -] - -export { buildFakeData, knownQueriesWithData } diff --git a/frontend/src/_helpers/hydroCron.js b/frontend/src/_helpers/hydroCron.js deleted file mode 100644 index 50e3ffb..0000000 --- a/frontend/src/_helpers/hydroCron.js +++ /dev/null @@ -1,141 +0,0 @@ -import { HYDROCRON_URL } from '@/constants' -import { useFeaturesStore } from '@/stores/features' -import { useAlertStore } from '@/stores/alerts' -import { useHydrologicStore } from '@/stores/hydrologic' -import { useChartsStore } from '@/stores/charts' -import { buildFakeData, knownQueriesWithData } from '@/_helpers/fakeData' - -const queryHydroCron = async (swordFeature = null, output = 'geojson') => { - const featuresStore = useFeaturesStore() - const chartStore = useChartsStore() - const hydrologicStore = useHydrologicStore() - const alertStore = useAlertStore() - const url = `${HYDROCRON_URL}/v1/timeseries` - - if (swordFeature == null && !featuresStore.shouldFakeData) { - console.error('No hydroCron query params, and shouldFakeData is false') - return - } - console.log('Querying HydroCron for swordFeature', swordFeature) - let params = {} - - let fields = hydrologicStore.selectedVariables.map((variable) => variable.abbreviation).join(',') - console.log('Fetching for selected fields', fields) - - if (fields === '') { - console.error('No variables selected') - alertStore.displayAlert({ - title: 'Error fetching SWOT data', - text: 'No variables selected', - type: 'error', - closable: true, - duration: 3 - }) - return - } - - if (!featuresStore.shouldFakeData) { - // TODO: get the feature type dynamically - // get the start and end time from the date range - let feature_id = swordFeature?.properties?.reach_id - if (feature_id == undefined){ - feature_id = swordFeature.params.feature_id - } - params = { - feature: 'Reach', - feature_id: feature_id, - start_time: '2024-01-01T00:00:00Z', - end_time: '2024-10-30T00:00:00Z', - output: output, - fields: fields - } - } else { - // Build fake data - // get a random known query from the knownQueriesWithData array - params = knownQueriesWithData[Math.floor(Math.random() * knownQueriesWithData.length)] - params.fields = fields - params.output = output - console.log('Faked params', params) - } - let response = await fetchHydroCronData(url, params, swordFeature) - if (response == null) { - return - } - // TODO handle if the feature is already selected (in case of csv download) - if (output === 'csv') { - return response.results.csv - } - if (featuresStore.shouldFakeData) { - let fakeData = buildFakeData([...featuresStore.selectedFeatures, response]) - // update the chartData before selecting the feature otherwise it will show blank - chartStore.chartData = fakeData - console.log('Fake data', fakeData) - }else{ - - chartStore.buildChart([...featuresStore.selectedFeatures, response]) - } - featuresStore.selectFeature(response) -} - -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' - } - }) - return processHydroCronResult(result, params, swordFeature) - } 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 - }) - } -} - -const processHydroCronResult = async (response, params, swordFeature) => { - // TODO check the content type and handle it - // application/json - // console.log(response.headers.get('Content-Type')) - const alertStore = useAlertStore() - // https://podaac.github.io/hydrocron/timeseries.html#response-codes - if (response.status < 500) { - let data = await response.json() - console.log('Swot data response', data) - if (response.status == 400 || data.hits == undefined || data.hits < 1) { - alertStore.displayAlert({ - title: 'No data found', - text: `No data found for ${JSON.stringify(params)}`, - type: 'warning', - closable: true, - duration: 6 - }) - return null - } - data.params = params - if (swordFeature?.properties){ - data.sword = swordFeature.properties - data.id = swordFeature.properties.OBJECTID - } - return data - } else { - alertStore.displayAlert({ - title: 'Error fetching SWOT data', - text: `Error while fetching SWOT data: ${response.statusText}`, - type: 'error', - closable: true, - duration: 3 - }) - } -} - -export { queryHydroCron } diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue deleted file mode 100644 index b0be087..0000000 --- a/frontend/src/components/LineChart.vue +++ /dev/null @@ -1,85 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/src/components/TheAppBar.vue b/frontend/src/components/TheAppBar.vue index 4d81b72..9228940 100644 --- a/frontend/src/components/TheAppBar.vue +++ b/frontend/src/components/TheAppBar.vue @@ -26,7 +26,7 @@ - - \ No newline at end of file