Fix gr.Plot change/load events and plotly css loaded

.changeset/blue-olives-fry.md

@@ -0,0 +1,6 @@
+---
+"@gradio/plot": patch
+"gradio": patch
+---
+
+fix:Fix gr.Plot change/load events and plotly css loaded

gradio/components/plot.py

@@ -39,7 +39,7 @@ class Plot(Component):
     """
 
     data_model = PlotData
-    EVENTS = [Events.change, Events.clear]
+    EVENTS = [Events.change]
 
     def __init__(
         self,

guides/10_other-tutorials/developing-faster-with-reload-mode.md

@@ -161,6 +161,8 @@ Here's what it looks like in a jupyter notebook:
 
 🪄 This works in colab notebooks too! [Here's a colab notebook](https://colab.research.google.com/drive/1zAuWoiTIb3O2oitbtVb2_ekv1K6ggtC1?usp=sharing) where you can see the Blocks magic in action. Try making some changes and re-running the cell with the Gradio code!
 
+Tip: You may have to use `%%blocks --share` in Colab to get the demo to appear in the cell.
+
 The Notebook Magic is now the author's preferred way of building Gradio demos. Regardless of how you write Python code, we hope either of these methods will give you a much better development experience using Gradio.
 
 ---

js/plot/Plot.component.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect } from "@playwright/experimental-ct-svelte";
+import Plot from "./Index.svelte";
+import type { LoadingStatus } from "@gradio/statustracker";
+import { matplotlib_plot } from "./testplot";
+
+const loading_status: LoadingStatus = {
+	eta: 0,
+	queue_position: 1,
+	queue_size: 1,
+	status: "complete",
+	scroll_to_output: false,
+	visible: true,
+	fn_index: 0,
+	show_progress: "full"
+};
+
+test("gr.Plot triggers load and change events correctly", async ({ mount }) => {
+	const events = {
+		change: 0
+	};
+
+	function event(name: "change") {
+		events[name] += 1;
+	}
+
+	const component = await mount(Plot, {
+		props: {
+			value: { plot: matplotlib_plot, type: "matplotlib" },
+			label: "My Plot",
+			show_label: true,
+			loading_status: loading_status,
+			theme_mode: "light",
+			caption: "",
+			bokeh_version: null,
+			show_actions_button: false,
+			_selectable: false,
+			x_lim: null,
+			gradio: {
+				dispatch: event,
+				i18n: (x: string) => x,
+				autoscroll: "false"
+			}
+		}
+	});
+
+	await component.update({
+		props: {
+			value: { plot: "fooo", type: "matplotlib" }
+		}
+	});
+
+	expect(events.change).toEqual(1);
+});

js/plot/shared/Plot.svelte

@@ -4,6 +4,7 @@
 	import { Empty } from "@gradio/atoms";
 	import type { ThemeMode } from "js/core/src/components/types";
 	import type { Gradio, SelectData } from "@gradio/utils";
+	import { createEventDispatcher } from "svelte";
 
 	export let value;
 	let _value;
@@ -21,6 +22,11 @@
 
 	let PlotComponent: any = null;
 	let _type = value?.type;
+	let loaded_plotly_css = false;
+
+	const dispatch = createEventDispatcher<{
+		change: undefined;
+	}>();
 
 	const plotTypeMapping = {
 		plotly: () => import("./plot_types/PlotlyPlot.svelte"),
@@ -52,6 +58,7 @@
 		}
 		_value = value;
 		_type = type;
+		dispatch("change");
 	}
 </script>
 
@@ -69,6 +76,7 @@
 			{gradio}
 			{_selectable}
 			{x_lim}
+			bind:loaded_plotly_css
 			on:load
 			on:select
 		/>

js/plot/shared/plot_types/PlotlyPlot.svelte

@@ -5,6 +5,7 @@
 
 	export let value;
 	export let show_label: boolean;
+	export let loaded_plotly_css = false;
 
 	$: plot = value?.plot;
 
@@ -14,13 +15,14 @@
 	const dispatch = createEventDispatcher<{ load: undefined }>();
 
 	function load_plotly_css(): void {
-		if (!plotly_global_style) {
+		if (!loaded_plotly_css) {
 			plotly_global_style = document.getElementById("plotly.js-style-global");
 			const plotly_style_clone = plotly_global_style.cloneNode();
 			plot_div.appendChild(plotly_style_clone);
 			for (const rule of plotly_global_style.sheet.cssRules) {
 				plotly_style_clone.sheet.insertRule(rule.cssText);
 			}
+			loaded_plotly_css = true;
 		}
 	}