Merge pull request #267 from fieldsoftheworld/hotfixes

Author: isaaccorley

src/components/GeocodingSearch.vue

@@ -2,7 +2,7 @@
 import { ref, shallowRef, watch } from 'vue'
 import { debounce } from 'vuetify/lib/util/helpers.mjs'
 import type { PlaceResult } from '../composables/useAreaOfInterest'
-import { mdiHelpCircleOutline } from '@mdi/js'
+import { mdiInformationOutline } from '@mdi/js'
 
 const emit = defineEmits<{
   (e: 'location-selected', place: PlaceResult): void
@@ -58,6 +58,8 @@ watch(
 const onLocationSelected = (item: { value: PlaceResult; title: string } | null) => {
   if (item) {
     emit('location-selected', item.value)
+    placeSearch.value = ''
+    suggestedPlaces.value = []
   }
 }
 </script>
@@ -69,16 +71,17 @@ const onLocationSelected = (item: { value: PlaceResult; title: string } | null)
       v-model:search="placeSearch"
       :loading="isLoadingPlaces"
       :items="suggestedPlaces"
-      label="Search for a place"
+      label="Search a place or address…"
       item-title="title"
       return-object
       hide-details
       dense
       variant="outlined"
+      attach
     ></v-autocomplete>
     <v-menu open-on-hover :close-on-content-click="false" max-width="400">
       <template #activator="{ props }">
-        <v-icon class="ml-1" :icon="mdiHelpCircleOutline" size="x-small" v-bind="props"></v-icon>
+        <v-icon class="ml-1" :icon="mdiInformationOutline" size="x-small" v-bind="props"></v-icon>
       </template>
       <v-sheet class="pa-3 text-body-2">
         Geocoding provided by Nominatim.<br />

src/components/GlobalDataPanel.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { mdiHelpCircleOutline } from '@mdi/js'
+import { computed } from 'vue'
+import { mdiInformationOutline } from '@mdi/js'
 import useSettings from '../composables/useSettings'
 import useMap from '../composables/useMap'
+import { getEffectiveCloudlessYear } from '../layers/S2-Cloudless-Layer'
 import useAreaOfInterest from '../composables/useAreaOfInterest'
 import type { PlaceResult } from '../composables/useAreaOfInterest'
 import useNotifier from '../composables/useNotifier'
@@ -12,6 +14,10 @@ import MapLegend from './MapLegend.vue'
 
 const { settings } = useSettings()
 const { map } = useMap()
+
+const basemapYearMismatch = computed(
+  () => settings.value.year !== getEffectiveCloudlessYear(settings.value.year),
+)
 const { fitToExtent } = useAreaOfInterest()
 const { showError } = useNotifier()
 useDownloadGrid()
@@ -60,6 +66,16 @@ const handleLocationSelected = (place: PlaceResult) => {
           <v-radio label="2024" :value="2024"></v-radio>
           <v-radio label="2025" :value="2025"></v-radio>
         </v-radio-group>
+        <v-alert
+          v-if="basemapYearMismatch"
+          type="warning"
+          variant="tonal"
+          density="compact"
+          class="mt-2"
+        >
+          No basemap is available for {{ settings.year }}. Showing the
+          {{ getEffectiveCloudlessYear(settings.year) }} basemap instead.
+        </v-alert>
         <h3 class="group">Confidence Threshold: {{ settings.threshold }}%</h3>
         <v-slider
           v-model.number="settings.threshold"
@@ -86,7 +102,7 @@ const handleLocationSelected = (place: PlaceResult) => {
           <h3>Download Data</h3>
           <v-menu open-on-hover :close-on-content-click="false" max-width="400">
             <template #activator="{ props }">
-              <v-icon :icon="mdiHelpCircleOutline" size="x-small" v-bind="props"></v-icon>
+              <v-icon :icon="mdiInformationOutline" size="x-small" v-bind="props"></v-icon>
             </template>
             <v-sheet class="pa-3 text-body-2">
               <p class="pb-2">

src/components/MapComponent.vue

@@ -49,11 +49,25 @@ onMounted(async () => {
     layers: [createLabelLayer()],
     view: new View({
       maxResolution: createXYZ({ tileSize: 512 }).getResolution(0), // use Mapbox/MapLibre compatible resolutions
+      maxZoom: 16,
       center: [0, 0],
       zoom: 1,
     }),
   })
 
+  // Initialize the cloudless base layer
+  initCloudlessLayer()
+
+  // Initialize layers
+  updateLayers()
+
+  addMapClickHandler(map.value as Map, areaValues.value)
+  map.value.on('singleclick', handleMapClick)
+  // Add scale bar
+  map.value.addControl(new ScaleLine())
+  // Setup permalink functionality
+  setupPermalink(map)
+
   // Get area values and models from API
   try {
     const token = generateJWT()
@@ -85,22 +99,6 @@ onMounted(async () => {
   } catch (error: any) {
     critical.value = `Can't connect to server: ${error?.message || error}`
   }
-
-  // Add layers after map is initialized
-  if (map.value) {
-    // Initialize the cloudless base layer
-    initCloudlessLayer()
-
-    // Initialize layers
-    updateLayers()
-
-    addMapClickHandler(map.value as Map, areaValues.value)
-    map.value.on('singleclick', handleMapClick)
-    // Add scale bar
-    map.value.addControl(new ScaleLine())
-    // Setup permalink functionality
-    setupPermalink(map)
-  }
 })
 
 // Expose methods to parent components

src/components/ProcessingPanel.vue

@@ -12,7 +12,7 @@ import useAreaOfInterest from '../composables/useAreaOfInterest'
 import useProcessingMode from '../composables/useProcessingMode'
 import useMap from '../composables/useMap'
 import {
-  mdiHelpCircleOutline,
+  mdiInformationOutline,
   mdiCheckBold,
   mdiExclamationThick,
   mdiClose,
@@ -23,6 +23,7 @@ import TilePreview from './TilePreview.vue'
 import GeocodingSearch from './GeocodingSearch.vue'
 import useStacLayer from '../composables/useStacLayer'
 import { debounce } from 'vuetify/lib/util/helpers.mjs'
+import { getEffectiveCloudlessYear } from '../layers/S2-Cloudless-Layer'
 
 const emit = defineEmits<{
   (e: 'workStateChanged', isWorking: boolean): void
@@ -85,6 +86,10 @@ const hasLoadedMore = ref(false)
 const sceneSelectionStatus = ref<boolean | null>(null)
 const sceneYears = Array.from({ length: 10 }, (_, i) => new Date().getFullYear() - i)
 
+const basemapYearMismatch = computed(
+  () => settings.value.year !== getEffectiveCloudlessYear(settings.value.year),
+)
+
 const isSelectingScenes = computed(
   () => sceneSelectionStatus.value === null && settings.value.autoSceneSelection,
 )
@@ -475,7 +480,7 @@ defineExpose({ openModelSelection })
                   <template #activator="{ props }">
                     <v-icon
                       class="ml-1"
-                      :icon="mdiHelpCircleOutline"
+                      :icon="mdiInformationOutline"
                       size="x-small"
                       v-bind="props"
                     ></v-icon>
@@ -674,6 +679,15 @@ defineExpose({ openModelSelection })
             </v-col>
           </v-row>
 
+          <v-row v-if="basemapYearMismatch">
+            <v-col>
+              <v-alert type="warning" variant="tonal" density="compact">
+                No basemap is available for {{ settings.year }}. Showing the
+                {{ getEffectiveCloudlessYear(settings.year) }} basemap instead.
+              </v-alert>
+            </v-col>
+          </v-row>
+
           <v-row>
             <v-col cols="6">
               <v-select

src/components/ProcessingResults.vue

@@ -77,14 +77,19 @@
         >
           <v-icon :icon="mdiTarget"></v-icon>
         </v-btn>
-        <v-btn class="action-button download-results" @click="downloadResults" density="comfortable"
+        <v-btn
+          class="action-button download-results"
+          @click="downloadResults"
+          density="comfortable"
+          title="Export all detected fields as GeoJSON."
           >Download</v-btn
         >
         <v-btn
           class="action-button clear-results"
           @click="clearResultsHandler"
           color="error"
           density="compact"
+          itle="Remove these results from the map."
           >Clear</v-btn
         >
       </div>

src/components/TilePreview.vue

@@ -102,10 +102,16 @@ const handleViewOnMap = async () => {
     </div>
     <div class="result-details">
       <div>Date: {{ tile.date }}</div>
-      <div v-if="typeof tile.cloudCover === 'number'">
+      <div
+        v-if="typeof tile.cloudCover === 'number'"
+        title="Percent of the scene obscured by clouds."
+      >
         Cloud Cover: {{ tile.cloudCover.toFixed(1) }}%
       </div>
-      <div v-if="typeof tile.areaCoverage === 'number'">
+      <div
+        v-if="typeof tile.areaCoverage === 'number'"
+        title="Percent of the tile area covered by valid data (e.g. not nodata or masked out)."
+      >
         Area Coverage: {{ tile.areaCoverage.toFixed(1) }}%
       </div>
     </div>

src/composables/useDownloadGrid.ts

@@ -43,6 +43,8 @@ export function featureToGridCell(feature: FeatureLike): GridCell {
 function triggerDownload(url: string, filename: string) {
   const a = document.createElement('a')
   a.href = url
+  // This doesn't actually set the filename as we download from another host,
+  // so browsers block providing a custom name (CORS same-origin policy).
   a.download = filename
   a.rel = 'noopener'
   document.body.appendChild(a)

src/composables/useGlobalFeedback.ts

@@ -5,7 +5,7 @@ import { toLonLat } from 'ol/proj'
 import { unByKey } from 'ol/Observable'
 import type { EventsKey } from 'ol/events'
 import useNotifier from './useNotifier'
-import {
+import useSettings, {
   GLOBAL_DATA_MAP_COMPLETE_ZOOM_LEVEL,
   GLOBAL_DATA_MAP_FIELD_START_ZOOM_LEVEL,
 } from './useSettings'
@@ -123,6 +123,7 @@ function getEndpoints() {
 
 export default function useGlobalFeedback(mapRef: ShallowRef<Map | null>) {
   const { showError, showSuccess } = useNotifier()
+  const { settings } = useSettings()
   const { tileRating: tileRatingEndpoint, tellUsMore: tellUsMoreEndpoint } = getEndpoints()
 
   const sliderValue = ref<number>(1)
@@ -275,6 +276,7 @@ export default function useGlobalFeedback(mapRef: ShallowRef<Map | null>) {
         rating: selectedLevel.value,
         bbox: mapExtent.value,
         resolution: mapResolution.value,
+        confidence_threshold: settings.value.threshold,
         tags: selectedTags.value,
       })
       return true
@@ -294,12 +296,9 @@ export default function useGlobalFeedback(mapRef: ShallowRef<Map | null>) {
     }
   }
 
-  const openDetailsDialogFromTags = async () => {
-    const ok = await postRating()
-    if (ok) {
-      closeTagsDialog()
-      openDetailsDialog()
-    }
+  const openDetailsDialogFromTags = () => {
+    closeTagsDialog()
+    openDetailsDialog()
   }
 
   const openDetailsDialog = () => {
@@ -364,6 +363,8 @@ export default function useGlobalFeedback(mapRef: ShallowRef<Map | null>) {
         rating: selectedLevel.value,
         bbox: mapExtent.value,
         resolution: mapResolution.value,
+        confidence_threshold: settings.value.threshold,
+        tags: selectedTags.value,
       }
 
       if (detailsForm.value.name) {

src/composables/useMap.ts

@@ -11,7 +11,7 @@ import type { Extent } from 'ol/extent'
 import { type FeatureCollection } from 'geojson'
 import useNotifier from './useNotifier'
 import useSettings from './useSettings'
-import createCloudlessLayer from '../layers/S2-Cloudless-Layer'
+import createCloudlessLayer, { getEffectiveCloudlessYear } from '../layers/S2-Cloudless-Layer'
 import createS2GridLayer from '../layers/S2-Grid-Layer'
 import {
   createGlobalPredictionsLayer,
@@ -71,11 +71,16 @@ const cloudlessLayer = shallowRef<TileLayer<XYZ> | null>(null)
 // Watch for year changes and update the cloudless layer
 watch(
   () => settings.value.year,
-  (newYear) => {
+  (newYear, oldYear) => {
     if (!map.value) {
       return
     }
 
+    // Skip reload when the effective (clamped) year hasn't changed (e.g. 2024 -> 2025)
+    if (getEffectiveCloudlessYear(newYear) === getEffectiveCloudlessYear(oldYear)) {
+      return
+    }
+
     // Remove the old cloudless layer if it exists
     if (cloudlessLayer.value) {
       map.value.removeLayer(cloudlessLayer.value)

src/layers/S2-Cloudless-Layer.ts

@@ -1,12 +1,15 @@
 import TileLayer from 'ol/layer/Tile'
 import { XYZ } from 'ol/source'
 
+export const MIN_CLOUDLESS_YEAR = 2016
+export const MAX_CLOUDLESS_YEAR = 2024
+
+export function getEffectiveCloudlessYear(year: number): number {
+  return Math.min(MAX_CLOUDLESS_YEAR, Math.max(MIN_CLOUDLESS_YEAR, year))
+}
+
 export default function createCloudlessLayer(year: number) {
-  if (year < 2016) {
-    year = 2016
-  } else if (year > 2024) {
-    year = 2024
-  }
+  year = getEffectiveCloudlessYear(year)
   return new TileLayer({
     source: new XYZ({
       url: `https://tiles.maps.eox.at/wmts?layer=s2cloudless${year === 2016 ? '' : '-' + year}_3857&style=default&tilematrixset=GoogleMapsCompatible&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix={z}&TileCol={x}&TileRow={y}`,