Improve plot rendering

.changeset/eleven-kings-knock.md

@@ -0,0 +1,6 @@
+---
+"@gradio/plot": minor
+"gradio": minor
+---
+
+feat:Improve plot rendering

demo/dashboard/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: dashboard\n", "### This demo shows how you can build an interactive dashboard with gradio. Click on a python library on the left hand side and then on the right hand side click on the metric you'd like to see plot over time. Data is pulled from HuggingFace Hub datasets.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/dashboard/helpers.py"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import plotly.express as px\n", "from helpers import *\n", "\n", "\n", "LIBRARIES = [\"accelerate\", \"datasets\", \"diffusers\", \"evaluate\", \"gradio\", \"hub_docs\",\n", "             \"huggingface_hub\", \"optimum\", \"pytorch_image_models\", \"tokenizers\", \"transformers\"]\n", "\n", "\n", "def create_pip_plot(libraries, pip_choices):\n", "    if \"Pip\" not in pip_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_pip_installs(libraries, \"Cumulated\" in pip_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Pip installs\")\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "def create_star_plot(libraries, star_choices):\n", "    if \"Stars\" not in star_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_stars(libraries, \"Week over Week\" in star_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Number of stargazers\")\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "def create_issue_plot(libraries, issue_choices):\n", "    if \"Issue\" not in issue_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_issues(libraries,\n", "                             exclude_org_members=\"Exclude org members\" in issue_choices,\n", "                             week_over_week=\"Week over Week\" in issue_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Cumulated number of issues, PRs, and comments\",\n", "                   )\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Markdown(\"## Select libraries to display\")\n", "            libraries = gr.CheckboxGroup(choices=LIBRARIES, label=\"\")\n", "        with gr.Column():\n", "            gr.Markdown(\"## Select graphs to display\")\n", "            pip = gr.CheckboxGroup(choices=[\"Pip\", \"Cumulated\"], label=\"\")\n", "            stars = gr.CheckboxGroup(choices=[\"Stars\", \"Week over Week\"], label=\"\")\n", "            issues = gr.CheckboxGroup(choices=[\"Issue\", \"Exclude org members\", \"week over week\"], label=\"\")\n", "    with gr.Row():\n", "        fetch = gr.Button(value=\"Fetch\")\n", "    with gr.Row():\n", "        with gr.Column():\n", "            pip_plot = gr.Plot(visible=False)\n", "            star_plot = gr.Plot(visible=False)\n", "            issue_plot = gr.Plot(visible=False)\n", "\n", "    fetch.click(create_pip_plot, inputs=[libraries, pip], outputs=pip_plot)\n", "    fetch.click(create_star_plot, inputs=[libraries, stars], outputs=star_plot)\n", "    fetch.click(create_issue_plot, inputs=[libraries, issues], outputs=issue_plot)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: dashboard\n", "### This demo shows how you can build an interactive dashboard with gradio. Click on a python library on the left hand side and then on the right hand side click on the metric you'd like to see plot over time. Data is pulled from HuggingFace Hub datasets.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/dashboard/helpers.py"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import plotly.express as px\n", "from helpers import *\n", "\n", "\n", "LIBRARIES = [\"accelerate\", \"datasets\", \"diffusers\", \"evaluate\", \"gradio\", \"hub_docs\",\n", "             \"huggingface_hub\", \"optimum\", \"pytorch_image_models\", \"tokenizers\", \"transformers\"]\n", "\n", "\n", "def create_pip_plot(libraries, pip_choices):\n", "    if \"Pip\" not in pip_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_pip_installs(libraries, \"Cumulated\" in pip_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Pip installs\")\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "def create_star_plot(libraries, star_choices):\n", "    if \"Stars\" not in star_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_stars(libraries, \"Week over Week\" in star_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Number of stargazers\")\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "def create_issue_plot(libraries, issue_choices):\n", "    if \"Issue\" not in issue_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_issues(libraries,\n", "                             exclude_org_members=\"Exclude org members\" in issue_choices,\n", "                             week_over_week=\"Week over Week\" in issue_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Cumulated number of issues, PRs, and comments\",\n", "                   )\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Markdown(\"## Select libraries to display\")\n", "            libraries = gr.CheckboxGroup(choices=LIBRARIES, show_label=False)\n", "        with gr.Column():\n", "            gr.Markdown(\"## Select graphs to display\")\n", "            pip = gr.CheckboxGroup(choices=[\"Pip\", \"Cumulated\"], show_label=False)\n", "            stars = gr.CheckboxGroup(choices=[\"Stars\", \"Week over Week\"], show_label=False)\n", "            issues = gr.CheckboxGroup(choices=[\"Issue\", \"Exclude org members\", \"week over week\"], show_label=False)\n", "    with gr.Row():\n", "        fetch = gr.Button(value=\"Fetch\")\n", "    with gr.Row():\n", "        with gr.Column():\n", "            pip_plot = gr.Plot(visible=False)\n", "            star_plot = gr.Plot(visible=False)\n", "            issue_plot = gr.Plot(visible=False)\n", "\n", "    fetch.click(create_pip_plot, inputs=[libraries, pip], outputs=pip_plot)\n", "    fetch.click(create_star_plot, inputs=[libraries, stars], outputs=star_plot)\n", "    fetch.click(create_issue_plot, inputs=[libraries, issues], outputs=issue_plot)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/dashboard/run.py

@@ -48,12 +48,12 @@ def create_issue_plot(libraries, issue_choices):
     with gr.Row():
         with gr.Column():
             gr.Markdown("## Select libraries to display")
-            libraries = gr.CheckboxGroup(choices=LIBRARIES, label="")
+            libraries = gr.CheckboxGroup(choices=LIBRARIES, show_label=False)
         with gr.Column():
             gr.Markdown("## Select graphs to display")
-            pip = gr.CheckboxGroup(choices=["Pip", "Cumulated"], label="")
-            stars = gr.CheckboxGroup(choices=["Stars", "Week over Week"], label="")
-            issues = gr.CheckboxGroup(choices=["Issue", "Exclude org members", "week over week"], label="")
+            pip = gr.CheckboxGroup(choices=["Pip", "Cumulated"], show_label=False)
+            stars = gr.CheckboxGroup(choices=["Stars", "Week over Week"], show_label=False)
+            issues = gr.CheckboxGroup(choices=["Issue", "Exclude org members", "week over week"], show_label=False)
     with gr.Row():
         fetch = gr.Button(value="Fetch")
     with gr.Row():

demo/native_plots/bar_plot_demo.py

@@ -106,6 +106,6 @@ def bar_plot_fn(display):
                 label="Type of Bar Plot"
             )
         with gr.Column():
-            plot = gr.BarPlot(show_label=False)
+            plot = gr.BarPlot(show_label=False, show_actions_button=True)
     display.change(bar_plot_fn, inputs=display, outputs=plot)
     bar_plot.load(fn=bar_plot_fn, inputs=display, outputs=plot)

demo/native_plots/line_plot_demo.py

@@ -85,7 +85,7 @@ def line_plot_fn(dataset):
                 value="stocks",
             )
         with gr.Column():
-            plot = gr.LinePlot(show_label=False, container=False)
+            plot = gr.LinePlot()
     dataset.change(line_plot_fn, inputs=dataset, outputs=plot)
     line_plot.load(fn=line_plot_fn, inputs=dataset, outputs=plot)
 

gradio/components/bar_plot.py

@@ -70,6 +70,7 @@ def __init__(
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         sort: Literal["x", "y", "-x", "-y"] | None = None,
+        show_actions_button: bool = False,
         **kwargs,
     ):
         """
@@ -101,6 +102,7 @@ def __init__(
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             sort: Specifies the sorting axis as either "x", "y", "-x" or "-y". If None, no sorting is applied.
+            show_actions_button: Whether to show the actions button on the top right corner of the plot.
         """
         self.x = x
         self.y = y
@@ -123,6 +125,7 @@ def __init__(
         self.width = width
         self.height = height
         self.sort = sort
+        self.show_actions_button = show_actions_button
         super().__init__(
             value=value,
             label=label,

gradio/components/line_plot.py

@@ -82,6 +82,7 @@ def __init__(
         visible: bool = True,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
+        show_actions_button: bool = False,
         **kwargs,
     ):
         """
@@ -114,6 +115,7 @@ def __init__(
             visible: Whether the plot should be visible.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            show_actions_button: Whether to show the actions button on the top right corner of the plot.
         """
         self.x = x
         self.y = y
@@ -136,6 +138,7 @@ def __init__(
         self.interactive_chart = interactive
         self.width = width
         self.height = height
+        self.show_actions_button = show_actions_button
         super().__init__(
             value=value,
             label=label,

gradio/components/scatter_plot.py

@@ -97,6 +97,7 @@ def __init__(
         visible: bool = True,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
+        show_actions_button: bool = False,
         **kwargs,
     ):
         """
@@ -131,6 +132,7 @@ def __init__(
             visible: Whether the plot should be visible.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            show_actions_button: Whether to show the actions button on the top right corner of the plot.
         """
         self.x = x
         self.y = y
@@ -155,6 +157,7 @@ def __init__(
         self.height = height
         self.x_lim = x_lim
         self.y_lim = y_lim
+        self.show_actions_button = show_actions_button
         super().__init__(
             value=value,
             label=label,

js/plot/static/Plot.svelte

@@ -17,6 +17,7 @@
 	export let theme_mode: ThemeMode;
 	export let caption: string;
 	export let bokeh_version: string | null;
+	export let show_actions_button: bool;
 	const divId = `bokehDiv-${Math.random().toString(5).substring(2)}`;
 
 	function get_color(index: number): string {
@@ -192,7 +193,7 @@
 	<div data-testid={"bokeh"} id={divId} class="gradio-bokeh" />
 {:else if type == "altair"}
 	<div data-testid={"altair"} class="altair layout">
-		<Vega {spec} />
+		<Vega {spec} options={{ actions: show_actions_button }} />
 		{#if caption}
 			<div class="caption layout">
 				{caption}
@@ -208,6 +209,16 @@
 {/if}
 
 <style>
+	.altair :global(canvas) {
+		max-width: 100%;
+		padding: 6px;
+	}
+	.altair :global(.vega-embed) {
+		padding: 0px !important;
+	}
+	.altair :global(.vega-actions) {
+		right: 0px !important;
+	}
 	.gradio-bokeh {
 		display: flex;
 		justify-content: center;
@@ -233,6 +244,7 @@
 
 	.caption {
 		font-size: var(--text-sm);
+		margin-bottom: 6px;
 	}
 
 	.matplotlib img {

js/plot/static/StaticPlot.svelte

@@ -27,6 +27,7 @@
 	export let gradio: Gradio<{
 		change: never;
 	}>;
+	export let show_actions_button = false;
 </script>
 
 <Block
@@ -37,6 +38,7 @@
 	{container}
 	{scale}
 	{min_width}
+	allow_overflow={false}
 >
 	<BlockLabel {show_label} label={label || $_("plot.plot")} Icon={PlotIcon} />
 	<StatusTracker {...loading_status} />
@@ -46,6 +48,7 @@
 		{theme_mode}
 		{caption}
 		{bokeh_version}
+		{show_actions_button}
 		on:change={() => gradio.dispatch("change")}
 	/>
 </Block>

test/test_components.py

@@ -2441,6 +2441,7 @@ def test_get_config(self):
             "label": None,
             "name": "plot",
             "bokeh_version": "3.0.3",
+            "show_actions_button": False,
             "root_url": None,
             "show_label": True,
             "container": True,
@@ -2642,6 +2643,7 @@ def test_get_config(self):
             "label": None,
             "name": "plot",
             "bokeh_version": "3.0.3",
+            "show_actions_button": False,
             "root_url": None,
             "show_label": True,
             "container": True,
@@ -2827,6 +2829,7 @@ def test_get_config(self):
             "label": None,
             "name": "plot",
             "bokeh_version": "3.0.3",
+            "show_actions_button": False,
             "root_url": None,
             "show_label": True,
             "container": True,