Skip to content

Commit 57da49f

Browse files
cugarteblaircugarteblair
authored
Merge pull request #811 from SlideRuleEarth/carlos-dev4
Carlos dev4
2 parents e832422 + 593360a commit 57da49f

File tree

2 files changed

+210
-87
lines changed

2 files changed

+210
-87
lines changed

‎web-client/src/components/SrGenUserPresets.vue‎

Lines changed: 193 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,230 @@
11
<script setup lang="ts">
2-
import { ref,computed } from 'vue';
3-
import { useReqParamsStore } from '@/stores/reqParamsStore';
4-
import { useSlideruleDefaults } from '@/stores/defaultsStore';
5-
import { type SrPhoreal } from '@/types/slideruleDefaultsInterfaces';
6-
import { onMounted } from 'vue';
7-
import { createLogger } from '@/utils/logger';
2+
import { ref, computed, watch } from 'vue'
3+
import { useReqParamsStore } from '@/stores/reqParamsStore'
4+
import { useSlideruleDefaults } from '@/stores/defaultsStore'
5+
import { type SrPhoreal } from '@/types/slideruleDefaultsInterfaces'
6+
import { onMounted } from 'vue'
7+
import { createLogger } from '@/utils/logger'
88
9-
const logger = createLogger('SrGenUserPresets');
9+
const logger = createLogger('SrGenUserPresets')
1010
11-
const reqParameterStore = useReqParamsStore();
12-
const selectedBox = ref<number | null>(null);
11+
const reqParameterStore = useReqParamsStore()
12+
const selectedBox = ref<number | null>(null)
1313
14-
const boxes = computed(() => [
15-
{ id: 1, name: "ICESat-2 Surface Elevations", description: "For all surface types", image: "/SrGround.webp" },
16-
{ id: 2, name: "ICESat-2 Land Ice Sheet", description: "For ice sheets and glaciers", image: "/SrSeaIce.webp" },
17-
{ id: 3, name: "ICESat-2 Canopy Heights", description: "For land regions with vegetation", image: "/SrCanopy.webp" },
18-
{ id: 4, name: "ICESat-2 Coastal Bathymetry", description: "For shallow water coastal regions", image: "/SrOcean.webp" },
19-
{ id: 5, name: "ICESat-2 Geolocated Photons", description: "For raw photon cloud", image: "/SrNoise.webp" },
20-
{ id: 6, name: "ICESat-2 Inland Bodies of Water", description: "For inland bodies of water", image: "/SrInlandWater.webp" },
21-
{ id: 7, name: "GEDI Biomass Density", description: "For land regions with vegetation", image: "/SrCanopy.webp" },
22-
{ id: 8, name: "GEDI Elevations w/Canopy", description: "For elevation w/Canopy heights", image: "/SrCanopy.webp" },
23-
{ id: 9, name: "GEDI Geolocated Waveforms", description: "For raw waveform returns", image: "/SrNoise.webp" },
24-
]);
14+
// Function to sync selectedBox with current API from store
15+
const syncSelectedBoxFromStore = () => {
16+
const mission = reqParameterStore.getMissionValue()
17+
const api =
18+
mission === 'ICESat-2' ? reqParameterStore.getIceSat2API() : reqParameterStore.getGediAPI()
19+
20+
logger.debug('Syncing selectedBox from store', { mission, api })
21+
22+
// Map API to box ID
23+
if (mission === 'ICESat-2') {
24+
switch (api) {
25+
case 'atl03x-surface':
26+
selectedBox.value = 1 // ICESat-2 Surface Elevations
27+
break
28+
case 'atl06sp':
29+
selectedBox.value = 2 // ICESat-2 Land Ice Sheet
30+
break
31+
case 'atl03x-phoreal':
32+
selectedBox.value = 3 // ICESat-2 Canopy Heights
33+
break
34+
case 'atl24x':
35+
selectedBox.value = 4 // ICESat-2 Coastal Bathymetry
36+
break
37+
case 'atl03x':
38+
selectedBox.value = 5 // ICESat-2 Geolocated Photons
39+
break
40+
case 'atl13x':
41+
selectedBox.value = 6 // ICESat-2 Inland Bodies of Water
42+
break
43+
default:
44+
selectedBox.value = null
45+
}
46+
} else if (mission === 'GEDI') {
47+
switch (api) {
48+
case 'gedi04ap':
49+
selectedBox.value = 7 // GEDI Biomass Density
50+
break
51+
case 'gedi02ap':
52+
selectedBox.value = 8 // GEDI Elevations w/Canopy
53+
break
54+
case 'gedi01bp':
55+
selectedBox.value = 9 // GEDI Geolocated Waveforms
56+
break
57+
default:
58+
selectedBox.value = null
59+
}
60+
} else {
61+
selectedBox.value = null
62+
}
2563
64+
logger.debug('Synced selectedBox', { selectedBox: selectedBox.value })
65+
}
66+
67+
const boxes = computed(() => [
68+
{
69+
id: 1,
70+
name: 'ICESat-2 Surface Elevations',
71+
description: 'For all surface types',
72+
image: '/SrGround.webp'
73+
},
74+
{
75+
id: 2,
76+
name: 'ICESat-2 Land Ice Sheet',
77+
description: 'For ice sheets and glaciers',
78+
image: '/SrSeaIce.webp'
79+
},
80+
{
81+
id: 3,
82+
name: 'ICESat-2 Canopy Heights',
83+
description: 'For land regions with vegetation',
84+
image: '/SrCanopy.webp'
85+
},
86+
{
87+
id: 4,
88+
name: 'ICESat-2 Coastal Bathymetry',
89+
description: 'For shallow water coastal regions',
90+
image: '/SrOcean.webp'
91+
},
92+
{
93+
id: 5,
94+
name: 'ICESat-2 Geolocated Photons',
95+
description: 'For raw photon cloud',
96+
image: '/SrNoise.webp'
97+
},
98+
{
99+
id: 6,
100+
name: 'ICESat-2 Inland Bodies of Water',
101+
description: 'For inland bodies of water',
102+
image: '/SrInlandWater.webp'
103+
},
104+
{
105+
id: 7,
106+
name: 'GEDI Biomass Density',
107+
description: 'For land regions with vegetation',
108+
image: '/SrCanopy.webp'
109+
},
110+
{
111+
id: 8,
112+
name: 'GEDI Elevations w/Canopy',
113+
description: 'For elevation w/Canopy heights',
114+
image: '/SrCanopy.webp'
115+
},
116+
{
117+
id: 9,
118+
name: 'GEDI Geolocated Waveforms',
119+
description: 'For raw waveform returns',
120+
image: '/SrNoise.webp'
121+
}
122+
])
26123
27124
const selectBox = (boxId: number) => {
28-
selectedBox.value = boxId;
29-
const selectedBoxInfo = boxes.value.find(box => box.id === boxId);
125+
selectedBox.value = boxId
126+
const selectedBoxInfo = boxes.value.find((box) => box.id === boxId)
30127
if (!selectedBoxInfo) {
31-
logger.error('Unknown selection', { boxId });
32-
return;
128+
logger.error('Unknown selection', { boxId })
129+
return
33130
}
34131
// initial setup
35-
let savedPoly = reqParameterStore.poly;
36-
let savedConvexHull = reqParameterStore.convexHull;
37-
reqParameterStore.reset();
38-
reqParameterStore.setUseSurfaceFitAlgorithm(false);
39-
reqParameterStore.setEnablePhoReal(false);
132+
let savedPoly = reqParameterStore.poly
133+
let savedConvexHull = reqParameterStore.convexHull
134+
reqParameterStore.reset()
135+
reqParameterStore.setUseSurfaceFitAlgorithm(false)
136+
reqParameterStore.setEnablePhoReal(false)
40137
41138
if (selectedBoxInfo?.name) {
42-
logger.debug('Box selected', { name: selectedBoxInfo.name });
139+
logger.debug('Box selected', { name: selectedBoxInfo.name })
43140
switch (selectedBoxInfo.name) {
44141
case 'ICESat-2 Surface Elevations':
45-
reqParameterStore.setMissionValue('ICESat-2');
46-
reqParameterStore.setIceSat2API('atl03x-surface');
47-
reqParameterStore.setUseSurfaceFitAlgorithm(true);
48-
break;
142+
reqParameterStore.setMissionValue('ICESat-2')
143+
reqParameterStore.setIceSat2API('atl03x-surface')
144+
reqParameterStore.setUseSurfaceFitAlgorithm(true)
145+
break
49146
case 'ICESat-2 Land Ice Sheet':
50-
reqParameterStore.setMissionValue('ICESat-2');
51-
reqParameterStore.setIceSat2API('atl06sp');
52-
break;
147+
reqParameterStore.setMissionValue('ICESat-2')
148+
reqParameterStore.setIceSat2API('atl06sp')
149+
break
53150
case 'ICESat-2 Canopy Heights':
54-
reqParameterStore.setMissionValue('ICESat-2');
55-
reqParameterStore.setIceSat2API('atl03x-phoreal');
56-
reqParameterStore.setEnablePhoReal(true);
57-
break;
151+
reqParameterStore.setMissionValue('ICESat-2')
152+
reqParameterStore.setIceSat2API('atl03x-phoreal')
153+
reqParameterStore.setEnablePhoReal(true)
154+
break
58155
case 'ICESat-2 Coastal Bathymetry':
59-
reqParameterStore.setMissionValue('ICESat-2');
60-
reqParameterStore.setIceSat2API('atl24x');
61-
break;
156+
reqParameterStore.setMissionValue('ICESat-2')
157+
reqParameterStore.setIceSat2API('atl24x')
158+
break
62159
case 'ICESat-2 Geolocated Photons':
63-
reqParameterStore.setMissionValue('ICESat-2');
64-
reqParameterStore.setIceSat2API('atl03x');
65-
break;
160+
reqParameterStore.setMissionValue('ICESat-2')
161+
reqParameterStore.setIceSat2API('atl03x')
162+
break
66163
case 'ICESat-2 Inland Bodies of Water':
67164
//console.log("ICESat-2 Inland Bodies of Water selected.");
68165
// This is a special case, it uses the atl13x API
69-
reqParameterStore.setMissionValue('ICESat-2');
70-
reqParameterStore.setIceSat2API('atl13x');
71-
break;
166+
reqParameterStore.setMissionValue('ICESat-2')
167+
reqParameterStore.setIceSat2API('atl13x')
168+
break
72169
case 'GEDI Biomass Density':
73-
reqParameterStore.setMissionValue('GEDI');
74-
reqParameterStore.setGediAPI('gedi04ap');
75-
break;
170+
reqParameterStore.setMissionValue('GEDI')
171+
reqParameterStore.setGediAPI('gedi04ap')
172+
break
76173
case 'GEDI Elevations w/Canopy':
77-
reqParameterStore.setMissionValue('GEDI');
78-
reqParameterStore.setGediAPI('gedi02ap');
79-
break;
174+
reqParameterStore.setMissionValue('GEDI')
175+
reqParameterStore.setGediAPI('gedi02ap')
176+
break
80177
case 'GEDI Geolocated Waveforms':
81-
reqParameterStore.setMissionValue('GEDI');
82-
reqParameterStore.setGediAPI('gedi01bp');
83-
break;
178+
reqParameterStore.setMissionValue('GEDI')
179+
reqParameterStore.setGediAPI('gedi01bp')
180+
break
84181
default:
85-
logger.error('Unknown selection', { name: selectedBoxInfo.name });
86-
break;
182+
logger.error('Unknown selection', { name: selectedBoxInfo.name })
183+
break
87184
}
88185
// console.log("GenUserOptions selection complete. BEFORE reqParameterStore.poly:", reqParameterStore.poly);
89186
// console.log("GenUserOptions selection complete. BEFORE reqParameterStore.missionValue:", reqParameterStore.missionValue);
90187
// console.log("GenUserOptions selection complete. BEFORE reqParameterStore.iceSat2SelectedAPI:", reqParameterStore.iceSat2SelectedAPI);
91-
if(!((reqParameterStore.getIceSat2API() == 'atl13x') &&
92-
(reqParameterStore.getMissionValue() == 'ICESat-2'))){
93-
reqParameterStore.setPoly(savedPoly);
94-
reqParameterStore.setConvexHull(savedConvexHull);
188+
if (
189+
!(
190+
reqParameterStore.getIceSat2API() == 'atl13x' &&
191+
reqParameterStore.getMissionValue() == 'ICESat-2'
192+
)
193+
) {
194+
reqParameterStore.setPoly(savedPoly)
195+
reqParameterStore.setConvexHull(savedConvexHull)
95196
} else {
96197
// If the user selected the atl13x API, we need to reset the polygon and convex hull
97-
reqParameterStore.setPoly([]);
98-
reqParameterStore.setConvexHull([]);
198+
reqParameterStore.setPoly([])
199+
reqParameterStore.setConvexHull([])
99200
}
100201
}
101202
//console.log("GenUserOptions selection complete. AFTER reqParameterStore.poly:", reqParameterStore.poly);
102-
};
103-
let defaultPhoreal = {} as SrPhoreal;
203+
}
204+
let defaultPhoreal = {} as SrPhoreal
104205
105206
onMounted(() => {
106-
defaultPhoreal = useSlideruleDefaults().getNestedMissionDefault('ICESat-2', 'phoreal') as SrPhoreal;
107-
logger.debug('Default PhoReal', { defaultPhoreal });
108-
});
207+
defaultPhoreal = useSlideruleDefaults().getNestedMissionDefault(
208+
'ICESat-2',
209+
'phoreal'
210+
) as SrPhoreal
211+
logger.debug('Default PhoReal', { defaultPhoreal })
212+
213+
// Sync selectedBox with current store state on mount
214+
syncSelectedBoxFromStore()
215+
})
216+
217+
// Watch for API changes and sync selectedBox
218+
watch(
219+
() => [
220+
reqParameterStore.getMissionValue(),
221+
reqParameterStore.getIceSat2API(),
222+
reqParameterStore.getGediAPI()
223+
],
224+
() => {
225+
syncSelectedBoxFromStore()
226+
}
227+
)
109228
</script>
110229

111230
<template>
@@ -114,7 +233,7 @@ onMounted(() => {
114233
v-for="box in boxes"
115234
:key="box.id"
116235
class="sr-radio-box"
117-
:class="{ 'selected': selectedBox === box.id }"
236+
:class="{ selected: selectedBox === box.id }"
118237
@click="selectBox(box.id)"
119238
>
120239
<img :src="box.image" :alt="box.name" class="sr-radio-box-image" />
@@ -146,7 +265,7 @@ onMounted(() => {
146265
147266
.sr-radio-box.selected {
148267
background-color: #3a3a3a;
149-
border-color: #A4DEEB;
268+
border-color: #a4deeb;
150269
}
151270
152271
.sr-radio-box-image {

‎web-client/src/components/SrMap.vue‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1575,19 +1575,23 @@ watch(
15751575
}
15761576
}
15771577
)
1578-
watch(showBathymetryFeatures, (newValue) => {
1579-
//console.log(`SrMap watch showBathymetryFeatures changed to ${newValue} defaultBathymetryFeaturesLoaded: ${defaultBathymetryFeaturesLoaded.value}`);
1580-
if (defaultBathymetryFeaturesLoaded.value === false) {
1581-
void loadDefaultBathymetryFeatures()
1582-
}
1583-
if (newValue) {
1584-
// Show bathymetry features
1585-
bathymetryFeaturesVectorLayer.setVisible(true)
1586-
} else {
1587-
// Hide bathymetry features
1588-
bathymetryFeaturesVectorLayer.setVisible(false)
1589-
}
1590-
})
1578+
watch(
1579+
showBathymetryFeatures,
1580+
(newValue) => {
1581+
//console.log(`SrMap watch showBathymetryFeatures changed to ${newValue} defaultBathymetryFeaturesLoaded: ${defaultBathymetryFeaturesLoaded.value}`);
1582+
if (defaultBathymetryFeaturesLoaded.value === false) {
1583+
void loadDefaultBathymetryFeatures()
1584+
}
1585+
if (newValue) {
1586+
// Show bathymetry features
1587+
bathymetryFeaturesVectorLayer.setVisible(true)
1588+
} else {
1589+
// Hide bathymetry features
1590+
bathymetryFeaturesVectorLayer.setVisible(false)
1591+
}
1592+
},
1593+
{ immediate: true }
1594+
)
15911595
</script>
15921596

15931597
<template>

0 commit comments

Comments
 (0)