Docs: rework tutorials and add widget screenshots

MANIFEST.in

@@ -1 +1 @@
-include examples/example_graph.svg
+include examples/example_graph.png

README.md

@@ -16,7 +16,7 @@ Alternatively, you can export the output to a file and view it in a web browser.
 
 The package wraps the [Neo4j Visualization JavaScript library (NVL)](https://neo4j.com/docs/nvl/current/).
 
-![Example Graph](examples/example_graph.svg)
+![Example Graph](examples/example_graph.png)
 
 ## Some notable features
 

docs/antora/modules/ROOT/pages/getting-started.adoc

@@ -48,15 +48,15 @@ VG.render(initial_zoom=2)
 
 [TIP]
 ====
-See the link:{tutorials-docs-uri}/getting-started/[Jupyter notebook] to interact with the graph.
+See the link:{tutorials-docs-uri}/getting-started/[Getting started tutorial] to interact with the graph.
 ====
 
-image::getting-started-graph.svg["Graph"]
+image::getting-started-widget.png["The graph rendered as an interactive widget"]
 
 As we can see in the graph above, the radius of one of the nodes is larger than the others.
 This is because we set the “size” field of the node to 20, while the others are set to 10.
 
-At this time all nodes have the same color.
+At this time the nodes are colored using the default colors.
 If we want to distinguish between the different types of nodes, we can color them differently with the `color_nodes` method. 
 We can pass the field we want to use to color the nodes as an argument.
 In this case, we will use the "caption" field.
@@ -72,10 +72,10 @@ VG.render(initial_zoom=2)
 
 [TIP]
 ====
-See the link:{tutorials-docs-uri}/getting-started/[Jupyter notebook] to interact with the graph.
+See the link:{tutorials-docs-uri}/getting-started/[Getting started tutorial] to interact with the graph.
 ====
 
-image::getting-started-graph-colored.svg["Graph with colors"]
+image::getting-started-widget-colored.png["The graph with nodes colored by caption"]
 
 We are now easily able to distinguish between the different types of nodes in the graph.
 

docs/antora/modules/ROOT/pages/installation.adoc

@@ -18,7 +18,7 @@ Each integration page includes installation instructions for the needed dependen
 
 === Notebook tutorials
 
-You need to install some additional dependencies to run the link:{tutorials-docs-uri}[Jupyter notebook tutorials]:
+You need to install some additional dependencies to run the link:{tutorials-docs-uri}[tutorials]:
 
 [source, console]
 ----

docs/source/tutorials/gds-example.nblink

@@ -1,3 +1,6 @@
 {
-  "path": "../../../examples/gds-example.ipynb"
+  "path": "../../../examples/gds-example.ipynb",
+  "extra-media": [
+    "../../../examples/gds-example-graph.png"
+  ]
 }

docs/source/tutorials/getting-started.nblink

@@ -1,3 +1,7 @@
 {
-  "path": "../../../examples/getting-started.ipynb"
+  "path": "../../../examples/getting-started.ipynb",
+  "extra-media": [
+    "../../../examples/getting-started-widget.png",
+    "../../../examples/getting-started-widget-colored.png"
+  ]
 }

docs/source/tutorials/index.rst

@@ -3,10 +3,10 @@
    You can adapt this file completely to your liking, but it should at least
    contain the root `toctree` directive.
 
-Jupyter notebooks
+Tutorials
 =====================================================
 
-This chapter contains Jupyter notebook tutorials for the `neo4j-viz` package.
+This chapter contains tutorials for the `neo4j-viz` package.
 
 
 .. toctree::

docs/source/tutorials/neo4j-example.nblink

@@ -1,3 +1,6 @@
 {
-  "path": "../../../examples/neo4j-example.ipynb"
+  "path": "../../../examples/neo4j-example.ipynb",
+  "extra-media": [
+    "../../../examples/example_graph.png"
+  ]
 }

examples/creds.env.example

@@ -0,0 +1,22 @@
+# Copy this file to `creds.env` in this directory and fill in your own values.
+# The notebooks load `creds.env` automatically, so you do not have to edit them.
+
+# Neo4j database connection, used by neo4j-example.ipynb and gds-example.ipynb
+NEO4J_URI=neo4j://localhost:7687
+NEO4J_USERNAME=neo4j
+NEO4J_PASSWORD=password
+NEO4J_DB=neo4j
+
+# Aura Graph Analytics, optionally used by gds-example.ipynb to run GDS in Aura
+# instead of a local Neo4j instance with the GDS plugin.
+AURA_INSTANCEID=
+AURA_API_CLIENT_ID=
+AURA_API_CLIENT_SECRET=
+AURA_API_PROJECT_ID=
+
+# Snowflake connection, used by snowflake-example.ipynb
+SNOWFLAKE_ACCOUNT=
+SNOWFLAKE_USER=
+SNOWFLAKE_PASSWORD=
+SNOWFLAKE_ROLE=
+SNOWFLAKE_WAREHOUSE=