Random stopped responding error

orlando15767 · July 30, 2014, 10:43am

occasionally i receive the following error when performing operations w/in the diagram:
“A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.
go-debug.js:964”

if i press the continue button that the browser prompts me w/ it finishes what was being done eventually.

it’s very random when it happens, sometimes when it loads other times when expanding/collapsing all nodes, etc… there isn’t a specific action that causes it.

we have currently 1059 nodes and will eventually have over 2000 nodes

any ideas as to the cause of this or what this error is in reference to?

walter · July 30, 2014, 11:26am

What kind of layout(s) are you using?

Chances are that they are taking a long time to run. At the moment there is no good solution that is universally applicable. However if you do not need to perform layouts as you are expanding or collapsing trees or groups, you could avoid layouts by setting Part.layoutConditions to a combination of Part.Layout… flags that suits your application, on each Node and each Link template that you are using.

orlando15767 · July 30, 2014, 11:31am

the layouts that i’m using are:
treeStyle: go.TreeLayout.StyleLastParents,
arrangement: go.TreeLayout.ArrangementVertical

walter · July 30, 2014, 1:17pm

Oh. TreeLayout is very fast, so I do not think that would be causing the long-running computation that the browser is complaining about.

So I cannot provide a good explanation of why your app is getting that warning. I hope you are not loading the data from the server synchronously.

If you profile your app, where is the time being spent?

orlando15767 · July 30, 2014, 2:09pm

when profiling the app the script blows up switching into edit mode:
code is:
myDiagram.startTransaction(“changeEditTemplate”);
myDiagram.nodeTemplate = editTemplate;
myDiagram.rebuildParts();
myDiagram.commitTransaction(“changeEditTemplate”);

edit template is:
var editTemplate =
GO(go.Node, “Spot”,
//Drag-N-Drop additions
{ mouseDragEnter: function (e, node, prev) {
var diagram = node.diagram;
var selnode = diagram.selection.first();
var shape = node.findObject(“SHAPE”);
if(shape){
shape._prevFill = shape.fill; //set the original color
if(shape.fill === “#999999”){ //if gray, change to white
shape.fill = “#FFFFFF”;
} else { //else if white, change to gray
shape.fill = “#999999”;
}
}
},
mouseDragLeave: function (e, node, next) {
var shape = node.findObject(“SHAPE”);
if(shape && shape._prevFill){//set back to the original color
shape.fill = shape._prevFill;
}
},
mouseDrop: function (e, node) {
var diagram = node.diagram;
var selnode = diagram.selection.first();
if (isParentChangeAllowed(selnode, node)){ //if changing parent and is allowed
var link = selnode.findTreeParentLink();
if(link !== null){
link.fromNode = node;
} else {
diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port);
}
}
}
},
{ selectionObjectName: “PANEL”, isTreeExpanded: false,
contextMenu: //defines the context menu
GO(go.Adornment, “Auto”,
new go.Binding(“visible”, “showDetails”, Boolean),//binds to showDetails or not
GO(go.Shape, “RoundedRectangle”, { fill: “#F2ED84” }),//end shape
GO(go.Panel, “Table”,
{ maxSize: new go.Size(243, 999),
margin: new go.Margin(3, 3, 0, 3),
defaultAlignment: go.Spot.Center },
GO(go.RowColumnDefinition, { column: 0, width: 24}),
GO(go.RowColumnDefinition, { column: 1, width: 10}),
GO(go.RowColumnDefinition, { column: 2, width: 14}),
GO(go.RowColumnDefinition, { column: 3, width: 10}),
GO(go.RowColumnDefinition, { column: 4, width: 14}),
GO(go.RowColumnDefinition, { column: 5, width: 10}),
GO(go.RowColumnDefinition, { column: 6, width: 14}),
GO(go.RowColumnDefinition, { column: 7, width: 10}),
GO(go.RowColumnDefinition, { column: 8, width: 14}),
GO(go.RowColumnDefinition, { column: 9, width: 10}),
GO(go.RowColumnDefinition, { column: 10, width: 14}),
GO(go.RowColumnDefinition, { column: 11, width: 10}),
GO(go.RowColumnDefinition, { column: 12, width: 14}),
GO(go.RowColumnDefinition, { column: 13, width: 75}),
GO(go.TextBlock, “YQN”,
{ row: 0, column: 0, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, " | ",
{ row: 0, column: 1, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, “C”,
{ row: 0, column: 2, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, " | ",
{ row: 0, column: 3, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, “A”,
{ row: 0, column: 4, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, " | ",
{ row: 0, column: 5, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, “P”,
{ row: 0, column: 6, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, " | ",
{ row: 0, column: 7, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, “S”,
{ row: 0, column: 8, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, " | ",
{ row: 0, column: 9, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, “R”,
{ row: 0, column: 10, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, " | ",
{ row: 0, column: 11, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
GO(go.TextBlock, “T”,
{ row: 0, column: 12, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),
//start of data binding for Level values
GO(go.Picture, { row: 1, column: 0, alignment: go.Spot.Center},
new go.Binding(“source”, “YQN”, convertLevelPictureSource)),//YQN
GO(go.TextBlock, “|”,{ row:1, column: 1, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),//SPACER
GO(go.Picture, { row: 1, column: 2, alignment: go.Spot.Center},
new go.Binding(“source”, “C”, convertLevelPictureSource)),//C
GO(go.TextBlock, “|”,{ row:1, column: 3, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),//SPACER
GO(go.Picture, { row: 1, column: 4, alignment: go.Spot.Center},
new go.Binding(“source”, “A”, convertLevelPictureSource)),//A
GO(go.TextBlock, “|”,{ row:1, column: 5, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),//SPACER
GO(go.Picture, { row: 1, column: 6, alignment: go.Spot.Center},
new go.Binding(“source”, “P”, convertLevelPictureSource)),//P
GO(go.TextBlock, “|”,{ row:1, column: 7, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),//SPACER
GO(go.Picture, { row: 1, column: 8, alignment: go.Spot.Center},
new go.Binding(“source”, “S”, convertLevelPictureSource)),//S
GO(go.TextBlock, “|”,{ row:1, column: 9, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),//SPACER
GO(go.Picture, { row: 1, column: 10, alignment: go.Spot.Center},
new go.Binding(“source”, “R”, convertLevelPictureSource)),//R
GO(go.TextBlock, “|”,{ row:1, column: 11, font: “9pt sans-serif”, stroke: “black”, textAlign: “center” }),//SPACER
GO(go.Picture, { row: 1, column: 12, alignment: go.Spot.Center},
new go.Binding(“source”, “T”, convertLevelPictureSource)),//T
//BLANK ROW
GO(go.TextBlock, “”,
{ row: 2, column: 0, columnSpan: 13, font: “italic 9pt sans-serif”, stroke: “black”, minSize: new go.Size(10,14)}),
//COMMANDER OVERRIDE
GO(go.TextBlock, “Commander Override:”, //override
{ row: 3, column: 0, columnSpan: 10, font: “italic 9pt sans-serif”, stroke: “black”, textAlign: “left”, visible: false},
new go.Binding(“visible”, “overRideColor”, convertShowOverride)),
GO(go.Picture, { row: 3, column: 12, visible: false},
new go.Binding(“source”, “overRideLevel”, convertLevelPictureSource),
new go.Binding(“visible”, “overRideColor”, convertShowOverride)),
//BLANK ROW
GO(go.TextBlock, “”,
{ row: 4, column: 0, columnSpan: 13, font: “italic 9pt sans-serif”, stroke: “black”, minSize: new go.Size(10,14)}),
//LOCATION
GO(go.TextBlock, "Pres Loc: ", //location
{ row: 5, column: 0, columnSpan: 4, font: “italic 9pt sans-serif”, stroke: “black”, textAlign: “left”, minSize: new go.Size(10,14)}),
GO(go.TextBlock,
{ row: 5, column: 4, columnSpan: 10, font: “italic 9pt sans-serif”, stroke: “black”, minSize: new go.Size(10,14)},
new go.Binding(“text”, “locationName”)),
//BLANK ROW
GO(go.TextBlock, “”,
{ row: 6, column: 0, columnSpan: 13, font: “italic 9pt sans-serif”, stroke: “black”, minSize: new go.Size(10,14)}),
//REPORT DATE
GO(go.TextBlock, “Report Date:”,
{ row: 7, column: 0, columnSpan: 5, font: “italic 9pt sans-serif”, stroke: “black”, textAlign: “left”, minSize: new go.Size(10, 14) }),//end report date
//REPORT DATE BUTTON
GO(“ContextMenuButton”, { row: 7, column:7, columnSpan: 7},
GO(go.TextBlock,{ row: 7, column:7, columnSpan: 7, click : function(e, obj) {
window.open(obj.part.data.reportLink,’_blank’,‘width=600,height=600’);}},
new go.Binding(“text”, “reportDate”)))//end view report button
)//end panel
)//end context menu
},// end node properties
new go.Binding(“isTreeExpanded”,“everExpanded”).makeTwoWay(),
GO(go.Panel, “Auto”,
{ name: “PANEL” },
GO(go.Shape, “RoundedRectangle”,
{ name: “SHAPE1”, fill: “transparent”, stroke: “black”, strokeWidth: .5, visible: false},
new go.Binding(“visible”, “overRideColor”, convertShowOverride)//set whether to display the extra border or not
), //end SHAPE1
GO(go.Panel, “Auto”,
{ name: “PANEL2” },
GO(go.Shape, “RoundedRectangle”,
{ name: “SHAPE”, fill: graygrad, stroke: “black”, portId: “”, cursor: “pointer” },
new go.Binding(“fill”,“color”), //set the node color
new go.Binding(“stroke”, “overRideColor”, convertOverrideBorderColor), //set the overrideLevel border color
new go.Binding(“strokeWidth”, “overRideColor”, convertOverrideBorderWidth) //set the overrideLevel border width
),//end shape
GO(go.Panel, “Table”, //panel where the text will reside
//define rows and margin sizes
{ name: “TextPanel”, maxSize: new go.Size(500, 999), margin: new go.Margin(3, 3, 0, 3), defaultAlignment: go.Spot.Left},
GO(go.RowColumnDefinition, { column: 2, width: 4 }),
GO(go.TextBlock, //name
{ row: 0, column: 0, columnSpan: 2, font: “bold 10pt sans-serif”, stroke: “black”, minSize: new go.Size(10, 14) },
new go.Binding(“text”, “name”), new go.Binding(“stroke”, “color”, function(v) {if (v == “#008000” || v == “#FF3300”|| v == “#0066FF”){ return “white”;} else {return “black”;}} )), //end name
GO(go.TextBlock, "UICC: ",//UIC
{row:1,column:0, font: “bold 9pt sans-serif”, textAlign: “center”, stroke: “black”}, new go.Binding(“stroke”, “color”, function(v) {if (v == “#008000” || v == “#FF3300”|| v == “#0066FF”){ return “white”;} else {return “black”;}} )),
GO(go.TextBlock,
{ row:1, column: 1, font: “9pt sans-serif”, stroke: “black”, margin:(0,0,0,5)},
new go.Binding(“text”, “uic”), new go.Binding(“stroke”, “color”, function(v) {if (v == “#008000” || v == “#FF3300”|| v == “#0066FF”){ return “white”;} else {return “black”;}} ))//end UIC
) // end TextPanel Panel
)// end PANEL2 Panel
),//end PANEL Panel
GO(“TreeExpanderButton”, {
alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top,
click: function(e,obj){
var node = obj.part;
if (node === null) return;
e.handled = true;
var data = node.data;
var model = myDiagram.model;
myDiagram.startTransaction(“updateEverExpanded”);
if(data.everExpanded == false){
model.setDataProperty(data, “everExpanded”, true);
var children = node.findTreeChildrenNodes();
if(children.count === 0){
obj.visible = false;
}
}else{
model.setDataProperty(data, “everExpanded”, false);
}
myDiagram.commitTransaction(“updateEverExpanded”);
save();
}//end function
})//end expander button
); // end editTemplate

below is the top 10 results from the profile trace:

U.prototype.cloneProtected	10524	7.32%	4677.856ms	6634.99ms	0.63ms	0.271ms	3145.793ms	go-debug.js (line 926)
U	10524	6.19%	3954.418ms	5753.082ms	0.547ms	0.304ms	1971.307ms	go-debug.js (line 924)
nh	1305	5.28%	3373.625ms	46869.222ms	35.915ms	1.844ms	2988.359ms	go-debug.js (line 942)
U.prototype.ma	3949	3.7%	2366.901ms	2721.213ms	0.689ms	0.029ms	2208.348ms	go-debug.js (line 967)
U.prototype.fa	14103	1.68%	1076.362ms	7679.243ms	0.545ms	0.027ms	6.392ms	go-debug.js (line 965)
C.prototype.Qb	877	1.66%	1057.8ms	14210.332ms	16.203ms	12.22ms	2210.259ms	go-debug.js (line 1136)
Nd.prototype.cF	7425	1.49%	950.344ms	4229.712ms	0.57ms	0.349ms	2.209ms	go-debug.js (line 417)
undefined	73762	1.4%	896.548ms	896.548ms	0.012ms	0.009ms	105.111ms	go-debug.js (line 971)
u.prototype.bd	7424	1.39%	885.096ms	7334.801ms	0.988ms	0.844ms	64.218ms	go-debug.js (line 784)
C.prototype.se	16654	1.32%	842.418ms	2669.129ms	0.16ms	0.047ms	105.693ms	go-debug.js (line 1107)

walter · July 30, 2014, 2:34pm

What is your link template? If you are using go.Link.AvoidsNodes, try using go.Link.Orthogonal instead.

orlando15767 · July 30, 2014, 2:46pm

myDiagram.linkTemplate =
    GO(go.Link, go.Link.Orthogonal,
        { corner: 5, relinkableFrom: true, relinkableTo: true },
        GO(go.Shape, { strokeWidth: 2 })
    );

walter · July 30, 2014, 3:56pm

I cannot explain it – loading or modifying a 2000 node Diagram that uses TreeLayout shouldn’t take long at all. A few seconds at most.

Are there any messages in the console log? Also, try using go.js instead of go-debug.js.