Fixes plotly css issues (#2486)

* fix plotly css

* changelong

CHANGELOG.md

@@ -4,7 +4,7 @@
 No changes to highlight.
 
 ## Bug Fixes:
-No changes to highlight.
+* Fixes issue where plotly animations, interactivity, titles, legends, were not working properly. [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 2486](https://github.com/gradio-app/gradio/pull/2486)
 
 ## Documentation Changes:
 No changes to highlight.
@@ -18,6 +18,7 @@ No changes to highlight.
 ## Full Changelog:
 * Fixes the error message if a user builds Gradio locally and tries to use `share=True` by [@abidlabs](https://github.com/abidlabs) in [PR 2502](https://github.com/gradio-app/gradio/pull/2502)
 * Allows the render() function to return self by [@Raul9595](https://github.com/Raul9595) in [PR 2514](https://github.com/gradio-app/gradio/pull/2514)
+* Fixes issue where plotly animations, interactivity, titles, legends, were not working properly. [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 2486](https://github.com/gradio-app/gradio/pull/2486)
 
 ## Contributors Shoutout:
 No changes to highlight.

ui/packages/app/src/Blocks.svelte

@@ -450,6 +450,7 @@
 				{dynamic_ids}
 				{instance_map}
 				{root}
+				{target}
 				on:mount={handle_mount}
 				on:destroy={({ detail }) => handle_destroy(detail)}
 			/>

ui/packages/app/src/Render.svelte

@@ -13,6 +13,7 @@
 	export let dynamic_ids: Set<number>;
 	export let has_modes: boolean | undefined;
 	export let parent: string | null = null;
+	export let target: HTMLElement;
 
 	const dispatch = createEventDispatcher<{ mount: number; destroy: number }>();
 
@@ -53,6 +54,7 @@
 	bind:value={instance_map[id].props.value}
 	elem_id={("elem_id" in props && props.elem_id) || `component-${id}`}
 	on:prop_change={handle_prop_change}
+	{target}
 	{...props}
 	{root}
 >
@@ -60,6 +62,7 @@
 		{#each children as { component, id: each_id, props, children: _children, has_modes } (each_id)}
 			<svelte:self
 				{component}
+				{target}
 				id={each_id}
 				{props}
 				{root}

ui/packages/app/src/components/Plot/Plot.svelte

@@ -15,6 +15,7 @@
 	export let loading_status: LoadingStatus;
 	export let label: string;
 	export let show_label: boolean;
+	export let target: HTMLElement;
 </script>
 
 <Block padding={false} {elem_id} {visible}>
@@ -22,5 +23,5 @@
 
 	<StatusTracker {...loading_status} />
 
-	<Plot {value} on:change />
+	<Plot {value} {target} on:change />
 </Block>

ui/packages/plot/src/Plot.svelte

@@ -6,9 +6,11 @@
 	import { afterUpdate, onDestroy } from "svelte";
 
 	export let value;
+	export let target;
 
 	// Plotly
 	let plotDiv;
+	let plotlyGlobalStyle;
 
 	const main_src = "https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js";
 
@@ -39,6 +41,17 @@
 		return script;
 	}
 
+	function load_plotly_css() {
+		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);
+				}
+			}
+	}
+
 	const main_script = load_bokeh();
 
 	let plugin_scripts = [];
@@ -71,9 +84,9 @@
 		window.Bokeh.embed.embed_item(plotObj, "bokehDiv");
 	});
 
-	// Plotly
 	afterUpdate(() => {
 		if (value && value["type"] == "plotly") {
+			load_plotly_css();
 			let plotObj = JSON.parse(value["plot"]);
 			Plotly.react(plotDiv, plotObj);
 		} else if (value && value["type"] == "bokeh") {