Skip to content

Selects and Tabs

Select

Selects act as a container that holds a list of nested Blocks objects, such as Tables, Plots, etc.. - but only one may be visible, or "selected", at once.

The user can choose which nested object to view dynamically using either tabs or a dropdown.

Note

Select expects a list of Blocks, e.g. a Plot or Table, but also includes Select or Groups themselves, but if a Python object is passed, e.g. a Dataframe, Arakawa will attempt to convert it automatically.

Parameters:

Name Type Description Default
*arg_blocks BlockOrPrimitive

Page to add to report

 ()
blocks list[BlockOrPrimitive] | None

Allows providing the report blocks as a single list

 None
type SelectType

An instance of SelectType that indicates if the select should use tabs or a dropdown (default: Tabs)

 TABS
name str | None

A unique id for the blocks to aid querying (optional)

 None
label str | None

A label used when displaying the block (optional)

 None

Tip

Select can be passed using either arg parameters or the blocks kwarg, e.g. ar.Select(table, plot, type=ar.SelectType.TABS) or ar.Select(blocks=[table, plot])

The ar.Select block has two modes:

  • Tabs are used for less than 5 options - you can override this default by passing in the parameter type=ar.SelectType.TABS
  • Drop downs are used for 5 or more options - you can override this default by passing in the parameter type=ar.SelectType.DROPDOWN. In addition, a search bar will appear if the block contains more than 10 options.

To set the option names, make sure each block contained inside your ar.Select has a label.

Simple Tabs

import seaborn as sns
import altair as alt

code = """
titanic = sns.load_dataset("titanic")

report = ar.Report(
    "# Titanic overview",
    ar.HTML(
        '<html><img alt="No description has been provided for this image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/RMS_Titanic_3.jpg/1599px-RMS_Titanic_3.jpg" style="height:400px;display:flex;margin:auto"/></html>'
    ),
    ar.Select(
        blocks=[
            ar.Table(titanic.describe(), label="Data Description"),
            ar.DataTable(titanic, label="Whole Dataset"),
            ar.Code(code, label="Source code"),
        ]
    ),
)

app.save(path="select.html")
"""

titanic = sns.load_dataset("titanic")

ar.Blocks(
    "# Titanic overview",
    ar.HTML(
        '<html><img alt="No description has been provided for this image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/RMS_Titanic_3.jpg/1599px-RMS_Titanic_3.jpg" style="height:400px;display:flex;margin:auto"/></html>'
    ),
    ar.Select(
        blocks=[
            ar.Table(titanic.describe(), label="Data Description"),
            ar.DataTable(titanic, label="Whole Dataset"),
            ar.Code(code, label="Source code"),
        ]
    ),
)

import seaborn as sns

code = """
titanic = sns.load_dataset("titanic")

report = ar.Report(
    "# Titanic overview",
    ar.HTML(
        '<html><img alt="No description has been provided for this image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/RMS_Titanic_3.jpg/1599px-RMS_Titanic_3.jpg" style="height:400px;display:flex;margin:auto"/></html>'
    ),
    ar.Select(
        blocks=[
            ar.Table(titanic.describe(), label="Data Description"),
            ar.DataTable(titanic, label="Whole Dataset"),
            ar.Code(code, label="Source code"),
        ]
    ),
)

report.save(path="select.html")
"""

titanic = sns.load_dataset("titanic")

ar.Blocks(
    "# Titanic overview",
    ar.HTML(
        '<html><img alt="No description has been provided for this image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/RMS_Titanic_3.jpg/1599px-RMS_Titanic_3.jpg" style="height:400px;display:flex;margin:auto"/></html>'
    ),
    ar.Select(
        blocks=[
            ar.Table(titanic.describe(), label="Data Description"),
            ar.DataTable(titanic, label="Whole Dataset"),
            ar.Code(code, label="Source code"),
        ],
        type=ar.SelectType.DROPDOWN,
    ),
)