[CONSOLE] UI errors in Map view

[MidnightLightning]

Overview

User story: As a visual learner who wants to understand the streams coming in and out of an address, I want the "map" view to be as understandable as possible, with no visual distractions that would hamper my understanding of the visualization. I want as clean a visual as possible to be able to screenshot it and share with others as an explanation for what's happening with my or their wallet.

User Persona/Target Audience:
Visual learners who wish to use and share the Map view to explain the current state of streams to/from an address.

Deadline: ??

UI/UX Design:

The central node of the graph has extra links both top and bottom that appear to be connecting the central node to themselves. Those are not needed and visually distracting from the other connections.

• The attribution to React Flow in the bottom right (green circle) is not legible (color is same as background); should either be legible or removed entirely.
• Outflows don't space themselves out as the in-flows do (blue separations between nodes are different). The outflows being so close together makes the labels for those flows overlap (orange circle). To fix this, the outflows should be spaced out as the in-flows are.
• The central node is not centrally-aligned to either the in-flows nor out-flows horizontally. This makes a pretty unbalanced diagram overall.
• Nodes that are on the out-flow side have a connection point on the top that leads back to the central node, and no connection point on the bottom. But the nodes on the in-flow side have a connection point on the top that is unused. This seems to imply a possibility of showing multi-hop flows, but that doesn't seem to be possible with this widget. Until such capability is added, the connection points on top of the in-flows should be removed.

Acceptance criteria

• Satisfies entire acceptance criteria
• Analytics capturing is added (Optional)
• Consider demo & communication (Optional)
• Follow-up ideas & considerations get noted (Optional)
• Stakeholders approve (Optional)
• Code review is approved by at least 2 reviewers
• Tested by Elvijs/QA & discovered bugs resolved
• Documentation updated
• Assignee/opened by merges PR
• Automated E2E tests for happy path
• Code is merged
• Observability of critical user path
• Checked with target user persona

Links/Resources

• https://console.superfluid.finance/arbitrum-one/accounts/0xf45349435c4A7cbb519987bd4d7460479568fD63?tab=map

Readiness criteria

• Descriptive title
• Written as a user story: “As a [persona] who [context], I want to [do X] because [reason] , so that [outcome].”
• Acceptance criteria complying with Definition of Done
• User Persona/Target Audience: If User Persona is known otherwise assume Target audience
• Estimate/Story points
• Deadline: If not a part of an epic
• Priority: Reflected as order on the board, walking the board from the top and right
• Assignee
• Labels
• Link to epic: If belonging to an epic
• UI/UX Design (optional)
• Blockers/Prerequisites (optional): Use Zenhub blocked by/blocking feature
• Mood (optional): What mood is the user in when interfacing with this? Exploring? Stressed? Playful?

[kasparkallas]

Thank you for the issue!

I can't promise when I'd get around to this. Maybe you're interested in submitting a PR yourself?

This is the component that renders the diagram: https://github.com/superfluid-finance/superfluid-console/blob/313c023235f9cad965fefa53398f049d133ddedb/src/components/Map/Map.tsx#L40

The part that configures how ReactFlow looks is straightforward. The positions of the nodes are set by simple multiplications (e.g. position: { x: i * 300, y: 100 }). The connection points of the edges are not configured at all, i.e. they're the default.

I haven't investigated this much but I have a hunch ideally we'd use an auto-layout algorithm: https://reactflow.dev/learn/layouting/layouting & https://reactflow.dev/examples/layout/auto-layout

[kasparkallas]

Hey @MidnightLightning

I ended up hacking together this separate app to experiment with full range of possibilites for the visualizations: https://supervisual.netlify.app

Example link (everything is perfectly stored in the URL): https://supervisual.netlify.app/?chain=10&tokens=0x4ac8bd1bdae47beef2d1c6aa62229509b962aa0d,0x1828bff08bd244f7990eddcd9b19cc654b33cdb4,0x8430f084b939208e2eded1584889c9a66b90562f&accounts=0x605a2903c819cfa41ea6dd38ae2d1aaf6d01ec33,0x4ea8d965e3337afd4614d2d42ed3310ad7d0b550,0x2a90d7fdcb5e0506e1799b3ed852a91ac067d36e,0x82d28b941db301ea7f32d4389bbb98b1a3ea3235