GoJS Diagram Fails to Initialize when myDiagram Div is Nested in an Angular Layout Row

I noticed after modifying my HTML where my Go diagram lives, I was receiving many “Change not within a transaction” errors and the diagram never “initialized” with GoJS functionality. Below are some of the initial errors:

Change not within a transaction: !mChangedEvent.Insert nodeDataArray:  GraphLinksModel  new: node3 0
go-debug.js:34 Change not within a transaction: !dChangedEvent.Insert parts: Layer ""  new: Node#1141(node3 ) 0
go-debug.js:34 Change not within a transaction: !d data: Node#1141(node3 )  new: node3 
Change not within a transaction: !d element: Picture(https://demo1-icommand.demo1.aisdev.com/Symbology/Cyber/Monitor_green.png)#1144  new: 
go-debug.js:34 Change not within a transaction: !d source: Picture([symbolpath])#1144  old:   new: symbolpath
go-debug.js:34 Change not within a transaction: !d background: Picture(symbolpath)#1144  old: white  new: #FFFFFF
go-debug.js:34 Change not within a transaction: !d text: node3 old: Default Text  new: node3

These and more spew out it seems for each node I attempt to add, there are also similar errors .

Below is a snippet of my HTML containing the GoJS diagram div. I’ve tracked the culprit of the errors (although I do not know why this is so) down to a layout=“row” tag in the parent div. That is, this works:

          <div id="myDiagramDiv"
                  style="width:auto; height:600px; background-color: #DAE4E4;">

while this does not work:

    <div layout="row"layout-align="start center">
          <div id="myDiagramDiv"
                  style="width:auto; height:600px; background-color: #DAE4E4;">

I assume there is some underlying GoJS rule I’m breaking, but the direct cause I’ve found for all my errors is the inclusion of the layout=“row” in the parent div. For context, I am wanting to add an adjacent div to the left of my diagram with some new functionality for my app, which is why the layout=“row” tag is there. This error is something I can work around, but am nonetheless confused by it and interested in the reason behind it.

I am using GoJS v1.6.20 within Google Chrome Version 56.0.2924.87. Thanks for any help or insight!

Those two snippets of HTML look the same to me… You might want to edit your post.

Also, what are the first errors that you see?

Oops, good catch Walter. I’ve updated my question accordingly.

Those are actually warnings, saying that you are modifying the diagram or model outside of a transaction. Clearly you are (perhaps indirectly) calling Model.addNodeData outside of a transaction.

I don’t see how that could be happening just because you added an attribute to a DIV element outside of the Diagram’s DIV.

I’m not familiar with Angular Material, but I’m wondering if the width of myDiagramDiv is changing. If so, either the Diagram does not know about it or you are calling Diagram.requestUpdate. Still, I don’t see how this would cause nodes to be added to the model, unless you have some code that does that.

I assume it is some Angular nuance, as yes, everything works completely fine without the layout=“row” tag.

I think I can make more sense of the behavior if we consider the width may be changing. I am programmatically adding nodes on the fly and if Angular’s changing of the parent div’s width would perturb GoJS construction then that could be doing it.

Whenever you modify a model (but not when first constructing it before setting Diagram.model) you need to perform those modifications within a transaction.