add subcircuits in listing page with filters

add subcircuits and derived circuits in details page

Author: bilalesi

docker-compose.yml

@@ -47,4 +47,4 @@ services:
       - '3000:8000'
     env_file:
       - .env.local
-    restart: unless-stopped 
+    restart: unless-stopped

package.json

@@ -105,6 +105,7 @@
     "input-otp": "^1.4.2",
     "install": "^0.13.0",
     "jotai": "^2.7.2",
+    "jotai-cache": "^0.5.0",
     "jotai-devtools": "^0.11.0",
     "jotai-optics": "^0.4.0",
     "js-yaml": "^4.1.0",

pnpm-lock.yaml

@@ -81,9 +81,7 @@ export interface ICircuit
     Timestamps,
     EntityCoreOwnership,
     EntityCoreType,
-    EntityCoreBaseAsset {
-  sub_circuits?: Array<ICircuit>;
-}
+    EntityCoreBaseAsset {}
 
 type CircuitScaleFilter = {
   scale: string | null;

src/api/entitycore/types/entities/circuit.ts

@@ -4,12 +4,12 @@ export interface HierarchyNode {
   id: string;
   name: string;
   parent_id: string | null;
-  children: HierarchyNode[];
+  children: Array<HierarchyNode>;
   authorized_public: boolean;
   authorized_project_id: string;
 }
 
 export interface HierarchyTreeResponse {
   derivation_type: TDerivationType;
-  data: HierarchyNode[];
+  data: Array<HierarchyNode>;
 }

src/api/entitycore/types/shared/hierarchy.ts

@@ -1,4 +1,4 @@
-interface Pagination {
+export interface EntityCorePagination {
   page: number;
   page_size: number;
   total_items: number;
@@ -14,6 +14,6 @@ type Facet = {
 export type Facets = Record<string, Array<Facet>>;
 export interface EntityCoreResponse<T> {
   data: Array<T>;
-  pagination: Pagination;
+  pagination: EntityCorePagination;
   facets?: Facets;
 }

src/api/entitycore/types/shared/response.ts

@@ -45,8 +45,6 @@ function CustomTH({
   handleResizing: () => void;
   className?: string;
 }) {
-  console.log('–– – ExploreSectionTable.tsx:48 – props:', props);
-
   const { position, left, right, zIndex, transform } = style;
 
   // preserve positioning styles for fixed columns, but use our custom styles for everything else
@@ -295,6 +293,8 @@ export default function ExploreSectionTable<T extends EntityCoreIdentifiable>({
   rowClassName,
   tableStyle,
   onRow,
+  rowKey,
+  defaultDisplayLoadMore = true,
 }: TableProps<T> &
   AdditionalTableProps<T> & {
     renderButton?: (props: RenderButtonProps<T>) => ReactNode;
@@ -307,6 +307,7 @@ export default function ExploreSectionTable<T extends EntityCoreIdentifiable>({
     useBrainRegion?: boolean;
     expandableConfig?: ExpandableConfig<T>;
     tableStyle?: CSSProperties | undefined;
+    defaultDisplayLoadMore?: boolean;
   }) {
   const { rowSelection, selectedRows, clearSelectedRows } = useRowSelection({
     dataKey,
@@ -335,7 +336,7 @@ export default function ExploreSectionTable<T extends EntityCoreIdentifiable>({
         hasError={hasError}
         loading={loading}
         onCellClick={onCellClick}
-        rowKey={(row) => row.id}
+        rowKey={(row) => (rowKey && typeof rowKey === 'function' ? rowKey?.(row) : row.id)}
         rowSelection={rowSelection}
         showLoadMore={toggleDisplayMore}
         scrollable={scrollable}
@@ -352,7 +353,7 @@ export default function ExploreSectionTable<T extends EntityCoreIdentifiable>({
           visible={controlsVisible}
           dataType={dataContext.dataType}
         >
-          {displayLoadMoreBtn && (
+          {displayLoadMoreBtn && defaultDisplayLoadMore && (
             <LoadMoreButton
               hide={toggleDisplayMore}
               dataKey={dataKey}

src/components/explore-section/ExploreSectionListingView/ExploreSectionTable.tsx

@@ -99,7 +99,7 @@ export default function FilterControls({
       {!resourceId && <ExploreSectionNameSearch dataType={dataType} dataKey={dataKey} />}
       {dataType === DataType.Circuit && (
         <div className="text-red-500">
-          <ViewToggle setToggle={() => {}} toggle="flat" />
+          <ViewToggle />
         </div>
       )}
       <div className="inline-flex w-full place-content-end gap-2">

src/components/explore-section/ExploreSectionListingView/FilterControls.tsx

@@ -113,7 +113,7 @@ export function createExpandableTableConfig<T extends EntityCoreIdentifiable, P
         scroll: {
           x: undefined, // no horizontal scroll needed since parent will adjust
           y: undefined, // disable vertical scrolling to show all rows
-          ...expandedTableProps.scroll,
+          ...expandedTableProps?.scroll,
         },
         pagination: false as const, // ensure no pagination in nested table
       };

src/components/explore-section/ExploreSectionListingView/expandable-row/expandable-base-table.tsx

@@ -1,68 +1,47 @@
-import { useState, useCallback, ReactNode } from 'react';
+import { useState, useCallback, ReactNode, useEffect } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
+import { useAtomValue } from 'jotai';
 import { Spin } from 'antd';
-import get from 'lodash/get';
-import isNil from 'lodash/isNil';
-
 import type { ExpandableConfig } from 'antd/es/table/interface';
-import type { EntityCoreIdentifiable } from '@/api/entitycore/types/shared/global';
 
-export interface ExpandableTableCache<T extends EntityCoreIdentifiable> {
-  [key: string]: Array<T> | null;
-}
+import { resetFilterSignalAtom } from '@/features/entities/circuit/elements/context';
+import { log } from '@/utils/logger';
+
+import type { EntityCoreIdentifiable } from '@/api/entitycore/types/shared/global';
 
 export interface ExpandableTableState<T extends EntityCoreIdentifiable> {
-  expandedData: ExpandableTableCache<T>;
+  expandedData: Record<string, Array<T> | null>;
   loadingRows: Record<string, boolean>;
+  expandedRowKeys: Array<string>;
 }
 
 export interface UseExpandableTableOptions<T extends EntityCoreIdentifiable, P = unknown> {
-  /**
-   * fetch data for expanded row
-   */
+  // fetch data for expanded row
   fetcher?: (record: T, params?: P) => Promise<T | Array<T>>;
-  /**
-   * optional parameters to pass to fetcher
-   */
+  // optional parameters to pass to fetcher
   fetcherParams?: P;
-  /**
-   * get unique key for caching
-   */
   getRowKey: (record: T) => string;
-  /**
-   * get the id to fetch (e.g., id of circuit)
-   */
+  // get the id to fetch (e.g., id of circuit)
   getFetchId: (record: T) => string | null;
-  /**
-   * render expanded content
-   */
+  // render expanded content
   renderExpanded: (records: Array<T>, originalRecord: T, isLoading: boolean) => ReactNode;
-  /**
-   * determine if row is expandable
-   */
+  // determine if row is expandable
   isRowExpandable?: (record: T) => boolean;
-  /**
-   * clear cache when component unmounts
-   */
-  persistCache?: boolean;
-  /**
-   * index of the column to render the expand icon
-   */
+  // index of the column to render the expand icon
   expandIconColumnIndex?: number;
-  /**
-   * render the expand icon
-   */
+  // render the expand icon
   expandIcon?: ExpandableConfig<T>['expandIcon'];
+  // whether this is a top-level table that should sync with filter resets
+  isTopLevel?: boolean;
 }
 
 /**
- * Reusable hook for managing expandable tables with caching and hierarchy support
+ * Reusable hook for managing expandable tables with hierarchy support
  */
 export function useExpandableTable<T extends EntityCoreIdentifiable, P = unknown>(
   options: UseExpandableTableOptions<T, P>
 ): {
   expandableConfig: ExpandableConfig<T>;
-  clearCache: () => void;
   isRowExpanded: (record: T) => boolean;
   isRowLoading: (record: T) => boolean;
   getExpandedData: (record: T) => Array<T> | null;
@@ -74,22 +53,29 @@ export function useExpandableTable<T extends EntityCoreIdentifiable, P = unknown
     getFetchId,
     renderExpanded,
     isRowExpandable = () => true,
-    persistCache = true,
     expandIconColumnIndex,
     expandIcon,
+    isTopLevel = false,
   } = options;
 
   const [state, setState] = useState<ExpandableTableState<T>>({
     expandedData: {},
     loadingRows: {},
+    expandedRowKeys: [],
   });
 
-  const clearCache = useCallback(() => {
-    setState({
-      expandedData: {},
-      loadingRows: {},
-    });
-  }, []);
+  const resetFilterSignal = useAtomValue(resetFilterSignalAtom);
+
+  // Only top-level tables should reset when filters are cleared
+  useEffect(() => {
+    if (isTopLevel && resetFilterSignal > 0) {
+      setState({
+        expandedData: {},
+        loadingRows: {},
+        expandedRowKeys: [], // Clear expanded keys to sync with Ant Design table
+      });
+    }
+  }, [resetFilterSignal, isTopLevel]);
 
   const isRowExpanded = useCallback(
     (record: T): boolean => {
@@ -110,7 +96,7 @@ export function useExpandableTable<T extends EntityCoreIdentifiable, P = unknown
   const getExpandedData = useCallback(
     (record: T): Array<T> | null => {
       const key = getRowKey(record);
-      return get(state.expandedData, key, null);
+      return state.expandedData[key] || null;
     },
     [state.expandedData, getRowKey]
   );
@@ -121,31 +107,33 @@ export function useExpandableTable<T extends EntityCoreIdentifiable, P = unknown
       const fetchId = getFetchId(record);
 
       if (!expanded) {
-        // Row is being collapsed - remove from expanded data but keep in cache if persistCache is true
-        if (!persistCache) {
-          setState((prev) => {
-            const newExpandedData = { ...prev.expandedData };
-            delete newExpandedData[key];
-            const newLoadingRows = { ...prev.loadingRows };
-            delete newLoadingRows[key];
-            return {
-              expandedData: newExpandedData,
-              loadingRows: newLoadingRows,
-            };
-          });
-        }
-        return;
-      }
-
-      const existingData = get(state.expandedData, key, null);
-      if (!isNil(existingData)) {
+        setState((prev) => {
+          const newExpandedData = { ...prev.expandedData };
+          delete newExpandedData[key];
+          const newLoadingRows = { ...prev.loadingRows };
+          delete newLoadingRows[key];
+
+          const newState: ExpandableTableState<T> = {
+            expandedData: newExpandedData,
+            loadingRows: newLoadingRows,
+            expandedRowKeys: isTopLevel
+              ? prev.expandedRowKeys.filter((rowKey) => rowKey !== key)
+              : prev.expandedRowKeys,
+          };
+
+          return newState;
+        });
         return;
       }
 
       if (fetcher) {
         setState((prev) => ({
           ...prev,
           loadingRows: { ...prev.loadingRows, [key]: true },
+          expandedRowKeys:
+            isTopLevel && !prev.expandedRowKeys.includes(key)
+              ? [...prev.expandedRowKeys, key]
+              : prev.expandedRowKeys,
         }));
 
         try {
@@ -161,6 +149,7 @@ export function useExpandableTable<T extends EntityCoreIdentifiable, P = unknown
               ...prev.loadingRows,
               [key]: false,
             },
+            expandedRowKeys: prev.expandedRowKeys,
           }));
         } catch (error) {
           setState((prev) => ({
@@ -172,21 +161,22 @@ export function useExpandableTable<T extends EntityCoreIdentifiable, P = unknown
               ...prev.loadingRows,
               [key]: false,
             },
+            expandedRowKeys: prev.expandedRowKeys,
           }));
         }
       } else if (!fetchId) {
         // No fetcher and no fetchId - this shouldn't happen for expandable rows
         // eslint-disable-next-line no-console
-        console.warn('Row is expandable but no fetcher provided and no fetchId available');
+        log('warn', 'Row is expandable but no fetcher provided and no fetchId available');
       }
     },
-    [fetcher, fetcherParams, getRowKey, getFetchId, persistCache, state.expandedData]
+    [fetcher, fetcherParams, getRowKey, getFetchId, isTopLevel]
   );
 
   const expandedRowRender = useCallback(
     (record: T): ReactNode => {
       const key = getRowKey(record);
-      const records = get(state.expandedData, key, null);
+      const records = state.expandedData[key] || null;
       const isLoading = Boolean(state.loadingRows[key]);
 
       if (isLoading) {
@@ -197,7 +187,7 @@ export function useExpandableTable<T extends EntityCoreIdentifiable, P = unknown
         );
       }
 
-      if (isNil(records)) {
+      if (records === null) {
         return null;
       }
 
@@ -206,17 +196,19 @@ export function useExpandableTable<T extends EntityCoreIdentifiable, P = unknown
     [state.expandedData, state.loadingRows, getRowKey, renderExpanded]
   );
 
+  // create expandable config - only use controlled mode for top-level tables
   const expandableConfig: ExpandableConfig<T> = {
     rowExpandable: isRowExpandable,
     onExpand,
     expandedRowRender,
     expandIconColumnIndex,
     expandIcon,
+    // only top-level tables use controlled mode (expandedRowKeys)
+    ...(isTopLevel && { expandedRowKeys: state.expandedRowKeys }),
   };
 
   return {
     expandableConfig,
-    clearCache,
     isRowExpanded,
     isRowLoading,
     getExpandedData,