feat: add participants.tsv preview table, AI summary tooltip, and navigation refactor

src/components/DatasetDetailPage/MetaDataPanel.tsx

@@ -1,3 +1,4 @@
+import ParticipantsPreview from "./ParticipantsPreview";
 import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight";
 import {
   Box,
@@ -190,13 +191,23 @@ const MetaDataPanel: React.FC<Props> = ({
             })()}
           </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
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            gap: 2,
+            alignItems: "flex-start",
+          }}
+        >
+          <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>
+          <ParticipantsPreview datasetDocument={datasetDocument} />
         </Box>
         <Box>
           <Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>

src/components/DatasetDetailPage/ParticipantsPreview.tsx

@@ -0,0 +1,97 @@
+import { makeParticipantsTable } from "../../utils/DatasetDetailPageFunctions/participants";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+} from "@mui/material";
+import { Colors } from "design/theme";
+import React, { useMemo, useState } from "react";
+
+type Props = {
+  datasetDocument: any;
+};
+
+const ParticipantsPreview: React.FC<Props> = ({ datasetDocument }) => {
+  const [open, setOpen] = useState(false);
+
+  const table = useMemo(() => {
+    const part = datasetDocument?.["participants.tsv"];
+    return makeParticipantsTable(part);
+  }, [datasetDocument]);
+
+  if (!table) return null; // No participants.tsv found
+
+  return (
+    <>
+      <Box>
+        <Button
+          variant="outlined"
+          size="small"
+          onClick={() => setOpen(true)}
+          sx={{
+            color: Colors.purple,
+            borderColor: Colors.purple,
+            "&:hover": {
+              color: Colors.secondaryPurple,
+              transform: "scale(1.01)",
+              borderColor: Colors.purple,
+            },
+          }}
+        >
+          Participants Table Preview
+        </Button>
+      </Box>
+
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        maxWidth="md"
+        fullWidth
+      >
+        <DialogTitle>participants.tsv</DialogTitle>
+        <DialogContent dividers>
+          <TableContainer component={Paper}>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  {table.columns.map((col) => (
+                    <TableCell
+                      key={col}
+                      sx={{
+                        fontWeight: "bold",
+                        backgroundColor: Colors.darkPurple,
+                        color: Colors.white,
+                      }}
+                    >
+                      {col.replace(/_/g, " ")}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {table.rows.map((row, rowIdx) => (
+                  <TableRow key={rowIdx}>
+                    {table.columns.map((col) => (
+                      <TableCell key={col}>{row[col]}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default ParticipantsPreview;

src/components/SearchPage/DatabaseCard.tsx

@@ -39,7 +39,7 @@ const DatabaseCard: React.FC<Props> = ({
 }) => {
   const dispatch = useAppDispatch();
   const dbInfo = useAppSelector((state: RootState) => state.neurojson.dbInfo);
-  console.log("dbInfo", dbInfo);
+  // console.log("dbInfo", dbInfo);
   useEffect(() => {
     if (dbId) {
       dispatch(fetchDbInfo(dbId.toLowerCase()));

src/pages/UpdatedDatasetDetailPage.tsx

@@ -6,6 +6,7 @@ import DescriptionIcon from "@mui/icons-material/Description";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import HomeIcon from "@mui/icons-material/Home";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import {
   Box,
   Typography,
@@ -682,7 +683,7 @@ const UpdatedDatasetDetailPage: React.FC = () => {
   return (
     <>
       <Box sx={{ padding: 4 }}>
-        <Button
+        {/* <Button
           variant="text"
           onClick={() => navigate(-1)}
           sx={{
@@ -696,7 +697,80 @@ const UpdatedDatasetDetailPage: React.FC = () => {
           }}
         >
           Back
-        </Button>
+        </Button> */}
+
+        {/* Breadcrumb Navigation (Home → Database → Dataset) */}
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            marginBottom: 2,
+          }}
+        >
+          {/* Home Icon Button */}
+          <Button
+            onClick={() => navigate("/")}
+            sx={{
+              backgroundColor: "transparent",
+              padding: 0,
+              minWidth: "auto",
+              "&:hover": { backgroundColor: "transparent" },
+            }}
+          >
+            <HomeIcon
+              sx={{
+                color: Colors.white,
+                "&:hover": {
+                  transform: "scale(1.1)",
+                  backgroundColor: "transparent",
+                },
+              }}
+            />
+          </Button>
+
+          <Typography
+            variant="h5"
+            sx={{ marginX: 1, fontWeight: "bold", color: Colors.white }}
+          >
+            »
+          </Typography>
+
+          {/* Database Name (Clickable) */}
+          <Button
+            onClick={() => navigate(`${RoutesEnum.DATABASES}/${dbName}`)}
+            sx={{
+              textTransform: "none",
+              fontSize: "1.2rem",
+              fontWeight: "bold",
+              color: Colors.white,
+              "&:hover": {
+                transform: "scale(1.05)",
+                backgroundColor: "transparent",
+              },
+            }}
+          >
+            {dbName?.toLowerCase()}
+          </Button>
+
+          <Typography
+            variant="h5"
+            sx={{ marginX: 1, fontWeight: "bold", color: Colors.white }}
+          >
+            »
+          </Typography>
+
+          {/* Dataset Name (_id field) */}
+          <Typography
+            variant="h5"
+            sx={{
+              fontWeight: "bold",
+              color: Colors.white,
+              fontSize: "1.2rem",
+            }}
+          >
+            {docId}
+          </Typography>
+        </Box>
 
         <Box
           sx={{
@@ -733,75 +807,66 @@ const UpdatedDatasetDetailPage: React.FC = () => {
             </Typography>
           )}
 
-          {/* Breadcrumb Navigation (Home → Database → Dataset) */}
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              marginBottom: 2,
-            }}
-          >
-            {/* Home Icon Button */}
-            <Button
-              onClick={() => navigate("/")}
-              sx={{
-                backgroundColor: "transparent",
-                padding: 0,
-                minWidth: "auto",
-                "&:hover": { backgroundColor: "transparent" },
-              }}
-            >
-              <HomeIcon
+          {/* ai summary */}
+          {aiSummary && (
+            <>
+              <Box
                 sx={{
-                  color: Colors.darkPurple,
-                  "&:hover": {
-                    transform: "scale(1.1)",
-                    backgroundColor: "transparent",
-                  },
+                  display: "flex",
+                  alignItems: "center",
+                  mb: 0.5,
+                  mt: 1,
+                  gap: 0.5,
                 }}
-              />
-            </Button>
-
-            <Typography variant="h5" sx={{ marginX: 1, fontWeight: "bold" }}>
-              »
-            </Typography>
-
-            {/* Database Name (Clickable) */}
-            <Button
-              onClick={() => navigate(`${RoutesEnum.DATABASES}/${dbName}`)}
-              sx={{
-                textTransform: "none",
-                fontSize: "1.2rem",
-                fontWeight: "bold",
-                color: Colors.darkPurple,
-                "&:hover": {
-                  transform: "scale(1.05)",
-                  backgroundColor: "transparent",
-                },
-              }}
-            >
-              {dbName?.toLowerCase()}
-            </Button>
-
-            <Typography variant="h5" sx={{ marginX: 1, fontWeight: "bold" }}>
-              »
-            </Typography>
-
-            {/* Dataset Name (_id field) */}
-            <Typography
-              variant="h5"
-              sx={{
-                fontWeight: "bold",
-                color: Colors.darkPurple,
-                fontSize: "1.2rem",
-              }}
-            >
-              {docId}
-            </Typography>
-          </Box>
+              >
+                <Typography
+                  color={Colors.purple}
+                  sx={{ fontWeight: "bold", mb: 0.5, mt: 1 }}
+                >
+                  AI Summary
+                </Typography>
+                <Tooltip
+                  title={
+                    <Typography variant="body2" sx={{ color: Colors.darkGray }}>
+                      AI Summary is generated using an AI tool that identifies
+                      the related paper and extracts its key content to create a
+                      concise summary.
+                    </Typography>
+                  }
+                  arrow
+                  placement="right"
+                  slotProps={{
+                    tooltip: {
+                      sx: {
+                        bgcolor: Colors.white,
+                        border: `1px solid ${Colors.lightGray}`,
+                        boxShadow: 3,
+                        fontSize: "0.875rem",
+                      },
+                    },
+                    arrow: {
+                      sx: {
+                        color: Colors.white,
+                        "&::before": {
+                          border: `1px solid ${Colors.lightGray}`, // subtle arrow border
+                        },
+                      },
+                    },
+                  }}
+                >
+                  <InfoOutlinedIcon
+                    fontSize="small"
+                    sx={{
+                      color: Colors.purple,
+                      cursor: "pointer",
+                    }}
+                  />
+                </Tooltip>
+              </Box>
 
-          {/* ai summary */}
-          {aiSummary && <ReadMoreText text={aiSummary} />}
+              <ReadMoreText text={aiSummary} />
+            </>
+          )}
 
           <Box
             sx={{
@@ -901,8 +966,6 @@ const UpdatedDatasetDetailPage: React.FC = () => {
                 <FileTree
                   title={treeTitle}
                   tree={treeData}
-                  // filesCount={filesCount}
-                  // totalBytes={totalBytes}
                   onPreview={handlePreview} // pass the function down to FileTree
                   getInternalByPath={getInternalByPath}
                   getJsonByPath={getJsonByPath}