mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-02-17 11:29:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Change the afterUpdate code in Plot to use a binding to get the div when using plotly (#1565)

Browse Source 
Co-authored-by: Ian Gonzalez <ian.gl@protonmail.com>
This commit is contained in:
Ian González 2022-06-15 08:40:00 -06:00 committed by GitHub
parent c963081dd8
commit 78af573990
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/packages/plot/src/Plot.svelte
View File

@ -14,11 +14,14 @@
import Plotly from "plotly.js-dist-min";
import { Plot as PlotIcon } from "@gradio/icons";
import { afterUpdate, onMount } from "svelte";
import { afterUpdate } from "svelte";
export let value: null | string;
export let theme: string;
// Plotly
let plotDiv;
// Bokeh
let bokehLoaded = false
const resolves = []
@ -50,7 +53,6 @@
afterUpdate(() => {
if (value && value["type"] == "plotly") {
let plotObj = JSON.parse(value["plot"]);
let plotDiv = document.getElementById("plotlyDiv");
Plotly.newPlot(plotDiv, plotObj["data"], plotObj["layout"]);
} else if (value && value["type"] == "bokeh") {
document.getElementById("bokehDiv").innerHTML = "";
@ -61,16 +63,16 @@
</script>
{#if value && value["type"] == "plotly"}
<div id="plotlyDiv"/>
<div bind:this={plotDiv}/>
{:else if value && value["type"] == "bokeh"}
<div id="bokehDiv"/>
{:else if value && value["type"] == "matplotlib"}
<div
class="output-image w-full flex justify-center items-center relative"
class="output-image w-full flex justify-center items-center relative"
{theme}
>
<!-- svelte-ignore a11y-missing-attribute -->
<img class="w-full max-h-[30rem] object-contain" src={value["plot"]} />
<img class="w-full max-h-[30rem] object-contain" src={value["plot"]} />
</div>
{:else}
<div class="h-full min-h-[15rem] flex justify-center items-center">