Connected Selectors

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

3213 ●5 ●41 ●86

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

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 ( 2020-06-07 14:08:41 +0100 )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 ( 2020-06-08 01:00:58 +0100 )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 ( 2020-06-08 04:43:10 +0100 )edit

The resulting cell can be seen here

Juanjo ( 2020-06-08 04:43:41 +0100 )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 ( 2020-06-08 13:15:08 +0100 )edit

see more comments

1 Answer

Comments

Your Answer

Question Tools

Stats

Related questions

Connected Selectors edit

1 Answer

Comments