tree error

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Python: Current File",
+            "type": "python",
+            "request": "launch",
+            "program": "${file}",
+            "console": "integratedTerminal"
+        }
+    ]
+}

frontend/family_tree/src/App.js

@@ -18,8 +18,9 @@ function App() {
     }
   });
 
-  const [details, setDetails] = useState({ name:"name", branch:"branch", year:"year", email:"email", picture:"picture", linkedIn:"", hometown:"", coCurriculars:"", socialMedia:"", display:true});
+  const [details, setDetails] = useState({ name:"IIT JODHPUR", branch:"FAMILY", year:"TREE", email:"email", picture:"picture", linkedIn:"", hometown:"", coCurriculars:"", socialMedia:"", display:false});
   const [TreeData, setTreeData] = useState({});
+  const [clickedNode, setClickedNode] = useState("");
 
   async function FetchPath(rollNo) {
     const response = await client.query({
@@ -32,21 +33,21 @@ function App() {
   }
 
   useEffect(() => {
-    (FetchPath("Root"))
-      .then(value => {setTreeData(value);})
-  , [TreeData]})
+    (FetchPath("Root")).then(value => {setTreeData(value);})
+  },[TreeData])
 
   return (
     <ThemeProvider theme={theme}>
     <div className="App">
-      <SearchBar placeholder="Enter the Name or Roll Number..." />
+      <SearchBar placeholder="Enter the Name or Roll Number..." setClickedNode={setClickedNode}/>
       <div className="help">
         <Help />
       </div>
       {TreeData[0] && 
       <D3Tree 
         TreeData = {TreeData}
         setDetails = {setDetails}
+        clickedNode = {clickedNode}
       />}
 
       <PCard 
@@ -58,7 +59,7 @@ function App() {
         linkedIn={details.linkedIn}
         hometown={details.hometown}
         coCurriculars={details.coCurriculars}
-        socialMedia={details.socialMedia}
+        // socialMedia={details.socialMedia}
         display= {details.display}
       />
     </div>

frontend/family_tree/src/Components/ProfileCard.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   Typography,
   Card,
@@ -43,15 +43,18 @@ const useStyles = makeStyles((theme) => ({
 
 function PCard(props) {
   const classes = useStyles();
-  const [isVisible, setisVisible] = React.useState(props.display?true:false);
-  const toggle = () => setisVisible(!isVisible);
+  const [isVisible, setisVisible] = React.useState(false);
+  useEffect(()=>{
+    setisVisible(true);
+  },[props.display])
+
   return (
     <React.Fragment>
       { isVisible && (
       <Card className={classes.root} variant="outlined" >
         <Box sx={{ display: "flex", justifyContent: "right" }}>
          <CardActions>
-          <IconButton aria-label="close" onClick={toggle} >
+          <IconButton aria-label="close" onClick={() => {setisVisible(false);}} >
             <CloseOutlinedIcon />
           </IconButton>
           </CardActions>
@@ -113,7 +116,7 @@ function PCard(props) {
               <Divider variant="middle" />
               <br />
               <Box sx={{ color: "#2a4158" ,textAlign:"center"}}>
-                {props.coCurriculars.map((item) => (
+                {props.coCurriculars.split(",").map((item) => (
                   <Typography variant="body2" key={item} gutterBottom>
                     {item}
                   </Typography>
@@ -130,7 +133,7 @@ function PCard(props) {
             flexWrap: "wrap"
           }}
         >
-          <CardActions>
+          {/* <CardActions>
             {props.email && (
                 <IconButton 
                   className={classes.socialMediaButton} 
@@ -200,7 +203,7 @@ function PCard(props) {
                   <TwitterIcon color="primary" />
                 </IconButton>
             )}
-          </CardActions>
+          </CardActions> */}
         </Box>
       </Card>
        )}

frontend/family_tree/src/Components/SearchBar.js

@@ -5,7 +5,7 @@ import CloseIcon from "@material-ui/icons/Close";
 import {client} from "../index.js";
 import {SEARCH_QUERY} from "../Queries.js";
 
-function SearchBar({ placeholder}) {
+function SearchBar({ placeholder, setClickedNode}) {
   const [wordEntered, setWordEntered] = useState("");
   const [retrievedData, setRetrievedData] = useState([]);
 
@@ -34,6 +34,10 @@ function SearchBar({ placeholder}) {
     setWordEntered("");
   };
 
+  var getRollNo = (e) => {
+    setClickedNode(e.target.innerHTML.slice(-10,-2));
+  }
+
   return (
     <div className="search">
       <div className="searchInputs">
@@ -55,7 +59,7 @@ function SearchBar({ placeholder}) {
         <div className="dataResult">
           {retrievedData.slice(0, 5).map((value) => {
             return (
-              <p className="dataItem" >{`${value.name} (${value.rollNo})`} </p>
+              <p className="dataItem" onClick={getRollNo}>{`${value.name} (${value.rollNo})`} </p>
             );
           })}
         </div>