collapsing/expanding compound node in cytoscape

2024/2/27 7:24:35

Does cytoscape.js support collapsing/expanding compound node ?

Eg. before collapsingnode1 (-)
--node1.1
--node1.2
------node1.2.1

After collapsing

node1 (+)

A (+) or (-) sign to expand/collapse would be great.

Looking for options to Group a set of nodes using Compound node and collapse/expand via user-interaction. If cytoscape.js doesn't support this by-default, any alternatives/workarounds to reach the goal ?

Answer

It's relatively straightforward using the API.

Collapse: node1.descendants().addClass('collapsed-child')

Expand: node1.descendants().removeClass('collapsed-child')

... where .collapsed-child { opacity: 0; }

You may also want to change the positions of the descendants so the parent node is smaller. Alternatively, you could use display: none for .collapsed-child if you don't care about seeing edges of collapsed children.

http://en.ppmy.cn/q/41404.html

Related Q&A

Cloud Functions for Firebase onWrite trigger: snapshot.val is not a function

I created few functions in the same index.js file, which is sendEmail, sendEmailByDbStatusChange and sendEmailConfirmation.sendEmail- To be call via HTTP/APIsendEmailByDbStatusChange - listening to DB …

Range.detach is now a no-op, as per DOM

I have been noticing this warning and error message in my console after updating Chrome to 36.0.1985.125.Warning:Range.detach is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach). …

How to use Javascript in Ruby on Rails?

I think Im fundamentally misunderstanding how to implement Javascript in my rails app. My understanding was that you throw your Javascript into your application.js file and then you can reference eleme…

Angular.js required at least one checkbox [duplicate]

This question already has answers here:AngularJS group check box validation(4 answers)Closed 9 years ago.I wouldnt be surprised if this is a duplicate however I cant find anything simple along the line…

Close UIWebView using javascript:window.close();

The question sounds weird, but here is my case.I have a UIWebView in my UIView ( done by [self.view addSubview:webView]; ) which occupies full screen. It intentionally hides the UIView before the UIWeb…

How to resolve NPM proxy Issue whilel running Node JS application

I have installed Noed JS and NPM. I have cloned the repo from git and trying to run the app in local. But I am facing below proxy issue while running app.npm install nodemon npm ERR! code ENOTFOUND npm…

How to properly mock useSelector hook to return correct values while testing?

I have a function that calls useSelector multiple times upon rendering. In mocking the selector I used: jest.spyOn(Redux, useSelector).mockReturnValueOnce(data).mockReturnValueOnce(moreData);This chang…

How to redirect in routes after async request?

I have this code in which I use react-router-dom v6 for routing class App extends Component {constructor(props) {super(props);this.state = {accounts: [],};}componentDidMount() {getAccounts().then(r =&g…

Zapier - Catch Hook - JSON Array - Loop over each item in array

I need to use a Zapier webhook to take some incoming JSON data, which contains an array of items, loop that array and do an action for each element. Heres a sample of incoming JSON data: {"first_n…

window.matchMedia(print) failing in Firefox and IE

I have a print button that launches the print functionality on any webpage. The button hides as soon as the user clicks on it and shows if the user is done printing or presses close in the print window…