add tooltip to show decimal/octal rep

yippeekayay · Aug 16, 2024 · 854759c · 854759c
1 parent 348e0b3
commit 854759c
Showing 1 changed file with 19 additions and 1 deletion.
diff --git 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>