Skip to content

Commit 4014467

Browse files
JohTJohT
committed
Render graph visualization as PNG files
1 parent 3e667b9 commit 4014467

File tree

11 files changed

+1988
-1
lines changed

11 files changed

+1988
-1
lines changed

‎.github/workflows/code-structure-analysis.yml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ jobs:
4545
java: 17
4646
python: 3.11
4747
mambaforge: 23.1.0-3
48+
node: 18
4849

4950
env:
5051
CI_COMMIT_MESSAGE: Automated code structure analysis reports (CI)
@@ -63,6 +64,15 @@ jobs:
6364
distribution: 'adopt'
6465
java-version: ${{ matrix.java }}
6566

67+
- name: Setup node.js ${{ matrix.node }} for Graph Visualization
68+
uses: actions/setup-node@v3
69+
with:
70+
node-version: ${{ matrix.node }}
71+
72+
- name: Install nodes packages for Graph Visualization
73+
working-directory: graph-visualization
74+
run: npm ci
75+
6676
- name: Setup Cache for Conda package manager Mambaforge
6777
uses: actions/cache@v3
6878
env:

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Contained within this repository is a comprehensive and automated code graph ana
1010

1111
- Analyze static code structure as a graph
1212
- Fully automated [pipeline](./.github/workflows/code-structure-analysis.yml) from tool installation to report generation
13-
- Comprehensive reports including dependencies, metrics and graph structure
13+
- Comprehensive reports including dependencies, metrics and graph structure visualization
1414
- Automated reference document generation
1515
- Runtime and library independent automation using [shell scripts](./scripts/SCRIPTS.md)
1616
- Comprehensive list of [Cypher queries](./cypher/CYPHER.md)
@@ -69,6 +69,7 @@ The [Code Structure Analysis Pipeline](./.github/workflows/code-structure-analys
6969
- [monotonic](https://github.com/atdt/monotonic)
7070
- [py2neo](https://py2neo.org)
7171
- [wordcloud](https://github.com/amueller/word_cloud)
72+
- [Graph Visualization](./graph-visualization/README.md) uses [node.js](https://nodejs.org/de) and the dependencies listed in [package.json](./graph-visualization/package.json).
7273

7374
**Big shout-out** 📣 to all the creators and contributors of these great libraries 👍. Projects like this wouldn't be possible without them. Feel free to [create an issue](https://github.com/JohT/code-graph-analysis-pipeline/issues/new/choose) if i've forgotten something in the list.
7475

‎graph-visualization/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Render Graph Visualizations
2+
3+
This [node.js](https://nodejs.org/de) project provides the script [renderVisualizations.js](./renderVisualizations.js) to save all graph visualizations as image files.
4+
[renderVisualizations.js](./renderVisualizations.js) uses these three steps:
5+
6+
- opens every HTML file with [Puppeteer](https://pptr.dev) in a headless browser
7+
- takes screenshots of all contained [HTML5 Canvas elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas?retiredLocale=de)
8+
- saves them as [PNG](https://en.wikipedia.org/wiki/PNG) files in the current directory
9+
10+
## Example
11+
12+
If the current working directory is e.g. `temp/projectname/reports/graph-visualizations` within this repository,
13+
then the command would look like this:
14+
15+
```shell
16+
node ./../../../../graph-visualization/renderVisualizations
17+
```

‎graph-visualization/artifactDependenciesGraph/artifactDependenciesGraph.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<title>Graph Visualization with neovis.js</title>
10+
11+
<link rel="stylesheet" href="./../index.css">
12+
<script src="./../node_modules/neovis.js/dist/neovis.js"></script>
13+
<script type="text/javascript" src="artifactDependenciesGraph.js"></script>
14+
</head>
15+
16+
<body">
17+
<span>
18+
<label for="neo4j-server-password">Neo4j Server Password:</label>
19+
<input type="password" id="neo4j-server-password" name="neo4j-server-password" />
20+
<input type="submit" id="neo4j-server-login" value="Login" onClick="draw()" />
21+
</span>
22+
<div id="viz"></div>
23+
</body>
24+
25+
</html>

‎graph-visualization/artifactDependenciesGraph/artifactDependenciesGraph.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
function draw() {
2+
const config = {
3+
containerId: "viz",
4+
neo4j: {
5+
serverUrl: "bolt://localhost:7687",
6+
serverUser: "neo4j",
7+
serverPassword: document.getElementById("neo4j-server-password").value || "neo4jinitial",
8+
},
9+
visConfig: {
10+
nodes: {
11+
shape: "hexagon",
12+
shadow: false,
13+
font: {
14+
strokeWidth: 40,
15+
strokeColor: "#F2F2FF",
16+
},
17+
size: 60,
18+
},
19+
edges: {
20+
arrows: {
21+
to: { enabled: true },
22+
},
23+
scaling: {
24+
max: 15,
25+
},
26+
},
27+
physics: {
28+
hierarchicalRepulsion: {
29+
nodeDistance: 300, // 100
30+
centralGravity: 0.5, // 0.2
31+
springLength: 180, // 200
32+
springConstant: 0.06, // 0.05
33+
damping: 0.09, // 0.09
34+
avoidOverlap: 0.1, // 0
35+
},
36+
solver: "hierarchicalRepulsion", // barnesHut
37+
},
38+
layout: {
39+
hierarchical: {
40+
enabled: true,
41+
sortMethod: "directed",
42+
},
43+
},
44+
},
45+
labels: {
46+
Artifact: {
47+
[NeoVis.NEOVIS_ADVANCED_CONFIG]: {
48+
function: {
49+
// Print all properties for the title (when nodes are clicked)
50+
title: NeoVis.objectToTitleHtml,
51+
// Use "fileName" as label. Remove leading slash, trailing ".jar" and version number.
52+
label: (node) =>
53+
node.properties.fileName
54+
.replace("/", "")
55+
.replace(".jar", "")
56+
.replace(/-[\d\\.]+/, ""),
57+
},
58+
},
59+
},
60+
},
61+
relationships: {
62+
DEPENDS_ON: {
63+
label: false,
64+
value: "weight",
65+
},
66+
},
67+
initialCypher: "MATCH (s:Artifact)-[r:DEPENDS_ON]->(d:Artifact) RETURN s,r,d",
68+
};
69+
70+
const neoViz = new NeoVis.default(config);
71+
neoViz.render();
72+
}

‎graph-visualization/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
div {
2+
width: 75vw;
3+
height: 100vh;
4+
/*border: 1px solid lightgray;*/
5+
}

0 commit comments

Comments
 (0)