webui: show capabilities by function - make function count reactive (#2352)

* web explorer: make function count reflective when show-lib-func is
toggled on/off

* introduce match-count class to mute and minimize match count text labels

* fix typo

web/explorer/src/assets/main.css

@@ -22,6 +22,13 @@ a:hover {
     cursor: default;
 }
 
+/* mute and minimize match count text labels, e.g. "(2 matches)" */
+.match-count {
+    font-size: 0.85em;
+    color: #6c757d;
+    margin-left: 0.2rem;
+}
+
 /* remove the border from rows other than rule names */
 .p-treetable-tbody > tr:not(:is([aria-level="1"])) > td {
     border: none !important;

web/explorer/src/components/FunctionCapabilities.vue

@@ -29,8 +29,8 @@
                 <InputText v-model="filters['address'].value" placeholder="Filter by function address" />
             </template>
             <template #body="{ data }">
-                <span class="font-monospace text-base">{{ data.address }}</span>
-                <span v-if="data.matchCount > 1" class="font-italic">
+                <span class="font-monospace">{{ data.address }}</span>
+                <span v-if="data.matchCount > 1" class="font-italic match-count">
                     ({{ data.matchCount }} match{{ data.matchCount > 1 ? "es" : "" }})
                 </span>
             </template>
@@ -104,9 +104,10 @@ onMounted(() => {
 const tableData = computed(() => {
     const data = [];
     for (const fcaps of functionCapabilities.value) {
-        const capabilities = fcaps.capabilities;
-        for (const capability of capabilities) {
-            if (capability.lib && !props.showLibraryRules) continue;
+        // when props.showLibraryRules is true, all capabilities are included.
+        // when props.showLibraryRules is false, only non-library capabilities (where cap.lib is false) are included.
+        const capabilities = fcaps.capabilities.filter((cap) => props.showLibraryRules || !cap.lib);
+        capabilities.forEach((capability) => {
             data.push({
                 address: fcaps.address,
                 matchCount: capabilities.length,
@@ -114,7 +115,7 @@ const tableData = computed(() => {
                 namespace: capability.namespace,
                 lib: capability.lib
             });
-        }
+        });
     }
     return data;
 });

web/explorer/src/components/ProcessCapabilities.vue

@@ -23,7 +23,7 @@
                             {{ slotProps.node.data.processname }}
                         </span>
                         <span class="ml-2"> - PID: {{ slotProps.node.data.pid }} </span>
-                        <span v-if="slotProps.node.data.uniqueMatchCount > 0" class="font-italic ml-2">
+                        <span v-if="slotProps.node.data.uniqueMatchCount > 0" class="font-italic ml-2 match-count">
                             ({{ slotProps.node.data.uniqueMatchCount }} unique
                             {{ slotProps.node.data.uniqueMatchCount > 1 ? "matches" : "match" }})
                         </span>
@@ -53,7 +53,7 @@
         >
             <div v-for="rule in currentNode.data.uniqueRules" :key="rule.name">
                 • {{ rule.name }}
-                <span class="font-italic"
+                <span class="font-italic match-count"
                     >({{ rule.matchCount }} {{ rule.scope }} {{ rule.matchCount > 1 ? "matches" : "match" }})</span
                 >
                 <LibraryTag v-if="rule.lib" />

web/explorer/src/components/columns/RuleColumn.vue

@@ -4,7 +4,9 @@
         <template v-if="node.data.type === 'rule'">
             <div>
                 <span>{{ node.data.name }}</span>
-                <span v-if="node.data.matchCount > 1" class="font-italic"> ({{ node.data.matchCount }} matches) </span>
+                <span v-if="node.data.matchCount > 1" class="font-italic match-count">
+                    ({{ node.data.matchCount }} matches)
+                </span>
                 <LibraryTag v-if="node.data.lib && node.data.matchCount" />
             </div>
         </template>