Ask Your Question
0

Connected Selectors

asked 2020-06-06 22:36:57 +0200

Ingo gravatar image

In a Jupyter Notebook with SageMath kernel I'd like to offer the user an interactive for selecting a country by first selecting a region and then a country, from a dropdown list of countries in that region.

Ideally both selections would occur in one cell and the options for the second selector adapt as soon as the first selection is made. Alternatively I may have both selectors in different cells, but then the second cell should be executed whenever the variable selected in the first cell changes.

Would that be possible?

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
0

answered 2020-06-07 00:30:16 +0200

Juanjo gravatar image

Yes, you can achieve your goal with nested interacts. As a proof of concept, try the following code:

regions = {"Africa": ["Nigeria", "Tunisia", "Uganda", "South Africa" ],
           "America": ["Argentina", "Mexico", "Peru", "United States"],
           "Asia": ["China", "India", "Japan", "Thailand"],
           "Europe": ["France", "Germany", "Poland", "Spain"],
           "Oceania": ["Australia", "Fiji", "New Zealand", "Samoa"]}
@interact
def panel_1(region=selector(regions.keys(), label="Region")):
    @interact
    def panel_2(country=selector(regions[region], label="Country")):
        print(region, country)
edit flag offensive delete link more

Comments

Thanks! Indeed, nesting of interacts opens up many possibilities I wasn't aware of.

That leads me to another problem: Nested interacts are drawn in nested boxes which become smaller when nesting gets deeper.

Are there options to style these boxes, in particular when used in SageCells, to avoid the boxes' borders and left/right margins/paddings?

Ingo gravatar imageIngo ( 2020-06-07 14:08:41 +0200 )edit

If the interact is run in a Jupyter notebook, there are many options to customize the appearance of controls and output area. See, for example, my answer to this question. However, those options don't work in a SageMath cell, where, I think, the layout is determined via CSS. If you include cells in your own HTML pages, quite probably you can adapt the required CSS file (see the short instructions here to embed cells in HTML pages). However, if you directly link to the SageMath Cell server, I don't know how to do it.

Juanjo gravatar imageJuanjo ( 2020-06-08 01:00:58 +0200 )edit

After digging for a while in the behaviour of the SageMath Cell, I have found a way to change the CSS in order to avoid borders/margins/paddings. Add this at the beginning of the cell:

style = """
<style type="text/css">
.sagecell_interactContainer{border: none; margin: 0px; padding: 0px}
.sagecell_interactControlLabel{min-width: 8ex; text-align: left !important}
.sagecell_interactOutput{padding: 0px}
</style>
"""
show(html(style))
Juanjo gravatar imageJuanjo ( 2020-06-08 04:43:10 +0200 )edit

The resulting cell can be seen here

Juanjo gravatar imageJuanjo ( 2020-06-08 04:43:41 +0200 )edit

Excellent! Let me thank you with this URL for comparing the basic COVID-19 data from any two countries, which now applies your advice

Ingo gravatar imageIngo ( 2020-06-08 13:15:08 +0200 )edit

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account.

Add Answer

Question Tools

Stats

Asked: 2020-06-06 22:36:57 +0200

Seen: 49 times

Last updated: Jun 07 '20

Related questions