update plot ui (#1405)

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

@@ -1,9 +1,26 @@
 <script lang="ts">
 	import { Plot } from "@gradio/plot";
 
+	import { Block, BlockLabel } from "@gradio/atoms";
+	import { Plot as PlotIcon } from "@gradio/icons";
+
+	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
+	import type { LoadingStatus } from "../StatusTracker/types";
+	import { _ } from "svelte-i18n";
+
 	export let value: null | string = null;
+	export let elem_id: string = "";
+	export let visible: boolean = true;
 
 	export let loading_status: LoadingStatus;
+	export let label: string;
+	export let show_label: boolean;
 </script>
 
-<Plot {value} on:change />
+<Block padding={false} {elem_id} {visible}>
+	<BlockLabel {show_label} label={label || "Plot"} Icon={PlotIcon} />
+
+	<StatusTracker {...loading_status} />
+
+	<Plot {value} on:change />
+</Block>

ui/packages/icons/src/Plot.svelte

@@ -0,0 +1,25 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	role="img"
+	class="iconify iconify--carbon"
+	width="100%"
+	height="100%"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+	><circle cx="20" cy="4" r="2" fill="currentColor" /><circle
+		cx="8"
+		cy="16"
+		r="2"
+		fill="currentColor"
+	/><circle cx="28" cy="12" r="2" fill="currentColor" /><circle
+		cx="11"
+		cy="7"
+		r="2"
+		fill="currentColor"
+	/><circle cx="16" cy="24" r="2" fill="currentColor" /><path
+		fill="currentColor"
+		d="M30 3.413L28.586 2L4 26.585V2H2v26a2 2 0 0 0 2 2h26v-2H5.413Z"
+	/></svg
+>

ui/packages/icons/src/index.ts

@@ -15,3 +15,4 @@ export { default as LineChart } from "./LineChart.svelte";
 export { default as TextHighlight } from "./TextHighlight.svelte";
 export { default as JSON } from "./JSON.svelte";
 export { default as Tree } from "./Tree.svelte";
+export { default as Plot } from "./Plot.svelte";

ui/packages/model3D/src/Model3D.svelte

@@ -4,7 +4,6 @@
 	import { File } from "@gradio/icons";
 
 	export let value: FileData | null;
-	export let style: string;
 	export let clearColor: Array<number>;
 	export let label: string = "";
 	export let show_label: boolean;

ui/packages/model3D/src/Model3DUpload.svelte

@@ -12,7 +12,6 @@
 	export let upload_text: string = "click to upload";
 	export let label: string = "";
 	export let show_label: boolean;
-	export let style: string;
 
 	onMount(() => {
 		if (value != null) {

ui/packages/plot/package.json

@@ -8,6 +8,8 @@
 	"license": "ISC",
 	"private": true,
 	"dependencies": {
+		"@gradio/icons": "workspace:^0.0.1",
+		"@gradio/utils": "workspace:^0.0.1",
 		"plotly.js-dist-min": "^2.10.1"
 	}
 }

ui/packages/plot/src/Plot.svelte

@@ -11,12 +11,14 @@
 </svelte:head>
 
 <script lang="ts">
-	export let elem_id: string = "";
-	export let visible: boolean = true;
+	import Plotly from "plotly.js-dist-min";
+	import { Plot as PlotIcon } from "@gradio/icons";
+	
+	import { afterUpdate, onMount } from "svelte";
+
+	// export let visible: boolean = true;
 	export let value: null | string;
 	export let theme: string;
-	import { afterUpdate, onMount} from "svelte";
-	import Plotly from "plotly.js-dist-min";
 
 	// Bokeh
 	let bokehLoaded = false
@@ -65,10 +67,14 @@
 	<div id="bokehDiv"/>
 {:else if value && value["type"] == "matplotlib"}
 	<div
-		class="output-image w-full h-80 flex justify-center items-center dark:bg-gray-600 relative"
+		class="output-image w-full max-h-80 flex justify-center items-center  relative"
 		{theme}
 	>
 		<!-- svelte-ignore a11y-missing-attribute -->
 		<img  class="w-full h-full object-contain" src={value["plot"]} />
 	</div>
+{:else}
+	<div class="h-full min-h-[15rem] flex justify-center items-center">
+		<div class="h-5 dark:text-white opacity-50"><PlotIcon/></div>
+	</div>
 {/if}

ui/pnpm-lock.yaml

@@ -246,8 +246,12 @@ importers:
 
   packages/plot:
     specifiers:
+      '@gradio/icons': workspace:^0.0.1
+      '@gradio/utils': workspace:^0.0.1
       plotly.js-dist-min: ^2.10.1
     dependencies:
+      '@gradio/icons': link:../icons
+      '@gradio/utils': link:../utils
       plotly.js-dist-min: 2.11.1
 
   packages/table: