How to layout breadthfirst with compound nodes in Cytoscape? - layout

I'm modifying the breadthfirst example on the Cytoscape site (the one with the cat at the top). When I create a new "predators" node and put cat and dog nodes in it, then change the edge that goes from cat to bird to now go from predators to bird, the layout gets completely messed up.
How can I use compound nodes with breadthfirst, or is there another layout I should be using? I don't want anything fancy, I just want the compound nodes to follow the same rules that a normal node follows.

I understand you want something simple, but the problem is that compound graphs are more complex than ordinary graphs.
A compound node does not have independent dimensions: http://js.cytoscape.org/#notation/compound-nodes
A layout has to take this into account and have a generic, customisable algorithm for placing the children such that the constraints for both the children and the parents are satisfied.
This doesn't fit with most layouts, and so only those layouts marked with explicit compound support will give you the results you're looking for. Ordinary layouts ignore compound nodes.
Typically, force-directed (physics simulation) layouts work best with compound graphs -- like Cola or Cose Bilkent. Tree-like layouts don't. There are too many cases where satisfying the layout rules for compound graphs would be impossible.
You can try Cola with the directionality constraint to make the result tree-like. Or you can write your own layout using the API if your compound graphs are simple enough and you can make enough assumptions about the topology of your graphs.

Related

position nodes in force layout graph vertically

I read a couple of posts on position nodes in force layout but didn't find an answer to what I was looking for.
I have an object with nodes and links.
I' trying to create a graph which would show all the nodes top to bottom.
I was looking at the example code from here:
https://github.com/danielstern/force-graph-example
Here's a screenshot of the result:
I'm trying to find a way to position each node so the nodes without parents would be on the top and the ones connecting to them would be under them and so forth.
Here's an image to illustrate it:
Right now, all the nodes are scattered randomly.
I wanted to if I need to actually calculate the position of each node in a vertical view or is there a smarter/built-in way to achieve it.
I looked at this example which looked promising:
How to organise node positions in D3 Force layout
But in my case I don't have a way to differentiate between nodes levels so I don't think the yPostion would help.
I was also looking at thes post:
d3.js - How can I expand force directed graph horizontally?
According to #Lars Kotthoff:
"The point of the force layout is to automatically lay out a graph like this so that you don't have to specify the positions of the nodes yourself".
Since my graph is not really a tree, I don't think the tree view would match.
What would be my best approach to position the nodes?
Or perhaps there's a better library to achieve what I need?
I found this package:
d3-dag
It basically supports what I need:
"Often data sets are hierarchical, but are not in a tree structure..."
Here's an exmaple:
exmaple

2D graph rendering algorithm supporting dynamically adding/removing nodes/edges

I've spent hours searching for an answer to this, but in most cases either the
question is about plots/charts (rather than graphs as in "control flow graph"),
or the answer "just use graphviz" is a valid answer.
However I have some constraints and requirements that make "just use graphviz" a
non-answer.
The full graph is large enough that it's not possible to generate a graphviz
for all of it.
Nodes and edges will be dynamically added and removed.
Nodes have lots of information that will be hidden by default and will be
expanded on request (imagine every node as a table with expandable rows/cols)
I want to be able to show only a subset of the graph on request, e.g. for
features like "only show reachable part of the graph from this node" or "show
all simple paths from this node to this node".
Basically I want to be able to start drawing nodes and edges on a 2D plane, and
add new nodes and edges dynamically. It's fine if nodes/edges move around as new
stuff is added. While I don't yet have hard requirements for this, it'd be good
if it looked "nice" -- for example if a node has lots of incoming edges (this is
a directed graph) ideally it'd be in a central place on the plane with all other
nodes around it etc.
Anything that gets me going would be helpful. Thanks.
(I don't know what label to add to this, adding "graph-theory" because I don't know what else to add)

Why is it usually easier to perform selection tests in object space?

I'm taking an introductory graphics course, and while I intuitively understand that converting a click or touch into object coordinates will make the math much cleaner, reduce the chances for human error, and potentially make debugging easier, none of these are actually a very good explanation, conceptually, of why object coordinate spaces are used in selection tests, as opposed to simply using world coordinates for the test - rather, they're just observations of what tends to happen when object coordinates are used. So I ask: why?
A selection test involves comparing the click coordinates, which you get in window coordinates, against lots and lots of object features, which are represented in object coordinates.
You need to transform them into the same coordinate system in order to do the checks, so you can EITHER transform the one simple click point OR you can transform all the various object features.
Transforming one point or line is just a lot easier that transforming a whole bunch of object features of various types.
There are cases where the location of a specific object or point may not be known within a world coordinate system, but is known relative to some other coordinate system.
To summarize an example from my course text, consider the idea of two different towns, one using a grid system for its layout, and the other using what I can only describe as the New England we-made-cow-trails-into-roads method. A government employee is tasked with creating a layout of the area which includes them, and in doing so has to convert the two coordinate systems into a third, which encompasses the other two.
Sometimes, using a world atlas just isn't practical to get across the street, and so something much more local (and relevant) is used instead, as it provides much more detail over a much smaller area.
The text also explains that it may be more than simply impractical to use a given coordinate system - it may yield results that are improbable or just plain wrong. This is evidenced in the evolution of the geocentric and heliocentric models of the universe - the distance of the stars from us was calculated with very different results using the two models.
Thinking of my own example, the best that comes to mind would be something like your own internal organs - from the outside, you don't know for sure exactly the shape, size, and structure of each of them, but your own body does. In order to be able to access that information, you need to look inside the body (ideally in a way that doesn't kill you). It's not something that is plainly observable from outside.

Union find in python3

I know how to implement union find in general, but I was thinking of whether there would be a way to utilize the set structure in python to achieve the same result.
For example, we can union sets pretty easily. But I'm not sure how to determine if two elements are in the same set using just sets.
So, I am wondering if there is a data structure in python that would support such operation, other than the usual implementation?
You could always solve this problem by visualizing it as a tree and its nodes connecting to each other via the root, and then looking up the tree if you want to know if two nodes are connected. If the two nodes you are comparing has the same root (they are in the same tree), than they are connected.
To connect two nodes, just go to the root of each tree they are in, and make one root become the parent of the other.
This video will give you a great intuition about it:
https://www.youtube.com/watch?v=YIFWCpquoS8&list=PLUX6FBiUa2g4YWs6HkkCpXL6ru02i7y3Q&index=1
The connection between the tree nodes can be made via pointers in a language which supports it, but if your language dont (python), than you can create your own pointers by storing positions and links via an array.
The array would be such that its positions would represent your nodes, and the values inside it represents the connection of the specific node to its root. On the beginning, the position in the array is filled with the node number because the nodes has initially no parent, but as you connect nodes, the roots changes, and the array has to represent this. Actually, the value stored there is the identificator of the root.
But try visualizing the problem visually first instead of thinking of arrays and too much mathematical artificats. Visually dealing with it makes the solution sound banal, and can be a good guidance while writing code.
I say this because I have watched the video from Robert Sedgewick I just posted, with a graphical simulation of the solution, and implemented myself without paying too much attention to the code on his book. The intuition the video gave me is much more valuable than any mathematics.
It will help you to encapsulate the nodes into a class, with the following methods:
climbTreeFromNodeUpToRoot
setNewParentToThisNodeAndUpdateHeights
The first method, as the name says, takes you from a node and goes up the tree until finding the root of it, which is then returned.
If you compare two nodes with this method (actually, the roots returned by it), you know easily if they are connected by just comparing their roots.
Once you want to connected them, you go up the trees of both nodes, and ask one root to take the other one as its parent.
The trees can grow very big in height (sorry I dont use the official nomeclature, but this is the one that makes sense to me), so this simple approach will get very slow when you have to climb the tree at a later time.
To prevent trees from becoming to high, dont just set one root as the parent to another without criterium, but attach the smallest tree (in terms of height, not quantity of elements) to the highest one.
For this, you need to know the heights of each tree, and this information you can store on their respective root (via an extra array in your case, or an extra pointer from each node in other languages). This information should be updated everytime another tree connects to it.
It is not possible for a tree to know that she just got a new tree attached to it, so its important that every tree attaching to a second one informs the second as to update its height.
This information can be sent to the root of the second tree, and later used to judge (as writen before) which tree is the smallest. Remember, attaching a small tree to a big one instead of the opposite will save you incredible amounts of time.
Do you want something like this?
myset = ...
all(elt in myset for elt in (a,b))

Monotouch treeview, expandableview or NSOutlineView

I want create a tree elements. For example, as this is figure
Can I use treeview, expandableview or NSOutlineView in monotouch?
Is there a tree of objects in monotouh?
There is no built-in or default control to represent a tree on iOS and frankly, you shouldn't really need one and most cases it should probably be avoided.
It's hard to fit a tree like control we have on our desktops in the touch world where you have huge fingers (so huge nodes) and with the nodes offset to show depth, there isn't much space left over. Adding it to the iOS environment would create a weird UX flow so you should re-think your design.
The common solution is to use tables with a detail accessory indicator and show a new controller the data (either a table or something else).
If you absolutely need one, you will need to roll your own. Check this for reference http://dotnet.kapenilattex.com/?p=566

Resources