Add 1° download grid layer and download modal (#256)

* Add 1° download grid layer and download modal

Adds a toggleable 1-degree grid overlay in Global Predictions mode that
lets users click any cell to download its field boundaries as a
GeoParquet file from Source Cooperative.

- `Download-Grid-Layer.ts`: vector layer loading the grid manifest
  (`ftw-download-grid.geojson`) from Source Cooperative, with
  normal/hover/selected styles.
- `useDownloadGrid.ts`: composable managing layer visibility, hover,
  click handling, and download modal state; idempotent per-map
  initialization avoids duplicate listeners across mode switches.
- `DownloadModal.vue`: Vuetify dialog showing tile id, bounding box,
  feature count / size, and a direct download link for the currently
  selected year.
- `useMap.ts`: initializes the grid layer when entering global mode and
  delegates grid-cell clicks from `handleMapClick`.
- `GlobalDataPanel.vue`: adds a "Show 1° download grid" toggle to the
  side panel.
- `MapComponent.vue`: mounts the modal and registers `handleMapClick`.
- Unit tests covering URL construction, feature-to-cell mapping, and
  composable state transitions.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* Store download state in settings, persist download state to URL.

* Zoom out when enabling the download grid, rename fieldBoundaryOpacity to opacity

* Add a help button for downloads that directs to Source cooperative.

* Download directly and other fixes

* Code review

* Download directly instead of via popup

---------

Co-authored-by: Claude Code <noreply@anthropic.com>
Co-authored-by: Matthias Mohr <m.mohr@moregeo.it>

Author: 3 people

src/components/GlobalDataPanel.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { mdiHelpCircleOutline } from '@mdi/js'
 import useSettings from '../composables/useSettings'
 import useMap from '../composables/useMap'
 import useAreaOfInterest from '../composables/useAreaOfInterest'
 import type { PlaceResult } from '../composables/useAreaOfInterest'
 import useNotifier from '../composables/useNotifier'
+import useDownloadGrid from '../composables/useDownloadGrid'
 import { transformExtent } from 'ol/proj'
 import GeocodingSearch from './GeocodingSearch.vue'
 import MapLegend from './MapLegend.vue'
@@ -12,6 +14,7 @@ const { settings } = useSettings()
 const { map } = useMap()
 const { fitToExtent } = useAreaOfInterest()
 const { showError } = useNotifier()
+useDownloadGrid()
 
 const handleLocationSelected = (place: PlaceResult) => {
   if (!map.value) return
@@ -68,9 +71,9 @@ const handleLocationSelected = (place: PlaceResult) => {
           thumb-color="teal"
           hide-details
         />
-        <h3 class="group">Opacity: {{ settings.fieldBoundariesOpacity }}%</h3>
+        <h3 class="group">Opacity: {{ settings.opacity }}%</h3>
         <v-slider
-          v-model.number="settings.fieldBoundariesOpacity"
+          v-model.number="settings.opacity"
           :min="0"
           :max="100"
           :step="1"
@@ -79,6 +82,34 @@ const handleLocationSelected = (place: PlaceResult) => {
           thumb-color="teal"
           hide-details
         />
+        <div class="group group-with-help">
+          <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>
+            </template>
+            <v-sheet class="pa-3 text-body-2">
+              <p class="pb-2">
+                After activation, click a tile to download the agricultural field boundary
+                predictions for that 1° cell as a GeoParquet file.
+              </p>
+              <p>
+                You can also download the entire dataset in various variants from
+                <a href="https://source.coop/ftw/global-data/" target="_blank" rel="noopener"
+                  >our Source Cooperative repository</a
+                >.
+              </p>
+            </v-sheet>
+          </v-menu>
+        </div>
+        <v-switch
+          v-model="settings.downloads"
+          color="teal"
+          density="compact"
+          hide-details
+          label="Show download grid"
+          class="mb-1"
+        />
         <h3 class="group legend">Legend</h3>
         <MapLegend />
       </v-col>
@@ -92,6 +123,16 @@ const handleLocationSelected = (place: PlaceResult) => {
   font-weight: 500;
   font-size: 1.1rem;
 }
+.group-with-help {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.group-with-help h3 {
+  margin: 0;
+  font-weight: inherit;
+  font-size: inherit;
+}
 .group.legend {
   margin-top: 1rem;
   border-top: 1px solid rgba(136, 136, 136, 0.65);

src/components/MapComponent.vue

@@ -12,6 +12,7 @@ import useAreaOfInterest from '../composables/useAreaOfInterest'
 import usePermalink from '../composables/usePermalink'
 import useMap from '../composables/useMap'
 import useSettings from '../composables/useSettings'
+import useDownloadGrid from '../composables/useDownloadGrid'
 import { createXYZ } from 'ol/tilegrid'
 
 const {
@@ -22,11 +23,14 @@ const {
   propertiesBoxPosition,
   originalClickPosition,
   hidePropertiesBox,
+  handleMapClick,
   geoJsonResults,
   initCloudlessLayer,
   updateLayers,
 } = useMap()
 
+useDownloadGrid()
+
 const { addMapClickHandler } = useAreaOfInterest()
 const { setAvailableModels, settings } = useSettings()
 
@@ -91,6 +95,7 @@ onMounted(async () => {
     updateLayers()
 
     addMapClickHandler(map.value as Map, areaValues.value)
+    map.value.on('singleclick', handleMapClick)
     // Add scale bar
     map.value.addControl(new ScaleLine())
     // Setup permalink functionality
@@ -158,7 +163,6 @@ defineExpose({
       <PropertiesDisplay :properties="selectedFeature.getProperties()" />
     </div>
   </div>
-
   <header v-if="critical" id="critical">
     <v-alert closable type="error" :text="critical"></v-alert>
   </header>

src/components/ProcessingResults.vue

@@ -93,7 +93,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, onBeforeUnmount, computed } from 'vue'
+import { ref, onBeforeUnmount, computed } from 'vue'
 import useMap from '../composables/useMap'
 import useNotifier from '../composables/useNotifier'
 import useAreaOfInterest from '../composables/useAreaOfInterest'
@@ -109,7 +109,7 @@ const emit = defineEmits<{
   (e: 'clearResults'): void
 }>()
 
-const { map, handleMapClick, vectorLayer, selectedFeature, hidePropertiesBox } = useMap()
+const { map, vectorLayer, selectedFeature, hidePropertiesBox } = useMap()
 const { clearResults, returnToResults, fitToExtent } = useAreaOfInterest()
 const { showInfo, showError } = useNotifier()
 
@@ -261,24 +261,10 @@ 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!)