SpaceTree for Visual FluidDB Queries

[orlin]

Greetings,

Starting an opensource web project to visualize FluidDB http://fluidinfo.com/fluiddb
queries http://blogs.fluidinfo.com/fluidDB/2009/09/10/the-myriad-benefits-of-a-simple-query-language/
- notice how the second diagram looks suspiciously like a
SpaceTree... Nico suggested its being a good fit and I'm getting sold
on the idea. What I'd like to accomplish is something similar to
http://www.martinfowler.com/articles/languageWorkbench.html with JIT /
SpaceTree being a projection editor (see Figure 2). Trying to
simultaneously understand how FluidDB queries can be visualized (see
this http://bit.ly/2dn9zM post), considering the grammar and also how
SpaceTree can be customized for the purpose. So, I have the following
questions for you:

* for left-oriented (also for right) trees: the width has to be the
same for all nodes?
* can node height vary - based on amount of text content?
* the “implementing node types” advanced demo - shows a spacetree with
varying node length… if those nodes had any children - would they have
to start at the same fixed position, or can it be relative to their
parents? in my use case, I plan to vary left-to-right tree nodes in
column increments, basically expanding nodes (without children) to
display their text as far as the end of the right-hand-side canvas
allows… it would save space as I plan to otherwise expand them
vertically so that the text is visible either way. is that possible?
* labelled / colored edges (e.g. based on a property of parent node) –
custom edge types?
* clicking on an already selected node, switches to multi-tree, hides
the ancestor / siblings, and adds a tree in the opposite direction
that is a menu for editing the node
* reordering of sibling nodes (drag & drop)?
* what if things don’t fit vertically – i.e. a sub-tree is too wide at
some branch? add scrollbar? dynamically resize canvas? detect and
dynamically adjust depth so that less levels (only immediate children)
are expanded?

JIT looks like an awesome library and I'm excited by the possibility
that it's applicable to this use case.

Orlin

[Nico Garcia Belmonte]

Hi,

> * for left-oriented (also for right) trees: the width has to be the
> same for all nodes?
> * can node height vary - based on amount of text content?

This was discussed in this thread and apparently worked fine:
http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/290cf12d062b055e

>
> * the “implementing node types” advanced demo - shows a spacetree with
> varying node length… if those nodes had any children - would they have
> to start at the same fixed position, or can it be relative to their
> parents? in my use case, I plan to vary left-to-right tree nodes in
> column increments, basically expanding nodes (without children) to
> display their text as far as the end of the right-hand-side canvas
> allows… it would save space as I plan to otherwise expand them
> vertically so that the text is visible either way. is that possible?

Currently there's not a built-in way of setting a node position
relative to their parents. All nodes' positions are relative to their
depth.
You can however set individually a node height and width, so if for
example you have leaf nodes you can adjust their height/width to
maximize their area. This is done by setting values to a JSON tree
node data $width and $height properties. I play with a ST nodes width
and height in this example:
http://thejit.org/Jit/Examples/Other/example1.html
for making a bar chart.

> * labelled / colored edges (e.g. based on a property of parent node) –
> custom edge types?

You can add an onBeforePlotLine(adj) controller method that changes an
edge color based on some node property, for example in the second
example of the Spacetree vis you have something like this:

    //This method is called right before plotting
    //an edge. It's useful for changing an individual edge
    //style properties before plotting it.
    //Edge data proprties prefixed with a dollar sign will
    //override the Edge global style properties.
    onBeforePlotLine: function(adj){
        if (adj.nodeFrom.selected && adj.nodeTo.selected) {
            adj.data.$color = "#eed";
            adj.data.$lineWidth = 3;
        }
        else {
            delete adj.data.$color;
            delete adj.data.$lineWidth;
        }
    }
});

See: http://thejit.org/Jit/Examples/Spacetree/example2.code.html

For labeled edges you probably need an custom EdgeType. This was
discussed in a previous thread:

http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/b08c83e842cb579f/

> * clicking on an already selected node, switches to multi-tree, hides
> the ancestor / siblings, and adds a tree in the opposite direction
> that is a menu for editing the node

Doable, though it isn't a built-in feature so you're going to have to
add some code here.

> * reordering of sibling nodes (drag & drop)?

Somebody did something like this, but it requires a some custom code.

> * what if things don’t fit vertically – i.e. a sub-tree is too wide at
> some branch? add scrollbar? dynamically resize canvas? detect and
> dynamically adjust depth so that less levels (only immediate children)
> are expanded?

That last thing is done actually. The tree calculates the width of the
levels to be expanded and adjusts the number of levels to be expanded
with that information. So the question here is: "what to do when I'm
forced to show one level and this level doesn't fit the screen", well,
the answer is I don't know yet. I guess you can draw a larger canvas
to be contained in an overflow:hidden div.

> JIT looks like an awesome library and I'm excited by the possibility
> that it's applicable to this use case.

Thanks :)

>
> Orlin
>
> >



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

Bertrand Russell