Is bounding box with fcose layout supported? If not, then are there any workarounds?
I would like to separate one group of nodes in the top half with the rest in the bottom half.
Unfortunately, both fcose and cose-bilkent layout algorithms don't currently support bounding box. Maybe, you can apply the layout on subgraphs and then move one subgraph to top and the other subgraph to bottom as a workaround.
Related
I am trying to render a large number of "nodes" in a freeform sandbox area with Jetbrains Compose. Each node has it's own X,Y position. The editor is in a graphicsLayer where it can be panned and scaled. Inside this sandbox area, each node is offset by it's X,Y values and then rendered. However, the graphicsLayer has it's own size, and when translated/panned far enough that it goes off screen, all "nodes" disappear since Compose thinks that the bounding box of the graphics layer is no longer on screen and thus the layer does not need to render, even though nodes can be at any offset (even negative offsets) within the graphics layer.
I have tried opting not to translate the graphics layer when panning, and instead offset each node by position + pan amount, but this causes a large amount of lag when panning with many nodes, since Compose will have to recompose every single node every single frame to update their position.
Ideally, I would like the best of both worlds - a graphicsLayer that can be zoomed and panned, but also one that does not do bounds checking, since that removes our ability to pan the screen too much.
Here is a video: https://imgur.com/a/p60OKyc
Note that the cyan box displays the entire inner bounds of the graphics layer. I'd like for nodes to be able to be placed anywhere, even at negative coordinates.
I have a graph where I set the dynamic height for the graph because the graph can have different height based on the data we receive from the backend so I am calculating the height based on the number of nodes.
Also, I am using Dagre layout with Left to right hierarchical model but this does not work well for graphs which has more nodes but only some are in left and equal in right.
Because I am also using cy.fit() function to fit the graph in container but if I do that, the height of the container gets really big and fit function is putting the graph in the middle and there is lot of whitespace at the top. What would be the best solution for this scenario?
Example Code Link: https://stackblitz.com/edit/cytoscape-call-method-child-qm4acb?file=src%2Fapp%2Fapp.component.ts
In the example, I have added the height to be way more to show the example but is there a way for fit function to start the graph at the top of the container rather than in the middle?
I think you should pan manually with https://js.cytoscape.org/#cy.pan
I want to use some parking lot images of cars in Google's object detection API(https://github.com/tensorflow/models/tree/master/research/object_detection). The cars are usually not portrayed as a straight box but more of a box that is turned 45 degrees to either side, causing the x and y coordinates to lay in a diagonal line instead of straight line. Normally, just using a box would work but the cars are quite close to each other which is why I need to change it.
In the API they use ymin, ymax, xmin, xmax to draw the boxes for the objects in the images. So my question is, can I change it so the code does the calculations and draws the box out of the defined by 4 points in order to used an angled box? And if possible... how?
I want to draw the box like the one to the left.
Thanks in advance.
So I've been giving Cytoscape a try recently. My project's goal is basically a collaborative graph that people will be able to add/remove nodes to/from, making it grow in the process. The graph will include many compound nodes.
Most of the examples I've seen use container div that takes 100% of the screen space. This is fine for "controlled" graphs but won't work in my case because its size is intended to be dynamic.
Here's a JSFiddle using the circle layout within a fixed 3000px/3000px container:
https://jsfiddle.net/Jeto143/zj8ed82a/5/
Is there any way to have the container size be dynamic as opposed to stating it explicitly? Or do I have to compute the new optimal container size each time somehow, and then call cy.resize()?
edit: actually, using 100%/100% into cy.fit() might just work no matter how large the network is gonna be, so please ignore this question is this is the case.
Is there a recommended layout for displaying large/unknown amounts of data in a non-hierarchical way that would "smartly" place nodes (including compound ones) in the most efficient way possible, all the while avoiding any overlap? (I guess that's a lot to ask...)
Why doesn't cy.fit() seem to be working in my example? I'm using it both at graph initialization and when CTRL+clicking nodes (to show closed neighborhood), but it doesn't seem to like the 3000x3000px container (seems better with 100%x100%).
edit: also ignore this question if you ignored 1., as again it seems fine with 100%/100%.
Any help/suggestions would be greatly appreciated.
Thank you very much in advance.
TLDR: It's (1).
Cytoscape has a pannable viewport, like a map. You can define the dimensions of the viewport (div) in CSS. What's displayed in the viewport is a function of the positions of the nodes, the zoom level, and the pan level -- just like what is visible in a map's viewport is a function of zoom, pan, and positions of points of interest.
So either you have to
(a) rethink your UI in terms of zoom and pan and use those in-built facilities in Cytoscape, or
(b) disable zoom and pan in Cytoscape (probably stay at (0, 0) at zoom 1) and let the user scroll the page as you add content to the graph and resize its container div to accommodate the new content.
I would like to have edges that are straight with right angles, similar to the family tree layout mentioned here: Styling edges in Cytoscape.js for a Family Tree
I've also attached an image showing what I would like to achieve.
In the link above they mention hyperedges, and changing the curve-style to "segments". I've done that, but there are only 2 segments and they do not form a right angle. There are some attributes that can be set for the segments, but I have not figured out how to make them work. Any help would be appreciated.
You have to calculate the points where the lines should be bent and set the segment style properties appropriately.
If you want an alternative way of specifying bent edges, you could investigate zigzag edges: https://github.com/cytoscape/cytoscape.js/issues/882