Skip to content

Commit 9175bab

Browse files
elainefan331elainefan331
committed
Adjust dropdown menu layout and apply modality-specific colors
1 parent ba53c2c commit 9175bab

File tree

6 files changed

+137
-87
lines changed

6 files changed

+137
-87
lines changed

‎src/components/NodeInfoPanel.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
8181
anchor="right"
8282
open={open}
8383
onClose={onClose}
84-
container={document.body}
84+
ModalProps={{ keepMounted: true }} // Keeps Drawer in DOM even when closed
85+
disableEnforceFocus // prevents MUI from trapping focus inside the drawer
8586
sx={{
8687
"& .MuiDrawer-paper": {
8788
width: "30%",

‎src/components/NodesFilter/FilterMenu.tsx‎

Lines changed: 52 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -51,37 +51,76 @@ const FilterMenu: React.FC<FilterMenuProps> = ({
5151
return (
5252
<Box>
5353
{/* Filter Icon Button */}
54-
<IconButton onClick={handleClick}>
55-
<FilterListIcon sx={{ color: Colors.lightGray }} />
56-
<Typography sx={{ color: Colors.lightGray, fontWeight: "bold" }}>
54+
<IconButton
55+
onClick={handleClick}
56+
sx={{
57+
color: Colors.lightGray,
58+
"&:hover": {
59+
color: Colors.green,
60+
backgroundColor: Colors.darkPurple,
61+
boxShadow: `0px 0px 15px ${Colors.darkGreen}`,
62+
padding: "10px",
63+
},
64+
}}
65+
>
66+
<FilterListIcon />
67+
{/* <Typography
68+
sx={{
69+
color: Colors.lightGray,
70+
fontWeight: "bold",
71+
}}
72+
>
5773
Databases Filter
58-
</Typography>
74+
</Typography> */}
5975
</IconButton>
6076

6177
{/* Dropdown Menu */}
6278
<Menu
6379
anchorEl={anchorEl}
6480
open={Boolean(anchorEl)}
6581
onClose={handleClose}
66-
// sx={{ padding: "10px" }}
6782
disablePortal // Ensures positioning inside the DOM
6883
sx={{
6984
transition: "transform 0.3s ease, opacity 0.3s ease",
7085
transformOrigin: "top right",
86+
"& .MuiPaper-root": {
87+
backgroundColor: Colors.lightGray, // Override Paper's default background
88+
// boxShadow: `0px 0px 15px ${Colors.lightGray}`,
89+
},
7190
}}
7291
>
73-
{/* unified panel version */}
74-
<Box sx={{ minWidth: 300, padding: "10px" }}>
92+
{/* unified panel */}
93+
<Box
94+
sx={{
95+
backgroundColor: Colors.lightGray,
96+
minWidth: 300,
97+
padding: "10px",
98+
}}
99+
>
100+
<Typography
101+
sx={{
102+
fontSize: "large",
103+
fontWeight: "bold",
104+
color: Colors.darkPurple,
105+
}}
106+
>
107+
Databases Filter
108+
</Typography>
109+
110+
<Divider sx={{ marginY: 2 }} />
111+
75112
{/* Keyword Filter */}
76113
<Box
77114
sx={{
78115
display: "flex",
79116
flexDirection: "column",
80-
// position: "relative",
81117
gap: "2px",
82118
}}
83119
>
84-
<Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
120+
<Typography
121+
variant="subtitle1"
122+
sx={{ color: Colors.darkOrange, fontWeight: "bold" }}
123+
>
85124
Filter by Keyword
86125
</Typography>
87126
<KeywordFilter
@@ -97,11 +136,13 @@ const FilterMenu: React.FC<FilterMenuProps> = ({
97136
sx={{
98137
display: "flex",
99138
flexDirection: "column",
100-
position: "relative",
101139
gap: "2px",
102140
}}
103141
>
104-
<Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
142+
<Typography
143+
variant="subtitle1"
144+
sx={{ color: Colors.darkOrange, fontWeight: "bold" }}
145+
>
105146
Filter by Modalities
106147
</Typography>
107148
<ModalitiesFilter
@@ -110,43 +151,6 @@ const FilterMenu: React.FC<FilterMenuProps> = ({
110151
/>
111152
</Box>
112153
</Box>
113-
114-
{/* split panel version*/}
115-
{/* <Box sx={{ display: "flex", minWidth: 400, padding: "10px" }}>
116-
Left Side - Filter Options
117-
<Box sx={{ width: "40%", paddingRight: "10px" }}>
118-
<Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
119-
Filter Options
120-
</Typography>
121-
<Divider sx={{ marginY: 1 }} />
122-
<MenuItem
123-
onClick={() => setFilterType("keyword")}
124-
selected={filterType === "keyword"}
125-
>
126-
Filter by Keyword
127-
</MenuItem>
128-
<MenuItem
129-
onClick={() => setFilterType("modalities")}
130-
selected={filterType === "modalities"}
131-
>
132-
Filter by Modalities
133-
</MenuItem>
134-
</Box>
135-
Right Side - Dynamic Filter Panel
136-
<Box sx={{ width: "60%", paddingLeft: "10px" }}>
137-
{filterType === "keyword" && (
138-
<KeywordFilter onFilter={onKeywordFilter} />
139-
)}
140-
{filterType === "modalities" && (
141-
<ModalitiesFilter onFilter={onModalitiesFilter} />
142-
)}
143-
{!filterType && (
144-
<Typography variant="body2" sx={{ color: Colors.textSecondary }}>
145-
Select a filter option on the left.
146-
</Typography>
147-
)}
148-
</Box>
149-
</Box> */}
150154
</Menu>
151155
</Box>
152156
);

‎src/components/NodesFilter/KeywordFilter.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,8 @@ const KeywordFilter: React.FC<FilterSearchProps> = ({
3131
onChange={handleChange}
3232
sx={{
3333
width: 250,
34-
// position: "absolute",
35-
// top: 20,
36-
// right: 20,
3734
background: "white",
3835
borderRadius: 1,
39-
// zIndex: 10,
4036
}}
4137
/>
4238
);

‎src/components/NodesFilter/ModalitiesFilter.tsx‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { Box, FormControlLabel, Checkbox, Typography } from "@mui/material";
2+
import { Colors } from "design/theme";
3+
import { DATA_TYPE_COLORS } from "modules/universe/NeuroJsonGraph";
24
import React, { useEffect, useState } from "react";
35

46
interface ModalitiesFilterProps {
@@ -30,21 +32,46 @@ const ModalitiesFilter: React.FC<ModalitiesFilterProps> = ({
3032

3133
return (
3234
<Box>
33-
{/* <Typography variant="subtitle1"> Select Modalities</Typography> */}
34-
{modalitiesList.map((modality) => (
35-
<Box sx={{ display: "flex", flexDirection: "column" }}>
36-
<FormControlLabel
35+
{modalitiesList.map((modality) => {
36+
const bgColor = DATA_TYPE_COLORS[modality]
37+
? `rgb(${DATA_TYPE_COLORS[modality].join(",")})`
38+
: "transparent";
39+
return (
40+
<Box
3741
key={modality}
38-
control={
39-
<Checkbox
40-
checked={selectedModalities.includes(modality)}
41-
onChange={() => handleModalityChange(modality)}
42-
/>
43-
}
44-
label={modality}
45-
/>
46-
</Box>
47-
))}
42+
sx={{
43+
display: "flex",
44+
flexDirection: "column",
45+
}}
46+
>
47+
<FormControlLabel
48+
// key={modality}
49+
control={
50+
<Checkbox
51+
sx={{ color: Colors.primary.dark }}
52+
checked={selectedModalities.includes(modality)}
53+
onChange={() => handleModalityChange(modality)}
54+
/>
55+
}
56+
label={
57+
<Typography
58+
sx={{
59+
color: Colors.lightGray,
60+
backgroundColor: bgColor,
61+
borderRadius: "5px",
62+
padding: "5px",
63+
marginBottom: "5px",
64+
fontWeight: "bold",
65+
minWidth: "45px",
66+
}}
67+
>
68+
{modality}
69+
</Typography>
70+
}
71+
/>
72+
</Box>
73+
);
74+
})}
4875
</Box>
4976
);
5077
};

‎src/modules/universe/NeuroJsonGraph.tsx‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,26 @@ export interface NodeObject {
2121
standard: string[];
2222
}
2323

24+
// Define the datatype to color mapping
25+
export const DATA_TYPE_COLORS: Record<string, [number, number, number]> = {
26+
// mri: [79, 51, 130], // deep purple
27+
mri: [160, 138, 233], // soft laender
28+
anat: [160, 138, 233],
29+
// fmri: [10, 81, 20], // dark green
30+
fmri: [152, 202, 32], // bright lime green
31+
func: [152, 202, 32],
32+
33+
pet: [0, 105, 192], // deep blue
34+
meg: [156, 57, 0], // dark reddish-brown
35+
eeg: [134, 31, 55], // dark red-pink
36+
ieeg: [18, 109, 62], // forest green
37+
beh: [12, 93, 210], // bright blue
38+
fmap: [255, 255, 59], // vivid yellow
39+
dwi: [200, 9, 12], // deep red
40+
fnirs: [255, 193, 7], // golden yellow
41+
phenotype: [255, 87, 34], // vibrant orange-red
42+
};
43+
2444
const NeuroJsonGraph: React.FC<{
2545
registry: Database[];
2646
onNodeClick?: (node: NodeObject) => void;
@@ -29,24 +49,24 @@ const NeuroJsonGraph: React.FC<{
2949
const graphRef = useRef<HTMLDivElement>(null);
3050

3151
// Define the datatype to color mapping
32-
const DATA_TYPE_COLORS: Record<string, [number, number, number]> = {
33-
// mri: [79, 51, 130], // deep purple
34-
mri: [160, 138, 233], // soft laender
35-
anat: [160, 138, 233],
36-
// fmri: [10, 81, 20], // dark green
37-
fmri: [152, 202, 32], // bright lime green
38-
func: [152, 202, 32],
39-
40-
pet: [0, 105, 192], // deep blue
41-
meg: [156, 57, 0], // dark reddish-brown
42-
eeg: [134, 31, 55], // dark red-pink
43-
ieeg: [18, 109, 62], // forest green
44-
beh: [12, 93, 210], // bright blue
45-
fmap: [255, 255, 59], // vivid yellow
46-
dwi: [200, 9, 12], // deep red
47-
fnirs: [255, 193, 7], // golden yellow
48-
phenotype: [255, 87, 34], // vibrant orange-red
49-
};
52+
// const DATA_TYPE_COLORS: Record<string, [number, number, number]> = {
53+
// // mri: [79, 51, 130], // deep purple
54+
// mri: [160, 138, 233], // soft laender
55+
// anat: [160, 138, 233],
56+
// // fmri: [10, 81, 20], // dark green
57+
// fmri: [152, 202, 32], // bright lime green
58+
// func: [152, 202, 32],
59+
60+
// pet: [0, 105, 192], // deep blue
61+
// meg: [156, 57, 0], // dark reddish-brown
62+
// eeg: [134, 31, 55], // dark red-pink
63+
// ieeg: [18, 109, 62], // forest green
64+
// beh: [12, 93, 210], // bright blue
65+
// fmap: [255, 255, 59], // vivid yellow
66+
// dwi: [200, 9, 12], // deep red
67+
// fnirs: [255, 193, 7], // golden yellow
68+
// phenotype: [255, 87, 34], // vibrant orange-red
69+
// };
5070

5171
// Function to blend colors based on datatypes
5272
const blendColors = (datatypes: string[]): string => {

‎src/pages/Home.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ const Home: React.FC = () => {
111111
</Box>
112112
<Box
113113
sx={{
114-
zIndex: "4",
114+
zIndex: "2",
115115
position: "relative",
116116
width: "100%",
117117
overflow: "hidden",
@@ -143,7 +143,9 @@ const Home: React.FC = () => {
143143
position: "absolute",
144144
top: "6%",
145145
left: "1%",
146-
backgroundColor: "none",
146+
backgroundColor: "rgba(97, 109, 243, 0.1)",
147+
backdropFilter: "blur(10px)",
148+
boxShadow: `0px 0px 5px ${Colors.lightYellow}`,
147149
padding: "1.5rem",
148150
borderRadius: "8px",
149151
}}

0 commit comments

Comments
 (0)