neovis.js | Neo4j + visjs = neovisjs Graph visualizations in the browser with data from Neo4j | Data Visualization library

My graph consists only of nodes with the label Tag, which are joined by a relationship :CONNECTED_TO.

I am trying to use Neovis library to visualize Neo4j graph data in webpage.

In Component.ts

I've spent about a week or so on this, and there's very little documentation online so I figured I'd come on here to see if anyone could potentially help out. So the top level summary is that I'm trying to use an external library (neovis.js) to visualize a neo4j graph database in a Salesforce Lightning web component. I've already explored d3.js (which is compatible with Salesforces locker service) and a few other visualization libraries, but neovis.js would be the most viable option for my use case. I've made some slight modifications shown in the code below to avoid using Document.getElementById in the neovis.js library to select the element and append the canvas to the page.

However, once the canvas is drawn to the page, none of the canvas elements (nodes and edges) are shown on the screen. Here's the weird part though, I can still hover over where the nodes should be on the canvas, and the popup which displays specific information for each node appears on screen with the correct information for each node. I am not super familiar with how the canvas element works, but it seems to me as if some css property is not being applied because of Salesforce's locker service, which causes to elements to be rendered invisibly.

I've gone through a good chunk of the neovis.js library (which is just a library built on top of vis.js), and I've looked for places where perhaps styles aren't being applied to the canvas element; however up to now I've had no luck.

Here's the code I've used so far:

index.html

I'm trying to stand up a (non-commercial) web application that uses neo4j Community 3.5.2 as a backend.

The application interfaces with the graph in two ways:

• Server-side (safe) with flask to write new nodes and relationships

• Client-side (not safe) to read using neovis.js which, as far as I can tell with my limited JS knowledge, requires me to embed credentials in client-side code.

It makes me seriously queezy to allow clients to access an internet-exposed DB directly but, and again as far as I can tell, it's the only way I can keep a visualization interactive for my site's users. Is that correct?

Assuming it is, I'm exploring creating a user with read-only permissions to minimize exposure. The docs all seem to indicate I need the enterprise edition to do this. Is that correct?

Any general guidance or alternate approaches? This feels a bit wrong.

I am creating a statement where i insert the values based on the input from drop-down. And i am able to create a statement. But when i merge the statement snippets, i get "undefined" in the beginning and in between. What and Why is this "undefined" , i am unable to determine. Please help. The coding is in angular2, but i believe it is simply a logic issue.

Logic - code -

app.component.ts

Can some one help me . I am using Neo4j application to build and integrate it to an angular and nodejs app. I am using Core UI - angular template. It complies within 3 minutes. (Or any other template). However, when i include the Neovis.js that is Neo4j app library , it takes around 20 minutes to compile.

I used -