Support graph visualizations on Windows

Author: JohT

README.md

@@ -46,12 +46,19 @@ Here are some reports that utilize Neo4j's [Graph Data Science Library](https://
   ```
   To run Jupyter notebooks, create an `.env` file in the folder from where you open the notebook containing for example: `NEO4J_INITIAL_PASSWORD=neo4j_password_of_my_choice`
 
-### Further Prerequisites for Python Jupyter Notebooks
+### Further Prerequisites for Python and Jupyter Notebooks
 
 - Python is required for Jupyter Notebook reports.
 - A conda package manager like [Miniconda](https://docs.conda.io/projects/miniconda/en/latest) or [Anaconda](https://www.anaconda.com/download)(Recommended for Windows) is required for Jupyter Notebook reports.
 - Chromium will automatically be downloaded if needed for Jupyter Notebook PDF reports generation.
 
+### Further Prerequisites for Graph Visualization
+
+These tools are needed to run the graph visualization scripts of directory [graph-visualization](./graph-visualization):
+
+- [Node.js](https://nodejs.org/en)
+- [npm](https://www.npmjs.com)
+
 ### Hints for Windows
 
 - Add this line to your `~/.bashrc` file if you are using Anaconda3: `/c/ProgramData/Anaconda3/etc/profile.d/conda.sh`. Try to find a similar script for other conda package managers or versions.

graph-visualization/renderVisualizations.js

@@ -9,6 +9,7 @@ import jimp from "jimp";
 const indexOfScriptFilePathArgument = 1;
 const __filename = process.argv[indexOfScriptFilePathArgument];
 const __dirname = dirname(__filename);
+console.log(`renderVisualizations.js: dirname=${__dirname}`);
 
 /**
  * Crops the image in the buffer so that there is no empty frame around it.
@@ -88,14 +89,17 @@ let browser;
  * and takes a screenshot of the canvas elements using {@link takeCanvasScreenshots}.
  */
 (async () => {
+  console.log('renderVisualizations.js: Starting headless browser...');
   browser = await puppeteer.launch({ headless: "new" }); // { headless: false } for testing
 
   // Get all *.html files in this (script) directory and its subdirectories
-  const htmlFiles = globSync(`${__dirname}/**/*.html`, { ignore: `${__dirname}/node_modules/**` });
+  // The separate filter is needed to ignore the "node_modules" directory. 
+  // Glob's build-in filter doesn't seem to work on Windows.
+  const htmlFiles = globSync(`${__dirname}/**/*.html`, { absolute: true }).filter(file => !file.includes('node_modules'));
   for (const htmlFile of htmlFiles) {
     await takeCanvasScreenshots(browser, htmlFile);
   }
-  console.log(`Successfully rendered ${htmlFiles.length} html file(s)`);
+  console.log(`renderVisualizations.js: Successfully rendered ${htmlFiles.length} html file(s)`);
 })()
   .catch((err) => console.error(err))
   .finally(() => browser?.close());

scripts/reports/GraphVisualization.sh

@@ -24,7 +24,13 @@ echo "GraphVisualization: SCRIPTS_DIR=${SCRIPTS_DIR}"
 
 # Get the "graph-visualization" directory by taking the path of this script and going two directory up and then to "visualization".
 GRAPH_VISUALIZATION_DIRECTORY=${GRAPH_VISUALIZATION_DIRECTORY:-"${SCRIPTS_DIR}/../graph-visualization"} # Repository directory containing the Jupyter Notebooks
-echo "GraphVisualization: GRAPH_VISUALIZATION_DIRECTORY=$GRAPH_VISUALIZATION_DIRECTORY"
+echo "GraphVisualization: GRAPH_VISUALIZATION_DIRECTORY=${GRAPH_VISUALIZATION_DIRECTORY}"
+
+# Execute "npm ci" to get all required node modules from npm package manager
+if [ ! -d "${GRAPH_VISUALIZATION_DIRECTORY}/node_modules" ] ; then
+    echo "GraphVisualization: Resolving node_modules..."
+    (cd "${GRAPH_VISUALIZATION_DIRECTORY}" && exec npm ci)
+fi
 
 # Execute the node.js script to render the graph visualizations as image files
-(cd "${REPORTS_DIRECTORY}" && exec node ${GRAPH_VISUALIZATION_DIRECTORY}/renderVisualizations.js)
+(cd "${REPORTS_DIRECTORY}" && exec node "${GRAPH_VISUALIZATION_DIRECTORY}/renderVisualizations.js")