Add pagination to split large graph visualizations

Author: JohT

graph-visualization/artifactDependenciesGraph/artifactDependenciesGraph.html

@@ -19,7 +19,7 @@
         <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>
+    <div id="visualizations"></div>
 </body>
 
 </html>

graph-visualization/artifactDependenciesGraph/artifactDependenciesGraph.js

@@ -1,63 +1,77 @@
-function draw() {
-  const config = {
-    containerId: "viz",
-    neo4j: {
-      serverUrl: "bolt://localhost:7687",
-      serverUser: "neo4j",
-      serverPassword: document.getElementById("neo4j-server-password").value || "neo4j",
+function getHierarchicalVisConfiguration() {
+  return {
+    nodes: {
+      shape: "hexagon",
+      shadow: false,
+      font: {
+        strokeWidth: 4,
+        strokeColor: "#F2F2FF",
+        size: 9,
+      },
+      size: 22,
+      widthConstraint: {
+        maximum: 50
+      }
     },
-    visConfig: {
-      nodes: {
-        shape: "hexagon",
-        shadow: false,
-        font: {
-          strokeWidth: 15,
-          strokeColor: "#F2F2FF",
-          size: 11,
+    edges: {
+      arrows: {
+        to: {
+          enabled: true,
+          scaleFactor: 0.5,
         },
-        size: 20,
       },
-      edges: {
-        arrows: {
-          to: { 
-            enabled: true,
-            scaleFactor: 0.6
-          },
-        },
-        scaling: {
-          max: 7,
-        },
+      scaling: {
+        max: 8,
       },
-      physics: {
-        hierarchicalRepulsion: {
-          nodeDistance: 200, // 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
+    },
+    physics: {
+      hierarchicalRepulsion: {
+        nodeDistance: 200, // 100
+        centralGravity: 0.5, // 0.2
+        springLength: 200, // 200
+        springConstant: 0.06, // 0.05
+        damping: 0.09, // 0.09
+        avoidOverlap: 1, // 0
       },
-      layout: {
-        hierarchical: {
-          enabled: true,
-          sortMethod: "directed",
-        },
+      solver: "hierarchicalRepulsion", // barnesHut
+    },
+    layout: {
+      hierarchical: {
+        enabled: true,
+        sortMethod: "directed",
       },
     },
+  };
+}
+
+function getNeo4jCredentials() {
+  return {
+    serverUrl: "bolt://localhost:7687",
+    serverUser: "neo4j",
+    serverPassword: document.getElementById("neo4j-server-password").value || "neo4j",
+  };
+}
+
+function getConfiguration(containerId, credentials, visConfiguration) {
+  return {
+    containerId: containerId,
+    neo4j: credentials,
+    visConfig: visConfiguration,
     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.
+            // Use "fileName" as label. Remove leading slash, trailing ".jar", version number and a trailing word like "Final".
             label: (node) =>
               node.properties.fileName
                 .replace("/", "")
                 .replace(".jar", "")
-                .replace(/-[\d\\.]+/, ""),
+                .replace(/[\d\.\-\_v]+\w+$/gm, "") +
+              "(" +
+              node.properties.maxDistanceFromSource +
+              ")",
           },
         },
       },
@@ -68,9 +82,53 @@ function draw() {
         value: "weight",
       },
     },
-    initialCypher: "MATCH (s:Artifact)-[r:DEPENDS_ON]->(d:Artifact) RETURN s,r,d",
+    initialCypher:
+      //"MATCH (a1:Artifact)-[r1:DEPENDS_ON*0..1]->(a2:Artifact) WHERE a2.topologicalSortIndex >= $startIndex AND a2.topologicalSortIndex < $endIndex RETURN a1,r1,a2 ORDER BY a2.topologicalSortIndex",
+      //"MATCH (a1:Artifact)-[r1:DEPENDS_ON*0..1]->(a2:Artifact) WHERE a2.topologicalSortIndex >= 0 RETURN a1,r1,a2 ORDER BY a2.topologicalSortIndex SKIP toInteger($startIndex) LIMIT toInteger($blockSize)",
+      "MATCH (a1:Artifact)-[r1:DEPENDS_ON*0..1]->(a2:Artifact) WHERE a1.topologicalSortIndex >= 0 AND a2.topologicalSortIndex >= 0 AND a1 <> a2 RETURN a1,r1,a2 ORDER BY a2.topologicalSortIndex, a1.topologicalSortIndex SKIP toInteger($startIndex) LIMIT toInteger($blockSize)",
   };
+}
+
+function markAsFinished(indexedVisualizationContainerElement) {
+  indexedVisualizationContainerElement.classList.add("visualization-finished");
+  const unfinishedVisualizations = document.querySelectorAll(".indexedVisualization:not(.visualization-finished)");
+  if (unfinishedVisualizations.length === 0) {
+    indexedVisualizationContainerElement.parentElement.classList.add("visualization-finished");
+  }
+}
+
+function draw() {
+  const containerElement = document.getElementById("visualizations");
+
+  // Render at most 50 (maxIndex) visualizations. Rendering ends when no query records are left.
+  const maxVisualizations = 100; //FIXME larger values lead to a bug where "visualization-finished" isn't written
+  const recordsPerVisualization = 160;
+
+  for (let index = 0; (index < maxVisualizations); index++) {
+    const indexedVisualizationContainer = document.createElement("div");
+    indexedVisualizationContainer.id = `viz-${index}`;
+    indexedVisualizationContainer.classList.add("indexedVisualization");
+    containerElement.appendChild(indexedVisualizationContainer);
+
+    const config = getConfiguration(indexedVisualizationContainer.id, getNeo4jCredentials(), getHierarchicalVisConfiguration());
+    const neoViz = new NeoVis.default(config);
 
-  const neoViz = new NeoVis.default(config);
-  neoViz.render();  
-}
+    neoViz.registerOnEvent(NeoVis.NeoVisEvents.CompletionEvent, (event) => {
+      if (event.recordCount == 0) {
+        indexedVisualizationContainer.remove(); // remove an empty canvas
+      } else {
+        setTimeout(() => {
+          neoViz.stabilize();
+          markAsFinished(indexedVisualizationContainer);
+        }, 5000);
+      }
+    });
+    neoViz.registerOnEvent(NeoVis.NeoVisEvents.ErrorEvent, (event) => {
+      indexedVisualizationContainer.classList.add("visualization-failed");
+      indexedVisualizationContainer.textContent = event.error.message;
+      markAsFinished(indexedVisualizationContainer);
+    });
+    const parameters = {blockSize: recordsPerVisualization, startIndex: index * recordsPerVisualization, endIndex: (index + 1) * recordsPerVisualization };
+    neoViz.render(undefined, parameters);
+  }
+}

graph-visualization/index.css

@@ -1,4 +1,32 @@
 div {
     width: 100vw;
     height: 100vh;
-}
+}
+
+.indexedVisualization {
+    width: 98vw;
+    height: 100vh;
+    display:inline-block;
+    /* border-width: 2px;
+    border-style: dotted;
+    border-color: orange; */
+}
+
+.indexedVisualization.visualization-finished {
+    border-width: 1px;
+    border-style: solid;
+    border-color: lightgreen;
+}
+
+.indexedVisualization:not(.visualization-finished) {
+    border-width: 2px;
+    border-style: dotted;
+    border-color: orange;
+}
+
+.indexedVisualization.visualization-finished.visualization-failed {
+    height: 6em;
+    border-width: 2px;
+    border-style: solid;
+    border-color: red;
+}

graph-visualization/renderVisualizations.js

@@ -25,7 +25,7 @@ const camelToKebabCase = (str) => str.replace(/[A-Z]/g, (letter) => `-${letter.t
  */
 const takeCanvasScreenshots = async (browser, htmlFilename) => {
   const page = await browser.newPage();
-  await page.setViewport({ width: 8000, height: 12000, isMobile: false, isLandscape: true, hasTouch: false, deviceScaleFactor: 1 });
+  await page.setViewport({ width: 12000, height: 6000, isMobile: false, isLandscape: true, hasTouch: false, deviceScaleFactor: 1 });
 
   console.log(`Loading ${htmlFilename}`);
   await page.goto(`file://${htmlFilename}`);
@@ -36,26 +36,26 @@ const takeCanvasScreenshots = async (browser, htmlFilename) => {
   await loginButton.click();
 
   // Wait for the graph visualization to be rendered onto a HTML5 canvas
-  await page.waitForSelector("div canvas");
+  console.log(`Waiting for visualizations to be finished`)
+  await page.waitForSelector(".visualization-finished", {timeout: 50_000});
 
   // Get all HTML canvas tag elements
-  const canvasElements = await page.$$("div canvas");
+  const canvasElements = await page.$$("canvas");
   if (canvasElements.length <= 0) {
-    console.error(`No elements with CSS selector 'div canvas' found in ${htmlFilename}`);
+    console.error(`No elements with CSS selector 'canvas' found in ${htmlFilename}`);
   }
+  console.log(`Found ${canvasElements.length} visualizations`)
 
   // Take a png screenshot of every canvas element and save them with increasing indices
   const reportName = basename(htmlFilename, ".html");
   const directoryName = camelToKebabCase(reportName);
   if (!existsSync(directoryName)) {
     mkdirSync(directoryName);
   }
-  let index = 1;
   await Promise.all(
-    canvasElements.map(async (canvasElement) => {
-      console.log(`Taking screenshot ${reportName} of canvas ${index} in ${htmlFilename} ...`);
+    Array.from(canvasElements).map(async (canvasElement, index) => {
+      console.log(`Taking screenshot ${reportName} of canvas ${index} in ${htmlFilename} of element...`);
       await canvasElement.screenshot({ path: `./${directoryName}/${reportName}-${index}.png`, omitBackground: true });
-      index++;
     })
   );
 };