mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-24 10:54:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Allow smoother plot changes (#9781)

Browse Source 
* changes

* add changeset

* changes

---------

Co-authored-by: Ali Abid <aliabid94@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
aliabid94 2024-10-21 16:15:04 -07:00 committed by GitHub
parent df34f58c3d
commit 7579e92971
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/salty-showers-study.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/plot": minor
"gradio": minor
---
feat:Allow smoother plot changes

52
js/plot/shared/Plot.svelte
View File

@ -6,6 +6,7 @@
import type { Gradio, SelectData } from "@gradio/utils";
export let value;
let _value;
export let colors: string[] = [];
export let theme_mode: ThemeMode;
export let caption: string;
@ -27,36 +28,49 @@
matplotlib: () => import("./plot_types/MatplotlibPlot.svelte")
};
const is_browser = typeof window !== "undefined";
let loadedPlotTypeMapping = {};
$: {
const is_browser = typeof window !== "undefined";
let key = 0;
$: if (value !== _value) {
key += 1;
let type = value?.type;
if (type !== _type) {
PlotComponent = null;
}
if (type && type in plotTypeMapping && is_browser) {
plotTypeMapping[type]().then((module) => {
PlotComponent = module.default;
});
if (loadedPlotTypeMapping[type]) {
PlotComponent = loadedPlotTypeMapping[type];
} else {
plotTypeMapping[type]().then((module) => {
PlotComponent = module.default;
loadedPlotTypeMapping[type] = PlotComponent;
});
}
}
_value = value;
_type = type;
}
</script>
{#if value && PlotComponent}
<svelte:component
this={PlotComponent}
{value}
{colors}
{theme_mode}
{caption}
{bokeh_version}
{show_actions_button}
{gradio}
{_selectable}
{x_lim}
on:load
on:select
/>
{#key key}
<svelte:component
this={PlotComponent}
{value}
{colors}
{theme_mode}
{caption}
{bokeh_version}
{show_actions_button}
{gradio}
{_selectable}
{x_lim}
on:load
on:select
/>
{/key}
{:else}
<Empty unpadded_box={true} size="large"><PlotIcon /></Empty>
{/if}