UI lags/skips when scrolling DataFrame output with large text

mitanshu7 commented 1 month ago

Describe the bug

I have a dataframes where one row has many words in it than the other columns. please see video for the same.

https://github.com/user-attachments/assets/e866ad6a-e227-4a82-8ec4-88446cc60615

Have you searched existing issues? 🔎

[X] I have searched and found no existing issues

Reproduction

import gradio as gr
import pandas as pd
import lorem
import random

# Generate a dataframe with random data, 5 rows, 5 columns, but one column has a lot of text
def generate_dataframe(n):
    data = {
        'Column 1': [random.randint(1, 100) for _ in range(n)],
        'Column 2': [random.randint(1, 100) for _ in range(n)],
        'Column 3': [lorem.paragraph()*5

 for _ in range(n)],
        'Column 4': [random.randint(1, 100) for _ in range(n)],
        'Column 5': [lorem.sentence()  for _ in range(n)],
    }
    return pd.DataFrame(data)

with gr.Blocks(theme=gr.themes.Soft()) as demo:

    # Title
    gr.Markdown(f"# {lorem.sentence()}")
    # Description
    gr.Markdown(f"## {lorem.paragraph()*2}")

    # Input Section
    with gr.Row():
        # Slider for results count
        slider_input = gr.Slider(label="Number of rows"),

    # Output Section
    with gr.Row():
        # Dataframe for results
        dataframe_output = gr.DataFrame(wrap=True)

    # Button to trigger the search
    with gr.Row():
        submit_btn = gr.Button("Show")

    # Link button click to the prediction function
    submit_btn.click(generate_dataframe, slider_input, dataframe_output)

# demo = gr.Interface(
#     fn=generate_dataframe,
#     inputs=gr.Slider(label="Number of rows"),
#     outputs=gr.DataFrame(wrap=True),
# )

demo.launch()

Screenshot

No response

Logs

No response

System Info

$ gradio environment
Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.44.1
gradio_client version: 1.3.0

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
anyio: 4.6.0
fastapi: 0.115.0
ffmpy: 0.4.0
gradio-client==1.3.0 is not installed.
httpx: 0.27.2
huggingface-hub: 0.25.1
importlib-resources: 6.4.5
jinja2: 3.1.4
markupsafe: 2.1.5
matplotlib: 3.9.2
numpy: 2.1.1
orjson: 3.10.7
packaging: 24.1
pandas: 2.2.3
pillow: 10.4.0
pydantic: 2.9.2
pydub: 0.25.1
python-multipart: 0.0.12
pyyaml: 6.0.2
ruff: 0.6.8
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.5
typing-extensions: 4.12.2
urllib3: 2.2.3
uvicorn: 0.31.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.9.0
httpx: 0.27.2
huggingface-hub: 0.25.1
packaging: 24.1
typing-extensions: 4.12.2
websockets: 12.0

Severity

Blocking usage of gradio

albertvillanova commented 1 month ago

I have found the same issue: when an long output Dataframe is rendered, scrolling through it is buggy: the height of the rendered Dataframe increases and decreases while scrolling.

I have tried passing several parameters without success: fill_height to Block, height and row_count to Dataframe,...

See example: https://huggingface.co/spaces/albertvillanova/bug-gradio-dataframe-scrolling

Press Load button
Scroll through the Dataframe

If you look at the other tab, called "JSON", you have the same data rendered in JSON format: the entire height is rendered in this case

Would it be possible to pass a parameter to render all the rows of the Dataframe, similarly as the JSON rendering does? I mean, to render the complete height of the Dataframe.

mitanshu7 commented 1 month ago

Hello!

I found a workaround for it.

I convert the pandas.DataFrame to HTML using .to_html() method, and also modify the output gradio component to show HTML. This solved my issue of scrolling since now the ouput is a simple table.

Edit: @albertvillanova, I tried this on your HF Space and it worked fine. Code changes:

...
    return pd.json_normalize([DATA]).iloc[0].rename_axis("Parameters").rename("Model-1").to_frame().reset_index().to_html(index=False)
...
    with gr.Tab("Dataframe"):
        dataframe = gr.HTML()

See screenshot below.

jhabr commented 3 weeks ago

@mitanshu7 this workaround might fix the scrolling/"jumping" issue but the resulting table is no longer clickable (since it's raw html table) :/

gradio-app / gradio