From 653b04324c209a0c3d5d9acc4b0f9f483cf99c3d Mon Sep 17 00:00:00 2001
From: Daniel Santillan <daniel.santillan@eox.at>
Date: Fri, 6 Sep 2024 15:28:17 +0200
Subject: [PATCH] Merging of new vector filter capabilities (#2663)

* feat: added possibility to pass flat style style

* chore: added initial vector layer for sawmill data

* feat: implemented initial idea for vector tile feature filtering

* chore: cleanup of component, added category info to filter definition

* fix: made sure colormap is loaded in correct layer for forest disturbance

* chore: added truck supported roads network as layer to fcm2, added sawmill capabilities also to fcm3

* chore: removed adress from tooltip
---
 app/src/components/DataPanel.vue          |  13 +-
 app/src/components/map/FeatureFilters.vue |  71 ++++++
 app/src/components/map/layers.js          |  15 +-
 app/src/config/gtif.js                    | 261 +++++++++++++++++-----
 4 files changed, 303 insertions(+), 57 deletions(-)
 create mode 100644 app/src/components/map/FeatureFilters.vue

diff --git a/app/src/components/DataPanel.vue b/app/src/components/DataPanel.vue
index 7f2e598977..0ae75e5e7c 100644
--- a/app/src/components/DataPanel.vue
+++ b/app/src/components/DataPanel.vue
@@ -45,8 +45,15 @@
             :adminFeature="$store.state.features.adminBorderFeatureSelected"
             :mergedConfigsData="mergedConfigsData[0]"
             :indicatorCode="indicatorObject.indicator"
-          >
-          </filter-controls>
+        >
+        </filter-controls>
+        <feature-filters v-if="indicatorObject.featureFilters"
+            :featureFilters="indicatorObject.featureFilters"
+            :adminLayer="$store.state.features.adminBorderLayerSelected"
+            :adminFeature="$store.state.features.adminBorderFeatureSelected"
+            :mergedConfigsData="mergedConfigsData[0]"
+            :indicatorCode="indicatorObject.indicator"
+        ></feature-filters>
         <template v-if="selectableLayerConfigs.length > 0">
             <SelectionInfoBar class="pb-2"
             :selectableLayerConfigs="selectableLayerConfigs"/>
@@ -300,6 +307,7 @@ import { DateTime } from 'luxon';
 import IndicatorData from '@/components/IndicatorData.vue';
 import IframeButton from '@/components/IframeButton.vue';
 import FilterControls from '@/components/map/FilterControls.vue';
+import FeatureFilters from '@/components/map/FeatureFilters.vue';
 import StyleControls from '@/components/map/StyleControls.vue';
 import DataMockupView from '@/components/DataMockupView.vue';
 import AddToDashboardButton from '@/components/AddToDashboardButton.vue';
@@ -317,6 +325,7 @@ export default {
     IframeButton,
     AddToDashboardButton,
     FilterControls,
+    FeatureFilters,
     StyleControls,
     WmsStyleControls,
     VectorTileStyleControl,
diff --git a/app/src/components/map/FeatureFilters.vue b/app/src/components/map/FeatureFilters.vue
new file mode 100644
index 0000000000..90536898b8
--- /dev/null
+++ b/app/src/components/map/FeatureFilters.vue
@@ -0,0 +1,71 @@
+<template>
+  <v-col v-if="filters"
+    :cols="$vuetify.breakpoint.mdAndDown"
+    :style="`height: auto`"
+  >
+  <v-card class="pa-2">
+    <v-card-title class="pa-2">Filters</v-card-title>
+      <template>
+        <v-select
+          v-model="selectedFilters"
+          :items="filters"
+          item-text="description"
+          item-value="id"
+          label="Select"
+          multiple
+          return-object
+          :hint="featureFilters.hint ? featureFilters.hint: 'Select filter'"
+          persistent-hint
+          @change="updateMap"
+        ></v-select>
+      </template>
+    </v-card>
+  </v-col>
+</template>
+
+<script>
+import { getMapInstance } from '@/components/map/map';
+
+export default {
+  name: 'FilterControls',
+  props: {
+    featureFilters: Object,
+  },
+  data() {
+    return {
+      selectedFilters: [],
+      filters: this.featureFilters.filters,
+    };
+  },
+  methods: {
+    updateMap() {
+      let resultFilters = [];
+      let style;
+      if (this.selectedFilters.length > 1) {
+        resultFilters.push('all');
+        this.selectedFilters.forEach((f) => {
+          resultFilters.push(['==', ['get', f.id], 1]);
+        });
+      } else if (this.selectedFilters.length === 1) {
+        resultFilters = ['==', ['get', this.selectedFilters[0].id], 1];
+      }
+      if (this.selectedFilters.length === 0) {
+        style = this.featureFilters.baseStyle;
+      } else {
+        style = [{
+          filter: resultFilters,
+          style: this.featureFilters.baseStyle,
+        }];
+      }
+      const { map } = getMapInstance('centerMap');
+      const vectorLayer = map.getAllLayers().find(
+        (l) => l.get('id') === this.featureFilters.sourceLayer,
+      );
+      vectorLayer.setStyle(style);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/app/src/components/map/layers.js b/app/src/components/map/layers.js
index cc2e0ef9e1..fe460a9254 100644
--- a/app/src/components/map/layers.js
+++ b/app/src/components/map/layers.js
@@ -366,11 +366,16 @@ export function createLayerFromConfig(config, map, _options = {}) {
     layer = new TileLayer({});
     createWMTSSourceFromCapabilities(config, layer, options);
   } else if (config.protocol === 'geoserverTileLayer') {
-    const dynamicStyleFunction = createVectorLayerStyle(config, options);
+    let style;
+    if ('flatStyle' in config) {
+      style = config.flatStyle;
+    } else {
+      style = createVectorLayerStyle(config, options);
+    }
     const geoserverUrl = 'https://xcube-geodb.brockmann-consult.de/geoserver/geodb_debd884d-92f9-4979-87b6-eadef1139394/gwc/service/tms/1.0.0/';
     const projString = 'EPSG:3857';
     layer = new VectorTileLayer({
-      style: dynamicStyleFunction,
+      style,
       source: new VectorTileSource({
         projection: projString,
         format: new MVT(),
@@ -638,6 +643,10 @@ export function createLayerFromConfig(config, map, _options = {}) {
     layer.getSource().set('updateArea', areaUpdate);
   }
   layer.set('configId', config.name);
-  layer.set('id', config.name);
+  if ('id' in config) {
+    layer.set('id', config.id);
+  } else {
+    layer.set('id', config.name);
+  }
   return layer;
 }
diff --git a/app/src/config/gtif.js b/app/src/config/gtif.js
index 449869db58..4021660173 100644
--- a/app/src/config/gtif.js
+++ b/app/src/config/gtif.js
@@ -1908,51 +1908,143 @@ export const globalIndicators = [
     properties: {
       indicatorObject: {
         indicator: 'FCM2',
-        highlights: [
+        featureFilters: {
+          sourceLayer: 'sawmill_features',
+          hint: ' Select sawmill capabilities',
+          baseStyle: {
+            'circle-radius': 5,
+            'circle-stroke-width': 2,
+            'circle-stroke-color': '#ee903d',
+            'circle-fill-color': '#00324755',
+          },
+          filters: [
+            { id: 'al', description: 'other glued wood products (dou or trilam)', category: 'Glued wood products' },
+            { id: 'bsh', description: 'laminated wood', category: 'Glued wood products' },
+            { id: 'bu', description: 'production of beech', category: 'Hardwood' },
+            { id: 'ei', description: 'production of oak ', category: 'Hardwood' },
+            { id: 's', description: 'other', category: 'Hardwood' },
+            { id: 'b', description: 'log band saw', category: 'Machinery ' },
+            { id: 'g', description: 'frame saw ', category: 'Machinery ' },
+            { id: 'i', description: 'impregnation ', category: 'Machinery ' },
+            { id: 'l', description: 'laminating line', category: 'Machinery ' },
+            { id: 'k', description: 'finger jointing', category: 'Machinery ' },
+            { id: 'n', description: 'double cutting circular saw', category: 'Machinery ' },
+            { id: 'p', description: 'profiler', category: 'Machinery ' },
+            { id: 't', description: 'drying chamber', category: 'Machinery ' },
+            { id: 'tb', description: 'band re-saw', category: 'Machinery ' },
+            { id: 'hw', description: 'produces planed goods', category: 'Planed goods' },
+            { id: 'veh', description: 'ordinary member of the Association of the European Planing Mill Industry', category: 'Planed goods' },
+            { id: 'fi_ta', description: 'production of spruce/fir', category: 'Softwood' },
+            { id: 'la', description: 'production of larch', category: 'Softwood' },
+            { id: 'ki', description: 'production of pine', category: 'Softwood' },
+            { id: 'mh', description: 'CE certified sawmills which manufacture high-quality construction solid timber without gluing and finger joint ', category: 'Solid wood' },
+            { id: 'ls', description: 'this sawmill also takes subcontracting orders ', category: 'Subcontracting' },
+          ],
+        },
+        display: [
           {
-            name: 'Styria overview',
-            location: wkt.read('POLYGON((13.234 48, 13.234 46.5, 16.5 46.5, 16.5 48, 13.234 48))').toJson(),
+            id: 'truck_roads',
+            legendUrl: '',
+            baseUrl: 'https://xcube-geodb.brockmann-consult.de/geoserver/geodb_debd884d-92f9-4979-87b6-eadef1139394/wms?',
+            layers: 'geodb_debd884d-92f9-4979-87b6-eadef1139394:GTIF_beetle4tech_roads_austria_3857',
+            attribution: '{}',
+            // sld: 'https://eox-gtif-public.s3.eu-central-1.amazonaws.com/styles/green_rooftops_v3.sld',
+            protocol: 'WMS',
+            exceptions: 'application/vnd.ogc.se_inimage',
+            name: 'Truck appropiate roads',
           },
           {
-            name: 'Mariazell',
-            location: wkt.read('POLYGON((15.200 47.800, 15.200 47.772, 15.262 47.772, 15.262 47.800, 15.200 47.800))').toJson(),
+            protocol: 'GeoJSON',
+            projection: 'EPSG:4326',
+            url: 'https://eox-gtif-public.s3.eu-central-1.amazonaws.com/Carbon_accounting/biomass_powerplants.geojson',
+            name: 'Biomass power plants',
+            legendUrl: '',
+            flatStyle: [
+              {
+                style: {
+                  'circle-radius': 5,
+                  'circle-stroke-width': 2,
+                  'circle-stroke-color': '#c396fe',
+                  'circle-fill-color': '#c396fe55',
+                }
+              },
+            ],
+            id: 'biomass_power_plants',
+            tooltip: true,
+            allowedParameters: ['0'],
+            visible: true,
+            selection: {
+              mode: 'single',
+            },
           },
-        ],
-        display: {
-          protocol: 'cog',
-          id: 'FCM2',
-          sources: [
-            { url: 'https://eox-gtif-public.s3.eu-central-1.amazonaws.com/FCM/v2/JR/A_FCMT_AnualForestChangeType_epsg3857.tif' },
-          ],
-          style: {
-            color: [
-              'case',
-              ['==', ['band', 1], 1],
-              ['color', 255, 255, 0],
-              ['==', ['band', 1], 2],
-              ['color', 255, 85, 255],
-              ['==', ['band', 1], 3],
-              ['color', 255, 0, 0],
-              ['==', ['band', 1], 4],
-              ['color', 173, 173, 173],
-              ['==', ['band', 1], 5],
-              ['color', 0, 85, 255],
-              ['==', ['band', 1], 6],
-              ['color', 0, 85, 255],
-              ['==', ['band', 1], 7],
-              ['color', 67, 67, 67],
-              [
+          {
+            id: 'sawmill_features',
+            legendUrl: '',
+            flatStyle: [
+              {
+                /*
+                filter: [
+                  'all',
+                  ['==', ['get', 'al'], 1],
+                  ['==', ['get', 'b'], 1],
+                ],
+                */
+                style: {
+                  'circle-radius': 5,
+                  'circle-stroke-width': 2,
+                  'circle-stroke-color': '#ee903d',
+                  'circle-fill-color': '#ee903d55',
+                },
+              },
+            ],
+            layerName: 'geodb_debd884d-92f9-4979-87b6-eadef1139394:GTIF_sawmills_v1',
+            protocol: 'geoserverTileLayer',
+            name: 'Sawmills',
+            visible: true,
+            selection: {
+              mode: 'single',
+            },
+            tooltip: true,
+            allowedParameters: ['name'],
+          },
+          {
+            dataInfo: 'FCM2',
+            protocol: 'cog',
+            legendUrl: 'https://raw.githubusercontent.com/eurodatacube/eodash-assets/main/collections/FCM2_Forest_disturbance_type/FCM_dist_type.png',
+            id: 'FCM2',
+            sources: [
+              { url: 'https://eox-gtif-public.s3.eu-central-1.amazonaws.com/FCM/v2/JR/A_FCMT_AnualForestChangeType_epsg3857.tif' },
+            ],
+            style: {
+              color: [
                 'case',
-                ['==', ['band', 2], 1],
-                ['color', 147, 220, 0],
-                ['==', ['band', 2], 2],
-                ['color', 0, 107, 0],
-                ['color', 0, 0, 0, 0],
+                ['==', ['band', 1], 1],
+                ['color', 255, 255, 0],
+                ['==', ['band', 1], 2],
+                ['color', 255, 85, 255],
+                ['==', ['band', 1], 3],
+                ['color', 255, 0, 0],
+                ['==', ['band', 1], 4],
+                ['color', 173, 173, 173],
+                ['==', ['band', 1], 5],
+                ['color', 0, 85, 255],
+                ['==', ['band', 1], 6],
+                ['color', 0, 85, 255],
+                ['==', ['band', 1], 7],
+                ['color', 67, 67, 67],
+                [
+                  'case',
+                  ['==', ['band', 2], 1],
+                  ['color', 147, 220, 0],
+                  ['==', ['band', 2], 2],
+                  ['color', 0, 107, 0],
+                  ['color', 0, 0, 0, 0],
+                ],
               ],
-            ],
+            },
+            name: 'Forest disturbance type',
           },
-          name: 'Forest disturbance type',
-        },
+        ],
       },
     },
   },
@@ -1960,23 +2052,88 @@ export const globalIndicators = [
     properties: {
       indicatorObject: {
         indicator: 'FCM3',
-        display: {
-          protocol: 'cog',
-          id: 'FCM3',
-          sources: [
-            { url: 'https://eox-gtif-public.s3.eu-central-1.amazonaws.com/FCM/v2/A_FM_AustriaForestMask-2022-09-01_epsg3857-v2.tif' },
+        featureFilters: {
+          sourceLayer: 'sawmill_features',
+          hint: ' Select sawmill capabilities',
+          baseStyle: {
+            'circle-radius': 5,
+            'circle-stroke-width': 2,
+            'circle-stroke-color': '#ee903d',
+            'circle-fill-color': '#00324755',
+          },
+          filters: [
+            { id: 'al', description: 'other glued wood products (dou or trilam)', category: 'Glued wood products' },
+            { id: 'bsh', description: 'laminated wood', category: 'Glued wood products' },
+            { id: 'bu', description: 'production of beech', category: 'Hardwood' },
+            { id: 'ei', description: 'production of oak ', category: 'Hardwood' },
+            { id: 's', description: 'other', category: 'Hardwood' },
+            { id: 'b', description: 'log band saw', category: 'Machinery ' },
+            { id: 'g', description: 'frame saw ', category: 'Machinery ' },
+            { id: 'i', description: 'impregnation ', category: 'Machinery ' },
+            { id: 'l', description: 'laminating line', category: 'Machinery ' },
+            { id: 'k', description: 'finger jointing', category: 'Machinery ' },
+            { id: 'n', description: 'double cutting circular saw', category: 'Machinery ' },
+            { id: 'p', description: 'profiler', category: 'Machinery ' },
+            { id: 't', description: 'drying chamber', category: 'Machinery ' },
+            { id: 'tb', description: 'band re-saw', category: 'Machinery ' },
+            { id: 'hw', description: 'produces planed goods', category: 'Planed goods' },
+            { id: 'veh', description: 'ordinary member of the Association of the European Planing Mill Industry', category: 'Planed goods' },
+            { id: 'fi_ta', description: 'production of spruce/fir', category: 'Softwood' },
+            { id: 'la', description: 'production of larch', category: 'Softwood' },
+            { id: 'ki', description: 'production of pine', category: 'Softwood' },
+            { id: 'mh', description: 'CE certified sawmills which manufacture high-quality construction solid timber without gluing and finger joint ', category: 'Solid wood' },
+            { id: 'ls', description: 'this sawmill also takes subcontracting orders ', category: 'Subcontracting' },
           ],
-          style: {
-            color: [
-              'case',
-              ['==', ['band', 1], 1],
-              ['color', 147, 220, 0],
-              ['==', ['band', 1], 2],
-              ['color', 0, 107, 0],
-              ['color', 0, 0, 0, 0],
+        },
+        display: [
+          {
+            protocol: 'cog',
+            id: 'FCM3',
+            sources: [
+              { url: 'https://eox-gtif-public.s3.eu-central-1.amazonaws.com/FCM/v2/A_FM_AustriaForestMask-2022-09-01_epsg3857-v2.tif' },
+            ],
+            style: {
+              color: [
+                'case',
+                ['==', ['band', 1], 1],
+                ['color', 147, 220, 0],
+                ['==', ['band', 1], 2],
+                ['color', 0, 107, 0],
+                ['color', 0, 0, 0, 0],
+              ],
+            },
+          },
+          {
+            id: 'sawmill_features',
+            legendUrl: '',
+            flatStyle: [
+              {
+                /*
+                filter: [
+                  'all',
+                  ['==', ['get', 'al'], 1],
+                  ['==', ['get', 'b'], 1],
+                ],
+                */
+                style: {
+                  'circle-radius': 5,
+                  'circle-stroke-width': 2,
+                  'circle-stroke-color': '#ee903d',
+                  'circle-fill-color': '#ee903d55',
+                },
+              },
             ],
+            layerName: 'geodb_debd884d-92f9-4979-87b6-eadef1139394:GTIF_sawmills_v1',
+            protocol: 'geoserverTileLayer',
+            name: 'Sawmills',
+            visible: true,
+            selection: {
+              mode: 'single',
+            },
+            tooltip: true,
+            allowedParameters: ['name'],
           },
-        },
+        ],
       },
     },
   },