Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensures tabs with visible set to false are not visible. #9653

Merged
merged 27 commits into from
Oct 21, 2024

Conversation

hannahblair
Copy link
Collaborator

Description

Ensures tabs with visible set to false are not visible.

Closes: #9648

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests

  1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh

  2. You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

@hannahblair hannahblair changed the title * fix tab visibility Fix tab visibility Oct 10, 2024
@gradio-pr-bot
Copy link
Collaborator

gradio-pr-bot commented Oct 10, 2024

🪼 branch checks and previews

Name Status URL
Spaces ready! Spaces preview
Website ready! Website preview
Storybook ready! Storybook preview
🦄 Changes detected! Details

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/1b5c622be99c36fdb70f24270990ff0bc7d6f539/gradio-5.1.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@1b5c622be99c36fdb70f24270990ff0bc7d6f539#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/1b5c622be99c36fdb70f24270990ff0bc7d6f539/gradio-client-1.7.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/1b5c622be99c36fdb70f24270990ff0bc7d6f539/dist/lite.js""></script>

@gradio-pr-bot
Copy link
Collaborator

gradio-pr-bot commented Oct 10, 2024

🦄 change detected

This Pull Request includes changes to the following packages.

Package Version
@gradio/chatbot patch
@gradio/core patch
@gradio/sanitize patch
@gradio/tabitem patch
@gradio/tabs patch
@self/app patch
gradio patch
website patch
  • Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Ensures tabs with visible set to false are not visible.

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

  • Maintainers can change the version label to modify the version bump.
  • If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

@abidlabs
Copy link
Member

abidlabs commented Oct 10, 2024

Thanks @hannahblair! Looks good, except for one weird thing I noticed, which is that when an invisible tab appears between two visible tabs, it messes up the order. Repro:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Tab("abc"):
        b = gr.Button("Make visible")
    with gr.Tab("def", visible=False) as t:
        pass
    with gr.Tab("ghi"):
        pass

    b.click(lambda :gr.Tab(visible=True), None, t)

demo.launch()
image

@@ -27,6 +28,7 @@ const raf = is_browser
* Create a store with the layout and a map of targets
* @returns A store with the layout and a map of targets
*/
let has_run = new Set<number>();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unused

}
})) || [];
const child_tab_items = instance.children?.filter(
if (instance.type === "tabs" && !instance.props.initial_tabs) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hannahblair This is the main fix, we want to avoid blowing away the tabs but we need to set initial tabs for the first render. This way we will set them once but never again which prevent us overwriting them unnessecarily.

Copy link
Collaborator Author

@hannahblair hannahblair left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changes lgtm @pngwn!

@hannahblair
Copy link
Collaborator Author

Also closes #9648

@pngwn pngwn changed the title Fix tab visibility Ensures tabs with visible set to false are not visible. Oct 18, 2024
Copy link
Member

@abidlabs abidlabs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! In my tests, fixes this PR allows updating both visible and interactive params!

@freddyaboulton
Copy link
Collaborator

freddyaboulton commented Oct 18, 2024

The tabs e2e tests are still failing. Can we fix the implementation or test prior to merge?

Compared to main, this PR has 5 e2e test failures instead of 1 (link). Just FYI

@pngwn
Copy link
Member

pngwn commented Oct 18, 2024

I shall look at test!

@pngwn pngwn enabled auto-merge (squash) October 21, 2024 19:29
@freddyaboulton freddyaboulton merged commit 61cd768 into main Oct 21, 2024
22 of 24 checks passed
@freddyaboulton freddyaboulton deleted the visible-tabs branch October 21, 2024 23:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tab visibility attribute problem in gradio v5
5 participants