docs: add comments for clearer code explanation

Author: elainefan331

src/components/DatasetDetailPage/FileTree/FileTree.tsx

@@ -1,3 +1,4 @@
+//renders the header (title, counts, total size) and the scrollable area.
 import FileTreeRow from "./FileTreeRow";
 import type { TreeNode } from "./types";
 import FolderIcon from "@mui/icons-material/Folder";
@@ -58,7 +59,7 @@ const FileTree: React.FC<Props> = ({
 
     <Box sx={{ flex: 1, minHeight: 0, overflowY: "auto", py: 0.5 }}>
       {tree.map((n) => (
-        <FileTreeRow key={n.path} node={n} level={0} onPreview={onPreview} />
+        <FileTreeRow key={n.path} node={n} level={0} onPreview={onPreview} /> // pass the handlePreview(onPreview = handlePreview) function to FileTreeRow
       ))}
     </Box>
   </Box>

src/components/DatasetDetailPage/FileTree/FileTreeRow.tsx

@@ -123,6 +123,7 @@ const FileTreeRow: React.FC<Props> = ({ node, level, onPreview }) => {
           {open ? <ExpandLess /> : <ExpandMore />}
         </Box>
 
+        {/*timeout controls the duration of the expand/collapse animation*/}
         <Collapse in={open} timeout="auto" unmountOnExit>
           {node.children.map((child) => (
             <FileTreeRow
@@ -136,7 +137,7 @@ const FileTreeRow: React.FC<Props> = ({ node, level, onPreview }) => {
       </>
     );
   }
-
+  // if the node is a file
   return (
     <Box
       sx={{ display: "flex", alignItems: "flex-start", gap: 1, py: 0.5, px: 1 }}

src/components/DatasetDetailPage/FileTree/utils.ts

@@ -27,7 +27,7 @@ export const formatLeafValue = (v: any): string => {
 //   key === "_id" || key === "_rev" || key.startsWith(".");
 export const shouldSkipKey = (_key: string) => false;
 
-// build path -> {url, index} lookup, built from extractDataLinks function
+// build path -> {url, index} lookup, built from extractDataLinks function (return { name, size, path, url, index })
 // if external link objects have {path, url, index}, build a Map for the tree
 export const makeLinkMap = <
   T extends { path: string; url: string; index: number }

src/pages/UpdatedDatasetDetailPage.tsx

@@ -1175,10 +1175,11 @@ const UpdatedDatasetDetailPage: React.FC = () => {
               <Box sx={{ flex: 1, minHeight: 240, overflow: "hidden" }}>
                 <FileTree
                   title={treeTitle}
-                  tree={treeData} // this is already built from subjectsOnly when hasTopLevelSubjects === true
+                  tree={treeData}
                   filesCount={filesCount}
                   totalBytes={totalBytes}
-                  onPreview={(url, index) => handlePreview(url, index, false)}
+                  //   onPreview={(url, index) => handlePreview(url, index, false)}
+                  onPreview={handlePreview} // pass the function down to FileTree
                 />
               </Box>