Angular: Minimap content does not show up immediately between different tabs

[RihabEA]

Describe the Bug

Kindly check this demo link

https://stackblitz.com/edit/bpmn-js-minimap-issue?file=src%2Fapp%2Fapp.component.html

The main issue is: in the first tab(Xml1) the minimap working good, but when we open the second tab (Xml2), the map is not displayed well (instead of displaying the graph in a yellow border, it is displayed a yellow point)

Steps to Reproduce

1. Open the demo
2. Open the second tab
3. See the minimap does not provide the content of the tab diagram

After moving around on the canvas, the minimap appears again and works as expected.

Expected Behavior

The minimap shows up correctly immediately.

Environment

• Host (Chrome/Node version : v14.18.0), if applicable: [e.g. MS Edge 18, Chrome 69, Node 10 LTS]
• OS: [e.g. Windows 11]

[pinussilvestrus]

Thanks for sharing this and the demo 👍 I tried it out and saw that the minimap got back after the first time clicking it in the second tab. Afterward, it works perfectly fine across switching.

Can you maybe point us to the place where are you importing the diagrams in your example? Maybe there is a simple way to resolve this.

[RihabEA]

Sorry but I didn't understand your test, the issue is inside the minimap in the second tab, it doesn't display the graph in the minimap.
Please check the difference between this 2 pictures

Thanks!!

[pinussilvestrus]

Yes, I can confirm that. However, if I do the following, the minimap in the second tab works for me

• Click on the second tab => the behavior you described shows up

• Move around the canvas in the second tab => the minimap comes back

• Switch between the tabs => the minimap loads as expected

Therefore my question was how you import the different diagrams between the tabs. Maybe the issue that the minimap isn't loading immediately relates to that.

[RihabEA]

Ah okay I got it, in this example I wrote the code, in the bpmn-js component I create the diagram with the minimap, and in the app component I send the data for each diagram using for loop( could you please check the code? It might be more helpful)
Thanks.

https://stackblitz.com/edit/bpmn-js-minimap-issue?file=src%2Fapp%2Fapp.component.html

[pinussilvestrus]

Thanks for sharing. For me, it really looks like the minimap doesn't really get updated visually after the initial import. What you could try is to re-initiate the minimap when you click a tab via this.viewer.get('minimap').open();. Did you try that?

I will move the issue to https://github.com/bpmn-io/diagram-js-minimap to track it in the correct project.

[RihabEA]

Hello, yeah I re-initiate the minimap in the ngOnChanges method via this.viewer.get('minimap').open(), but we still have the same issue.
Thanks a lot for your help, I will stay updated!

[pinussilvestrus]

Thanks for responding! I am moving this one to backlog as we have a reproducible sandbox 👍

[RihabEA]

Hello, just need to know if is there any update on this issue??

[nikku]

No update. Happy to take a contribution that fixes this.