Skip to content

Commit 0f23885

Browse files
MSDraoMSDrao
committed
Updated the Download map data changes
1 parent 729cad8 commit 0f23885

File tree

3 files changed

+112
-103
lines changed

3 files changed

+112
-103
lines changed

‎frontend/src/components/DataViewDrawer.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,18 @@
3030
<p>{{ totalModels }}</p>
3131
</v-card-text>
3232
</v-card>
33+
<v-card>
34+
<v-card-text>
35+
<DownloadMapData />
36+
</v-card-text>
37+
</v-card>
3338
</v-sheet>
3439
</template>
3540

3641
<script setup>
3742
import { ref } from 'vue'
3843
import { ENDPOINTS } from '../constants';
44+
import DownloadMapData from '@/components/DownloadMapData.vue';
3945
4046
let querying = ref(true)
4147

‎frontend/src/components/DownloadMapData.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<v-btn block @click="downloadMapData">Download Map Data</v-btn>
3+
</template>
4+
5+
<script setup>
6+
import { useMapStore } from '@/stores/map';
7+
import Papa from 'papaparse';
8+
9+
const mapStore = useMapStore()
10+
const renameColumnInCSV = {
11+
"figure num": "Figure Number",
12+
"citation citation": "Citation",
13+
"location long name": "Location Name",
14+
"location area km2": "Location Area [km^2]",
15+
"process taxonomies process": "Taxonomy Processes",
16+
"geol info": "Geological Info",
17+
"topo info": "Topographic Info",
18+
"num spatial zones": "Number of Spatial Zones",
19+
"spatial zone type spatial property": "Spatial Zone Type",
20+
"num temporal zones": "Number of Temporal Zones",
21+
"temporal zone type temporal property": "Temporal Zone Type",
22+
"model type name": "Model Type",
23+
"textmodel snipped": "Textmodel Snippet"
24+
}
25+
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']
26+
27+
function flattenItem(obj, parentKey = '', result = {}) {
28+
for (const key in obj) {
29+
if (Object.prototype.hasOwnProperty.call(obj, key)) {
30+
let newKey = parentKey ? `${parentKey} ${key}` : key;
31+
32+
// Convert column names as per requirement
33+
newKey = renamecsvColumn(newKey);
34+
35+
if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
36+
// Recursive call for nested objects
37+
flattenItem(obj[key], newKey, result);
38+
} else if (Array.isArray(obj[key])) {
39+
if (obj[key].every(item => typeof item === 'string' || typeof item === 'number')) {
40+
result[newKey] = obj[key].join(', ');
41+
} else {
42+
const arrayValues = {};
43+
obj[key].forEach(item => {
44+
for (const subKey in item) {
45+
if (Object.prototype.hasOwnProperty.call(item, subKey)) {
46+
if (!arrayValues[subKey]) {
47+
arrayValues[subKey] = [];
48+
}
49+
arrayValues[subKey].push(item[subKey]);
50+
}
51+
}
52+
});
53+
54+
for (const arrayKey in arrayValues) {
55+
const renamedValue = renamecsvColumn(`${newKey} ${arrayKey}`);
56+
if (csvColumns.includes(renamedValue))
57+
result[renamedValue] = arrayValues[arrayKey].join(', ');
58+
}
59+
}
60+
} else {
61+
if (csvColumns.includes(newKey))
62+
result[newKey] = obj[key];
63+
}
64+
}
65+
}
66+
return result;
67+
}
68+
69+
function flattenMapDataJSON(data) {
70+
const result = [];
71+
data.forEach(item => {
72+
// As per requirement only include properties, no need of geometry info
73+
result.push(flattenItem(item.properties));
74+
});
75+
return result;
76+
}
77+
78+
function downloadMapData() {
79+
const mapData = mapStore.currentFilteredData;
80+
const flattenedMapData = flattenMapDataJSON(mapData);
81+
82+
const csv = Papa.unparse(flattenedMapData, {
83+
columns: csvColumns
84+
});
85+
86+
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
87+
88+
const link = document.createElement('a');
89+
link.href = URL.createObjectURL(blob);
90+
link.setAttribute('download', 'data.csv');
91+
document.body.appendChild(link);
92+
link.click();
93+
document.body.removeChild(link);
94+
}
95+
function renamecsvColumn(name) {
96+
let newName = name.replaceAll("_", " ");
97+
newName = newName.replace(/\b\w/g, char => char.toLowerCase());
98+
if (renameColumnInCSV[newName]) {
99+
newName = renameColumnInCSV[newName];
100+
} else {
101+
newName = newName.replace(/\b\w/g, char => char.toUpperCase());
102+
}
103+
return newName;
104+
}
105+
</script>

‎frontend/src/views/MapView.vue‎

Lines changed: 1 addition & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
:icon="showDataDrawer ? mdiChevronRight : mdiChevronLeft" size="x-small">
1414
</v-btn>
1515
<v-col v-if="showFilterDrawer" :cols="3">
16-
<v-btn @click="downloadMapData()" class="w-100">Download Filtered Map Data</v-btn>
1716
<FilterDrawer @onFilter="onFilter"/>
1817
</v-col>
1918
<v-divider vertical></v-divider>
@@ -48,31 +47,14 @@ import DataViewDrawer from '@/components/DataViewDrawer.vue';
4847
import TheLeafletMap from '@/components/TheLeafletMap.vue';
4948
import { mdiChevronRight, mdiChevronLeft } from '@mdi/js'
5049
import { useMapStore } from '@/stores/map';
51-
import { useDisplay } from 'vuetify';
52-
import Papa from 'papaparse';
50+
import { useDisplay } from 'vuetify'
5351
5452
const { mdAndDown } = useDisplay()
5553
const mapStore = useMapStore()
5654
5755
const showFilterDrawer = ref(true)
5856
const showDataDrawer = ref(true)
5957
const dataDrawerRef = ref(null)
60-
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']
61-
62-
const renameColumnInCSV = {
63-
"figure num": "Figure Number",
64-
"citation citation": "Citation",
65-
"location long name": "Location Name",
66-
"location area km2": "Location Area [km^2]",
67-
"process taxonomies process": "Taxonomy Processes",
68-
"geol info": "Geological Info",
69-
"topo info": "Topographic Info",
70-
"num spatial zones": "Number of Spatial Zones",
71-
"spatial zone type spatial property": "Spatial Zone Type",
72-
"num temporal zones": "Number of Temporal Zones",
73-
"temporal zone type temporal property": "Temporal Zone Type",
74-
"model type name": "Model Type",
75-
}
7658
7759
const onFilter = (data) => {
7860
const filters = {
@@ -129,90 +111,6 @@ const translateData = () => {
129111
}
130112
}
131113
132-
function flattenItem(obj, parentKey = '', result = {}) {
133-
for (const key in obj) {
134-
if (Object.prototype.hasOwnProperty.call(obj, key)) {
135-
let newKey = parentKey ? `${parentKey} ${key}` : key;
136-
137-
// Convert column names as per requirement
138-
newKey = renamecsvColumn(newKey);
139-
140-
// Ignore columns as per requirement
141-
if (ignoreColumnInCSV.includes(newKey)) {
142-
continue;
143-
}
144-
145-
if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
146-
// Recursive call for nested objects
147-
flattenItem(obj[key], newKey, result);
148-
} else if (Array.isArray(obj[key])) {
149-
if (obj[key].every(item => typeof item === 'string' || typeof item === 'number')) {
150-
result[newKey] = obj[key].join(', ');
151-
} else {
152-
const arrayValues = {};
153-
obj[key].forEach(item => {
154-
for (const subKey in item) {
155-
// Ignore columns as per requirement
156-
if (ignoreColumnInCSV.includes(`${key}_${subKey}`)) {
157-
continue;
158-
}
159-
if (Object.prototype.hasOwnProperty.call(item, subKey)) {
160-
if (!arrayValues[subKey]) {
161-
arrayValues[subKey] = [];
162-
}
163-
arrayValues[subKey].push(item[subKey]);
164-
}
165-
}
166-
});
167-
for (const arrayKey in arrayValues) {
168-
result[renamecsvColumn(`${newKey} ${arrayKey}`)] = arrayValues[arrayKey].join(', ');
169-
}
170-
}
171-
} else {
172-
// Assign values directly
173-
result[newKey] = obj[key];
174-
}
175-
}
176-
}
177-
return result;
178-
}
179-
180-
function flattenJSON(data) {
181-
const result = [];
182-
data.forEach(item => {
183-
// As per requirement only include properties, not geometry
184-
result.push(flattenItem(item.properties));
185-
});
186-
return result;
187-
}
188-
189-
const downloadMapData = () => {
190-
const jsonData = mapStore.currentFilteredData;
191-
const flattenedData = flattenJSON(jsonData);
192-
193-
const csv = Papa.unparse(flattenedData, {});
194-
195-
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
196-
197-
const link = document.createElement('a');
198-
link.href = URL.createObjectURL(blob);
199-
link.setAttribute('download', 'data.csv');
200-
document.body.appendChild(link);
201-
link.click();
202-
document.body.removeChild(link);
203-
}
204-
205-
const renamecsvColumn = (name) => {
206-
let newName = name.replaceAll("_", " ");
207-
newName = newName.replace(/\b\w/g, char => char.toLowerCase());
208-
if (renameColumnInCSV[newName]) {
209-
newName = renameColumnInCSV[newName];
210-
} else {
211-
newName = newName.replace(/\b\w/g, char => char.toUpperCase());
212-
}
213-
return newName;
214-
}
215-
216114
217115
</script>
218116

0 commit comments

Comments
 (0)