Skip to content

Commit 5549a31

Browse files
author
nicosammito
committed
feat: update DataType components to use parameter index instead of ID for improved handling
1 parent f2cb0a6 commit 5549a31

11 files changed

Lines changed: 109 additions & 77 deletions

File tree

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ import {FunctionService} from "@edition/function/services/Function.service";
1010
export interface DataTypeInputComponentProps extends Omit<InputProps<any | null>, "wrapperComponent" | "type"> {
1111
flowId: Flow['id']
1212
nodeId: NodeFunction['id']
13-
parameterId: NodeParameter['id']
13+
parameterIndex: number
1414
clearable?: boolean
1515
onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void
1616
}
1717

1818
export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (props) => {
1919

20-
const {flowId, nodeId, parameterId, ...rest} = props
20+
const {flowId, nodeId, parameterIndex, ...rest} = props
2121

2222
const flowService = useService(FlowService)
2323
const flowStore = useStore(FlowService)
@@ -32,8 +32,8 @@ export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (pr
3232
)
3333

3434
const parameter = React.useMemo(
35-
() => node?.parameters?.nodes?.find(p => p?.id === parameterId),
36-
[node, parameterId]
35+
() => node?.parameters?.nodes?.[parameterIndex],
36+
[node, parameterIndex]
3737
)
3838

3939
const functionDefinition = React.useMemo(
@@ -57,14 +57,14 @@ export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (pr
5757
return <DataTypeJSONInputComponent
5858
flowId={flowId}
5959
nodeId={nodeId}
60-
parameterId={parameterId}
60+
parameterIndex={parameterIndex}
6161
{...rest}
6262
/>
6363
default:
6464
return <DataTypeTextInputComponent
6565
flowId={flowId}
6666
nodeId={nodeId}
67-
parameterId={parameterId}
67+
parameterIndex={parameterIndex}
6868
{...rest}
6969
/>
7070
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export type DataTypeJSONInputComponentProps = DataTypeInputComponentProps
3636
export const DataTypeJSONInputComponent: React.FC<DataTypeJSONInputComponentProps> = (props) => {
3737

3838

39-
const {flowId, nodeId, parameterId, title, description, formValidation, onChange} = props
39+
const {flowId, nodeId, parameterIndex, title, description, formValidation, onChange} = props
4040

4141
const flowService = useService(FlowService)
4242
const flowStore = useStore(FlowService)
@@ -51,8 +51,8 @@ export const DataTypeJSONInputComponent: React.FC<DataTypeJSONInputComponentProp
5151
)
5252

5353
const parameter = React.useMemo(
54-
() => node?.parameters?.nodes?.find(p => p?.id === parameterId),
55-
[node, parameterId]
54+
() => node?.parameters?.nodes?.[parameterIndex],
55+
[node, parameterIndex]
5656
)
5757

5858
const functionDefinition = React.useMemo(
@@ -73,7 +73,7 @@ export const DataTypeJSONInputComponent: React.FC<DataTypeJSONInputComponentProp
7373
}, [parameter, parameterDefinition, dataTypeStore])
7474

7575

76-
const suggestions = useSuggestions(flowId, nodeId, parameterId)
76+
const suggestions = useSuggestions(flowId, nodeId, parameterIndex)
7777

7878
const [value, setValue] = React.useState<NodeParameterValue | NodeFunction | undefined>(initialValue)
7979
const [editDialogOpen, setEditDialogOpen] = React.useState(false)

src/packages/ce/src/datatype/components/inputs/text/DataTypeTextInputComponent.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export const splitTextAndObjects = (input: string) => {
9595

9696
export const DataTypeTextInputComponent: React.FC<DataTypeTextInputComponentProps> = (props) => {
9797

98-
const {flowId, nodeId, parameterId, ...rest} = props
98+
const {flowId, nodeId, parameterIndex, ...rest} = props
9999

100100
const functionService = useService(FunctionService)
101101
const flowService = useService(FlowService)
@@ -105,7 +105,7 @@ export const DataTypeTextInputComponent: React.FC<DataTypeTextInputComponentProp
105105
return flowService.getById(flowId)
106106
}, [flowService, flowId])
107107

108-
const suggestions = rest.suggestions || useSuggestions(flowId, nodeId, parameterId)
108+
const suggestions = rest.suggestions || useSuggestions(flowId, nodeId, parameterIndex)
109109

110110
const transformSyntax = React.useCallback((value: string | null): InputSyntaxSegment[] => {
111111

src/packages/ce/src/flow/hooks/Flow.edges.hook.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const useEdges = (flowId: Flow['id'], namespaceId?: Namespace['id'], proj
8787
}
8888
}
8989

90-
node.parameters?.nodes?.forEach((param) => {
90+
node.parameters?.nodes?.forEach((param, index) => {
9191
const parameterValue = param?.value;
9292
const parameterDefinition = functionService.getById(node.functionDefinition?.id!!)?.parameterDefinitions?.find(p => p.id === param?.parameterDefinition?.id);
9393
const parameterDataTypeIdentifier = parameterDefinition?.dataTypeIdentifier;
@@ -101,13 +101,13 @@ export const useEdges = (flowId: Flow['id'], namespaceId?: Namespace['id'], proj
101101
const groupId = `${node.id}-group-${idCounter++}`;
102102

103103
edges.push({
104-
id: `${node.id}-${groupId}-param-${param.id}`,
104+
id: `${node.id}-${groupId}-param-${index}`,
105105
source: node.id!,
106106
target: groupId,
107107
deletable: false,
108108
selectable: false,
109109
animated: true,
110-
label: parameterDefinition?.names!![0]?.content ?? param.id,
110+
label: parameterDefinition?.names!![0]?.content ?? index,
111111
data: {
112112
color: hashToColor(parameterValue?.id || ""),
113113
type: 'group',
@@ -132,10 +132,10 @@ export const useEdges = (flowId: Flow['id'], namespaceId?: Namespace['id'], proj
132132
);
133133

134134
edges.push({
135-
id: `${subFnId}-${node.id}-param-${param.id}`,
135+
id: `${subFnId}-${node.id}-param-${index}`,
136136
source: subFnId,
137137
target: node.id!,
138-
targetHandle: `param-${param.id}`,
138+
targetHandle: `param-${index}`,
139139
animated: true,
140140
deletable: false,
141141
selectable: false,

src/packages/ce/src/flow/hooks/NodeValidation.hook.ts

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,16 @@ import {
1616
resolveGenericKeys
1717
} from "@edition/flow/utils/generics";
1818
import {
19-
InspectionSeverity,
2019
useService,
21-
useStore,
22-
ValidationResult
20+
useStore
2321
} from "@code0-tech/pictor";
2422
import {useReturnType} from "@edition/function/hooks/Function.return.hook";
2523
import {getReferenceType} from "@edition/function/hooks/FunctionNodeReference.return.hook";
2624
import {FunctionService} from "@edition/function/services/Function.service";
2725
import {FlowService} from "@edition/flow/services/Flow.service";
2826
import {FlowTypeService} from "@edition/flowtype/services/FlowType.service";
2927
import {DatatypeService} from "@edition/datatype/services/Datatype.service";
28+
import {InspectionSeverity, ValidationResult} from "@core/util/inspection";
3029

3130
const isReference = (value: NodeParameterValue) =>
3231
value.__typename === "ReferenceValue"
@@ -43,11 +42,11 @@ const resolveDataTypeWithGenerics = (
4342
)
4443

4544
const errorResult = (
46-
parameterId: NodeParameter['id'],
45+
parameterIndex: number,
4746
expected?: DataTypeView,
4847
actual?: DataTypeView
4948
): ValidationResult => ({
50-
parameterId,
49+
parameterIndex: parameterIndex,
5150
type: InspectionSeverity.ERROR,
5251
message: [{
5352
code: "en-US",
@@ -106,7 +105,6 @@ export const useNodeValidation = (
106105
for (let i = 0; i < parameters.length; i++) {
107106
const parameter = parameters[i]
108107
const value = values[i]
109-
const nodeParameter = node?.parameters?.nodes?.find(p => p?.parameterDefinition?.id === parameter.id)
110108
if (!value) continue
111109

112110
const expectedType = parameter.dataTypeIdentifier
@@ -116,7 +114,7 @@ export const useNodeValidation = (
116114
const valueDT = dataTypeService.getDataType(valueType!!)
117115

118116
if (!expectedDT || !valueDT) {
119-
errors.push(errorResult(nodeParameter?.id, expectedDT, valueDT))
117+
errors.push(errorResult(i, expectedDT, valueDT))
120118
continue
121119
}
122120

@@ -150,7 +148,7 @@ export const useNodeValidation = (
150148
}
151149

152150
if (!isValid) {
153-
errors.push(errorResult(nodeParameter?.id, expectedDT, valueDT))
151+
errors.push(errorResult(i, expectedDT, valueDT))
154152
}
155153
}
156154

src/packages/ce/src/flow/services/Flow.service.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
NodeFunction,
1717
NodeFunctionIdWrapper,
1818
NodeParameter,
19-
NodeParameterValueInput,
19+
NodeParameterValueInput, ParameterDefinition,
2020
Query,
2121
ReferencePathInput,
2222
ReferenceValue,
@@ -307,19 +307,21 @@ export class FlowService extends ReactiveArrayService<FlowView, FlowDependencies
307307
await this.syncFlow(flowId)
308308
}
309309

310-
async setParameterValue(flowId: FlowView['id'], nodeId: NodeFunction['id'], parameterId: NodeParameter['id'], value?: LiteralValue | ReferenceValue | NodeFunction): Promise<void> {
310+
async setParameterValue(flowId: FlowView['id'], nodeId: NodeFunction['id'], parameterIndex: number, value?: LiteralValue | ReferenceValue | NodeFunction, parameterDefinitionId?: ParameterDefinition['id']): Promise<void> {
311311
const flow = this.getById(flowId)
312312
const index = this.values().findIndex(f => f.id === flowId)
313313
if (!flow) return
314314
const node = this.getNodeById(flowId, nodeId)
315315
if (!node) return
316-
const parameter = node.parameters?.nodes?.find(p => p?.id === parameterId)
317-
if (!parameter) {
318-
316+
const parameter = node.parameters?.nodes?.[parameterIndex]
317+
if (!parameter && parameterDefinitionId) {
319318
//TODO: needs a parameterDefinitionId
320319
const localParameter: NodeParameter = {
321320
__typename: "NodeParameter",
322-
id: parameterId,
321+
parameterDefinition: {
322+
__typename: "ParameterDefinition",
323+
id: parameterDefinitionId
324+
},
323325
value: null
324326
}
325327

@@ -341,7 +343,7 @@ export class FlowService extends ReactiveArrayService<FlowView, FlowDependencies
341343
flow.editedAt = new Date().toISOString()
342344

343345
node.parameters?.nodes?.push(localParameter)
344-
} else {
346+
} else if (parameter) {
345347
this.removeParameterNode(flow, parameter)
346348
if (value?.__typename === "NodeFunction") {
347349
const nextNodeIndex: number = Math.max(0, ...flow.nodes?.nodes?.map(node => Number(node?.id?.match(/NodeFunction\/(\d+)$/)?.[1] ?? 0)) ?? [0])

src/packages/ce/src/function/components/files/FunctionFileDefaultComponent.tsx

Lines changed: 28 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {useNodeValidation} from "@edition/flow/hooks/NodeValidation.hook";
1313
import {FunctionService} from "@edition/function/services/Function.service";
1414
import {FlowService} from "@edition/flow/services/Flow.service";
1515
import {DataTypeInputComponent} from "@edition/datatype/components/inputs/DataTypeInputComponent";
16-
import {ParameterView} from "@edition/function/services/Function.view";
1716

1817
export interface FunctionFileDefaultComponentProps {
1918
node: NodeFunction
@@ -31,53 +30,45 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
3130
const fileTabsService = useService(FileTabsService)
3231
const validation = useNodeValidation(node.id, flowId)
3332

34-
const changedParameters = React.useRef<Set<string>>(new Set())
33+
const changedParameters = React.useRef<Set<number>>(new Set())
3534
const [, startTransition] = React.useTransition()
3635

3736
const definition = React.useMemo(() => {
3837
return functionService.getById(node.functionDefinition?.id!!)
3938
}, [functionStore])
4039

41-
const paramDefinitions = React.useMemo(() => {
42-
const map: Record<string, ParameterView> = {}
43-
definition?.parameterDefinitions?.forEach(pd => {
44-
map[pd.id!!] = pd
45-
})
46-
return map
47-
}, [definition])
48-
49-
const sortedParameters = React.useMemo(() => {
50-
return [...(node.parameters?.nodes || [])].sort((a, b) => a!!.id!!.localeCompare(b?.id!!))
51-
}, [node])
52-
5340
const initialValues = React.useMemo(() => {
5441
const values: Record<string, any> = {}
55-
sortedParameters.forEach(parameter => {
56-
values[parameter?.id!!] = parameter?.value?.__typename === "LiteralValue" ? (typeof parameter.value?.value === "object" && parameter.value?.value != null ? JSON.stringify(parameter.value?.value) : parameter.value.value) : parameter?.value != null ? JSON.stringify(parameter?.value) : parameter?.value
42+
definition?.parameterDefinitions?.forEach((parameter, index) => {
43+
const nodeParameter = node.parameters?.nodes?.[index]
44+
values[index] = nodeParameter?.value?.__typename === "LiteralValue" ? (typeof nodeParameter.value?.value === "object" && nodeParameter.value?.value != null ? JSON.stringify(nodeParameter.value?.value) : nodeParameter.value.value) : nodeParameter?.value != null ? JSON.stringify(nodeParameter?.value) : nodeParameter?.value
5745
})
5846
return values
59-
}, [sortedParameters])
47+
}, [node])
6048

6149
const validations = React.useMemo(() => {
6250
const values: Record<string, any> = {}
63-
sortedParameters.forEach(parameter => {
64-
values[parameter?.id!!] = (_: any) => {
65-
const validationForParameter = validation?.find(v => v.parameterId === parameter?.id)
51+
node.parameters?.nodes?.forEach((parameter, index) => {
52+
values[index] = (_: any) => {
53+
const validationForParameter = validation?.find(v => v.parameterIndex === index)
6654
if (validationForParameter) {
6755
return validationForParameter.message!![0]?.content || "Invalid value"
6856
}
6957
return null
7058
}
7159
})
7260
return values
73-
}, [sortedParameters, validation])
61+
}, [node, validation])
7462

7563
const onSubmit = React.useCallback((values: any) => {
7664
startTransition(async () => {
77-
for (const paramDefinitions1 of sortedParameters) {
78-
if (!changedParameters.current.has(paramDefinitions1?.id!!)) continue;
79-
const syntaxSegment = values[paramDefinitions1?.id!]
80-
const previousValue = paramDefinitions1?.value as NodeParameterValue
65+
for (const parameterDefinition of definition?.parameterDefinitions!) {
66+
const parameterIndex = definition?.parameterDefinitions?.findIndex(p => p?.id === parameterDefinition.id)
67+
if (!parameterIndex) return
68+
if (!changedParameters.current.has(parameterIndex)) continue;
69+
const nodeParameter = node.parameters?.nodes?.find(p => p?.parameterDefinition?.id === parameterDefinition.id)
70+
const syntaxSegment = values[parameterIndex]
71+
const previousValue = nodeParameter?.value as NodeParameterValue
8172
const syntaxValue = syntaxSegment?.[0]?.value ?? syntaxSegment?.value ?? syntaxSegment as NodeFunction | LiteralValue | ReferenceValue
8273

8374
if (previousValue && previousValue.__typename === "NodeFunctionIdWrapper" && previousValue.id) {
@@ -88,45 +79,45 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
8879
}
8980

9081
if (!syntaxValue || !syntaxSegment) {
91-
await flowService.setParameterValue(flowId, node.id!!, paramDefinitions1!!.id!!, undefined);
82+
await flowService.setParameterValue(flowId, node.id!!, parameterIndex, undefined, parameterDefinition.id);
9283
}
9384

9485
try {
9586
const parsedSyntaxValue = Number.isNaN(Number(syntaxValue)) ? JSON.parse(syntaxValue) : syntaxValue
9687
if (!parsedSyntaxValue?.__typename) {
97-
await flowService.setParameterValue(flowId, node.id!!, paramDefinitions1!!.id!!, syntaxValue ? {
88+
await flowService.setParameterValue(flowId, node.id!!, parameterIndex, syntaxValue ? {
9889
__typename: "LiteralValue",
9990
value: parsedSyntaxValue === null || parsedSyntaxValue === undefined ? String(parsedSyntaxValue) : parsedSyntaxValue
100-
} : undefined);
91+
} : undefined, parameterDefinition.id);
10192
continue;
10293
}
10394
} catch (e) {
10495
if (!syntaxValue?.__typename) {
105-
await flowService.setParameterValue(flowId, node.id!!, paramDefinitions1!!.id!!, syntaxValue ? {
96+
await flowService.setParameterValue(flowId, node.id!!, parameterIndex, syntaxValue ? {
10697
__typename: "LiteralValue",
10798
value: syntaxValue,
108-
} : undefined);
99+
} : undefined, parameterDefinition.id);
109100
continue;
110101
}
111102
}
112103

113104
const parsedSyntaxValue = typeof syntaxValue === "object" ? syntaxValue : JSON.parse(syntaxValue)
114105

115-
await flowService.setParameterValue(flowId, node.id!!, paramDefinitions1!!.id!!, parsedSyntaxValue.__typename === "LiteralValue" ? (!!parsedSyntaxValue.value ? parsedSyntaxValue : undefined) : parsedSyntaxValue);
106+
await flowService.setParameterValue(flowId, node.id!!, parameterIndex, parsedSyntaxValue.__typename === "LiteralValue" ? (!!parsedSyntaxValue.value ? parsedSyntaxValue : undefined) : parsedSyntaxValue, parameterDefinition.id);
116107
}
117108
changedParameters.current.clear()
118109
})
119-
}, [flowStore, sortedParameters])
110+
}, [flowStore])
120111

121-
const [inputs, validate] = useForm<Record<Scalars['NodeParameterID']['output'], InputSyntaxSegment[]>>({
112+
const [inputs, validate] = useForm<Record<number, InputSyntaxSegment[]>>({
122113
initialValues: initialValues,
123114
validate: validations,
124115
truthyValidationBeforeSubmit: false,
125116
onSubmit: onSubmit
126117
})
127118

128119
return <Flex style={{gap: ".7rem", flexDirection: "column"}}>
129-
{definition?.parameterDefinitions?.map(parameterDefinition => {
120+
{definition?.parameterDefinitions?.map((parameterDefinition, index) => {
130121

131122
if (!parameterDefinition) return null
132123

@@ -139,15 +130,15 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
139130
{/*@ts-ignore*/}
140131
<DataTypeInputComponent flowId={flowId}
141132
nodeId={node.id}
142-
parameterId={nodeParameter?.id}
133+
parameterIndex={index}
143134
title={title}
144135
description={description}
145136
clearable
146137
onChange={() => {
147-
changedParameters.current.add(nodeParameter?.id!!)
138+
changedParameters.current.add(index)
148139
validate()
149140
}}
150-
{...inputs.getInputProps(nodeParameter?.id!!)}
141+
{...inputs.getInputProps(index)}
151142
/>
152143
</div>
153144
})}

src/packages/ce/src/function/components/files/FunctionFileTriggerComponent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export const FunctionFileTriggerComponent: React.FC<FunctionFileTriggerComponent
104104
return <div>
105105
<DataTypeTextInputComponent flowId={undefined}
106106
nodeId={undefined}
107-
parameterId={undefined}
107+
parameterIndex={0}
108108
title={title}
109109
description={description}
110110
clearable

0 commit comments

Comments
 (0)