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

SERVER-53532 Add edge list to lipdeps visualizer

Browse Source
This commit is contained in:
Mitch Wagner
2022-08-03 16:32:04 +00:00
committed by Evergreen Agent
parent c9bbd1cfae
commit 557741f2a9
16 changed files with 824 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,8 @@ import ForceGraph3D from "react-force-graph-3d";
import SwitchComponents from "./SwitchComponent";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import theme from "./theme";
import { getGraphData } from "./redux/store";
@@ -13,6 +15,9 @@ import { updateCheckbox } from "./redux/nodes";
import { setFindNode } from "./redux/findNode";
import { setGraphData } from "./redux/graphData";
import { setNodeInfos } from "./redux/nodeInfo";
import { setLinks } from "./redux/links";
import { setLinksTrans } from "./redux/linksTrans";
import { setShowTransitive } from "./redux/showTransitive";
import LoadingBar from "./LoadingBar";
const handleFindNode = (node_value, graphData, activeComponent, forceRef) => {
@@ -55,6 +60,7 @@ const DrawGraph = ({
size,
graphData,
nodes,
links,
loading,
graphPaths,
updateCheckbox,
@@ -62,18 +68,29 @@ const DrawGraph = ({
setFindNode,
setGraphData,
setNodeInfos,
selectedGraph
selectedGraph,
setLinks,
setLinksTrans,
setShowTransitive,
showTransitive
}) => {
const [activeComponent, setActiveComponent] = React.useState("2D");
const [pathNodes, setPathNodes] = React.useState({});
const [pathEdges, setPathEdges] = React.useState([]);
const forceRef = useRef(null);
const PARTICLE_SIZE = 5;
React.useEffect(() => {
handleFindNode(findNode, graphData, activeComponent, forceRef);
setFindNode("");
}, [findNode, graphData, activeComponent, forceRef]);
React.useEffect(() => {
newGraphData();
}, [showTransitive]);
const selectedEdge = links.filter(link => link.selected == true)[0];
const selectedNodes = nodes.filter(node => node.selected == true).map(node => node.node);
React.useEffect(() => {
@@ -109,31 +126,36 @@ const DrawGraph = ({
function newGraphData() {
let gitHash = selectedGraph;
let postData = {
"selected_nodes": nodes.filter(node => node.selected == true).map(node => node.node)
};
fetch('/api/graphs/' + gitHash + '/d3', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(postData)
})
.then(response => response.json())
.then(data => {
setGraphData(data.graphData);
});
fetch('/api/graphs/' + gitHash + '/nodes/details', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(postData)
})
.then(response => response.json())
.then(data => {
setNodeInfos(data.nodeInfos);
});
if (gitHash) {
let postData = {
"selected_nodes": nodes.filter(node => node.selected == true).map(node => node.node),
"transitive_edges": showTransitive
};
fetch('/api/graphs/' + gitHash + '/d3', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(postData)
})
.then(response => response.json())
.then(data => {
setGraphData(data.graphData);
setLinks(data.graphData.links);
setLinksTrans(data.graphData.links_trans);
});
fetch('/api/graphs/' + gitHash + '/nodes/details', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(postData)
})
.then(response => response.json())
.then(data => {
setNodeInfos(data.nodeInfos);
});
}
}
const paintRing = React.useCallback(
@@ -166,6 +188,20 @@ const DrawGraph = ({
}
}
function isSameEdge(edgeA, edgeB) {
if (edgeA.source.id && edgeA.target.id) {
if (edgeB.source.id && edgeB.target.id) {
return (edgeA.source.id == edgeB.source.id &&
edgeA.target.id == edgeB.target.id);
}
}
if (edgeA.source == edgeB.source &&
edgeA.target == edgeB.target) {
return true;
}
return false;
}
return (
<LoadingBar loading={loading} height={"100%"}>
<Button
@@ -191,6 +227,15 @@ const DrawGraph = ({
);
}}
/>
<FormControlLabel
style={{ marginInline: 5 }}
control={<Checkbox
style={{ marginInline: 10 }}
checked={ showTransitive }
onClick={ () => setShowTransitive(!showTransitive) }
/>}
label="Show Viewable Transitive Edges"
/>
<SwitchComponents active={activeComponent}>
<ForceGraph2D
name="3D"
@@ -215,10 +260,15 @@ const DrawGraph = ({
pathEdges[graphPaths.selectedPath][i].source == d.source.id &&
pathEdges[graphPaths.selectedPath][i].target == d.target.id
) {
return 5;
return PARTICLE_SIZE;
}
}
}
if (selectedEdge) {
if (isSameEdge(selectedEdge, d)) {
return PARTICLE_SIZE;
}
}
return 0;
}}
linkDirectionalParticleSpeed={(d) => {
@@ -229,7 +279,18 @@ const DrawGraph = ({
return "before";
}
}}
linkLineDash={(d) => {
if (d.data.direct) {
return [];
}
return [5, 3];
}}
linkColor={(d) => {
if (selectedEdge) {
if (isSameEdge(selectedEdge, d)) {
return "#ED7811";
}
}
if (graphPaths.selectedPath >= 0) {
for (
var i = 0;
@@ -248,6 +309,11 @@ const DrawGraph = ({
}}
linkDirectionalParticleWidth={6}
linkWidth={(d) => {
if (selectedEdge) {
if (isSameEdge(selectedEdge, d)) {
return 2;
}
}
if (graphPaths.selectedPath >= 0) {
for (
var i = 0;
@@ -264,6 +330,29 @@ const DrawGraph = ({
}
return 1;
}}
onLinkClick={(link, event) => {
if (selectedEdge) {
if (isSameEdge(selectedEdge, link)) {
setLinks(
links.map((temp_link) => {
temp_link.selected = false;
return temp_link;
})
);
return;
}
}
setLinks(
links.map((temp_link, index) => {
if (index == link.index) {
temp_link.selected = true;
} else {
temp_link.selected = false;
}
return temp_link;
})
);
}}
nodeRelSize={7}
nodeCanvasObject={paintRing}
onNodeClick={(node, event) => {
@@ -309,7 +398,15 @@ const DrawGraph = ({
}
}
}
return "#FAFAFA";
if (selectedEdge) {
if (isSameEdge(selectedEdge, d)) {
return "#ED7811";
}
}
if (d.data.direct == false) {
return "#303030";
}
return "#FFFFFF";
}}
linkDirectionalParticleWidth={7}
linkWidth={(d) => {
@@ -323,10 +420,15 @@ const DrawGraph = ({
pathEdges[graphPaths.selectedPath][i].source == d.source.id &&
pathEdges[graphPaths.selectedPath][i].target == d.target.id
) {
return 5;
return 3;
}
}
}
if (selectedEdge) {
if (isSameEdge(selectedEdge, d)) {
return 3;
}
}
return 1;
}}
linkDirectionalParticles={(d) => {
@@ -340,10 +442,15 @@ const DrawGraph = ({
pathEdges[graphPaths.selectedPath][i].source == d.source.id &&
pathEdges[graphPaths.selectedPath][i].target == d.target.id
) {
return 5;
return PARTICLE_SIZE;
}
}
}
if (selectedEdge) {
if (isSameEdge(selectedEdge, d)) {
return PARTICLE_SIZE;
}
}
return 0;
}}
linkDirectionalParticleSpeed={(d) => {
@@ -351,6 +458,29 @@ const DrawGraph = ({
}}
linkDirectionalParticleResolution={10}
linkOpacity={0.6}
onLinkClick={(link, event) => {
if (selectedEdge) {
if (isSameEdge(selectedEdge, link)) {
setLinks(
links.map((temp_link) => {
temp_link.selected = false;
return temp_link;
})
);
return;
}
}
setLinks(
links.map((temp_link, index) => {
if (index == link.index) {
temp_link.selected = true;
} else {
temp_link.selected = false;
}
return temp_link;
})
);
}}
nodeRelSize={7}
backgroundColor={theme.palette.secondary.dark}
linkDirectionalArrowLength={3.5}
@@ -362,6 +492,6 @@ const DrawGraph = ({
);
};
export default connect(getGraphData, { setFindNode, updateCheckbox, setGraphData, setNodeInfos })(
export default connect(getGraphData, { setFindNode, updateCheckbox, setGraphData, setNodeInfos, setLinks, setLinksTrans, setShowTransitive })(
DrawGraph
);