diff --git a/app/src/components/DataPanel.vue b/app/src/components/DataPanel.vue index 9e0b24180a..a205d4f056 100644 --- a/app/src/components/DataPanel.vue +++ b/app/src/components/DataPanel.vue @@ -284,7 +284,6 @@ diff --git a/app/src/components/IndicatorFiltersDemo.vue b/app/src/components/IndicatorFiltersDemo.vue index 300b6410cc..92dce7d3fc 100644 --- a/app/src/components/IndicatorFiltersDemo.vue +++ b/app/src/components/IndicatorFiltersDemo.vue @@ -91,11 +91,8 @@ import { mapMutations, } from 'vuex'; -import { Wkt } from 'wicket'; import { loadIndicatorData, loadFeatureData, moveToHighlight } from '@/utils'; -const wkt = new Wkt(); - export default { data: () => ({ selectedItem: null, @@ -117,8 +114,9 @@ export default { const objectM = { ...ind, ...items[i], - } + }; if (poi !== 'World') { + // passing the aoiID into the merged object for POI indicator objectM.aoiID = poi; } matched.push(objectM); @@ -144,23 +142,51 @@ export default { ...mapMutations('indicators', { setSelectedIndicator: 'SET_SELECTED_INDICATOR', }), + ...mapMutations('features', { + setSelectedFeature: 'SET_SELECTED_FEATURE', + }), moveToHighlight(location) { moveToHighlight(location); }, async getIndicatorData(indicatorConfig) { - return await loadIndicatorData( + return loadIndicatorData( this.baseConfig, indicatorConfig, ); }, async getFeatureData(currentFeatureObject) { - return await loadFeatureData( + return loadFeatureData( this.baseConfig, currentFeatureObject.properties, ); }, - selectItem(item) { - this.setSelectedIndicator(item); + async selectItem(item) { this.selectedItem = this.getLocationCode(item); + const val = item.poi; + const [poi] = val.split('-'); + if (poi !== 'World') { + let indicatorObject = await loadIndicatorData( + this.baseConfig, + item, + ); + const currentFeatureObject = indicatorObject.features.find( + (feat) => feat.id === item.aoiID, + ); + // let currentFeatureData; + if (currentFeatureObject) { + // Merge info of feature object into indicator object as it overwrites some info + indicatorObject = { + ...indicatorObject, + ...currentFeatureObject.properties.indicatorObject, + }; + const test = { + indicatorObject, + }; + this.setSelectedIndicator(indicatorObject); + this.setSelectedFeature(test); + } + } else { + this.setSelectedIndicator(item); + } if (item.dataLayerTime) { setTimeout(() => { this.centerMapVueComponent.dataLayerTime = { diff --git a/app/src/components/IndicatorFiltersPanel.vue b/app/src/components/IndicatorFiltersPanel.vue index 477f5fba29..e43c55c912 100644 --- a/app/src/components/IndicatorFiltersPanel.vue +++ b/app/src/components/IndicatorFiltersPanel.vue @@ -236,7 +236,7 @@ export default { // not use styleOverride to reach them, commenting out this part of styleOverride now // YET ANOTHER TODO: harmonize countries (currently both the alpha2 eg. AT are used and the full country names eg. Austria), I think we can not expect geodb values to get harmonized, so we should try to remedy in the client by preprocessing the values - let flags = ``; + // let flags = ``; // [data-filter=countries] .title { // display: flex; // align-items: center; @@ -263,6 +263,7 @@ export default { // } // `; // }); + const flags = ''; this.itemfilter.styleOverride = ` ${this.itemFilterStyleOverride} ${flags} diff --git a/app/src/components/StacInfo.vue b/app/src/components/StacInfo.vue index 6277e19da9..2bcd9fd6e0 100644 --- a/app/src/components/StacInfo.vue +++ b/app/src/components/StacInfo.vue @@ -36,7 +36,7 @@ export default { methods: { onStacInfoLoad() { this.$nextTick(() => { - if (this.$vuetify.breakpoint.smAndUp && this.$refs.stacInfoEl?.shadowRoot.querySelector('main .description').children.length < 1) { + if (this.$vuetify.breakpoint.smAndUp && this.$refs.stacInfoEl?.shadowRoot.querySelector('main .description')?.children?.length < 1) { // first parent is VExpantionPanelContent, second is VExpantionPanel this.$parent.$parent.$el.style.display = 'none'; } else { diff --git a/app/src/components/UiPanelsLayout.vue b/app/src/components/UiPanelsLayout.vue index c2f2c59cb5..7c80ed1a47 100644 --- a/app/src/components/UiPanelsLayout.vue +++ b/app/src/components/UiPanelsLayout.vue @@ -79,10 +79,10 @@ export default { heightPercentage: 100, }, ]; - if (this.$route.name !== 'demo') { - leftPanels.push(layersTool); - } else { + if (this.$route.name === 'demo') { rightPanels.push(layersTool); + } else { + leftPanels.push(layersTool); } this.panels.left = leftPanels; this.panels.right = rightPanels; diff --git a/app/src/config/esa.js b/app/src/config/esa.js index 07bc069935..210eb94beb 100644 --- a/app/src/config/esa.js +++ b/app/src/config/esa.js @@ -268,17 +268,19 @@ export const globalIndicators = [ // custom override of name + specialEnvTime properties: { indicatorObject: { - aoiID: 'WSF', + aoiID: 'World', indicator: 'WSF', display: [{ name: 'DLR WSF Evolution 1985-2015', specialEnvTime: true, attribution: '{ WSF Evolution Data are licensed under: Attribution 4.0 International (CC BY 4.0) ; Contains modified Landsat-5/-7 data [1985-2015] }', }, - // { - // name: 'DLR WSF 2019 coverage', - // attribution: '{ WSF Evolution Data are licensed under: Attribution 4.0 International (CC BY 4.0) ; Copyright DLR (2021);|Contains modified Copernicus Sentinel-1 and Sentinel-2 data [2019]}', - // } + { + url: 'https://a.geoservice.dlr.de/eoc/land/wms/', + layers: 'WSF_2019', + name: 'DLR WSF 2019 coverage', + attribution: '{ WSF Evolution Data are licensed under: Attribution 4.0 International (CC BY 4.0) ; Copyright DLR (2021);|Contains modified Copernicus Sentinel-1 and Sentinel-2 data [2019]}', + }, ], }, }, diff --git a/app/src/utils.js b/app/src/utils.js index fdab1f97cc..31b9c414bf 100644 --- a/app/src/utils.js +++ b/app/src/utils.js @@ -320,11 +320,19 @@ export async function loadFeatureData(baseConfig, feature) { const geodbUrl = baseConfig.geoDBFeatureParameters.url; const geodbIndicatorId = indicatorObject.geoDBID ? indicatorObject.geoDBID : indicatorObject.indicator; - const url = `${geodbUrl}_${geodbIndicatorId}?aoi_id=eq.${indicatorObject.aoiID}`; + const selectQuery = 'site_name,city,color_code,time,aoi,measurement_value,indicator_value,reference_time,eo_sensor,reference_value,input_data'; + const url = `${geodbUrl}_${geodbIndicatorId}?aoi_id=eq.${indicatorObject.aoiID}&select=${selectQuery}`; // Fetch location data const response = await axios.get(url, { credentials: 'same-origin' }); + // specially fetch non-array like variables such as sub_aoi + // because they are huge and we do not expect it to change in array + const selectQueryNonArray = 'sub_aoi'; + const urlNonArray = `${geodbUrl}_${geodbIndicatorId}?aoi_id=eq.${indicatorObject.aoiID}&select=${selectQueryNonArray}&limit=1`; + const responseNonArray = await axios.get(urlNonArray, { credentials: 'same-origin' }); + if (response) { const { data } = response; + const dataNonArray = responseNonArray.data; // Set data to indicator object // Convert data first const mapping = { @@ -344,12 +352,12 @@ export async function loadFeatureData(baseConfig, feature) { mapping.siteNameNUTS = 'site_name'; } // Try to extract sub_aoi geometry information - if (data && data.length > 0 && 'sub_aoi' in data[0]) { + if (dataNonArray && dataNonArray.length > 0 && 'sub_aoi' in dataNonArray[0]) { let features = null; - if (data[0].sub_aoi !== '/' && data[0].sub_aoi !== '') { + if (dataNonArray[0].sub_aoi !== '/' && dataNonArray[0].sub_aoi !== '') { // try to generate sub_aoi from geodb try { - features = wkt.read(data[0].sub_aoi).toJson(); + features = wkt.read(dataNonArray[0].sub_aoi).toJson(); } catch (error) { console.log('Error parsing wkt sub_aoi'); }