Skip to content

Commit 88a6a89

Browse files
JohTJohT
committed
Refine Jupyter Notebook Graph visualization
1 parent c6dcc88 commit 88a6a89

File tree

1 file changed

+90
-97
lines changed

1 file changed

+90
-97
lines changed

‎jupyter/ArtifactDependencies.ipynb‎

Lines changed: 90 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"source": [
2828
"import os\n",
2929
"from neo4j import GraphDatabase\n",
30-
"from IPython.core.display import Javascript\n",
30+
"from IPython.core.display import Javascript, HTML\n",
3131
"import json"
3232
]
3333
},
@@ -80,15 +80,16 @@
8080
" \"visConfig\": {\n",
8181
" \"nodes\": {\n",
8282
" \"shape\": \"hexagon\",\n",
83+
" \"shadow\": False,\n",
8384
" \"font\": {\n",
8485
" \"strokeWidth\": 4,\n",
85-
" \"strokeColor\": \"#D0D0FF\",\n",
86-
" \"size\": 32\n",
86+
" \"strokeColor\": \"#F2F2FF\",\n",
87+
" \"size\": 12\n",
8788
" },\n",
88-
" \"size\": 40,\n",
89+
" \"size\": 22,\n",
8990
" \"borderWidth\": 2,\n",
9091
" \"widthConstraint\": {\n",
91-
" \"maximum\": 120\n",
92+
" \"maximum\": 60\n",
9293
" }\n",
9394
" },\n",
9495
" \"edges\": {\n",
@@ -99,7 +100,7 @@
99100
" }\n",
100101
" },\n",
101102
" \"scaling\": {\n",
102-
" \"max\": 8\n",
103+
" \"max\": 6\n",
103104
" }\n",
104105
" },\n",
105106
" \"physics\": {\n",
@@ -126,12 +127,75 @@
126127
{
127128
"cell_type": "code",
128129
"execution_count": null,
129-
"id": "b446809d",
130+
"id": "5f15d92e",
130131
"metadata": {},
131132
"outputs": [],
132133
"source": [
133-
"# Initialize global Javascript array that contains all visualization configurations\n",
134-
"Javascript(\"\"\"window.graphVisualizationConfiguration=[];\"\"\")"
134+
"cssTemplate = \"\"\"\n",
135+
".graph-visualization {\n",
136+
" width: 660px;\n",
137+
" height: 660px;\n",
138+
" border: 1px solid lightgray;\n",
139+
"}\n",
140+
"div.vis-tooltip {\n",
141+
" font-size: 6px;\n",
142+
"}\n",
143+
"\"\"\"\n",
144+
"\n",
145+
"# Use JavaScript library neovis.js to render the graph into the HTML above\n",
146+
"javascriptTemplate = \"\"\"\n",
147+
"function draw(NeoVis) {\n",
148+
" configuration.labels[NeoVis.NEOVIS_DEFAULT_CONFIG] = {\n",
149+
" [NeoVis.NEOVIS_ADVANCED_CONFIG]: {\n",
150+
" function: {\n",
151+
" title: NeoVis.objectToTitleHtml // Show all node properties in the tooltip\n",
152+
" }\n",
153+
" }\n",
154+
" }\n",
155+
" configuration.relationships[NeoVis.NEOVIS_DEFAULT_CONFIG] = {\n",
156+
" [NeoVis.NEOVIS_ADVANCED_CONFIG]: {\n",
157+
" function: {\n",
158+
" title: NeoVis.objectToTitleHtml // Show all relationship properties in the tooltip\n",
159+
" }\n",
160+
" }\n",
161+
" }\n",
162+
" configuration.labels.Artifact = {\n",
163+
" [NeoVis.NEOVIS_ADVANCED_CONFIG]: {\n",
164+
" function: {\n",
165+
" // Use \"fileName\" as label. Remove leading slash, trailing \".jar\" and version number.\n",
166+
" // TODO Enrich the Graph so that there is a distinct property for the \"cleaned up\" artifact name\n",
167+
" label: (node) => node.properties.fileName.replace('/', '').replace('.jar', '').replace(/-[\\d\\\\.]+/, '')\n",
168+
" }\n",
169+
" }\n",
170+
" }\n",
171+
" console.debug(configuration)\n",
172+
" const neoViz = new NeoVis.default(configuration);\n",
173+
" neoViz.render();\n",
174+
"}\n",
175+
"\n",
176+
"// Use JavaScript library neovis.js to render the graph into the HTML above\n",
177+
"requirejs(['https://unpkg.com/[email protected]'], function(NeoVis){ \n",
178+
" draw(NeoVis);\n",
179+
"}, function (err) {\n",
180+
" throw new Error(\"Failed to load NeoVis:\" + err);\n",
181+
"});\n",
182+
"\"\"\"\n",
183+
"\n",
184+
"htmlTemplate=\"\"\"\n",
185+
"<!DOCTYPE html>\n",
186+
"<html>\n",
187+
"<head>\n",
188+
" <title>Jupyter Notebook embedded neovis.js visualization</title>\n",
189+
" <style type=\"text/css\">{css}</style>\n",
190+
"</head>\n",
191+
"<body>\n",
192+
" <div id=\"{containerId}\" class=\"graph-visualization\"></div>\n",
193+
" <script type=\"text/javascript\" defer>\n",
194+
" {script}\n",
195+
" </script>\n",
196+
"</body>\n",
197+
"</html>\n",
198+
"\"\"\""
135199
]
136200
},
137201
{
@@ -175,6 +239,7 @@
175239
" ,dependent.topologicalSortIndex ASC\n",
176240
" LIMIT 20 \n",
177241
" \"\"\"\n",
242+
" \n",
178243
" return {\n",
179244
" \"initialCypher\": query,\n",
180245
" \"labels\": {\n",
@@ -204,29 +269,13 @@
204269
"# Assemble the neovis.js configuration by joining the different parts of it\n",
205270
"graphVisualizationConfiguration = {**htmlElement, **visualization_configuration(), **serverConfiguration, **java_artifact_query_configuration()}\n",
206271
"\n",
207-
"# Add the configuration in JSON format to a (global) Javascript array\n",
208-
"# print(json.dumps(graphVisualizationConfiguration, indent=3)) # Prints the assembled configuration for debugging\n",
209-
"Javascript(\"\"\"window.graphVisualizationConfiguration.push({});\"\"\".format(json.dumps(graphVisualizationConfiguration)))"
210-
]
211-
},
212-
{
213-
"cell_type": "code",
214-
"execution_count": null,
215-
"id": "55aa9696",
216-
"metadata": {
217-
"scrolled": true
218-
},
219-
"outputs": [],
220-
"source": [
221-
"%%html\n",
222-
"<style type=\"text/css\">\n",
223-
" .graph-visualization {\n",
224-
" width: 660px;\n",
225-
" height: 660px;\n",
226-
" border: 1px solid lightgray;\n",
227-
" }\n",
228-
"</style>\n",
229-
"<div id=\"graph-visualization-java-artifacts\" class=\"graph-visualization\"></div>"
272+
"# Assemble the HTML by including CSS and Javascript\n",
273+
"jsonConfiguration = json.dumps(graphVisualizationConfiguration)\n",
274+
"javascriptContent=\"configuration=\" + jsonConfiguration +\"; \" + javascriptTemplate\n",
275+
"htmlContent = htmlTemplate.format(script=javascriptContent, css=cssTemplate, containerId=htmlElement[\"containerId\"])\n",
276+
"\n",
277+
"# Display the HTML\n",
278+
"display(HTML(htmlContent))"
230279
]
231280
},
232281
{
@@ -242,7 +291,7 @@
242291
{
243292
"cell_type": "code",
244293
"execution_count": null,
245-
"id": "8455926e",
294+
"id": "5c344092",
246295
"metadata": {},
247296
"outputs": [],
248297
"source": [
@@ -264,7 +313,7 @@
264313
" \"label\": \"name\"\n",
265314
" },\n",
266315
" \"labels\": {\n",
267-
" \"Module\": {\n",
316+
" \"File\": {\n",
268317
" \"label\": \"name\"\n",
269318
" }\n",
270319
" },\n",
@@ -280,7 +329,7 @@
280329
{
281330
"cell_type": "code",
282331
"execution_count": null,
283-
"id": "0f705d6a",
332+
"id": "dcc6fe3d",
284333
"metadata": {},
285334
"outputs": [],
286335
"source": [
@@ -290,69 +339,13 @@
290339
"# Assemble the neovis.js configuration by joining the different parts of it\n",
291340
"graphVisualizationConfiguration = {**htmlElement, **visualization_configuration(), **serverConfiguration, **typescript_module_query_configuration()}\n",
292341
"\n",
293-
"# Add the configuration in JSON format to a (global) Javascript array\n",
294-
"# print(json.dumps(graphVisualizationConfiguration, indent=3)) # Prints the assembled configuration for debugging\n",
295-
"Javascript(\"\"\"window.graphVisualizationConfiguration.push({});\"\"\".format(json.dumps(graphVisualizationConfiguration)))"
296-
]
297-
},
298-
{
299-
"cell_type": "code",
300-
"execution_count": null,
301-
"id": "16c95d81",
302-
"metadata": {},
303-
"outputs": [],
304-
"source": [
305-
"%%html\n",
306-
"<style type=\"text/css\">\n",
307-
" .graph-visualization {\n",
308-
" width: 660px;\n",
309-
" height: 660px;\n",
310-
" border: 1px solid lightgray;\n",
311-
" }\n",
312-
"</style>\n",
313-
"<div id=\"graph-visualization-typescript-modules\" class=\"graph-visualization\"></div>"
314-
]
315-
},
316-
{
317-
"cell_type": "markdown",
318-
"id": "39a03a60",
319-
"metadata": {},
320-
"source": [
321-
"## Visualization using neovis.js\n",
322-
"\n",
323-
"Use the JavaScript library [neovis.js](https://github.com/neo4j-contrib/neovis.js) to render the graph into the HTML above with the following javascript block."
324-
]
325-
},
326-
{
327-
"cell_type": "code",
328-
"execution_count": null,
329-
"id": "55a96744",
330-
"metadata": {},
331-
"outputs": [],
332-
"source": [
333-
"%%javascript\n",
342+
"# Assemble the HTML by including CSS and Javascript\n",
343+
"jsonConfiguration = json.dumps(graphVisualizationConfiguration)\n",
344+
"javascriptContent=\"configuration=\" + jsonConfiguration +\"; \" + javascriptTemplate\n",
345+
"htmlContent = htmlTemplate.format(script=javascriptContent, css=cssTemplate, containerId=htmlElement[\"containerId\"])\n",
334346
"\n",
335-
"// Use JavaScript library neovis.js to render the graph into the HTML above\n",
336-
"requirejs(['https://unpkg.com/[email protected]'], function(NeoVis){ \n",
337-
" window.graphVisualizationConfiguration.forEach((configuration) => {\n",
338-
" configuration.labels.Artifact = {\n",
339-
" [NeoVis.NEOVIS_ADVANCED_CONFIG]: {\n",
340-
" function: {\n",
341-
" // Print all properties for the title (when nodes are clicked)\n",
342-
" title: NeoVis.objectToTitleHtml,\n",
343-
" // Use \"fileName\" as label. Remove leading slash, trailing \".jar\" and version number.\n",
344-
" label: (node) => node.properties.fileName.replace('/', '').replace('.jar', '').replace(/-[\\d\\\\.]+/, '')\n",
345-
" },\n",
346-
" }\n",
347-
" }\n",
348-
" \n",
349-
" const viz = new NeoVis.default(configuration);\n",
350-
" viz.render();\n",
351-
" });\n",
352-
" }, function (err) {\n",
353-
" throw new Error(\"Failed to load NeoVis:\" + err);\n",
354-
" }\n",
355-
");"
347+
"# Display the HTML\n",
348+
"display(HTML(htmlContent))"
356349
]
357350
},
358351
{

0 commit comments

Comments
 (0)