Neo4j public browser visualisation with search bar for web visitors

[shanna]

Hi developer friends, I aim at building a netwerk visualization web application with Neo4j as the underlying database and database model. I have found several options here: https://neo4j.com/developer/tools-graph-visualization/.

What I need, is that visitors of my web page will be able to perform a search on the database, so that only relevant nodes or relations will show.

Any advice on this?

[tony_chiboucas]

1. Security will be tricky, depending on the visualizer you choose.
   • You can always just DIY a plain js convert to html. Every dataset is different so the what/how/when to show data, is a bit tricky, and is unique to every dataset and use-case. That's why HTML was created to begin with.
2. If you want to use the built-in Neo4j Browser, I'd advise setting up an nginx reverse-proxy with credentials locked to a read-only user.
3. For search, use Full text indices.

There's other tools out there too, like KineVis's GraphXR, which was made explicitly for this purpose.

Whatever you find, I'm happy to help, and would be very curious about what you end up going with. I'm working on a similar problem for an open-source project.

[shanna]

Thank you so much! The KineVis's GraphXR sounds like it might suit my purpose. Any other tools that you can think of? I though about these ones. I will list them here for others that might be interested in the same:

1. Bloom - Would suit my purpose very well, but I heard from the developers of Neo4j themselves that at this moment, it is not suited to be taken in production.
2. Cambridge Analytics - Very beautiful... very expensive...

I will probably explore both routes, meaning that I will contact GraphXR and that I will keep on developing with html/javascript. Let's stay in touch about this! Can I add you on Twitter?

[tony_chiboucas]

I don't have a twitter! I do have a github.

The Neo4j project I'm working on is here: (there's plenty of useful tidbits in there)

GitHub

Downstream/bsuapi

Boise State World Museum Neo4j JSON API: Multiple RESTful URI methods to retrieve preset JSON representations of the graph of curated artworks. - Downstream/bsuapi

I also have a very simple html view of a slice of the graph, via json api, built entirely with javascript. It follows simple patterns that were at the origin of React.

GitHub

WyrdNexus/bsu_viewer

Contribute to WyrdNexus/bsu_viewer development by creating an account on GitHub.

[shanna]

Hi Tony,

Thank you for sharing, I will certainly look at your project.

I still have a question regarding your point 2 in your previous email. Setting up a reverse-proxy to the Neo4j Browser while giving the visitor read-only credentials, would it still be possible for the visitor to search the database?

[tony_chiboucas]

shanna:

Setting up a reverse-proxy to the Neo4j Browser while giving the visitor read-only credentials, would it still be possible for the visitor to search the database?

Yes.

Add a user to the Neo4j database with read-only access. They can search and view... and crash your server with poorly written Cypher...

get your username and password, and base64 encode it...

server {
    . . .
    location /browser {
        proxy_redirect off;
        proxy_connect_timeout 30s;
        proxy_set_header Accept-Encoding \"\";
        proxy_set_header Host \$host;
        proxy_set_header Authorization "Basic [base64encoded(user:pass)]";  // real value should look like "Basic As8sdhwekjuhd8yf"
        proxy_pass http://127.0.0.1:7474;
    }
}

Then, anyone who visits yourdomain.com/browser will get the Neo4j browser, logged in as that user.

[shanna]

Right, thank you for the clear answer. I understand now that my web visitors should be able to write Cypher if I want them to access the database with a reverse proxy. This is not something that I can ask of them, so that option is not logical for me. Good to know though 😉

[mike]

Hi @shanna we built a toy web app which returns an expanded graph using https://visjs.org/ which has a library for visualising networks, it's maintained and the docs are thorough. Straight forward to implement too.

https://demo.riskhunter.co.uk/share/Regulation%20Technologies

[shanna]

That looks amazing Mike! Thank you for getting my attention to that.

One question remains and maybe I can also ask @tony.chiboucas to think along.

In my ideal situation, after the search and after web visitors have done the search and are happy with the result, I would like them to be able to contact the searched entrepreneurs (nodes) relatively fast. For example, with a chat function on the web page, a connection with an email program or the app creating a list of mailaddressess that are saved as properties in the database.

Do you see any possibilities with the visjs app for this?

[tony_chiboucas]

If you build a web-app with Neo as the DB, you can pretty much do anything. That said, the question you're really asking is a "how big?" question. That question is best answered by whomever will be developing the visjs app. That said, the simplest would be a mailto: link to simply open an email to that clicked user. The biggest would be an embedded video-call or stream. That all comes down to software development.

[shanna]

I checked the documents for vis and it seems like I can get pretty far in my desired direction with this application. I couldn’t find the documentation and code for the search option you have nested in your Risk Hunters web app. Can you please help me a little bit in the right direction? I am developing a nonprofit web app for all Dutch entrepeneurs and organisations that want to contribute to society and do no harm to each other, the planet and animals. I actually quitted my paid job as a data scientist to establish this, but I am still a newbie in the developers field. I still have a long way to go and am very grateful for the help I can get, aiming of returning all the favors that were given to me.

[mike]

Hi @shanna vis.js relates only to the frame returning the visualisation. Our search function is a combination of html, C#, java. There are a multitude of ways to tackle the problem but are general programming issues rather than specific to neo4j. I'll also add at this point I'm not a developer and can't be of more practical help - sorry.

Best of luck with your project.

[shanna]

I see! Thank you. I can't solve it myself, but I know now what needs to be done 🙂

[pierre]

@shanna there is another project that may be interesting to you if you looking to build a javascript and React based website that interacts with a Neo4j database, and that is the GRAND stack -> https://grandstack.io/

I was helpful to me to get started developing a web app and to understand how to interact with Neo4j and Cypher queries in the context of a javascript app. Although it does not directly provide a graph visualisation React component. But you can build your own using React in combination with various visualisation libraries (like vis.js, D3, Three.js etc.). Which is basically what Cambridge Intelligence did to develop their ReGraph React component that you can buy from them.
Then your search function would be a react component that interacts with your data in some way that you define.

[shanna]

Thank you so much for this information, which is new to me! Much appreciated!

[yachal_upson]

@shanna- I've come across your posts here, and I realise they're ~2 years old, but I'd be very interested in connecting with you. It sounds like you were working on almost exactly the same concept I've been thinking/talking about at the same time - something I'm again considering now.
I live and work in New Zealand, in the climate/environment/energy/materials transition space. You can find me on Linkedin - Yachal Upson