How to collapse all child node on click of a parent node

Neo4j Graph Platform Procedures & APOC
,
1

I'm using neovis.js to render a neo4j graph to my react js application. I initially rendering the graph with the following query -

MATCH (p:People)-[r:PART_OF]->(o:Organisations) RETURN p,o,r LIMIT 100

What I'm trying to achieve here is that on click of any parent node I want to collapse all its chill node. And for that, I'm using this below cypher query -

MATCH (n:Investments)-[:INVESTMENT_OF]->(o:Organisations) WHERE o.uuid = '${uuid}'
            WITH n, collect(o) as subgraph
            CALL apoc.nodes.collapse(subgraph,{properties: 'combine'})
            YIELD from, rel, to
            RETURN from, rel, to

Where uuid is the parent node id I get by clicking on that. Using neovis's updateWithCypher() function it is not updating the graph with above query result. If I use renderWithCypher() function then it'll clear the network and show that single collapse node.

Can someone help me what I'm doing wrong here? I'll be really grateful.

neo4j - current version
"neovis.js": "^1.6.0",
react - ^17.0.2
OS - ubuntu 18

2

I think that should be something that can be done in the vis.js javascript API directly.
neovis is just a thin wrapper around vis.js

So you might investigate that:

perhaps something like this:

3

Hello Krishna

I might be wrong but your query doesn't make any sens to me.
First you MATCH all the investments for a single organisation related to an uuid.
And right after that, you ask to collect all the organisation related to each investment with a WITH clause.
So you will obtain a list of all the investments with all the same list of the same unique organisation. The WITH clause can only works with what was MATCHED before ( in this context ), nothing else.

4

@tard_gabriel , Thanks for your response. Yes, you might be right, but running the above query on neo4j browser gives me the collapse single node for which I match the condition using uuid. That query doesn't update my graph on the front-end.

Again, What I try to achieve is, let's say I've some graph nodes expanded with 10 childs nodes and If I click on the parent node then it should collpase. Here the organisations node is the parent node and investment node are it child node connected to it using the relation INVESTMENT_OF.

I'm using the neovis.js npm package on latest react js application. If you understand my requirement, it would be very helpful to me if you can provide any idea or correct query.

Thanks,
Krishna Vishwakarma

5

@michael.hunger, Thanks for your response. And I appreciated your answer and followed the steps. I dug down the neovis.js and found that we get the remove method in neovis instance which helps us to remove the node by passing its id.

In my case, we don't have the parent node ids in the dataset, like given in the example here
https://www.programmersought.com/article/92857235409/

I somehow, manage to remove nodes and for most of the cases, it is working fine but not for all. The main drawback we have here is that, if I collapsed some nodes and let's say expands any nodes then neovis's updateWithCypher() method again updates the graph with nodes expanded by default which I had collapsed previously.

Does that Apoc procedure include in the above query that I mentioned in the question really works? This means, will it update my graph on the front-end level with the correct collapsed node?

6

Hmm, my knowledge of vis.js is really limited I really googled that article.

The apoc procedure allows you to project/collapse neighbouring nodes onto "virtual" node in the graph so that you get a higher granuarity view of a fine grained graph and remove intermediate nodes / rels.