From 7b4ad81d59a8a119eeefff61eafc6285353b1904 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Mon, 30 May 2022 15:21:36 +0100
Subject: [PATCH] update plot ui (#1405)

---
 .../app/src/components/Plot/Plot.svelte       | 19 +++++++++++++-
 ui/packages/icons/src/Plot.svelte             | 25 +++++++++++++++++++
 ui/packages/icons/src/index.ts                |  1 +
 ui/packages/model3D/src/Model3D.svelte        |  1 -
 ui/packages/model3D/src/Model3DUpload.svelte  |  1 -
 ui/packages/plot/package.json                 |  2 ++
 ui/packages/plot/src/Plot.svelte              | 16 ++++++++----
 ui/pnpm-lock.yaml                             |  4 +++
 8 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 ui/packages/icons/src/Plot.svelte

diff --git a/ui/packages/app/src/components/Plot/Plot.svelte b/ui/packages/app/src/components/Plot/Plot.svelte
index 435845de5c..c5c1b3a467 100644
--- a/ui/packages/app/src/components/Plot/Plot.svelte
+++ b/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>
diff --git a/ui/packages/icons/src/Plot.svelte b/ui/packages/icons/src/Plot.svelte
new file mode 100644
index 0000000000..d2b84c1e30
--- /dev/null
+++ b/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
+>
diff --git a/ui/packages/icons/src/index.ts b/ui/packages/icons/src/index.ts
index 1a98d834c5..a03a14e7a2 100644
--- a/ui/packages/icons/src/index.ts
+++ b/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";
diff --git a/ui/packages/model3D/src/Model3D.svelte b/ui/packages/model3D/src/Model3D.svelte
index b894a30c4c..869e655118 100644
--- a/ui/packages/model3D/src/Model3D.svelte
+++ b/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;
diff --git a/ui/packages/model3D/src/Model3DUpload.svelte b/ui/packages/model3D/src/Model3DUpload.svelte
index d16e4178c1..910ed8a933 100644
--- a/ui/packages/model3D/src/Model3DUpload.svelte
+++ b/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) {
diff --git a/ui/packages/plot/package.json b/ui/packages/plot/package.json
index 4e09e0fc41..511b6aa333 100644
--- a/ui/packages/plot/package.json
+++ b/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"
 	}
 }
diff --git a/ui/packages/plot/src/Plot.svelte b/ui/packages/plot/src/Plot.svelte
index ee55eae345..31b9fb4682 100644
--- a/ui/packages/plot/src/Plot.svelte
+++ b/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}
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index e2395aa459..dfd85c1b49 100644
--- a/ui/pnpm-lock.yaml
+++ b/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: