From 04071606cd387debba1a2948c76237092dbf267d Mon Sep 17 00:00:00 2001
From: Soufiane Fariss <rev.fariss@gmail.com>
Date: Thu, 15 Aug 2024 17:03:02 +0200
Subject: [PATCH 1/4] fix global search in shhow capabilities by function

---
 web/explorer/src/components/FunctionCapabilities.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/explorer/src/components/FunctionCapabilities.vue b/web/explorer/src/components/FunctionCapabilities.vue
index 8153b133..4372da33 100644
--- a/web/explorer/src/components/FunctionCapabilities.vue
+++ b/web/explorer/src/components/FunctionCapabilities.vue
@@ -7,7 +7,7 @@
         size="small"
         :filters="filters"
         :filterMode="filterMode"
-        :globalFilterFields="['funcaddr', 'ruleName', 'namespace']"
+        :globalFilterFields="['address', 'rule', 'namespace']"
     >
         <template #header>
             <IconField>

From c73abb88551ef264825ff75672cdd4d3f816f1aa Mon Sep 17 00:00:00 2001
From: Soufiane Fariss <rev.fariss@gmail.com>
Date: Thu, 15 Aug 2024 17:05:47 +0200
Subject: [PATCH 2/4] add 'distinct' keyword to clarify count is distinct

---
 web/explorer/src/components/SettingsPanel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/explorer/src/components/SettingsPanel.vue b/web/explorer/src/components/SettingsPanel.vue
index 1616b040..94c0fefd 100644
--- a/web/explorer/src/components/SettingsPanel.vue
+++ b/web/explorer/src/components/SettingsPanel.vue
@@ -20,9 +20,9 @@
                     />
                     <label for="showLibraryRules">
                         <span v-if="libraryRuleMatchesCount > 1">
-                            Show {{ libraryRuleMatchesCount }} library rule matches
+                            Show {{ libraryRuleMatchesCount }} distinct library rules
                         </span>
-                        <span v-else>Show 1 library rule match</span>
+                        <span v-else>Show 1 distinct library rule</span>
                     </label>
                 </div>
                 <div class="flex flex-row align-items-center gap-2">

From d3e3c966d62c53b7dd0601d1bcb1cdcaf9486d50 Mon Sep 17 00:00:00 2001
From: Soufiane Fariss <rev.fariss@gmail.com>
Date: Fri, 16 Aug 2024 12:57:44 +0200
Subject: [PATCH 3/4] web: introduce column filters and UI tweaks

---
 .../src/components/FunctionCapabilities.vue   | 50 +++++++++++++------
 .../src/components/RuleMatchesTable.vue       |  5 --
 web/explorer/src/views/AnalysisView.vue       |  2 +
 3 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/web/explorer/src/components/FunctionCapabilities.vue b/web/explorer/src/components/FunctionCapabilities.vue
index 4372da33..c3e9e463 100644
--- a/web/explorer/src/components/FunctionCapabilities.vue
+++ b/web/explorer/src/components/FunctionCapabilities.vue
@@ -7,6 +7,7 @@
         size="small"
         :filters="filters"
         :filterMode="filterMode"
+        filterDisplay="row"
         :globalFilterFields="['address', 'rule', 'namespace']"
     >
         <template #header>
@@ -16,35 +17,47 @@
             </IconField>
         </template>
 
-        <Column field="address" sortable header="Function Address" :rowspan="3" class="w-min">
+        <Column
+            field="address"
+            sortable
+            header="Function Address"
+            class="w-min"
+            :showFilterMenu="false"
+            :showClearButton="false"
+        >
+            <template #filter v-if="props.showColumnFilters">
+                <InputText v-model="filters['address'].value" placeholder="Filter by name" />
+            </template>
             <template #body="{ data }">
-                <span class="font-monospace">{{ data.address }}</span>
+                <span class="font-monospace text-base">{{ data.address }}</span>
                 <span v-if="data.matchCount > 1" class="font-italic">
                     ({{ data.matchCount }} match{{ data.matchCount > 1 ? "es" : "" }})
                 </span>
             </template>
         </Column>
 
-        <Column field="rule" sortable header="Matches" class="w-min">
+        <Column field="rule" sortable header="Matches" class="w-min" :showFilterMenu="false" :showClearButton="false">
+            <template #filter v-if="props.showColumnFilters">
+                <InputText v-model="filters['rule'].value" placeholder="Filter by name" />
+            </template>
             <template #body="{ data }">
                 {{ data.rule }}
                 <LibraryTag v-if="data.lib" />
             </template>
         </Column>
 
-        <Column field="namespace" sortable header="Namespace"></Column>
+        <Column field="namespace" sortable header="Namespace" :showFilterMenu="false" :showClearButton="false">
+            <template #filter v-if="props.showColumnFilters">
+                <InputText v-model="filters['namespace'].value" placeholder="Filter by name" />
+            </template>
+        </Column>
     </DataTable>
-
-    <Dialog v-model:visible="sourceDialogVisible" :style="{ width: '50vw' }">
-        <highlightjs lang="yml" :code="currentSource" class="bg-white" />
-    </Dialog>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import DataTable from "primevue/datatable";
 import Column from "primevue/column";
-import Dialog from "primevue/dialog";
 import IconField from "primevue/iconfield";
 import InputIcon from "primevue/inputicon";
 import InputText from "primevue/inputtext";
@@ -60,13 +73,20 @@ const props = defineProps({
     showLibraryRules: {
         type: Boolean,
         default: false
+    },
+    showColumnFilters: {
+        type: Boolean,
+        default: false
     }
 });
 
-const filters = ref({ global: { value: null, matchMode: "contains" } });
+const filters = ref({
+    global: { value: null, matchMode: "contains" },
+    address: { value: null, matchMode: "contains" },
+    rule: { value: null, matchMode: "contains" },
+    namespace: { value: null, matchMode: "contains" }
+});
 const filterMode = ref("lenient");
-const sourceDialogVisible = ref(false);
-const currentSource = ref("");
 
 const functionCapabilities = ref([]);
 
@@ -101,8 +121,10 @@ const tableData = computed(() => {
 </script>
 
 <style scoped>
-/* tighten up the spacing between rows */
-:deep(.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td) {
+/* tighten up the spacing between rows, and change border color */
+:deep(.p-datatable-tbody > tr > td) {
     padding: 0.2rem 0.5rem !important;
+    border-width: 0 0 1px 0;
+    border-color: #97a0ab;
 }
 </style>
diff --git a/web/explorer/src/components/RuleMatchesTable.vue b/web/explorer/src/components/RuleMatchesTable.vue
index 9b84fc14..71daf622 100644
--- a/web/explorer/src/components/RuleMatchesTable.vue
+++ b/web/explorer/src/components/RuleMatchesTable.vue
@@ -339,11 +339,6 @@ onMounted(() => {
     visibility: hidden !important;
     height: 1.3rem;
 }
-/* Disable the toggle button for rules */
-:deep(.p-treetable-tbody > tr:is([aria-level="1"]) > td > div > .p-treetable-node-toggle-button) {
-    visibility: collapse !important;
-    height: 1.3rem;
-}
 
 /* Make all matches nodes (i.e. not rule names) slightly smaller,
 and tighten up the spacing between the rows  */
diff --git a/web/explorer/src/views/AnalysisView.vue b/web/explorer/src/views/AnalysisView.vue
index 85efb2e2..fc020fd3 100644
--- a/web/explorer/src/views/AnalysisView.vue
+++ b/web/explorer/src/views/AnalysisView.vue
@@ -18,12 +18,14 @@
         v-if="doc.meta.flavor === 'static' && showCapabilitiesByFunctionOrProcess && !showNamespaceChart"
         :data="doc"
         :show-library-rules="showLibraryRules"
+        :show-column-filters="showColumnFilters"
     />
     <ProcessCapabilities
         v-else-if="doc.meta.flavor === 'dynamic' && showCapabilitiesByFunctionOrProcess && !showNamespaceChart"
         :data="doc"
         :show-capabilities-by-process="showCapabilitiesByFunctionOrProcess"
         :show-library-rules="showLibraryRules"
+        :show-column-filters="showColumnFilters"
     />
     <NamespaceChart v-else-if="showNamespaceChart" :data="doc" />
 </template>

From 8ca88d94d5e47c7ed3a67f51e301dbfd8c5f4273 Mon Sep 17 00:00:00 2001
From: Soufiane Fariss <rev.fariss@gmail.com>
Date: Fri, 16 Aug 2024 14:14:20 +0200
Subject: [PATCH 4/4] disable show lib rules button if none

---
 web/explorer/src/components/SettingsPanel.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/explorer/src/components/SettingsPanel.vue b/web/explorer/src/components/SettingsPanel.vue
index 94c0fefd..9dddd2f0 100644
--- a/web/explorer/src/components/SettingsPanel.vue
+++ b/web/explorer/src/components/SettingsPanel.vue
@@ -16,13 +16,14 @@
                         v-model="showLibraryRules"
                         inputId="showLibraryRules"
                         :binary="true"
-                        :disabled="showNamespaceChart"
+                        :disabled="showNamespaceChart || libraryRuleMatchesCount === 0"
                     />
                     <label for="showLibraryRules">
                         <span v-if="libraryRuleMatchesCount > 1">
                             Show {{ libraryRuleMatchesCount }} distinct library rules
                         </span>
-                        <span v-else>Show 1 distinct library rule</span>
+                        <span v-else-if="libraryRuleMatchesCount === 1">Show 1 distinct library rule</span>
+                        <span v-else>No library rules matched</span>
                     </label>
                 </div>
                 <div class="flex flex-row align-items-center gap-2">