Rendering sometimes goes screwy!

GoJS
#1

Hi,

You helped me previously with an issue I was having understanding the right approch to take with this and I thank you for that! I’m now having a much less important issue but I was wondering if there was a workaround for it. I now have a page that renders what we call Bowties (risk management). Generally speaking it works fine but every now and then the rendering goes wrong and ends up looking like this:

chrome_hzLRjsz1uO
chrome_hzLRjsz1uO1520×311 33.2 KB

When it should look like this:

chrome_rpsxqcxjNr
chrome_rpsxqcxjNr1656×277 40.8 KB

I was wondering if this is something you’ve seen before and if there was something known that could be applied. Maybe just adding a delay to the page load or similar?

#2

Does the size of the HTMLDivElement holding the Diagram change after your diagram is rendered? Yes, you could initialize the diagram after HTML page layout has completed. Which version of GoJS are you using, and which browser on which platform are you using?

It’s odd that your “Show Residual” button is missing in the first screenshot.

#3

I think I’ve figured it out. The containing DIV didn’t have a width but it DID have a min-width of 800px. Removing this appears, so far, to have fixed the issue. It’s a difficult one to know for sure though because it was entirely luck if it happened or not, probably more to do with the timing of Web.Api returns that anything we could control. P.S. The residual buttom was in the page on both renders but I wasn’t consistent with the width of my snip :-)

If this turns out to be the ‘solution’ then to complete the loop:

GoJS version: v2.1.25
Browser: Chrome Version 96.0.4664.93 (Official Build) (64-bit)
OS: Windows 11 (22000.348)

#4

Actually…forget that! We just managed to replicate the issue even without the min-width. We don’t set the width anywhere in our diagram code either, prefering to rely on the diagram to fill the available space so I wonder if we’re missing something we could be doing there?

In the following diagram I’ve highlighted the scrollbar and width settings in developer tools…

chrome_zLrcMNdguO
chrome_zLrcMNdguO1703×786 71.1 KB

#5

Could you please update to a newer version of GoJS?

If that fixes it, the problem was that the Div changed size but you didn’t ask the diagram to refresh.