SpaceTree Multitree + Bezier Edges + Load JSON = sad edges

[fonji]

Hello everyone!

First of all, please note that this is a copy of the topic on google groups.
Sorry for the double post but the group is flooded with job seekers and my message seems to fit better here.

I have a bug with version 2.0.1 (current stable).
I use it to generate a multitree with bezier edges.
There's no problem when I use addSubtree after a user event, but there's one on loading JSON data.

If I have nodes on the right side of the root node, the edges will go straight from the left side of the root node to the right side of the children nodes.
It should be the opposite sides and bezier curves.
Oddly there's no problem with nodes on the left side.

Code to reproduce, based on multitree demo:

var labelType, useGradients, nativeTextSupport, animate;

(function() {
  var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
  //I'm setting this based on the fact that ExCanvas provides text support for IE
  //and that as of today iPhone/iPad current text support is lame
  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  nativeTextSupport = labelType == 'Native';
  useGradients = nativeCanvasSupport;
  animate = !(iStuff || !nativeCanvasSupport);
})();

var Log = {
  elem: false,
  write: function(text){
    if (!this.elem)
      this.elem = document.getElementById('log');
    this.elem.innerHTML = text;
    this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
  }
};

function init(){
    //init data
    var json = {
    "id":"643",
    "name":"Gangliosidose à GM1",
    "data":{"$orn":"right"},
    "children":[
      {"id":"13683",
       "name":"Maculopathie primaire ou secondaire non classifiée",
       "data":{"$orn":"right"},
       "children":[]},
      {"id":"13731",
       "name":"Maladie métabolique avec tâche maculaire rouge cerise",
       "data":{"$orn":"right"},
       "children":[]},
      {"id":"13709",
       "name":"Anomalie du système nerveux avec atteinte ophtalmologique",
       "data":{"$orn":"right"},
       "children":[]},
      {"id":"11283",
       "name":"Gangliosidose à GM1 type 3",
       "data":{"$orn":"left"},
       "children":[]},
      {"id":"11282",
       "name":"Gangliosidose à GM1 type 2",
       "data":{"$orn":"left"},
       "children":[]},
      {"id":"11281",
       "name":"Gangliosidose à GM1 type 1",
       "data":{"$orn":"left"},
       "children":[]}
      ]
    };

    //end
    //grab radio button
    var normal = $jit.id('s-normal');
    //init Spacetree
    //Create a new ST instance
    var st = new $jit.ST({
        //id of viz container element
        injectInto: 'infovis',
        //multitree
          multitree: true,
        //set duration for the animation
        duration: 800,
        //set animation transition type
        transition: $jit.Trans.Quart.easeInOut,
        //set distance between node and its children
        levelDistance: 40,
        //sibling and subtrees offsets
        siblingOffset: 3,
        subtreeOffset: 3,
        //set node and edge styles
        //set overridable=true for styling individual
        //nodes or edges
        Node: {
            height: 30,
            width: 120,
            autoHeight: true,
            color: '#CBEDFF',
            overridable: true,
            CanvasStyles: {
              shadowColor: '#e5e5ff',
              shadowBlur: 8
            }
        },
        Edge: {
            type: 'bezier',
            color: '#65B8EE',
            overridable: true
        },

        onBeforeCompute: function(node){
            Log.write("loading " + node.name);
        },

        onAfterCompute: function(){
            Log.write("done");
        },

        //This method is called on DOM label creation.
      //Use this method to add event handlers and styles to
      //your node.
      onCreateLabel: function(label, node){
        label.id = node.id;           
        label.innerHTML = node.name;

        label.onclick = function(){
          manageClick(node);
        };
        var style = label.style;
        style.width = 120 + 'px';
        style.cursor = 'pointer';
        style.color = '#333';
        style.textAlign= 'center';
        if (node.selected) {
          style.color = '#fff';
        }
      },

      onPlaceLabel: function(label, node){
        if (node.selected) {
          var style = label.style;
          style.color = '#fff';
        }
      },

      //This method is called right before plotting
      //a node. It's useful for changing an individual node
      //style properties before plotting it.
      //The data properties prefixed with a dollar
      //sign will override the global node style properties.
      onBeforePlotNode: function(node){
        if (node.selected) {
          node.data.$color = "#3399DD";
        }
      },

      //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){
      }
    });
    //load json data
    st.loadJSON(json);
    //compute node positions and layout
    st.compute('end');
    st.select(st.root);
    //end
}

Did I do something wrong?
Do not hesitate to ask if you need more information.
Thanks for your time and attention!
Yannick

[faheemullah]

How to create this whole JSON this one dynamically from database data??

[fonji]

I'm not sure how deep should I go to explain this but basically:

• create a webservice server-side that gives you enough data (whole tree or just one node with the related nodes IDs, it's yours to decide. Depends mostly on your application)
• create a javascript application (I use backbone.marionette, choose your own)
• use the js app to request the webservice and get the data
• build a function that returns a node's data object (id, name, data and empty children array)
• use that function in another one to build the whole json structure, filling the children arrays correctly
• pass the result to loadJSON to create the tree or to addSubTree if it already exists.

If you need more details, I think you should ask google, open a thread on the google group, ask a stack overflow question or something like that.
This issue should stay focused on the problem (edges are incorrectly drawn) and not become some kind of tutorial.
Good luck!

[DrZeiss]

I'm encountering this issue too!
Has there been any update on this issue? (or a workaround?)

[fonji]

I'm not aware of a workaround or anything done, sadly. My trees are just ugly on page load.
Please let me know if you find something!