NEuler Refresh — Perspectives-light, GDS Sandbox integration, Community Detection layout
Learn about the latest updates to NEuler, the Graph Data Science Playground, including a new community detection layout and GDS Sandbox integration.
NEuler (Neo4j Euler) is a UI that simplifies the onboarding process for users of Neo4j’s Graph Data Science Library (GDSL). It was first released in early 2019 when it was used to onboard users of GDSL’s predecessor, the Graph Algorithms Library.!(upload://7xEEgdy98poyRVHSS5i16O0RH61.jpeg)Leonhard Euler
Over the last few months, we’ve made a bunch of changes, which will (hopefully!) make it easier to use and get you up to speed quicker with GDSL.
The NEuler Developer Guide contains instructions for installing the app or you can watch the video below.
Let’s have a look at what changes have been made.
One usability problem that many users had was working out how to reduce the node properties that were shown in each row of the table view. The screenshot below shows the results from running the Degree Centrality algorithm on the sample Twitter dataset:!(upload://77i4mB0aGeBTy805roG7uhNy4q5.png)The old Degree Centrality table view
By default, all the properties of a node (except the default ones used to store the results of algorithms) were shown. We had a feature that let you remove a property by hovering over it and pressing the red minus button.!(upload://nXnRXsbYmYI5OhfzZeQswGOpKyP.png)Removing a property key
We thought this was quite intuitive, but after watching colleagues use the app we realised that this wasn’t the case. So we’ve revamped that part of the UI with an idea shamelessly stolen from Neo4j Bloom — perspectives!
The version of this feature in NEuler is much simpler, you can probably better think of it as perspectives-light. So how does it work?
Both the home screen and the table results view have a list of node labels that you can click on to choose a background color and caption:!(upload://7yXFHijoXzRt1xZuCiAxUVGuyF9.png)Choosing the color and caption for the User label
In this screenshot, we’re choosing a pink background color and the properties ‘id’ and ‘name’. If we run the Degree Centrality algorithm again, we’ll see the following output:!(upload://7JLViFFi3tXpFQyQiN83P8fMrKW.png)The new Degree Centrality table view
If you select multiple property keys, the values in the caption will be comma-separated, the same as they are in Bloom. We’re thinking about giving users the option to include property keys in the caption, so if you have any opinions let us know.
And while we’re talking about feedback…
If you’re using NEuler and something isn’t working or you have an idea on something that we can do better, we’ve added a feedback form in the bottom right-hand corner.!(upload://6oSzMsPEaUNVBJTE4ZtxQk9EGGD.png)Give us your NEuler feedback
Feedback is anonymous, so we don’t have a way of telling you that we’ve addressed your concerns, but we do review the comments regularly.
Redesigned community detection algorithm output
Another thing that has irritated me for ages is the way that we displayed the results of community detection algorithms. The screenshot below shows the output of running the Louvain algorithm:!(upload://dGJARcS0x7XwowYTJBckJEBsRVo.png)The old Louvain table view
It has one node per row along with an id representing its community. This doesn’t make it particularly easy to understand the communities that exist in the graph. It would be better if we could see the results grouped by the community with a selection of nodes that belong in that community.
With perspectives-light reducing the amount of screen space that a node consumes, this is now much easier. Below is a screenshot of running the Louvain algorithm now:!(upload://tq6ITNcugS0QGOPiZ8putJT8Np8.png)The new Louvain table view
Along with a configurable number of nodes per community, we can also see the size of each community. At the moment those nodes are chosen randomly, but a future enhancement would be to order nodes based on a configurable property.
Algorithm config and results go together
Another thing users found confusing was that when they selected a new algorithm, the form for that algorithm would be displayed next to the results of the last algorithm run. In the screenshot below I’ve just selected the Triangles algorithm, but the results from Louvain are still there:!(upload://hAnlNIfmPcnBHSdwtMVh5pgJOUc.png)The old way of selecting a new algorithm
In this version of the app, the algorithm form and algorithm results are separate components, but we’ve sorted that out now. In the latest version, we’ve added a ‘Configure’ tab that has the form to configure an algorithm run, as shown in the screenshot below:!(upload://4NbdB13e0J2ozFEye9BdArrOvrl.png)The new way of selecting a new algorithm
We’ve also made it easier to navigate to old algorithm results by listing algorithm runs in a drop-down menu instead of the previous/next navigation bar that we had before. If you select a new algorithm it will appear on the top of this list, but it will only be saved in the list if you run it. For example, if we navigate to the Local Clustering Coefficient algorithm without running Triangles, the drop-down will look like this:!(upload://y1ZiDXpHFVI87VvL48HdnwCrWjO.png)Previous algorithm runs
We’re also now keeping track of the form parameters used for an algorithm run. So we can now navigate back to an old algorithm run and click on the ‘Edit configuration’ button to run it again, as shown in the video below:!(upload://tEqyDAUWBm0cMTo458DSUjePiEQ.gif)Edit and re-run an algorithm
Learning the Graph Data Science Library
The whole point of NEuler is to help users learn how to use the underlying Graph Data Science Library. We’ve always had a ‘Code’ tab that showed the queries used by each algorithm, and this section has been updated as well.!(upload://eIEDRMVNqTMDb4Ng4lkqfihpAAF.gif)The code view
We’ve added the ‘Named Graph’ section, which shows how to reproduce the algorithm run using a named graph.
Named graphs are projected graphs that are created before we want to run an algorithm and are stored in memory until we delete them. They are usually used in production environments where we want to run multiple algorithms against the same projected graph.
We’ve also added named graphs to the Neo4j Browser guide, which can be generated by clicking on the button at the top of the Code view.
Improved start-up flow
We’ve made some changes to the startup-flow of NEuler to try to explain some of the common reasons why it might not start.
I hadn’t realised that it’s possible to launch NEuler without having a database running, so now we’re checking for this condition before the app launches:!(upload://eidFEKAScHmUXoeEYRAca2f1tB.png)No active database
NEuler depends on the GDSL and APOC plugins, so we have a check for both of those as well. The screenshot below shows the error that you’ll see if GDSL is missing:!(upload://zc5fB40KerSU5EfHmEC4qKTGPwH.png)GDSL is missing
Hopefully, we’ve now covered all the way that startup can go wrong, but if you know of any more please let me know!
Finally, we’re now publishing a hosted version of NEuler at neuler.graphapp.io. From this version of the app, you can connect to any Neo4j database from your web browser.
We’ve also updated the Neo4j Sandbox so that you can connect to NEuler from the Graph Data Science sandbox:!(upload://hJoxoZtmSa1FeBjJ2TnD2ot8vcY.png)Graph Data Science Sandbox
If you launch this sandbox, you’ll now see the following button to launch NEuler:!(upload://x1w5qyTjgEMJVjRsX2zlZwV9wgr.png)
Clicking this link will auto-populate hosted NEuler with the credentials of your sandbox, as seen in the screenshot below:!(upload://6B57WzlcZbPLUkViqmkxI8QRY65.gif)Connecting to NEuler from the GDS Sandbox
We hope you like the changes that we’ve made NEuler. Enjoy trying it out and if you have any feedback let us know on the Neo4j Community site or via the in-app feedback form.![|1x1](upload://6w7HOLoKuTDtEXRteNiYA53kW94.gif)
NEuler Refresh — Perspectives-light, GDS Sandbox integration, Community Detection layout was originally published in Neo4j Developer Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.