Skip to content

Commit

Permalink
Added download map data functionality
Browse files Browse the repository at this point in the history
MSDrao committed Jan 9, 2025
1 parent c5a9b5f commit 9ee45e8
Showing 4 changed files with 118 additions and 1 deletion.
1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@
"leaflet-easybutton": "^2.4.0",
"leaflet-iconmaterial": "^1.1.0",
"pinia": "^2.1.6",
"papaparse": "^5.4.1",
"swagger-ui": "^5.10.5",
"vee-validate": "^4.13.2",
"vite-plugin-vuetify": "^1.0.2",
6 changes: 6 additions & 0 deletions frontend/src/components/DataViewDrawer.vue
Original file line number Diff line number Diff line change
@@ -30,12 +30,18 @@
<p>{{ totalModels }}</p>
</v-card-text>
</v-card>
<v-card>
<v-card-text>
<DownloadMapData />
</v-card-text>
</v-card>
</v-sheet>
</template>

<script setup>
import { ref } from 'vue'
import { ENDPOINTS } from '../constants';
import DownloadMapData from '@/components/DownloadMapData.vue';
let querying = ref(true)
105 changes: 105 additions & 0 deletions frontend/src/components/DownloadMapData.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<template>
<v-btn block @click="downloadMapData">Download Map Data</v-btn>
</template>

<script setup>
import { useMapStore } from '@/stores/map';
import Papa from 'papaparse';
const mapStore = useMapStore()
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",
"textmodel snipped": "Textmodel Snippet"
}
const csvColumns = ['Figure Number', 'Figure Caption', 'Fgure Url', 'Textmodel Section Number', 'Textmodel Section Name', 'Textmodel Page Number', 'Textmodel Snippet', 'Citation', 'Citation Url', 'Citation Attribution', 'Citation Attribution Url', 'Location Name', 'Location Country', 'Location Area [km^2]', 'Taxonomy Processes', 'Vegetation Info', 'Soil Info', 'Geological Info', 'Topographic Info', 'Uncertainty Info', 'Other Info', 'Number of Spatial Zones', 'Spatial Zone Type', 'Number of Temporal Zones', 'Temporal Zone Type', 'Model Type']
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);
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) {
if (Object.prototype.hasOwnProperty.call(item, subKey)) {
if (!arrayValues[subKey]) {
arrayValues[subKey] = [];
}
arrayValues[subKey].push(item[subKey]);
}
}
});
for (const arrayKey in arrayValues) {
const renamedValue = renamecsvColumn(`${newKey} ${arrayKey}`);
if (csvColumns.includes(renamedValue))
result[renamedValue] = arrayValues[arrayKey].join(', ');
}
}
} else {
if (csvColumns.includes(newKey))
result[newKey] = obj[key];
}
}
}
return result;
}
function flattenMapDataJSON(data) {
const result = [];
data.forEach(item => {
// As per requirement only include properties, no need of geometry info
result.push(flattenItem(item.properties));
});
return result;
}
function downloadMapData() {
const mapData = mapStore.currentFilteredData;
const flattenedMapData = flattenMapDataJSON(mapData);
const csv = Papa.unparse(flattenedMapData, {
columns: csvColumns
});
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);
}
function 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>
7 changes: 6 additions & 1 deletion frontend/src/stores/map.js
Original file line number Diff line number Diff line change
@@ -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>`
@@ -80,6 +81,8 @@ export const useMapStore = defineStore('map', () => {
maxHeight: 300,
keepInView: true
})

currentFilteredData.value.push(feature);
}

const pointToLayer = (feature, latlng) => {
@@ -121,6 +124,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)
@@ -155,6 +159,7 @@ export const useMapStore = defineStore('map', () => {
mapLoaded,
fetchPerceptualModelsGeojson,
filterFeatures,
resetFilter
resetFilter,
currentFilteredData
}
})

0 comments on commit 9ee45e8

Please sign in to comment.