Add pagination to split large graph visualizations

Author: JohT

graph-visualization/artifactDependenciesGraph/artifactDependenciesGraph.html

@@ -10,6 +10,8 @@
 
     <link rel="stylesheet" href="./../index.css">
     <script src="./../node_modules/neovis.js/dist/neovis.js"></script>
+    <script type="text/javascript" src="./../vis-configuration-presets.js"></script>
+    <script type="text/javascript" src="./../visualization-pagination.js"></script>
     <script type="text/javascript" src="artifactDependenciesGraph.js"></script>
 </head>
 
@@ -19,7 +21,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,59 +1,31 @@
-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",
-        },
-      },
-    },
+function getNeo4jCredentials() {
+  return {
+    serverUrl: "bolt://localhost:7687",
+    serverUser: "neo4j",
+    serverPassword: document.getElementById("neo4j-server-password").value,
+  };
+}
+
+function getConfiguration(containerId = "viz", 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 +
+              ")",
           },
         },
       },
@@ -64,9 +36,12 @@ 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 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)",
   };
+}
 
-  const neoViz = new NeoVis.default(config);
-  neoViz.render();  
+function draw() {
+  const config = getConfiguration("viz", getNeo4jCredentials(), hierarchicalHexagons());
+  paginatedGraphVisualization({containerElementId: "visualizations", neoVizConfiguration: config});
 }

graph-visualization/index.css

@@ -1,5 +1,31 @@
 div {
-    width: 75vw;
+    width: 100vw;
     height: 100vh;
-    /*border: 1px solid lightgray;*/
-}
+}
+
+.indexedVisualization {
+    margin-top: 10px;
+    margin-left: 10px;
+    width: 400vw;
+    height: 400vh;
+    display:inline-block;
+}
+
+.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;
+}