fix: show accurate metadata size on dataset cards and dataset detail page

Author: elainefan331

src/components/DatasetDetailPage/MetaDataPanel.tsx

@@ -0,0 +1,128 @@
+import { Box, Typography } from "@mui/material";
+import { Colors } from "design/theme";
+import React from "react";
+
+type Props = {
+  dbViewInfo: any;
+  datasetDocument: any;
+};
+
+const MetaDataPanel: React.FC<Props> = ({ dbViewInfo, datasetDocument }) => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: Colors.white,
+        borderRadius: "8px",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        height: "100%",
+        minHeight: 0,
+      }}
+    >
+      <Box
+        sx={{
+          flex: 1,
+          minHeight: 0, // <-- for scroller
+          overflowY: "auto", // <-- keep the scroller here
+          p: 2,
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
+        }}
+      >
+        <Box>
+          <Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>
+            Modalities
+          </Typography>
+          <Typography sx={{ color: "text.secondary" }}>
+            {dbViewInfo?.rows?.[0]?.value?.modality?.join(", ") ?? "N/A"}
+          </Typography>
+        </Box>
+
+        <Box>
+          <Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>
+            DOI
+          </Typography>
+          <Typography sx={{ color: "text.secondary" }}>
+            {(() => {
+              const doi =
+                datasetDocument?.["dataset_description.json"]?.DatasetDOI ||
+                datasetDocument?.["dataset_description.json"]?.ReferenceDOI;
+
+              if (!doi) return "N/A";
+
+              // Normalize into a clickable URL
+              let url = doi;
+              if (/^10\./.test(doi)) {
+                url = `https://doi.org/${doi}`;
+              } else if (/^doi:/.test(doi)) {
+                url = `https://doi.org/${doi.replace(/^doi:/, "")}`;
+              }
+
+              return (
+                <a
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{
+                    color: "inherit",
+                    textDecoration: "underline",
+                  }}
+                >
+                  {url}
+                </a>
+              );
+            })()}
+          </Typography>
+        </Box>
+
+        <Box>
+          <Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>
+            Subjects
+          </Typography>
+          <Typography sx={{ color: "text.secondary" }}>
+            {dbViewInfo?.rows?.[0]?.value?.subj?.length ?? "N/A"}
+          </Typography>
+        </Box>
+        <Box>
+          <Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>
+            License
+          </Typography>
+          <Typography sx={{ color: "text.secondary" }}>
+            {datasetDocument?.["dataset_description.json"]?.License ?? "N/A"}
+          </Typography>
+        </Box>
+        <Box>
+          <Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>
+            BIDS Version
+          </Typography>
+          <Typography sx={{ color: "text.secondary" }}>
+            {datasetDocument?.["dataset_description.json"]?.BIDSVersion ??
+              "N/A"}
+          </Typography>
+        </Box>
+        <Box>
+          <Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>
+            References and Links
+          </Typography>
+          <Typography sx={{ color: "text.secondary" }}>
+            {Array.isArray(
+              datasetDocument?.["dataset_description.json"]?.ReferencesAndLinks
+            )
+              ? datasetDocument["dataset_description.json"].ReferencesAndLinks
+                  .length > 0
+                ? datasetDocument[
+                    "dataset_description.json"
+                  ].ReferencesAndLinks.join(", ")
+                : "N/A"
+              : datasetDocument?.["dataset_description.json"]
+                  ?.ReferencesAndLinks ?? "N/A"}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default MetaDataPanel;

src/components/DatasetPageCard.tsx

@@ -15,6 +15,24 @@ import { useNavigate } from "react-router-dom";
 import { Row } from "redux/neurojson/types/neurojson.interface";
 import RoutesEnum from "types/routes.enum";
 
+const formatSize = (sizeInBytes: number): string => {
+  if (sizeInBytes < 1024) {
+    return `${sizeInBytes} Bytes`;
+  } else if (sizeInBytes < 1024 * 1024) {
+    return `${(sizeInBytes / 1024).toFixed(1)} KB`;
+  } else if (sizeInBytes < 1024 * 1024 * 1024) {
+    return `${(sizeInBytes / (1024 * 1024)).toFixed(2)} MB`;
+  } else if (sizeInBytes < 1024 * 1024 * 1024 * 1024) {
+    return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+  } else {
+    return `${(sizeInBytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)} TB`;
+  }
+};
+
+// for showing the size
+const jsonBytes = (obj: unknown) =>
+  obj ? new TextEncoder().encode(JSON.stringify(obj)).length : 0;
+
 interface DatasetPageCardProps {
   doc: Row;
   index: number;
@@ -32,6 +50,11 @@ const DatasetPageCard: React.FC<DatasetPageCardProps> = ({
 }) => {
   const navigate = useNavigate();
   const datasetIndex = (page - 1) * pageSize + index + 1;
+  const sizeInBytes = React.useMemo(() => {
+    const len = (doc as any)?.value?.length; // bytes from backend (full doc)
+    if (typeof len === "number" && Number.isFinite(len)) return len;
+    return jsonBytes(doc.value); // fallback: summary object size
+  }, [doc.value]);
   return (
     <Grid item xs={12} sm={6} key={doc.id}>
       <Card
@@ -133,9 +156,10 @@ const DatasetPageCard: React.FC<DatasetPageCardProps> = ({
             <Stack direction="row" spacing={2} alignItems="center">
               <Typography variant="body2" color={Colors.textPrimary}>
                 <strong>Size:</strong>{" "}
-                {doc.value.length
+                {/* {doc.value.length
                   ? `${(doc.value.length / 1024 / 1024).toFixed(2)} MB`
-                  : "Unknown"}
+                  : "Unknown"} */}
+                {formatSize(sizeInBytes)}
               </Typography>
 
               {doc.value.info?.DatasetDOI && (

src/pages/DatasetPage.tsx

@@ -39,6 +39,20 @@ const DatasetPage: React.FC = () => {
   const totalPages = Math.ceil(limit / pageSize);
   const [searchQuery, setSearchQuery] = useState("");
 
+  const formatSize = (sizeInBytes: number): string => {
+    if (sizeInBytes < 1024) {
+      return `${sizeInBytes} Bytes`;
+    } else if (sizeInBytes < 1024 * 1024) {
+      return `${(sizeInBytes / 1024).toFixed(1)} KB`;
+    } else if (sizeInBytes < 1024 * 1024 * 1024) {
+      return `${(sizeInBytes / (1024 * 1024)).toFixed(2)} MB`;
+    } else if (sizeInBytes < 1024 * 1024 * 1024 * 1024) {
+      return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+    } else {
+      return `${(sizeInBytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)} TB`;
+    }
+  };
+
   useEffect(() => {
     if (dbName) {
       dispatch(fetchDbInfo(dbName.toLowerCase()));
@@ -326,11 +340,12 @@ const DatasetPage: React.FC = () => {
         <Grid container spacing={3}>
           {filteredData.map((doc: any, index: number) => {
             const datasetIndex = (currentPage - 1) * pageSize + index + 1;
+
             return (
               <Grid item xs={12} sm={6} key={doc.id}>
                 <Card
                   sx={{
-                    position: "relative", // ✅ allows absolute positioning of the number
+                    position: "relative", // allows absolute positioning of the number
                     backgroundColor: Colors.white,
                     boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
                     height: "100%",