From ef2d99d144c567ed40d64a8b5fdd7a00ef1240d0 Mon Sep 17 00:00:00 2001 From: khushi-parikh Date: Wed, 2 Feb 2022 19:47:50 +0530 Subject: [PATCH 1/3] fetch children of nodes in path of clicked search query --- .vscode/launch.json | 15 +++++ .../family_tree/node_modules/django/README.md | 5 ++ frontend/family_tree/src/App.js | 9 +-- .../family_tree/src/Components/SearchBar.js | 8 ++- frontend/family_tree/src/Components/Tree.js | 61 ++++++++++++++----- 5 files changed, 77 insertions(+), 21 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 backend/family_tree/node_modules/django/README.md diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..17e15f27 --- /dev/null +++ b/.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" + } + ] +} \ No newline at end of file diff --git a/backend/family_tree/node_modules/django/README.md b/backend/family_tree/node_modules/django/README.md new file mode 100644 index 00000000..b5932373 --- /dev/null +++ b/backend/family_tree/node_modules/django/README.md @@ -0,0 +1,5 @@ +# Security holding package + +This package name is not currently in use, but was formerly occupied +by another package. To avoid malicious use, npm is hanging on to the +package name. diff --git a/frontend/family_tree/src/App.js b/frontend/family_tree/src/App.js index 6f63e2ed..85280a98 100644 --- a/frontend/family_tree/src/App.js +++ b/frontend/family_tree/src/App.js @@ -20,6 +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({}); + const [clickedNode, setClickedNode] = useState(""); async function FetchPath(rollNo) { const response = await client.query({ @@ -32,14 +33,13 @@ function App() { } useEffect(() => { - (FetchPath("Root")) - .then(value => {setTreeData(value);}) - , [TreeData]}) + (FetchPath("Root")).then(value => {setTreeData(value);}) + },[TreeData]) return (
- +
@@ -47,6 +47,7 @@ function App() { } { + setClickedNode(e.target.innerHTML.slice(-10,-2)); + } + return (
@@ -55,7 +59,7 @@ function SearchBar({ placeholder}) {
{retrievedData.slice(0, 5).map((value) => { return ( -

{`${value.name} (${value.rollNo})`}

+

{`${value.name} (${value.rollNo})`}

); })}
diff --git a/frontend/family_tree/src/Components/Tree.js b/frontend/family_tree/src/Components/Tree.js index 83b103d9..f7892bb9 100644 --- a/frontend/family_tree/src/Components/Tree.js +++ b/frontend/family_tree/src/Components/Tree.js @@ -1,9 +1,51 @@ import * as d3 from 'd3'; -import React, { useLayoutEffect } from "react"; -import {CHILDREN_QUERY} from "../Queries.js"; +import React, { useEffect, useLayoutEffect, useState } from "react"; +import {CHILDREN_QUERY, PATH_QUERY} from "../Queries.js"; import {client} from "../index.js"; function D3Tree(props){ + var data = props.TreeData; + var stratify = d3.stratify().id(d=>d.rollNo).parentId(d=>d.parentId) ; + var root = stratify(data); + + async function FetchPath(rollNo) { + const response = await client.query({ + query: PATH_QUERY, + variables: { + rollNo, + }, + }) + return response.data.studentPath; + } + + async function FetchChildren(parentId) { + const response = await client.query({ + query: CHILDREN_QUERY, + variables: { + parentId, + }, + }) + return response.data.children; + } + + useEffect(()=>{ + FetchPath(props.clickedNode).then((value)=> { + for(var i=value.length-1; i>=0; i--){ + if(value[i].rollNo!==props.clickedNode){ + FetchChildren(value[i].rollNo).then((value1)=>{ + for(var i=0; i{ var width = window.innerWidth; var height = window.innerHeight; @@ -15,12 +57,10 @@ function D3Tree(props){ })) .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; @@ -28,16 +68,6 @@ 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) { @@ -236,6 +266,7 @@ function D3Tree(props){ } }) } + console.log("click",data) } } },[]) From 04fb2a66e4e60d40596584e34993b939a8f17d59 Mon Sep 17 00:00:00 2001 From: khushi-parikh Date: Sat, 5 Feb 2022 16:40:08 +0530 Subject: [PATCH 2/3] tree-error --- frontend/family_tree/src/App.js | 2 +- frontend/family_tree/src/Components/Tree.js | 139 ++++++++++++-------- 2 files changed, 85 insertions(+), 56 deletions(-) diff --git a/frontend/family_tree/src/App.js b/frontend/family_tree/src/App.js index 85280a98..e5f19421 100644 --- a/frontend/family_tree/src/App.js +++ b/frontend/family_tree/src/App.js @@ -60,7 +60,7 @@ function App() { hometown={details.hometown} coCurriculars={details.coCurriculars} socialMedia={details.socialMedia} - display= {details.display} + display= {false} />
diff --git a/frontend/family_tree/src/Components/Tree.js b/frontend/family_tree/src/Components/Tree.js index f7892bb9..1856a9e3 100644 --- a/frontend/family_tree/src/Components/Tree.js +++ b/frontend/family_tree/src/Components/Tree.js @@ -5,7 +5,13 @@ import {client} from "../index.js"; function D3Tree(props){ var data = props.TreeData; + // var [data,setData] = useState(props.TreeData); + // const updateData = useCallback( + // result => setData(data.concat(result)), + // [data, setData] + // ); var stratify = d3.stratify().id(d=>d.rollNo).parentId(d=>d.parentId) ; + console.log("d1",data); var root = stratify(data); async function FetchPath(rollNo) { @@ -36,14 +42,18 @@ function D3Tree(props){ for(var i=0; i{ @@ -79,7 +89,7 @@ function D3Tree(props){ } update(root); - function update(source) { + function update(source){ var treeData = treemap(root); var nodes = treeData.descendants(), @@ -100,36 +110,38 @@ function D3Tree(props){ }) .on('click', click) .on("mouseover", function(d,node) { + // console.log("hi"); 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"); - } + // console.log("bye"); + // 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"); @@ -239,35 +251,52 @@ function D3Tree(props){ ${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); - } + function test(){ + console.log("clicked"); + } - 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; - } - }) + function click(d,node) { + console.log(node.data.rollNo,node._children,node.children); + console.log(node); + if (node.children) { + node._children = node.children; + node.children = null; + } else { + node.children = node._children; + node._children = null; } - console.log("click",data) + console.log("after",node.data.rollNo,node._children,node.children); + update(node); + // console.log("node",node._children,node.children); + } + + function updateChildren(d,node){ + if(!node.children && !node._children){ + FetchChildren(node.data.rollNo) + .then(value=> { + if(value.length!==0){ + for(var i=0; i [...data, value]); + break; + } + } + // setData(data => [...data, value]); + // console.log("data",data); + // node._children = value; + root = stratify(data); + // node._children = value; + } + }) + // .then(console.log("hi",data)) } + // console.log("click",data) } },[]) From 94e9c11aa55a044641aec9e5294875dbbd3dc2b3 Mon Sep 17 00:00:00 2001 From: khushi-parikh Date: Wed, 1 Jun 2022 16:49:31 +0530 Subject: [PATCH 3/3] fixed some bugs --- frontend/family_tree/src/App.js | 6 +- .../family_tree/src/Components/ProfileCard.js | 17 ++- frontend/family_tree/src/Components/Tree.js | 139 +++++++++--------- frontend/family_tree/src/Queries.js | 14 ++ 4 files changed, 95 insertions(+), 81 deletions(-) diff --git a/frontend/family_tree/src/App.js b/frontend/family_tree/src/App.js index e5f19421..3a12df51 100644 --- a/frontend/family_tree/src/App.js +++ b/frontend/family_tree/src/App.js @@ -18,7 +18,7 @@ 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(""); @@ -59,8 +59,8 @@ function App() { linkedIn={details.linkedIn} hometown={details.hometown} coCurriculars={details.coCurriculars} - socialMedia={details.socialMedia} - display= {false} + // socialMedia={details.socialMedia} + display= {details.display} />
diff --git a/frontend/family_tree/src/Components/ProfileCard.js b/frontend/family_tree/src/Components/ProfileCard.js index dfc24c5a..1780eda0 100644 --- a/frontend/family_tree/src/Components/ProfileCard.js +++ b/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 ( { isVisible && ( - + {setisVisible(false);}} > @@ -113,7 +116,7 @@ function PCard(props) {
- {props.coCurriculars.map((item) => ( + {props.coCurriculars.split(",").map((item) => ( {item} @@ -130,7 +133,7 @@ function PCard(props) { flexWrap: "wrap" }} > - + {/* {props.email && ( )} - + */} )} diff --git a/frontend/family_tree/src/Components/Tree.js b/frontend/family_tree/src/Components/Tree.js index 1856a9e3..41861ea9 100644 --- a/frontend/family_tree/src/Components/Tree.js +++ b/frontend/family_tree/src/Components/Tree.js @@ -1,17 +1,11 @@ import * as d3 from 'd3'; import React, { useEffect, useLayoutEffect, useState } from "react"; -import {CHILDREN_QUERY, PATH_QUERY} from "../Queries.js"; +import {CHILDREN_QUERY, PATH_QUERY, NODE_DETAILS_QUERY} from "../Queries.js"; import {client} from "../index.js"; function D3Tree(props){ var data = props.TreeData; - // var [data,setData] = useState(props.TreeData); - // const updateData = useCallback( - // result => setData(data.concat(result)), - // [data, setData] - // ); var stratify = d3.stratify().id(d=>d.rollNo).parentId(d=>d.parentId) ; - console.log("d1",data); var root = stratify(data); async function FetchPath(rollNo) { @@ -34,28 +28,37 @@ function D3Tree(props){ return response.data.children; } - useEffect(()=>{ - FetchPath(props.clickedNode).then((value)=> { - for(var i=value.length-1; i>=0; i--){ - if(value[i].rollNo!==props.clickedNode){ - FetchChildren(value[i].rollNo).then((value1)=>{ - for(var i=0; i{ + // FetchPath(props.clickedNode).then((value)=> { + // for(var i=value.length-1; i>=0; i--){ + // if(value[i].rollNo!==props.clickedNode){ + // FetchChildren(value[i].rollNo).then((value1)=>{ + // for(var i=0; i temp.rollNo===value1[i].rollNo)); + // if(!hasValue){ + // data = data.concat(value1); + // console.log(data); + // break; + // } + // } + // }); + // } + // } + // root = stratify(data); + // update(root); + // }) + // },[props.clickedNode,data]) + useLayoutEffect(() =>{ var width = window.innerWidth; var height = window.innerHeight; @@ -70,8 +73,6 @@ function D3Tree(props){ var treemap = d3.tree().size([height,width]).nodeSize([120, 40]); - - var i = 0; var duration = 750; @@ -79,7 +80,9 @@ function D3Tree(props){ root.y0 = 0; if(root.children){ - root.children.forEach(collapse);} + root.children.forEach(collapse); + } + function collapse(d) { if(d.children) { d._children = d.children @@ -91,7 +94,6 @@ function D3Tree(props){ function update(source){ var treeData = treemap(root); - var nodes = treeData.descendants(), links = treeData.descendants().slice(1); @@ -99,20 +101,21 @@ function D3Tree(props){ d.y = d.depth * 180 ; }); - var node = svg.selectAll('g.node') .data(nodes, function(d) {return d.id || (d.id = ++i); }); + var display = false; + 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) { - // console.log("hi"); - updateChildren(d,node) - // console.log("bye"); + .on("mousedown", function(d,node) { + if(d.button==0){ + updateChildren(d,node) + } // var g = d3.select(this); // if(g.property("childNodes").length<3) { // g.append('circle') @@ -147,17 +150,22 @@ function D3Tree(props){ 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 - }); + node.preventDefault(); + display = !display; + FetchNodeDetails(d.data.rollNo).then((value)=>{ + props.setDetails({name: d.data.name, + branch: value.branch, + year: value.year, + email: value.email, + picture: value.picture, + linkedIn: value.linkedIn, + hometown: value.homeTown, + coCurriculars: value.extraCurriculars, + // socialMedia: value.socialMedia, + display: display, + }); + }) + }); nodeEnter.append('circle') @@ -258,18 +266,16 @@ function D3Tree(props){ } function click(d,node) { - console.log(node.data.rollNo,node._children,node.children); - console.log(node); - if (node.children) { - node._children = node.children; - node.children = null; - } else { - node.children = node._children; - node._children = null; - } - console.log("after",node.data.rollNo,node._children,node.children); - update(node); - // console.log("node",node._children,node.children); + setTimeout(()=> { + if (node.children) { + node._children = node.children; + node.children = null; + } else { + node.children = node._children; + node._children = null; + } + update(node); + },100) } function updateChildren(d,node){ @@ -278,25 +284,16 @@ function D3Tree(props){ .then(value=> { if(value.length!==0){ for(var i=0; i temp.rollNo===value[i].rollNo)); if(!hasValue){ - // console.log("yes"); data = data.concat(value); - // setData(data => [...data, value]); break; } } - // setData(data => [...data, value]); - // console.log("data",data); - // node._children = value; root = stratify(data); - // node._children = value; } }) - // .then(console.log("hi",data)) } - // console.log("click",data) } },[]) diff --git a/frontend/family_tree/src/Queries.js b/frontend/family_tree/src/Queries.js index 8fd2a49a..8afde251 100644 --- a/frontend/family_tree/src/Queries.js +++ b/frontend/family_tree/src/Queries.js @@ -40,4 +40,18 @@ export const SEARCH_QUERY = gql ` rollNo, } } +`; + +export const NODE_DETAILS_QUERY = gql ` + query StudentType($rollNo: String!) { + studentNode(roll: $rollNo) { + branch, + year, + picture, + homeTown, + extraCurriculars, + linkedIn, + email, + } + } `; \ No newline at end of file