Can we display node properties as node in the rendered graph?

Neo4j Graph Platform
1

Is it possible to show node properties as nodes on the graph? What I want to achieve is that after rendering my graph with initial query, if I further expand any nodes then it should render its properties too as nodes.

Screenshot from 2021-07-13 12-13-02
Screenshot from 2021-07-13 12-13-02577×529 43.9 KB

As you can see on the above image, I've a organisations node (green color) and person nodes(blue color) and on hover of the organisations node It shows its properties in tooltips. So, I don't want to show the properties in tooltip, instead I wanna show all these properties as graph nodes just like its children.

I'm using current neo4j version and neovis.js library to render the graph in react application.

Neo4j - current version
reactjs- current version
neovis.js - "^1.6.0"
OS - Ubuntu 18

2

i think you need to design that as the part of data model.

3

As @deepika said, a redesign of data model is surely the recommended solution.

However, if you want a fast solution, you could use the APOC procedures with the Virtual nodes/relationships functions: Virtual Nodes/Rels - APOC Extended Documentation.

For example, if you create this node with 2 props:

create (n:Node {firstProp: 'valueProp', secondProp: '2ndValue'})

you can execute this one:

match (startNode:Node)
with startNode, 
apoc.create.vNode(["PROP_1"], {prop1: startNode.firstProp}) as firstPropNode,
apoc.create.vNode(["PROP_2"], {prop1: startNode.secondProp}) as secondPropNode
with apoc.create.vRelationship(startNode, 'HAS_PROP_1', {}, firstPropNode ) as firstRel, 
apoc.create.vRelationship(startNode, 'HAS_PROP_2', {}, secondPropNode ) as secondRel, 
startNode, firstPropNode, secondPropNode
return *

namely,
will be created 2 virtual nodes (firstPropNode and secondPropNode)
and 2 relationships starting from startNode (HAS_PROP_1, HAS_PROP_2)
for the 2 node properties and then will be visualized in result graph.

4

@deepika and @giuseppe_villan, thanks for your answers. As I previously mentioned that I'm using the neovis.js library, so I also dug down some of its core functions that it provides while we create the instance for the graph. So, with the help of its core functions add() I can able to add nodes on the graph as per my requirement. Let me share here what approach I did so if anyone in future comes here, it'll be handy for them.

As I said, I got the neovis instance passing the config here -

const vis = new NeoVis(config);

So by using this vis instance, I can get various methods and properties nodes and edges, this instance provides. Further using the properties vis.nodes and vis.edges which also provides some of its methods like add, remove, getIds and more.

On click of any node, I can get its id and other information, so I added the node with some of its parent node properties like this -

const nodeInfo = getNodeRawInfo(nodeIdToAdd); // my custom function which provides node info
const newNode = vis.nodes.add({
    // id: <NODE_ID_YOU_WANT>, if not pass it'll create UUID for the node
    borderWidthSelected: 2,  
    title: 'title_goes_here', // shows on hover of node                                                                        
    label: 'label_goes_here', // shows inside of the node
    scaling: {
       label: true
    },
    size: 50,
    shape: 'circle',
    font: {
       size: 16,
       color:"#ffffff",
       strokeWidth: 0,
       strokeColor: 'transparent',
       multi: 'html'
    },  
    color: {
        border: '#fff',
        background: '#333',
    }  
});

vis.edges.add({
     from: newNode[0],
     to: nodeIdToAdd,
     scaling:{
          label: true,
     },
     smooth: true,
     color: '#fefefe'
})

So the above code adds the node to the current graph and connects it through the edge. Neovis.js library built on top of the vis.js (network) in. So, this is the way I fulfil my requirement. @deepika and @giuseppe_villan, I also thankful for your answers again and it might be really helpful also. I appreciate your effort.

Useful links that might be really helpful if someone follows my approach -
Neovis.js Library
vis-network library examples
vis-network documentation

Thanks,
Krishna Vishwakarma

5

Thank Krishna. Really helpful. It gives different perspective to think.

1 Like