Add filter to circuit tables

src/app/app/virtual-lab/(free)/explore/(interactive)/interactive/(data)/model/circuit/[id]/page.tsx

@@ -1,4 +1,4 @@
-import CircuitDetails from '@/components/explore-section/Circuit/DetailView/MainDetailViewCore';
+import CircuitDetails from '@/components/explore-section/Circuit/DetailView/main-detail-view-core';
 
 export default function CircuitDetailPage() {
   return <CircuitDetails />;

src/app/app/virtual-lab/(free)/explore/(interactive)/interactive/(data)/model/circuit/page.tsx

@@ -1,4 +1,4 @@
-import CircuitsListingPageComponent from '@/components/explore-section/Circuit/global/CircuitsListingPageComponent';
+import CircuitsListingPageComponent from '@/components/explore-section/Circuit/global/circuits-listing-page-component';
 
 export default function ExploreModelCircuitListingPage() {
   return <CircuitsListingPageComponent />;

src/app/app/virtual-lab/lab/[virtualLabId]/project/[projectId]/explore/interactive/(data)/model/circuit/[id]/page.tsx

@@ -1,4 +1,4 @@
-import CircuitDetails from '@/components/explore-section/Circuit/DetailView/MainDetailViewCore';
+import CircuitDetails from '@/components/explore-section/Circuit/DetailView/main-detail-view-core';
 
 export default function CircuitDetailPage() {
   return <CircuitDetails />;

src/app/app/virtual-lab/lab/[virtualLabId]/project/[projectId]/explore/interactive/(data)/model/circuit/page.tsx

@@ -1,4 +1,4 @@
-import CircuitsListingPageComponent from '@/components/explore-section/Circuit/global/CircuitsListingPageComponent';
+import CircuitsListingPageComponent from '@/components/explore-section/Circuit/global/circuits-listing-page-component';
 
 export default function ExploreModelCircuitListingPage() {
   return <CircuitsListingPageComponent />;

src/components/explore-section/Circuit/DetailView/MainDetailViewCore.tsx → src/components/explore-section/Circuit/DetailView/main-detail-view-core.tsx

@@ -4,8 +4,8 @@ import { useSetAtom } from 'jotai';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
-import HeaderDetailView from './HeaderDetailView';
-import SectionMainContainer from './sections/SectionMainContainer';
+import HeaderDetailView from './header-detail-view';
+import SectionMainContainer from './sections/section-main-container';
 import Visualiser from './visualisation/Visualiser';
 
 import { CircuitSchemaProps } from '@/components/explore-section/Circuit/type';

src/components/explore-section/Circuit/DetailView/sections/RelatedCircuits/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import CircuitTable from '../../../global/CircuitTable';
+import CircuitTable from '../../../global/circuit-table';
 import { CircuitSchemaProps } from '../../../type';
 import SubtitleBar from '../global/SubtitleBar';
 
@@ -18,20 +18,20 @@ export default function RelatedCircuitsSection({
       {content.parent !== null && (
         <>
           <SubtitleBar title="Parent circuit" />
-          <CircuitTable data={parentCircuit ? [parentCircuit] : []} downloadable={false} />
+          <CircuitTable data={parentCircuit ? [parentCircuit] : []} />
         </>
       )}
       {content.subcircuits.length > 0 && (
         <>
           <SubtitleBar title={content.subcircuits.length > 1 ? 'Subcircuits' : 'Subcircuit'} />
-          <CircuitTable data={content.subcircuits} downloadable={false} />
+          <CircuitTable data={content.subcircuits} />
         </>
       )}
       {(derivedCircuits && derivedCircuits.length > 0) ||
         (derivedCircuits === null && (
           <>
             <SubtitleBar title="Derived from" />
-            <CircuitTable data={derivedCircuits || []} downloadable={false} />
+            <CircuitTable data={derivedCircuits || []} />
           </>
         ))}
     </div>

src/components/explore-section/Circuit/DetailView/sections/SectionMainContainer.tsx → src/components/explore-section/Circuit/DetailView/sections/section-main-container.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { CircuitSchemaProps } from '../../type';
 
-import SectionContentBlock from './SectionContentBlock';
-import SectionTabs from './SectionTabs';
+import SectionContentBlock from './section-content-bloc';
+import SectionTabs from './section-tabs';
 
 export default function SectionMainContainer({
   content,

src/components/explore-section/Circuit/ListView/ExploreCircuitTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import CircuitTable from '../global/CircuitTable';
+import CircuitTable from '../global/circuit-table';
 import { CircuitSchemaProps } from '../type';
 
 export default function ExploreCircuitTable({ data }: { data: CircuitSchemaProps[] }) {

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

@@ -1,34 +1,26 @@
 import { Table } from 'antd';
 import { usePathname } from 'next/navigation';
-import { Key, ReactNode, useCallback, useState } from 'react';
-import { CircuitSchemaProps } from '../type';
+import { Key, useCallback, useEffect, useState } from 'react';
+import { CircuitSchemaProps, NumericFilterOptions } from '../type';
 import calculateSubcircuitsForParent from '../utils/calculate-subcircuits-for-parent';
+import { circuitMatchFilter } from '../utils/circuits-match-filter';
+import collectExpandableKeys from '../utils/collectExpandableKeys';
+
 import columns from './Columns';
-import SubcircuitTable from './SubcircuitsTable';
-import DownloadContainer from './download/DownloadContainer';
+import DownloadContainer from './download/download-container';
+import SubcircuitTable from './subcircuit-table';
+
+import NumericFilters from './numeric-filter';
 
 import { classNames } from '@/util/utils';
 import styles from './exploreCircuitTable.module.scss';
 
-export type CustomRowProps = {
-  circuit?: CircuitSchemaProps;
-  children: ReactNode;
-  record?: CircuitSchemaProps;
-  handleExpandRow: (expanded: boolean, record: CircuitSchemaProps) => void;
-  expandedRowKeys: Key[];
-  className?: string;
-  style?: React.CSSProperties;
-  'data-row-key'?: string;
-};
-
 export default function CircuitTable({
   data,
-  downloadable = true,
-  // hasSearch = true,
+  hasSearch = true,
 }: {
   data: CircuitSchemaProps[];
-  downloadable?: boolean;
-  // hasSearch?: boolean;
+  hasSearch?: boolean;
 }) {
   const [circuitToDownload, setCircuitToDownload] = useState<CircuitSchemaProps | null>(null);
   const [downloadModalOpen, SetDownloadModalOpen] = useState<boolean>(false);
@@ -37,11 +29,18 @@ export default function CircuitTable({
 
   // FILTERING
   // 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);
+  const [numericFilter, setNumericFilter] = useState<NumericFilterOptions | null>(null);
+  const [minValue, setMinValue] = useState<number | undefined>(undefined);
+  const [maxValue, setMaxValue] = useState<number | undefined>(undefined);
 
-  // const filteredData = useFilteredData(data, { searchQuery, numericFilter });
+  useEffect(() => {
+    if (numericFilter) {
+      const expandableKeys = collectExpandableKeys(data);
+      setExpandedRowKeys(expandableKeys);
+    } else {
+      setExpandedRowKeys([]);
+    }
+  }, [numericFilter, data]);
 
   const handleRowExpandClick = useCallback((row: CircuitSchemaProps, _index: number) => {
     const rowKey = row.key;
@@ -86,27 +85,28 @@ export default function CircuitTable({
           circuit={circuit}
           expandedRowKeys={expandedRowKeys}
           onExpand={handleExpandRow}
-          downloadable={downloadable}
+          numericFilter={numericFilter} // Pass filter props
+          minValue={minValue}
+          maxValue={maxValue}
         />
       ) : null,
     [
       expandedRowKeys,
       handleExpandRow,
-      downloadable,
       handleOpenDownloadModal,
       handleRowExpandClick,
       isCircuitDetailPage,
+      numericFilter,
+      minValue,
+      maxValue,
     ]
   );
 
-  // const lastRow: CircuitSchemaProps | undefined = selectedRows.at(-1);
-  // const fileUrl = lastRow?.files?.[0]?.url;
-
   return (
     <div className="relative flex w-full flex-col">
-      {/* {hasSearch && (
+      {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}
@@ -116,16 +116,11 @@ export default function CircuitTable({
             onMaxChange={setMaxValue}
           />
         </div>
-      )} */}
+      )}
       <div className="relative w-full overflow-x-scroll">
         <div className="tableAndButton">
           <Table
             className={styles.circuitTable}
-            style={
-              {
-                '--ant-table-expand-icon-col-width': '0px',
-              } as React.CSSProperties
-            }
             dataSource={data}
             columns={columns(
               expandedRowKeys,
@@ -142,8 +137,12 @@ export default function CircuitTable({
               expandIcon: () => null,
               rowExpandable: (record) => !!record.subcircuits && record.subcircuits.length > 0,
             }}
+            rowClassName={(record) =>
+              circuitMatchFilter(record, numericFilter, minValue, maxValue)
+                ? styles.matchingRow
+                : styles.nonMatchingRow
+            }
           />
-          {/* {fileUrl && <DownloadCircuitButton fileUrl={fileUrl} selectedRowKeys={selectedRowKeys} />} */}
         </div>
         <>
           <div

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

@@ -2,8 +2,8 @@
 
 import Link from 'next/link';
 import { CircuitSchemaProps, DownloadItemProps, FileTypeHeaderProps } from '../../type';
-import DownloadItem from './DownloadItem';
-import HeaderDownloadModal from './HeaderDownloadModal';
+import DownloadItem from './download-item';
+import HeaderDownloadModal from './header-download-modal';
 
 import fileTypeDescriptions from '@/components/explore-section/Constant/file-type-descriptions';
 import { DownloadIcon } from '@/components/icons';
@@ -25,7 +25,7 @@ export function FullCircuitItem({ content }: { content: DownloadItemProps }) {
         <p className="hyphens-auto text-sm font-light leading-normal text-primary-2">
           The complete circuit compressed in SONATA format,
           <a
-            href="https://github.com/AllenInstitute/sonata/blob/master/docs/SONATA_DEVELOPER_GUIDE.md"
+            href="https://sonata-extension.readthedocs.io/en/latest/"
             target="_blank"
             rel="noopener noreferrer"
             className="underline underline-offset-2"