How do we want our HTML repr to behave?
jbednar opened this issue · comments
Different libraries use HTML reprs differently. E.g., here are the reprs for a Pandas DataFrame and an Xarray DataArray:
import pandas as pd
df = pd.DataFrame(dict(x=[1,2,3],y=[2, -1, 5]))
df
![image](https://private-user-images.githubusercontent.com/1695496/263413276-755c83e6-a769-4047-a99a-ee71bcac6dd9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxMzIzMDIsIm5iZiI6MTcyNTEzMjAwMiwicGF0aCI6Ii8xNjk1NDk2LzI2MzQxMzI3Ni03NTVjODNlNi1hNzY5LTQwNDctYTk5YS1lZTcxYmNhYzZkZDkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMTkyMDAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzJhY2M3OGNiNGNjOGExZWE0NGJmMTIwY2QwOWI0YTdkYzUyMThhMjM1YjM5OWFlMjZmMGY0YjQ0OTFkYWRiYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.kiHNK-8bgWnUVqNscWSIL_r-S0guaLhwn2l8v_1lZqc)
import xarray as xr, numpy as np, pandas as pd
temperature = 15 + 8 * np.random.randn(2, 2, 3)
lon = [[-99.83, -99.32], [-99.79, -99.23]]
lat = [[42.25, 42.21], [42.63, 42.59]]
time = pd.date_range("2014-09-06", periods=3)
reference_time = pd.Timestamp("2014-09-05")
da = xr.DataArray(
data=temperature,
dims=["x", "y", "time"],
coords=dict(
lon=(["x", "y"], lon),
lat=(["x", "y"], lat),
time=time,
reference_time=reference_time),
attrs=dict(description="Ambient temperature.", units="degC"))
da
![image](https://private-user-images.githubusercontent.com/1695496/263413166-7f4e45ac-7a0e-4889-a742-4efe5191ed89.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxMzIzMDIsIm5iZiI6MTcyNTEzMjAwMiwicGF0aCI6Ii8xNjk1NDk2LzI2MzQxMzE2Ni03ZjRlNDVhYy03YTBlLTQ4ODktYTc0Mi00ZWZlNTE5MWVkODkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMTkyMDAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZjUwMTVhOTRhOTA4ZTYwNWQ2MjczNDkzYzYyMTZiM2VmZWUzYTcyNzlkNmM0NDNhNDQ0MmI1OWVmOTU0YTcwMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.VaShdvlUqzRzXPcv674Z9eGeMBfS5NHo45-dHDCUo-k)
The DataFrame doesn't declare that it is a DataFrame or a Pandas object, presumably because a DataFrame has a very natural and complete representation as a table that is useful and understandable in many contexts even for non-programmers, so having a minimal representation like that is directly useful. The DataArray, on the other hand, is more difficult to represent on a 2D page because it is potentially n-dimensional, which is perhaps the reason that Xarray shows it as a rich object that has multiple attributes that can be expanded or contracted as needed.
A Parameterized has a natural representation as a table of key:value pairs, but such a representation is highly incomplete, because it fails to convey the range of values that are possible settings. The current Parameterized repr is more like the xarray repr in that it conveys additional information about ranges, types, etc. in an expandable table:
Notice that the Xarray repr shows the type of the whole container object (a DataArray), while Param does not show that it's a param.Parameterized. I do find the object type useful, so I propose we add it. If we follow the Xarray formatting I think we'd get option (1):
![image](https://private-user-images.githubusercontent.com/1695496/263414322-8250056f-7cf4-4097-b1fe-a5493352cdd9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxMzIzMDIsIm5iZiI6MTcyNTEzMjAwMiwicGF0aCI6Ii8xNjk1NDk2LzI2MzQxNDMyMi04MjUwMDU2Zi03Y2Y0LTQwOTctYjFmZS1hNTQ5MzM1MmNkZDkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMTkyMDAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NDFhNzcxNjNjODQ3MzBiYmE0MTI0NDVhN2YwMjBkMWI1ZDdhNjBjZWE5YmJiOGUyYjViNDQ3ZWFlMDFjZTkxNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.SbmGmigvPH6yuuNqM9iYFj63wezuefylaAYyR1y-up0)
Because we have only one such section, we could consider one-line representations (2):
![image](https://private-user-images.githubusercontent.com/1695496/263414380-db62181f-6592-416b-823f-c6421b6ff129.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxMzIzMDIsIm5iZiI6MTcyNTEzMjAwMiwicGF0aCI6Ii8xNjk1NDk2LzI2MzQxNDM4MC1kYjYyMTgxZi02NTkyLTQxNmItODIzZi1jNjQyMWI2ZmYxMjkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMTkyMDAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NDQzMzhiZTJlY2Y2NmFjZDliYWQ1ZmIzNGYxNjRiZDcwZjU5ZTAxZjBlODY2MGQ3YmVkZDhiNmM4ODI4OWIyMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.ATgszvrnCLwWAuUuD8xvuPOkYVVbbOVbORW_lkXsnks)
and (3) (depending on what the HTML details/summary tags support):
![image](https://private-user-images.githubusercontent.com/1695496/263414454-fa4ee874-c828-4d1a-a3e7-6d5b30f63ba5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxMzIzMDIsIm5iZiI6MTcyNTEzMjAwMiwicGF0aCI6Ii8xNjk1NDk2LzI2MzQxNDQ1NC1mYTRlZTg3NC1jODI4LTRkMWEtYTNlNy02ZDViMzBmNjNiYTUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMTkyMDAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Zjc3MTUyN2E3YjUxYWQ4ZDM1OTk1ZWU1ZWRiOWFlOTM5NTY3YWZhZTc0YjE0NGU4OWVlN2VkOWM1N2JhN2ViZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.x5etbCOaMnmHbnKdN_LYTTNAEpVQw67W1kSqaeTisYI)
If we do switch to an unexpanded one-line repr by default, then we could reconsider whether to show an HTML repr for the bare object. E.g. right now we show what seems like a less-useful text repr for just p
or P
:
![image](https://private-user-images.githubusercontent.com/1695496/263414715-c3d475be-a39e-404b-9458-9fb205966af6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxMzIzMDIsIm5iZiI6MTcyNTEzMjAwMiwicGF0aCI6Ii8xNjk1NDk2LzI2MzQxNDcxNS1jM2Q0NzViZS1hMzllLTQwNGItOTQ1OC05ZmIyMDU5NjZhZjYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMTkyMDAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MjcwMWY4MzEzZjkyZjY0MGI5ZDFkYzliZDk5NTAzZTU4NmY5NzNjY2JjYWJiYzdkNjBlMWViZGNkMGZlN2JkOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.3hoFlbCgwoiCksCsUZGM3vyDeMVqP-DAsuqH58GsP-U)
![image](https://private-user-images.githubusercontent.com/1695496/263414827-516b6102-270d-4204-9dd6-4fd7208cab43.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxMzIzMDIsIm5iZiI6MTcyNTEzMjAwMiwicGF0aCI6Ii8xNjk1NDk2LzI2MzQxNDgyNy01MTZiNjEwMi0yNzBkLTQyMDQtOWRkNi00ZmQ3MjA4Y2FiNDMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzFUMTkyMDAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZjliODM0YTIxOWVmMDczNWE0YTM2NmNkZjcxNTAwZDgyYWIwNDhhOWRmZGUzYWRlZjFhNGM3NDAxZjYzZDNiMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.jPe59LFrY37M6QnUitiUuT4U7C1QDVyzVkCp8txshjI)
Both DataFrame and DataArray show the HTML repr for the equivalent of p
but not for P
. Using an HTML repr for P
has the unfortunate sideffect of showing a rich repr for type(p)
, so maybe we should continue with the current text repr for P
. Still, if we go with the one-line reprs that include the type information maybe we can consider an HTML repr for P
as well as for p
?
Also note that for docs we will need a table representation that includes the Parameter docstring, currently visible only on hover. Maybe we can adapt the HTML repr to include the docstrings and then be used for the output of help()?