From 2809704ef41dcf3dd47af5d91c62cc393313f9bf Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 30 Jul 2023 11:18:25 +0200
Subject: [PATCH] more tooltips

---
 .../src/components/ComparisonsTable.vue       | 24 +++++++++++++++++--
 .../src/components/ToolTipComponent.vue       | 11 ++++-----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 363d02b19..502e9b395 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -11,8 +11,27 @@
         <div class="tableCellSimilarity !flex-col">
           <div>Similarity</div>
           <div class="flex flex-row w-full">
-            <div class="flex-1">Average</div>
-            <div class="flex-1">Maximum</div>
+            <ToolTipComponent class="flex-1">
+              <template #default>
+                <p class="w-full text-center">{{ metricToolTips[MetricType.AVERAGE].shortName }}</p>
+              </template>
+              <template #tooltip>
+                <p class="whitespace-pre text-sm">
+                  {{ metricToolTips[MetricType.AVERAGE].tooltip }}
+                </p>
+              </template>
+            </ToolTipComponent>
+
+            <ToolTipComponent class="flex-1">
+              <template #default>
+                <p class="w-full text-center">{{ metricToolTips[MetricType.MAXIMUM].shortName }}</p>
+              </template>
+              <template #tooltip>
+                <p class="whitespace-pre text-sm">
+                  {{ metricToolTips[MetricType.MAXIMUM].tooltip }}
+                </p>
+              </template>
+            </ToolTipComponent>
           </div>
         </div>
         <div class="tableCellCluster items-center" v-if="displayClusters">Cluster</div>
@@ -136,6 +155,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { faUserGroup } from '@fortawesome/free-solid-svg-icons'
 import { generateColors } from '@/utils/ColorUtils'
 import ToolTipComponent from './ToolTipComponent.vue'
+import MetricType, { metricToolTips } from '@/model/MetricType'
 
 library.add(faUserGroup)
 
diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
index 32d302346..d7d34a0af 100644
--- a/report-viewer/src/components/ToolTipComponent.vue
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -2,7 +2,7 @@
   <div class="relative inline-block group">
     <slot></slot>
     <div
-      class="absolute hidden group-hover:block bg-black bg-opacity-60 px-1 rounded-md text-white text-center z-10"
+      class="absolute hidden group-hover:block px-1 rounded-md text-white text-center z-10"
       :style="tooltipPosition"
     >
       <slot name="tooltip"></slot>
@@ -22,6 +22,8 @@ const props = defineProps({
   }
 })
 
+const opacity = 0.8
+
 const tooltipPosition = computed(() => {
   const style: StyleValue = {}
 
@@ -42,6 +44,7 @@ const tooltipPosition = computed(() => {
       style.top = '105%'
     }
   }
+  style.backgroundColor = `rgba(0,0,0,${opacity})`
 
   return style
 })
@@ -50,13 +53,9 @@ const arrowStyle = computed(() => {
   const style: StyleValue = {}
   style.content = ' '
 
-  function getBorderColor(current: String, other: String) {
-    return other == current ? 'rgba(0,0,0,0.6)' : 'transparent'
-  }
-
   style.borderColor = ''
   for (const dir of ['top', 'right', 'bottom', 'left']) {
-    style.borderColor += getBorderColor(dir, props.direction) + ' '
+    style.borderColor += dir == props.direction ? `rgba(0,0,0,${opacity}) ` : 'transparent '
   }
 
   if (props.direction == 'left' || props.direction == 'right') {