fix:commit and remove all the commit

Author: a19hu

backend/family_tree/node_modules/django/package.json

@@ -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);
+}

backend/family_tree/package-lock.json

@@ -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() {
 
@@ -21,7 +20,7 @@ function App() {
 
   const [details, setDetails] = useState({ name:"name", branch:"branch", year:"year", email:"email", picture:"picture", linkedIn:"", hometown:"", coCurriculars:"", socialMedia:"", display:true});
   const [TreeData, setTreeData] = useState({});
-  
+
   async function FetchPath(rollNo) {
     const response = await client.query({
       query: PATH_QUERY,
@@ -33,14 +32,14 @@ function App() {
   }
 
   useEffect(() => {
-    (FetchPath("B20AI054")).then(value => {setTreeData(value);})
+    (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..." />
       <div className="help">
         <Help />
       </div>

frontend/family_tree/src/App.css

@@ -1,27 +1,36 @@
 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}) {
   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("");
   };
 
@@ -42,11 +51,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" >{`${value.name} (${value.rollNo})`} </p>
             );
           })}
         </div>
@@ -55,4 +64,4 @@ function SearchBar({ placeholder, studentData }) {
   );
 }
 
-export default SearchBar;
+export default SearchBar;

frontend/family_tree/src/App.js

@@ -1,6 +1,7 @@
 import * as d3 from 'd3';
-import StudentData from "../Data1.json";
 import React, { useLayoutEffect } from "react";
+import {CHILDREN_QUERY} from "../Queries.js";
+import {client} from "../index.js";
 
 function D3Tree(props){
   useLayoutEffect(() =>{
@@ -27,6 +28,16 @@ function D3Tree(props){
     root.x0 = height / 2;
     root.y0 = 0;
 
+    async function FetchChildren(parentId) {
+      const response = await client.query({
+        query: CHILDREN_QUERY,
+        variables: {
+          parentId,
+        },
+      })
+      return response.data.children;
+    }
+
     if(root.children){
     root.children.forEach(collapse);}
     function collapse(d) {
@@ -58,6 +69,41 @@ function D3Tree(props){
             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, 
@@ -77,6 +123,12 @@ function D3Tree(props){
           .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')
@@ -158,6 +210,10 @@ function D3Tree(props){
         return path;
       }
 
+      function test(){
+        console.log("clicked");
+      }
+
       function click(d,node) {
         if (node.children) {
             node._children = node.children;
@@ -168,6 +224,19 @@ function D3Tree(props){
           }
         update(node);
       }
+
+      function updateChildren(d,node){
+        if(!node.children && !node._children){
+          FetchChildren(node.data.rollNo)
+          .then(value=> {
+              if(value.length!==0){
+              data = data.concat(value);
+              root = stratify(data);
+              node._children = value;
+            }
+          })
+        }
+      }
     }
   },[])
 

frontend/family_tree/src/Components/SearchBar.js

@@ -14,9 +14,9 @@ export const CHILDREN_QUERY = gql `
 export const BATCH_QUERY = gql `
     query StudentType($rollNo: String!) {
         studentBatch(roll: $rollNo) {
-            id,
             name,
             rollNo,
+            id,
             parentId,
         }
     }
@@ -25,10 +25,19 @@ export const BATCH_QUERY = gql `
 export const PATH_QUERY = gql `
     query StudentType($rollNo: String!) {
         studentPath(roll: $rollNo) {
-            id,
             name,
             rollNo,
+            id,
             parentId,
         }
     }
+`;
+
+export const SEARCH_QUERY = gql `
+    query StudentType($string: String!) {
+        studentSearch(searchQuery: $string) {
+            name,
+            rollNo,
+        }
+    }
 `;