Hotfixes (#270)

* Use different PMTiles files, change basemap info

* Add year to feedback requests

* Fix year swapping issue

* Unify tooltips

* Show tooltip for download tiles

Author: m-mohr

src/components/GlobalDataPanel.vue

@@ -69,17 +69,17 @@ const handleLocationSelected = (place: PlaceResult) => {
         </v-radio-group>
         <v-alert
           v-if="basemapYearMismatch"
-          type="warning"
+          type="info"
           variant="tonal"
           density="compact"
-          class="mt-2"
+          class="mt-2 note"
         >
-          No basemap is available for {{ settings.year }}. Showing the
-          {{ getEffectiveCloudlessYear(settings.year) }} basemap instead.
+          Showing the {{ getEffectiveCloudlessYear(settings.year) }} basemap. The 2025 basemap will
+          be added soon.
         </v-alert>
         <h3 class="group">
           Confidence Threshold: {{ settings.threshold }}%
-          <v-tooltip max-width="360" location="top">
+          <v-menu open-on-hover :close-on-content-click="false" max-width="360">
             <template #activator="{ props }">
               <v-icon
                 class="ml-2"
@@ -88,12 +88,12 @@ const handleLocationSelected = (place: PlaceResult) => {
                 v-bind="props"
               ></v-icon>
             </template>
-            <span
-              >Only show fields where the model's confidence meets this threshold. Higher values
-              show fewer, more certain fields; lower values show more fields, including less certain
-              ones.</span
-            >
-          </v-tooltip>
+            <v-sheet class="pa-3 text-body-2">
+              Only show fields where the model's confidence meets this threshold. Higher values show
+              fewer, more certain fields; lower values show more fields, including less certain
+              ones.
+            </v-sheet>
+          </v-menu>
         </h3>
         <v-slider
           v-model.number="settings.threshold"
@@ -146,7 +146,7 @@ const handleLocationSelected = (place: PlaceResult) => {
         />
         <h3 class="group legend">
           Legend
-          <v-tooltip max-width="360" location="top">
+          <v-menu open-on-hover :close-on-content-click="false" max-width="360">
             <template #activator="{ props }">
               <v-icon
                 class="ml-2"
@@ -155,11 +155,11 @@ const handleLocationSelected = (place: PlaceResult) => {
                 v-bind="props"
               ></v-icon>
             </template>
-            <span
-              >Zoomed out, the map shows <strong>field density</strong> (fields per area). Zoom in
-              to see individual fields colored by the model's <strong>confidence</strong>.</span
-            >
-          </v-tooltip>
+            <v-sheet class="pa-3 text-body-2">
+              Zoomed out, the map shows <strong>field density</strong> (fields per area). Zoom in to
+              see individual fields colored by the model's <strong>confidence</strong>.
+            </v-sheet>
+          </v-menu>
         </h3>
         <MapLegend />
       </v-col>

src/components/MapComponent.vue

@@ -29,11 +29,23 @@ const {
   updateLayers,
 } = useMap()
 
-useDownloadGrid()
+const { hoveredGridCell, hoveredGridPosition } = useDownloadGrid()
 
 const { addMapClickHandler } = useAreaOfInterest()
 const { setAvailableModels, settings } = useSettings()
 
+function formatDeg(value: number, isLat: boolean): string {
+  const abs = Math.abs(value)
+  const dir = isLat ? (value >= 0 ? 'N' : 'S') : value >= 0 ? 'E' : 'W'
+  return `${abs}°${dir}`
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${bytes} B`
+}
+
 const clearResults = () => {
   geoJsonResults.value = []
   hidePropertiesBox()
@@ -121,6 +133,50 @@ defineExpose({
     />
 
     <GlobalFeedbackWidget v-if="map && settings.mode === 'global'" />
+
+    <!-- Download grid hover tooltip -->
+    <div
+      v-if="hoveredGridCell && hoveredGridPosition && settings.downloads"
+      class="download-grid-tooltip"
+      :style="{ left: hoveredGridPosition.x + 16 + 'px', top: hoveredGridPosition.y + 16 + 'px' }"
+    >
+      <div class="download-grid-tooltip__title">
+        {{ settings.year }}_{{ hoveredGridCell.tile_id }}.parquet
+      </div>
+      <div class="download-grid-tooltip__row">
+        <span class="download-grid-tooltip__label">Year</span>
+        {{ settings.year }}
+      </div>
+      <div class="download-grid-tooltip__row">
+        <span class="download-grid-tooltip__label">Lat</span>
+        {{ formatDeg(hoveredGridCell.lat_min, true) }} –
+        {{ formatDeg(hoveredGridCell.lat_min + 1, true) }}
+      </div>
+      <div class="download-grid-tooltip__row">
+        <span class="download-grid-tooltip__label">Lon</span>
+        {{ formatDeg(hoveredGridCell.lon_min, false) }} –
+        {{ formatDeg(hoveredGridCell.lon_min + 1, false) }}
+      </div>
+      <template v-if="hoveredGridCell.years.includes(settings.year)">
+        <div
+          v-if="hoveredGridCell.feature_counts?.[String(settings.year)] != null"
+          class="download-grid-tooltip__row"
+        >
+          <span class="download-grid-tooltip__label">Fields</span>
+          {{ hoveredGridCell.feature_counts![String(settings.year)].toLocaleString() }}
+        </div>
+        <div
+          v-if="hoveredGridCell.size_bytes?.[String(settings.year)] != null"
+          class="download-grid-tooltip__row"
+        >
+          <span class="download-grid-tooltip__label">Download size</span>
+          {{ formatBytes(hoveredGridCell.size_bytes![String(settings.year)]) }}
+        </div>
+      </template>
+      <div v-else class="download-grid-tooltip__unavailable">
+        Not available for {{ settings.year }}
+      </div>
+    </div>
   </div>
 
   <!-- Properties Box -->
@@ -195,6 +251,47 @@ defineExpose({
   height: 100%;
 }
 
+/* Download Grid Tooltip */
+.download-grid-tooltip {
+  position: absolute;
+  z-index: 9000;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.9);
+  border: 1px solid rgba(0, 136, 136, 0.7);
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  min-width: 180px;
+  font-size: 0.8rem;
+  color: #eee;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(6px);
+}
+
+.download-grid-tooltip__title {
+  font-weight: 600;
+  color: rgb(0, 200, 200);
+  margin-bottom: 0.35rem;
+  font-size: 0.85rem;
+}
+
+.download-grid-tooltip__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  line-height: 1.6;
+}
+
+.download-grid-tooltip__label {
+  color: #aaa;
+  white-space: nowrap;
+}
+
+.download-grid-tooltip__unavailable {
+  color: #f87171;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+}
+
 /* Properties Box Styles */
 .properties-box {
   position: fixed;

src/components/ProcessingPanel.vue

@@ -476,7 +476,12 @@ defineExpose({ openModelSelection })
             <v-radio v-for="model in availableModels" :key="model.id" :value="model.id" color="teal"
               ><template v-slot:label>
                 {{ model.title }}
-                <v-tooltip v-if="model.description" max-width="400" open-on-click>
+                <v-menu
+                  v-if="model.description"
+                  open-on-hover
+                  :close-on-content-click="false"
+                  max-width="400"
+                >
                   <template #activator="{ props }">
                     <v-icon
                       class="ml-1"
@@ -485,7 +490,7 @@ defineExpose({ openModelSelection })
                       v-bind="props"
                     ></v-icon>
                   </template>
-                  <div>
+                  <v-sheet class="pa-3 text-body-2">
                     <template v-if="model.version"
                       ><strong>Version:</strong> {{ model.version }}<br
                     /></template>
@@ -496,8 +501,8 @@ defineExpose({ openModelSelection })
                         {{ model.description }}
                       </div>
                     </template>
-                  </div>
-                </v-tooltip>
+                  </v-sheet>
+                </v-menu>
                 <v-badge
                   v-if="model.legacy"
                   inline
@@ -681,9 +686,15 @@ defineExpose({ openModelSelection })
 
           <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-if="basemapYearMismatch"
+                type="info"
+                variant="tonal"
+                density="compact"
+                class="mt-2 note"
+              >
+                Showing the {{ getEffectiveCloudlessYear(settings.year) }} basemap. The 2025 basemap
+                will be added soon.
               </v-alert>
             </v-col>
           </v-row>
@@ -944,12 +955,8 @@ defineExpose({ openModelSelection })
             ></v-badge>
           </span>
           <v-spacer></v-spacer>
-          <v-tooltip
-            v-if="activeTileId"
-            :text="stacPreviewTileId === activeTileId ? 'Hide scene A image' : 'Show scene A image'"
-            open-on-click
-          >
-            <template v-slot:activator="{ props }">
+          <v-menu v-if="activeTileId" open-on-hover :close-on-content-click="false">
+            <template #activator="{ props }">
               <v-btn
                 v-bind="props"
                 :icon="stacPreviewTileId === activeTileId ? mdiEyeOutline : mdiEyeOffOutline"
@@ -959,7 +966,10 @@ defineExpose({ openModelSelection })
                 "
               ></v-btn>
             </template>
-          </v-tooltip>
+            <v-sheet class="pa-3 text-body-2">
+              {{ stacPreviewTileId === activeTileId ? 'Hide scene A image' : 'Show scene A image' }}
+            </v-sheet>
+          </v-menu>
         </v-expansion-panel-title>
         <v-expansion-panel-text>
           <div class="results">
@@ -1034,14 +1044,8 @@ defineExpose({ openModelSelection })
             ></v-badge>
           </span>
           <v-spacer></v-spacer>
-          <v-tooltip
-            v-if="secondActiveTileId"
-            :text="
-              stacPreviewTileId === secondActiveTileId ? 'Hide scene B image' : 'Show scene B image'
-            "
-            open-on-click
-          >
-            <template v-slot:activator="{ props }">
+          <v-menu v-if="secondActiveTileId" open-on-hover :close-on-content-click="false">
+            <template #activator="{ props }">
               <v-btn
                 v-bind="props"
                 :icon="stacPreviewTileId === secondActiveTileId ? mdiEyeOutline : mdiEyeOffOutline"
@@ -1052,7 +1056,14 @@ defineExpose({ openModelSelection })
                 "
               ></v-btn>
             </template>
-          </v-tooltip>
+            <v-sheet class="pa-3 text-body-2">
+              {{
+                stacPreviewTileId === secondActiveTileId
+                  ? 'Hide scene B image'
+                  : 'Show scene B image'
+              }}
+            </v-sheet>
+          </v-menu>
         </v-expansion-panel-title>
         <v-expansion-panel-text>
           <div class="results">

src/composables/useDownloadGrid.ts

@@ -1,4 +1,4 @@
-import { shallowRef, watch } from 'vue'
+import { computed, shallowRef, watch } from 'vue'
 import type Map from 'ol/Map'
 import type VectorLayer from 'ol/layer/Vector'
 import type VectorSource from 'ol/source/Vector'
@@ -21,6 +21,7 @@ const { settings } = useSettings()
 
 // Singleton state shared by all consumers of the composable.
 const hoveredGridFeature = shallowRef<FeatureLike | null>(null)
+const hoveredGridPosition = shallowRef<{ x: number; y: number } | null>(null)
 const downloadGridLayer = shallowRef<VectorLayer<VectorSource> | null>(null)
 const currentMap = shallowRef<Map | null>(null)
 
@@ -85,6 +86,7 @@ watch(
       ensureDownloadGridVisibleAtUsableZoom(currentMap.value)
     } else {
       hoveredGridFeature.value = null
+      hoveredGridPosition.value = null
       downloadGridLayer.value?.changed()
       const el = currentMap.value?.getTargetElement()
       if (el) el.style.cursor = ''
@@ -101,6 +103,10 @@ watch(
 )
 
 export default function useDownloadGrid() {
+  const hoveredGridCell = computed(() =>
+    hoveredGridFeature.value ? featureToGridCell(hoveredGridFeature.value) : null,
+  )
+
   /** Idempotent: creates the layer and registers listeners on first call per map. */
   const initDownloadGridLayer = (map: Map) => {
     if (initializedMaps.has(map)) return
@@ -124,6 +130,11 @@ export default function useDownloadGrid() {
         layer.changed()
         map.getTargetElement().style.cursor = feature ? 'pointer' : ''
       }
+      if (feature) {
+        hoveredGridPosition.value = { x: event.pixel[0], y: event.pixel[1] }
+      } else {
+        hoveredGridPosition.value = null
+      }
     })
   }
 
@@ -149,6 +160,8 @@ export default function useDownloadGrid() {
 
   return {
     downloadGridLayer,
+    hoveredGridCell,
+    hoveredGridPosition,
     initDownloadGridLayer,
     handleGridClick,
   }