feat: better performance

nicosammito · nicosammito · commit e0f4d660b41e · 2026-06-23T17:33:34.000+02:00
diff --git a/src/packages/ce/src/datatype/components/inputs/DataTypeInputComponent.tsx b/src/packages/ce/src/datatype/components/inputs/DataTypeInputComponent.tsx
@@ -20,7 +20,7 @@ import {
 import {Schema} from "@code0-tech/triangulum/dist/util/schema.util";
 
 export interface DataTypeInputComponentProps extends Omit<InputWrapperProps<NodeParameterValue | NodeFunction>, "onChange"> {
-    schema: NodeSchema | Schema
+    schema: (NodeSchema | Schema) & {blocked?: boolean}
     clearable?: boolean
     onChange?: (value: ReferenceValue | SubFlowValue | LiteralValue | NodeFunction | undefined) => void
     suggestions?: (NodeFunction | SubFlowValue | ReferenceValue | LiteralValue)[]
@@ -33,6 +33,11 @@ export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (pr
 
     const suggestions = "schema" in schema ? schema?.schema?.suggestions as (NodeFunction | ReferenceValue | LiteralValue)[] : []
     const inputName = "schema" in schema ? (schema?.schema?.input === "generic" ? schema.functionSchema.input : schema?.schema?.input) : schema.input
+    const blocked = schema?.blocked
+
+    if (blocked) {
+        return null
+    }
 
     switch (inputName) {
         case "boolean":
diff --git a/src/packages/ce/src/datatype/components/inputs/json/DataTypeJSONInputComponent.tsx b/src/packages/ce/src/datatype/components/inputs/json/DataTypeJSONInputComponent.tsx
@@ -31,7 +31,7 @@ export const DataTypeJSONInputComponent: React.FC<DataTypeJSONInputComponentProp
     const onChangeDebounced = useDebouncedCallback((value: LiteralValue | SubFlowValue | NodeFunction | ReferenceValue | undefined) => {
         formValidation?.setValue?.(value)
         onChange?.(value)
-    }, 200)
+    }, 400)
 
     const value = React.useMemo(
         () => initialValue ?? (("functionSchema" in schema ? schema.functionSchema.input === "list" : schema.input === "list") ? {
diff --git a/src/packages/ce/src/datatype/components/inputs/number/DataTypeNumberInputComponent.tsx b/src/packages/ce/src/datatype/components/inputs/number/DataTypeNumberInputComponent.tsx
@@ -30,7 +30,7 @@ export const DataTypeNumberInputComponent: React.FC<DataTypeNumberInputComponent
             formValidation?.setValue?.(value)
             onChange?.(value)
         }
-    }, 200)
+    }, 400)
 
     return React.useMemo(() => <>
         <InputLabel>{title}</InputLabel>
diff --git a/src/packages/ce/src/datatype/components/inputs/sub-flow/DataTypeSubFlowInputComponent.tsx b/src/packages/ce/src/datatype/components/inputs/sub-flow/DataTypeSubFlowInputComponent.tsx
@@ -28,7 +28,6 @@ export const DataTypeSubFlowInputComponent: React.FC<DataTypeSubFlowInputCompone
         return initialValue && lodash.isMatch(initialValue, suggest)
     }), [suggestions])!
 
-
     const [suggestionDialogOpen, setSuggestionDialogOpen] = React.useState(false)
     const result = useFunctionSuggestions()
 
diff --git a/src/packages/ce/src/datatype/components/inputs/text/DataTypeTextInputComponent.tsx b/src/packages/ce/src/datatype/components/inputs/text/DataTypeTextInputComponent.tsx
@@ -30,7 +30,7 @@ export const DataTypeTextInputComponent: React.FC<DataTypeTextInputComponentProp
             formValidation?.setValue?.(value)
             onChange?.(value)
         }
-    }, 200)
+    }, 400)
 
     return React.useMemo(() => <>
         <InputLabel>{title}</InputLabel>
diff --git a/src/packages/ce/src/function/components/files/FunctionFileDefaultComponent.tsx b/src/packages/ce/src/function/components/files/FunctionFileDefaultComponent.tsx
@@ -5,7 +5,8 @@ import {
     LiteralValue,
     NodeFunction,
     NodeParameterValue,
-    ReferenceValue, SubFlowValue
+    ReferenceValue,
+    SubFlowValue
 } from "@code0-tech/sagittarius-graphql-types";
 import {useFlowValidation} from "@edition/flow/hooks/Flow.validation.hook";
 import {FlowService} from "@edition/flow/services/Flow.service";
@@ -16,7 +17,7 @@ import {
     FALLBACK_FUNCTION_PARAMETER_DESCRIPTION,
     FALLBACK_FUNCTION_PARAMETER_NAME
 } from "@core/util/fallback-translations";
-import {useNodes} from "@xyflow/react";
+import {useNodes, useNodesData} from "@xyflow/react";
 import {NodeSchema} from "@code0-tech/triangulum";
 
 export interface FunctionFileDefaultComponentProps {
@@ -30,12 +31,11 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
 
     const flowService = useService(FlowService)
     const validation = useFlowValidation(flowId)
-
-    const changedValue = React.useRef(false)
+    const changedParameter = React.useRef<Set<string>>(new Set())
 
     const definition = React.useMemo(
         () => node.functionDefinition!,
-        [node]
+        [node.functionDefinition]
     )
 
     const initialValues = React.useMemo(() => {
@@ -51,7 +51,7 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
 
     const nodeValidation = React.useMemo(
         () => validation?.find(v => v.nodeId === node.id && v.parameterIndex === null),
-        [validation]
+        [validation?.length]
     )
 
     const parameterValidations = React.useMemo(() => {
@@ -66,37 +66,31 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
             }
         })
         return values
-    }, [validation, node, definition])
+    }, [validation?.length, node.id, definition])
 
     const onSubmit = React.useCallback((values: Record<string, NodeParameterValue | undefined>) => {
         for (const parameterDefinition of definition?.parameterDefinitions?.nodes ?? []) {
 
+            if (!changedParameter.current.has(parameterDefinition?.id!)) continue
+
             const parameterIndex = definition?.parameterDefinitions?.nodes?.findIndex(p => p?.id === parameterDefinition?.id)
             if (typeof parameterIndex !== "number") return
 
             const value = values[parameterDefinition!.id!]
             flowService.setParameterValue(flowId, node.id!!, parameterIndex, (value ?? undefined) as SubFlowValue | ReferenceValue | LiteralValue | undefined, definition);
 
-            changedValue.current = false
+            changedParameter.current.delete(parameterDefinition?.id!)
         }
     }, [flowService, definition])
 
-    const [inputs, validate, values] = useForm<Record<string, NodeParameterValue | undefined>>({
+    const [inputs, validate] = useForm<Record<string, NodeParameterValue | undefined>>({
         useInitialValidation: true,
         truthyValidationBeforeSubmit: false,
         initialValues: initialValues,
         validate: parameterValidations,
         onSubmit: onSubmit
     })
 
-    React.useEffect(
-        () => {
-            if (changedValue.current)
-                validate()
-        },
-        [values]
-    )
-
     React.useEffect(
         () => validate(undefined, false),
         [validation]
@@ -124,13 +118,23 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
             const title = parameterDefinition?.names?.[0]?.content ?? FALLBACK_FUNCTION_PARAMETER_NAME
             const description = parameterDefinition?.descriptions?.[0]?.content ?? FALLBACK_FUNCTION_PARAMETER_DESCRIPTION
 
+            const schema = (flowNode?.data?.schema as NodeSchema[])?.[index]
+     /*       schema.blocked = schema?.blockedBy?.some(blockedBy => {
+                const val = node.parameters?.nodes?.[blockedBy]?.value;
+                return val === undefined || val === null;
+            }) ?? false;*/
+
             return <div>
                 <DataTypeInputComponent data-qa-selector={"flow-builder-parameter"}
                                         title={title}
-                                        schema={(flowNode?.data?.schema as NodeSchema[])?.[index]}
+                                        schema={schema}
                                         description={description}
                                         clearable
-                                        onChange={() => changedValue.current = true}
+                                        key={parameterDefinition.id}
+                                        onChange={() => {
+                                            changedParameter.current.add(parameterDefinition.id!)
+                                            validate()
+                                        }}
                                         {...inputs.getInputProps(parameterDefinition.id!)}
                 />
                 <Spacing spacing={"xl"}/>
diff --git a/src/packages/ce/src/function/components/files/FunctionFileTriggerComponent.tsx b/src/packages/ce/src/function/components/files/FunctionFileTriggerComponent.tsx
@@ -28,7 +28,6 @@ export const FunctionFileTriggerComponent: React.FC<FunctionFileTriggerComponent
     const flowTypeStore = useStore(FlowTypeService)
     const flowService = useService(FlowService)
     const validation = useFlowValidation(flowId)
-    const changedValue = React.useRef(false)
     const changedSettings = React.useRef<Set<string>>(new Set())
 
     const instance = React.useMemo(
@@ -88,7 +87,6 @@ export const FunctionFileTriggerComponent: React.FC<FunctionFileTriggerComponent
 
                 changedSettings.current.delete(flowTypeSetting.id!)
             }
-            changedValue.current = false
         })
     }, [flowService, definition])
 
@@ -105,10 +103,6 @@ export const FunctionFileTriggerComponent: React.FC<FunctionFileTriggerComponent
         [validation]
     )
 
-    React.useEffect(
-        () => console.log("test")
-    )
-
     return <>
         <Text size={"md"}>{definition?.names?.[0]?.content ?? FALLBACK_FLOW_TYPE_NAME}</Text>
         <Spacing spacing={"xs"}/>
@@ -140,7 +134,6 @@ export const FunctionFileTriggerComponent: React.FC<FunctionFileTriggerComponent
                                         clearable
                                         key={settingDefinition.id}
                                         onChange={() => {
-                                            changedValue.current = true
                                             changedSettings.current.add(settingDefinition.id!)
                                             validate()
                                         }}
diff --git a/src/packages/ce/src/function/components/files/FunctionFilesComponent.tsx b/src/packages/ce/src/function/components/files/FunctionFilesComponent.tsx
@@ -82,24 +82,6 @@ export const FunctionFilesComponent: React.FC<FunctionFilesComponentProps> = (pr
         [flow, functionStore]
     )
 
-    React.useEffect(() => {
-        //if (activeTab) setSelectedFunctionNode(activeTab, reactFlow);
-        /*setTimeout(() => {
-            const parent = document.querySelector("[data-id=" + '"' + id + '"' + "]") as HTMLDivElement
-            const tabList = parent?.querySelector(".file-tabs__list-content") as HTMLDivElement
-            const trigger = tabList?.querySelector("[data-value=" + '"' + activeTab + '"' + "]") as HTMLDivElement
-
-            if (tabList && trigger) {
-                const offset = (trigger.offsetLeft + (trigger.offsetWidth / 2)) - (tabList.offsetWidth / 2)
-                tabList.scrollLeft = 0 //reset to 0
-                tabList.scrollBy({
-                    left: offset,
-                    behavior: 'smooth'
-                });
-            }
-        }, 0)*/
-    }, [activeTab])
-
     React.useEffect(() => {
         setActiveTab(selectedNode?.id ?? undefined)
     }, [selectedNode?.id])
@@ -192,7 +174,9 @@ export const FunctionFilesComponent: React.FC<FunctionFilesComponentProps> = (pr
                                      value={flowId!}
                                      h={"100%"}
                                      key={flowId!}>
-                        <FunctionFileTriggerComponent instance={flow!}/>
+                        <FunctionFileTriggerComponent flowId={flowId}
+                                                      namespaceId={namespaceId}
+                                                      projectId={projectId}/>
                     </FileTabsContent>
                     {
                         nodes?.map(node => {

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ export const DataTypeNumberInputComponent: React.FC<DataTypeNumberInputComponent`
`30`	`30`	`formValidation?.setValue?.(value)`
`31`	`31`	`onChange?.(value)`
`32`	`32`	`}`
`33`		`- }, 200)`
	`33`	`+ }, 400)`
`34`	`34`
`35`	`35`	`return React.useMemo(() => <>`
`36`	`36`	`<InputLabel>{title}</InputLabel>`