Minor improvements

Author: m-mohr

src/components/MapComponent.vue

@@ -103,11 +103,10 @@ defineExpose({
   <div class="map-wrapper">
     <div id="map" class="map-container"></div>
 
-    <DataCabinet v-if="map" :map="map as Map" :areaValues="areaValues" />
+    <DataCabinet v-if="map" :areaValues="areaValues" />
 
     <ProcessingResults
       v-if="geoJsonResults.length > 0 || projects.length > 0"
-      :map="map as Map"
       :geoJsonResults="geoJsonResults"
       @clearResults="clearResults"
     />

src/components/ProcessingResults.vue

@@ -12,7 +12,7 @@
           :icon="mdiChevronDown"
         >
         </v-icon>
-        <span class="text-white title"> Results ({{ geoJsonResults.length }}) </span>
+        <span class="text-white title">Results ({{ geoJsonResults.length }})</span>
       </div>
       <span v-else class="text-white title">Results</span>
       <v-spacer />
@@ -102,7 +102,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, onBeforeUnmount, computed, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import useMap from '../composables/useMap'
 import useNotifier from '../composables/useNotifier'
 import useAreaOfInterest from '../composables/useAreaOfInterest'
@@ -137,7 +137,20 @@ const hasMoreResults = computed(() => {
 
 watch(
   () => props.geoJsonResults,
-  (results) => (isOpen.value = results.length > 0),
+  (results) => {
+    const hasResults = results.length > 0
+    isOpen.value = hasResults
+    //
+    if (!hasResults) {
+      selectedFeature.value = null
+    }
+    // Map click handler to detect feature clicks and show properties
+    if (map.value) {
+      const action = hasResults ? 'on' : 'un'
+      map.value[action]('singleclick', handleMapClick)
+    }
+  },
+  { immediate: true },
 )
 
 const sortedResults = computed(() => {
@@ -278,24 +291,6 @@ const fitMapToResult = (result: Feature) => {
   fitToExtent(map.value!, extent, null)
 }
 
-onMounted(() => {
-  // Add map click handler to detect feature clicks and show properties
-  if (map.value) {
-    map.value.on('singleclick', handleMapClick)
-  }
-})
-
-onBeforeUnmount(() => {
-  selectedFeature.value = null
-})
-
-// Clean up map click handler when component is unmounted
-onUnmounted(() => {
-  if (map.value) {
-    map.value.un('singleclick', handleMapClick)
-  }
-})
-
 const clearResultsHandler = () => {
   // Clear results and zoom back to S2 grid
   clearResults(map.value!)

src/components/ProjectSelectionDialog.vue

@@ -1,20 +1,31 @@
 <template lang="html">
-  <v-dialog v-if="projects.length > 0" width="auto" max-height="500">
-    <template v-slot:activator="{ props: activatorProps }">
-      <v-btn variant="outlined" density="comfortable" color="primary" v-bind="activatorProps">
+  <v-dialog
+    v-if="projects.length > 0"
+    v-model="isActive"
+    width="auto"
+    max-height="70%"
+    max-width="50%"
+    min-width="300px"
+  >
+    <template #activator="{ props: activatorProps }">
+      <v-btn
+        variant="outlined"
+        color="primary"
+        size="small"
+        class="pa-0"
+        title="Show previous results from batch processing"
+        v-bind="activatorProps"
+      >
         Load
       </v-btn>
     </template>
-    <template v-slot:default="{ isActive }">
+    <template #default>
       <v-card title="Load Project">
         <v-list density="compact" color="transparent" class="pa-0">
           <v-list-item
             v-for="project in sortedProjects"
             :key="project"
-            @click.stop="
-              queryProcess(project)
-              isActive.value = false
-            "
+            @click.prevent="queryProcess(project)"
           >
             <v-label class="text-capitalize mb-1">{{ project }}</v-label>
           </v-list-item>
@@ -23,26 +34,33 @@
         <v-card-actions>
           <v-spacer></v-spacer>
 
-          <v-btn text="Close Dialog" @click="isActive.value = false"></v-btn>
+          <v-btn text="Close" @click="closeDialog"></v-btn>
         </v-card-actions>
       </v-card>
     </template>
   </v-dialog>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import useProcessing from '../composables/useProcessing'
 import useMap from '../composables/useMap'
 
 const { projects, loadProject } = useProcessing()
 const { displayGeoJSON, fitMapToBbox } = useMap()
 
+const isActive = ref(false)
+
 const sortedProjects = computed(() => {
   return projects.value.slice().reverse()
 })
 
+const closeDialog = () => {
+  isActive.value = false
+}
+
 const queryProcess = async (id: string) => {
+  closeDialog()
   const polygons = await loadProject(id)
   displayGeoJSON(polygons)
   fitMapToBbox(polygons.bbox)