New select and primitive inputs

.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.6.0
+NEXT_PUBLIC_PICTOR_VERSION=0.7.0
 NEXT_PUBLIC_ALLOWED_REDIRECT_DOMAINS=*.code0.tech,*.codezero.build
 
 NEXT_PUBLIC_OTEL_SERVICE_NAME=#"sculptor-client"

package.json

@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.9",
-    "@code0-tech/pictor": "^0.6.4",
-    "@code0-tech/triangulum": "^0.13.3",
+    "@code0-tech/pictor": "^0.7.2",
+    "@code0-tech/triangulum": "^0.14.3",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lint": "^6.9.5",
     "@opentelemetry/api": "^1.9.1",
@@ -32,6 +32,7 @@
     "graphql": "^16.12.0",
     "graphql-tag": "^2.12.6",
     "ldrs": "^1.1.9",
+    "lodash": "^4.18.1",
     "next": "16.2.3",
     "prettier": "^3.8.1",
     "react": "19.2.5",
@@ -42,6 +43,7 @@
     "use-debounce": "^10.1.1"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.24",
     "@types/node": "^24.0.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",

src/app/global.scss

@@ -18,4 +18,8 @@ a {
   &:hover {
     text-decoration: underline;
   }
+}
+
+.scroll-area__viewport > div {
+  display: block !important;
 }

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

@@ -1,71 +1,47 @@
-import {Flow, NodeFunction} from "@code0-tech/sagittarius-graphql-types";
 import React from "react";
 import {DataTypeTextInputComponent} from "./text/DataTypeTextInputComponent";
-import {InputProps, useService, useStore} from "@code0-tech/pictor";
-import {FlowService} from "@edition/flow/services/Flow.service";
-import {DatatypeService} from "@edition/datatype/services/Datatype.service";
-import {FunctionService} from "@edition/function/services/Function.service";
-import {DataTypeVariant, getTypesFromFunction, getTypeVariant} from "@code0-tech/triangulum";
-import {DataTypeJSONInputComponent} from "@edition/datatype/components/inputs/json/DataTypeJSONInputComponent";
-
-export interface DataTypeInputComponentProps extends Omit<InputProps<any | null>, "wrapperComponent" | "type"> {
-    flowId: Flow['id']
-    nodeId?: NodeFunction['id'] //TODO if undefined we need to get infos from trigger
-    parameterIndex: number
+import {NodeSchema} from "@code0-tech/triangulum";
+import {LiteralValue, NodeFunction, NodeParameterValue, ReferenceValue} from "@code0-tech/sagittarius-graphql-types";
+import {DataTypeBooleanInputComponent} from "@edition/datatype/components/inputs/boolean/DataTypeBooleanInputComponent";
+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";
+
+export interface DataTypeInputComponentProps extends Omit<InputWrapperProps<NodeParameterValue | NodeFunction>, "wrapperComponent" | "onChange"> {
+    schema: NodeSchema
     clearable?: boolean
+    onChange?: (value: ReferenceValue | LiteralValue | NodeFunction | undefined) => void
+    suggestions?: (NodeFunction | ReferenceValue | LiteralValue)[]
     onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void
 }
 
 export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (props) => {
 
-    const {flowId, nodeId, parameterIndex, ...rest} = props
-
-    const flowService = useService(FlowService)
-    const flowStore = useStore(FlowService)
-    const dataTypeStore = useStore(DatatypeService)
-    const dataTypeService = useService(DatatypeService)
-    const functionStore = useStore(FunctionService)
-    const functionService = useService(FunctionService)
-
-    const flow = React.useMemo(
-        () => flowId ? flowService.getById(flowId) : undefined,
-        [flowStore, flowId]
-    )
-
-    const node = React.useMemo(
-        () => nodeId && flowId ? flowService.getNodeById(flowId, nodeId) : undefined,
-        [flowStore, flowId, nodeId]
-    )
-
-    const functionDefinition = React.useMemo(
-        () => node ? functionService.getById(node?.functionDefinition?.id) : undefined,
-        [functionStore, node]
-    )
-
-    const types = React.useMemo(
-        () => nodeId ? getTypesFromFunction(functionDefinition!) : undefined,
-        [functionDefinition, nodeId]
-    )
+    const {schema, ...rest} = props
 
-    const dataTypeVariant = React.useMemo(
-        () => types ? getTypeVariant(types.parameters[parameterIndex], dataTypeService.values())[0].variant : undefined,
-        [dataTypeStore, types]
-    )
+    const suggestions = schema?.schema?.suggestions as (NodeFunction | ReferenceValue | LiteralValue)[]
 
-    switch (dataTypeVariant) {
-        case DataTypeVariant.ARRAY:
-        case DataTypeVariant.OBJECT:
-            return <DataTypeJSONInputComponent
-                flowId={flowId}
-                nodeId={nodeId}
-                parameterIndex={parameterIndex}
+    switch (schema?.schema?.input) {
+        case "boolean":
+            return <DataTypeBooleanInputComponent
+                schema={schema}
+                suggestions={suggestions}
                 {...rest}
             />
+        case "select":
+            return <DataTypeSelectInputComponent
+                schema={schema}
+                suggestions={suggestions}
+                {...rest}/>
+        case "number":
+            return <DataTypeNumberInputComponent
+                schema={schema}
+                suggestions={suggestions}
+                {...rest}/>
         default:
             return <DataTypeTextInputComponent
-                flowId={flowId}
-                nodeId={nodeId}
-                parameterIndex={parameterIndex}
+                suggestions={suggestions}
+                schema={schema}
                 {...rest}
             />
     }

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

@@ -0,0 +1,82 @@
+import {LiteralValue, NodeFunction, ReferenceValue} from "@code0-tech/sagittarius-graphql-types";
+import React from "react";
+import {IconVariable, IconX} from "@tabler/icons-react";
+import {ReferenceBadgeComponent} from "@edition/datatype/components/badges/ReferenceBadgeComponent";
+import {
+    Button,
+    ButtonGroup,
+    Flex,
+    Menu,
+    MenuContent,
+    MenuItem,
+    MenuPortal,
+    MenuTrigger,
+    Text,
+    Tooltip,
+    TooltipContent,
+    TooltipPortal,
+    TooltipTrigger
+} from "@code0-tech/pictor"
+
+export interface DataTypeInputControlsComponentProps {
+    suggestions?: (NodeFunction | ReferenceValue | LiteralValue)[]
+    onSelect?: (value: NodeFunction | ReferenceValue | LiteralValue | undefined) => void
+}
+
+export const DataTypeInputControlsComponent: React.FC<DataTypeInputControlsComponentProps> = (props) => {
+
+    const {suggestions, onSelect} = props
+
+    const filteredSuggestions = React.useMemo(() => {
+        if (!suggestions) return []
+        return suggestions.filter(suggest => suggest.__typename === "LiteralValue" || suggest.__typename === "ReferenceValue")
+    }, [suggestions])
+
+    return <ButtonGroup color={"primary"}>
+        <Menu>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <MenuTrigger asChild disabled={filteredSuggestions.length <= 0}>
+                        <Button paddingSize={"xxs"}>
+                            <IconVariable size={13}/>
+                        </Button>
+                    </MenuTrigger>
+                </TooltipTrigger>
+                <TooltipPortal>
+                    <TooltipContent side={"top"} sideOffset={8}>
+                        {filteredSuggestions.length <= 0 ? <Text>
+                            No suggestion available
+                        </Text> : <Text>
+                            Suggestions for this parameter
+                        </Text>}
+                    </TooltipContent>
+                </TooltipPortal>
+            </Tooltip>
+            <MenuPortal>
+                <MenuContent>
+                    {filteredSuggestions?.map((suggest, index) => {
+                        if (suggest.__typename === "LiteralValue") {
+                            return <MenuItem onSelect={() => onSelect?.(suggest)}>
+                                <Flex style={{gap: "0.35rem"}} align={"center"}>
+                                    {(suggest)?.value.toString()}
+                                </Flex>
+                            </MenuItem>
+                        }
+
+                        if (suggest.__typename === "ReferenceValue") {
+                            return <MenuItem onSelect={() => onSelect?.(suggest)}>
+                                <ReferenceBadgeComponent value={suggest}/>
+                            </MenuItem>
+                        }
+                    })}
+                </MenuContent>
+            </MenuPortal>
+        </Menu>
+        <Button paddingSize={"xxs"} onClick={() => {
+            onSelect?.(undefined)
+        }}>
+            <IconX size={13}/>
+        </Button>
+    </ButtonGroup>
+
+}

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

@@ -0,0 +1,32 @@
+import React from "react";
+import {InputWrapper} from "@code0-tech/pictor/dist/components/form/InputWrapper";
+import {DataTypeInputComponentProps} from "@edition/datatype/components/inputs/DataTypeInputComponent";
+import {DataTypeInputControlsComponent} from "@edition/datatype/components/inputs/DataTypeInputControlsComponent";
+import {NodeBadgeComponent} from "@edition/datatype/components/badges/NodeBadgeComponent";
+import {ReferenceBadgeComponent} from "@edition/datatype/components/badges/ReferenceBadgeComponent";
+
+export interface DataTypeInputValueComponentProps extends Omit<DataTypeInputComponentProps, 'schema'> {
+    children?: React.ReactNode
+    inside?: boolean
+}
+
+export const DataTypeInputValueComponent: React.FC<DataTypeInputValueComponentProps> = (props) => {
+
+    const {children, inside = false, initialValue, suggestions, onChange, formValidation} = 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"}>
+            <div style={{alignSelf: "center", flex: "1 1 auto"}}>
+                {
+                    initialValue?.__typename === "NodeFunction" || initialValue?.__typename === "NodeFunctionIdWrapper" ? (
+                        <NodeBadgeComponent value={initialValue}/>
+                    ) : initialValue?.__typename === "ReferenceValue" ? (
+                        <ReferenceBadgeComponent value={initialValue}/>
+                    ) : inside ? children : null
+                }
+            </div>
+        </InputWrapper> : children
+
+}

src/packages/ce/src/datatype/components/inputs/boolean/DataTypeBooleanInputComponent.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import {DataTypeInputComponentProps} from "@edition/datatype/components/inputs/DataTypeInputComponent";
+import {InputDescription, InputLabel, SegmentedControl, SegmentedControlItem} from "@code0-tech/pictor";
+import {useDebouncedCallback} from "use-debounce";
+import {LiteralValue, NodeFunction, ReferenceValue} from "@code0-tech/sagittarius-graphql-types";
+import {DataTypeInputValueComponent} from "@edition/datatype/components/inputs/DataTypeInputValueComponent";
+
+export type DataTypeBooleanInputComponentProps = DataTypeInputComponentProps
+
+export const DataTypeBooleanInputComponent: React.FC<DataTypeBooleanInputComponentProps> = (props) => {
+
+    const {suggestions, initialValue, title, description, formValidation, onChange} = props
+
+    const onChangeDebounced = useDebouncedCallback((value: string | LiteralValue | NodeFunction | ReferenceValue | undefined) => {
+
+        if (typeof value === "string") {
+            const boolValue: LiteralValue | undefined = value && ["true", "false"].includes(value) ? {
+                __typename: "LiteralValue",
+                value: value === "true"
+            } : undefined
+
+            formValidation?.setValue?.(boolValue)
+            onChange?.(boolValue)
+        } else {
+            formValidation?.setValue?.(value)
+            onChange?.(value)
+        }
+
+    }, 200)
+
+    return React.useMemo(() => <>
+        <InputLabel>{title}</InputLabel>
+        <InputDescription>{description}</InputDescription>
+        <DataTypeInputValueComponent inside initialValue={initialValue} onChange={onChangeDebounced}
+                                     suggestions={suggestions} formValidation={formValidation}>
+            <SegmentedControl type={"single"}
+                              h={"100%"}
+                              ml={-0.35}
+                              bg={"transparent"}
+                              style={{boxShadow: "none"}}
+                              value={(initialValue as LiteralValue)?.value?.toString() ?? ""}
+                              onValueChange={onChangeDebounced}>
+                <SegmentedControlItem w={"100%"} value={"true"}>
+                    True
+                </SegmentedControlItem>
+                <SegmentedControlItem w={"100%"} value={"false"}>
+                    False
+                </SegmentedControlItem>
+            </SegmentedControl>
+        </DataTypeInputValueComponent>
+    </>, [formValidation, initialValue])
+
+}

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

@@ -1,12 +1,12 @@
 import React, {useCallback, useMemo} from "react";
 import {tags as t} from "@lezer/highlight";
 import {Badge, hashToColor, useService, useStore} from "@code0-tech/pictor";
-import {Editor, EditorInputProps, EditorTokenHighlights} from "@code0-tech/pictor/dist/components/editor/Editor";
+import {Editor, EditorProps, EditorTokenHighlights} from "@code0-tech/pictor/dist/components/editor/Editor";
 import {StreamLanguage} from "@codemirror/language";
 import {CompletionContext, CompletionResult} from "@codemirror/autocomplete";
 import {DatatypeService} from "@edition/datatype/services/Datatype.service";
 
-export interface DataTypeTypeEditorInputProps extends EditorInputProps {
+export interface DataTypeTypeEditorInputProps extends EditorProps {
     value: string | null
     isTechnicalType?: boolean
 }

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

@@ -53,7 +53,7 @@ export const DataTypeTypeInputComponent: React.FC<DataTypeJSONInputComponentProp
     )
 
     React.useEffect(() => {
-        formValidation?.setValue(type)
+        formValidation?.setValue?.(type)
         const timeout = setTimeout(() => {
             // @ts-ignore
             onChange?.()