Optimize Jupyter artifact dependency visualization

Author: JohT

jupyter/ArtifactDependencies.ipynb

@@ -7,12 +7,15 @@
    "source": [
     "## Artifact Dependencies\n",
     "\n",
+    "This report includes graph visualization(s) using JavaScript and might not be exportable to some document formats.\n",
+    "\n",
     "### References\n",
     "\n",
     "- [neovis.js (GitHub)](https://github.com/neo4j-contrib/neovis.js)\n",
     "- [vis-network (GitHub)](https://github.com/visjs/vis-network)\n",
     "- [vis network documentation](https://visjs.github.io/vis-network/docs/network)\n",
-    "- [Neo4j Graph Algorithms Jupyter Notebooks (GitHub)](https://github.com/neo4j-graph-analytics/graph-algorithms-notebooks)\n"
+    "- [Neo4j Graph Algorithms Jupyter Notebooks (GitHub)](https://github.com/neo4j-graph-analytics/graph-algorithms-notebooks)\n",
+    "- [Neo4j Graph Data Science Topological Sort](https://neo4j.com/docs/graph-data-science/current/algorithms/alpha/topological-sort)\n"
    ]
   },
   {
@@ -72,34 +75,41 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "def visualization_configuration():\n",
+    "def visualization_configuration(node_distance: int = 150):\n",
     "    return {\n",
     "        \"visConfig\": {\n",
     "            \"nodes\": {\n",
     "                \"shape\": \"hexagon\",\n",
     "                \"font\": {\n",
-    "                    \"strokeWidth\": 30,\n",
-    "                    \"strokeColor\": \"#F0F0FF\"\n",
+    "                    \"strokeWidth\": 4,\n",
+    "                    \"strokeColor\": \"#D0D0FF\",\n",
+    "                    \"size\": 32\n",
     "                },\n",
-    "                \"size\": 50,\n",
-    "                \"borderWidth\": 2\n",
+    "                \"size\": 60,\n",
+    "                \"borderWidth\": 2,\n",
+    "                \"widthConstraint\": {\n",
+    "                    \"maximum\": 120\n",
+    "                }\n",
     "            },\n",
     "            \"edges\": {\n",
     "                \"arrows\": {\n",
-    "                    \"to\": { \"enabled\": True }\n",
+    "                    \"to\": { \n",
+    "                        \"enabled\": True,\n",
+    "                        \"scaleFactor\": 0.5\n",
+    "                    }\n",
     "                },\n",
     "                \"scaling\": {\n",
-    "                    \"max\": 15\n",
+    "                    \"max\": 8\n",
     "                }\n",
     "            },\n",
     "            \"physics\": {\n",
     "                \"hierarchicalRepulsion\": {\n",
-    "                    \"nodeDistance\": 300, # 100\n",
-    "                    \"centralGravity\": 0.5, # 0.2\n",
-    "                    \"springLength\": 180, # 200\n",
-    "                    \"springConstant\": 0.06, # 0.05\n",
+    "                    \"nodeDistance\": node_distance, # 120\n",
+    "                    \"centralGravity\": 0.2, # 0.0\n",
+    "                    \"springLength\": 100, # 100\n",
+    "                    \"springConstant\": 0.02, # 0.01\n",
     "                    \"damping\": 0.09, # 0.09\n",
-    "                    \"avoidOverlap\": 0.1 # 0\n",
+    "                    \"avoidOverlap\": 0.9 # 0\n",
     "                },\n",
     "                \"solver\": \"hierarchicalRepulsion\" # barnesHut\n",
     "            },\n",
@@ -120,9 +130,9 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "def graph_query_configuration():\n",
+    "def graph_query_configuration(query: str):\n",
     "    return {\n",
-    "        \"initialCypher\": \"MATCH (s:Artifact)-[r:DEPENDS_ON]->(d:Artifact) RETURN s,r,d\",\n",
+    "        \"initialCypher\": query,\n",
     "        \"labels\": {\n",
     "            \"Artifact\": {\n",
     "                \"label\": \"fileName\"\n",
@@ -137,33 +147,48 @@
     "    }"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "3328314d",
+   "metadata": {},
+   "source": [
+    "## Hierarchical Artifact Dependencies\n",
+    "\n",
+    "The following hierarchical graph shows artifact dependencies with the most used basis/shared artifact at the bottom and the artifact the builds upon the other dependencies on top. The visualization is limited to the first 60 nodes and their direct dependency ordered by the dependency layer (\"maxDistanceFromSource\") descending. \n",
+    "\n",
+    "For the whole list of topologically sorted artifacts including the hierarchical layer go to the report `TopologicalSortedArtifacts.csv`. This is also known as the \"build order\"."
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
    "id": "48cd3f44",
    "metadata": {},
    "outputs": [],
    "source": [
+    "query = \"\"\"\n",
+    " MATCH (artifact:Artifact:Archive)-[dependency:DEPENDS_ON]->(dependent:Artifact:Archive)\n",
+    " WHERE  artifact.maxDistanceFromSource IS NOT NULL\n",
+    "   AND  dependent.maxDistanceFromSource > artifact.maxDistanceFromSource\n",
+    "RETURN artifact, dependency, dependent\n",
+    " ORDER BY artifact.maxDistanceFromSource DESC\n",
+    "         ,artifact.maxDistanceFromSource ASC\n",
+    "         ,artifact.topologicalSortIndex  ASC\n",
+    "         ,dependent.topologicalSortIndex ASC\n",
+    "LIMIT 60        \n",
+    "\"\"\"\n",
+    "\n",
     "htmlElement = {\"containerId\": \"graph-visualization\"}\n",
     "serverConfiguration = neo4j_server_configuration(uri=neo4jUri, user=neo4jUser,password=neo4jPassword)\n",
     "\n",
     "# Assemble the neovis.js configuration by joining the different parts of it\n",
-    "graphVisualizationConfiguration = {**htmlElement, **visualization_configuration(), **serverConfiguration, **graph_query_configuration()}\n",
+    "graphVisualizationConfiguration = {**htmlElement, **visualization_configuration(), **serverConfiguration, **graph_query_configuration(query)}\n",
+    "#graphVisualizationConfiguration = {**htmlElement, **visualization_configuration(node_distance=220), **serverConfiguration, **graph_query_configuration(query)}\n",
     "\n",
     "# Create a javascript variable containing the whole configuration in JSON format\n",
     "Javascript(\"\"\"window.graphVisualizationConfiguration={};\"\"\".format(json.dumps(graphVisualizationConfiguration)))"
    ]
   },
-  {
-   "cell_type": "markdown",
-   "id": "3328314d",
-   "metadata": {},
-   "source": [
-    "## Hierarchical Artifact Dependencies\n",
-    "\n",
-    "The following hierarchical graph shows artifact dependencies with the most used basis/shared artifact at the bottom and the artifact the builds upon all other dependencies on top. "
-   ]
-  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -176,8 +201,8 @@
     "%%html\n",
     "<style type=\"text/css\">\n",
     "    #graph-visualization {\n",
-    "        width: 650px;\n",
-    "        height: 850px;\n",
+    "        width: 660px;\n",
+    "        height: 660px;\n",
     "        border: 1px solid lightgray;\n",
     "    }\n",
     "</style>\n",