Fix plots (#9464)

* fix

* add changeset

* lint

* clean

* ts

* format

* add changeset

* format

* remove test that is wrong

* fixxxxxx

* add changeset

* format

---------

Co-authored-by: gradio-pr-bot <[email protected]>
Co-authored-by: Abubakar Abid <[email protected]>

.changeset/sweet-papers-fail.md

@@ -0,0 +1,9 @@
+---
+"@gradio/core": minor
+"@gradio/nativeplot": minor
+"@gradio/plot": minor
+"@self/spa": minor
+"gradio": minor
+---
+
+feat:Fix plots

.config/eslint.config.js

@@ -73,6 +73,7 @@ export default [
 			"js/spa/test/**/*",
 			"**/*vite.config.ts",
 			"**/_website/**/*",
+			"**/app/**/*",
 			"**/_spaces-test/**/*",
 			"**/preview/test/**/*",
 			"**/component-test/**/*",

client/js/src/test/init_helpers.test.ts

@@ -84,16 +84,6 @@ describe("determine_protocol", () => {
 			host: "lite.local"
 		});
 	});
-
-	it('should return the default protocols and host when the endpoint does not start with "http" or "file"', () => {
-		const endpoint = "huggingface.co";
-		const result = determine_protocol(endpoint);
-		expect(result).toEqual({
-			ws_protocol: "wss",
-			http_protocol: "https:",
-			host: "huggingface.co"
-		});
-	});
 });
 
 describe("parse_and_set_cookies", () => {

js/core/src/Blocks.svelte

@@ -45,8 +45,8 @@
 	export let fill_height = false;
 	export let ready: boolean;
 	export let username: string | null;
-	export let api_prefix: string;
-	export let max_file_size: number;
+	export let api_prefix = "";
+	export let max_file_size: number | undefined = undefined;
 	export let initial_layout: LayoutNode | undefined = undefined;
 
 	let {

js/nativeplot/Index.svelte

@@ -70,7 +70,6 @@
 	}
 	$: _sort = reformat_sort(sort);
 	export let _selectable = false;
-	export let target: HTMLDivElement;
 	let _data: {
 		[x: string]: string | number;
 	}[];
@@ -131,8 +130,9 @@
 
 	const is_browser = typeof window !== "undefined";
 	let chart_element: HTMLDivElement;
-	$: computed_style =
-		target && is_browser ? window.getComputedStyle(target) : null;
+	$: computed_style = chart_element
+		? window.getComputedStyle(chart_element)
+		: null;
 	let view: View;
 	let mounted = false;
 	let old_width: number;

js/plot/Index.svelte

@@ -21,7 +21,6 @@
 	export let loading_status: LoadingStatus;
 	export let label: string;
 	export let show_label: boolean;
-	export let target: HTMLElement;
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
@@ -61,7 +60,6 @@
 	/>
 	<Plot
 		{value}
-		{target}
 		{theme_mode}
 		{caption}
 		{bokeh_version}

js/plot/shared/Plot.svelte

@@ -6,7 +6,6 @@
 	import type { Gradio, SelectData } from "@gradio/utils";
 
 	export let value;
-	export let target: HTMLElement;
 	export let colors: string[] = [];
 	export let theme_mode: ThemeMode;
 	export let caption: string;
@@ -28,12 +27,14 @@
 		matplotlib: () => import("./plot_types/MatplotlibPlot.svelte")
 	};
 
+	const is_browser = typeof window !== "undefined";
+
 	$: {
 		let type = value?.type;
 		if (type !== _type) {
 			PlotComponent = null;
 		}
-		if (type && type in plotTypeMapping) {
+		if (type && type in plotTypeMapping && is_browser) {
 			plotTypeMapping[type]().then((module) => {
 				PlotComponent = module.default;
 			});
@@ -45,7 +46,6 @@
 	<svelte:component
 		this={PlotComponent}
 		{value}
-		{target}
 		{colors}
 		{theme_mode}
 		{caption}

js/plot/shared/plot_types/AltairPlot.svelte

@@ -8,7 +8,6 @@
 	import type { View } from "vega";
 
 	export let value;
-	export let target: HTMLDivElement;
 	export let colors: string[] = [];
 	export let caption: string;
 	export let show_actions_button: bool;
@@ -20,7 +19,7 @@
 	let view: View;
 	export let _selectable: bool;
 
-	let computed_style = window.getComputedStyle(target);
+	let computed_style = window.getComputedStyle(document.body);
 
 	let old_spec: Spec;
 	let spec_width: number;

js/plot/shared/plot_types/PlotlyPlot.svelte

@@ -4,7 +4,6 @@
 	import { afterUpdate, createEventDispatcher } from "svelte";
 
 	export let value;
-	export let target;
 
 	$: plot = value?.plot;
 
@@ -17,7 +16,7 @@
 		if (!plotly_global_style) {
 			plotly_global_style = document.getElementById("plotly.js-style-global");
 			const plotly_style_clone = plotly_global_style.cloneNode();
-			target.appendChild(plotly_style_clone);
+			plot_div.appendChild(plotly_style_clone);
 			for (const rule of plotly_global_style.sheet.cssRules) {
 				plotly_style_clone.sheet.insertRule(rule.cssText);
 			}

js/spa/src/Index.svelte

@@ -34,6 +34,7 @@
 		theme_hash?: number;
 		username: string | null;
 		api_prefix?: string;
+		max_file_size?: number;
 	}
 
 	let id = -1;
@@ -507,6 +508,8 @@
 			show_footer={!is_embed}
 			{app_mode}
 			{version}
+			api_prefix={config.api_prefix || ""}
+			max_file_size={config.max_file_size}
 			initial_layout={undefined}
 			search_params={new URLSearchParams(window.location.search)}
 		/>

js/spa/src/main.ts

@@ -112,7 +112,6 @@ function create_custom_element(): void {
 					// embed source
 					space: this.space ? this.space.trim() : this.space,
 					src: this.src ? this.src.trim() : this.src,
-					host: this.host ? this.host.trim() : this.host,
 					// embed info
 					info: this.info === "false" ? false : true,
 					container: this.container === "false" ? false : true,
@@ -179,7 +178,6 @@ function create_custom_element(): void {
 						// embed source
 						space: this.space ? this.space.trim() : this.space,
 						src: this.src ? this.src.trim() : this.src,
-						host: this.host ? this.host.trim() : this.host,
 						// embed info
 						info: this.info === "false" ? false : true,
 						container: this.container === "false" ? false : true,

tsconfig.json

@@ -35,6 +35,7 @@
 	},
 	"exclude": [
 		"**/_website/**/*",
+		"**/app/**/*",
 		"**/dist/**/*",
 		"**/public/**/*",
 		"**/.config/**/*",