Hi
sorry for late reply
Actually we are creating Step Plan tool
So we have two different display for chart
One is where user search in diagram to find his specific part of chart to create Step Plan.
First i am trying to describe this one where user search in diagram.
Json we build from data base.
{
"class": "go.GraphLinksModel",
"nodeDataArray": [
{
"key":1,
"name":"Company one",
"color":"lightblue",
"visible":true,
"category": "circle",
"entity_Type": "branch_trust",
"internal_id": 250,
"color": "#A00176",
"short_name": "C Company" ,
"entity_code": "CCOM",
"sbu": "ABC",
"business_chain": "Sahdy",
"nodePath": "/node/conmpany_one",
}
],
"linkDataArray": [
{
'from': 1,
'to': 2,
'frompid': 'parent port',
'topid': 'child port',
'category': 'flow',
'visible': FALSE,
'percent': 05.00%",
'internal_id': 1,
'parent_find': false,
'child_find": false
}
]
}
By default when i load all data in diagram all nodeData and link data is = false
my data loading into model
myDiagram.model = // this only holds nodes that should be in the viewport
$(go.GraphLinksModel); // must match the model, above
myDiagram.model.linkFromPortIdProperty= "frompid";
myDiagram.model.linkToPortIdProperty = "topid";
myDiagram.delayInitialization(load);
in load function
myDiagram.model.linkDataArray = rawJson.linkDataArray;
myDiagram.model.nodeDataArray = rawJson.nodeDataArray;
myDiagram.layout.isOngoing = false;
so we load all 1400 nodes and links in modal with visible = false;
and chart area display a text message “Please select ‘Business Chain’ or ‘Entity’ to create a chart first.”
Now user can search by multiple select options options are Business chains business chain is set as attribute in our nodeData like in above example “business_chain”: “Sahdy”
so user is able to pickup one or two business chains (two is the max limit to select) to create a chart or one more option list where user can select single entity or node.
After selection if you select business chain one or two we have to find all nodes with the selected business chain
for example we got 100 node with the selected business chain now we have to find all 100 node’s full tree top to bottom
so we have to run a loop on 100 nodes and find parent and child for each node
so i have implement a recursive function to find parent and child.
CODE:
/*
* Get parents functionality
* @pram
* $slectedNode graph node object
* find parents for $slectedNode and make them visible
*/
function getParents(selectedNode) {
var model = myDiagram.model;
// all model changes should happen in a transaction
var key = selectedNode.key;
var result = model.linkDataArray.filter(function(obj) {
return obj.to === key;
});
//console.log(key);
if(result.length){
for(var i = 0; i < result.length; i++){
if(!result[i].visible && !result.parent_find){
var parent = model.findNodeDataForKey(result[i].from);
if(parent){
model.setDataProperty(result[i], "visible", true);
model.setDataProperty(result[i], "parent_find", true);
model.setDataProperty(parent, "visible", true);
//setTimeout(function(){
getParents(parent);
//},100);
}
}
}
}
}
/*
* Get childerns functionality
* @pram
* $slectedNode graph node object
* find childrens for $slectedNode and make them visible
* find child's parents and childrens and make them visible
*/
function getChildrens(selectedNode){
var model = myDiagram.model;
// all model changes should happen in a transaction
myDiagram.startTransaction("updateNode");
var key = selectedNode.key;
var result = model.linkDataArray.filter(function(obj) {
return obj.from === key;
});
if(result.length){
for(var i = 0; i < result.length; i++){
if(!result[i].visible && !result.child_find){
child = model.findNodeDataForKey(result[i].to);
if(child){
model.setDataProperty(result[i], "visible", true);
model.setDataProperty(result[i], "child_find", true);
model.setDataProperty(child, "visible", true);
//setTimeout(function(){
getChildrens(child);
//},100)
}
}
}
}
myDiagram.commitTransaction("updateNode");
}
in these functions we set visibility true for node and links we set some extra attributes like “child_find” and “parent_find” to avoid to many recursive calls error mean if you find childs from one path we set it as child_find = ture mean no need to on this path once again.
when all are done all required nodes and links are set to visible = true now we are going to layout
myDiagram.remove(myLoading);
myDiagram.initialDocumentSpot= go.Spot.TopCenter,
myDiagram.initialViewportSpot= go.Spot.TopCenter,
myDiagram.layoutDiagram(true);
At this stage our biggest search has 900 node to visible and when you search biggest one layout take 59sc to layout.
Because of we are search in diagram we are not able to store node locations.
After when user search is done user have to save this chart which is visible right now.
so we get all visible nodes and links and create new json and store in data base to display users saved step plan
when we display step plan we load json in model all things are visible
now user can add transaction between companies.
Hope this make help you to understand my code and work flow
THANKS
