Add a link to the paper with some context. (#258)

Also make the info text slightly smaller and make the content of the tooltips clickable.

Author: m-mohr

src/components/GeocodingSearch.vue

@@ -76,13 +76,17 @@ const onLocationSelected = (item: { value: PlaceResult; title: string } | null)
       dense
       variant="outlined"
     ></v-autocomplete>
-    <v-tooltip max-width="400" open-on-click>
+    <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>
       </template>
-      Geocoding provided by Nominatim.<br />
-      &copy; OpenStreetMap, https://openstreetmap.org<br />
-      License: ODbL
-    </v-tooltip>
+      <v-sheet class="pa-3 text-body-2">
+        Geocoding provided by Nominatim.<br />
+        &copy; OpenStreetMap,
+        <a href="https://openstreetmap.org" target="_blank" rel="noopener">openstreetmap.org</a
+        ><br />
+        License: ODbL
+      </v-sheet>
+    </v-menu>
   </div>
 </template>

src/components/GlobalDataPanel.vue

@@ -27,9 +27,25 @@ const handleLocationSelected = (place: PlaceResult) => {
 
 <template>
   <div class="settings">
-    <v-alert density="compact" color="gray" class="mb-2">
+    <v-alert density="compact" color="gray" class="mb-2 introduction">
       The <strong>global predictions</strong> provide global-scale estimates of agricultural fields
-      for 2024 and 2025. They were computed using the model <strong>FTW v3: CC-BY, B7</strong>.
+      for 2024 and 2025. They were computed using the model
+      <v-menu open-on-hover :close-on-content-click="false" max-width="400">
+        <template #activator="{ props }">
+          <strong v-bind="props" style="cursor: pointer; text-decoration: underline dotted"
+            >FTW v3: CC-BY, B7</strong
+          >
+        </template>
+        <v-sheet class="pa-3 text-body-2"
+          >Please refer to our paper "<a
+            href="https://arxiv.org/abs/2603.27101"
+            target="_blank"
+            rel="noopener"
+            >PRUE: A Practical Recipe for Field Boundary Segmentation at Scale</a
+          >" for more information. The model version "FTW v3" is also named "PRUE" in the
+          paper.</v-sheet
+        > </v-menu
+      >.
     </v-alert>
 
     <v-row class="d-flex justify-center w-100 mx-auto mb-0">

src/components/ProcessingPanel.vue

@@ -411,7 +411,7 @@ defineExpose({ openModelSelection })
       density="compact"
       :type="isBatchProcessing ? 'warning' : 'info'"
       :color="isBatchProcessing ? 'warning' : 'gray'"
-      class="mb-2"
+      class="mb-2 introduction"
     >
       <template v-if="!currentMgrsTileId">
         <strong>Please select an area of interest.</strong> Click on the map to select an area or

src/styles/sidebar.scss

@@ -7,6 +7,10 @@
   display: flex;
   flex-direction: column;
   background-color: rgba(0, 0, 0, 0.9);
+
+  .introduction {
+    font-size: 90%;
+  }
 }
 
 .sidebar.global {