test: add mesh preview in the tree row

Author: elainefan331

src/components/DatasetDetailPage/FileTree/FileTree.tsx

@@ -10,7 +10,12 @@ type Props = {
   tree: TreeNode[];
   filesCount: number;
   totalBytes: number;
-  onPreview: (url: string, index: number) => void;
+  // for preview in tree row
+  // onPreview: (url: string, index: number) => void;
+  onPreview: (src: string | any, index: number, isInternal?: boolean) => void; // ← type it
+  getInternalByPath?: (
+    path: string
+  ) => { data: any; index: number } | undefined;
 };
 
 const formatSize = (n: number) => {
@@ -27,6 +32,7 @@ const FileTree: React.FC<Props> = ({
   filesCount,
   totalBytes,
   onPreview,
+  getInternalByPath,
 }) => (
   <Box
     sx={{
@@ -59,7 +65,13 @@ 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} /> // pass the handlePreview(onPreview = handlePreview) function to FileTreeRow
+        <FileTreeRow
+          key={n.path}
+          node={n}
+          level={0}
+          onPreview={onPreview}
+          getInternalByPath={getInternalByPath}
+        /> // pass the handlePreview(onPreview = handlePreview) function to FileTreeRow
       ))}
     </Box>
   </Box>

src/components/DatasetDetailPage/FileTree/FileTreeRow.tsx

@@ -14,11 +14,23 @@ import React from "react";
 type Props = {
   node: TreeNode;
   level: number;
-  onPreview: (url: string, index: number) => void;
+  //   onPreview: (url: string, index: number) => void;
+  // for preview in the tree row
+  onPreview: (src: string | any, index: number, isInternal?: boolean) => void;
+  getInternalByPath?: (
+    path: string
+  ) => { data: any; index: number } | undefined;
 };
 
-const FileTreeRow: React.FC<Props> = ({ node, level, onPreview }) => {
+const FileTreeRow: React.FC<Props> = ({
+  node,
+  level,
+  onPreview,
+  getInternalByPath,
+}) => {
   const [open, setOpen] = React.useState(false);
+  const internal = getInternalByPath?.(node.path); // 👈 resolve by path
+  const externalUrl = node.link?.url;
 
   //   if (node.kind === "folder") {
   //     return (
@@ -131,6 +143,7 @@ const FileTreeRow: React.FC<Props> = ({ node, level, onPreview }) => {
               node={child}
               level={level + 1}
               onPreview={onPreview}
+              getInternalByPath={getInternalByPath}
             />
           ))}
         </Collapse>
@@ -188,7 +201,49 @@ const FileTreeRow: React.FC<Props> = ({ node, level, onPreview }) => {
         )}
       </Box>
 
-      {node.link?.url && (
+      {(externalUrl || internal) && (
+        <Box
+          sx={{ display: "flex", gap: 1, flexShrink: 0 }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {externalUrl && (
+            <>
+              <Button
+                size="small"
+                variant="text"
+                onClick={() => window.open(externalUrl, "_blank")}
+              >
+                Download
+              </Button>
+              {isPreviewable(externalUrl) && (
+                <Button
+                  size="small"
+                  variant="text"
+                  onClick={() =>
+                    onPreview(externalUrl, node.link!.index, false)
+                  }
+                >
+                  Preview
+                </Button>
+              )}
+            </>
+          )}
+
+          {internal && (
+            <Button
+              size="small"
+              variant="text"
+              startIcon={<VisibilityIcon fontSize="small" />}
+              onClick={(e) => {
+                e.stopPropagation();
+                onPreview(internal.data, internal.index, true);
+              }}
+              sx={{ color: Colors.purple }}
+            >
+              Preview
+            </Button>
+          )}
+          {/* {node.link?.url && (
         <Box sx={{ display: "flex", gap: 1, flexShrink: 0 }}>
           <Button
             size="small"
@@ -207,7 +262,7 @@ const FileTreeRow: React.FC<Props> = ({ node, level, onPreview }) => {
             >
               Preview
             </Button>
-          )}
+          )} */}
         </Box>
       )}
     </Box>

src/components/DatasetDetailPage/FileTree/utils.ts

@@ -91,9 +91,7 @@ export const buildTreeFromDoc = (
       // For primitive items, show "1: value" in the *name*
       const isPrimitive =
         item === null || ["string", "number", "boolean"].includes(typeof item);
-      const label = isPrimitive
-        ? `${i + 1}: ${formatLeafValue(item)}`
-        : String(i + 1); // objects/arrays just show "1", "2", ...
+      const label = isPrimitive ? `${i}: ${formatLeafValue(item)}` : String(i); // objects/arrays just show "1", "2", ...
 
       if (item && typeof item === "object" && !isPrimitive) {
         out.push({