Styling Options for Accordion?

[ssanderson]

Hi All,

I'm working on a progress display for an API that's part of Quantopian/Zipline (WIP Code: https://github.com/quantopian/zipline/pull/2467/files#diff-b2c6946e6ea0a4a071d04a4d0643c413R125).

My basic layout is that I've got a header, a progress bar with a percent complete indicator, and a collapsable "details" tab that provides extra information about what's currently being computed.

The result currently looks like this:

Overall, I'm pretty happy with how much I've been able to get out of just using built-in widgets with VBox and HBox. The one area I'm struggling with a bit is styling of the Accordion widget, which I'm using for the details tab. Accordion's default styling is pretty heavy relative to the other elements of my progress setup, so I'd like to simplify it by removing some padding, setting the background color back to white, and maybe removing the border. Ideally I'd end up with something like this:

Unfortunately, it doesn't look like it's possible to change the styling of the Accordion widget from Python (apologies if that's not the case; I've spent a couple hours digging through the source and docs, so at the very least if it's possible it's not particularly obvious how to do it). I can set padding in the accordion's layout dict, but that only sets the padding of the outermost container; what I want is to set the padding of one of the container's inner elements.

Assuming I'm correct in thinking that there's currently no supported way to restyle Accordion, a few questions:

1. How hard would it be to make more of the Accordion style configurable? Is that something that you would be interested in a PR for?
2. In the interim, is there a minimally-horrific way for me to muck with the styles? Should I just emit an HTML that mimics the HTML generated by rendering Accordion?
3. Am I otherwise doing something obviously wrong here? This is my first attempt at using ipywidgets for a somewhat non-toy project.

[jasongrout]

1. How hard would it be to make more of the Accordion style configurable? Is that something that you would be interested in a PR for?

I think it would be relatively easy to introduce new Accordion style parameters. We've been quite conservative in introducing such style keys for adjusting individual widget styling.

We've discussed having a Collapse widget that essentially is a single-pane Accordion. We've said that maybe there's no need to have a collapse widget since you could use accordion. However, you bring up a good point that accordion has some pretty heavy styling, comparatively, and it might be nice to have something much lighter weight, and perhaps that's the role a new Collapse widget could fill.

2. In the interim, is there a minimally-horrific way for me to muck with the styles? Should I just emit an HTML that mimics the HTML generated by rendering Accordion?

You can always throw CSS on the page to override existing page CSS (either directly if you have control of the page, or through code using the ipython html display). That would be, as you say, "minimally-horrific" ;).

On the other hand, perhaps you can just use an HTML widget with the HTML details element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

[jasongrout]

Since you don't really need the interactivity - you're just displaying information to the user, not getting feedback from them - you could also just use an HTML widget with the HTML progress element as well. Or you could use update_display with normal IPython HTML display.

[jasongrout]

In general, if you don't need interactivity, i.e., data back from a user, I'd suggest exploring using display or update_display to give information to the user, as it is a much simpler push-only model. If you need to fit the information into a widgets-based interface, like a panel showing information, you could use an output widget, or for HTML content you could use an HTML widget. If that isn't flexible enough, or if you need to tie things into the widgets look-and-feel, of course there is the progress bar widget, etc.

[ssanderson]

@jasongrout thanks for the detailed reply!

Or you could use update_display with normal IPython HTML display.

This sounded initially promising to me, but after trying an implementation that just uses update_display, I realized I do subtly depend on user UI input for the collapsed state of my details tab. With a pure push-only model, the tab ends up getting reset to collapsed on every update. I don't think there's a way around that without using widgets for at least the tabbed pane?

[ssanderson]

Assuming there's no way around the above, I think I'm going to stick with Accordion for now, so I'd be interested in either adding some new styling configuration to Accordion, or else for helping to add something like the Collapse widget mentioned above.

[jasongrout]

You can give the open attribute to the details tag to have it start open: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

[jasongrout]

However, you're right that you wouldn't be able to maintain whatever the user did very easily, because there isn't the feedback of whether the tag is open or not when you refresh.

[jasongrout]

I think a minimal Collapse widget in core that just maps to an HTML details tag makes a lot of sense. It can have an open attribute that gives that state back (I can imagine you might want to dynamically populate the content or refresh the content when the tag opens, for example).

[ssanderson]

@jasongrout I thought I had replied to this, but apparently I never hit send. Any pointers on where to start looking around for adding a new Collapse widget? It's not obvious to me if there's a natural place to include it within the existing hierarchy (SelectionContainer doesn't seem to make much sense anymore since a Collapse can only have one panel).

[jasongrout]

Perhaps as a container widget, like the box widgets?

[Conchylicultor]

I have this exact issue. Has there been update on this ?

It might also be related to : https://github.com/jupyter-widgets/ipywidgets/issues/1926