Search bar for circuits (#350)

* Removed the component of search bar and filter options

* Reinstate the search function matching the logic of filters

---------

Co-authored-by: Loris Olivier <53363974+loris-maru@users.noreply.github.com>

Author: loris-olivier-obi

src/components/explore-section/Circuit/global/circuit-table.tsx

@@ -11,6 +11,7 @@ import DownloadContainer from './download/download-container';
 import SubcircuitTable from './subcircuit-table';
 
 import NumericFilters from './numeric-filter';
+import SearchBar from './search-bar';
 
 import { classNames } from '@/util/utils';
 import styles from './exploreCircuitTable.module.scss';
@@ -28,7 +29,7 @@ export default function CircuitTable({
   const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);
 
   // FILTERING
-  // const [searchQuery, setSearchQuery] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState<string>('');
   const [numericFilter, setNumericFilter] = useState<NumericFilterOptions | null>(null);
   const [minValue, setMinValue] = useState<number | undefined>(undefined);
   const [maxValue, setMaxValue] = useState<number | undefined>(undefined);
@@ -88,6 +89,7 @@ export default function CircuitTable({
           numericFilter={numericFilter} // Pass filter props
           minValue={minValue}
           maxValue={maxValue}
+          searchQuery={searchQuery}
         />
       ) : null,
     [
@@ -99,14 +101,15 @@ export default function CircuitTable({
       numericFilter,
       minValue,
       maxValue,
+      searchQuery,
     ]
   );
 
   return (
     <div className="relative flex w-full flex-col">
       {hasSearch && (
         <div className="relative mb-8 flex w-full flex-row justify-between px-8">
-          {/* <SearchBar searchQuery={searchQuery} onSearchChange={setSearchQuery} /> */}
+          <SearchBar searchQuery={searchQuery} onSearchChange={setSearchQuery} />
           <NumericFilters
             filter={numericFilter}
             minValue={minValue}
@@ -138,7 +141,7 @@ export default function CircuitTable({
               rowExpandable: (record) => !!record.subcircuits && record.subcircuits.length > 0,
             }}
             rowClassName={(record) =>
-              circuitMatchFilter(record, numericFilter, minValue, maxValue)
+              circuitMatchFilter(record, numericFilter, minValue, maxValue, searchQuery)
                 ? styles.matchingRow
                 : styles.nonMatchingRow
             }

src/components/explore-section/Circuit/global/download/download-container.tsx

@@ -73,7 +73,7 @@ export default function DownloadContainer({
       ) : (
         <div className="text-primary-2">Full circuit data is not available.</div>
       )}
-      <div className="my-8 border-y border-solid border-primary-7 py-4 text-base font-bold text-primary-4">
+      <div className="my-8 border-y border-solid border-primary-7 py-4 text-xl font-bold uppercase tracking-wide text-primary-4">
         Download components only
       </div>
       <div className="flex w-full flex-col gap-y-12">

src/components/explore-section/Circuit/global/subcircuit-table.tsx

@@ -18,6 +18,7 @@ export type SubcircuitsTableProps = {
   numericFilter: NumericFilterOptions | null;
   minValue: number | undefined;
   maxValue: number | undefined;
+  searchQuery: string;
 };
 
 export default function SubcircuitTable({
@@ -28,6 +29,7 @@ export default function SubcircuitTable({
   numericFilter,
   minValue,
   maxValue,
+  searchQuery,
 }: SubcircuitsTableProps) {
   const renderSubcircuits = (subCircuit: CircuitSchemaProps) => (
     <SubcircuitTable
@@ -38,6 +40,7 @@ export default function SubcircuitTable({
       numericFilter={numericFilter}
       minValue={minValue}
       maxValue={maxValue}
+      searchQuery={searchQuery}
     />
   );
 
@@ -62,7 +65,7 @@ export default function SubcircuitTable({
           rowExpandable: (record) => !!record.subcircuits && record.subcircuits.length > 0,
         }}
         rowClassName={(record) =>
-          circuitMatchFilter(record, numericFilter, minValue, maxValue)
+          circuitMatchFilter(record, numericFilter, minValue, maxValue, searchQuery)
             ? styles.matchingRow
             : styles.nonMatchingRow
         }

src/components/explore-section/Circuit/utils/circuits-match-filter.ts

@@ -4,22 +4,42 @@ export function circuitMatchFilter(
   circuit: CircuitSchemaProps,
   filter: NumericFilterOptions | null,
   minValue: number | undefined,
-  maxValue: number | undefined
+  maxValue: number | undefined,
+  searchQuery: string
 ): boolean {
-  if (!filter) return true;
+  let numericMatch = true;
 
-  const { property, type } = filter;
-  const value = circuit[property] as number;
+  if (filter) {
+    const { property, type } = filter;
+    const value = circuit[property];
 
-  if (type === 'greaterThan' && minValue !== undefined) {
-    return value > minValue;
+    if (typeof value !== 'number' || Number.isNaN(value)) {
+      numericMatch = false;
+    } else {
+      if (type === 'greaterThan' && minValue !== undefined) {
+        numericMatch = value > minValue;
+      }
+      if (type === 'lessThan' && maxValue !== undefined) {
+        numericMatch = value < maxValue;
+      }
+      if (type === 'between' && minValue !== undefined && maxValue !== undefined) {
+        numericMatch = value >= minValue && value <= maxValue;
+      }
+    }
   }
-  if (type === 'lessThan' && maxValue !== undefined) {
-    return value < maxValue;
-  }
-  if (type === 'between' && minValue !== undefined && maxValue !== undefined) {
-    return value >= minValue && value <= maxValue;
+
+  let searchMatch = true;
+  if (searchQuery.trim()) {
+    const query = searchQuery.toLowerCase().trim();
+
+    searchMatch =
+      circuit.name?.toLowerCase().includes(query) ||
+      false ||
+      circuit.brainRegion?.toLowerCase().includes(query) ||
+      false ||
+      circuit.description?.toLowerCase().includes(query) ||
+      false;
   }
 
-  return true;
+  return numericMatch && searchMatch;
 }