Feature: Hint relation between data visualizations

dapplion commented 4 years ago

Hint relation between data visualizations

Purpose

To teach users visually about Simple Serialize.

Proposal

If the user hovers over sections of the serialized bytes, each minimal block of data is highlighted and matched to the corresponding deserialized representation. Also, a popover can give info about the data type.

simple-serialize-data-location-hint

Issues

I believe ssz is run as a black box, so it may not be trivial to get the info required for this visualization. How could this mapping be extracted without coding a secondary deserialization algorithm?

It would be nice to get some sort of "AST" of the serialized bytes to render them as a sequence of inline elements. For example:

[
  {
    type: "offset",
    bytes: "94000000",
    path: "aggregationBits",
  },
  {
    type: "fixed",
    bytes: "0200000000000000",
    path: "data.slot",
  },
  {
    type: "fixed",
    bytes: "0400000000000000",
    path: "data.index",
  },
]

ScottyPoi commented 3 years ago

I have been working on a SSZ Visualization tool as part of a educational website for SSZ. I would love to talk about integrating it with what you have built here. I am very new to programming, and currently the visualizer is built on my own naive, imperfect, incomplete implementation of SSZ that I cobbled together. I would like to continue to develop my visualizer using your ssz tool instead, but I have not had success running it locally.

dapplion commented 3 years ago

Hi @ScottyPoi ! Sounds great, happy to help on what you need. You can reach us in Discord so we can help you on real time with the issues you are having running it locally. https://discord.gg/yjyvFRP

ChainSafe / simpleserialize.com