TreeLayout

system · March 18, 2015, 10:58am

I have a treeLayout and all arrows point to their relevant children. Let’s say we have parent node that points to two different types of children, related and foster children. When they are foster children I want to treat them differently depending on the easiest implementation.

How do I implement placing the foster children in a group of the parent node instead of a child of the parent? Or If I can have a special port coming from specific location(top) of the parent node allocated for foster children only.

walter · March 18, 2015, 12:11pm

I don’t understand what you want. A sketch would help. Where did you want to place the foster children?

Actually, if you want to use different ports at the parent node for the different kinds of children, that’s pretty easy to arrange. You need to make sure there are actually two output ports on each parent node, and you need to bind the Link’s fromPortId to choose one port name or the other depending on the child node’s type.

What I was originally expecting you to ask for was sorting the children so that all of one type were first and all of the other type were last. You can do that by setting TreeLayout.sorting and TreeLayout.comparer.

system · March 18, 2015, 2:11pm

From the above screenshot, I would like the FOSTER nodes to expand from the top of the parent when clicked on. A second option would be to have a treeexpander inside of the parent that would expand the FOSTER children when clicked on. The CHILD nodes would remain the same.

function init(){

var $ = go.GraphObject.make;

window.onload = function() { appendStyle(styles) };

var div = document.createElement(“div”);
div.id = ‘cssStyle’;
div.innerHTML=‘style=“display: none; font: bold”’;
document.body.appendChild(div);

var myDiagram =
$(go.Diagram, “myDiagram”,

{ layout:
 $(go.TreeLayout,{ angle: 180, nodeSpacing: 10 })

});

var sngModel = $(go.TreeModel);

sngModel.nodeDataArray = [
{key: 0, name: “SOCIALNETWORK”, nodeType: “DEPLOYMENT”, parent:0},
{key: 1, name: “PARENT_A”, nodeType: “WINDOW”, parent: 0},
{key: 2, name: “CHILD_A”, nodeType: “TABLE”, parent: 1},
{key: 3, name: “FOSTER_A”, nodeType: “SCENARIO”, parent: 1},
{key: 4, name: “FOSTER_B”, nodeType: “SCENARIO”, parent: 1},
 {key: 5, name: “PARENT_B”, nodeType: “WINDOW”, parent: 0},
 {key: 6, name: “CHILD_A”, nodeType: “TABLE”,parent: 5},
{key: 7, name: “FOSTER_A”, nodeType: “SCENARIO”, parent: 5},
{key: 8, name: “PARENT_C”, nodeType: “WINDOW”, parent: 5},
 {key: 9, name: “CHILD_C”, nodeType: “TABLE”,parent: 8 },
{key: 10, name: “FOSTER_A”, nodeType: “SCENARIO”, parent: 8},
{key: 11, name: “FOSTER_B”, nodeType: “SCENARIO”, parent: 8},
 {key: 12, name: “FOSTER_C”, nodeType: “SCENARIO”,parent: 8}
];

myDiagram.model = sngModel;

function tooltipNameConverter(node) {
 return node.nodeType + ': ’ + node.name;}

function textStyle() {
 return{

font: “bold 8pt Helvetica, bold Arial, sans-serif”,
 alignment: go.Spot.Left,
 margin: 16,
 width: 145
 };
 }

function tooltipStyle() {
 return{

font: “bold 8pt Helvetica, bold Arial, sans-serif”,
 alignment: go.Spot.Left,
 margin: 16,
 width: 175
 };
 }

function nodeTypeBrushConverter(nodeType) {
 var returnColor = “#E8EBEE”;
 return returnColor;
 }

myDiagram.nodeTemplate =
 $(go.Node, “Auto”,
 { deletable: false},
 $(go.Shape, “RoundedRectangle”,
 {fill: “#E8EBEE”,
 stroke: “#99A2A7”,
 width: 175,
 height: 80
}, new go.Binding(“fill”, “nodeType”, nodeTypeBrushConverter)),
$(go.Picture,
 new go.Binding(“source”, “”, function (data) {
 var path = “images/”;
 var url = path + data.nodeType + “.png”;
 return url;
 }),
 {alignment: go.Spot.TopRight,
 width: 24,
 height: 24
}),
 $(go.TextBlock,
new go.Binding(“text”, “name”)
),

 <span ="Apple-tab-span" style="white-space:pre">	</span>$(go.Panel,

{ height: 15,
 alignment: go.Spot.Left,
 alignmentFocus: go.Spot.Center,
 },
 $(“TreeExpanderButton”)
)
 );

myDiagram.linkTemplate =
 $(go.Link, // the whole link panel
 $(go.Shape, // the link path shape
{ isPanelMain: true, stroke: “#99A2A7”, strokeWidth: 1 }),
$(go.Shape, // the arrowhead
{ fromArrow: “backward”, stroke: null, fill: “#99A2A7”}));

}
init();

system · March 18, 2015, 2:46pm

Could you point me to a simple example of using Link’s fromPortId to choose one port name or the other depending on the node type?

walter · March 18, 2015, 4:13pm

Well, I suppose the Decision Tree sample does that: Decision Tree. Each node has two output ports.

Note that if you want to expand/collapse different subtrees from a given node, you won’t be able to use a standard “TreeExpanderButton”. That’s why Decision Tree has to use a regular “Button” with a click event handler that uses the particular port to decide what to “collapse”.

But I suspect you could do something a lot simpler than what the Decision Tree sample does.

system · March 18, 2015, 4:28pm

I noticed that once I configure my own ‘Button’ to expand/collapse the subtrees does this mean I now must create my own linkDataArray because the ‘parent’ keyword in the nodeDataArray is not longer being used?

Can you give me any advice on recreating what ‘parent’ does for the nodeDataArray?

walter · March 18, 2015, 5:05pm

You’re using a TreeModel, not a GraphLinksModel, right? And you’d like to continue to do so? That’s OK. Notice that the “buttonExpandCollapse” function in the Decision Tree sample is passed a port element, so it knows which port’s links to follow.

system · March 18, 2015, 10:53pm

I’m trying to follow the Decision Tree example but getting lost with the reference to the GraphLinksModel and building of the linkDataArray.

I would like to continue using the TreeModel but I’m not clear how to use an additional port with the TreeModel.

Could you provide a simplified example? See the sketch above. I just desire to add a port at the top of the node for foster nodes.

var model =
      $(go.GraphLinksModel,
        { linkFromPortIdProperty: "fromport" });

<pre -="" =" hljs " style=“font-size: 9pt; padding: 0.5em; color: rgb230, 225, 220; line-height: normal; : rgb35, 35, 35;”><pre -="" =" hljs " style=“font-size: 9pt; padding: 0.5em; -: initial; -attachment: initial; -size: initial; -origin: initial; -clip: initial; -: initial; -repeat: initial;”>function makeLinks(model) {
var linkDataArray = [];
var nda = model.nodeDataArray;
for (var i = 0; i < nda.length; i++) {
var key = nda.key;
if (key === “Start” || key.length === 0) continue;
// e.g., if key==“INTJ”, we want: prefix=“INT” and letter=“J”
var prefix = key.slice(0, key.length-1);
var letter = key.charAt(key.length-1);
if (prefix.length === 0) prefix = “Start”;
var obj = { from: prefix, fromport: letter, to: key };
linkDataArray.push(obj);
}
model.linkDataArray = linkDataArray;
}

walter · March 19, 2015, 8:14am

OK, I copied the DOM Tree sample, HTML DOM Tree, and modified it so that each node has two buttons, each of which is a port. The top one is named “T” and the bottom one is named “B”. Each button’s click event handler calls a function to toggle the state of the subtree connecting with that port. I didn’t bother giving the buttons any content, so the buttons are empty looking, but they still work.

I changed the node data by adding an “element” property that keeps a reference to the HTML DOM element in the page that the diagram is displaying. That allowed the addition of a Binding in the Link template so that the “fromPortId” would be bound to “T” if the child node’s element is a “DIV” element and “B” otherwise. And I had the TreeLayout sort the children so that the “DIV” children would come first, i.e. on top.

Here’s just the code that was modified:

[code] myDiagram =
$(go.Diagram, “myDiagram”,
{
initialAutoScale: go.Diagram.UniformToFill,
// define the layout for the diagram
layout: $(go.TreeLayout,
{ nodeSpacing: 5, layerSpacing: 30,
sorting: go.TreeLayout.SortingAscending,
comparer: function(v, w) {
if (v.node.data.element.nodeName === “DIV”) return -1;
if (w.node.data.element.nodeName === “DIV”) return 1;
return 0;
}
}
)
});

// Define a simple node template consisting of text followed by an expand/collapse button
myDiagram.nodeTemplate =
  $(go.Node, <font color="#FF0000">"Vertical",</font>
    { selectionChanged: nodeSelectionChanged },  // this event handler is defined below
    <font color="#FF0000">{ defaultAlignment: go.Spot.Right },
    $("Button", { portId: "T", click: collapseExpand, width: 8, height: 8 }),</font>
    $(go.Panel, "Auto",
      $(go.Shape, { fill: "darkslategray", stroke: null }),
      $(go.TextBlock,
        { font: "bold 13px Helvetica, bold Arial, sans-serif",
          stroke: "white", margin: 3 },
        new go.Binding("text", "key"))
    ),
    <font color="#FF0000">$("Button", { portId: "B", click: collapseExpand, width: 8, height: 8 })</font>
  );

// Define a trivial link template with no arrowhead.
myDiagram.linkTemplate =
  $(go.Link,
    { selectable: false<font color="#FF0000">, fromPortId: "B"</font> },
   <font color="#FF0000"> new go.Binding("fromPortId", "element", function(e) { return e.nodeName === "DIV" ? "T" : "B"; }),</font>
    $(go.Shape));  // the link shape


var nodeDataArray = [];

// Walk the DOM, starting at document
function traverseDom(node, parentName) {
  // skip everything but HTML Elements
  if (!(node instanceof Element)) return;
  // Ignore the menu on the left of the page
  if (node.id === "menu") return;
  // add this node to the nodeDataArray
  var name = getName(node);
  var data = { key: name, name: name<font color="#FF0000">, element: node</font> };
  nodeDataArray.push(data);
  // add a link to its parent
  if (parentName !== null) {
    data.parent = parentName;
  }
  // find all children
  var l = node.childNodes.length;
  for (var i = 0; i < l; i++) {
    traverseDom(node.childNodes<em>, name);
  }
}[/code]

I have marked the added code in red.

system · March 19, 2015, 4:41pm

I am totally baffled how to control the location of the buttons. I tried placing the button inside the a PANEL type of Table but still cannot get a button to the topMiddle of a node that still expands. Any pointers?

var tooltipTemplate =
 $(go.Adornment, “Auto”,
 $(go.Shape, “Rectangle”,
 { fill: “#E8EBEE”, stroke: “#99A2A7” }),
 $(go.TextBlock,
 new go.Binding(“text”, “”, tooltipNameConverter))
 );
function nodeTypeBrushConverter(nodeType) {
var returnColor = “#E8EBEE”;
return returnColor;
}

myDiagram.nodeTemplate =
$(go.Node, “Horizontal”,
{ selectionChanged: nodeSelectionChanged },
{ defaultAlignment: go.Spot.Right,
fromSpot: go.Spot.RightSide,
toSpot: go.Spot.LeftSide},

             $("Button",
            { portId: "T",
              name: "ButtonA",
              alignment: go.Spot.Center,
              click: function (e, obj) { buttonExpandCollapse(obj); },
              toolTip: tooltipTemplate
            },
            new go.Binding("portId", "T"),
            $(go.TextBlock,
              new go.Binding("text", "aText"))
          ),  $(go.Panel, "Auto",
                    $(go.Shape, "RoundedRectangle",
                        {
                            fill: "#E8EBEE",
                            stroke: "#99A2A7",
                            /*portId: "", cursor: "pointer",*/
                            fromLinkable: false,
                            toLinkable: false,
                            width: 175,
                            height: 80
                        }) //end shape
                        ) ,// end  Panel
            $("Button",

{ portId: “B”,
 name: “ButtonB”,
 alignment: go.Spot.Center,

click: function (e, obj) { buttonExpandCollapse(obj); },
 toolTip: tooltipTemplate
 },
 new go.Binding(“portId”, “B”),
 $(go.TextBlock,
 new go.Binding(“text”, “bText”))
)

                        );//end go.Node

walter · March 19, 2015, 8:21pm

Well, the whole Node is a Horizontal Panel, so that means the elements are positioned from left to right. In this case it appears that the Button that is the “T” port will be on the left, followed by a TextBlock, followed by a Panel containing only one element, a RoundedRectangle Shape. Most panels only make sense when there are multiple elements in them.

I do recommend learning about panels at GoJS Panels -- Northwoods Software, and the following page about Table Panels.