[Design] As a Developer, I want to see Network communication, so I can understand how it works and find improvements

[lukasimrich]

Figma UI/UX Specs

https://www.figma.com/file/SEwWpo68UI92SNSookfyTp/%F0%9F%90%A3-POC?node-id=577%3A15654

Progress

UI/UX Design

• [x] Explore UIs for monitoring communication and understand what patterns are functional https://www.figma.com/file/SB5dFs82XjHQQYXbJwiuGO/Network-Workshop?node-id=27%3A215
• [x] Understand messages type and structure/hierarchy https://www.figma.com/file/SB5dFs82XjHQQYXbJwiuGO/Network-Workshop?node-id=33%3A218
• [x] Define data displayed in the network table and sidebar for contextual info
• [x] Agree on displaying protocol categories and message types
• [x] Play/Stop Component for Live data stream
• [x] Approved UI & UX Specs for Network UI
• [x] Design x Dev Handoff

  Development Support

  • [x] JSON Component
  • [x] Understand decoded data & Update Datatable & Filters

Dummy prototype

https://www.figma.com/proto/SEwWpo68UI92SNSookfyTp/%F0%9F%90%A3-POC?page-id=0%3A1&node-id=262%3A15706&viewport=-3186%2C1203%2C0.68&scaling=min-zoom&starting-point-node-id=262%3A16055

Updated prototype https://www.figma.com/proto/SEwWpo68UI92SNSookfyTp/%F0%9F%90%A3-POC?page-id=0%3A1&node-id=577%3A17022&viewport=-1738%2C-164%2C0.26&scaling=min-zoom&starting-point-node-id=577%3A17022&show-proto-sidebar=1

Why this feature matters?

• Seeing data and observing what is happening on network
• Analysing/benchmarking performance

Initial Kick-Off Call Notes

https://www.figma.com/file/SB5dFs82XjHQQYXbJwiuGO/Network-Workshop?node-id=0%3A1

Additional Notes, Future steps

RPC specific View

• Latencies with Request/Response (RPC) and understand what happened during that time, to understand why slow

Eventually we might need specific views for each protocol

• Meshsub, RPCs, ...
• Jumping across views to see problem from different angles

...