Add repo visualization

[alecandido]

Import from:

https://mango-dune-07a8b7110.1.azurestaticapps.net/?repo=qiboteam%2Fqibo

We also have to decide if using the live version, or just export the SVG at present time.

Probably, the best choice would be to pull the SVG during the site compilation (e.g. we can make a script update-visualization.* and run in the workflow), if available, we use the new one and cache the SVG, if not, we use the old one. A simple way would be pulling the SVG file in public, and falling back in pulling from the current site :)

[MatteoRobbiati]

I am trying to embed the dynamic version of this (that I really like) into an iframe. Maybe a solution can be to show it using an iframe limiting height and width in order to show only the bottom part of the page and make it rescaling with the page's zoom.

Not the best solution, but is should preserve the dynamic view of the site.

What do you think about it?

[alecandido]

I'd limit the iframes as much as possible. Your solution is viable, but prone to layout shifts.

I'd choose one of two options:

1. at compile time, we have a full computer (during the workflow), and we can download the page, extract the svg, and apply the strategy above
2. on the client, we can do the same in js, since we do not have a file system at hand, we have to work with streams in memory (but you should load files into streams/strings in any case)

In any case, we'd need also the accompanying js for interactivity, but this is already an extra and it is slightly more complicated.

It's true that iframes do not have all this complications, but I believe (to be checked) that you can not select a single element (in which case would be ideal, since it would do on its own option 2.

[alecandido]

In any case, this is extremely low priority :)

[alecandido]

Ok, option 2. is not viable via iframe at all, because of XSS prevention: https://stackoverflow.com/a/6170976/8653979

The only client option is to process in js in the very same way we'd do on server side (download page and scripts, reassemble everything manually)

[MatteoRobbiati]

Ok, clear. So the best way to proceed is to run a script which check if the diagram is modified (maybe controlling if some merge was done on the qibo's main repo) and then captures the svg image.

Seems nice to me.

[alecandido]

Almost that, a few differences in my mind:

• don't check, just try to redownload: if it can, it will update it anyhow (easier then checking some other external condition)
  • if you do not succeed, because of network issues, or the page is not available any longer, etc. just use the local copy
• extracting the svg is the basic goal: on that page the svg is interactive, and in order to preserve interactivity you also need the associated js (that is another order of magnitude of problems)

[MatteoRobbiati]

Ok, now the problem is clearer. Thank you!