@@ -35,33 +35,12 @@ const Home: React.FC = () => {
3535 } , [ dispatch ] ) ;
3636
3737 // Handle node click: Set selected node and open panel
38- // const handleNodeClick = (node: NodeObject) => {
39- // setSelectedNode(node);
40- // setPanelOpen(true);
41- // };
4238 const handleNodeClick = useCallback ( ( node : NodeObject ) => {
4339 setSelectedNode ( node ) ;
4440 setPanelOpen ( true ) ;
4541 } , [ ] ) ;
4642
4743 // filter logic
48- // const filteredRegistry = registry
49- // ? registry.filter((node) => {
50- // const matchKeyword = node.name
51- // .toLowerCase()
52- // .includes(filterKeyword.toLowerCase());
53- // const matchModalities =
54- // selectedModalities.length === 0 ||
55- // selectedModalities.some((modality) =>
56- // Array.isArray(node.datatype)
57- // ? node.datatype.includes(modality)
58- // : node.datatype === modality
59- // );
60-
61- // return matchKeyword && matchModalities;
62- // })
63- // : [];
64-
6544 const filteredRegistry = useMemo ( ( ) => {
6645 return registry
6746 ? registry . filter ( ( node ) => {
@@ -91,70 +70,87 @@ const Home: React.FC = () => {
9170 minHeight : "500px" , // make sure the view databases card won't be cut when no nodes showing
9271 // display: "flex",
9372 // flexDirection: "column",
73+ // minHeight: "100vh",
9474 } }
9575 >
96- { /* Filter Menu Button */ }
97- < Box sx = { { position : "absolute" , top : 20 , right : 20 , zIndex : 10 } } >
98- < FilterMenu
99- onKeywordFilter = { setFilterKeyword }
100- onModalitiesFilter = { setSelectedModalities }
101- filterKeyword = { filterKeyword }
102- homeSelectedModalities = { selectedModalities }
103- />
104- </ Box >
105- < Box
76+ < Box // add box for group StatisticsBanner and 3d-graph
10677 sx = { {
107- zIndex : "2" ,
108- position : "relative" ,
78+ flex : "2" ,
10979 width : "100%" ,
80+ position : "relative" ,
11081 overflow : "hidden" ,
82+ // minHeight: "100vh",
83+ // minHeight: "90%",
84+ // maxHeight: "80vh",
11185 } }
11286 >
113- { ! registry ? (
114- < Box sx = { { display : "flex" , justifyContent : "center" , mt : 4 } } >
115- < CircularProgress sx = { { color : Colors . primary . main } } />
116- </ Box >
117- ) : filteredRegistry . length > 0 ? (
118- < NeuroJsonGraph
119- registry = { filteredRegistry }
120- onNodeClick = { handleNodeClick }
87+ { /* Filter Menu Button */ }
88+ < Box sx = { { position : "absolute" , top : 20 , right : 20 , zIndex : 10 } } >
89+ < FilterMenu
90+ onKeywordFilter = { setFilterKeyword }
91+ onModalitiesFilter = { setSelectedModalities }
92+ filterKeyword = { filterKeyword }
93+ homeSelectedModalities = { selectedModalities }
12194 />
122- ) : (
123- < Box sx = { { textAlign : "center" , mt : 4 } } >
124- < Typography variant = "h6" color = { Colors . textSecondary } >
125- No matching nodes found
126- </ Typography >
127- </ Box >
128- ) }
95+ </ Box >
96+ < Box
97+ sx = { {
98+ zIndex : "2" ,
99+ position : "relative" ,
100+ width : "100%" ,
101+ overflow : "hidden" ,
102+ } }
103+ >
104+ { ! registry ? (
105+ < Box sx = { { display : "flex" , justifyContent : "center" , mt : 4 } } >
106+ < CircularProgress sx = { { color : Colors . primary . main } } />
107+ </ Box >
108+ ) : filteredRegistry . length > 0 ? (
109+ < NeuroJsonGraph
110+ registry = { filteredRegistry }
111+ onNodeClick = { handleNodeClick }
112+ />
113+ ) : (
114+ < Box sx = { { textAlign : "center" , mt : 4 } } >
115+ < Typography variant = "h6" color = { Colors . textSecondary } >
116+ No matching nodes found
117+ </ Typography >
118+ </ Box >
119+ ) }
120+ </ Box >
121+ < StatisticsBanner />
129122 </ Box >
130123
131124 < Box
132125 sx = { {
133126 overflow : "hidden" ,
134127 maxWidth : "35%" ,
135- // border: "2px yellow solid",
136128 // width: "100%",
137- zIndex : "3" ,
129+ zIndex : 3 ,
138130 position : "absolute" ,
139- top : "10 %" ,
131+ top : "5 %" ,
140132 left : "1%" ,
141133 backgroundColor : "rgba(97, 109, 243, 0.4)" ,
142134 // backgroundColor: "rgba(160, 165, 194, 0.4)",
143135 backdropFilter : "blur(10px)" ,
144- // boxShadow: `2px 2px 5px ${Colors.lightGray}`,
145- padding : "1.5rem" ,
136+ // backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%235865f2' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%2302dec4' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%234c59d1' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%2347e3a9' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23424eb1' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%2377e789' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23394392' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23a3e768' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23303773' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%23d1e449' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23282c56' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23ffdd31' points='943 900 1210 900 971 687'/%3E%3C/svg%3E")`,
137+ // backgroundAttachment: "local",
138+ // backgroundSize: "cover",
139+ padding : { xs : "1rem" , sm : "1rem" , md : "1.5rem" } , // Responsive padding
146140 borderRadius : "8px" ,
141+ flexShrink : 0 ,
142+ // minHeight: "800px",
147143 } }
148144 >
149145 { /* Header Section */ }
150146 < Typography
151147 variant = "h3"
152148 gutterBottom
153- sx = { { color : Colors . white , fontWeight : "medium" } }
149+ sx = { { color : Colors . lightGray , fontWeight : "medium" } }
154150 >
155151 Discover NeuroJSON.io
156152 </ Typography >
157- < Typography variant = "body1" sx = { { color : Colors . white } } >
153+ < Typography variant = "body1" sx = { { color : Colors . lightGray } } >
158154 Efficiently manage and explore your CouchDB databases and datasets
159155 with ease.
160156 </ Typography >
@@ -185,7 +181,6 @@ const Home: React.FC = () => {
185181 onClose = { ( ) => setPanelOpen ( false ) }
186182 nodeData = { selectedNode }
187183 />
188- < StatisticsBanner />
189184 </ Container >
190185 ) ;
191186} ;
0 commit comments