MultiTree support

[Jack Fox]

I just discovered Jit. I'm most interested in MultiTree support and
look forward to Nicolas implementing support for MultiTrees. Until
then, any advice on which examples I should study in anticipation of
MultiTree support?

[Nico Garcia Belmonte]

Hi

Version 1.1.3 comes with basic multitree support:

http://blog.thejit.org/2009/08/24/version-113/#spacetree-multitree

At github.com/philogb/jit you can find an exmaple of multitrees for the Spacetree. It's almost identical than the first Spacetree demo:

http://thejit.org/Jit/Examples/Spacetree/example1.html

But with a couple of changes. You can see the source for the multitree example here:

http://github.com/philogb/jit/blob/79d419c81cf259a1d0dbf84dee962fff69b0d917/Tests/Spacetree/test10.js#L738

Best,

--
I would never die for my beliefs because I might be wrong.

Bertrand Russell

[Jack Fox]

There seems to be a problem with the lastest zip file jit-1.1.3.zip.
The same examples that work on the website throw this error

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/
4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR
3.5.30729; .NET CLR 3.0.30729; InfoPath.2; OfficeLiveConnector.1.4;
OfficeLivePatch.1.3)
Timestamp: Fri, 28 Aug 2009 02:23:48 UTC


Message: Invalid character
Line: 1
Char: 1
Code: 0
URI: file:///C:/Users/Jack/Desktop/Extras/excanvas.js


Message: Invalid character
Line: 1
Char: 1
Code: 0
URI: file:///C:/Users/Jack/Desktop/jit.js


Message: 'Canvas' is undefined
Line: 384
Char: 5
Code: 0
URI: file:///C:/Users/Jack/Desktop/Jit/RGraph/example1.js

I've tried on both an XP and a Vist machine, with both IE8 and FireFox
3.5. I did get some odd encryption errors when unzipping. Never saw
those before.

On Aug 27, 1:45 pm, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> Hi
>
> Version 1.1.3 comes with basic multitree support:
>
> http://blog.thejit.org/2009/08/24/version-113/#spacetree-multitree
>
> At github.com/philogb/jit you can find an exmaple of multitrees for the
> Spacetree. It's almost identical than the first Spacetree demo:
>
> http://thejit.org/Jit/Examples/Spacetree/example1.html
>
> But with a couple of changes. You can see the source for the multitree
> example here:
>

> http://github.com/philogb/jit/blob/79d419c81cf259a1d0dbf84dee962fff69...
>
> Best,

[Nico Garcia Belmonte]

Wow this was like the most incredible bug I've ever seen.
I normally zip the file by hand, since I check that the "build" is coherent and all the examples work well.
This is the first time I'm using a mac to build the project.
When zipping by hand (using the UI) the Examples folder disappears and all its subfolders go up next to the root Jit folder: Jit/Hypertree, Jit/Other, Jit/css, Jit/Spacetree, Jit/Treemap, etc.

I already fix this. Please be sure to check that the version you're downloading is not cached by the browser, you will notice an Examples folder at the root of the library, Jit/Examples.

Thanks a lot for the heads up.

[Jack Fox]

Thank you. I ran a quick check of spacetree example 1, and it works. I
hope to find time to run investigations on the multitree in the next
few days.

> Bertrand Russell- Hide quoted text -
>
> - Show quoted text -

[Jack Fox]

I am able to get MultiTree working nicely with the code at

http://github.com/philogb/jit/blob/79d419c81cf259a1d0dbf84dee962fff69b0d917/Tests/Spacetree/test10.js#L738

by changing

onCreateLabel: function(label, node) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function() {
//st.onClick(node.id);
st.setRoot(node.id, 'animate');
};

to

onCreateLabel: function(label, node) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function() {
st.onClick(node.id);
//st.setRoot(node.id, 'animate');
};

I am now able to effectively add nodes to the path. :)

Can I add nodes on paths through multiple trees at the same time,
effectively a multitree subset of the larger multitree? I tried using
st.addNodeInPath(node.id) instead of st.onClick(node.id) above, but
that doesn't seem to do it.

Second request, I am not great at JS, but I guess I could create a
canvas wide enough to accommodate the longest path from left to right
and then make the div scroll horizontally (re-centering on the last
selected node might be tricky), or perhaps change the canvas width on
the fly. Is there a simple way to calculate how wide it should be? I
need to discover the longest path. So I'll have to brush up on
directed graphs (and read more of your documentation).

thanks

[Nico Garcia Belmonte]

Hi,

Can I add nodes on paths through multiple trees at the same time,
effectively a multitree subset of the larger multitree? I tried using
st.addNodeInPath(node.id) instead of st.onClick(node.id) above, but
that doesn't seem to do it.

st.addNodeInPath adds a node to the "selected path" without performing an animation.
For example, in the example you're using if you add this after plotting the SpaceTree:

st.addNodeInPath('node13');
st.addNodeInPath('node165');
st.addNodeInPath('node125');

Three nodes should be added in the path. If you wanted to add this functionality when a node is clicked and still be able to perform an animation for that node then you could do something like this:

domElement.onclick = function() {
   //perform the on click animation
   st.onClick(node.id, {
    //when complete set other nodes selected
    onComplete: function() {
      st.addNodeInPath('someotherid');
      st.addNodeInPath('yetanotherid');
   }
  });
}
 

Second request, I am not great at JS, but I guess I could create a
canvas wide enough to accommodate the longest path from left to right
and then make the div scroll horizontally (re-centering on the last
selected node might be tricky), or perhaps change the canvas width on
the fly. Is there a simple way to calculate how wide it should be? I
need to discover the longest path. So I'll have to brush up on
directed graphs (and read more of your documentation).

The best way of doing this would be to inject your canvas element into a div that has as css properties
width: 'somewidth'
overflow: auto

which means that a scrollbar will be shown if the canvas widget that's inside exceeds its parent div element.
Then you could instanciate a canvas widget and a ST just like in the example, and here's the code you could add to know a priori the total width of the tree:

var leftWidth = -1, rightWidth = -1;
Graph.Util.eachNode(st.graph, function(node) {
  var data = node.data, depth = node._depth;
  if('$orn' in data) {
     if(data.$orn == 'left') {
       leftWidth = depth > leftWidth? depth : leftWidth;
     } else if(data.$orn == 'right') {
       rightWidth = depth > rightWidth? depth : rightWidth;
     }
   }
});

var config = st.config;
var totalWidth = (leftWidth + rightWidth + 1)
    * (config.levelDistance + config.Node.width);


Then you could call something like cavas resize:

http://thejit.org/docs/files/Canvas-js.html#Canvas.resize

You should also put "contrained=false" as configuration property for the ST if you want to plot the entire Spacetree. If you want to know more about these configuration properties please check this part of the documentation:

http://thejit.org/docs/files/Spacetree-js.html#ST
 

[Jack Fox]

Hi Nico!

I'm slowly making progress understanding Jit and MultiTrees, but I
have a question about the example JSON for the MultiTree. Isn't this
just a SpaceTree with the root spatially orientend in the middle? When
I progress beyond my current ignorance I want to be able to work with
MultiTrees that have no single root element. I foresee there may be
difficulty defining such a structure in the JSON supported by Jit.
What I need to work with are arbitrary directed graphs (from left to
right) with an arbitrary number of starting nodes on the left and an
arbitrary number of end nodes on the right (count of start nodes <=
count of end nodes) and arbitrary directed edges in between (never
visiting the same node twice), the number of edges on arbitrary paths
from beginning to end not necessarily equal. Then I would like to
define multiple paths from start nodes on the left, not necessarily
continuing all the way to an end node.

Thanks.

[Nico Garcia Belmonte]

Hi Jack,

I think this is not possible with the SpaceTree visualization.
More generally, I think that besides the special case of the MultiTree (which will be in following versions extendable to the case of MultiTrees with multiple roots as can be seen in the last image of the paper here

http://www.si.umich.edu/~furnas/Papers/MultiTrees.pdf

)

the spacetree will (for the 1.1 series at least) only support trees.

I'm sorry :(