Skip to content

Commit

Permalink
Updated the Download map data changes
Browse files Browse the repository at this point in the history
  • Loading branch information
MSDrao committed Jan 9, 2025
1 parent 729cad8 commit 0f23885
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 103 deletions.
6 changes: 6 additions & 0 deletions frontend/src/components/DataViewDrawer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
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>
104 changes: 1 addition & 103 deletions frontend/src/views/MapView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
: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>
Expand Down Expand Up @@ -48,31 +47,14 @@ 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 Papa from 'papaparse';
import { useDisplay } from 'vuetify'
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 = {
Expand Down Expand Up @@ -129,90 +111,6 @@ 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>

Expand Down

0 comments on commit 0f23885

Please sign in to comment.