Dropdown in ipywdigets

Question

I would like to add a dropdown box using ipywidgets. I have a function with a Pandas DataFrame and would like a dropdown to select how many rows to show. I have this:

get_forwards = interactive(
    get_forwards, 
    {"manual": True, "manual_name": "Forwards"},)
get_forwards

with this:

widgets = [get_squad, get_goalkeepers, get_defenders, get_midfielders, get_forwards]
names = ["Squad", "Goalkeepers", "Defenders", "Midfielders", "Forwards"]
view = Tab(widgets)
for i in range (len(view.children)):
    view.set_title(i, names[i])
view

I would like to add a dropdown box to each tab if possible. Can anyone help?

user_10521959 · Answer

I suspect you're caught in the weeds on building interactions. Here's a deep dive into tackling this challenging yet exciting aspect of programming.

Step 1: Create sample data
We folks here on SO can't help you if we can mimic your desired outcome. I've created a sample for you below.

import pandas as pd

data = [
        {"Position":"Goalkeeper","Name":"Sam", "Team":"Blue"},
        {"Position":"Defender","Name":"Rob", "Team":"Blue"},
        {"Position":"Goalkeeper", "Name":"Sara", "Team":"Red"},
        {"Position":"Defender","Name":"Sue", "Team":"Red"},
        {"Position":"Goalkeeper", "Name":"Alex", "Team":"Orange"},
        {"Position":"Defender", "Name":"Amy", "Team":"Orange"},
        {"Position":"Goalkeeper", "Name":"Fifi", "Team":"Purple"},
        {"Position":"Defender", "Name":"Farrell", "Team":"Purple"},
]
df = pd.DataFrame.from_records(data)

Step 2: Build interactive widgets for the fields you want to filter for
Sure you can add them to the interact method, but that's not best practice + it doesn't offer fine grained control. Here are a few widgets I built for you:

from ipywidgets import widgets

# Multi-Select
position_widget = widgets.SelectMultiple(
    options=df["Position"].unique(),
    value=[df["Position"].unique()[1]],
    description="Position",
)

team_widget = widgets.SelectMultiple(
    options=df["Team"].unique(),
    value=[df["Team"].unique()[1]],
    description="Team",
)

# Choose how many rows you want
n_widget = widgets.IntSlider(
    value=len(df),
    min=1,
    max=len(df),
    step=1,
    description='Max rows?',
    disabled=False,
    continuous_update=False, # Only update when the user has released the slider
    style={'description_width': 'initial'} # allow the long description
)

Step 3: Define your interactive view
This is where you match your widgets with functionality. Note, I'm doing a pretty simple select operation. You're not limited by any means here.

from IPython.display import display

def show_df(n=n_widget, team=team_widget, position=position_widget):
  # Filter – Be sure NOT to overwrite your data
  df_filtered = df[(df["Team"].isin(team) & df["Position"].isin(position))].head(n)
  display(df_filtered) # this will display your dataframe nicely

Step 4: Call your interactive function
Essentially, you're displaying your gadget.

my_gadget = widgets.interact(show_df)

display(my_gadget)

There you have it!

Dropdown in ipywdigets

1 Answers