[UI/UX] As a developer, I want to analyze forks, so that I can optimize the performance

[lukasimrich]

First Iteration, updates to dashboard UI to show forks - multiple branches

Why? We need something that can be done with minimal effort and still helps us to understand when and how forks happen

What?

• Organizing the dashboard by Slots instead of Height, branches happen according to the slots, height might vary, as a result, we might have competing branches in a single slot with various heights
• Showing node status, instead of count, moving count data to a less prominent part in the top right corner. Status gives us information about the nodes in a given slot, and how many of them were online/offline. We can toggle on/off offline nodes in the table
• Then there is a section listing branches per slot:
  • Branch + ID + Height - so we can keep track of branches as we traverse slots, possibly I could add colour to make it easier
  • Candidate + ID - making it easier to recognize same state hashes across UI, hash itself is hard to process by humans
  • ! for the currently ongoing slot, we can not display what is the main branch, or what is a candidate we could do it only for historical slots, I am using it right now green color to make the main branch/best tip recognizable immediately
• Interaction, you can select an entire line (branch), and only one option(candidate) can be toggled In the table we can provide full info about what are the hashes for branch, blocks allow to copy hash if needed

What I can do I could not before? I can recognize number of branches at the ongoing slot fast - each branch is a new line For the past slots I can follow branches via their ID + green colour, I can further investigate best tips, block candidates

[lukasimrich]

Week 13

TODO

• [ ] review designs against real data and adjust

DONE

• [x] Current Dashboard updated to show forks, Figma

• [x] New Page focused on Forks exploration and UI, Figma

[lukasimrich]

Week 15 Overview

DONE

• [x] Simplified Table view of forks
• [x] Exploring dataviz for node degree, latency, shortest paths, communities
• [x] Generating mockup data for p2p network, exploring layout engines

TODO

• [ ] Narrow and Focus on key features

[lukasimrich]

Week 16

DONE

• [x] Reviewed with FE, adjusted to improve feasibility

[lukasimrich]

Week 17

DONE

• [x] Redesigned to address technical feasibility