From 5d720e96e67cd6afb9866664ab0aabf48d1cd997 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 16 Jan 2023 13:23:31 +0100
Subject: [PATCH] add row to eval input

---
 .../apps/components/buttons/AppButton.svelte  | 17 +++++++++++++++--
 .../apps/components/helpers/InputValue.svelte | 19 +++++++++++++------
 .../settingsPanel/ComponentPanel.svelte       |  4 ++--
 .../settingsPanel/InputsSpecEditor.svelte     |  4 ++--
 .../settingsPanel/InputsSpecsEditor.svelte    |  6 +++++-
 .../editor/settingsPanel/TableActions.svelte  |  7 ++++++-
 .../inputEditor/EvalInputEditor.svelte        |  3 ++-
 frontend/src/lib/components/apps/utils.ts     |  4 ++--
 .../components/common/button/Button.svelte    |  5 +++--
 9 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index f2ef6f2391..262961aa65 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -27,7 +27,7 @@
 	let color: ButtonType.Color
 	let size: ButtonType.Size
 	let runnableComponent: RunnableComponent
-	let disabled = false
+	let disabled: boolean | undefined = undefined
 
 	let isLoading: boolean = false
 	let ownClick: boolean = false
@@ -51,12 +51,22 @@
 	})
 
 	$: loading = isLoading && ownClick
+	let errors: Record<string, string> = {}
+	$: errorsMessage = Object.values(errors)
+		.filter((x) => x != '')
+		.join('\n')
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
 <InputValue {id} input={configuration.color} bind:value={color} />
 <InputValue {id} input={configuration.size} bind:value={size} />
-<InputValue {id} input={configuration.disabled} bind:value={disabled} />
+<InputValue
+	row={extraQueryParams['row']}
+	{id}
+	input={configuration.disabled}
+	bind:value={disabled}
+	bind:error={errors.disabled}
+/>
 
 <RunnableWrapper
 	flexWrap
@@ -67,6 +77,9 @@
 	autoRefresh={false}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
+		{#if errorsMessage}
+			<div class="text-red-500 text-xs">{errorsMessage}</div>
+		{/if}
 		<Button
 			{disabled}
 			on:pointerdown={(e) => {
diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index f6a98f392f..65174c4cf4 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { isCodeInjection } from '$lib/components/flows/utils'
-	import { createEventDispatcher, getContext, onMount } from 'svelte'
+	import { getContext } from 'svelte'
 	import type { AppInput, EvalAppInput } from '../../inputType'
 	import type { AppEditorContext } from '../../types'
 	import { accessPropertyByPath } from '../../utils'
@@ -10,7 +10,8 @@
 	export let input: AppInput
 	export let value: T
 	export let id: string | undefined = undefined
-	export let row: Record<string, any> = {}
+	export let row: Record<string, any> | undefined = {}
+	export let error: string = ''
 
 	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
 
@@ -23,7 +24,7 @@
 		if (input.type === 'connected') {
 			$worldStore?.connect<any>(input, onValueChange)
 		} else if (input.type === 'row') {
-			setTimeout(() => (value = row[input['column']]), 0)
+			setTimeout(() => (value = row?.[input['column']]), 0)
 		} else if (input.type === 'static' || input.type == 'template') {
 			setTimeout(() => (value = getValue(input)), 0)
 		} else if (input.type == 'eval') {
@@ -35,9 +36,12 @@
 
 	function evalExpr(input: EvalAppInput) {
 		try {
-			return eval_like(input.expr, computeGlobalContext())
+			const r = eval_like(input.expr, computeGlobalContext())
+			error = ''
+			return r
 		} catch (e) {
-			return e.message
+			error = e.message
+			return value
 		}
 	}
 
@@ -51,13 +55,16 @@
 						Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
 					]
 				})
+				.concat(row ? [['row', row]] : [])
 		)
 	}
 
 	export function getValue(input: AppInput) {
 		if (input.type === 'template' && isCodeInjection(input.eval)) {
 			try {
-				return eval_like('`' + input.eval + '`', computeGlobalContext())
+				const r = eval_like('`' + input.eval + '`', computeGlobalContext())
+				error = ''
+				return r
 			} catch (e) {
 				return e.message
 			}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index aa95861baf..9d1b0d91b6 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -17,7 +17,6 @@
 	import AlignmentEditor from './AlignmentEditor.svelte'
 	import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte'
 	import TemplateEditor from '$lib/components/TemplateEditor.svelte'
-	import type { Output } from '../../rx'
 
 	export let component: AppComponent | undefined
 	export let onDelete: (() => void) | undefined = undefined
@@ -72,7 +71,7 @@
 
 	$: extraLib =
 		component?.componentInput?.type === 'template' && $worldStore
-			? buildExtraLib($worldStore?.outputsById ?? {}, component?.id)
+			? buildExtraLib($worldStore?.outputsById ?? {}, component?.id, false)
 			: undefined
 </script>
 
@@ -151,6 +150,7 @@
 		{#if Object.values(component.configuration).length > 0}
 			<PanelSection title={`Configuration (${Object.values(component.configuration).length})`}>
 				<InputsSpecsEditor
+					{rowColumns}
 					id={component.id}
 					bind:inputSpecs={component.configuration}
 					userInputEnabled={false}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
index 5cf709d88f..ef55d87cc9 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Toggle from '$lib/components/Toggle.svelte'
 	import type {
 		ConnectedAppInput,
 		EvalAppInput,
@@ -19,6 +18,7 @@
 		| UserAppInput
 		| RowAppInput
 		| EvalAppInput
+	export let hasRows: boolean = false
 </script>
 
 {#if componentInput.type === 'connected'}
@@ -28,7 +28,7 @@
 {:else if componentInput.type === 'static'}
 	<StaticInputEditor bind:componentInput />
 {:else if componentInput.type === 'eval'}
-	<EvalInputEditor {id} bind:componentInput />
+	<EvalInputEditor {hasRows} {id} bind:componentInput />
 {:else if componentInput.type === 'user'}
 	<span class="text-2xs italic text-gray-6f00">Field's value is set by the user</span>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
index e138bd8fd5..46a29c57f0 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
@@ -107,7 +107,11 @@
 					</div>
 				</div>
 
-				<InputsSpecEditor {id} bind:componentInput={inputSpecs[inputSpecKey]} />
+				<InputsSpecEditor
+					hasRows={rowColumns}
+					{id}
+					bind:componentInput={inputSpecs[inputSpecKey]}
+				/>
 			</div>
 		{/each}
 	</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
index 9212f34828..e31f44b4f2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
@@ -38,6 +38,11 @@
 					type: 'static',
 					value: 'xs',
 					optionValuesKey: 'buttonSizeOptions'
+				},
+				disabled: {
+					fieldType: 'boolean',
+					type: 'eval',
+					expr: 'false'
 				}
 			},
 			componentInput: {
@@ -80,7 +85,7 @@
 	{#each components as component}
 		<div
 			class={classNames(
-				'w-full text-xs font-bold gap-1 py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
+				'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
 				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
 				$selectedComponent === component.id ? 'outline outline-blue-500 bg-red-400' : ''
 			)}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
index 96df8de6b2..d44122f4d6 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
@@ -8,6 +8,7 @@
 
 	export let componentInput: EvalAppInput | undefined
 	export let id: string
+	export let hasRows: boolean = false
 
 	const { onchange, worldStore } = getContext<AppEditorContext>('AppEditorContext')
 
@@ -15,7 +16,7 @@
 
 	$: extraLib =
 		componentInput?.expr && $worldStore
-			? buildExtraLib($worldStore?.outputsById ?? {}, id)
+			? buildExtraLib($worldStore?.outputsById ?? {}, id, hasRows)
 			: undefined
 </script>
 
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 59956c34b4..9755c07a60 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -247,7 +247,7 @@ export function toStatic(app: App, staticExporter: Record<string, () => any>, su
 	return { app: newApp, summary }
 }
 
-export function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string): string {
+export function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string, hasRows: boolean): string {
 	return Object.entries(components)
 		.filter(([k, v]) => k != idToExclude)
 		.map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
@@ -258,5 +258,5 @@ declare const ${k} = ${JSON.stringify(v)};
 
 `
 		)
-		.join('\n')
+		.join('\n') + (hasRows ? 'declare const row: Record<string, any>;' : '')
 }
\ No newline at end of file
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 6ca25f53ac..b12152cd77 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -30,7 +30,8 @@
 		blue: {
 			border:
 				'border-frost-500 hover:border-frost-700 focus:border-frost-700 bg-white hover:bg-frost-100 focus:bg-frost-100 text-frost-500 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
-			contained: 'bg-frost-500 hover:bg-frost-700 focus:bg-frost-700 text-white focus:ring-frost-300'
+			contained:
+				'bg-frost-500 hover:bg-frost-700 focus:bg-frost-700 text-white focus:ring-frost-300'
 		},
 		red: {
 			border:
@@ -72,7 +73,7 @@
 			'duration-200 rounded-md',
 			'justify-center items-center text-center whitespace-nowrap inline-flex',
 			btnClasses,
-			disabled ? 'bg-gray-300' : ''
+			disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''
 		),
 		href,
 		target,