Skip to content

Minimap performance is poor, especially when working with very large diagrams #96

@Skaiir

Description

@Skaiir

Describe the Bug

Similar issue here: #81. I am writing my own take on it with a bit more of an analysis.

At the moment, there are some clear performance issues with the mini-map. This came up particularly in the context of the process landscape where a large scale rendering scenario goes from 30 seconds to 5 minutes with the addition of the mini-map plugin.

RCA of the underlying issues:

  • (1) The minimap recomputes itself on every addition and removal of an element. While it makes sense to update the diagram continuously, it shouldn't be done often. If multiple elements are added (such as during a large copy paste, an import, ect..), rendering should happen rarely (or just once).
  • (2) The minimap makes some expensive calls to compute the parent-child relationships between the SVG nodes (getIndexOfChildInParentChildren is the culprit).

Once these two problems are fixed, the render time of the minimap becomes negligible compared to other slow aspects of rendering (like text measuring).

Proposed solutions:

  • To solve (1), we "debounce" the minimap rendering so that multiple continuous actions which would cause a re-render don't stack. This is particularly important on importing very large diagrams, which might take 20-30 seconds to fully render out. We still allow the debounce to be occasionally bypassed, so that we can still present a semi-live view of the minimap for very long running diagram renders.
  • To solve (2), if the business objects maintain a child-parent relationship which is analogous to that of the diagrams (order included), we can bypass all of the expensive domQueries and speed up the rendering (at least on our scenario) a further 2x. Otherwise larger refactorings need to be applied.

Steps to Reproduce

  1. Apply the minimap on any diagram-js test tool
  2. Render 2000 elements
  3. The rendering is extremely slow, and browser performance tools highlight the mini-map is causing these slowdowns

Expected Behavior

  1. Rendering should not be significantly slowed down by the minimap

Environment

  • Host (Browser/Node version), if applicable: [e.g. MS Edge 18, Chrome 69, Node 10 LTS]
  • OS: [e.g. Windows 7]
  • Library version: [e.g. 2.0.0]

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingin progressCurrently worked on

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions