Bringing geosearch component to production (#2613)

* chore: update config for ESDL_Hydrology_Precipitation * chore: update labelFormatFunction for ESDL_Hydrology_SM * EOxGeoSearch Integration (#2599) * chore: add geosearch to ignored element tags * feat: integrate working geosearch * chore: push bundle and use new button size parameter * chore: use shConfig to get api key for opencage search endpoint * chore: run linter in map component * chore: push new bundle * chore: add geosearch to list * chore: remove any temp bundles and references to them * chore: register geosearch component by importing it * feat: added geosearch brand specific option; added opencage secrets for opencage and updated deployments configurations for different instances * chore: fixing linter error * fix: moving key definition to map component, linter breaks if it is in the appconfig * chore: updated geopackage; solved wrong variable defintion for key --------- Co-authored-by: santilland <[email protected]> --------- Co-authored-by: Lubomir Dolezal <[email protected]> Co-authored-by: Moritz Riede <[email protected]>
eurodatacube · Jun 26, 2024 · 9fbc8d9 · 9fbc8d9
1 parent ee8c913
commit 9fbc8d9
Show file tree

Hide file tree

Showing 14 changed files with 160 additions and 50 deletions.
diff --git a/.github/workflows/feature-branch_deploy.yml b/.github/workflows/feature-branch_deploy.yml
@@ -38,7 +38,7 @@ jobs:
       uses: datamonsters/replace-action@v2
       with:
         files: 'app/dist/shConfig.js'
-        replacements: '$SH_INSTANCE_ID=${{ secrets.SH_INSTANCE_ID }},$SH_INSTANCE_ID_POLAR=${{ secrets.SH_INSTANCE_ID_POLAR }},$GEODB_INSTANCE_ID=${{ secrets.GEODB_INSTANCE_ID }},$LISTMONK_API_KEY=${{ secrets.LISTMONK_API_KEY }},$STAT_API_CLIENT_SECRET=${{ secrets.STAT_API_CLIENT_SECRET }},$STAT_API_CLIENT_ID=${{ secrets.STAT_API_CLIENT_ID }},$SH_INSTANCE_ID_GTIF=${{ secrets.SH_INSTANCE_ID_GTIF }}'
+        replacements: '$SH_INSTANCE_ID=${{ secrets.SH_INSTANCE_ID }},$SH_INSTANCE_ID_POLAR=${{ secrets.SH_INSTANCE_ID_POLAR }},$GEODB_INSTANCE_ID=${{ secrets.GEODB_INSTANCE_ID }},$LISTMONK_API_KEY=${{ secrets.LISTMONK_API_KEY }},$STAT_API_CLIENT_SECRET=${{ secrets.STAT_API_CLIENT_SECRET }},$STAT_API_CLIENT_ID=${{ secrets.STAT_API_CLIENT_ID }},$SH_INSTANCE_ID_GTIF=${{ secrets.SH_INSTANCE_ID_GTIF }},$OPENCAGE_RACE=${{ secrets.OPENCAGE_EOX }},$OPENCAGE_GTIF=${{ secrets.OPENCAGE_EOX }},$OPENCAGE_TRILATERAL=${{ secrets.OPENCAGE_EOX }}'
 
     # Upload build client to S3
     - name: sync client s3

diff --git a/.github/workflows/gtif-demo_deploy.yml b/.github/workflows/gtif-demo_deploy.yml
@@ -37,7 +37,7 @@ jobs:
       uses: datamonsters/replace-action@v2
       with:
         files: 'app/dist/shConfig.js'
-        replacements: '$SH_INSTANCE_ID=${{ secrets.SH_INSTANCE_ID }},$SH_INSTANCE_ID_POLAR=${{ secrets.SH_INSTANCE_ID_POLAR }},$GEODB_INSTANCE_ID=${{ secrets.GEODB_INSTANCE_ID }},$LISTMONK_API_KEY=${{ secrets.LISTMONK_API_KEY }},$STAT_API_CLIENT_SECRET=${{ secrets.STAT_API_CLIENT_SECRET }},$STAT_API_CLIENT_ID=${{ secrets.STAT_API_CLIENT_ID }},$SH_INSTANCE_ID_GTIF=${{ secrets.SH_INSTANCE_ID_GTIF }}'
+        replacements: '$SH_INSTANCE_ID=${{ secrets.SH_INSTANCE_ID }},$SH_INSTANCE_ID_POLAR=${{ secrets.SH_INSTANCE_ID_POLAR }},$GEODB_INSTANCE_ID=${{ secrets.GEODB_INSTANCE_ID }},$LISTMONK_API_KEY=${{ secrets.LISTMONK_API_KEY }},$STAT_API_CLIENT_SECRET=${{ secrets.STAT_API_CLIENT_SECRET }},$STAT_API_CLIENT_ID=${{ secrets.STAT_API_CLIENT_ID }},$SH_INSTANCE_ID_GTIF=${{ secrets.SH_INSTANCE_ID_GTIF }},$OPENCAGE_RACE=${{ secrets.OPENCAGE_RACE }},$OPENCAGE_GTIF=${{ secrets.OPENCAGE_GTIF }},$OPENCAGE_TRILATERAL=${{ secrets.OPENCAGE_TRILATERAL }}'
 
     # Upload build client to S3
     - name: sync client s3

diff --git a/.github/workflows/gtif-staging_deploy.yml b/.github/workflows/gtif-staging_deploy.yml
@@ -37,7 +37,7 @@ jobs:
       uses: datamonsters/replace-action@v2
       with:
         files: 'app/dist/shConfig.js'
-        replacements: '$SH_INSTANCE_ID=${{ secrets.SH_INSTANCE_ID }},$SH_INSTANCE_ID_POLAR=${{ secrets.SH_INSTANCE_ID_POLAR }},$GEODB_INSTANCE_ID=${{ secrets.GEODB_INSTANCE_ID }},$LISTMONK_API_KEY=${{ secrets.LISTMONK_API_KEY }},$STAT_API_CLIENT_SECRET=${{ secrets.STAT_API_CLIENT_SECRET }},$STAT_API_CLIENT_ID=${{ secrets.STAT_API_CLIENT_ID }},$SH_INSTANCE_ID_GTIF=${{ secrets.SH_INSTANCE_ID_GTIF }}'
+        replacements: '$SH_INSTANCE_ID=${{ secrets.SH_INSTANCE_ID }},$SH_INSTANCE_ID_POLAR=${{ secrets.SH_INSTANCE_ID_POLAR }},$GEODB_INSTANCE_ID=${{ secrets.GEODB_INSTANCE_ID }},$LISTMONK_API_KEY=${{ secrets.LISTMONK_API_KEY }},$STAT_API_CLIENT_SECRET=${{ secrets.STAT_API_CLIENT_SECRET }},$STAT_API_CLIENT_ID=${{ secrets.STAT_API_CLIENT_ID }},$SH_INSTANCE_ID_GTIF=${{ secrets.SH_INSTANCE_ID_GTIF }},$OPENCAGE_RACE=${{ secrets.OPENCAGE_EOX }},$OPENCAGE_GTIF=${{ secrets.OPENCAGE_EOX }},$OPENCAGE_TRILATERAL=${{ secrets.OPENCAGE_EOX }}'
 
     # Upload build client to S3
     - name: sync client s3

diff --git a/.github/workflows/production_deploy.yml b/.github/workflows/production_deploy.yml
@@ -37,7 +37,7 @@ jobs:
       uses: datamonsters/replace-action@v2
       with:
         files: 'app/dist/shConfig.js'
-        replacements: '$SH_INSTANCE_ID=${{ secrets.SH_INSTANCE_ID }},$SH_INSTANCE_ID_POLAR=${{ secrets.SH_INSTANCE_ID_POLAR }},$GEODB_INSTANCE_ID=${{ secrets.GEODB_INSTANCE_ID }},$LISTMONK_API_KEY=${{ secrets.LISTMONK_API_KEY }},$STAT_API_CLIENT_SECRET=${{ secrets.STAT_API_CLIENT_SECRET }},$STAT_API_CLIENT_ID=${{ secrets.STAT_API_CLIENT_ID }},$SH_INSTANCE_ID_GTIF=${{ secrets.SH_INSTANCE_ID_GTIF }}'
+        replacements: '$SH_INSTANCE_ID=${{ secrets.SH_INSTANCE_ID }},$SH_INSTANCE_ID_POLAR=${{ secrets.SH_INSTANCE_ID_POLAR }},$GEODB_INSTANCE_ID=${{ secrets.GEODB_INSTANCE_ID }},$LISTMONK_API_KEY=${{ secrets.LISTMONK_API_KEY }},$STAT_API_CLIENT_SECRET=${{ secrets.STAT_API_CLIENT_SECRET }},$STAT_API_CLIENT_ID=${{ secrets.STAT_API_CLIENT_ID }},$SH_INSTANCE_ID_GTIF=${{ secrets.SH_INSTANCE_ID_GTIF }},$OPENCAGE_RACE=${{ secrets.OPENCAGE_RACE }},$OPENCAGE_GTIF=${{ secrets.OPENCAGE_GTIF }},$OPENCAGE_TRILATERAL=${{ secrets.OPENCAGE_TRILATERAL }}'
 
     # Upload to S3
     - name: sync s3

diff --git a/.github/workflows/staging_deploy.yml b/.github/workflows/staging_deploy.yml
@@ -37,7 +37,7 @@ jobs:
       uses: datamonsters/replace-action@v2
       with:
         files: 'app/dist/shConfig.js'
-        replacements: '$SH_INSTANCE_ID=${{ secrets.SH_INSTANCE_ID }},$SH_INSTANCE_ID_POLAR=${{ secrets.SH_INSTANCE_ID_POLAR }},$GEODB_INSTANCE_ID=${{ secrets.GEODB_INSTANCE_ID }},$LISTMONK_API_KEY=${{ secrets.LISTMONK_API_KEY }},$STAT_API_CLIENT_SECRET=${{ secrets.STAT_API_CLIENT_SECRET }},$STAT_API_CLIENT_ID=${{ secrets.STAT_API_CLIENT_ID }},$SH_INSTANCE_ID_GTIF=${{ secrets.SH_INSTANCE_ID_GTIF }}'
+        replacements: '$SH_INSTANCE_ID=${{ secrets.SH_INSTANCE_ID }},$SH_INSTANCE_ID_POLAR=${{ secrets.SH_INSTANCE_ID_POLAR }},$GEODB_INSTANCE_ID=${{ secrets.GEODB_INSTANCE_ID }},$LISTMONK_API_KEY=${{ secrets.LISTMONK_API_KEY }},$STAT_API_CLIENT_SECRET=${{ secrets.STAT_API_CLIENT_SECRET }},$STAT_API_CLIENT_ID=${{ secrets.STAT_API_CLIENT_ID }},$SH_INSTANCE_ID_GTIF=${{ secrets.SH_INSTANCE_ID_GTIF }},$OPENCAGE_RACE=${{ secrets.OPENCAGE_EOX }},$OPENCAGE_GTIF=${{ secrets.OPENCAGE_EOX }},$OPENCAGE_TRILATERAL=${{ secrets.OPENCAGE_EOX }}'
 
     # Upload build client to S3
     - name: sync client s3

diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@chenfengyuan/vue-countdown": "^1.1.5",
+    "@eox/geosearch": "^0.1.2",
     "@eox/itemfilter": "0.14.0",
     "@eox/jsonform": "^0.7.0",
     "@eox/layercontrol": "^0.17.3",

diff --git a/app/public/shConfig.js b/app/public/shConfig.js
@@ -4,5 +4,8 @@ const shConfig = {
   geodbInstanceId: '$GEODB_INSTANCE_ID',
   listmonkApiKey: '$LISTMONK_API_KEY',
   statApiClientId: '$STAT_API_CLIENT_ID',
-  statApiClientSecret: '$STAT_API_CLIENT_SECRET'
+  statApiClientSecret: '$STAT_API_CLIENT_SECRET',
+  opencageRACE: '$OPENCAGE_RACE',
+  opencageGTIF: '$OPENCAGE_GTIF',
+  opencageTrilateral: '$OPENCAGE_TRILATERAL',
 };
diff --git a/app/src/appConfig.js b/app/src/appConfig.js
@@ -6,6 +6,8 @@ module.exports = [
       staging: 2,
       production: 4,
     },
+
+    geosearchEndpoint: 'https://api.opencagedata.com/geocode/v1/json?limit=5&bounds=-27.42188,24.20689,53.08594,71.46912',
     match: ['race.esa.int', 'eodash.eox.at', 'eodash-staging.eox.at', 'eodash-testing.eox.at', 'race.eox.world', 'race.localhost', 'race.eox.home'],
     branding: {
       appName: 'Rapid Action for Citizens with Earth Observation',
@@ -146,6 +148,7 @@ module.exports = [
       staging: 3,
       production: 5,
     },
+    geosearchEndpoint: 'https://api.opencagedata.com/geocode/v1/json?limit=5',
     match: ['eodashboard.org', 'www.eodashboard.org', 'eodash-trilateral.eox.at', 'eodash-trilateral-staging.eox.at', 'eodash-trilateral-testing.eox.at', 'trilateral.eox.world', 'trilateral.localhost', 'trilateral.eox.home'],
     branding: {
       appName: 'Earth Observing Dashboard',
@@ -345,6 +348,7 @@ module.exports = [
       staging: 6,
       production: 7,
     },
+    geosearchEndpoint: 'https://api.opencagedata.com/geocode/v1/json?limit=5&countrycode=AT',
     match: ['gtif.esa.int', 'gtif.eox.at', 'gtif-demo.eox.at', 'gtif-staging.eox.at', 'gtif-testing.eox.at', 'gtif.eox.world', 'gtif.localhost', 'gtif.eox.home'],
     branding: {
       appName: 'Green Transition Information Factory',

diff --git a/app/src/components/map/Map.vue b/app/src/components/map/Map.vue
@@ -124,6 +124,23 @@
           :key="dataLayerName  + '_customArea'"
           :drawnArea.sync="drawnArea"
         />
+        <eox-geosearch
+          v-if="searchEndpoint"
+          style="
+            pointer-events: auto;
+            margin-right: 4px;
+            --button-size: 36px;
+            --button-bg: #fff;
+            --button-fg: #000;
+          "
+          label="Search"
+          button
+          small
+          list-direction="left"
+          results-direction="down"
+          interval="1000"
+          :endpoint="searchEndpoint"
+        ></eox-geosearch>
         <v-btn
           v-if="$vuetify.breakpoint.xsOnly && displayTimeSelection"
           :color="$vuetify.theme.currentTheme.background"
@@ -351,6 +368,7 @@ export default {
       mobileTimeselectionToggle: false,
       frozenLayerKey: null,
       appRightPanelsOpened: null,
+      geosearchExtent: null,
     };
   },
   computed: {
@@ -647,6 +665,7 @@ export default {
         dataProjection: 'EPSG:4326',
         featureProjection: map.getView().getProjection(),
       };
+      if (this.geosearchExtent) return this.geosearchExtent;
       // Check for possible subaoi
       if (this.featureData?.subAoi) {
         const { subAoi } = this.featureData;
@@ -729,6 +748,21 @@ export default {
     controlsContainerStyle() {
       return this.mapId === 'centerMap' && this.appRightPanelsOpened ? 'calc(min(25%, 500px) - 18px)' : '20px';
     },
+    searchEndpoint() {
+      let endpoint = false;
+      if ('geosearchEndpoint' in this.appConfig) {
+        endpoint = this.appConfig.geosearchEndpoint;
+      }
+      // Apply key based on endpoint (seems i can't do this within appConfig because of linting)
+      if (this.appConfig.id === 'esa') {
+        endpoint += `&key=${shConfig.opencageRACE}`;
+      } else if (this.appConfig.id === 'trilateral') {
+        endpoint += `&key=${shConfig.opencageTrilateral}`;
+      } else if (this.appConfig.id === 'gtif') {
+        endpoint += `&key=${shConfig.opencageGTIF}`;
+      }
+      return endpoint;
+    },
   },
   watch: {
     baseLayerConfigs() {
@@ -1031,6 +1065,8 @@ export default {
       this.queryLink = new Link({ replace: true, params: ['x', 'y', 'z'] });
       map.addInteraction(this.queryLink);
     }
+
+    window.addEventListener('geosearchSelect', (e) => { this.geosearchExtent = e.detail; });
   },
   methods: {
     ...mapMutations('indicators', {

diff --git a/app/src/config/esa.js b/app/src/config/esa.js
@@ -299,6 +299,25 @@ export const globalIndicators = [
       },
     },
   },
+  {
+    properties: {
+      // override dates for precipitation
+      indicatorObject: {
+        indicator: 'ESDL_Hydrology_Precipitation',
+        time: getDailyDates('2015-01-01', '2021-12-31'),
+      },
+    },
+  },
+  {
+    properties: {
+      indicatorObject: {
+        indicator: 'ESDL_Hydrology_SM',
+        display: {
+          labelFormatFunction: (date) => DateTime.fromISO(date).toFormat('yyyy-MM-dd'),
+        },
+      },
+    },
+  },
   {
     // custom override of name + specialEnvTime
     properties: {

diff --git a/app/src/config/trilateral.js b/app/src/config/trilateral.js
@@ -568,6 +568,25 @@ export const globalIndicators = [
   createRECCAP2Config('ESDC_gross_primary_productivity', getDailyDates('2001-01-05', '2018-12-23', 8)),
   createRECCAP2Config('ESDC_net_ecosystem_exchange', getDailyDates('2001-01-05', '2018-12-23', 8)),
   createRECCAP2Config('ESDC_kndvi', getDailyDates('2000-03-01', '2021-12-31', 8)),
+  {
+    properties: {
+      // override dates for precipitation
+      indicatorObject: {
+        indicator: 'ESDL_Hydrology_Precipitation',
+        time: getDailyDates('2015-01-01', '2021-12-31'),
+      },
+    },
+  },
+  {
+    properties: {
+      indicatorObject: {
+        indicator: 'ESDL_Hydrology_SM',
+        display: {
+          labelFormatFunction: (date) => DateTime.fromISO(date).toFormat('yyyy-MM-dd'),
+        },
+      },
+    },
+  },
   {
     properties: {
       indicatorObject: {