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.

Sign up for GitHub

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

Prevent bokeh from injecting bokeh js multiple times #5795

Merged
merged 10 commits into from
Oct 5, 2023
Merged

Prevent bokeh from injecting bokeh js multiple times #5795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
15c500d
remove dep line in demo
abidlabs Oct 4, 2023
4e7b368
linting
abidlabs Oct 4, 2023
f31a003
linting
abidlabs Oct 4, 2023
2f690fc
fix
abidlabs Oct 4, 2023
c436adb
merge
abidlabs Oct 4, 2023
375775e
add changeset
gradio-pr-bot Oct 4, 2023
5828a24
lint
abidlabs Oct 4, 2023
76eec00
Merge branch 'bokeh-fix' of github.com:gradio-app/gradio into bokeh-fix
abidlabs Oct 4, 2023
fd8ef95
notebook:
abidlabs Oct 4, 2023
2932ef5
Merge branch 'main' into bokeh-fix
abidlabs Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/big-worms-hug.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@gradio/plot": patch
"gradio": patch
---

fix:Prevent bokeh from injecting bokeh js multiple times
2 changes: 1 addition & 1 deletion demo/bokeh_plot/run.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: bokeh_plot"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio bokeh>=3.0 xyzservices"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import xyzservices.providers as xyz\n", "from bokeh.tile_providers import get_provider\n", "from bokeh.models import ColumnDataSource, Whisker\n", "from bokeh.plotting import figure\n", "from bokeh.sampledata.autompg2 import autompg2 as df\n", "from bokeh.sampledata.penguins import data\n", "from bokeh.transform import factor_cmap, jitter, factor_mark\n", "\n", "\n", "def get_plot(plot_type):\n", " if plot_type == \"map\":\n", " tile_provider = get_provider(xyz.OpenStreetMap.Mapnik)\n", " plot = figure(\n", " x_range=(-2000000, 6000000),\n", " y_range=(-1000000, 7000000),\n", " x_axis_type=\"mercator\",\n", " y_axis_type=\"mercator\",\n", " )\n", " plot.add_tile(tile_provider)\n", " return plot\n", " elif plot_type == \"whisker\":\n", " classes = list(sorted(df[\"class\"].unique()))\n", "\n", " p = figure(\n", " height=400,\n", " x_range=classes,\n", " background_fill_color=\"#efefef\",\n", " title=\"Car class vs HWY mpg with quintile ranges\",\n", " )\n", " p.xgrid.grid_line_color = None\n", "\n", " g = df.groupby(\"class\")\n", " upper = g.hwy.quantile(0.80)\n", " lower = g.hwy.quantile(0.20)\n", " source = ColumnDataSource(data=dict(base=classes, upper=upper, lower=lower))\n", "\n", " error = Whisker(\n", " base=\"base\",\n", " upper=\"upper\",\n", " lower=\"lower\",\n", " source=source,\n", " level=\"annotation\",\n", " line_width=2,\n", " )\n", " error.upper_head.size = 20\n", " error.lower_head.size = 20\n", " p.add_layout(error)\n", "\n", " p.circle(\n", " jitter(\"class\", 0.3, range=p.x_range),\n", " \"hwy\",\n", " source=df,\n", " alpha=0.5,\n", " size=13,\n", " line_color=\"white\",\n", " color=factor_cmap(\"class\", \"Light6\", classes),\n", " )\n", " return p\n", " elif plot_type == \"scatter\":\n", "\n", " SPECIES = sorted(data.species.unique())\n", " MARKERS = [\"hex\", \"circle_x\", \"triangle\"]\n", "\n", " p = figure(title=\"Penguin size\", background_fill_color=\"#fafafa\")\n", " p.xaxis.axis_label = \"Flipper Length (mm)\"\n", " p.yaxis.axis_label = \"Body Mass (g)\"\n", "\n", " p.scatter(\n", " \"flipper_length_mm\",\n", " \"body_mass_g\",\n", " source=data,\n", " legend_group=\"species\",\n", " fill_alpha=0.4,\n", " size=12,\n", " marker=factor_mark(\"species\", MARKERS, SPECIES),\n", " color=factor_cmap(\"species\", \"Category10_3\", SPECIES),\n", " )\n", "\n", " p.legend.location = \"top_left\"\n", " p.legend.title = \"Species\"\n", " return p\n", "\n", "with gr.Blocks() as demo:\n", " with gr.Row():\n", " plot_type = gr.Radio(value=\"scatter\", choices=[\"scatter\", \"whisker\", \"map\"])\n", " plot = gr.Plot()\n", " plot_type.change(get_plot, inputs=[plot_type], outputs=[plot])\n", " demo.load(get_plot, inputs=[plot_type], outputs=[plot])\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: bokeh_plot"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio bokeh>=3.0 xyzservices"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import xyzservices.providers as xyz\n", "from bokeh.models import ColumnDataSource, Whisker\n", "from bokeh.plotting import figure\n", "from bokeh.sampledata.autompg2 import autompg2 as df\n", "from bokeh.sampledata.penguins import data\n", "from bokeh.transform import factor_cmap, jitter, factor_mark\n", "\n", "\n", "def get_plot(plot_type):\n", " if plot_type == \"map\":\n", " plot = figure(\n", " x_range=(-2000000, 6000000),\n", " y_range=(-1000000, 7000000),\n", " x_axis_type=\"mercator\",\n", " y_axis_type=\"mercator\",\n", " )\n", " plot.add_tile(xyz.OpenStreetMap.Mapnik)\n", " return plot\n", " elif plot_type == \"whisker\":\n", " classes = list(sorted(df[\"class\"].unique()))\n", "\n", " p = figure(\n", " height=400,\n", " x_range=classes,\n", " background_fill_color=\"#efefef\",\n", " title=\"Car class vs HWY mpg with quintile ranges\",\n", " )\n", " p.xgrid.grid_line_color = None\n", "\n", " g = df.groupby(\"class\")\n", " upper = g.hwy.quantile(0.80)\n", " lower = g.hwy.quantile(0.20)\n", " source = ColumnDataSource(data=dict(base=classes, upper=upper, lower=lower))\n", "\n", " error = Whisker(\n", " base=\"base\",\n", " upper=\"upper\",\n", " lower=\"lower\",\n", " source=source,\n", " level=\"annotation\",\n", " line_width=2,\n", " )\n", " error.upper_head.size = 20\n", " error.lower_head.size = 20\n", " p.add_layout(error)\n", "\n", " p.circle(\n", " jitter(\"class\", 0.3, range=p.x_range),\n", " \"hwy\",\n", " source=df,\n", " alpha=0.5,\n", " size=13,\n", " line_color=\"white\",\n", " color=factor_cmap(\"class\", \"Light6\", classes),\n", " )\n", " return p\n", " elif plot_type == \"scatter\":\n", "\n", " SPECIES = sorted(data.species.unique())\n", " MARKERS = [\"hex\", \"circle_x\", \"triangle\"]\n", "\n", " p = figure(title=\"Penguin size\", background_fill_color=\"#fafafa\")\n", " p.xaxis.axis_label = \"Flipper Length (mm)\"\n", " p.yaxis.axis_label = \"Body Mass (g)\"\n", "\n", " p.scatter(\n", " \"flipper_length_mm\",\n", " \"body_mass_g\",\n", " source=data,\n", " legend_group=\"species\",\n", " fill_alpha=0.4,\n", " size=12,\n", " marker=factor_mark(\"species\", MARKERS, SPECIES),\n", " color=factor_cmap(\"species\", \"Category10_3\", SPECIES),\n", " )\n", "\n", " p.legend.location = \"top_left\"\n", " p.legend.title = \"Species\"\n", " return p\n", "\n", "with gr.Blocks() as demo:\n", " with gr.Row():\n", " plot_type = gr.Radio(value=\"scatter\", choices=[\"scatter\", \"whisker\", \"map\"])\n", " plot = gr.Plot()\n", " plot_type.change(get_plot, inputs=[plot_type], outputs=[plot])\n", " demo.load(get_plot, inputs=[plot_type], outputs=[plot])\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
4 changes: 1 addition & 3 deletions demo/bokeh_plot/run.py
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

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

Removes deprecated bokeh syntax

Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import gradio as gr
import xyzservices.providers as xyz
from bokeh.tile_providers import get_provider
from bokeh.models import ColumnDataSource, Whisker
from bokeh.plotting import figure
from bokeh.sampledata.autompg2 import autompg2 as df
Expand All @@ -10,14 +9,13 @@

def get_plot(plot_type):
if plot_type == "map":
tile_provider = get_provider(xyz.OpenStreetMap.Mapnik)
plot = figure(
x_range=(-2000000, 6000000),
y_range=(-1000000, 7000000),
x_axis_type="mercator",
y_axis_type="mercator",
)
plot.add_tile(tile_provider)
plot.add_tile(xyz.OpenStreetMap.Mapnik)
return plot
elif plot_type == "whisker":
classes = list(sorted(df["class"].unique()))
Expand Down
72 changes: 27 additions & 45 deletions js/plot/static/Plot.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
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)}`;
const div_id = `bokehDiv-${Math.random().toString(5).substring(2)}`;

function get_color(index: number): string {
let current_color = colors[index % colors.length];
Expand All @@ -38,32 +38,20 @@
$: plot = value?.plot;
$: type = value?.type;

// Need to keep track of this because
// otherwise embed_bokeh may try to embed before
// bokeh is loaded
$: bokeh_loaded = window.Bokeh === undefined;

function embed_bokeh(
_plot: Record<string, any>,
_type: string,
_bokeh_loaded: boolean
): void {
function embed_bokeh(_plot: Record<string, any>, _type: string): void {
if (document) {
if (document.getElementById(divId)) {
document.getElementById(divId).innerHTML = "";
if (document.getElementById(div_id)) {
document.getElementById(div_id).innerHTML = "";
}
}
if (_type == "bokeh" && window.Bokeh) {
if (!_bokeh_loaded) {
load_bokeh();
bokeh_loaded = true;
}
load_bokeh();
let plotObj = JSON.parse(_plot);
window.Bokeh.embed.embed_item(plotObj, divId);
window.Bokeh.embed.embed_item(plotObj, div_id);
}
}

$: embed_bokeh(plot, type, bokeh_loaded);
$: embed_bokeh(plot, type);

$: if (type == "altair") {
spec = JSON.parse(plot);
Expand Down Expand Up @@ -108,22 +96,21 @@
}

// Plotly
let plotDiv;
let plotlyGlobalStyle;
let plot_div;
let plotly_global_style;

const main_src = `https://cdn.bokeh.org/bokeh/release/bokeh-${bokeh_version}.min.js`;

const plugins_src = [
`https://cdn.pydata.org/bokeh/release/bokeh-widgets-${bokeh_version}.min.js`,
`https://cdn.pydata.org/bokeh/release/bokeh-tables-${bokeh_version}.min.js`,
`https://cdn.pydata.org/bokeh/release/bokeh-gl-${bokeh_version}.min.js`,
`https://cdn.pydata.org/bokeh/release/bokeh-api-${bokeh_version}.min.js`,
`https://cdn.pydata.org/bokeh/release/bokeh-api-${bokeh_version}.min.js`
];

function load_plugins(): HTMLScriptElement[] {
return plugins_src.map((src, i) => {
const script = document.createElement("script");
script.onload = (): void => initializeBokeh(i + 1);
script.src = src;
document.head.appendChild(script);

Expand All @@ -133,20 +120,24 @@

function load_bokeh(): HTMLScriptElement {
const script = document.createElement("script");
script.onload = handleBokehLoaded;
script.onload = handle_bokeh_loaded;
script.src = main_src;
document.head.appendChild(script);
bokeh_loaded = true;
const is_bokeh_script_present = document.head.querySelector(
`script[src="${main_src}"]`
);
if (!is_bokeh_script_present) {
document.head.appendChild(script);
}
return script;
}

function load_plotly_css(): void {
if (!plotlyGlobalStyle) {
plotlyGlobalStyle = document.getElementById("plotly.js-style-global");
const plotlyStyleClone = plotlyGlobalStyle.cloneNode();
target.appendChild(plotlyStyleClone);
for (const rule of plotlyGlobalStyle.sheet.cssRules) {
plotlyStyleClone.sheet.insertRule(rule.cssText);
if (!plotly_global_style) {
plotly_global_style = document.getElementById("plotly.js-style-global");
const plotly_style_clone = plotly_global_style.cloneNode();
target.appendChild(plotly_style_clone);
for (const rule of plotly_global_style.sheet.cssRules) {
plotly_style_clone.sheet.insertRule(rule.cssText);
}
}
}
Expand All @@ -155,16 +146,7 @@

let plugin_scripts = [];

const resolves = [];

const initializeBokeh = (index): void => {
if (type == "bokeh") {
resolves[index]();
}
};

function handleBokehLoaded(): void {
initializeBokeh(0);
function handle_bokeh_loaded(): void {
plugin_scripts = load_plugins();
}

Expand All @@ -175,7 +157,7 @@
plotObj.layout.title
? (plotObj.layout.margin = { autoexpand: true })
: (plotObj.layout.margin = { l: 0, r: 0, b: 0, t: 0 });
Plotly.react(plotDiv, plotObj);
Plotly.react(plot_div, plotObj);
}
});

Expand All @@ -188,9 +170,9 @@
</script>

{#if value && type == "plotly"}
<div data-testid={"plotly"} bind:this={plotDiv} />
<div data-testid={"plotly"} bind:this={plot_div} />
{:else if type == "bokeh"}
<div data-testid={"bokeh"} id={divId} class="gradio-bokeh" />
<div data-testid={"bokeh"} id={div_id} class="gradio-bokeh" />
{:else if type == "altair"}
<div data-testid={"altair"} class="altair layout">
<Vega {spec} options={{ actions: show_actions_button }} />
Expand Down