fixup! Add pagination to split large graph visualizations

Author: JohT

graph-visualization/artifactDependenciesGraph/artifactDependenciesGraph.js

@@ -18,12 +18,12 @@ function getHierarchicalVisConfiguration() {
         },
       },
       scaling: {
-        max: 8,
+        max: 10,
       },
     },
     physics: {
       hierarchicalRepulsion: {
-        nodeDistance: 220, // 100
+        nodeDistance: 200, // 100
         centralGravity: 0.6, // 0.2
         springLength: 200, // 200
         springConstant: 0.06, // 0.05
@@ -81,16 +81,17 @@ 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..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)",
   };
 }
 
 function draw() {
   const containerElement = document.getElementById("visualizations");
 
   // Render at most 50 (maxIndex) visualizations. Rendering ends when no query records are left.
-  const maxVisualizations = 50; //FIXME larger values lead to a bug where "visualization-finished" isn't written
-  const recordsPerVisualization = 70;
+  const maxVisualizations = 110; //FIXME larger values lead to a bug where "visualization-finished" isn't written
+  const recordsPerVisualization = 60;
   let finishedVisualizations = 0;
 
   for (let index = 0; index < maxVisualizations; index++) {
@@ -106,7 +107,7 @@ function draw() {
       //console.log(`Finished ${finishedVisualizations} visualizations`)
       if (finishedVisualizations >= maxVisualizations) {
         // All visualizations were completed.
-        // Wait for 3 seconds until the physics stabilized
+        // Wait for 5 seconds until the physics stabilized
         const containerElementClassList = indexedVisualizationContainer.parentElement.classList;
         setTimeout(() => {
           containerElementClassList.add("visualization-finished");
@@ -117,9 +118,15 @@ function draw() {
       } 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");
+          // }
         }, 5000);
       }
     });
-    neoViz.render(undefined, {blockSize: recordsPerVisualization, startIndex: index * recordsPerVisualization, endIndex: (index + 1) * recordsPerVisualization });
+    const parameters = {blockSize: recordsPerVisualization, startIndex: index * recordsPerVisualization, endIndex: (index + 1) * recordsPerVisualization };
+    neoViz.render(undefined, parameters);
   }
 }

graph-visualization/index.css

@@ -4,10 +4,21 @@ div {
 }
 
 .indexedVisualization {
-    width: 90vw;
+    max-width: 98vw;
     height: 100vh;
     display:inline-block;
-    border-width: 1px;
+    /* border-width: 2px;
+    border-style: dotted;
+    border-color: orange; */
+}
+
+.indexedVisualization.visualization-finished {
     border-style: solid;
-    border-color: green;
+    border-color: lightgreen;
+}
+
+.indexedVisualization:not(.visualization-finished) {
+    border-width: 2px;
+    border-style: dotted;
+    border-color: orange;
 }

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: 10000, height: 6000, isMobile: false, isLandscape: true, hasTouch: false, deviceScaleFactor: 1 });
+  await page.setViewport({ width: 4000, height: 2400, isMobile: false, isLandscape: true, hasTouch: false, deviceScaleFactor: 1 });
 
   console.log(`Loading ${htmlFilename}`);
   await page.goto(`file://${htmlFilename}`);