xuemingqiang/mongo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SERVER-56636 add libdeps graphpaths visualization

Browse Source
This commit is contained in:
Daniel Moody
2021-04-20 21:49:15 +00:00
committed by Evergreen Agent
parent bcd1f32d78
commit a07f2690b7
14 changed files with 775 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
buildscripts/libdeps/graph_visualizer_web_stack/src/DrawGraph.js
View File

@@ -55,11 +55,15 @@ const DrawGraph = ({
graphData,
nodes,
loading,
graphPaths,
updateCheckbox,
findNode,
setFindNode,
}) => {
const [activeComponent, setActiveComponent] = React.useState("2D");
const [selectedNodes, setSelectedNodes] = React.useState([]);
const [pathNodes, setPathNodes] = React.useState({});
const [pathEdges, setPathEdges] = React.useState([]);
const forceRef = useRef(null);
React.useEffect(() => {
@@ -78,18 +82,52 @@ const DrawGraph = ({
}, [nodes]);
React.useEffect(() => {
if (forceRef.current != null) {
forceRef.current.d3Force("charge").strength(-1400);
setPathNodes({ fromNode: graphPaths.fromNode, toNode: graphPaths.toNode });
var paths = Array();
for (var path = 0; path < graphPaths.paths.length; path++) {
var pathArr = Array();
for (var i = 0; i < graphPaths.paths[path].length; i++) {
if (i == 0) {
continue;
}
pathArr.push({
source: graphPaths.paths[path][i - 1],
target: graphPaths.paths[path][i],
});
}
paths.push(pathArr);
}
}, [forceRef.current]);
setPathEdges(paths);
}, [graphPaths]);
const paintRing = React.useCallback((node, ctx) => {
// add ring just for highlighted nodes
ctx.beginPath();
ctx.arc(node.x, node.y, 4 * 1.4, 0, 2 * Math.PI, false);
ctx.fillStyle = "green";
ctx.fill();
});
React.useEffect(() => {
if (forceRef.current != null) {
if (activeComponent == '3D'){
forceRef.current.d3Force("charge").strength(-2000);
}
else {
forceRef.current.d3Force("charge").strength(-10000);
}
}
}, [forceRef.current, activeComponent]);
const paintRing = React.useCallback(
(node, ctx) => {
// add ring just for highlighted nodes
ctx.beginPath();
ctx.arc(node.x, node.y, 7 * 1.4, 0, 2 * Math.PI, false);
if (node.id == pathNodes.fromNode) {
ctx.fillStyle = "blue";
} else if (node.id == pathNodes.toNode) {
ctx.fillStyle = "red";
} else {
ctx.fillStyle = "green";
}
ctx.fill();
},
[pathNodes]
);
function colorNodes(node) {
switch (node.type) {
@@ -134,6 +172,7 @@ const DrawGraph = ({
name="3D"
width={size}
dagMode="radialout"
dagLevelDistance={50}
graphData={graphData}
ref={forceRef}
nodeColor={colorNodes}
@@ -141,14 +180,70 @@ const DrawGraph = ({
backgroundColor={theme.palette.secondary.dark}
linkDirectionalArrowLength={6}
linkDirectionalArrowRelPos={1}
linkDirectionalParticles={(d) => {
if (graphPaths.selectedPath >= 0) {
for (
var i = 0;
i < pathEdges[graphPaths.selectedPath].length;
i++
) {
if (
pathEdges[graphPaths.selectedPath][i].source == d.source.id &&
pathEdges[graphPaths.selectedPath][i].target == d.target.id
) {
return 5;
}
}
}
return 0;
}}
linkDirectionalParticleSpeed={(d) => {
return 0.01;
}}
nodeCanvasObjectMode={(node) => {
if (selectedNodes.includes(node.id)) {
return "before";
}
}}
linkColor={(d) => {
if (graphPaths.selectedPath >= 0) {
for (
var i = 0;
i < pathEdges[graphPaths.selectedPath].length;
i++
) {
if (
pathEdges[graphPaths.selectedPath][i].source == d.source.id &&
pathEdges[graphPaths.selectedPath][i].target == d.target.id
) {
return "#12FF19";
}
}
}
return "#FAFAFA";
}}
linkDirectionalParticleWidth={6}
linkWidth={(d) => {
if (graphPaths.selectedPath >= 0) {
for (
var i = 0;
i < pathEdges[graphPaths.selectedPath].length;
i++
) {
if (
pathEdges[graphPaths.selectedPath][i].source == d.source.id &&
pathEdges[graphPaths.selectedPath][i].target == d.target.id
) {
return 2;
}
}
}
return 1;
}}
nodeRelSize={7}
nodeCanvasObject={paintRing}
onNodeClick={(node, event) => {
updateCheckbox(node.id);
updateCheckbox({ node: node.id, value: "flip" });
socket.emit("row_selected", {
data: { node: node.id, name: node.name },
isSelected: !selectedNodes.includes(node.id),
@@ -175,12 +270,70 @@ const DrawGraph = ({
}
}}
onNodeClick={(node, event) => {
updateCheckbox(node.id);
updateCheckbox({ node: node.id, value: "flip" });
socket.emit("row_selected", {
data: { node: node.id, name: node.name },
isSelected: !selectedNodes.includes(node.id),
});
}}
linkColor={(d) => {
if (graphPaths.selectedPath >= 0) {
for (
var i = 0;
i < pathEdges[graphPaths.selectedPath].length;
i++
) {
if (
pathEdges[graphPaths.selectedPath][i].source == d.source.id &&
pathEdges[graphPaths.selectedPath][i].target == d.target.id
) {
return "#12FF19";
}
}
}
return "#FAFAFA";
}}
linkDirectionalParticleWidth={7}
linkWidth={(d) => {
if (graphPaths.selectedPath >= 0) {
for (
var i = 0;
i < pathEdges[graphPaths.selectedPath].length;
i++
) {
if (
pathEdges[graphPaths.selectedPath][i].source == d.source.id &&
pathEdges[graphPaths.selectedPath][i].target == d.target.id
) {
return 5;
}
}
}
return 1;
}}
linkDirectionalParticles={(d) => {
if (graphPaths.selectedPath >= 0) {
for (
var i = 0;
i < pathEdges[graphPaths.selectedPath].length;
i++
) {
if (
pathEdges[graphPaths.selectedPath][i].source == d.source.id &&
pathEdges[graphPaths.selectedPath][i].target == d.target.id
) {
return 5;
}
}
}
return 0;
}}
linkDirectionalParticleSpeed={(d) => {
return 0.01;
}}
linkDirectionalParticleResolution={10}
linkOpacity={0.6}
nodeRelSize={7}
backgroundColor={theme.palette.secondary.dark}
linkDirectionalArrowLength={3.5}
linkDirectionalArrowRelPos={1}
@@ -191,4 +344,6 @@ const DrawGraph = ({
);
};
export default connect(getGraphData, { setFindNode })(DrawGraph);
export default connect(getGraphData, { setFindNode, updateCheckbox })(
DrawGraph
);