gradio/frontend

1<script lang="ts">2	//@ts-nocheck3	import { Plot as PlotIcon } from "@gradio/icons";4	import { Empty } from "@gradio/atoms";5	import type { Gradio } from "@gradio/utils";6	import type { PlotEvents, PlotProps } from "../types";7	import { untrack } from "svelte";8 9	let { gradio }: { gradio: Gradio<PlotEvents, PlotProps> } = $props();10 11	let PlotComponent: any = $state(null);12	let loaded_plotly_css = $state(false);13	let key = $state(0);14 15	const plotTypeMapping = {16		plotly: () => import("./plot_types/PlotlyPlot.svelte"),17		bokeh: () => import("./plot_types/BokehPlot.svelte"),18		matplotlib: () => import("./plot_types/MatplotlibPlot.svelte"),19		altair: () => import("./plot_types/AltairPlot.svelte")20	};21 22	let loadedPlotTypeMapping = {};23 24	const is_browser = typeof window !== "undefined";25 26	let value = $derived(gradio.props.value);27	let _type = $state(null);28 29	$effect(() => {30		let type = value?.type;31		untrack(() => {32			key = key + 1;33			if (type !== _type) {34				PlotComponent = null;35			}36			if (type && type in plotTypeMapping && is_browser) {37				if (loadedPlotTypeMapping[type]) {38					PlotComponent = loadedPlotTypeMapping[type];39				} else {40					plotTypeMapping[type]().then((module) => {41						PlotComponent = module.default;42						loadedPlotTypeMapping[type] = PlotComponent;43					});44				}45			}46			_type = type;47		});48		gradio.dispatch("change");49	});50</script>51 52{#if gradio.props.value && PlotComponent}53	{#key key}54		<PlotComponent55			value={gradio.props.value}56			colors={[]}57			theme_mode={gradio.props.theme_mode}58			show_label={gradio.shared.show_label}59			caption={gradio.props.caption}60			bokeh_version={gradio.props.bokeh_version}61			show_actions_button={gradio.props.show_actions_button}62			{gradio}63			_selectable={gradio.props._selectable}64			x_lim={gradio.props.x_lim}65			bind:loaded_plotly_css66			on:select67		/>68	{/key}69{:else}70	<Empty unpadded_box={true} size="large"><PlotIcon /></Empty>71{/if}72