From db423d9b0a1a20dfbcd332d8de45e2e65a08434e Mon Sep 17 00:00:00 2001
From: Soufiane Fariss <rev.fariss@gmail.com>
Date: Tue, 6 Aug 2024 18:11:41 +0200
Subject: [PATCH] add comments to rule column components

---
 .../src/components/columns/RuleColumn.vue     | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/web/explorer/src/components/columns/RuleColumn.vue b/web/explorer/src/components/columns/RuleColumn.vue
index e47f1d41..efa418f0 100644
--- a/web/explorer/src/components/columns/RuleColumn.vue
+++ b/web/explorer/src/components/columns/RuleColumn.vue
@@ -1,11 +1,20 @@
 <template>
     <div>
         <template v-if="node.data.type === 'rule'">
-            {{ node.data.name }}
+            <!--- example node: "parse PE headers (2 matches) lib" --->
+            <div class="cursor-pointer">
+                <span>{{ node.data.name }}</span>
+                <span v-if="node.data.matchCount > 1" class="font-italic"> ({{ node.data.matchCount }} matches) </span>
+                <LibraryTag v-if="node.data.lib && node.data.matchCount" />
+            </div>
         </template>
+
+        <!--- example node: "basic block @ 0x401000" or "explorer.exe" --->
         <template v-else-if="node.data.type === 'match location'">
-            <span class="text-sm font-italic">{{ node.data.name }}</span>
+            <span class="text-sm font-italic cursor-pointer">{{ node.data.name }}</span>
         </template>
+
+        <!--- example node: "- or", "- and" --->
         <template v-else-if="node.data.type === 'statement'"
             >-
             <span
@@ -17,25 +26,31 @@
                 {{ node.data.name }}
             </span>
         </template>
+
+        <!--- example node: "- api: GetProcAddress", "- regex: .*\\.exe" --->
         <template v-else-if="node.data.type === 'feature'">
             <span
                 >- {{ node.data.typeValue }}:
-                <span :class="{ 'text-green-700': node.data.typeValue !== 'regex' }" style="font-family: monospace">{{
-                    node.data.name
-                }}</span></span
-            >
+                <span :class="{ 'text-green-700': node.data.typeValue !== 'regex' }" style="font-family: monospace"
+                    >{{ node.data.name }}
+                </span>
+            </span>
         </template>
+
+        <!--- example node: "- malware.exe" (these are the captures (children nodes) of regex nodes) --->
         <template v-else-if="node.data.type === 'regex-capture'">
             - <span class="text-green-700" style="font-family: monospace">{{ node.data.name }}</span>
         </template>
+
+        <!--- example node: "exit(0) -> 0" (if the node type is call-info, we highlight node.data.name.callInfo) --->
         <template v-else-if="node.data.type === 'call-info'">
-            <highlightjs lang="c" :code="node.data.name.callInfo" style="background-color: #f0f0f0" />
+            <highlightjs lang="c" :code="node.data.name.callInfo" />
         </template>
+
+        <!-- example node: " = IMAGE_NT_SIGNATURE (PE)" --->
         <span v-if="node.data.description" class="text-gray-500 text-sm" style="font-size: 90%">
             = {{ node.data.description }}
         </span>
-        <span v-if="node.data.matchCount > 1" class="font-italic"> ({{ node.data.matchCount }} matches) </span>
-        <LibraryTag v-if="node.data.lib && node.data.matchCount" />
     </div>
 </template>