Adding force-simulation layout algorithm to draw nodes

[henrypalacios]

Summary

Closes #114

Adding layout graph selector

To Test

Open any of the following transactions:

1. 0xaa5d...baf0
2. 0x0d6f...ca38
3. 0xd7e3...5894
4. 0xc247...ead4
5. 0xf2a0...d522

[coveralls]

Pull Request Test Coverage Report for Build 2513019511

Warning: This coverage report may be inaccurate.

We've detected an issue with your CI configuration that might affect the accuracy of this pull request's coverage report.
To ensure accuracy in future PRs, please see these guidelines.
A quick fix for this PR: rebase it; your next report should be accurate.

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 43.872%

---

Totals
Change from base Build 2465584360:	0.0%
Covered Lines:	2162
Relevant Lines:	4177

---

💛 - Coveralls

[github-actions]

• 🔭 Explorer: Explorer test app
• 🔒 Safe Swap App: Trade test app (add to your safe apps)
• 📈 Trade: Trade test app
• 📚 Storybook: Component stories

[elena-zh]

Hey @henrypalacios , great PR to play with!

Some issues and doubts from my side:

1. Can we write layout names using upper and lower-case letters? I mean, as a stupid end-user, it was not clear to me what this or that type of diagram means. And when I googled, I found that fcose is actually fCoSE (easies to google it when know a certain name). And klay is KLayout..

2. fCoSE layout always changes its position when press on 'reset' button. Maybe instead/or besides of the 'Reset button we should show 'Play' button if it works this way. WDYT?

3. KLayout looks too weird with a lot of overlapped elements, especially for graphs with few nodes
   
   
   Maybe we should hide it for such graphs?

4. In this transaction with klay layout 2 arrows are always blinking when press on the Reset button

5. I think it would be nice to 'save' layout selection when switch between Graph/Orders tabs

Thanks

[alfetopito]

First of all, very nice. It's very useful for some more unusual batches like the ones you shared.

Now, regarding Elena's points:

2. I'm not found of play as it indicates to me that it should play something, like a video. I would prefer re-arrange instead

3. Agree, looks weird, but I don't think we have enough data, and might not be worth the effort to try and identify when it should be hidden. I'd leave it up to the user to pick a different layout if they chose to

5 Out of the scope of this task, and might not make sense, as every layout might fit better a different type of settlement. I think the grid is the best use case for the majority of cases and as it's already the default.

And some points from me:

L1: Not very found of the animation on load. Can it be disabled?
L2: The table seems to 'jump' when switching between graph and list. That's not in the video, but the jump is because the graph causes the browser to have a scroll bar, which is removed when I go to the list.
Even on one batch where it has a scroll bar there's some jumping

Screen.Recording.2022-06-21.at.18.01.10.mov

L3: I understand the layouts match the algorithms, but does it make sense from a user point of view? I don't have a good suggestion here, just find it not relevant and would prefer a name more meaningful, like grid.

[alfetopito]

❤️

[elena-zh]

Hey @henrypalacios , great changes!
I have found some low-prio UI issues, but reported them as separate tasks in order to fix it later:

• issues with Reset button will b solved by disabling it for a default BV view [Batch Viewer] Disable the reset button #101 (comment)
• BV diagram blinks when loaded #134
• I think, it would be nice to place a layout button to another place in a mobile view [BV] Change a layout dropdown position in a mobile view #135 . But is the current position looks good to all the rest team members, this issue might be closed.

Thanks

[ramirotw]

[henrypalacios]

Thanks for the feedback team,

I have found some low-prio UI issues, but reported them as separate tasks in order to fix it later:

1. issues with Reset button will b solved by disabling it for a default BV view [Batch Viewer] Disable the reset button #101 (comment)
2. BV diagram blinks when loaded #134
3. I think, it would be nice to place a layout button to another place in a mobile view [BV] Change a layout dropdown position in a mobile view #135 . But is the current position looks good to all the rest team members, this issue might be closed.

@elena-zh 👇

1. I tried to fix the Klayout blink, but definitely the best way to fix it is [Batch Viewer] Disable the reset button #101.

2. I was going to comment on the BV diagram blinks when loaded #134. Because I still do not understand why it does not take the layout in the first render, (maybe I'll go to the author of the library).

3. It seems to me well, we will discuss it in [BV] Change a layout dropdown position in a mobile view #135.

---

L2: The table seems to 'jump' when switching between graph and list. That's not in the video, but the jump is because the graph causes the browser to have a scroll bar, which is removed when I go to the list.
Even on one batch where it has a scroll bar there's some jumping

There is still pending the jump that @alfetopito found, with a big tx like 0xf2a00ef766bc5caee96cbee8e1842e8ed29ca5059b1a5daa71258d6232d1d522, I'll see it with @alongoni in another PR.

---

5. I think it would be nice to 'save' layout selection when switch between Graph/Orders tabs

☝️ regarding this last point, I think it would be great to use a URLQueryParam like (&layout=grid) that would also allow to share the tx with a specific layout (it would be a task outside this PR).