feat: Update tree rendering with efficient algorithms

Author: PintoGideon

src/components/FeedOutputBrowser/FileBrowser.tsx

@@ -89,7 +89,6 @@ const FileBrowser = (props: FileBrowserProps) => {
     filesMap?.length === 0 &&
     subFoldersMap?.length === 0 &&
     linkFilesMap?.length === 0;
-  // Example: Add up all valid totalCounts (ignore -1)
   const linkCount =
     linksPagination?.totalCount && linksPagination.totalCount !== -1
       ? linksPagination.totalCount
@@ -102,7 +101,6 @@ const FileBrowser = (props: FileBrowserProps) => {
     filesPagination?.totalCount && filesPagination.totalCount !== -1
       ? filesPagination.totalCount
       : 0;
-  // Combined total
   const totalResources = linkCount + folderCount + fileCount;
 
   useEffect(() => {
@@ -120,7 +118,6 @@ const FileBrowser = (props: FileBrowserProps) => {
     if (isError) {
       api.error({
         message: "Download Error",
-        //@ts-ignore
         description: downloadError.message,
       });
     }
@@ -139,12 +136,10 @@ const FileBrowser = (props: FileBrowserProps) => {
       }
     };
 
-    // This is somewhat tricky. do not allow the user to click paths before the selected plugin.
     const disabledIndex = breadcrumb.findIndex(
       (path) => path === `${selected.data.plugin_name}_${selected.data.id}`,
     );
-    // If this selected plugin is of the type fs, assume that this is the first node of the tree and could have link files. All the paths
-    // that the user navigates to should not be clickable
+
     const shouldNotClick =
       (disabledIndex > 1 && index <= disabledIndex) ||
       selected.data.plugin_type === "fs";
@@ -181,7 +176,6 @@ const FileBrowser = (props: FileBrowserProps) => {
     <Grid hasGutter className="file-browser">
       {contextHolder}
       <PanelGroup autoSaveId="conditional" direction="horizontal">
-        {/* Left Panel: File Browser */}
         {drawerState.files.open && (
           <>
             <Panel
@@ -192,7 +186,6 @@ const FileBrowser = (props: FileBrowserProps) => {
               minSize={20}
               style={{ display: "flex", flexDirection: "column" }}
             >
-              {/* Drawer Action Button for Files */}
               <DrawerActionButton
                 content="Files"
                 handleMaximize={() => {
@@ -205,7 +198,6 @@ const FileBrowser = (props: FileBrowserProps) => {
               />
 
               <>
-                {/* Sticky Container */}
                 <div className="sticky-container">
                   <Operations
                     customClassName={{
@@ -227,7 +219,6 @@ const FileBrowser = (props: FileBrowserProps) => {
                         {breadcrumb.map(generateBreadcrumb)}
                       </Breadcrumb>
                     </div>
-                    {/* Optional Back Button */}
                     <div>
                       {additionalKey !== currentPath &&
                         selected.data.plugin_type === "fs" && (
@@ -249,7 +240,6 @@ const FileBrowser = (props: FileBrowserProps) => {
                     </div>
                   </div>
                 </div>
-                {/* Scrollable Content */}
 
                 <div style={{ flex: 1, overflow: "auto" }}>
                   <Table
@@ -268,7 +258,6 @@ const FileBrowser = (props: FileBrowserProps) => {
                         <Th aria-label="file-creator" width={20}>
                           {columnNames.created}
                         </Th>
-
                         <Th aria-label="file-size" width={20}>
                           {columnNames.size}
                         </Th>
@@ -343,29 +332,23 @@ const FileBrowser = (props: FileBrowserProps) => {
                       )}
                     </Tbody>
                   </Table>
-                  {/* Load More Button */}
                   {fetchMore && !isLoading && (
                     <Button onClick={handlePagination} variant="link">
                       Load more data...
                     </Button>
                   )}
-                  {/* Observer Target */}
                   <div
                     style={{ height: "1px", marginTop: "10px" }}
                     ref={observerTarget}
                   />
                 </div>
               </>
             </Panel>
-            {/* Resize Handle */}
             <PanelResizeHandle className="ResizeHandle" />
           </>
         )}
-
-        {/* Right Panel: Preview Panel */}
         {drawerState.preview.open && (
           <Panel order={2} id="5" defaultSize={47} minSize={20}>
-            {/* Drawer Action Button for Preview */}
             <DrawerActionButton
               content="Preview"
               handleMaximize={() => {
@@ -379,15 +362,7 @@ const FileBrowser = (props: FileBrowserProps) => {
 
             {drawerState.preview.currentlyActive === "preview" &&
               selectedFile && (
-                <FileDetailView
-                  gallery={true}
-                  selectedFile={selectedFile}
-                  preview="large"
-                  list={filesMap}
-                  fetchMore={fetchMore}
-                  handlePagination={handlePagination}
-                  filesLoading={isLoading}
-                />
+                <FileDetailView selectedFile={selectedFile} preview="large" />
               )}
             {drawerState.preview.currentlyActive === "xtk" && <XtkViewer />}
           </Panel>
@@ -402,12 +377,7 @@ export default FileBrowser;
 const renderSkeletonRows = () => (
   <>
     {Array.from({ length: 5 }).map((_, index) => (
-      <Tr
-        key={`skeleton-row-${
-          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-          index
-        }`}
-      >
+      <Tr key={`skeleton-row-${index}`}>
         <Th>
           <Skeleton width="20px" />
         </Th>

src/components/FeedOutputBrowser/useFeedBrowser.tsx

@@ -3,14 +3,12 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useAppSelector } from "../../store/hooks";
 import { fetchFolders } from "../NewLibrary";
 
-// Terminal plugin statuses
 const TERMINAL_STATUSES = [
   "finishedSuccessfully",
   "finishedWithError",
   "cancelled",
 ];
 
-// Helper: initial download state
 const getInitialDownloadState = () => ({
   count: 0,
   status: false,
@@ -19,28 +17,17 @@ const getInitialDownloadState = () => ({
   fetchingFiles: false,
 });
 
-/**
- * Custom hook to browse feed output files for a selected plugin.
- * It conditionally fetches files only if the plugin is finished.
- *
- * @param statuses A dictionary of pluginId -> polled status
- */
 export const useFeedBrowser = (statuses: Record<number, string>) => {
-  // Redux states
   const drawerState = useAppSelector((state) => state.drawers);
   const selected = useAppSelector((state) => state.instance.selectedPlugin);
-
-  // Local states
   const [download, setDownload] = useState(getInitialDownloadState);
   const [currentPath, setCurrentPath] = useState("");
   const [pageNumber, setPageNumber] = useState(1);
 
-  // Check if the plugin is in a terminal status
   const isFinished =
     TERMINAL_STATUSES.includes(statuses[selected?.data.id]) ||
     TERMINAL_STATUSES.includes(selected?.data.status);
 
-  // React Query: fetch plugin files, conditionally enabled if plugin is finished
   const queryKey = ["pluginFiles", currentPath, pageNumber];
   const {
     data: pluginFilesPayload,
@@ -55,18 +42,15 @@ export const useFeedBrowser = (statuses: Record<number, string>) => {
     structuralSharing: true,
   });
 
-  // Handle pagination
   const handlePagination = useCallback(() => {
     setPageNumber((prev) => prev + 1);
   }, []);
 
-  // Check if more data can be fetched
   const fetchMore =
     pluginFilesPayload?.foldersPagination?.hasNextPage ||
     pluginFilesPayload?.filesPagination?.hasNextPage ||
     pluginFilesPayload?.linksPagination?.hasNextPage;
 
-  // Intersection observer to auto-fetch next page when scrolled to bottom
   const observerTarget = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -77,7 +61,6 @@ export const useFeedBrowser = (statuses: Record<number, string>) => {
       },
       { threshold: 0.5 },
     );
-
     if (observerTarget.current) {
       observer.observe(observerTarget.current);
     }
@@ -88,26 +71,22 @@ export const useFeedBrowser = (statuses: Record<number, string>) => {
     };
   }, [fetchMore, handlePagination]);
 
-  // Display a temporary error if files are not yet ready
   useEffect(() => {
     if (isFinished && download.error) {
       setDownload((prev) => ({
         ...prev,
         error: "Files are not ready for download now...",
       }));
-
       setTimeout(() => {
         setDownload(getInitialDownloadState);
       }, 3000);
     }
   }, [isFinished, download.error]);
 
-  // Update path whenever a new plugin is selected
   useEffect(() => {
     setCurrentPath(selected?.data.output_path || "");
   }, [selected]);
 
-  // File click handler
   const handleFileClick = (path: string) => {
     if (selected) {
       setCurrentPath(path);

src/components/FeedTree/FeedGraph.tsx

@@ -12,7 +12,7 @@ import { type FeedTreeScaleType, NodeScaleDropdown } from "./Controls";
 import "./FeedTree.css";
 import { SpinContainer } from "../Common";
 import useSize from "./useSize";
-import usePaginatedTreeQuery from "./usePaginatedTreeQuery";
+import usePaginatedTreeQuery from "../Feeds/usePaginatedTreeQuery";
 import type { Feed } from "@fnndsc/chrisapi";
 
 interface IFeedProps {