Rework JSON input, adding generic and sub flow input

.env.local

@@ -4,7 +4,7 @@ NEXT_PUBLIC_EDITION=ce
 SAGITTARIUS_GRAPHQL_URL=http://localhost:3010/graphql
 
 NEXT_PUBLIC_SCULPTOR_VERSION=0.0.0
-NEXT_PUBLIC_PICTOR_VERSION=0.7.0
+NEXT_PUBLIC_PICTOR_VERSION=0.7.2
 NEXT_PUBLIC_ALLOWED_REDIRECT_DOMAINS=*.code0.tech,*.codezero.build
 
 NEXT_PUBLIC_OTEL_SERVICE_NAME=#"sculptor-client"

package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@apollo/client": "^4.0.9",
     "@code0-tech/pictor": "^0.7.2",
-    "@code0-tech/triangulum": "^0.14.3",
+    "@code0-tech/triangulum": "^0.14.6",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lint": "^6.9.5",
     "@opentelemetry/api": "^1.9.1",

src/packages/ce/src/datatype/components/inputs/DataTypeInputComponent.tsx

@@ -6,8 +6,13 @@ import {DataTypeBooleanInputComponent} from "@edition/datatype/components/inputs
 import {DataTypeSelectInputComponent} from "@edition/datatype/components/inputs/select/DataTypeSelectInputComponent";
 import {InputWrapperProps} from "@code0-tech/pictor/dist/components/form/InputWrapper";
 import {DataTypeNumberInputComponent} from "@edition/datatype/components/inputs/number/DataTypeNumberInputComponent";
+import {DataTypeJSONInputComponent} from "@edition/datatype/components/inputs/json/DataTypeJSONInputComponent";
+import {DataTypeGenericInputComponent} from "@edition/datatype/components/inputs/generic/DataTypeGenericInputComponent";
+import {
+    DataTypeSubFlowInputComponent
+} from "@edition/datatype/components/inputs/sub-flow/DataTypeSubFlowInputComponent";
 
-export interface DataTypeInputComponentProps extends Omit<InputWrapperProps<NodeParameterValue | NodeFunction>, "wrapperComponent" | "onChange"> {
+export interface DataTypeInputComponentProps extends Omit<InputWrapperProps<NodeParameterValue | NodeFunction>, "onChange"> {
     schema: NodeSchema
     clearable?: boolean
     onChange?: (value: ReferenceValue | LiteralValue | NodeFunction | undefined) => void
@@ -20,8 +25,9 @@ export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (pr
     const {schema, ...rest} = props
 
     const suggestions = schema?.schema?.suggestions as (NodeFunction | ReferenceValue | LiteralValue)[]
+    const inputName = schema?.schema?.input === "generic" ? schema.functionSchema.input : schema?.schema?.input
 
-    switch (schema?.schema?.input) {
+    switch (inputName) {
         case "boolean":
             return <DataTypeBooleanInputComponent
                 schema={schema}
@@ -38,6 +44,22 @@ export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (pr
                 schema={schema}
                 suggestions={suggestions}
                 {...rest}/>
+        case "list":
+        case "data":
+            return <DataTypeJSONInputComponent
+                schema={schema}
+                suggestions={suggestions}
+                {...rest}/>
+        case "generic":
+            return <DataTypeGenericInputComponent
+                schema={schema}
+                suggestions={suggestions}
+                {...rest}/>
+        case "sub-flow":
+            return <DataTypeSubFlowInputComponent
+                schema={schema}
+                suggestions={suggestions}
+                {...rest}/>
         default:
             return <DataTypeTextInputComponent
                 suggestions={suggestions}

src/packages/ce/src/datatype/components/inputs/DataTypeInputControlsComponent.tsx

@@ -72,8 +72,10 @@ export const DataTypeInputControlsComponent: React.FC<DataTypeInputControlsCompo
                 </MenuContent>
             </MenuPortal>
         </Menu>
-        <Button paddingSize={"xxs"} onClick={() => {
+        <Button paddingSize={"xxs"} onClick={(event) => {
             onSelect?.(undefined)
+            event.stopPropagation()
+            event.preventDefault()
         }}>
             <IconX size={13}/>
         </Button>

src/packages/ce/src/datatype/components/inputs/DataTypeInputValueComponent.tsx

@@ -12,12 +12,12 @@ export interface DataTypeInputValueComponentProps extends Omit<DataTypeInputComp
 
 export const DataTypeInputValueComponent: React.FC<DataTypeInputValueComponentProps> = (props) => {
 
-    const {children, inside = false, initialValue, suggestions, onChange, formValidation} = props
+    const {children, inside = false, initialValue, suggestions, onChange, formValidation, ...rest} = props
 
     return inside || initialValue?.__typename === "NodeFunction" || initialValue?.__typename === "NodeFunctionIdWrapper" || initialValue?.__typename === "ReferenceValue" ?
         <InputWrapper formValidation={{...formValidation, setValue: undefined}} right={
             <DataTypeInputControlsComponent suggestions={suggestions} onSelect={onChange}/>
-        } rightType={"action"}>
+        } rightType={"action"} {...rest}>
             <div style={{alignSelf: "center", flex: "1 1 auto"}}>
                 {
                     initialValue?.__typename === "NodeFunction" || initialValue?.__typename === "NodeFunctionIdWrapper" ? (

src/packages/ce/src/datatype/components/inputs/generic/DataTypeGenericInputComponent.tsx

@@ -0,0 +1,41 @@
+import {DataTypeInputComponentProps} from "@edition/datatype/components/inputs/DataTypeInputComponent";
+import React from "react";
+import {ButtonGroup} from "@code0-tech/pictor/dist/components/button-group/ButtonGroup";
+import {Button, InputDescription, InputLabel} from "@code0-tech/pictor";
+import {useDebouncedCallback} from "use-debounce";
+import {LiteralValue, NodeFunction, ReferenceValue} from "@code0-tech/sagittarius-graphql-types";
+
+export type DataTypeGenericInputComponentProps = DataTypeInputComponentProps
+
+export const DataTypeGenericInputComponent: React.FC<DataTypeGenericInputComponentProps> = (props) => {
+
+    const {title, description, onChange, formValidation} = props
+
+    const onChangeDebounced = useDebouncedCallback((value: LiteralValue | NodeFunction | ReferenceValue | undefined) => {
+        formValidation?.setValue?.(value)
+        onChange?.(value)
+    }, 200)
+
+    return <>
+        <InputLabel>{title}</InputLabel>
+        <InputDescription>{description}</InputDescription>
+        <ButtonGroup color={"secondary"}>
+            <Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: 0})}>
+                Number Value
+            </Button>
+            <Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: false})}>
+                Boolean Value
+            </Button>
+            <Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: ""})}>
+                Text Value
+            </Button>
+            <Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: []})}>
+                List Value
+            </Button>
+            <Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: {}})}>
+                Data Value
+            </Button>
+        </ButtonGroup>
+    </>
+
+}

src/packages/ce/src/datatype/components/inputs/json/DataTypeJSONInputComponent.tsx

@@ -1,29 +1,15 @@
 import React from "react"
-import {IconAlignLeft, IconEdit, IconX} from "@tabler/icons-react"
 import "../type/DataTypeTypeInputComponent.style.scss"
 import {DataTypeJSONInputTreeComponent} from "./DataTypeJSONInputTreeComponent";
 import {DataTypeInputComponentProps} from "../DataTypeInputComponent";
-import {LiteralValue, NodeFunction, NodeParameterValue} from "@code0-tech/sagittarius-graphql-types";
-import {NodeBadgeComponent} from "../../badges/NodeBadgeComponent";
-import {ReferenceBadgeComponent} from "../../badges/ReferenceBadgeComponent";
-import {
-    Button,
-    Card,
-    Flex,
-    InputDescription,
-    InputLabel,
-    InputMessage,
-    Text,
-    useService,
-    useStore
-} from "@code0-tech/pictor";
-import {ButtonGroup} from "@code0-tech/pictor/dist/components/button-group/ButtonGroup";
-import {FunctionSuggestionMenuComponent} from "@edition/function/components/suggestion/FunctionSuggestionMenuComponent";
+import {LiteralValue, NodeFunction, ReferenceValue} from "@code0-tech/sagittarius-graphql-types";
+import {InputDescription, InputLabel, Spacing} from "@code0-tech/pictor";
 import {
     DataTypeJSONInputEditDialogComponent
 } from "@edition/datatype/components/inputs/json/DataTypeJSONInputEditDialogComponent";
-import {FlowService} from "@edition/flow/services/Flow.service";
-import {useValue} from "@edition/datatype/hooks/DataType.value.hook";
+import {DataTypeInputValueComponent} from "@edition/datatype/components/inputs/DataTypeInputValueComponent";
+import {useDebouncedCallback} from "use-debounce";
+import {DataInput} from "@code0-tech/triangulum/dist/util/schema.util";
 
 export interface EditableJSONEntry {
     key: string
@@ -33,21 +19,27 @@ export interface EditableJSONEntry {
 
 export type DataTypeJSONInputComponentProps = DataTypeInputComponentProps
 
+//TODO render fallback value if undefined based on schema
 export const DataTypeJSONInputComponent: React.FC<DataTypeJSONInputComponentProps> = (props) => {
 
+    const {schema, title, description, suggestions, formValidation, initialValue, onChange} = props
 
-    const {schema, title, description, formValidation, onChange} = props
-
-    const flowService = useService(FlowService)
-    const flowStore = useStore(FlowService)
-
-    const suggestions = []
     const [editDialogOpen, setEditDialogOpen] = React.useState(false)
-    const [editEntry, setEditEntry] = React.useState<EditableJSONEntry | null>(null)
+    const [editEntry, setEditEntry] = React.useState<EditableJSONEntry | undefined>(undefined)
     const [collapsedState, setCollapsedStateRaw] = React.useState<Record<string, boolean>>({})
 
+    const onChangeDebounced = useDebouncedCallback((value: LiteralValue | NodeFunction | ReferenceValue | undefined) => {
+        formValidation?.setValue?.(value)
+        onChange?.(value)
+    }, 200)
 
-    const [value, setValue] = React.useState<NodeParameterValue | NodeFunction | null>(null)
+    const value = React.useMemo(
+        () => initialValue ?? (schema.functionSchema.input === "list" ? {
+            __typename: "LiteralValue",
+            value: []
+        } as LiteralValue : generateDefaultDataValue(schema.functionSchema as DataInput)),
+            [initialValue, schema]
+    )
 
     const setCollapsedState = (path: string[], collapsed: boolean) => {
         setCollapsedStateRaw(prev => ({...prev, [path.join(".")]: collapsed}))
@@ -65,65 +57,47 @@ export const DataTypeJSONInputComponent: React.FC<DataTypeJSONInputComponentProp
                     key={`edit-dialog-${editEntry?.path.join("-")}-${editDialogOpen}`}
                     open={editDialogOpen}
                     entry={editEntry}
-                    value={value as any}
+                    value={value as LiteralValue}
                     onOpenChange={open => setEditDialogOpen(open)}
-                    onObjectChange={v => {
-                        formValidation?.setValue?.(v)
-                        setValue(v ?? null)
-                        // @ts-ignore
-                        onChange?.()
-                    }}
+                    onObjectChange={onChangeDebounced}
                 />
             )}
             <InputLabel>{title}</InputLabel>
             <InputDescription>{description}</InputDescription>
-            <Card color="secondary" paddingSize="xs">
-                <Flex style={{gap: ".7rem"}} align="center" justify="space-between">
-                    <Flex style={{gap: ".35rem"}} align="center">
-                        <Text>{"Object"}</Text>
-                    </Flex>
-                    <ButtonGroup color={"primary"}>
-                        <FunctionSuggestionMenuComponent onSuggestionSelect={suggestion => {
-                                                             formValidation?.setValue?.(suggestion.value)
-                                                             setValue(suggestion.value)
-                                                             // @ts-ignore
-                                                             onChange?.()
-                                                         }}
-                                                         triggerContent={<Button paddingSize="xxs" variant="filled"
-                                                                                 color="secondary"
-                                                                                 onClick={() => setEditDialogOpen(true)}>
-                                                             <IconAlignLeft size={13}/>
-                                                         </Button>}/>
-                        <Button paddingSize="xxs"
-                                variant="filled"
-                                disabled={value?.__typename != "LiteralValue"}
-                                color="secondary"
-                                onClick={() => setEditDialogOpen(true)}>
-                            <IconEdit size={13}/>
-                        </Button>
-                        <Button paddingSize="xxs" variant="filled" color="secondary">
-                            <IconX size={13}/>
-                        </Button>
-                    </ButtonGroup>
-                </Flex>
-                <Card paddingSize="xs" mt={0.7} mb={-0.55} mx={-0.55}>
-                    {value?.__typename === "NodeFunction" || value?.__typename === "NodeFunctionIdWrapper" ? (
-                        <NodeBadgeComponent value={value}/>
-                    ) : value?.__typename === "ReferenceValue" ? (
-                        <ReferenceBadgeComponent value={value}/>
-                    ) : (
-                        <DataTypeJSONInputTreeComponent
-                            object={value as any}
-                            onEntryClick={handleEntryClick}
-                            collapsedState={collapsedState}
-                            setCollapsedState={setCollapsedState}
-                        />
-                    )}
-                </Card>
-            </Card>
-            {!formValidation?.valid && formValidation?.notValidMessage && (
-                <InputMessage>{formValidation.notValidMessage}</InputMessage>
-            )}
+            <DataTypeInputValueComponent inside
+                                         initialValue={value}
+                                         onChange={onChangeDebounced}
+                                         suggestions={suggestions}
+                                         formValidation={formValidation}>
+                <DataTypeJSONInputTreeComponent
+                    object={value as LiteralValue}
+                    onEntryClick={handleEntryClick}
+                    collapsedState={collapsedState}
+                    setCollapsedState={setCollapsedState}
+                />
+                <Spacing spacing={"xxs"}/>
+            </DataTypeInputValueComponent>
         </>
     )
 }
+
+
+//TODO: only if required
+const generateDefaultDataValue = (schema: DataInput): LiteralValue => {
+    return {
+        __typename: "LiteralValue",
+        value: {
+            ...(Object.entries(schema.properties ?? {})?.map(([key, propSchema]) => {
+                if (!Array.isArray(propSchema)) {
+                    if (propSchema.input === "data") {
+                        return {[key]: generateDefaultDataValue(propSchema).value}
+                    }
+                    if (propSchema.input === "list") {
+                        return {[key]: []}
+                    }
+                    return {[key]: null}
+                }
+            }))
+        }
+    }
+}