fix:commit and remove all the commit

frontend/family_tree/src/App.js

@@ -0,0 +1,91 @@
+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";
+<<<<<<< HEAD
+import {CHILDREN_QUERY, BATCH_QUERY, PATH_QUERY} from "./Queries.js";
+=======
+import {PATH_QUERY, ALL_QUERY} from "./Queries.js";
+>>>>>>> a052d25 (added method to show search suggestions)
+
+function App() {
+
+  const theme = createTheme({
+    palette: {
+      primary: {
+        main: "#2a4158"
+      }
+    }
+  });
+
+  const [details, setDetails] = useState({ name:"name", branch:"branch", year:"year", email:"email", picture:"picture", linkedIn:"", hometown:"", coCurriculars:"", socialMedia:"", display:true});
+  const [TreeData, setTreeData] = useState({});
+  const [SearchData, setSearchData] = useState({});
+
+  async function FetchPath(rollNo) {
+    const response = await client.query({
+      query: PATH_QUERY,
+      variables: {
+        rollNo,
+      },
+    })
+    return response.data.studentPath;
+  }
+
+  async function FetchAll() {
+    const response = await client.query({
+      query: ALL_QUERY,
+    })
+    return response.data.students;
+  }
+
+  useEffect(() => {
+    (FetchAll())
+      .then(value => {setSearchData(value);})
+  , []})
+
+  useEffect(() => {
+    (FetchPath("B20AI054")).then(value => {setTreeData(value);})
+  , [TreeData]})
+
+
+  return (
+    <ThemeProvider theme={theme}>
+    <div className="App">
+<<<<<<< HEAD
+      <SearchBar placeholder="Enter the Name or Roll Number..." studentData={StudentData} />
+=======
+      <SearchBar placeholder="Enter the Name or Roll Number..." studentData={SearchData} />
+>>>>>>> a052d25 (added method to show search suggestions)
+      <div className="help">
+        <Help />
+      </div>
+      {TreeData[0] && 
+      <D3Tree 
+        TreeData = {TreeData}
+        setDetails = {setDetails}
+      />}
+
+      <PCard 
+        branch={details.branch}
+        name={details.name}
+        year={details.year}
+        email={details.email}
+        picture={details.picture}
+        linkedIn={details.linkedIn}
+        hometown={details.hometown}
+        coCurriculars={details.coCurriculars}
+        socialMedia={details.socialMedia}
+        display= {details.display}
+      />
+    </div>
+    </ThemeProvider>
+  );
+}
+
+export default App;

frontend/family_tree/src/Components/SearchBar.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import "../Styles/SearchBar.css";
+import SearchIcon from "@material-ui/icons/Search";
+import CloseIcon from "@material-ui/icons/Close"
+
+function SearchBar({ placeholder, studentData }) {
+  const [filteredData, setFilteredData] = useState([]);
+  const [wordEntered, setWordEntered] = useState("");
+
+  const handleFilter = (event) => {
+    const searchWord = event.target.value;
+    setWordEntered(searchWord);
+    if (searchWord.length < 3) {
+      setFilteredData([]);
+    } else {
+      const filteredResults = studentData.filter((query) => {
+        return query.name.toLowerCase().includes(searchWord.toLowerCase()) + query.rollNo.toLowerCase().includes(searchWord.toLowerCase());
+      });
+      setFilteredData(filteredResults);
+    }
+  };
+
+  const clearState = () => {
+    setFilteredData([]);
+    setWordEntered("");
+  };
+
+  return (
+    <div className="search">
+      <div className="searchInputs">
+        <input
+          type="text"
+          placeholder={placeholder}
+          value={wordEntered}
+          onChange={handleFilter}
+        />
+        <div className="searchIcon">
+          {wordEntered.length === 0 ? (
+            <SearchIcon />
+          ) : (
+            <CloseIcon id="clearBtn" onClick={clearState} />
+          )}
+        </div>
+      </div>
+      {filteredData.length !== 0 && (
+        <div className="dataResult">
+          {filteredData.slice(0, 5).map((value) => {
+            return (
+              <p className="dataItem">{`${value.name} (${value.rollNo})`} </p>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SearchBar;

frontend/family_tree/src/Components/Tree.js

@@ -0,0 +1,223 @@
+import * as d3 from 'd3';
+import StudentData from "../Data1.json";
+import React, { useLayoutEffect } from "react";
+
+function D3Tree(props){
+  useLayoutEffect(() =>{
+    var width = window.innerWidth;
+    var height = window.innerHeight;
+
+    var svg = d3.select("#tree")
+                    .append("svg").attr("width", width).attr("height", height)
+                    .call(d3.zoom().on("zoom", function (event) {
+                      svg.attr("transform", event.transform)
+                    }))
+                    .append("g")
+                    .attr("transform", "translate(" + width/2 + "," + height/3 + ")");
+    var data = props.TreeData;    
+
+    var treemap = d3.tree().size([height,width]).nodeSize([120, 40]);
+
+    var stratify = d3.stratify().id(d=>d.rollNo).parentId(d=>d.parentId) ;
+    var root = stratify(data);
+
+    var i = 0;
+    var duration = 750;
+
+    root.x0 = height / 2;
+    root.y0 = 0;
+
+    if(root.children){
+    root.children.forEach(collapse);}
+    function collapse(d) {
+      if(d.children) {
+        d._children = d.children
+        d._children.forEach(collapse)
+        d.children = null
+      }
+    }
+    update(root);
+
+    function update(source) {
+      var treeData = treemap(root);
+
+      var nodes = treeData.descendants(),
+          links = treeData.descendants().slice(1);
+
+      nodes.forEach(function(d){ 
+        d.y = d.depth * 180 ;
+      });
+
+
+      var node = svg.selectAll('g.node')
+          .data(nodes, function(d) {return d.id || (d.id = ++i); });
+
+      var nodeEnter = node.enter().append('g')
+          .attr('class', 'node')
+          .attr("transform", function(d) {
+            return "translate(" + source.x0  + "," + source.y0 + ")";
+        })
+        .on('click', click)
+        .on("mouseover", function(d,node) {
+          updateChildren(d,node)
+          var g = d3.select(this); 
+          if(g.property("childNodes").length<3) {
+            g.append('circle')
+            .attr('class', 'button')
+            .attr('fill', 'gray')
+            .attr('r', 10)
+            .attr("cx", -10)
+            .attr("cy", -14);
+            g.select('.button')
+            .append('animate')
+            .classed('animate', true)
+            .attr('attributeName', 'r')
+            .attr('values', '0;10')
+            .attr('begin', 'indefinite')
+            .attr('dur', '0.2s')
+            .attr('repeatCount', 1);
+          g.append('text')
+            .classed('button', true)
+            .attr('x', -16)
+            .attr('y', -10)
+            .text("FB")
+            .style("border", "solid")
+            .style("stroke", "white")
+            .style("cursor", "pointer")
+            .on('click', test);
+            g._groups[0][0].getElementsByTagName("animate")[0].beginElement();
+          }else{
+            g.selectAll('.button').style("visibility", "visible");
+          }
+        })
+        .on("mouseout", function() {
+          d3.select(this).selectAll('.button').style("visibility", "hidden");
+        })
+        .on('contextmenu', function(node,d){
+          props.setDetails({name: d.id, 
+            branch: d.data.branch, 
+            year: d.data.year,
+            email: d.data.email,
+            picture: d.data.picture,
+            linkedIn: d.data.linkedIn,
+            hometown: d.data.hometown,
+            coCurriculars: d.data.coCurriculars,
+            socialMedia: d.data.socialMedia,
+            display: true
+          });
+        });
+
+      nodeEnter.append('circle')
+          .attr('class', 'node')
+          .attr('r', 1e-6)
+          .style("fill", function(d) {
+              return d._children ? "lightsteelblue" : "#fff";
+          })
+          .on('mouseover',(d)=>{
+            var g=d.target.parentNode
+            if(g.childNodes.length>3){
+            g.getElementsByTagName("animate")[0].beginElement();
+            }
+          });
+
+      nodeEnter.append('text')
+          .attr("dy", ".35em")
+          .attr("x", 13)
+          .text(function(d) { 
+              return d.id; 
+            });
+
+      var nodeUpdate = nodeEnter.merge(node)
+      .attr("fill", "#fff")
+      .attr("stroke", "steelblue")
+      .attr("stroke-width", "3px;")
+      .style('font', '12px sans-serif')
+
+      nodeUpdate.transition()
+        .duration(duration)
+        .attr("transform", function(d) { 
+            return "translate(" + d.x + "," + d.y + ")";
+        });
+
+      nodeUpdate.select('circle.node')
+        .attr('r', 10)
+        .style("fill", function(d) {
+            return d._children ? "lightsteelblue" : "#fff";
+        })
+        .attr('cursor', 'pointer');
+
+      var nodeExit = node.exit().transition()
+          .duration(duration)
+          .attr("transform", function(d) {
+              return "translate(" + source.x + "," + source.y + ")";
+          })
+          .remove();
+
+      nodeExit.select('circle')
+        .attr('r', 1e-6);
+
+      nodeExit.select('text')
+        .style('fill-opacity', 1e-6);
+
+      var link = svg.selectAll('path.link')
+          .data(links, function(d) { return d.id; });
+
+      var linkEnter = link.enter().insert('path', "g")
+          .attr("class", "link")
+          .attr('d', function(d){
+            var o = {x: source.x0, y: source.y0}
+            return diagonal(o, o)
+          });
+
+      var linkUpdate = linkEnter.merge(link)
+        .attr("fill", "none")
+        .attr("stroke", "#ccc")
+        .attr("stroke-width", "2px")
+
+      linkUpdate.transition()
+          .duration(duration)
+          .attr('d', function(d){ return diagonal(d, d.parent) });
+
+      var linkExit = link.exit().transition()
+          .duration(duration)
+          .attr('d', function(d) {
+            var o = {x: source.x, y: source.y}
+            return diagonal(o, o)
+          })
+          .remove();
+
+      nodes.forEach(function(d){
+        d.x0 = d.x;
+        d.y0 = d.y;
+      });
+
+      function diagonal(s, d) {
+        const path = `M ${s.x} ${s.y}
+                  C ${(s.x + d.x) / 2} ${s.y},
+                    ${(s.x + d.x) / 2} ${d.y},
+                    ${d.x} ${d.y}`
+        return path;
+      }
+
+      function test(){
+        console.log("clicked");
+      }
+
+      function click(d,node) {
+        if (node.children) {
+            node._children = node.children;
+            node.children = null;
+          } else {
+            node.children = node._children;
+            node._children = null;
+          }
+        update(node);
+      }
+    }
+  },[])
+
+  return(
+    <div id="tree"></div>
+  )
+}
+export default D3Tree;