Dataset Detail Page: transform JSON into full folder tree, add Metadata panel, and adjust responsive panel layout

src/components/DatasetDetailPage/CopyButton.tsx

@@ -0,0 +1,55 @@
+import CheckIcon from "@mui/icons-material/Check";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { IconButton, Tooltip } from "@mui/material";
+import React from "react";
+
+const write = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    // Fallback
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return ok;
+  }
+};
+
+export default function CopyButton({
+  text,
+  title = "Copy",
+  size = "small",
+}: {
+  text: string;
+  title?: string;
+  size?: "small" | "medium" | "large";
+}) {
+  const [ok, setOk] = React.useState(false);
+
+  const onClick = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (await write(text)) {
+      setOk(true);
+      setTimeout(() => setOk(false), 1200);
+    }
+  };
+
+  return (
+    <Tooltip title={ok ? "Copied!" : title} arrow>
+      <IconButton size={size} onClick={onClick} sx={{ ml: 0.5 }}>
+        {ok ? (
+          <CheckIcon fontSize="inherit" />
+        ) : (
+          <ContentCopyIcon fontSize="inherit" />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+}

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";
@@ -9,7 +10,10 @@ type Props = {
   tree: TreeNode[];
   filesCount: number;
   totalBytes: number;
-  onPreview: (url: string, index: number) => void;
+  // for preview in tree row
+  onPreview: (src: string | any, index: number, isInternal?: boolean) => void;
+  getInternalByPath: (path: string) => { data: any; index: number } | undefined;
+  getJsonByPath?: (path: string) => any;
 };
 
 const formatSize = (n: number) => {
@@ -26,6 +30,8 @@ const FileTree: React.FC<Props> = ({
   filesCount,
   totalBytes,
   onPreview,
+  getInternalByPath,
+  getJsonByPath,
 }) => (
   <Box
     sx={{
@@ -49,16 +55,23 @@ const FileTree: React.FC<Props> = ({
         flexShrink: 0,
       }}
     >
-      <FolderIcon />
+      {/* <FolderIcon /> */}
       <Typography sx={{ fontWeight: 700, flex: 1 }}>{title}</Typography>
-      <Typography variant="body2" sx={{ color: "text.secondary" }}>
+      {/* <Typography variant="body2" sx={{ color: "text.secondary" }}>
         Files: {filesCount} &nbsp; Size: {formatSize(totalBytes)}
-      </Typography>
+      </Typography> */}
     </Box>
 
     <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}
+          getInternalByPath={getInternalByPath}
+          getJsonByPath={getJsonByPath}
+        /> // pass the handlePreview(onPreview = handlePreview) function to FileTreeRow
       ))}
     </Box>
   </Box>