feat: show a preview of the edited element in reports

zeno-ml · Oct 13, 2023 · ed8ef3f · ed8ef3f
1 parent 75613a3
commit ed8ef3f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 22 deletions.
diff --git a/frontend/src/lib/components/report/ElementContainer.svelte b/frontend/src/lib/components/report/ElementContainer.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-	import type { Chart, Report, ReportElement, Slice } from '$lib/zenoapi';
+	import {
+		ReportElementType,
+		type Chart,
+		type Report,
+		type ReportElement,
+		type Slice
+	} from '$lib/zenoapi';
 	import { mdiDrag, mdiPlusCircle } from '@mdi/js';
 	import { Icon } from '@smui/button';
 	import Element from './Element.svelte';
@@ -50,7 +56,14 @@
 			</Icon>
 		</div>
 		{#if editId === element.id}
-			<ElementEdit bind:element {chartOptions} {sliceOptions} reportId={report.id} />
+			<div class={`flex ${element.type === ReportElementType.TEXT ? 'flex-row' : 'flex-col'}`}>
+				<div class={element.type === ReportElementType.TEXT ? 'w-1/2' : 'w-full'}>
+					<ElementEdit bind:element {chartOptions} {sliceOptions} reportId={report.id} />
+				</div>
+				<div class={element.type === ReportElementType.TEXT ? 'w-1/2' : 'w-full'}>
+					<Element {element} {chartOptions} />
+				</div>
+			</div>
 		{:else}
 			<Element {element} {chartOptions} />
 		{/if}

diff --git a/frontend/src/lib/components/report/ElementEdit.svelte b/frontend/src/lib/components/report/ElementEdit.svelte
@@ -26,17 +26,19 @@
 	updateTypeObjects(element);
 
 	// set specific objects for each element type from the raw data string.
-	function updateTypeObjects(el: ReportElement) {
+	async function updateTypeObjects(el: ReportElement) {
 		if (el.type === ReportElementType.CHART) {
 			if (el.data) {
 				chartId = parseInt(el.data);
 			} else {
-				chartOptions.then((r) => (chartId = r[0].id));
+				const options = await chartOptions;
+				chartId = options[0].id;
+				element.data = `${chartId}`;
 			}
 		} else if (el.type === ReportElementType.SLICE) {
 			if (el.data) {
 				sliceElementSpec = JSON.parse(el.data);
-				sliceOptions.then((r) => {
+				await sliceOptions.then((r) => {
 					let res = r.find((sli) =>
 						sli.id === sliceElementSpec?.sliceId ? sliceElementSpec.sliceId : ''
 					);
@@ -45,7 +47,9 @@
 					}
 				});
 			} else {
-				sliceOptions.then((r) => (sliceElementSpec = { sliceId: r[0].id, modelName: '' }));
+				const options = await sliceOptions;
+				sliceElementSpec = { sliceId: options[0].id, modelName: '' };
+				element.data = JSON.stringify(sliceElementSpec);
 			}
 		}
 	}
@@ -56,12 +60,12 @@
 
 	function updateType(e: CustomEvent) {
 		element.data = null;
-		updateTypeObjects(element);
-		element = element;
-		zenoClient.updateReportElement(reportId, {
-			...element,
-			type: e.detail.label,
-			data: null
+		updateTypeObjects(element).then(() => {
+			zenoClient.updateReportElement(reportId, {
+				...element,
+				type: e.detail.label,
+				data: null
+			});
 		});
 	}
 

diff --git a/frontend/src/lib/components/report/elements/SliceElement.svelte b/frontend/src/lib/components/report/elements/SliceElement.svelte
@@ -19,14 +19,14 @@
 	let table: Record<string, unknown>[] | undefined = [];
 	let page = 0;
 
-	try {
-		sliceElementSpec = JSON.parse(element.data as string) as SliceElementSpec;
-	} catch {
-		sliceElementSpec = undefined;
-	}
-
-	if (sliceElementSpec) {
-		zenoClient.getSliceElementOptions(sliceElementSpec).then((r) => (sliceElementOptions = r));
+	$: {
+		element.data;
+		try {
+			sliceElementSpec = JSON.parse(element.data as string) as SliceElementSpec;
+			zenoClient.getSliceElementOptions(sliceElementSpec).then((r) => (sliceElementOptions = r));
+		} catch {
+			sliceElementSpec = undefined;
+		}
 	}
 
 	$: if (sliceElementSpec) {

diff --git a/frontend/src/lib/components/report/elements/TextElement.svelte b/frontend/src/lib/components/report/elements/TextElement.svelte
@@ -6,9 +6,9 @@
 
 	export let element: ReportElement;
 
-	let renderedInput = element.data ? purify.sanitize(parse(element.data)) : '';
+	$: renderedInput = element.data ? purify.sanitize(parse(element.data)) : '';
 </script>
 
-<article class="max-w-3xl">
+<article class="w-full overflow-hidden break-words">
 	<Markdown renderedText={renderedInput} />
 </article>