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] 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 4372da335..c3e9e463a 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 9b84fc14e..71daf622b 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 85efb2e2e..fc020fd3b 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>