From dae1b5382c0a082a13d52c345d3ffe3d403edcc9 Mon Sep 17 00:00:00 2001
From: "Matt J." <matthieu@probabl.ai>
Date: Wed, 8 Jan 2025 10:13:50 +0100
Subject: [PATCH] feat(ui): Add tooltips on favorability icons (#1054)

This PR adds tooltips on favorability icons.
---
 .../CrossValidationReportResults.vue          | 28 +++---------
 .../src/components/MetricFavorability.vue     | 43 +++++++++++++++++++
 2 files changed, 49 insertions(+), 22 deletions(-)
 create mode 100644 skore-ui/src/components/MetricFavorability.vue

diff --git a/skore-ui/src/components/CrossValidationReportResults.vue b/skore-ui/src/components/CrossValidationReportResults.vue
index 7ae45db63..ee48d77cc 100644
--- a/skore-ui/src/components/CrossValidationReportResults.vue
+++ b/skore-ui/src/components/CrossValidationReportResults.vue
@@ -2,6 +2,10 @@
 import Simplebar from "simplebar-vue";
 import { computed, ref, useTemplateRef } from "vue";
 
+import DropdownButton from "@/components/DropdownButton.vue";
+import FloatingTooltip from "@/components/FloatingTooltip.vue";
+import MetricFavorability from "@/components/MetricFavorability.vue";
+import StaticRange from "@/components/StaticRange.vue";
 import type { PrimaryResultsDto, TabularResultDto } from "@/dto";
 import { isElementOverflowing } from "@/services/utils";
 
@@ -48,14 +52,7 @@ function isNameTooltipEnabled(index: number) {
         <FloatingTooltip placement="bottom" :enabled="isNameTooltipEnabled(i)">
           <div class="name">
             {{ result.name }}
-            <i
-              v-if="result.favorability === 'greater_is_better'"
-              class="icon icon-ascending-arrow"
-            />
-            <i
-              v-if="result.favorability === 'lower_is_better'"
-              class="icon icon-descending-arrow"
-            />
+            <MetricFavorability :favorability="result.favorability" />
           </div>
           <template #tooltipContent>
             <span class="name-tooltip">{{ result.name }}</span>
@@ -110,14 +107,7 @@ function isNameTooltipEnabled(index: number) {
                 <th>Fold</th>
                 <th v-for="(column, i) in currentTabularResult.columns" :key="i">
                   {{ column }}
-                  <i
-                    v-if="currentTabularResult.favorability[i] === 'greater_is_better'"
-                    class="icon icon-ascending-arrow"
-                  />
-                  <i
-                    v-if="currentTabularResult.favorability[i] === 'lower_is_better'"
-                    class="icon icon-descending-arrow"
-                  />
+                  <MetricFavorability :favorability="currentTabularResult.favorability[i]" />
                 </th>
               </tr>
             </thead>
@@ -249,12 +239,6 @@ function isNameTooltipEnabled(index: number) {
           color: var(--color-text-primary);
           font-weight: var(--font-weight-medium);
 
-          /* stylelint-disable-next-line no-descending-specificity */
-          & .icon {
-            color: var(--color-icon-tertiary);
-            vertical-align: middle;
-          }
-
           &:first-child {
             position: sticky;
             left: 0;
diff --git a/skore-ui/src/components/MetricFavorability.vue b/skore-ui/src/components/MetricFavorability.vue
new file mode 100644
index 000000000..657516516
--- /dev/null
+++ b/skore-ui/src/components/MetricFavorability.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { Favorability } from "@/dto";
+import { computed } from "vue";
+
+import FloatingTooltip from "@/components/FloatingTooltip.vue";
+
+const props = defineProps<{ favorability: Favorability }>();
+
+const icon = computed(() => {
+  switch (props.favorability) {
+    case "greater_is_better":
+      return "icon-ascending-arrow";
+    case "lower_is_better":
+      return "icon-descending-arrow";
+    default:
+      return "";
+  }
+});
+
+const text = computed(() => {
+  switch (props.favorability) {
+    case "greater_is_better":
+      return "Higher is better";
+    case "lower_is_better":
+      return "Lower is better";
+    default:
+      return "";
+  }
+});
+</script>
+
+<template>
+  <FloatingTooltip v-if="icon !== ''" placement="bottom" :text="text">
+    <i class="icon" :class="icon" />
+  </FloatingTooltip>
+</template>
+
+<style scoped>
+.icon {
+  color: var(--color-icon-tertiary);
+  vertical-align: middle;
+}
+</style>