Ciruit table hide non matching filtered circuits

src/components/explore-section/Circuit/global/Columns.tsx

@@ -3,7 +3,8 @@ import { ColumnType } from 'antd/es/table';
 import Link from 'next/link';
 import { Key, SyntheticEvent } from 'react';
 import { ResizeCallbackData } from 'react-resizable';
-import { CircuitSchemaProps } from '../type';
+import { CircuitSchemaProps, NumericFilterOptions } from '../type';
+import { circuitMatchFilter } from '../utils/circuits-match-filter';
 import formatNumberWithComma from '../utils/format-number-with-comma';
 
 import { ChevronRight, DownloadIcon } from '@/components/icons';
@@ -22,7 +23,11 @@ const columns = (
   handleExpandRow: (row: CircuitSchemaProps, index: number) => void,
   isCircuitDetailPage: boolean,
   handleOpenDownloadModal: (record: CircuitSchemaProps) => void,
-  toggle: 'hierarchical' | 'flat'
+  toggle: 'hierarchical' | 'flat',
+  numericFilter: NumericFilterOptions | null,
+  minValue: number | undefined,
+  maxValue: number | undefined,
+  searchQuery: string
 ): ResizableColumnType[] => {
   return [
     {
@@ -50,17 +55,27 @@ const columns = (
       key: 'name',
       width: 150,
       render: (_value: any, record: CircuitSchemaProps, _index: number) => {
+        const isFilterActive = numericFilter !== null || searchQuery.trim() !== '';
+        const isMatching =
+          isFilterActive &&
+          circuitMatchFilter(record, numericFilter, minValue, maxValue, searchQuery);
         const href = isCircuitDetailPage ? `./${record.key}` : `./circuit/${record.key}`;
         return (
-          <Link href={href} className="whitespace-nowrap">
+          <Link
+            href={href}
+            className={classNames(
+              'whitespace-nowrap',
+              toggle === 'hierarchical' && isMatching ? 'font-bold' : ''
+            )}
+          >
             {record.name}
           </Link>
         );
       },
     },
     {
       title: 'Subcircuits',
-      key: 'hasSubcircuits',
+      key: 'subcircuits',
       width: 120,
       render: (_value: any, record: CircuitSchemaProps, index: number) => {
         const isExpanded = Array.isArray(expandedRowKeys) && expandedRowKeys.includes(record.key);

src/components/explore-section/Circuit/global/ViewToggle.tsx

@@ -1,3 +1,5 @@
+import { Tooltip } from 'antd';
+
 import { FlatListViewIcon, HierarchicalViewIcon } from '@/components/icons';
 import { classNames } from '@/util/utils';
 
@@ -17,12 +19,14 @@ export default function ViewToggle({
     <div className="relative flex flex-row items-center gap-x-4">
       <div className="text-base font-medium text-primary-9">View:</div>
       <div className="relative flex flex-row items-center gap-x-2">
-        <div>
-          <HierarchicalViewIcon
-            iconColor={toggle === 'hierarchical' ? '#002766' : '#AAA'}
-            className="h-4 w-4"
-          />
-        </div>
+        <Tooltip title="Hierarchical view">
+          <div>
+            <HierarchicalViewIcon
+              iconColor={toggle === 'hierarchical' ? '#002766' : '#AAA'}
+              className="h-4 w-4"
+            />
+          </div>
+        </Tooltip>
         <button
           type="button"
           className="relative h-6 w-12 rounded-xl border border-solid border-gray-200"
@@ -37,12 +41,14 @@ export default function ViewToggle({
             )}
           />
         </button>
-        <div>
-          <FlatListViewIcon
-            iconColor={toggle === 'flat' ? '#002766' : '#AAA'}
-            className="h-4 w-4"
-          />
-        </div>
+        <Tooltip title="Flat list view">
+          <div>
+            <FlatListViewIcon
+              iconColor={toggle === 'flat' ? '#002766' : '#AAA'}
+              className="h-4 w-4"
+            />
+          </div>
+        </Tooltip>
       </div>
     </div>
   );