Improving the HTML representation of InferenceData

[sethaxen]

Python ArviZ has a really nice HTML representation of their InferenceData that expands xarray's own fancy HTML representation of xarray.Datasets. I believe this representation uses both CSS and javascript. You can see it in action here: https://python.arviz.org/en/latest/getting_started/XarrayforArviZ.html

Similarly, we use <details> show the groups of InferenceData and <code> to show the plaintext representation of Dataset. See, for example, https://julia.arviz.org/stable/working_with_inference_data/. The goal of such a representation is to make it easy for IJulia and Pluto users, as well as users of websites that display InferenceData objects, to get a sense for the structure of the data.

There are a few improvements we should consider making:

• Replace <details> with a <ul> or a <div>, using CSS to style it and potentially JS to control the dropdowns. This prevents sites that have a custom <details> style from breaking the display of InferenceData.
• Add a fancier HTML representation of Dataset. Something like xarray's that allows previewing of some of the array data or expanding the dimensions would be useful.