Merge pull request #26 from JohT/feature/javascript-visualization

Render visualization as png using puppeteer

Author: JohT

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

@@ -45,6 +45,7 @@ jobs:
           java: 17
           python: 3.11
           mambaforge: 23.1.0-3
+          node: 18
 
     env: 
       CI_COMMIT_MESSAGE: Automated code structure analysis reports (CI)
@@ -63,6 +64,15 @@ jobs:
         distribution: 'adopt'
         java-version: ${{ matrix.java }}
 
+    - name: Setup node.js ${{ matrix.node }} for Graph Visualization
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node }}
+
+    - name: Install nodes packages for Graph Visualization
+      working-directory: graph-visualization
+      run: npm ci
+
     - name: Setup Cache for Conda package manager Mambaforge
       uses: actions/cache@v3
       env:

COMMANDS.md

@@ -140,6 +140,17 @@ which is included in the pipeline [code-structure-analysis.yml](.github/workflow
 ./../scripts/documentation/generateJupyterReportReference.sh
 ```
 
+### Generate Image Reference
+
+Change into the [results](./results/) directory e.g. with `cd results` and then execute the script [generateImageReference.sh](./scripts/documentation/generateImageReference.sh) with the following command:
+
+👉**Note:** This script is automatically triggered at the end of [copyReportsIntoResults.sh](./scripts/copyReportsIntoResults.sh)
+which is included in the pipeline [code-structure-analysis.yml](.github/workflows/code-structure-analysis.yml) and doesn't need to be executed manually normally.
+
+```script
+./../scripts/documentation/generateImageReference.sh
+```
+
 ### Generate Environment Variable Reference
 
 Change into the [scripts](./scripts/) directory e.g. with `cd scripts` and then execute the script [generateEnvironmentVariableReference.sh](./scripts/documentation/generateEnvironmentVariableReference.sh) with the following command:

README.md

@@ -10,7 +10,7 @@ Contained within this repository is a comprehensive and automated code graph ana
 
 - Analyze static code structure as a graph
 - Fully automated [pipeline](./.github/workflows/code-structure-analysis.yml) from tool installation to report generation
-- Comprehensive reports including dependencies, metrics and graph structure
+- Comprehensive reports including dependencies, metrics and graph structure visualization
 - Automated reference document generation
 - Runtime and library independent automation using [shell scripts](./scripts/SCRIPTS.md)
 - Comprehensive list of [Cypher queries](./cypher/CYPHER.md)
@@ -69,6 +69,7 @@ The [Code Structure Analysis Pipeline](./.github/workflows/code-structure-analys
   - [monotonic](https://github.com/atdt/monotonic)
   - [py2neo](https://py2neo.org)
   - [wordcloud](https://github.com/amueller/word_cloud)
+- [Graph Visualization](./graph-visualization/README.md) uses [node.js](https://nodejs.org/de) and the dependencies listed in [package.json](./graph-visualization/package.json).
 
 **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. 
 
@@ -84,6 +85,10 @@ The [Code Structure Analysis Pipeline](./.github/workflows/code-structure-analys
 
 [JUPYTER_REPORTS.md](./results/JUPYTER_REPORTS.md) lists all Jupyter Notebook reports inside the [results](./results) directory. It can be generated as described in [Generate Jupyter Notebook Report Reference](./COMMANDS.md#generate-jupyter-notebook-report-reference).
 
+## 📈 Image Reference
+
+[IMAGES.md](./results/IMAGES.md) lists all PNG images inside the [results](./results) directory. It can be generated as described in [Generate Image Reference](./COMMANDS.md#generate-image-reference).
+
 ## ⚙️ Script Reference
 
 [SCRIPTS.md](./scripts/SCRIPTS.md) lists all shell scripts of this repository including their first comment line as a description. It can be generated as described in [Generate Script Reference](./COMMANDS.md#generate-script-reference).

graph-visualization/README.md

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

graph-visualization/artifactDependenciesGraph/artifactDependenciesGraph.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Graph Visualization with neovis.js</title>
+
+    <link rel="stylesheet" href="./../index.css">
+    <script src="./../node_modules/neovis.js/dist/neovis.js"></script>
+    <script type="text/javascript" src="artifactDependenciesGraph.js"></script>
+</head>
+
+<body">
+    <span>
+        <label for="neo4j-server-password">Neo4j Server Password:</label>
+        <input type="password" id="neo4j-server-password" name="neo4j-server-password" />
+        <input type="submit" id="neo4j-server-login" value="Login" onClick="draw()" />
+    </span>
+    <div id="viz"></div>
+</body>
+
+</html>

graph-visualization/artifactDependenciesGraph/artifactDependenciesGraph.js

@@ -0,0 +1,72 @@
+function draw() {
+  const config = {
+    containerId: "viz",
+    neo4j: {
+      serverUrl: "bolt://localhost:7687",
+      serverUser: "neo4j",
+      serverPassword: document.getElementById("neo4j-server-password").value || "neo4jinitial",
+    },
+    visConfig: {
+      nodes: {
+        shape: "hexagon",
+        shadow: false,
+        font: {
+          strokeWidth: 40,
+          strokeColor: "#F2F2FF",
+        },
+        size: 60,
+      },
+      edges: {
+        arrows: {
+          to: { enabled: true },
+        },
+        scaling: {
+          max: 15,
+        },
+      },
+      physics: {
+        hierarchicalRepulsion: {
+          nodeDistance: 300, // 100
+          centralGravity: 0.5, // 0.2
+          springLength: 180, // 200
+          springConstant: 0.06, // 0.05
+          damping: 0.09, // 0.09
+          avoidOverlap: 0.1, // 0
+        },
+        solver: "hierarchicalRepulsion", // barnesHut
+      },
+      layout: {
+        hierarchical: {
+          enabled: true,
+          sortMethod: "directed",
+        },
+      },
+    },
+    labels: {
+      Artifact: {
+        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
+          function: {
+            // Print all properties for the title (when nodes are clicked)
+            title: NeoVis.objectToTitleHtml,
+            // Use "fileName" as label. Remove leading slash, trailing ".jar" and version number.
+            label: (node) =>
+              node.properties.fileName
+                .replace("/", "")
+                .replace(".jar", "")
+                .replace(/-[\d\\.]+/, ""),
+          },
+        },
+      },
+    },
+    relationships: {
+      DEPENDS_ON: {
+        label: false,
+        value: "weight",
+      },
+    },
+    initialCypher: "MATCH (s:Artifact)-[r:DEPENDS_ON]->(d:Artifact) RETURN s,r,d",
+  };
+
+  const neoViz = new NeoVis.default(config);
+  neoViz.render();  
+}

graph-visualization/index.css

@@ -0,0 +1,5 @@
+div {
+    width: 75vw;
+    height: 100vh;
+    /*border: 1px solid lightgray;*/
+}