Skip to content

Commit fa47f15

Browse files
elainefan331elainefan331
authored
Merge pull request #106 from NeuroJSON/dev-fan
feat: add participants.tsv preview table, AI summary tooltip, and navigation refactor
2 parents d1313d6 + f14cffe commit fa47f15

5 files changed

Lines changed: 283 additions & 78 deletions

File tree

‎src/components/DatasetDetailPage/MetaDataPanel.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import ParticipantsPreview from "./ParticipantsPreview";
12
import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight";
23
import {
34
Box,
@@ -190,13 +191,23 @@ const MetaDataPanel: React.FC<Props> = ({
190191
})()}
191192
</Typography>
192193
</Box>
193-
<Box>
194-
<Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>
195-
Subjects
196-
</Typography>
197-
<Typography sx={{ color: "text.secondary" }}>
198-
{dbViewInfo?.rows?.[0]?.value?.subj?.length ?? "N/A"}
199-
</Typography>
194+
<Box
195+
sx={{
196+
display: "flex",
197+
flexDirection: "row",
198+
gap: 2,
199+
alignItems: "flex-start",
200+
}}
201+
>
202+
<Box>
203+
<Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>
204+
Subjects
205+
</Typography>
206+
<Typography sx={{ color: "text.secondary" }}>
207+
{dbViewInfo?.rows?.[0]?.value?.subj?.length ?? "N/A"}
208+
</Typography>
209+
</Box>
210+
<ParticipantsPreview datasetDocument={datasetDocument} />
200211
</Box>
201212
<Box>
202213
<Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>

‎src/components/DatasetDetailPage/ParticipantsPreview.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { makeParticipantsTable } from "../../utils/DatasetDetailPageFunctions/participants";
2+
import {
3+
Box,
4+
Button,
5+
Dialog,
6+
DialogContent,
7+
DialogTitle,
8+
Table,
9+
TableBody,
10+
TableCell,
11+
TableContainer,
12+
TableHead,
13+
TableRow,
14+
Paper,
15+
} from "@mui/material";
16+
import { Colors } from "design/theme";
17+
import React, { useMemo, useState } from "react";
18+
19+
type Props = {
20+
datasetDocument: any;
21+
};
22+
23+
const ParticipantsPreview: React.FC<Props> = ({ datasetDocument }) => {
24+
const [open, setOpen] = useState(false);
25+
26+
const table = useMemo(() => {
27+
const part = datasetDocument?.["participants.tsv"];
28+
return makeParticipantsTable(part);
29+
}, [datasetDocument]);
30+
31+
if (!table) return null; // No participants.tsv found
32+
33+
return (
34+
<>
35+
<Box>
36+
<Button
37+
variant="outlined"
38+
size="small"
39+
onClick={() => setOpen(true)}
40+
sx={{
41+
color: Colors.purple,
42+
borderColor: Colors.purple,
43+
"&:hover": {
44+
color: Colors.secondaryPurple,
45+
transform: "scale(1.01)",
46+
borderColor: Colors.purple,
47+
},
48+
}}
49+
>
50+
Participants Table Preview
51+
</Button>
52+
</Box>
53+
54+
<Dialog
55+
open={open}
56+
onClose={() => setOpen(false)}
57+
maxWidth="md"
58+
fullWidth
59+
>
60+
<DialogTitle>participants.tsv</DialogTitle>
61+
<DialogContent dividers>
62+
<TableContainer component={Paper}>
63+
<Table size="small">
64+
<TableHead>
65+
<TableRow>
66+
{table.columns.map((col) => (
67+
<TableCell
68+
key={col}
69+
sx={{
70+
fontWeight: "bold",
71+
backgroundColor: Colors.darkPurple,
72+
color: Colors.white,
73+
}}
74+
>
75+
{col.replace(/_/g, " ")}
76+
</TableCell>
77+
))}
78+
</TableRow>
79+
</TableHead>
80+
<TableBody>
81+
{table.rows.map((row, rowIdx) => (
82+
<TableRow key={rowIdx}>
83+
{table.columns.map((col) => (
84+
<TableCell key={col}>{row[col]}</TableCell>
85+
))}
86+
</TableRow>
87+
))}
88+
</TableBody>
89+
</Table>
90+
</TableContainer>
91+
</DialogContent>
92+
</Dialog>
93+
</>
94+
);
95+
};
96+
97+
export default ParticipantsPreview;

‎src/components/SearchPage/DatabaseCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const DatabaseCard: React.FC<Props> = ({
3939
}) => {
4040
const dispatch = useAppDispatch();
4141
const dbInfo = useAppSelector((state: RootState) => state.neurojson.dbInfo);
42-
console.log("dbInfo", dbInfo);
42+
// console.log("dbInfo", dbInfo);
4343
useEffect(() => {
4444
if (dbId) {
4545
dispatch(fetchDbInfo(dbId.toLowerCase()));

‎src/pages/UpdatedDatasetDetailPage.tsx‎

Lines changed: 133 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import DescriptionIcon from "@mui/icons-material/Description";
66
import ExpandLess from "@mui/icons-material/ExpandLess";
77
import ExpandMore from "@mui/icons-material/ExpandMore";
88
import HomeIcon from "@mui/icons-material/Home";
9+
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
910
import {
1011
Box,
1112
Typography,
@@ -682,7 +683,7 @@ const UpdatedDatasetDetailPage: React.FC = () => {
682683
return (
683684
<>
684685
<Box sx={{ padding: 4 }}>
685-
<Button
686+
{/* <Button
686687
variant="text"
687688
onClick={() => navigate(-1)}
688689
sx={{
@@ -696,7 +697,80 @@ const UpdatedDatasetDetailPage: React.FC = () => {
696697
}}
697698
>
698699
Back
699-
</Button>
700+
</Button> */}
701+
702+
{/* Breadcrumb Navigation (Home → Database → Dataset) */}
703+
<Box
704+
sx={{
705+
display: "flex",
706+
alignItems: "center",
707+
marginBottom: 2,
708+
}}
709+
>
710+
{/* Home Icon Button */}
711+
<Button
712+
onClick={() => navigate("/")}
713+
sx={{
714+
backgroundColor: "transparent",
715+
padding: 0,
716+
minWidth: "auto",
717+
"&:hover": { backgroundColor: "transparent" },
718+
}}
719+
>
720+
<HomeIcon
721+
sx={{
722+
color: Colors.white,
723+
"&:hover": {
724+
transform: "scale(1.1)",
725+
backgroundColor: "transparent",
726+
},
727+
}}
728+
/>
729+
</Button>
730+
731+
<Typography
732+
variant="h5"
733+
sx={{ marginX: 1, fontWeight: "bold", color: Colors.white }}
734+
>
735+
»
736+
</Typography>
737+
738+
{/* Database Name (Clickable) */}
739+
<Button
740+
onClick={() => navigate(`${RoutesEnum.DATABASES}/${dbName}`)}
741+
sx={{
742+
textTransform: "none",
743+
fontSize: "1.2rem",
744+
fontWeight: "bold",
745+
color: Colors.white,
746+
"&:hover": {
747+
transform: "scale(1.05)",
748+
backgroundColor: "transparent",
749+
},
750+
}}
751+
>
752+
{dbName?.toLowerCase()}
753+
</Button>
754+
755+
<Typography
756+
variant="h5"
757+
sx={{ marginX: 1, fontWeight: "bold", color: Colors.white }}
758+
>
759+
»
760+
</Typography>
761+
762+
{/* Dataset Name (_id field) */}
763+
<Typography
764+
variant="h5"
765+
sx={{
766+
fontWeight: "bold",
767+
color: Colors.white,
768+
fontSize: "1.2rem",
769+
}}
770+
>
771+
{docId}
772+
</Typography>
773+
</Box>
700774

701775
<Box
702776
sx={{
@@ -733,75 +807,66 @@ const UpdatedDatasetDetailPage: React.FC = () => {
733807
</Typography>
734808
)}
735809

736-
{/* Breadcrumb Navigation (Home → Database → Dataset) */}
737-
<Box
738-
sx={{
739-
display: "flex",
740-
alignItems: "center",
741-
marginBottom: 2,
742-
}}
743-
>
744-
{/* Home Icon Button */}
745-
<Button
746-
onClick={() => navigate("/")}
747-
sx={{
748-
backgroundColor: "transparent",
749-
padding: 0,
750-
minWidth: "auto",
751-
"&:hover": { backgroundColor: "transparent" },
752-
}}
753-
>
754-
<HomeIcon
810+
{/* ai summary */}
811+
{aiSummary && (
812+
<>
813+
<Box
755814
sx={{
756-
color: Colors.darkPurple,
757-
"&:hover": {
758-
transform: "scale(1.1)",
759-
backgroundColor: "transparent",
760-
},
815+
display: "flex",
816+
alignItems: "center",
817+
mb: 0.5,
818+
mt: 1,
819+
gap: 0.5,
761820
}}
762-
/>
763-
</Button>
764-
765-
<Typography variant="h5" sx={{ marginX: 1, fontWeight: "bold" }}>
766-
»
767-
</Typography>
768-
769-
{/* Database Name (Clickable) */}
770-
<Button
771-
onClick={() => navigate(`${RoutesEnum.DATABASES}/${dbName}`)}
772-
sx={{
773-
textTransform: "none",
774-
fontSize: "1.2rem",
775-
fontWeight: "bold",
776-
color: Colors.darkPurple,
777-
"&:hover": {
778-
transform: "scale(1.05)",
779-
backgroundColor: "transparent",
780-
},
781-
}}
782-
>
783-
{dbName?.toLowerCase()}
784-
</Button>
785-
786-
<Typography variant="h5" sx={{ marginX: 1, fontWeight: "bold" }}>
787-
»
788-
</Typography>
789-
790-
{/* Dataset Name (_id field) */}
791-
<Typography
792-
variant="h5"
793-
sx={{
794-
fontWeight: "bold",
795-
color: Colors.darkPurple,
796-
fontSize: "1.2rem",
797-
}}
798-
>
799-
{docId}
800-
</Typography>
801-
</Box>
821+
>
822+
<Typography
823+
color={Colors.purple}
824+
sx={{ fontWeight: "bold", mb: 0.5, mt: 1 }}
825+
>
826+
AI Summary
827+
</Typography>
828+
<Tooltip
829+
title={
830+
<Typography variant="body2" sx={{ color: Colors.darkGray }}>
831+
AI Summary is generated using an AI tool that identifies
832+
the related paper and extracts its key content to create a
833+
concise summary.
834+
</Typography>
835+
}
836+
arrow
837+
placement="right"
838+
slotProps={{
839+
tooltip: {
840+
sx: {
841+
bgcolor: Colors.white,
842+
border: `1px solid ${Colors.lightGray}`,
843+
boxShadow: 3,
844+
fontSize: "0.875rem",
845+
},
846+
},
847+
arrow: {
848+
sx: {
849+
color: Colors.white,
850+
"&::before": {
851+
border: `1px solid ${Colors.lightGray}`, // subtle arrow border
852+
},
853+
},
854+
},
855+
}}
856+
>
857+
<InfoOutlinedIcon
858+
fontSize="small"
859+
sx={{
860+
color: Colors.purple,
861+
cursor: "pointer",
862+
}}
863+
/>
864+
</Tooltip>
865+
</Box>
802866

803-
{/* ai summary */}
804-
{aiSummary && <ReadMoreText text={aiSummary} />}
867+
<ReadMoreText text={aiSummary} />
868+
</>
869+
)}
805870

806871
<Box
807872
sx={{
@@ -901,8 +966,6 @@ const UpdatedDatasetDetailPage: React.FC = () => {
901966
<FileTree
902967
title={treeTitle}
903968
tree={treeData}
904-
// filesCount={filesCount}
905-
// totalBytes={totalBytes}
906969
onPreview={handlePreview} // pass the function down to FileTree
907970
getInternalByPath={getInternalByPath}
908971
getJsonByPath={getJsonByPath}

0 commit comments

Comments
 (0)