I love this, how hard would it be to add the arrow to all of them? Cause now it seems like the user needs to click the top most button to enable expansion of the subestimators, I think.

After some discussion with @GaelVaroquaux and @reshamas here are some possible alternatives:

Arrows everywhere

Gray arrows everywhere

One arrow

What does everything think?

My favorit option is "Gray arrows everywhere" but the arrows becoming black when the corresponding title is hovered.

@thomasjpfan I also like the gray arrows everywhere option.

I think this change is good, but there's something aesthetically awkward about the sizing or spacing of the grey arrows, perhaps because of the monospace font after them. Maybe the arrow needs to be smaller?

What do these arrows do?

I think that this an improvement over what we have, and I am in favor of merging as such (in particular given that we now have conflicts, and the more we wait, the worse it is going to get).

Trying to get specific re my nitpick about the shape/alignment of the triangles. Triangles with this function are usually thinner, and are sometimes not closed:

As seen here, the vertical alignment appears to be midway between the baseline and the top of the text, while your triangles sit far lower.

I'm not sure how to achieve this with CSS.

Here is a live version of the updated visualization:

1. On hover, the arrow turns black.
2. The arrow itself is smaller.
3. Arrows everywhere.

Nitpick: when a panel is expended, the down arrow become darker on hover of the full panel, but only the top line collapses the panel. It would be if the array became darker only when hovering on elements for which a click will induce a action.

Here is a live version of the updated visualization.

1. Hover state fixed as suggested by ENH Adds arrow on top level estimator in html repr #21298 (comment)
2. Used ▸/▾ instead of ▶︎/▼.

@scikit-learn/communication-team
FYI: for sharing on social media