feat: add participants preview table for better readability

Author: elainefan331

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

@@ -966,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}

src/utils/DatasetDetailPageFunctions/participants.ts

@@ -0,0 +1,34 @@
+export type ParticipantsTable = { columns: string[]; rows: any[] };
+
+export function makeParticipantsTable(part: any): ParticipantsTable | null {
+  if (!part || typeof part !== "object") return null;
+
+  // Case A: object-of-arrays
+  //   const cols = Object.keys(part);
+  //   const isObjOfArrays =
+  //     cols.length > 0 && cols.every((k) => Array.isArray(part[k]));
+  const arrayCols = Object.keys(part).filter((k) => Array.isArray(part[k]));
+
+  if (arrayCols.length > 0) {
+    const n = Math.max(...arrayCols.map((k) => part[k].length));
+    const rows = Array.from({ length: n }, (_, i) => {
+      const r: any = { id: i + 1 };
+      arrayCols.forEach((k) => (r[k] = part[k][i] ?? ""));
+      return r;
+    });
+    return { columns: arrayCols, rows };
+  }
+
+  // Case B: array-of-objects fallback
+  if (Array.isArray(part)) {
+    const allCols = new Set<string>();
+    part.forEach((r: any) =>
+      Object.keys(r || {}).forEach((k) => allCols.add(k))
+    );
+    const columns = Array.from(allCols);
+    const rows = part.map((r: any, i: number) => ({ id: i + 1, ...(r || {}) }));
+    return { columns, rows };
+  }
+
+  return null;
+}