ui: Migrate block viewer to React

[onprem]

• I added CHANGELOG entry for this change.
• Change is not relevant to the end user.

Changes

• Migrated the Block Viewer to React

Verification

Added new unit tests.

Screenshots

[GiedriusS]

Looks good so far! Very nice start! 🎉 Everything so far is just like we've talked 👏 Also, the logic of calculating the widths/etc. looks sound. Can't comment on the React code patterns, though.

Some things that are missing from the top of my head (I might be wrong 😄 ):

• Different colors for different combos of compaction levels and resolutions
• Darker shades for overlapping blocks
• The size of the block in the pop-up on the right

[squat]

Great work so far Prem! I'll try to fire this up today :)

[onprem]

@GiedriusS

Different colors for different combos of compaction levels and resolutions

We now have different colors for diff resolutions, but I still need to figure out what we need to do about different compaction levels. One idea is to have a darker shade of color for a higher compaction level and a lighter shade of same color for a lower compaction level.

Darker shades for overlapping blocks

It slipped my mind, thanks for reminding me. I have some ideas on how to implement this.

The size of the block in the pop-up on the right

Ah yes. But we need to first have this data in the API, maybe we can tackle this in a separate PR, WDYT?

[bwplotka]

Important part that was discussed offline: How overlap with 10 blocks looks like e.g?

[onprem]

@bwplotka

Important part that was discussed offline: How overlap with 10 blocks looks like e.g?

For now, if some blocks are overlapping, the overlapping part will turn darker in shade compared to the rest of the blocks in the same row. The shade doesn't depend on the number of overlapping blocks though, so if there are 2 blocks overlapping or 10, the effect will be the same.

In the future, we can move the overlapping blocks in a new row. This will make more sense if someday we start supporting vertical compaction.

[squat]

Overall this looks great to me :)))) Let's merge this and iterate more

[GiedriusS]

Awesome work, Prem! 😻