nhogs / popoto

Visual query builder for Neo4j graph database

Popoto.js is a JavaScript library built with D3.js designed to create interactive and customizable visual query builder for Neo4j graph databases.

The graph queries are translated into Cypher and run on the database. Popoto also helps to display and customize the results.

An application is composed of various components, each one can be included independently anywhere in a web application. It just need to be bound to a container ID in an HTML page and the content will be generated automatically.

A common example application contains the following components:

	Graph component is an interactive interface designed to build queries for non technical users, the graph is made of selectable nodes connected to each other by links.
	Toolbar is a list of actions available in the graph container.
	Taxonomy container contains the list of searchable labels in the database.
	Query viewers container shows different representation of the corresponding query defined in the Graph component.
	Result container displays the results matching the graph query.

Resources

• Examples
• Wiki

Install

For NPM, npm install popoto For Yarn, yarn add popoto.

Otherwise, download the latest release.

You can also load directly from unpkg or jsDelivr

Example:

<!-- Add default CSS reference -->
<link rel="stylesheet" href="https://unpkg.com/popoto/dist/popoto.min.css">
<!-- Or -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/popoto/dist/popoto.min.css">

<!-- Add Popoto script reference, will default to popoto.min.js -->
<script src="https://unpkg.com/popoto"></script>
<!-- Or -->
<script src="https://cdn.jsdelivr.net/npm/popoto/dist/popoto.min.js"></script>

For source version:

<!-- Add Popoto script reference -->
<script src="https://unpkg.com/popoto/dist/popoto.js"></script>
<!-- Or -->
<script src="https://cdn.jsdelivr.net/npm/popoto/dist/popoto.js"></script>

Quick start guide:

• Edit the "index.html" file, by default this application is based on Neo4j movie graph example.
• Create your driver instance following Neo4j developer guide: https://neo4j.com/developer/javascript/

const driver = neo4j.driver(
    "neo4j://dff437fa.databases.neo4j.io", // Unencrypted 
    //"neo4j+s://dff437fa.databases.neo4j.io", //Encrypted with Full Certificate
    neo4j.auth.basic("popoto", "popotopassword"),
    //{disableLosslessIntegers: true} // Enabling native numbers
);

• Change the value of popoto.runner.DRIVER = driver to your running server driver instance.
• If needed you can change the default session creation to add parameters:

popoto.runner.createSession = function () {
    return runner.DRIVER.session({defaultAccessMode: "READ"})
};

• Update the list of labels defined in "popoto.provider.node.Provider" definition. All node labels to display in the graph should be added in this list.
• Add any other customization you need in this file. See Nhogs/popoto-examples for detailed configuration examples.
• Open index.html file in your preferred web browser to see the result.
• Click on a node to display and select a value, click on relationship arcs around nodes to navigate in relations uses right click to remove a value and ctrl+click to negate a node. See all Basic actions for details

See an explained example page source in Getting started.

License

GPL-3.0

popoto's Issues

Enhancement Request : How add a new node

Hi

Want to add a new node too, can you please help how

I am willing to contribute, need bit starting ropes to understand though

Using bolt with popoto.js

Hi everyone, just wanted to know if popoto js has support for bolt now. I read that in recent versions of popoto there was no support for bolt.. Reason I'm asking is because I get this error in my console:

and my config is as such:

I don't know if my errors are because of the lack of support or because I haven't configured it properly. I would really appreciate it if someone can provide any explanation. Thank you in advance.

how to get node and relation properties

Hi,

How to get Node/Relation properties and show them when they click on node or link.

Can't navigate in node values if count is disabled

Disable count feature should be refactored and added in toolbar actions

How to avoid exposing password of neo user?

Hi,
is there another way to avoid having the password in clear text within the index.html file?
It looks very unsafe to me.

I know I could make sure to only use a view only user that has only access to the views we want to show, but that would still not satisfy me enough.

Any help?
Thanks.

RedisGraph as additional back end for Popoto?

Have you met RedisGraph? Its a blazing-fast plugin for Redis that turns this great non-sql database into a graph DB with typical out of this world speed. Still work in progress but it seems with a large following and lots of potential. AND it talks Cypher.

• RedisGraph: https://oss.redislabs.com/redisgraph/
• Issue introducing Popoto to RedisGraph audience: RedisGraph/RedisGraph#479

Anyone interesting in exploring what it would take to make these two work together?

Bug/Feature Directed graph

Hello there,

no incoming edges are displayed. Is this intended or will it be implemented?

How to provide search bar for only nodes

Instead of storing all the data in html, we would like to give search option. is that possible to do.

Unable to load data from json

Hi, I am trying to load popoto graph from json file. But, i am unable to feed popoto data even directly from script or console. Please guide me, I am new with popoto.

sample data:
{"nodes":[{"data":{"id":"8","label":"Person","name":"Emil Eifrem","born":1978}},{"data":{"id":"0","label":"Movie","tagline":"Welcome to the Real World","title":"The Matrix","released":1999}},{"data":{"id":"7","label":"Person","name":"Joel Silver","born":1952}},{"data":{"id":"6","label":"Person","name":"Lana Wachowski","born":1965}},{"data":{"id":"5","label":"Person","name":"Lilly Wachowski","born":1967}},{"data":{"id":"4","label":"Person","name":"Hugo Weaving","born":1960}},{"data":{"id":"3","label":"Person","name":"Laurence Fishburne","born":1961}},{"data":{"id":"2","label":"Person","name":"Carrie-Anne Moss","born":1967}},{"data":{"id":"1","label":"Person","name":"Keanu Reeves","born":1964}},{"data":{"id":"154","label":"Movie","title":"Something's Gotta Give","released":2003}},{"data":{"id":"87","label":"Movie","tagline":"Pain heals, Chicks dig scars... Glory lasts forever","title":"The Replacements","released":2000}}],"edges":[{"data":{"source":"8","target":"0","relationship":"ACTED_IN"}},{"data":{"source":"7","target":"0","relationship":"PRODUCED"}},{"data":{"source":"6","target":"0","relationship":"DIRECTED"}},{"data":{"source":"5","target":"0","relationship":"DIRECTED"}},{"data":{"source":"4","target":"0","relationship":"ACTED_IN"}},{"data":{"source":"3","target":"0","relationship":"ACTED_IN"}},{"data":{"source":"2","target":"0","relationship":"ACTED_IN"}},{"data":{"source":"1","target":"0","relationship":"ACTED_IN"}},{"data":{"source":"1","target":"154","relationship":"ACTED_IN"}},{"data":{"source":"1","target":"87","relationship":"ACTED_IN"}}]}

Different situations on different browser

Hi,I use your popoto.js Example HTML to link my neo4j database on my server.
But I found out that my Edge、Safari and Firefox work successfully. but in Chrome or on my phone It can't work !!!

 var driver = neo4j.driver(
            "neo4j+s://ysjy.alplune.top",
            neo4j.auth.basic("xxx", "xxx"),
        );

What I want to do is visit this web via web-view on phone. But It will console the same error :

In Chrome:

using filterNodeValueQuery

Hello and thanks for great project.
How i must use filterNodeValueQuery function ?
I need filter for node and want use statement "Profile.name CONTAINS 'leg'"
i do next

"filterNodeValueQuery": function (node, initialQuery) {
  initialQuery.whereElements.push("Profile.name CONTAINS 'leg'");
  return initialQuery;
},

but its not work, i see that initialQuery.statement without my where.
and in wiki i dont find information about it.

Regenerate entire graph from JSON

In my project, I save the object popoto.graph.force.nodes() and popoto.graph.force.links(). I generate a JSON string, and save in database of my app. After, the users load the saved graph for add new changes.

I regenerate the Graph with this code:

popoto.graph.force.nodes(nodes);
popoto.graph.force.links(links);
popoto.graph.hasGraphChanged = true;
popoto.result.hasChanged = true;
popoto.update();

nodes and links vars contain a javascript object compatible with force element.

After the update function execution, popoto show the links and nodes, but the nodes there are separated of the links (source and target of the links there aren't "linking" to the nodes. But this nodes there are rendered, but no link pointing to them).

Something I forgive to full regenerate the graph?

Using local graph data with popoto.js

Hi everyone,

In my app I'm simply trying to display data from my neo4j database but am having some trouble understanding some things. I am aware that BOLT is not supported by popoto.js, so what I did was retrieve data using PHP and store the result locally. My question is, how do I use the local data I have stored and use it in my popoto visualization? The reason I'm confused is that I still need to provide a value for popoto.rest.CYPHER_URL even though I won't be using it. Thanks in advance.

Edit:
This is the query I'm using to retrieve data:
Match (n:Bay)-[r]->(m:Parts) Return n,r,m

When using this query, neoviz.js has no issue visualizing the data, so I was wondering how i can use the data retireved from running this query in popoto

Port popoto for RDF and SPARQL

Hi, I'm trying to build a similar query builder for SPARQL and RDF. Do you think it'd be possible to do so based on this greate project? Where would be the best place to start? Many thanks.

Add more events in graph actions

Add more events in graph action to facilitate graph customizations for example to adress #27

Discover incoming relationships?

Hi. Is is possible to configure discovery of incoming relationships? As a work-around, I created reciprocal relationships amongst nodes, but that feels like a hack. If not possible, could this be considered as an enhancement request?

Using popoto for a oil exploration graph database

Hi,
I am trying to build a visual query builder for a graph database on oil exploration. The structure (or schema) of the database is different from the example databases that are provided. Can I import such database into popoto with minimum code changes?

How to Remove Relations based on selection

If i click on Directed on person Node, it should display and when i click on Produced , Produced should be displayed and Directed should be hidden. again if i select on Produced , it should not display twice. How to achieve this.

Bad query construction in cypherviewer when relevantLinks = 1

In the file cypherviewer if the relevantLinks is equal to 1 adds an unnecessary comma to the query and if you run the resultant query in the Neo4j Engine console this gives the following result: Neo.ClientError.Statement.SyntaxError.

Example of the resultant cypherviewer

how can i reset the rest connection on a single popoto instance

Enhancement: Provide event for when new taxonmoy is selected from the Taxonmoy tab

It would be nice to be able to change other aspects of the page when a taxonmoy is clicked and to have a hook or event into that so as to update other places.

-Tom

properties doesn't get displayed on node

Is there a way we can see all properties of each node in the graph? this is very important, as currently it only shows constraint value on node, but what if we want to see all attributes of node?

How to iteratively expand nodes (on clicking) using popoto.js?

I am developing a web interface to the neo4j database using popoto.js. Currently, I am able to display a start node and expand the graph up to 3-4 levels by clicking on the node relationships. It seems that the underlying query that popoto uses gets updated along with the expanding graph and after a certain point the query becomes invalid and popoto resets the graph. What I am trying to create is an interface where I can expand any node in the graph (and hence expanding the overall graph) similar to what is possible in the neo4j browser. How can I achieve this?

error while accessing Neo4j server on URL:"..." defined in "rest.CYPHER_URL" property: Bad Request

Good afternoon,
I am trying to implement popoto in my project but the console is throwing this error:
"error: error while accessing Neo4j server on URL:"http://localhost:7474/db/data/transaction/commit" defined in "rest.CYPHER_URL" property: Bad Request"

I noticed the the cypher query displayed in the cypher query viewer encloses the column name in single braces (which does not work if I execute the query directly in the browser). I am using Neo4j server version 3.5.0.

License

Came across this project while searching for something similar and this looks interesting and useful.

However, the license seems to be GPL.

Wondering if you would be open for licensing this work under a more permissive: Apache, MIT or BSD or similar license?

It would be very helpful and makes it easy to create / contribute derivative works (for example, making it work with other databases, sources etc.). Thank you.

Add d3-voronoi to examples and documentation

Starting with a simple example in plain HTML+JS (no Node) I ran into this issue:
Nhogs/popoto-examples#17

To fix this I had to add <script src="https://d3js.org/d3-voronoi.v1.min.js"></script>.

But this fix/requirement is not mentioned anywhere in the docs or examples.

Include SVG File

I've used popotojs and works fine. But I've problem.

The Designer send me svg files to use in the app, but popotojs only accept svg paths object (See the example "US regions"). I spend a lot of time "translated" the file to paths in a object.

I looking for a method or function to "render" the svg object or include file path.

Is there something like this?

Add codeclimate analysis

https://codeclimate.com/github/Nhogs/popoto

new version: no results

i installed the current version 2.0.17, but the queries copied form 2.0.11 doesn't work.
No basic request work.

Is there a special neo-version required?
What was changed?

Add an event in Popoto to notify when start have been done and everything is ready

Bolt support?

Hi,

Keep up the excellent work on this package!
I am super motivated to try it out
I created a sandbox using https://neo4j.com/sandbox-v2/
The examples included show how to connect using rest endpoint.
Is bolt supported? For example, can I connect using -

server_url: "bolt://54.23.45.67:7687"
server_user: "neo4j"
server_password: "sorts-swims-burglaries"

Please let me know. Thanks!!! Appreciate your time

Customize the query page

How can i Customize the query page，thanks

any way to connect to the neo4j without exposing credentials?

Hi,

is there a way to connect to the neo4j server, without exposing the credentials? like using another app as a proxy or anything else so the connection to the neo4j becames server side?

thanks

why to store all the nodes in the index.html.

Why to store all the nodes in index.html and if i have 1000 nodes, if i store all of them in index.html, size of the file would grow.

Add return attribute, nodes

Is there a way in the UI to affect which nodes and/or attributes are returned?

Switch node for which results are displayed

Hi there,
first I want to say thanks for this great project!

On to the issue: I use the results view to display additional information on the queried results of the root node. However it would be great if users could switch the node that results are queried for dynamically without selecting a new base node type. So for an open query they could simply do something like shift-click on the node they want the results view to shift to.

I tried to add the functionality on my own by modifying the root node of the result query generator, but that led to multiple bugs in the graph functionality.

Do you have any pointers on how to go about implementing this feature?

Toolbar icons

I'm adding icons to the toolbar in a project. I found a CSS property content, adding "\00f065" to span, show the fullscreen icon, for example.

There are a complete list of these icons? They arent Awesome icons.

Thanks.

d3-selection

Hello, I'd like to install both Popoto.js and React Flow onto a React project, but Popoto is using an older version of d3-selection (v. 1.4.2) while React Flow is using the latest version (v. 2.0.0). I'm not really familiar with d3. Do you think it would be a huge undertaking to update Popoto to use the latest d3 lib collection?

This is the error I'm encountering:

TypeError: exitingData.filter(...).transition is not a function
push../node_modules/popoto/src/graph/node/node.js.node.removeElements

exitingData.filter(function (d) {
    return d.parent;
}).transition().duration(300).attr("transform", function (d) {
    return "translate(" + d.parent.x + "," + d.parent.y + ")";
}).remove();

Refactor providers and support module configuration

customize node label

To provide some context, when Popoto.js generates a query for a node with a specific label, it includes the label as part of the node identifier, which can lead to queries that are not accepted by the Neo4j database. For example, the generated query looks like this:

MATCH (node::test:`Node::test`) RETURN node::test

As mentioned, this query format is not compatible with the Neo4j database. I am wondering if there is a solution or workaround to customize the query and achieve the desired result. Specifically, I would like to generate a query in the following format:

MATCH (n:`Node::test`) RETURN n

or escape variables and labels that contain special characters:

MATCH (`node::test`:`Node::test`) RETURN `node::test`

PS: i can't remove the '::' from nodes This modified query format would allow me to work with the Neo4j database seamlessly.

I would greatly appreciate any guidance or insights you can provide regarding this issue. Thank you in advance for your assistance.

Reverse donut

Is there a way to show the donut to the relationships that arrive at the node (not just those originating at the node)? That would make it easier to search.

Feature "Clear"

I currently have a use case where I destroy and rebuild the Angular(6) component and Popoto is not reinitialized. But in the dataModel it still holds the nodes and the browser freezes because a new root node wants to attach to it. Therefore the question gives a possibility to empty/clear everything?

Add pagination support in results

Add constrain system on link/node to deeply customize search

example:
I want to search all nodes with more/less/equal a certain value

2 cases:
value is in properties of the node
value is in the relationship

How to give Custom CYPHER Queries?

Can we provide custom CYPHER query and then build the graph visualization?
Queries like:

MATCH (p:Person)-[r:DIRECTED]->(m:Movie) RETURN p,r,m

And display the results in usual way how neo4j browser displays.

An ability to set (reload) a new scheme in the same browser session

hello

using popoto API call: popoto.start(schema_1) with a single scheme without a problem (using popoto npm package in the native react environment)

next I tried do change the scheme (in the same browser session so same neo4j connection) popoto.start(schema_2) during which call browser froze

one can I guess easily replicate the problem by issuing two calls in succession

popoto.start(schema_1)
popoto.start(schema_2)

---

wondering if there is an API to reload the scheme which would remove previous graph rendering and load fresh new scheme in its place

if one is within the same scheme one can change root (one particular example demonstrates this nicely) but I need to completely load brand new scheme in place of the previous (without obviously complete browser refresh)

Is it possible to start a graph with values instead of labels?

Hello there, how you guys been?

I'd like to start a graph with defined values returned from the database, instead of loading "label nodes" and letting the user select values.

It's like when you run the query "MATCH (r) RETURN r" in Neo4J Browser. This query returns all the values from the database and all relationships between them.

I'd like to set a initial query and load the graph with the returned values.

There's a way to do this?

Please note that:

• I don't want to set just the root node's value, like asked in this question: https://stackoverflow.com/questions/44611031/popoto-js-neo4j-how-to-start-the-graph-with-a-specific-node. I wish to start the entire graph;
• I won't be able to know the values beforehand, so I couldn't create a object to start the graph with.

Thanks in advance,
Bruno

how to start?

It's really a terrible project！
Not friendly for a newer.
When I nmp install ,How to continue?

Fix save graph model issue containing reverse relations

Statement syntax error in cypherviewer module

In this example:

When you run the cypher query on Neo4J Engine this is the result :
Neo.ClientError.Statement.SyntaxError

If you put quotes to the value of the title property then you have the result:
(no changes, no records)

But the result shown in the popoto result panel is:
name:Tom Tykwer
born:1965

But the correct syntax of the Cypher query that produces the last result is this:

MATCH (person:Person), (person:Person)-[:DIRECTED]->(movie1:Movie) WHERE (movie1.title = "Cloud Atlas") AND (NOT (person:Person)-[:PRODUCED]->(:Movie{title:"Ninja Assassin"})) RETURN person

So you have to remove the following part in the MATCH:
, (person:Person)-[:PRODUCED]->(movie2:Movie)

And that Cypher query is the right one that gives the desired result.