Show tooltips for location selection control

src/components/wms/LocationsSearchControl.vue

@@ -1,47 +1,65 @@
 <template>
-  <v-autocomplete
-    class="locations-search"
-    v-model="selectedLocation"
-    label="Search Locations"
-    single-line
-    hide-details
-    rounded="0"
-    :items="props.locations"
-    item-title="locationName"
-    item-value="locationId"
-    return-object
-    :style="autocompleteStyle"
-    density="compact"
+  <v-tooltip
+    :open-delay="tooltipOpenDelay"
+    :disabled="isExpanded || !selectedLocationId"
   >
-    <template v-slot:item="{ props }">
-      <v-list-item
-        v-bind="props"
-        :width="width"
-        :max-width="maxWidth"
+    <template #activator="{ props: autocompleteProps }">
+      <v-autocomplete
+        v-bind="autocompleteProps"
+        class="locations-search"
+        v-model="selectedLocation"
+        label="Search Locations"
+        single-line
+        hide-details
+        rounded="0"
+        :items="props.locations"
+        item-title="locationName"
+        item-value="locationId"
+        return-object
+        :style="autocompleteStyle"
         density="compact"
-      />
+        @update:focused="(isFocused) => (isExpanded = isFocused)"
+      >
+        <template #item="{ item, props }">
+          <v-tooltip :open-delay="tooltipOpenDelay">
+            <template #activator="{ props: itemProps }">
+              <v-list-item
+                v-bind="{ ...itemProps, ...props }"
+                :width="width"
+                :max-width="maxWidth"
+                density="compact"
+              />
+            </template>
+            <span>{{ getTooltipTextFromId(item.value) }}</span>
+          </v-tooltip>
+        </template>
+      </v-autocomplete>
     </template>
-  </v-autocomplete>
+    <span>{{ getTooltipText(selectedLocation) }}</span>
+  </v-tooltip>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, watchEffect } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { type Location } from '@deltares/fews-pi-requests'
 
 interface Props {
   locations?: Location[]
   selectedLocationId?: string | null
   maxWidth?: string | number
   width?: string | number
+  tooltipOpenDelay?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
   locations: () => [],
   selectedLocationId: null,
+  tooltipOpenDelay: 500,
 })
 
 const emit = defineEmits(['changeLocationId'])
 
+const isExpanded = ref(false)
 const selectedLocation = ref<Location | null>(null)
 
 function convertWidthToCss(inputWidth: number | string | undefined) {
@@ -63,12 +81,50 @@ const autocompleteStyle = computed(() => {
   }
 })
 
-watchEffect(() => {
-  selectedLocation.value =
-    props.locations.find(
-      (location) => location.locationId === props.selectedLocationId,
-    ) ?? null
-})
+function getLocationFromId(locationId: string | null) {
+  if (locationId === null) return null
+  return (
+    props.locations.find((location) => location.locationId === locationId) ??
+    null
+  )
+}
+
+function degreesToString(raw: number): string {
+  let remainder = raw
+
+  const degrees = Math.floor(raw)
+  remainder -= degrees
+
+  remainder *= 60
+  const minutes = Math.floor(remainder)
+  remainder -= minutes
+
+  const seconds = (remainder * 60).toFixed(2)
+
+  return `${degrees}°${minutes}'${seconds}''`
+}
+
+function getTooltipText(location: Location | null): string {
+  if (!location) return ''
+
+  let tooltip = `${location.locationName}`
+  if (location.lat && location.lon) {
+    const lat = degreesToString(+location.lat)
+    const lon = degreesToString(+location.lon)
+    tooltip += ` (${lat} N, ${lon} E)`
+  }
+  return tooltip
+}
+
+function getTooltipTextFromId(locationId: string): string {
+  const location = getLocationFromId(locationId)
+  return getTooltipText(location)
+}
+
+watch(
+  () => props.selectedLocationId,
+  () => (selectedLocation.value = getLocationFromId(props.selectedLocationId)),
+)
 
 watch(selectedLocation, onSelectLocation)
 function onSelectLocation(newValue: Location | null) {
@@ -83,4 +139,9 @@ function onSelectLocation(newValue: Location | null) {
 .locations-search > .v-field__overlay {
   display: none;
 }
+
+/* Hide horizontal scrollbar in autocomplete dropdown menu on FireFox. */
+.v-autocomplete__content > .v-list {
+  overflow-x: hidden !important;
+}
 </style>