Skip to content

Commit 18ce87a

Browse files
elainefan331elainefan331
authored
Merge pull request #8 from NeuroJSON/dev-fan
Updated Database Creation Time and Improved Content Formatting.
2 parents 959f927 + 4c65cc2 commit 18ce87a

File tree

1 file changed

+42
-23
lines changed

1 file changed

+42
-23
lines changed

‎src/components/NodeInfoPanel.tsx‎

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from "react";
1+
import React, { useEffect, useRef } from "react"; // add useRef
22
import { Box, Typography, IconButton, Drawer, Grid, Card, CardContent, CardActions, Button } from "@mui/material";
33
import CloseIcon from "@mui/icons-material/Close";
44
import { NodeObject } from "modules/universe/NeuroJsonGraph";
@@ -16,7 +16,9 @@ interface NodeInfoPanelProps {
1616
nodeData: NodeObject | null;
1717
}
1818

19-
// helper function to covert the database size format
19+
// helper functions
20+
21+
// covert the database size format
2022
const formatSize = (bytes?: number): string =>{
2123
if (bytes === undefined) return "N/A";
2224
if (bytes >= 1_073_741_824) {
@@ -29,23 +31,40 @@ const formatSize = (bytes?: number): string =>{
2931
return `${bytes} Bytes`;
3032
}
3133
};
32-
3334
// 1 Kilobyte (KB) = 1,024 Bytes
3435
// 1 Megabyte (MB) = 1,024 KB = 1,048,576 Bytes (1024*1024)
3536
// 1 Gigabyte (GB) = 1,024 MB = 1,073,741,824 Bytes (1024*1024*1024)
3637

38+
// convert the date format
39+
const dateCoverter = (date?: string): string => {
40+
if (date === undefined) return "N/A";
41+
const newDate = new Date(Number(date) * 1000);
42+
const result = new Intl.DateTimeFormat("en-US", {
43+
year: "numeric",
44+
month: "numeric",
45+
day: "numeric",
46+
hour: "numeric",
47+
minute: "numeric",
48+
second: "numeric"
49+
}).format(newDate);
50+
return result;
51+
}
52+
3753
const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }) => {
3854
const navigate = useNavigate();
3955
const dispatch = useAppDispatch();
4056
const dbInfo = useAppSelector((state: RootState) => state.neurojson.dbInfo);
41-
const loading = useAppSelector((state: RootState) => state.neurojson.loading);
42-
console.log("dbInfo", dbInfo);
57+
// const drawerRef = useRef<HTMLDivElement>(null); // Reference to the Drawer content
58+
// const loading = useAppSelector((state: RootState) => state.neurojson.loading);
59+
// console.log("dbInfo", dbInfo);
4360

4461
useEffect(() => {
4562
if (nodeData?.id) {
4663
dispatch(fetchDbInfo(nodeData.id.toLowerCase()));
4764
}
48-
}, [nodeData, dispatch])
65+
}, [nodeData, dispatch]);
66+
67+
4968

5069
return (
5170
<Drawer
@@ -66,45 +85,45 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
6685
{nodeData? (
6786
<>
6887
{/* Close Button */}
69-
<Box display="flex" justifyContent="space-between" alignItems="center">
70-
<Typography variant="h6" sx={{color: Colors.primary.dark}}>{nodeData.name}</Typography>
88+
<Box display="flex" justifyContent="space-between" alignItems="center" paddingLeft={2}>
89+
<Typography variant="h6" sx={{color: Colors.primary.dark, fontWeight: "Bold"}}>{nodeData.name}</Typography>
7190
<IconButton onClick={onClose} sx={{color: Colors.primary.main}}>
7291
<CloseIcon />
7392
</IconButton>
7493
</Box>
7594
{/* Node Metadata */}
76-
<Grid container spacing={2}>
95+
<Grid container spacing={2} sx={{pl: 2}}>
7796
<Grid item xs={12}>
78-
<Typography>Website</Typography>
97+
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Website</Typography>
7998
<Typography>
80-
<a href={nodeData.url} target="_blank">{nodeData.url}</a>
99+
<a href={nodeData.url} target="_blank" style={{textDecoration: "none", color: Colors.textPrimary}}>{nodeData.url}</a>
81100
</Typography>
82101
</Grid>
83102

84103
<Grid item xs={12}>
85-
<Typography>Number of Datasets</Typography>
104+
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Number of Datasets</Typography>
86105
<Typography>{nodeData.datasets}</Typography>
87106
</Grid>
88107

89108
<Grid item xs={12}>
90-
<Typography>Data Types</Typography>
109+
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Data Types</Typography>
91110
<Typography>{nodeData.datatype.join(", ")}</Typography>
92111
</Grid>
93112

94113
<Grid item xs={12}>
95-
<Typography>Data Standards</Typography>
114+
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Data Standards</Typography>
96115
<Typography>{nodeData.standard.join(", ")}</Typography>
97116
</Grid>
98117

99118
<Grid item xs={12}>
100-
<Typography>Upstream Contact</Typography>
119+
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Upstream Contact</Typography>
101120
<a href={`mailto:${nodeData.support}`} style={{ textDecoration: "none", color: "blue"}}>
102121
<Typography>{nodeData.support}</Typography>
103122
</a>
104123
</Grid>
105124

106125
<Grid item xs={12}>
107-
<Typography>NeuroJSON-Cuated Datasets</Typography>
126+
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>NeuroJSON-Cuated Datasets</Typography>
108127
{dbInfo?(<Typography>{dbInfo.doc_count - 1}</Typography>) : "Coming soon "}
109128
</Grid>
110129
</Grid>
@@ -114,25 +133,25 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
114133
<CardContent>
115134
<Grid container spacing={1}>
116135
<Grid item xs={12}>
117-
<Typography>NeuroJSON.io Database Name</Typography>
136+
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>NeuroJSON.io Database Name</Typography>
118137
<Typography>{dbInfo.db_name}</Typography>
119138
</Grid>
120139
<Grid item xs={12}>
121-
<Typography>REST-API URL</Typography>
122-
<a href={`https://neurojson.io:7777/${dbInfo.db_name}`} target="_blank" rel="noopener noreferrer">
140+
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>REST-API URL</Typography>
141+
<a href={`https://neurojson.io:7777/${dbInfo.db_name}`} target="_blank" rel="noopener noreferrer" style={{textDecoration: "none", color: Colors.textPrimary}}>
123142
{`https://neurojson.io:7777/${dbInfo.db_name}`}
124143
</a>
125144
</Grid>
126145
<Grid item xs={12}>
127-
<Typography>Database Creation Time</Typography>
128-
<Typography></Typography>
146+
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Database Creation Time</Typography>
147+
<Typography>{dateCoverter(dbInfo.instance_start_time)}</Typography>
129148
</Grid>
130149
<Grid item xs={12}>
131-
<Typography>Searchable Database Size</Typography>
150+
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Searchable Database Size</Typography>
132151
<Typography>{formatSize(dbInfo.sizes?.external)}</Typography>
133152
</Grid>
134153
<Grid item xs={12}>
135-
<Typography>DatabaseDisk Size (compressed)</Typography>
154+
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>DatabaseDisk Size (compressed)</Typography>
136155
<Typography>{formatSize(dbInfo.sizes?.file)}</Typography>
137156
</Grid>
138157
</Grid>

0 commit comments

Comments
 (0)