Adding the .select event listener

[aliabid94]

Adds the .select() event listener to various components. This event has EventData, data that is passed along the API to provide additional information about the event trigger. Specifically,

• Gallery: The EventData for the Gallery component is the index of the gallery item that was clicked.
• Chatbot: users can select a message
• CheckboxGroup: refers to user selected option
• Dataframe: users can select a specific cell
• Dropdown: refers to user selected option
• File: users can select a file from a list of files
• Gallery: users can select an image from a gallery
• HighlightedText: users can selected a highlighted span
• Label: users can select a category
• Radio: refers to user selected option
• TabItem: refers to own selected tab name
• Tab: refers to user selected tab name
• Textbox: Users can select a subset of text

Fixes: #1976

[gradio-pr-bot]

🎉 The demo notebooks match the run.py files! 🎉

[gradio-pr-bot]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-3399-all-demos

[abidlabs]

A suggestion on naming: how about select() instead of focus()? For two reasons:

• For js users, I'm pretty sure that focus() is the opposite of blur() and so .focus() would naturally mean an event that gets fired when a component (like a Textbox) is focused on, the opposite of our .blur()
• In my mind, .select() is more intuitive for this particular action because you are "selecting" one of the images. Similarly, we might "select" one of the Chatbot messages or select one of the choices in a Dropdown or select one of named entities in a HighlightedText

[abidlabs]

Would be great to include a code snippet showing usage in the changelog since this is a pretty big new feature

[abidlabs]

Very cool @aliabid94! Tested and works well. Should get the frontend reviewed as well though

My little demo:

import gradio as gr
import numpy as np

def display(images, event_data: gr.EventData):
    return images[event_data.data["index"]].name

with gr.Blocks() as demo:
    with gr.Row():
        f = gr.Files(file_types=["image"], file_count="multiple")
        g = gr.Gallery().style(preview=True)
        i = gr.Image()
    with gr.Row():
        s = gr.Button("Start")
        
    s.click(lambda files: [i.name for i in files], f, g)
    g.focus(display, f, i)


if __name__ == "__main__":
    demo.launch()

[freddyaboulton]

@aliabid94 this looks great to me!

I opened PR #3403 to this PR (lol) to show how we can add type hints to the Gallery Event data. I think that will be better for developer experience.

Type hints in action for @abidlabs 's example:

Let me know what you think

[aliabid94]

A suggestion on naming: how about select() instead of focus()? For two reasons:

The reason I didn't want to choose select is because it seems to be very applicable to Radio, Dropdown, etc., and they already have a change method. We could add select to all of those too I suppose.

I opened PR #3403 to this PR (lol) to show how we can add type hints to the Gallery Event data. I think that will be better for developer experience.

Amazing, thanks @freddyaboulton!

[abidlabs]

I think we should actually add a .select() to those components @aliabid94 (doesn't have to be part of this PR). There's a difference between change() and .select(), which is that .change() is triggered even when the value of the Radio, etc. is changed programmatically whereas select() isn't.

This comes up from time to time, see this issue for a mock example: #1431

[pngwn]

@aliabid94 Needs rebasing on main before i can review.

[aliabid94]

Tab: Not working for me. Also I'm confused why you make a distinction between Tab and TabItem -- I thought they were aliases. Here's the code I tried:

Ok fixed. Initially I had only attached the .select to the parent tabs (see blocks_kitchen_sink), but you can now attach it directly to a child Tab as well

I'm thinking ideally in the docs for the .select() component of each component

Done.

[abidlabs]

LGTM @aliabid94! Overall docs look great, just left a few nits above for your consideration

[freddyaboulton]

Very cool PR @aliabid94 ! 🥳

Went through the demos on the PR and everything is working as expected. Didn't detect any regressions in the deployed demos either!

[aliabid94]

We should also document the target and data parameters

documented target, actually hid data for now because I want users to use the subclasses attributes directly. Data is just an ugly json they shouldn't worry about.

[abidlabs]

LGTM @aliabid94!

[abidlabs]

I think we're ready to go!! 🚀