From 854759cb433d5ffda7a54b2d63b70f603c8bfd61 Mon Sep 17 00:00:00 2001
From: Soufiane Fariss <rev.fariss@gmail.com>
Date: Fri, 16 Aug 2024 18:17:34 +0200
Subject: [PATCH] add tooltip to show decimal/octal rep

---
 .../src/components/columns/RuleColumn.vue     | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/explorer/src/components/columns/RuleColumn.vue b/web/explorer/src/components/columns/RuleColumn.vue
index 6c4b1ca2..f5197737 100644
--- a/web/explorer/src/components/columns/RuleColumn.vue
+++ b/web/explorer/src/components/columns/RuleColumn.vue
@@ -31,7 +31,15 @@
         <template v-else-if="node.data.type === 'feature'">
             <span>
                 - {{ node.data.typeValue }}:
-                <span :class="{ 'text-green-700': node.data.typeValue !== 'regex' }" class="font-monospace">
+                <span
+                    :class="{ 'text-green-700': node.data.typeValue !== 'regex' }"
+                    class="font-monospace"
+                    v-tooltip.top="{
+                        value: getTooltipContent(node.data),
+                        showDelay: 1000,
+                        hideDelay: 300
+                    }"
+                >
                     {{ node.data.name }}
                 </span>
             </span>
@@ -63,4 +71,14 @@ defineProps({
         required: true
     }
 });
+
+const getTooltipContent = (data) => {
+    if (data.typeValue === "number" || data.typeValue === "offset") {
+        const decimalValue = parseInt(data.name, 16);
+        const octalValue = "0o" + decimalValue.toString(8);
+        return `Decimal: ${decimalValue}
+Octal: ${octalValue}`;
+    }
+    return null;
+};
 </script>