Feat: Map (overview of process)

equinor / flyt

Equinor Flyt (aka. VSM - Value Stream Mapping)

https://flyt.equinor.com

MIT License

4 stars 1 forks source link

Feat: Map (overview of process) #473

Closed knudsvik closed 4 months ago

knudsvik commented 1 year ago

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 commented 4 months ago

New design connected to design of #295

HavardNot commented 4 months ago

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

VetleW commented 4 months ago

What options are there? @HavardNot

nesadrian commented 4 months ago

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 commented 4 months ago

I agree on the border. Would love for it to look something like this :) (Figma link) Screenshot 2024-05-22 at 16 08 18

HavardNot commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 ?