From bd79938bed6da3875a4a2dd72dad14dedbf25ddf Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 18 Jan 2023 14:57:11 +0100
Subject: [PATCH] feat(frontend): add vega-lite component

---
 .../components/dataDisplay/AppHtml.svelte     | 24 +++---
 .../dataDisplay/VegaLiteHtml.svelte           | 58 +++++++++++++++
 .../apps/editor/ComponentEditor.svelte        |  7 ++
 .../componentsPanel/ComponentList.svelte      |  3 +-
 .../apps/editor/componentsPanel/data.ts       | 35 +++++++++
 .../src/lib/components/apps/editorUtils.ts    | 73 +++++++++++++++----
 frontend/src/lib/components/apps/types.ts     |  2 +
 frontend/src/lib/components/apps/utils.ts     |  4 +
 8 files changed, 175 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/components/dataDisplay/VegaLiteHtml.svelte

diff --git a/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte b/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte
index 9644b20d26..ee58f0d890 100644
--- a/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte
+++ b/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte
@@ -5,8 +5,6 @@
 
 	export let id: string
 	export let componentInput: AppInput | undefined
-	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = 'left'
-	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export let configuration: Record<string, AppInput>
 
 	export const staticOutputs: string[] = ['result', 'loading']
@@ -24,17 +22,15 @@
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
-	<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
-		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-			{#key result}
-				<iframe
-					frameborder="0"
-					style="height: {h}px; width: {w}px"
-					class="p-0"
-					title="sandbox"
-					srcdoc={result ? '<scr' + `ipt src="/tailwind.css"></script>` + result : 'No html'}
-				/>
-			{/key}
-		</AlignWrapper>
+	<RunnableWrapper autoRefresh flexWrap bind:componentInput {id} bind:result>
+		{#key result}
+			<iframe
+				frameborder="0"
+				style="height: {h}px; width: {w}px"
+				class="p-0"
+				title="sandbox"
+				srcdoc={result ? '<scr' + `ipt src="/tailwind.css"></script>` + result : 'No html'}
+			/>
+		{/key}
 	</RunnableWrapper>
 </div>
diff --git a/frontend/src/lib/components/apps/components/dataDisplay/VegaLiteHtml.svelte b/frontend/src/lib/components/apps/components/dataDisplay/VegaLiteHtml.svelte
new file mode 100644
index 0000000000..6ee31d79ea
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/dataDisplay/VegaLiteHtml.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	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'
+
+	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 vegaEmbed
+	onMount(async () => {
+		if (divEl) {
+			//@ts-ignore
+			await import('https://cdn.jsdelivr.net/npm/vega@5.22.1')
+			//@ts-ignore
+			await import('https://cdn.jsdelivr.net/npm/vega-lite@5.6.0')
+			//@ts-ignore
+			await import('https://cdn.jsdelivr.net/npm/vega-embed@6.21.0')
+			vegaEmbed = window['vegaEmbed']
+		}
+	})
+
+	let h: number | undefined = undefined
+	let w: number | undefined = undefined
+	let canvas = false
+
+	$: vegaEmbed &&
+		result &&
+		divEl &&
+		h &&
+		w &&
+		vegaEmbed(
+			divEl,
+			{ ...result, ...{ width: w - 100 } },
+			{
+				mode: 'vega-lite',
+				renderer: canvas ? 'canvas' : 'svg',
+				height: h - 75,
+				width: w - 75
+			}
+		)
+</script>
+
+<InputValue {id} input={configuration.canvas} bind:value={canvas} />
+
+<div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
+	<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
+		<div on:pointerdown bind:this={divEl} />
+	</RunnableWrapper>
+</div>
diff --git a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte b/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
index 745a23a7d4..ee3ed634f8 100644
--- a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
@@ -19,6 +19,7 @@
 	import AppTimeseries from '../components/dataDisplay/AppTimeseries.svelte'
 	import AppHtml from '../components/dataDisplay/AppHtml.svelte'
 	import AppSliderInputs from '../components/numberInputs/AppSliderInputs.svelte'
+	import VegaLiteHtml from '../components/dataDisplay/VegaLiteHtml.svelte'
 
 	export let component: AppComponent
 	export let selected: boolean
@@ -78,6 +79,12 @@
 				bind:componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
 			/>
+		{:else if component.type === 'vegalitecomponent'}
+			<VegaLiteHtml
+				{...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 d17b5dd2bb..202a903981 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -38,7 +38,8 @@
 				'barchartcomponent',
 				'piechartcomponent',
 				'displaycomponent',
-				'scatterchartcomponent'
+				'scatterchartcomponent',
+				'vegalitecomponent'
 			],
 			'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 3d52fbb3b4..36e449e208 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
@@ -240,6 +240,41 @@ const display: ComponentSet = {
 			configuration: {},
 			card: false
 		},
+		{
+			softWrap: false,
+			id: 'vegalitecomponent',
+			type: 'vegalitecomponent',
+			componentInput: {
+				type: 'static',
+				fieldType: 'object',
+				value: {
+					data: {
+						values: [
+							{ a: 'A', b: 28 },
+							{ a: 'B', b: 55 },
+							{ a: 'C', b: 43 },
+							{ a: 'D', b: 91 },
+						]
+					},
+					mark: 'bar',
+					encoding: {
+						x: { field: 'a', type: 'ordinal' },
+						y: { field: 'b', type: 'quantitative' }
+					}
+				}
+			},
+			configuration: {
+				canvas: {
+					type: 'static',
+					onlyStatic: true,
+					fieldType: 'boolean',
+					value: false,
+					tooltip: "use the canvas renderer instead of the svg one for more interactive plots"
+				}
+
+			},
+			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 e4bd5b3152..87354d2924 100644
--- a/frontend/src/lib/components/apps/editorUtils.ts
+++ b/frontend/src/lib/components/apps/editorUtils.ts
@@ -7,7 +7,7 @@ export function defaultCode(component: string, language: string): string | undef
 const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'python3', string>>> = {
 	tablecomponent: {
 		deno:
-`export async function main() {
+			`export async function main() {
 	return [
 		{
 			"id": 1,
@@ -22,7 +22,7 @@ const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'pytho
 	]
 }`,
 		python3:
-`def main():
+			`def main():
 	return [
 		{
 			"id": 1,
@@ -38,16 +38,16 @@ const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'pytho
 	},
 	textcomponent: {
 		deno:
-`export async function main() {
+			`export async function main() {
 	return "foo"
 }`,
 		python3:
-`def main():
+			`def main():
 	return "foo"`,
 	},
 	barchartcomponent: {
 		deno:
-`export async function main() {
+			`export async function main() {
 	return {
 		"data": [
 			25,
@@ -62,7 +62,7 @@ const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'pytho
 	}
 }`,
 		python3:
-`def main():
+			`def main():
 	return {
 		"data": [
 			25,
@@ -78,20 +78,20 @@ const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'pytho
 	},
 	displaycomponent: {
 		deno:
-`export async function main() {
+			`export async function main() {
 	return {
 		"foo": 42
 	}
 }`,
 		python3:
-`def main():
+			`def main():
 	return {
 		"foo": 42
 	}`,
 	},
 	htmlcomponent: {
 		deno:
-`export async function main() {
+			`export async function main() {
 	return \`<img
 	src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80"
 >
@@ -100,17 +100,58 @@ const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'pytho
 </h1>\`
 }`,
 		python3:
-`def main():
+			`def main():
 	return '''<img
 	src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80"
 >
 <h1 class="absolute top-4 left-2 text-white">
 	Hello world
 </h1>'''`,
+	},
+	vegalitecomponent: {
+		deno:
+			`
+			export async function main() {
+				return {
+					data: {
+					values: [
+						{ a: "A", b: 28 },
+						{ a: "B", b: 55 },
+						{ a: "C", b: 43 },
+						{ a: "D", b: 91 },
+					],
+					},
+					mark: "bar",
+					encoding: {
+						x: { field: "a", type: "ordinal" },
+						y: { field: "b", type: "quantitative" },
+					},
+				};
+			}			  
+`,
+		python3:
+			`
+def main():
+	return {
+		"data": {
+		"values": [
+			{ "a": "A", "b": 28 },
+			{ "a": "B", "b": 55 },
+			{ "a": "C", "b": 43 },
+			{ "a": "D", "b": 91 },
+		],
+		},
+			"mark": "bar",
+		"encoding": {
+			"x": { "field": "a", "type": "ordinal" },
+			"y": { "field": "b", "type": "quantitative" },
+		},
+	}	
+`
 	},
 	piechartcomponent: {
 		deno:
-`export async function main() {
+			`export async function main() {
 	return {
 		"data": [
 			25,
@@ -125,7 +166,7 @@ const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'pytho
 	}
 }`,
 		python3:
-`def main():
+			`def main():
 	return {
 		"data": [
 			25,
@@ -141,7 +182,7 @@ const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'pytho
 	},
 	scatterchartcomponent: {
 		deno:
-`export async function main() {
+			`export async function main() {
 	return [
 		{
 			"label": "foo",
@@ -164,7 +205,7 @@ const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'pytho
 	]
 }`,
 		python3:
-`def main():
+			`def main():
 	return [
 		{
 			"label": "foo",
@@ -188,7 +229,7 @@ const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'pytho
 	},
 	timeseriescomponent: {
 		deno:
-`export async function main() {
+			`export async function main() {
 	return [
 		{
 			"label": "foo",
@@ -229,7 +270,7 @@ const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'pytho
 	]
 }`,
 		python3:
-`def main():
+			`def main():
 	return [
 		{
 			"label": "foo",
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index c26ece1ff8..70c85a8d2e 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -24,6 +24,7 @@ export type DateInputComponent = BaseComponent<'dateinputcomponent'>
 export type NumberInputComponent = BaseComponent<'numberinputcomponent'>
 export type SliderComponent = BaseComponent<'slidercomponent'>
 export type HtmlComponent = BaseComponent<'htmlcomponent'>
+export type VegaLiteComponent = BaseComponent<'vegalitecomponent'>
 export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>
 export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
 	recomputeIds: string[] | undefined
@@ -97,6 +98,7 @@ export type AppComponent = BaseAppComponent &
 		| CheckboxComponent
 		| RadioComponent
 		| FormComponent
+		| VegaLiteComponent
 	)
 
 export type ComponentSet = {
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 9755c07a60..c4052d04f1 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -108,6 +108,10 @@ export const displayData: Record<AppComponent['type'], { name: string; icon: any
 		name: 'Html',
 		icon: Code2
 	},
+	vegalitecomponent: {
+		name: 'Vega Lite',
+		icon: PieChart
+	},
 	timeseriescomponent: {
 		name: 'Timeseries',
 		icon: GripHorizontal