diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index 837539c8ef..e0555504f5 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -145,7 +145,7 @@ const input = inputs[key] if ( - ['static', 'eval', 'connected'].includes(input.type) && + ['static', 'eval', 'connected', 'evalv2'].includes(input.type) && schemaStripped !== undefined && schemaStripped.properties ) { diff --git a/frontend/src/lib/components/apps/editor/ConnectionInstructions.svelte b/frontend/src/lib/components/apps/editor/ConnectionInstructions.svelte index 8bf80eeac6..78a32dc542 100644 --- a/frontend/src/lib/components/apps/editor/ConnectionInstructions.svelte +++ b/frontend/src/lib/components/apps/editor/ConnectionInstructions.svelte @@ -20,11 +20,9 @@ Click on the output of the component you want to connect to on the left panel.
    -
  1. - You can also navigate your app in a viewer mode: You won't be able to fire any events. -
    2. +
  2. App is in a frozen state.
  3. Clicking on a component will open the component's output on the left.
    4. -
  4. Hovering an other component will highlight its outputs in orange.
    5. +
  5. Hover on a component to see its output
diff --git a/frontend/src/lib/components/apps/editor/appUtilsInfer.ts b/frontend/src/lib/components/apps/editor/appUtilsInfer.ts new file mode 100644 index 0000000000..941e651da5 --- /dev/null +++ b/frontend/src/lib/components/apps/editor/appUtilsInfer.ts @@ -0,0 +1,26 @@ +import { parseOutputs } from '$lib/infer' +import { deepEqual } from 'fast-equals' +import type { EvalV2AppInput } from '../inputType' +import type { Writable } from 'svelte/store' +import type { App } from '../types' + +export async function inferDeps( + code: string, + worldOutputs: Record, + componentInput: EvalV2AppInput, + app: Writable +) { + const outputs = await parseOutputs(code, true) + if (outputs && componentInput) { + const noutputs = outputs + .filter(([key, id]) => key == 'row' || key == 'iter' || id in (worldOutputs[key] ?? {})) + .map(([key, id]) => ({ + componentId: key, + id: id + })) + if (!deepEqual(noutputs, componentInput.connections)) { + componentInput.connections = noutputs + app.update((old) => old) + } + } +} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index 3c92510191..1b1a30ad66 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -29,6 +29,7 @@ import { Delete, ExternalLink } from 'lucide-svelte' import GridCondition from './GridCondition.svelte' import { isTriggerable } from './script/utils' + import ScriptSettingsSection from './script/shared/ScriptSettingsSection.svelte' export let componentSettings: { item: GridItem; parent: string | undefined } | undefined = undefined @@ -171,7 +172,7 @@ bind:componentInput={componentSettings.item.data.componentInput} /> -
+
{#if componentSettings.item.data.componentInput.type === 'static'} 0} -
- - - - The runnable inputs are inferred from the inputs of the flow or script - parameters this component is attached to. - - +
+
+ Runnable Inputs - - + + The runnable inputs are inferred from the inputs of the flow or script + parameters this component is attached to. + +
+ +
{/if} {/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte index d53a301089..699c3cc20f 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte @@ -12,9 +12,10 @@ import type { InputConnection, InputType, UploadAppInput } from '../../inputType' import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte' import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte' - import { FunctionSquare, Pen, Plug2, Upload, User } from 'lucide-svelte' + import { FunctionSquare, Pen, Plug, Plug2, Upload, User } from 'lucide-svelte' import { fieldTypeToTsType } from '../../utils' import EvalV2InputEditor from './inputEditor/EvalV2InputEditor.svelte' + import { Button } from '$lib/components/common' export let id: string export let componentInput: RichConfiguration @@ -34,11 +35,18 @@ const { connectingInput, app } = getContext('AppViewerContext') + let evalV2editor: EvalV2InputEditor function applyConnection(connection: InputConnection) { - if (componentInput.type === 'connected') { - componentInput.connection = connection - $app = $app + const expr = `${connection.componentId}.${connection.path}` + //@ts-ignore + componentInput = { + ...componentInput, + type: 'evalv2', + expr: expr, + connections: [{ componentId: connection.componentId, id: connection.path.split('.')[0] }] } + evalV2editor.setCode(expr) + $app = $app } $: if (componentInput == undefined) { @@ -75,7 +83,7 @@ {/if}
-
+
{#if componentInput?.type} {/if} - + {#if componentInput?.type === 'connected'} + + {/if} {#if componentInput?.type === 'eval'} {/if} + {/if}
@@ -132,7 +158,7 @@ {:else if componentInput?.type === 'eval'} {:else if componentInput?.type === 'evalv2'} - + {:else if componentInput?.type === 'upload'} {:else if componentInput?.type === 'user'} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte index 46ad852e05..e3115af726 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte @@ -5,14 +5,18 @@ import type { AppViewerContext } from '$lib/components/apps/types' import SimpleEditor from '$lib/components/SimpleEditor.svelte' import { buildExtraLib } from '$lib/components/apps/utils' - import { parseOutputs } from '$lib/infer' - import { deepEqual } from 'fast-equals' + import { inferDeps } from '../../appUtilsInfer' export let componentInput: EvalV2AppInput | undefined export let id: string const { onchange, worldStore, state, app } = getContext('AppViewerContext') + let editor: SimpleEditor + export function setCode(code: string) { + editor?.setCode(code) + } + $: extraLib = componentInput?.expr && $worldStore ? buildExtraLib($worldStore?.outputsById ?? {}, id, $state, false) @@ -24,27 +28,15 @@ componentInput.expr != '' && componentInput.connections == undefined ) { - inferDeps(componentInput.expr) + inferDepsFromCode(componentInput.expr) } if (componentInput && componentInput.connections == undefined) { componentInput.connections = [] } - async function inferDeps(code: string) { - const outputs = await parseOutputs(code, true) - if (outputs && componentInput) { - const noutputs = outputs - .filter( - ([key, id]) => - key == 'row' || key == 'iter' || id in ($worldStore?.outputsById[key] ?? {}) - ) - .map(([key, id]) => ({ - componentId: key, - id: id - })) - if (!deepEqual(noutputs, componentInput.connections)) { - componentInput.connections = noutputs - $app = $app - } + + function inferDepsFromCode(code: string) { + if (componentInput) { + inferDeps(code, $worldStore.outputsById, componentInput, app) } } @@ -52,6 +44,7 @@ {#if componentInput?.type === 'evalv2'}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte index 32f709f09b..2c0ccc2857 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte @@ -49,7 +49,7 @@ } -
+
{#if !isTriggerable(appComponent.type)} -
+
Hide Refresh Button
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsSection.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsSection.svelte index 530edcea4c..1f60c34323 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsSection.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsSection.svelte @@ -5,7 +5,7 @@ export let tooltip: string | undefined = undefined -
+
{title} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte index 8f25ce4550..3fe90ad764 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte @@ -13,40 +13,38 @@ $: checked = Boolean(appInput.transformer) -
-
-
- Transformer +
+
+ Transformer - - {"A transformer is an optional frontend script that is executed right after the component's script whose purpose is to do lightweight transformation in the browser. It takes the previous computation's result as `result`"} - -
- + + {"A transformer is an optional frontend script that is executed right after the component's script whose purpose is to do lightweight transformation in the browser. It takes the previous computation's result as `result`"} +
+
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte index 7853dbeb4b..71e8661169 100644 --- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte +++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte @@ -48,6 +48,6 @@ - {tooltip} + {tooltip ?? label}