Show tooltip for download tiles

Author: m-mohr

src/components/GlobalDataPanel.vue

@@ -89,8 +89,8 @@ const handleLocationSelected = (place: PlaceResult) => {
               ></v-icon>
             </template>
             <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
+              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>
@@ -156,8 +156,8 @@ const handleLocationSelected = (place: PlaceResult) => {
               ></v-icon>
             </template>
             <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>.
+              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>

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-menu v-if="model.description" open-on-hover :close-on-content-click="false" max-width="400">
+                <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"
@@ -1052,7 +1057,11 @@ defineExpose({ openModelSelection })
               ></v-btn>
             </template>
             <v-sheet class="pa-3 text-body-2">
-              {{ stacPreviewTileId === secondActiveTileId ? 'Hide scene B image' : 'Show scene B image' }}
+              {{
+                stacPreviewTileId === secondActiveTileId
+                  ? 'Hide scene B image'
+                  : 'Show scene B image'
+              }}
             </v-sheet>
           </v-menu>
         </v-expansion-panel-title>

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,
   }