Added download mep data functionality using papaparse npm package

frontend/package.json

@@ -20,6 +20,7 @@
     "leaflet": "^1.9.4",
     "leaflet-easybutton": "^2.4.0",
     "leaflet-iconmaterial": "^1.1.0",
+    "papaparse": "^5.4.1",
     "pinia": "^2.1.6",
     "swagger-ui": "^5.10.5",
     "vee-validate": "^4.13.2",

frontend/src/stores/map.js

@@ -10,6 +10,7 @@ export const useMapStore = defineStore('map', () => {
   const modelFeatures = ref({})
   const perceptualModelsGeojson = ref([])
   const mapLoaded = ref(false)
+  let currentFilteredData = ref([])
 
   function onEachFeature(feature, layer) {
     let content = `<h3>Perceptual model of <strong>${feature.properties.location.long_name}</strong></h3>`
@@ -74,12 +75,12 @@ export const useMapStore = defineStore('map', () => {
       content += '<h4>Temporal zone:</h4>'
       content += `${feature.properties.temporal_zone_type.temporal_property}`
     }
-
     layer.bindPopup(content, {
       maxWidth: 400,
       maxHeight: 300,
       keepInView: true
     })
+    currentFilteredData.value.push(feature);
   }
 
   const pointToLayer = (feature, latlng) => {
@@ -121,6 +122,7 @@ export const useMapStore = defineStore('map', () => {
   }
 
   function filterFeatures(filterFunction) {
+    currentFilteredData.value =[];
     // TODO enable multiple filters at the same time
     // first remove all layers
     layerGroup.value.removeLayer(modelFeatures.value)
@@ -134,6 +136,7 @@ export const useMapStore = defineStore('map', () => {
       },
       pointToLayer: pointToLayer
     })
+
     // add filtered features
     layerGroup.value.addLayer(modelFeatures.value)
   }
@@ -155,6 +158,7 @@ export const useMapStore = defineStore('map', () => {
     mapLoaded,
     fetchPerceptualModelsGeojson,
     filterFeatures,
-    resetFilter
+    resetFilter,
+    currentFilteredData
   }
 })

frontend/src/views/MapView.vue

@@ -13,6 +13,7 @@
                 :icon="showDataDrawer ? mdiChevronRight : mdiChevronLeft" size="x-small">
             </v-btn>
             <v-col v-if="showFilterDrawer" :cols="3">
+                <v-btn @click="downloadMapData()" class="w-100">Download Filtered Map Data</v-btn>
                 <FilterDrawer @onFilter="onFilter"/>
             </v-col>
             <v-divider vertical></v-divider>
@@ -47,14 +48,31 @@ import DataViewDrawer from '@/components/DataViewDrawer.vue';
 import TheLeafletMap from '@/components/TheLeafletMap.vue';
 import { mdiChevronRight, mdiChevronLeft } from '@mdi/js'
 import { useMapStore } from '@/stores/map';
-import { useDisplay } from 'vuetify'
+import { useDisplay } from 'vuetify';
+import Papa from 'papaparse';
 
 const { mdAndDown } = useDisplay()
 const mapStore = useMapStore()
 
 const showFilterDrawer = ref(true)
 const showDataDrawer = ref(true)
 const dataDrawerRef = ref(null)
+const ignoreColumnInCSV = [  'Type', 'Id', 'Location Id', 'Spatialzone Id', 'Temporalzone Id', 'Three D Info',  'Process Taxonomies Identifier', 'Model Type Id', 'Process Taxonomies Process Level',  'Process Taxonomies Function Id', 'Process Taxonomies Id', 'Process Taxonomies Process Alt Name Id',  'Spatial Zone Type Id', 'Temporal Zone Type Id', 'Location Lon', 'Location Name',  'Location Lat', 'Location Pt','process_taxonomies_identifier','process_taxonomies_process_level','process_taxonomies_function_id','process_taxonomies_id','process_taxonomies_process_alt_name_id']
+
+const renameColumnInCSV = {
+"figure num": "Figure Number",
+"citation citation": "Citation",
+"location long name": "Location Name",
+"location area km2": "Location Area [km^2]",
+"process taxonomies process": "Taxonomy Processes",
+"geol info": "Geological Info",
+"topo info": "Topographic Info",
+"num spatial zones": "Number of Spatial Zones",
+"spatial zone type spatial property": "Spatial Zone Type",
+"num temporal zones": "Number of Temporal Zones",
+"temporal zone type temporal property": "Temporal Zone Type",
+"model type name": "Model Type",
+}
 
 const onFilter = (data) => {
     const filters = {
@@ -111,6 +129,90 @@ const translateData = () => {
     }
 }
 
+function flattenItem(obj, parentKey = '', result = {}) {
+    for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            let newKey = parentKey ? `${parentKey} ${key}` : key;
+
+            // Convert column names as per requirement
+            newKey = renamecsvColumn(newKey);
+
+            // Ignore columns as per requirement
+            if (ignoreColumnInCSV.includes(newKey)) {
+                continue;
+            }
+
+            if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+                // Recursive call for nested objects
+                flattenItem(obj[key], newKey, result);
+            } else if (Array.isArray(obj[key])) {
+                if (obj[key].every(item => typeof item === 'string' || typeof item === 'number')) {
+                    result[newKey] = obj[key].join(', ');
+                } else {
+                    const arrayValues = {};
+                    obj[key].forEach(item => {
+                        for (const subKey in item) {
+                            // Ignore columns as per requirement
+                            if (ignoreColumnInCSV.includes(`${key}_${subKey}`)) {
+                                continue;
+                            }
+                            if (Object.prototype.hasOwnProperty.call(item, subKey)) {
+                                if (!arrayValues[subKey]) {
+                                    arrayValues[subKey] = [];
+                                }
+                                arrayValues[subKey].push(item[subKey]);
+                            }
+                        }
+                    });
+                    for (const arrayKey in arrayValues) {
+                        result[renamecsvColumn(`${newKey} ${arrayKey}`)] = arrayValues[arrayKey].join(', ');
+                    }
+                }
+            } else {
+                // Assign values directly
+                result[newKey] = obj[key];
+            }
+        }
+    }
+    return result;
+}
+
+function flattenJSON(data) {
+    const result = [];
+      data.forEach(item => {
+        // As per requirement only include properties, not geometry
+        result.push(flattenItem(item.properties));
+      });
+    return result;
+}
+
+const downloadMapData = () => {
+    const jsonData = mapStore.currentFilteredData;
+    const flattenedData = flattenJSON(jsonData);
+
+    const csv = Papa.unparse(flattenedData, {});
+
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.setAttribute('download', 'data.csv');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
+
+const renamecsvColumn = (name) => {
+    let newName = name.replaceAll("_", " ");
+    newName = newName.replace(/\b\w/g, char => char.toLowerCase());
+    if (renameColumnInCSV[newName]) {
+        newName = renameColumnInCSV[newName];
+    } else {
+        newName = newName.replace(/\b\w/g, char => char.toUpperCase());
+    }
+    return newName;
+}
+
 
 </script>