feat: add filtering support to event grid (#284)

* chore: bump `ag-grid-community` and `ag-grid-react` to `v34.1.2`

* feat: add filtering support to event grid

* fix: 2nd arg search

* chore: cleanup

Author: hitarth-gg

package-lock.json

@@ -79,8 +79,8 @@
     "@fontsource-variable/roboto": "^5.2.5",
     "@fontsource/space-mono": "^5.2.5",
     "@microlink/react-json-view": "^1.26.2",
-    "ag-grid-community": "^33.3.2",
-    "ag-grid-react": "^33.3.2",
+    "ag-grid-community": "^34.1.2",
+    "ag-grid-react": "^34.1.2",
     "denque": "^2.1.0",
     "lucide-react": "^0.513.0",
     "react": "^19.1.0",

package.json

@@ -0,0 +1,66 @@
+import type { CustomFilterDisplayProps } from 'ag-grid-react';
+import { Check } from 'lucide-react';
+import type { Direction } from '../../../types/shared';
+import DirectionBadge from '../components/DirectionBadge';
+
+const ALL_DIRECTIONS: Direction[] = [
+  'renderer-to-main',
+  'main-to-renderer',
+  'service-worker-to-main',
+  'main-to-service-worker',
+  'renderer',
+  'main',
+];
+
+export default function DirectionFilter({
+  model,
+  onModelChange,
+}: CustomFilterDisplayProps<string[]>) {
+  const selected: Direction[] = model ?? [];
+
+  const toggle = (dir: Direction) => {
+    if (selected.includes(dir)) {
+      const next = selected.filter((d) => d !== dir);
+      onModelChange(next.length ? next : null);
+    } else {
+      onModelChange([...selected, dir]);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-1 p-1">
+      {ALL_DIRECTIONS.map((dir) => {
+        const isSelected = selected.includes(dir);
+        return (
+          <div
+            key={dir}
+            onClick={() => toggle(dir)}
+            className="flex cursor-pointer items-center gap-1 rounded-sm p-1 transition-all duration-150"
+          >
+            <div
+              className={`flex h-5 w-5 items-center justify-center rounded-sm border-2 transition-all duration-150 ${
+                isSelected
+                  ? 'border-blue-500 bg-blue-500 text-white'
+                  : 'border-gray-300 hover:border-gray-400 dark:border-charcoal-300'
+              } `}
+            >
+              {isSelected && <Check size={12} strokeWidth={3} />}
+            </div>
+            <DirectionBadge direction={dir} />
+          </div>
+        );
+      })}
+
+      {selected.length > 0 && (
+        <div className="mt-1 flex items-center justify-center border-t border-gray-100 pt-1 dark:border-charcoal-300">
+          <button
+            onClick={() => onModelChange(null)}
+            className="w-full text-center text-xs text-gray-500 transition-colors duration-150 hover:text-gray-700 dark:text-charcoal-100 dark:hover:text-gray-100"
+          >
+            Clear all
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

src/extension/react/AgGridFilters/DirectionFilter.tsx

@@ -0,0 +1,14 @@
+import type { DoesFilterPassParams } from 'ag-grid-community';
+import type { Direction } from '../../../types/shared';
+
+export const directionDoesFilterPass = ({
+  model,
+  node,
+  handlerParams,
+}: DoesFilterPassParams<any, any, Direction[]>) => {
+  if (!model || model.length === 0) return true;
+
+  const value: Direction | null | undefined = handlerParams.getValue(node);
+  if (!value) return false;
+  else return model.includes(value);
+};

src/extension/react/AgGridFilters/filters.ts

@@ -15,6 +15,11 @@ import {
   ScrollApiModule,
   TooltipModule,
   RowApiModule,
+  TextFilterModule,
+  NumberFilterModule,
+  DateFilterModule,
+  CustomFilterModule,
+  ValidationModule,
 } from 'ag-grid-community';
 import { Ban, Lock, LockOpen, Moon, PanelBottom, PanelRight, Sun } from 'lucide-react';
 import { MSG_TYPE, PORT_NAME } from '../../../common/constants';
@@ -31,8 +36,15 @@ ModuleRegistry.registerModules([
   ScrollApiModule,
   TooltipModule,
   RowApiModule,
+  TextFilterModule,
+  NumberFilterModule,
+  DateFilterModule,
+  CustomFilterModule,
+  ValidationModule,
 ]);
 import { useDevtronContext } from '../context/context';
+import DirectionFilter from '../AgGridFilters/DirectionFilter';
+import { directionDoesFilterPass } from '../AgGridFilters/filters';
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -219,7 +231,7 @@ function Panel() {
         field: 'serialNumber',
         width: 55,
         cellClass: 'flex !p-1 items-center h-full text-xs',
-        headerClass: '!h-6',
+        headerClass: '!h-6 !px-1.5',
       },
       {
         headerName: 'Time',
@@ -229,7 +241,7 @@ function Panel() {
           return formatTimestamp(params.value);
         },
         cellClass: 'flex !p-1 items-center h-full text-xs',
-        headerClass: '!h-6',
+        headerClass: '!h-6 !px-1.5',
       },
       {
         headerName: 'Direction',
@@ -239,14 +251,15 @@ function Panel() {
           return <DirectionBadge direction={params.value} />;
         },
         cellClass: 'flex !p-1 items-center h-full',
-        headerClass: '!h-6',
+        headerClass: '!h-6 !px-1.5',
+        filter: { component: DirectionFilter, doesFilterPass: directionDoesFilterPass },
       },
       {
         headerName: 'Channel',
         field: 'channel',
         flex: 1,
         cellClass: 'font-roboto text-[13px] !p-1 h-full flex items-center',
-        headerClass: '!h-6',
+        headerClass: '!h-6 !px-1.5',
         cellRenderer: (params: ICellRendererParams<IpcEventDataIndexed>) => {
           return (
             <div title={params.value}>
@@ -259,6 +272,7 @@ function Panel() {
             </div>
           );
         },
+        filter: 'agTextColumnFilter',
       },
       {
         headerName: 'Data',
@@ -270,8 +284,10 @@ function Panel() {
           return <span className="truncate font-space-mono text-xs">{preview}</span>;
         },
         cellClass: 'flex !p-1 items-center h-full',
-        headerClass: '!h-6',
+        headerClass: '!h-6 !px-1.5',
         resizable: false,
+        filter: 'agTextColumnFilter',
+        filterValueGetter: (params) => JSON.stringify(params.data?.args),
       },
     ],
     [],
@@ -389,6 +405,7 @@ function Panel() {
             suppressCellFocus={true}
             headerHeight={25}
             rowHeight={29}
+            enableFilterHandlers={true}
           />
         </div>
       </div>