From a4f8f9e1cf80395d5cd1229c8dd5dda244e2ba7f Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 31 Jan 2023 08:04:38 +0100
Subject: [PATCH] feat(frontend): add plotly support

---
 .../components/dataDisplay/PlotlyHtml.svelte  | 52 +++++++++++++++++++
 .../dataDisplay/VegaLiteHtml.svelte           |  2 -
 .../apps/editor/ComponentEditor.svelte        |  7 +++
 .../componentsPanel/ComponentList.svelte      |  3 +-
 .../apps/editor/componentsPanel/data.ts       | 22 ++++++++
 .../src/lib/components/apps/editorUtils.ts    | 33 ++++++++++++
 frontend/src/lib/components/apps/types.ts     |  2 +
 frontend/src/lib/components/apps/utils.ts     |  4 ++
 8 files changed, 122 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/components/dataDisplay/PlotlyHtml.svelte

diff --git a/frontend/src/lib/components/apps/components/dataDisplay/PlotlyHtml.svelte b/frontend/src/lib/components/apps/components/dataDisplay/PlotlyHtml.svelte
new file mode 100644
index 0000000000..7a5079b3fc
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/dataDisplay/PlotlyHtml.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Loader2 } from 'lucide-svelte'
+	import { onMount } from 'svelte'
+	import type { AppInput } from '../../inputType'
+	import InputValue from '../helpers/InputValue.svelte'
+	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
+
+	export let id: string
+	export let componentInput: AppInput | undefined
+	export let configuration: Record<string, AppInput>
+
+	export const staticOutputs: string[] = ['result', 'loading']
+
+	let result: object | undefined = undefined
+	let divEl: HTMLDivElement | null = null
+
+	let Plotly
+	onMount(async () => {
+		if (divEl) {
+			//@ts-ignore
+			await import('https://cdn.plot.ly/plotly-2.18.0.min.js')
+
+			Plotly = window['Plotly']
+		}
+	})
+
+	let h: number | undefined = undefined
+	let w: number | undefined = undefined
+
+	$: Plotly &&
+		result &&
+		divEl &&
+		h &&
+		w &&
+		Plotly.newPlot(
+			divEl,
+			[result],
+			{ width: w, height: h, margin: { l: 40, r: 40, b: 40, t: 40, pad: 4 } },
+			{ responsive: true, displayModeBar: false }
+		)
+</script>
+
+<div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
+	<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
+		{#if !Plotly}
+			<div class="p-2">
+				<Loader2 class="animate-spin" />
+			</div>
+		{/if}
+		<div on:pointerdown bind:this={divEl} />
+	</RunnableWrapper>
+</div>
diff --git a/frontend/src/lib/components/apps/components/dataDisplay/VegaLiteHtml.svelte b/frontend/src/lib/components/apps/components/dataDisplay/VegaLiteHtml.svelte
index b9b729335b..df15701a6e 100644
--- a/frontend/src/lib/components/apps/components/dataDisplay/VegaLiteHtml.svelte
+++ b/frontend/src/lib/components/apps/components/dataDisplay/VegaLiteHtml.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { Loader2 } from 'lucide-svelte'
-	import { parse } from 'path'
 	import { onMount } from 'svelte'
 	import type { AppInput } from '../../inputType'
-	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 
diff --git a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte b/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
index 9ea8e17bf4..3025ff10ce 100644
--- a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
@@ -21,6 +21,7 @@
 	import AppSliderInputs from '../components/numberInputs/AppSliderInputs.svelte'
 	import AppFormButton from '../components/form/AppFormButton.svelte'
 	import VegaLiteHtml from '../components/dataDisplay/VegaLiteHtml.svelte'
+	import PlotlyHtml from '../components/dataDisplay/PlotlyHtml.svelte'
 
 	export let component: AppComponent
 	export let selected: boolean
@@ -86,6 +87,12 @@
 				bind:componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
 			/>
+		{:else if component.type === 'plotlycomponent'}
+			<PlotlyHtml
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
 		{:else if component.type === 'scatterchartcomponent'}
 			<AppScatterChart
 				{...component}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 202a903981..aba12b035b 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -39,7 +39,8 @@
 				'piechartcomponent',
 				'displaycomponent',
 				'scatterchartcomponent',
-				'vegalitecomponent'
+				'vegalitecomponent',
+				'plotlycomponent'
 			],
 			'3:10-6:10': ['tablecomponent']
 		}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
index e9b60f09a7..71e45a46ab 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
@@ -328,6 +328,28 @@ const display: ComponentSet = {
 			},
 			card: false
 		},
+		{
+			softWrap: false,
+			id: 'plotlycomponent',
+			type: 'plotlycomponent',
+			componentInput: {
+				type: 'static',
+				fieldType: 'object',
+				value: {
+					type: 'bar',
+					x: [1, 2, 3, 4],
+					y: [5, 10, 2, 8],
+					marker: {
+						color: '#C8A2C8',
+						line: {
+							width: 2.5
+						}
+					}
+				}
+			},
+			configuration: {},
+			card: false
+		},
 		{
 			softWrap: true,
 			horizontalAlignment: 'left',
diff --git a/frontend/src/lib/components/apps/editorUtils.ts b/frontend/src/lib/components/apps/editorUtils.ts
index 87354d2924..c1426c7262 100644
--- a/frontend/src/lib/components/apps/editorUtils.ts
+++ b/frontend/src/lib/components/apps/editorUtils.ts
@@ -147,6 +147,39 @@ def main():
 			"y": { "field": "b", "type": "quantitative" },
 		},
 	}	
+`
+	},
+	plotlycomponent: {
+		deno:
+			`
+export async function main() {
+	return {
+		type: 'bar',
+		x: [1, 2, 3, 4],
+		y: [5, 10, 2, 8],
+		marker: {
+			color: '#C8A2C8',
+			line: {
+				width: 2.5				  
+			}
+		}
+	};
+}			  
+`,
+		python3:
+			`
+def main():
+	return {
+		"type": "bar",
+		"x": [1, 2, 3, 4],
+		"y": [5, 10, 2, 8],
+		"marker": {
+			"color": "#C8A2C8",
+			"line": {
+				"width": 2.5				  
+			}
+		}
+	}	
 `
 	},
 	piechartcomponent: {
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 08a11e774a..31173c5d0a 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -25,6 +25,7 @@ export type NumberInputComponent = BaseComponent<'numberinputcomponent'>
 export type SliderComponent = BaseComponent<'slidercomponent'>
 export type HtmlComponent = BaseComponent<'htmlcomponent'>
 export type VegaLiteComponent = BaseComponent<'vegalitecomponent'>
+export type PlotlyComponent = BaseComponent<'plotlycomponent'>
 export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>
 export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
 	recomputeIds: string[] | undefined
@@ -107,6 +108,7 @@ export type AppComponent = BaseAppComponent &
 		| FormComponent
 		| FormButtonComponent
 		| VegaLiteComponent
+		| PlotlyComponent
 	)
 
 export type ComponentSet = {
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 72b35ad55d..73458a8106 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -122,6 +122,10 @@ export const displayData: Record<AppComponent['type'], { name: string; icon: any
 		name: 'Vega Lite',
 		icon: PieChart
 	},
+	plotlycomponent: {
+		name: 'Plotly',
+		icon: PieChart
+	},
 	timeseriescomponent: {
 		name: 'Timeseries',
 		icon: GripHorizontal