Too many diagrams block a page

[jo-pol]

The page https://d-bl.github.io/GroundForge/nets divides the generated diagrams into sets on different pages. It would take too long to render all of them on a single page.

One option to improve would be to add these additional diagrams to the current page. An even better solution would be to render all diagrams one by one without user interaction. Let the browser wait for the animation to complete before starting to show another one. A bit like so many social media pages load more content when you scroll down the page.

Technical notes: D3js not only has an on("tick",...) as you can find at the bottom of the current JavaScript. The API also defines an on("end",...) that marks the completion of an animation. Calling the onTick function only at on("end",...) skips the animation: the initial diagram and end result are shown. It speeds up the end result but keeps the watcher less busy. An in-between option tried before is let the onTick function count how many times it has been called and execute only every so many calls. Not sure this was tried with multiple diagrams on a single page. The function DiagramSvg.pathDescription and a few other calls are under our own control and written in ScalaJS, which is compiled to JavaScript.

[jo-pol]

Another observation: On a refresh attempt or clicking a link, the browser does not react until the animation is completed. This effect becomes worse with many diagrams and the current implementation. Try to prevent that blocking effect when developing a new strategy to load the images.

Not sure whether #204 (upgrading to D3jsv7) would fix that problem.

[jo-pol]

Since f4816757 on 08/12/2021 at 15:43 the page starts with only 4 diagrams. Since 190160688 on 16/02/2018, 19:34 only every 5th step of the animation is rendered. It helps a bit but the buttons for more diagrams still block the page for quite a while.