Skip to content

Commit

Permalink
fix(frontend): improve flow prop picker design
Browse files Browse the repository at this point in the history 
* improve input picker

* Put back colors for types

* Add full path to popover

* Copy instead of toast if no input selected

* Add popover and copy to value

* Add shadow en transition when selecting input

* Add border and transition when selecting input

* revert unwanted changes

* hide scrollbar when not hovering

* Add connexion animated border effect

* fix display

* fix proppicker display

* Remove badge

* Change animated button gradient

* revert scrollbar on hover

* clean design

* clean design

* clean design

* clean design

* clean design

* clean design

* clean design

* improve search

---------

Co-authored-by: Ruben Fiszel <[email protected]>
  • Loading branch information
@Guilhem-lm @rubenfiszel
Guilhem-lm and rubenfiszel committed Nov 5, 2024
1 parent 8d8156b commit 323912c
Show file tree
Hide file tree
Showing 11 changed files with 542 additions and 377 deletions.
280 changes: 159 additions & 121 deletions frontend/src/lib/components/InputTransformForm.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@
import type { PropPickerWrapperContext } from './flows/propPicker/PropPickerWrapper.svelte'
import { codeToStaticTemplate, getDefaultExpr } from './flows/utils'
import SimpleEditor from './SimpleEditor.svelte'
import { Button } from './common'
import { Button } from '$lib/components/common'
import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
import { fade } from 'svelte/transition'
import type VariableEditor from './VariableEditor.svelte'
import type ItemPicker from './ItemPicker.svelte'
Expand All @@ -23,7 +25,7 @@
import type { FlowCopilotContext } from './copilot/flow'
import StepInputGen from './copilot/StepInputGen.svelte'
import type { PickableProperties } from './flows/previousResults'
import { twMerge } from 'tailwind-merge'
export let schema: Schema | { properties?: Record<string, any>; required?: string[] }
export let arg: InputTransform | any
export let argName: string
Expand Down Expand Up @@ -186,11 +188,22 @@
let stepInputGen: StepInputGen | undefined = undefined
loadResourceTypes()
$: connecting =
$propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'
</script>

{#if arg != undefined}
<div class={$$props.class}>
<div class="flex flex-row justify-between gap-1 pb-1">
<div
class={twMerge(
'pl-2 pt-2 pb-2 ml-2 relative hover:bg-surface hover:shadow-md transition-all duration-200',
$propPickerConfig?.propName == argName
? 'bg-surface border-l-4 border-blue-500 shadow-md rounded-l-md z-2000'
: 'hover:rounded-md',
$$props.class
)}
>
<div class="flex flex-row justify-between gap-1 pb-1 px-2">
<div class="flex flex-wrap grow">
<FieldHeader
label={argName}
Expand Down Expand Up @@ -322,147 +335,172 @@
</ToggleButtonGroup>
</div>

<Button
title="Connect to another node's output"
variant="border"
color="light"
size="xs2"
on:click={() => {
focusProp(argName, 'connect', (path) => {
connectProperty(path)
dispatch('change', { argName })
return true
})
}}
id="flow-editor-plug"
<AnimatedButton
animate={connecting}
baseRadius="6px"
animationDuration="2s"
marginWidth="2px"
>
<Plug size={16} /> &rightarrow;
</Button>
<Button
variant="border"
color="light"
size="xs2"
btnClasses={connecting ? 'text-blue-500' : 'text-primary'}
on:click={() => {
focusProp(argName, 'connect', (path) => {
connectProperty(path)
dispatch('change', { argName })
return true
})
}}
>
<Plug size={16} /> &rightarrow;
</Button>
</AnimatedButton>
</div>
{/if}
</div>

<div class="max-w-xs" />
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="relative {$propPickerConfig?.propName == argName
? 'outline outline-offset-1 outline-1 outline-blue-500 rounded-md'
: ''}"
on:keyup={stepInputGen?.onKeyUp}
>
{#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
<div class="relative" on:keyup={stepInputGen?.onKeyUp}>
<!-- {#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
<span
class={'text-white z-50 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute top-0 right-0 bg-blue-500'}
>
Connect input &rightarrow;
</span>
{/if}
{/if} -->
<!-- {inputCat}
{propertyType} -->
{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
{#if argName && schema?.properties?.[argName]?.description}
<div class="text-xs italic pb-1 text-secondary">
<pre class="font-main">{schema.properties[argName].description}</pre>
</div>
{/if}
<div class="mt-2 min-h-[28px]">
{#if arg}
<TemplateEditor
bind:this={monacoTemplate}
{extraLib}
<div class="relative flex flex-row items-top gap-2 justify-between">
<div class="min-w-0 grow">
{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
{#if argName && schema?.properties?.[argName]?.description}
<div class="text-xs italic pb-1 text-secondary">
<pre class="font-main">{schema.properties[argName].description}</pre>
</div>
{/if}
<div class="mt-2 min-h-[28px]">
{#if arg}
<TemplateEditor
bind:this={monacoTemplate}
{extraLib}
on:focus={onFocus}
on:blur={() => {
focused = false
}}
bind:code={arg.value}
fontSize={14}
on:change={() => {
dispatch('change', { argName })
}}
/>
{/if}
</div>
{:else if (propertyType === undefined || propertyType == 'static') && schema?.properties?.[argName]}
<ArgInput
{resourceTypes}
noMargin
compact
bind:this={argInput}
on:focus={onFocus}
on:blur={() => {
focused = false
}}
bind:code={arg.value}
fontSize={14}
shouldDispatchChanges
on:change={() => {
dispatch('change', { argName })
}}
label={argName}
bind:editor={monaco}
bind:description={schema.properties[argName].description}
bind:value={arg.value}
type={schema.properties[argName].type}
oneOf={schema.properties[argName].oneOf}
required={schema.required?.includes(argName)}
bind:pattern={schema.properties[argName].pattern}
bind:valid={inputCheck}
defaultValue={schema.properties[argName].default}
bind:enum_={schema.properties[argName].enum}
bind:format={schema.properties[argName].format}
contentEncoding={schema.properties[argName].contentEncoding}
bind:itemsType={schema.properties[argName].items}
properties={schema.properties[argName].properties}
nestedRequired={schema.properties[argName].required}
displayHeader={false}
extra={argExtra}
{variableEditor}
{itemPicker}
bind:pickForField
showSchemaExplorer
nullable={schema.properties[argName].nullable}
bind:title={schema.properties[argName].title}
bind:placeholder={schema.properties[argName].placeholder}
/>
{:else if arg.expr != undefined}
<div class="border mt-2">
<SimpleEditor
bind:this={monaco}
bind:code={arg.expr}
on:change={() => {
dispatch('change', { argName })
}}
{extraLib}
lang="javascript"
shouldBindKey={false}
on:focus={() => {
focused = true
focusProp(argName, 'insert', (path) => {
monaco?.insertAtCursor(path)
return false
})
}}
on:change={() => {
dispatch('change', { argName })
}}
on:blur={() => {
focused = false
}}
autoHeight
/>
</div>
<DynamicInputHelpBox />
<div class="mb-2" />
{:else}
Not recognized input type {argName} ({arg.expr}, {propertyType})
<div class="flex mt-2">
<Button
variant="border"
size="xs"
on:click={() => {
arg.expr = ''
}}>Set expr to empty string</Button
></div
>
{/if}
</div>
{:else if (propertyType === undefined || propertyType == 'static') && schema?.properties?.[argName]}
<ArgInput
{resourceTypes}
noMargin
compact
bind:this={argInput}
on:focus={onFocus}
on:blur={() => {
focused = false
}}
shouldDispatchChanges
on:change={() => {
dispatch('change', { argName })
}}
label={argName}
bind:editor={monaco}
bind:description={schema.properties[argName].description}
bind:value={arg.value}
type={schema.properties[argName].type}
oneOf={schema.properties[argName].oneOf}
required={schema.required?.includes(argName)}
bind:pattern={schema.properties[argName].pattern}
bind:valid={inputCheck}
defaultValue={schema.properties[argName].default}
bind:enum_={schema.properties[argName].enum}
bind:format={schema.properties[argName].format}
contentEncoding={schema.properties[argName].contentEncoding}
bind:itemsType={schema.properties[argName].items}
properties={schema.properties[argName].properties}
nestedRequired={schema.properties[argName].required}
displayHeader={false}
extra={argExtra}
{variableEditor}
{itemPicker}
bind:pickForField
showSchemaExplorer
nullable={schema.properties[argName].nullable}
bind:title={schema.properties[argName].title}
bind:placeholder={schema.properties[argName].placeholder}
/>
{:else if arg.expr != undefined}
<div class="border mt-2">
<SimpleEditor
bind:this={monaco}
bind:code={arg.expr}
on:change={() => {
dispatch('change', { argName })
}}
{extraLib}
lang="javascript"
shouldBindKey={false}
on:focus={() => {
focused = true
focusProp(argName, 'insert', (path) => {
monaco?.insertAtCursor(path)
return false
})
}}
on:change={() => {
dispatch('change', { argName })
}}
on:blur={() => {
focused = false
}}
autoHeight
/>
</div>
<DynamicInputHelpBox />
<div class="mb-2" />
{:else}
Not recognized input type {argName} ({arg.expr}, {propertyType})
<div class="flex mt-2">
<Button
variant="border"
size="xs"
on:click={() => {
arg.expr = ''
}}>Set expr to empty string</Button
></div
>
{/if}

{#if $propPickerConfig?.propName == argName}
<div class="text-blue-500 mt-2" in:fade={{ duration: 200 }}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="24 24 12 12 24 0" />
</svg>
</div>
{:else}
<div class="w-0" />
{/if}
</div>
</div>
</div>
{/if}
32 changes: 17 additions & 15 deletions frontend/src/lib/components/InputTransformSchemaForm.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,24 +67,26 @@

<div class="w-full {clazz}">
{#if enableAi}
<StepInputsGen
{pickableProperties}
argNames={keys
? keys.filter(
(argName) =>
Object.keys(schema.properties ?? {}).includes(argName) &&
Object.keys(args ?? {}).includes(argName) &&
((args[argName].type === 'static' && !args[argName].value) ||
(args[argName].type === 'javascript' && !args[argName].expr))
)
: []}
{schema}
/>
<div class="px-0.5 pt-0.5">
<StepInputsGen
{pickableProperties}
argNames={keys
? keys.filter(
(argName) =>
Object.keys(schema.properties ?? {}).includes(argName) &&
Object.keys(args ?? {}).includes(argName) &&
((args[argName].type === 'static' && !args[argName].value) ||
(args[argName].type === 'javascript' && !args[argName].expr))
)
: []}
{schema}
/>
</div>
{/if}
{#if keys.length > 0}
{#each keys as argName (argName)}
{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
<div class="z-10 pt-4">
<div class="z-10 pt-2 relative">
<InputTransformForm
{previousModuleId}
bind:arg={args[argName]}
Expand Down Expand Up @@ -128,7 +130,7 @@
>
<div
slot="submission"
class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
class="flex flex-row-reverse w-full border-t border-gray-200 rounded-bl-lg rounded-br-lg"
>
<Button
variant="border"
Expand Down
Loading

0 comments on commit 323912c

Please sign in to comment.