Skip to content
This repository was archived by the owner on Jun 12, 2020. It is now read-only.

Commit e9d916f

Browse files
hjarrellhjarrell
committed
Format code
1 parent 96e4489 commit e9d916f

1 file changed

Lines changed: 103 additions & 80 deletions

File tree

‎frontend/src/components/GraphicsGrid.js‎

Lines changed: 103 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
1-
import React, {useRef, useState, useEffect} from 'react';
1+
import React, {
2+
useRef,
3+
useState,
4+
useEffect
5+
} from 'react';
26
import * as d3 from 'd3';
37

4-
import { getLog } from '../util/log';
8+
import {
9+
getLog
10+
} from '../util/log';
511

6-
export default ({search}) => {
12+
export default ({
13+
search
14+
}) => {
715
const graphicsD3 = useRef(null);
816
const [allData, setAllData] = useState([]);
917
const [index, setIndex] = useState(0);
1018
const [data, setData] = useState([]);
1119
const [title, setTitle] = useState("");
20+
const [simulation, setSimulation] = useState(null);
1221

1322
useEffect(() => {
1423
if (search) {
@@ -20,49 +29,46 @@ export default ({search}) => {
2029

2130
useEffect(() => {
2231
const interval = setInterval(() => {
23-
console.log(allData.length)
2432
if (allData.length > 0 && index < allData.length) {
2533
setData(allData[index][1]);
2634
setTitle(allData[index][0]);
2735
setIndex(index + 1)
28-
} else {
29-
setIndex(0);
3036
}
31-
}, 1000);
32-
37+
}, 1500);
38+
3339
return () => {
34-
clearInterval(interval);
40+
clearInterval(interval);
3541
};
36-
}, [allData, index]);
42+
}, [allData, index]);
43+
44+
const drag = simulation => {
45+
46+
function dragstarted(d) {
47+
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
48+
d.fx = d.x;
49+
d.fy = d.y;
50+
}
51+
52+
function dragged(d) {
53+
d.fx = d3.event.x;
54+
d.fy = d3.event.y;
55+
}
56+
57+
function dragended(d) {
58+
if (!d3.event.active) simulation.alphaTarget(0);
59+
d.fx = null;
60+
d.fy = null;
61+
}
62+
63+
return d3.drag()
64+
.on("start", dragstarted)
65+
.on("drag", dragged)
66+
.on("end", dragended);
67+
}
3768

3869
useEffect(() => {
39-
console.log(data)
4070
if (data.length !== 0 && graphicsD3.current) {
41-
const width = 1200, height = 800;
42-
const drag = simulation => {
43-
44-
function dragstarted(d) {
45-
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
46-
d.fx = d.x;
47-
d.fy = d.y;
48-
}
49-
50-
function dragged(d) {
51-
d.fx = d3.event.x;
52-
d.fy = d3.event.y;
53-
}
54-
55-
function dragended(d) {
56-
if (!d3.event.active) simulation.alphaTarget(0);
57-
d.fx = null;
58-
d.fy = null;
59-
}
60-
61-
return d3.drag()
62-
.on("start", dragstarted)
63-
.on("drag", dragged)
64-
.on("end", dragended);
65-
}
71+
const width = 1200, height = 1200;
6672
const svg = d3.select(graphicsD3.current)
6773
.attr("viewBox", [-width / 2, -height / 2, width, height])
6874
.call(d3.zoom().on("zoom", function () {
@@ -72,51 +78,68 @@ export default ({search}) => {
7278
const links = root.links();
7379
const nodes = root.descendants();
7480

75-
const simulation = d3.forceSimulation(nodes)
81+
let sim = simulation;
82+
83+
if (!simulation) {
84+
sim = d3.forceSimulation(nodes)
7685
.force("link", d3.forceLink(links).id(d => d.id).distance(0).strength(0.6))
77-
.force("charge", d3.forceManyBody().strength(-1000))
86+
.force("charge", d3.forceManyBody().strength(-500))
7887
.force("x", d3.forceX())
7988
.force("y", d3.forceY());
89+
setSimulation(sim);
90+
} else {
91+
simulation.nodes(nodes);
92+
simulation.force('link').links(links);
93+
simulation.alpha(1).restart();
94+
}
8095

96+
8197
const link = svg.select(".link")
8298
.attr("stroke", "#999")
8399
.attr("stroke-opacity", 0.6)
84-
.selectAll("line")
85-
.data(links)
86-
.join("line");
100+
.selectAll("line")
101+
.data(links)
102+
.join("line");
87103

88104
const node = svg.select(".node")
89105
.attr("fill", "#fff")
90106
.attr("stroke", "#000")
91107
.attr("stroke-width", 1)
92-
.selectAll("circle")
93-
.data(nodes)
94-
.join("circle")
108+
.selectAll("circle")
109+
.data(nodes)
110+
.join("circle")
95111
.attr("fill", d => {
96-
if (!d.children){
97-
switch(d.data.id.split(".")[d.data.id.split(".").length-1]){
98-
case "js": return("red")
99-
break;
100-
case "css": return("blue")
101-
break;
102-
case "html": return("orange")
103-
break;
104-
case "png": return("yellow")
105-
break;
106-
case "md": return("pink")
107-
break;
108-
case "py": return("purple")
109-
default: return("green")
110-
}
111-
}else{
112-
return("gray")
113-
}
112+
if (!d.children) {
113+
switch (d.data.id.split(".")[d.data.id.split(".").length - 1]) {
114+
case "js":
115+
return ("red")
116+
break;
117+
case "css":
118+
return ("blue")
119+
break;
120+
case "html":
121+
return ("orange")
122+
break;
123+
case "png":
124+
return ("yellow")
125+
break;
126+
case "md":
127+
return ("pink")
128+
break;
129+
case "py":
130+
return ("purple")
131+
default:
132+
return ("green")
133+
}
134+
} else {
135+
return ("gray")
136+
}
114137
})
115138
.attr("stroke", d => d.children ? null : "#fff")
116-
.attr("r", 3.5*3)
117-
.call(drag(simulation));
139+
.attr("r", 3.5 * 3)
140+
.call(drag(sim));
118141

119-
const text = svg.select(".nText")
142+
const text = svg.select(".nText")
120143
.selectAll('text')
121144
.data(nodes)
122145
.join('text')
@@ -129,24 +152,24 @@ export default ({search}) => {
129152
node.append("title")
130153
.text(d => d.data.id);
131154

132-
simulation.on("tick", () => {
133-
link
134-
.attr("x1", d => d.source.x)
135-
.attr("y1", d => d.source.y)
136-
.attr("x2", d => d.target.x)
137-
.attr("y2", d => d.target.y)
138-
text
139-
.attr("x", node => node.x)
140-
.attr("y", node => node.y);
141-
142-
node
143-
.attr("cx", d => d.x)
144-
.attr("cy", d => d.y);
155+
sim.on("tick", () => {
156+
link
157+
.attr("x1", d => d.source.x)
158+
.attr("y1", d => d.source.y)
159+
.attr("x2", d => d.target.x)
160+
.attr("y2", d => d.target.y)
161+
text
162+
.attr("x", node => node.x)
163+
.attr("y", node => node.y);
164+
165+
node
166+
.attr("cx", d => d.x)
167+
.attr("cy", d => d.y);
145168
});
146-
169+
147170
// invalidation.then(() => simulation.stop());
148171
}
149-
}, [search, data, graphicsD3.current]);
172+
}, [search, data, graphicsD3.current, simulation]);
150173

151174
return (
152175
<>

0 commit comments

Comments
 (0)