more tooltips

jplag · Jul 30, 2023 · 2809704 · 2809704
1 parent 97c1222
commit 2809704
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git 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
@@ -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') {