Feat: Map (overview of process)

[knudsvik]

User input 3 (by Lise Storhaug Ekeland, Geir Lea Berge, Henriette Eidsnes):
Vanskelig å se /få oversikt over totalprosess/flyt når vi jobber i systemet.. Kun fokus der vi er og vanskelig å få en rød tråd  => mulig å ha med et lite bilde av hele prosessen I bakgrunnen?

Possible solution:
See map in Miro

[VetleW]

New design
connected to design of #295

[HavardNot]

Seems there is limited options as far as styling goes, using the standard styling setup for React-Flow looks like:

[VetleW]

What options are there? @HavardNot

[nesadrian]

I think we should have a border around the minimap, otherwise it ends up looking out of place when you pan the camera away from the process like in the screenshot below. Here is a list of the options we have @VetleW. The cards and lines has a lot of customization options, but otherwise it's pretty limited, like Håvard said. You can check it out in DEV

[VetleW]

I agree on the border. Would love for it to look something like this :) (Figma link)

[HavardNot]

Managed to wrestle with the CSS to create this. Will create a separate issue for zoom percentage as it was a bit complicated to handle updating the value when the user zooms with the mouse/trackpad. The zoom value will probably be placed to the right of the controls instead of between "+" and "-" as it is not a native feature of the "Control" component from React-Flow

[VetleW]

Possible to change the fullscreen icon to fit to screen icon as well?
It isn't really a fullscreen button, rather a center or fit to screen button.

[HavardNot]

It is possible but it is not a good idea. React Flow does not expose the ability to override the icon in the API, it only has support for adding more buttons. so i would have to hide the original button by using CSS and then creating a custom button with the same functionality but with the new icon. Which i think is too much work for such a small change.

A quick fix alternative is to use Javascript logic to manipulate the DOM during run-time. However, Circumventing the React virtual DOM is considered bad practice and should be avoided as it easily breaks. I got it working, though the icon is a bit small

[nesadrian]

One small detail: I think we should remove the gap and border of the buttons so that the design will be more consistent with the other button group. What do you think @VetleW @HavardNot ?

[HavardNot]

Fixed hover color and removed the border shadow between the buttons

[HavardNot]

Ready for test in web-flyt-test.radix.equinor.com @QiJin-Bouvet

[QiJin-Bouvet]

Tested in TEST env.

• Mini map shows the focus area with a border
• Changes in canvas get updated in mini map

BUT, some edges/lines are shown as green card in mini map by mistake.

[QiJin-Bouvet]

Tested in TEST env.
Mini map shows the focus area correctly.

[QiJin-Bouvet]

Tested in QA env.
Mini map shows the choice card as normal sub activity card. Need a fix.

[HavardNot]

Fixed choice card minimap node displaying incorrectly. ready for test https://web-flyt-test.radix.equinor.com/ @QiJin-Bouvet

[QiJin-Bouvet]

Tested in TEST env.
The mini map works as expected.

[QiJin-Bouvet]

Tested in QA env.
The mini map works as expected.