fixup! Add pagination to split large graph visualizations

Author: JohT

graph-visualization/artifactDependenciesGraph/artifactDependenciesGraph.js

@@ -4,27 +4,30 @@ function getHierarchicalVisConfiguration() {
       shape: "hexagon",
       shadow: false,
       font: {
-        strokeWidth: 13,
+        strokeWidth: 4,
         strokeColor: "#F2F2FF",
-        size: 11,
+        size: 9,
       },
       size: 22,
+      widthConstraint: {
+        maximum: 50
+      }
     },
     edges: {
       arrows: {
         to: {
           enabled: true,
-          scaleFactor: 0.6,
+          scaleFactor: 0.5,
         },
       },
       scaling: {
-        max: 10,
+        max: 8,
       },
     },
     physics: {
       hierarchicalRepulsion: {
         nodeDistance: 200, // 100
-        centralGravity: 0.6, // 0.2
+        centralGravity: 0.5, // 0.2
         springLength: 200, // 200
         springConstant: 0.06, // 0.05
         damping: 0.09, // 0.09
@@ -82,50 +85,45 @@ function getConfiguration(containerId, credentials, visConfiguration) {
     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..2]->(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 draw() {
   const containerElement = document.getElementById("visualizations");
 
   // Render at most 50 (maxIndex) visualizations. Rendering ends when no query records are left.
-  const maxVisualizations = 110; //FIXME larger values lead to a bug where "visualization-finished" isn't written
-  const recordsPerVisualization = 60;
-  let finishedVisualizations = 0;
+  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++) {
+  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);
+
     neoViz.registerOnEvent(NeoVis.NeoVisEvents.CompletionEvent, (event) => {
-      finishedVisualizations++;
-      //console.log(`Finished ${finishedVisualizations} visualizations`)
-      if (finishedVisualizations >= maxVisualizations) {
-        // All visualizations were completed.
-        // Wait for 5 seconds until the physics stabilized
-        const containerElementClassList = indexedVisualizationContainer.parentElement.classList;
-        setTimeout(() => {
-          containerElementClassList.add("visualization-finished");
-        }, 5000);
-      }
       if (event.recordCount == 0) {
         indexedVisualizationContainer.remove(); // remove an empty canvas
       } else {
         setTimeout(() => {
           neoViz.stabilize();
           indexedVisualizationContainer.classList.add("visualization-finished");
-          // const unfinishedVisualizations = document.querySelectorAll(".indexedVisualization:not(.visualization-finished)");
-          // if (unfinishedVisualizations === 0) {
-          //   indexedVisualizationContainer.parentElement.add("visualization-finished");
-          // }
+          
+          const unfinishedVisualizations = document.querySelectorAll(".indexedVisualization:not(.visualization-finished)");
+          if (unfinishedVisualizations.length === 0) {
+            indexedVisualizationContainer.parentElement.classList.add("visualization-finished");
+          }
         }, 5000);
       }
     });
+    neoViz.registerOnEvent(NeoVis.NeoVisEvents.ErrorEvent, (event) => {
+      indexedVisualizationContainer.classList.add("visualization-failed");
+      indexedVisualizationContainer.textContent = event.error.message;
+    });
     const parameters = {blockSize: recordsPerVisualization, startIndex: index * recordsPerVisualization, endIndex: (index + 1) * recordsPerVisualization };
     neoViz.render(undefined, parameters);
   }

graph-visualization/index.css

@@ -4,7 +4,7 @@ div {
 }
 
 .indexedVisualization {
-    max-width: 98vw;
+    width: 98vw;
     height: 100vh;
     display:inline-block;
     /* border-width: 2px;
@@ -13,12 +13,20 @@ div {
 }
 
 .indexedVisualization.visualization-finished {
+    border-width: 1px;
     border-style: solid;
     border-color: lightgreen;
 }
 
-.indexedVisualization:not(.visualization-finished) {
+.indexedVisualization:not(.visualization-finished):not(.visualization-failed) {
     border-width: 2px;
     border-style: dotted;
     border-color: orange;
-}
+}
+
+.indexedVisualization.visualization-failed {
+    height: 4em;
+    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: 4000, height: 2400, 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}`);