Skip to content

Commit 73682fa

Browse files
harshitsaini17harshitsaini17
committed
refactor: update search route and enhance search functionality
1 parent 60f5c19 commit 73682fa

File tree

5 files changed

+243
-159
lines changed

5 files changed

+243
-159
lines changed

‎frontend/src/App.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function App() {
4141
<Navbar error={error}/>
4242
<Routes>
4343
<Route path="/" element={<Home data={data}/>} />
44-
<Route path="/search/:id" element={<Search />} />
44+
<Route path="/search" element={<Search />} />
4545
<Route path="/ImageTree" element={<ImageTree data={data}/>} />
4646
</Routes>
4747
</DataProvider>

‎frontend/src/components/2DTree.jsx

+122-77
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,152 @@
1-
import React, { useState } from 'react';
2-
import Tree from 'react-d3-tree';
3-
import '../assets/Style/home.css'
4-
import { CircularProgressbar } from 'react-circular-progressbar';
5-
import 'react-circular-progressbar/dist/styles.css';
6-
import Profile from './Profile';
1+
import React, { useState, useRef, useEffect } from "react";
2+
import Tree from "react-d3-tree";
3+
import "../assets/Style/home.css";
4+
import { CircularProgressbar } from "react-circular-progressbar";
5+
import "react-circular-progressbar/dist/styles.css";
6+
import Profile from "./Profile";
7+
import { useData } from "../context/DataContext";
8+
import { useNavigate } from "react-router-dom";
79

810
const TwoDTree = ({ data }) => {
9-
const [roll, setroll] = useState()
11+
const [roll, setroll] = useState();
1012
const [showModal, setShowModal] = useState(false);
13+
const [dimensions, setDimensions] = useState({ width: 800, height: 600 });
14+
const treeContainerRef = useRef(null);
1115
const value = 0.5;
16+
const { search } = useData();
17+
const searchNode = useRef();
18+
const navigate = useNavigate();
1219

13-
if (!data) return <div className='loading_conatiner'><CircularProgressbar className='loading' value={value} maxValue={1} text={`${value * 100}%`} /></div>
20+
useEffect(() => {
21+
const setInitialDimensions = () => {
22+
if (treeContainerRef.current) {
23+
const { width, height } =
24+
treeContainerRef.current.getBoundingClientRect();
25+
setDimensions({ width, height });
26+
}
27+
};
1428

15-
const new_data = []
29+
setInitialDimensions();
30+
window.addEventListener("resize", setInitialDimensions);
31+
return () => window.removeEventListener("resize", setInitialDimensions);
32+
}, []);
33+
34+
useEffect(() => {
35+
searchNode.current = document.getElementById(search);
36+
// console.log(searchNode);
37+
if (searchNode.current) {
38+
// Trigger programmatic click
39+
const clickEvent = new MouseEvent("click", {
40+
bubbles: true,
41+
cancelable: true,
42+
view: window,
43+
});
44+
searchNode.current.dispatchEvent(clickEvent);
45+
}
46+
},[search])
47+
48+
if (!data)
49+
return (
50+
<div className="loading_conatiner">
51+
<CircularProgressbar
52+
className="loading"
53+
value={value}
54+
maxValue={1}
55+
text={`${value * 100}%`}
56+
/>
57+
</div>
58+
);
59+
60+
const new_data = [];
1661
const all_parent = {
17-
name: 'All',
18-
children: []
19-
}
20-
data.forEach(item => {
62+
name: "All",
63+
children: [],
64+
};
65+
data.forEach((item) => {
2166
all_parent.children.push(item);
2267
});
23-
new_data.push(all_parent)
68+
new_data.push(all_parent);
69+
70+
const handleNodeMouseOver = (nodeDatum) => {
71+
// console.log(search);
72+
if (nodeDatum.name !== "All") {
73+
setroll(nodeDatum);
74+
setShowModal(true);
75+
}
76+
};
77+
78+
const handleNodeMouseOut = (nodeData) => {
79+
if (nodeData.name !== "All") {
80+
setShowModal(false);
81+
}
82+
};
83+
84+
const renderCustom = ({ nodeDatum, toggleNode }) => {
85+
const str = nodeDatum.name;
86+
const name = str.slice(0, 19) + "";
2487

25-
const renderCustom = ({ nodeDatum, toggleNode, links }) => {
26-
const str = nodeDatum.name
27-
const name = str.slice(0, 19) + ''
2888
return (
2989
<g
90+
onClick={toggleNode}
3091
onMouseOut={() => handleNodeMouseOut(nodeDatum)}
3192
onMouseOver={() => handleNodeMouseOver(nodeDatum)}
93+
id={nodeDatum.rollNo}
3294
>
33-
34-
<circle r={7} className='circlecolor' />
35-
<text
36-
textAnchor="middle"
37-
dy="24"
38-
dx='0'
39-
className='text_'
40-
>{name} </text>
95+
<circle r={7} className="circlecolor" onClick={
96+
() => {
97+
console.log(nodeDatum.rollNo);
98+
navigate(`/search?q=${window.btoa(nodeDatum.rollNo)}`);
99+
}
100+
}/>
101+
<text textAnchor="middle" dy="24" dx="0" className="text_">
102+
{name}
103+
</text>
41104
</g>
105+
);
106+
};
42107

43-
)
44-
}
45108
const getLinkColor = (link) => {
46-
if (link.source.name.includes('root')) {
47-
return 'white';
109+
if (link.source.name.includes("root")) {
110+
return "white";
48111
}
49-
return 'white';
112+
return "white";
50113
};
51114

52115
const getLinkProps = (link) => ({
53116
stroke: getLinkColor(link),
54117
strokeWidth: 10,
55118
});
56119

57-
const handleNodeMouseOver = (nodeDatum, event) => {
58-
if (nodeDatum.name !== 'All') {
59-
setroll(nodeDatum)
60-
setShowModal(true)
61-
62-
}
63-
};
64-
const handleNodeMouseOut = (nodeData, event) => {
65-
if (nodeData.name !== 'All') {
66-
setShowModal(false)
67-
}
68-
};
69-
const dimensions = {
70-
width: 800,
71-
height: 600
72-
};
73120
return (
74121
<>
75-
{showModal && (
76-
<Profile rollNo={roll.rollNo} />
77-
)}
78-
<Tree data={new_data}
79-
scaleExtent={{
80-
min: 0.25,
81-
max: 2
82-
}}
83-
zoom={1.5}
84-
zoomable={true}
85-
linkClassName={"custom-link"}
86-
depthFactor={500}
87-
linkProps={getLinkProps}
88-
// initialDepth={2}
89-
// pathFunc="straight"
90-
nodeSize={{ x: 100, y: 20 }}
91-
translate={{ x: 200, y: 530 }}
92-
// draggable={false}
93-
dimensions={dimensions}
94-
// orientation={"vertical"}
95-
// pathClassFunc={() => 'custom-link'}
96-
renderCustomNodeElement={renderCustom}
97-
transitionDuration={500}
98-
shouldCollapseNeighborNodes={true}
99-
separation={{ siblings: 2, nonSiblings: 2 }}
100-
// renderCustomLinkElement={renderCustomLink}
101-
102-
/>
122+
{showModal && <Profile rollNo={roll.rollNo} />}
123+
<div ref={treeContainerRef} style={{ width: "100%", height: "100vh" }}>
124+
<Tree
125+
data={new_data}
126+
scaleExtent={{ min: 0.25, max: 2 }}
127+
zoom={1.5}
128+
zoomable={true}
129+
linkClassName="custom-link"
130+
depthFactor={500}
131+
linkProps={getLinkProps}
132+
nodeSize={{ x: 100, y: 20 }}
133+
translate={{ x: 200, y: 530 }}
134+
dimensions={dimensions}
135+
renderCustomNodeElement={(rd3tProps) =>
136+
renderCustom({
137+
...rd3tProps,
138+
toggleNode: () => {
139+
rd3tProps.toggleNode();
140+
},
141+
})
142+
}
143+
transitionDuration={500}
144+
shouldCollapseNeighborNodes={true}
145+
separation={{ siblings: 2, nonSiblings: 2 }}
146+
/>
147+
</div>
103148
</>
104-
)
105-
}
149+
);
150+
};
106151

107-
export default TwoDTree
152+
export default TwoDTree;

0 commit comments

Comments
 (0)