fixed some bugs in tree and profile card

.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.css

@@ -47,3 +47,18 @@
   width: 150px;
   height: 170px;
 }
+
+.button {
+	border: 1px;
+	border-radius: 6px;
+	cursor: pointer;
+	font-family: "JetBrains Mono";
+	overflow: hidden;
+	text-decoration: none; 
+	transition: box-shadow .15s, transform .15s;
+	will-change: box-shadow, transform;
+}
+
+.button:active {
+	transform: translateY(1px);
+}

frontend/family_tree/src/App.js

@@ -2,12 +2,11 @@ import React, { useEffect, useState } from "react";
 import './App.css';
 import Help from './Components/Help.js';
 import SearchBar from "./Components/SearchBar";
-import StudentData from "./Data.json";
 import PCard from "./Components/ProfileCard.js";
 import { ThemeProvider, createTheme } from "@material-ui/core";
 import D3Tree from "./Components/Tree";
 import {client} from "./index.js";
-import {CHILDREN_QUERY, BATCH_QUERY, PATH_QUERY} from "./Queries.js";
+import {PATH_QUERY} from "./Queries.js";
 
 function App() {
 
@@ -19,9 +18,10 @@ 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({
       query: PATH_QUERY,
@@ -33,21 +33,21 @@ function App() {
   }
 
   useEffect(() => {
-    (FetchPath("B20AI054")).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..." studentData={StudentData} />
+      <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 
@@ -59,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

@@ -1,30 +1,43 @@
 import React, { useState } from "react";
 import "../Styles/SearchBar.css";
 import SearchIcon from "@material-ui/icons/Search";
-import CloseIcon from "@material-ui/icons/Close"
+import CloseIcon from "@material-ui/icons/Close";
+import {client} from "../index.js";
+import {SEARCH_QUERY} from "../Queries.js";
 
-function SearchBar({ placeholder, studentData }) {
-  const [filteredData, setFilteredData] = useState([]);
+function SearchBar({ placeholder, setClickedNode}) {
   const [wordEntered, setWordEntered] = useState("");
+  const [retrievedData, setRetrievedData] = useState([]);
+
+  async function FetchString(string) {
+    const response = await client.query({
+      query: SEARCH_QUERY,
+      variables: {
+        string,
+      },
+    })
+    return response.data.studentSearch;
+  }
 
   const handleFilter = (event) => {
     const searchWord = event.target.value;
     setWordEntered(searchWord);
     if (searchWord.length < 3) {
-      setFilteredData([]);
+      setRetrievedData([]);
     } else {
-      const filteredResults = studentData.filter((query) => {
-        return query.student.name.toLowerCase().includes(searchWord.toLowerCase()) + query.student.id.toLowerCase().includes(searchWord.toLowerCase());
-      });
-      setFilteredData(filteredResults);
+      FetchString(searchWord).then(value => setRetrievedData(value));
     }
   };
 
   const clearState = () => {
-    setFilteredData([]);
+    setRetrievedData([]);
     setWordEntered("");
   };
 
+  var getRollNo = (e) => {
+    setClickedNode(e.target.innerHTML.slice(-10,-2));
+  }
+
   return (
     <div className="search">
       <div className="searchInputs">
@@ -42,11 +55,11 @@ function SearchBar({ placeholder, studentData }) {
           )}
         </div>
       </div>
-      {filteredData.length !== 0 && (
+      {retrievedData.length !== 0 && (
         <div className="dataResult">
-          {filteredData.slice(0, 5).map((value) => {
+          {retrievedData.slice(0, 5).map((value) => {
             return (
-              <p className="dataItem">{`${value.student.name} (${value.student.id})`} </p>
+              <p className="dataItem" onClick={getRollNo}>{`${value.name} (${value.rollNo})`} </p>
             );
           })}
         </div>
@@ -55,4 +68,4 @@ function SearchBar({ placeholder, studentData }) {
   );
 }
 
-export default SearchBar;
+export default SearchBar;