Skip to content

Commit d2e5294

Browse files
koonpengkoonpeng
committed
add forms to edit section interfaces
Signed-off-by: Teo Koon Peng <[email protected]>
1 parent d23e22e commit d2e5294

17 files changed

+344
-162
lines changed

‎diagram-editor/frontend/add-operation.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ function AddOperation({ parentId, newNodePosition, onAdd }: AddOperationProps) {
130130
<StyledOperationButton
131131
startIcon={<SectionInputIcon />}
132132
onClick={() => {
133-
onAdd?.([createSectionInputChange('new_input', newNodePosition)]);
133+
onAdd?.([createSectionInputChange(uuidv4(), newNodePosition)]);
134134
}}
135135
>
136136
Section Input
@@ -141,9 +141,7 @@ function AddOperation({ parentId, newNodePosition, onAdd }: AddOperationProps) {
141141
<StyledOperationButton
142142
startIcon={<SectionOutputIcon />}
143143
onClick={() => {
144-
onAdd?.([
145-
createSectionOutputChange('new_output', newNodePosition),
146-
]);
144+
onAdd?.([createSectionOutputChange(uuidv4(), newNodePosition)]);
147145
}}
148146
>
149147
Section Output
@@ -154,9 +152,7 @@ function AddOperation({ parentId, newNodePosition, onAdd }: AddOperationProps) {
154152
<StyledOperationButton
155153
startIcon={<SectionBufferIcon />}
156154
onClick={() => {
157-
onAdd?.([
158-
createSectionBufferChange('new_buffer', newNodePosition),
159-
]);
155+
onAdd?.([createSectionBufferChange(uuidv4(), newNodePosition)]);
160156
}}
161157
>
162158
Section Buffer

‎diagram-editor/frontend/diagram-editor.tsx

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import EditScopeForm from './forms/edit-scope-form';
4242
import { NodeManager } from './node-manager';
4343
import {
4444
type DiagramEditorNode,
45-
isOperationNode,
45+
isBuiltinNode,
4646
MaterialSymbol,
4747
NODE_TYPES,
4848
type OperationNode,
@@ -165,6 +165,13 @@ function DiagramEditor() {
165165
[],
166166
);
167167

168+
const handleEdgeChange = React.useCallback(
169+
(change: EdgeChange<DiagramEditorEdge>) => {
170+
handleEdgeChanges([change]);
171+
},
172+
[handleEdgeChanges],
173+
);
174+
168175
const [_, setTemplates] = useTemplates();
169176

170177
const theme = useTheme();
@@ -331,6 +338,13 @@ function DiagramEditor() {
331338
[handleEdgeChanges],
332339
);
333340

341+
const handleNodeChange = React.useCallback(
342+
(change: NodeChange<DiagramEditorNode>) => {
343+
handleNodeChanges([change]);
344+
},
345+
[handleNodeChanges],
346+
);
347+
334348
const [addOperationPopover, setAddOperationPopover] = React.useState<{
335349
open: boolean;
336350
popOverPosition: PopoverPosition;
@@ -410,20 +424,20 @@ function DiagramEditor() {
410424
return null;
411425
}
412426
const node = reactFlowInstance.current.getNode(nodeId);
413-
if (!node || !isOperationNode(node)) {
427+
if (!node || isBuiltinNode(node)) {
414428
return null;
415429
}
416430

417431
const handleDelete = (change: NodeRemoveChange) => {
418-
handleNodeChanges([change]);
432+
handleNodeChange(change);
419433
closeAllPopovers();
420434
};
421435

422436
if (node.type === 'scope') {
423437
return (
424438
<EditScopeForm
425439
node={node as OperationNode<'scope'>}
426-
onChanges={handleNodeChanges}
440+
onChange={handleNodeChange}
427441
onDelete={handleDelete}
428442
onAddOperationClick={(ev) => {
429443
setAddOperationPopover({
@@ -438,12 +452,12 @@ function DiagramEditor() {
438452
return (
439453
<EditNodeForm
440454
node={node}
441-
onChanges={handleNodeChanges}
455+
onChange={handleNodeChange}
442456
onDelete={handleDelete}
443457
/>
444458
);
445459
},
446-
[handleNodeChanges, closeAllPopovers],
460+
[handleNodeChange, closeAllPopovers],
447461
);
448462

449463
const mouseDownTime = React.useRef(0);
@@ -579,7 +593,7 @@ function DiagramEditor() {
579593
ev.stopPropagation();
580594
closeAllPopovers();
581595

582-
if (!isOperationNode(node)) {
596+
if (isBuiltinNode(node)) {
583597
return;
584598
}
585599
setEditingNodeId(node.id);
@@ -702,7 +716,7 @@ function DiagramEditor() {
702716
editingEdge.sourceNode,
703717
editingEdge.targetNode,
704718
)}
705-
onChanges={handleEdgeChanges}
719+
onChange={handleEdgeChange}
706720
onDelete={(changes) => {
707721
setEdges((prev) => applyEdgeChanges([changes], prev));
708722
closeAllPopovers();

‎diagram-editor/frontend/forms/edit-operation-form.tsx renamed to ‎diagram-editor/frontend/forms/base-edit-operation-form.tsx

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@ import type React from 'react';
1111
import type { OperationNode, OperationNodeTypes } from '../nodes';
1212
import { MaterialSymbol } from '../nodes';
1313

14-
export interface EditOperationFormProps<
14+
export interface BaseEditOperationFormProps<
1515
NodeType extends OperationNodeTypes = OperationNodeTypes,
1616
> {
1717
node: OperationNode<NodeType>;
18-
onChanges?: (changes: NodeChange<OperationNode>[]) => void;
18+
onChange?: (changes: NodeChange<OperationNode>) => void;
1919
onDelete?: (change: NodeRemoveChange) => void;
2020
}
2121

22-
function EditOperationForm({
22+
function BaseEditOperationForm({
2323
node,
24-
onChanges,
24+
onChange,
2525
onDelete,
2626
children,
27-
}: React.PropsWithChildren<EditOperationFormProps>) {
27+
}: React.PropsWithChildren<BaseEditOperationFormProps>) {
2828
return (
2929
<Card>
3030
<CardHeader
@@ -47,13 +47,11 @@ function EditOperationForm({
4747
onChange={(ev) => {
4848
const updatedNode = { ...node };
4949
updatedNode.data.opId = ev.target.value;
50-
onChanges?.([
51-
{
52-
type: 'replace',
53-
id: node.id,
54-
item: updatedNode,
55-
},
56-
]);
50+
onChange?.({
51+
type: 'replace',
52+
id: node.id,
53+
item: updatedNode,
54+
});
5755
}}
5856
/>
5957
{children}
@@ -63,4 +61,4 @@ function EditOperationForm({
6361
);
6462
}
6563

66-
export default EditOperationForm;
64+
export default BaseEditOperationForm;

‎diagram-editor/frontend/forms/buffer-edge-form.tsx

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,28 @@ export type BufferEdge = BufferKeyEdge | BufferSeqEdge;
66

77
export interface BufferEdgeFormProps {
88
edge: BufferEdge;
9-
onChanges?: (changes: EdgeChange<BufferEdge>[]) => void;
9+
onChange?: (changes: EdgeChange<BufferEdge>) => void;
1010
}
1111

12-
function BufferEdgeForm({ edge, onChanges }: BufferEdgeFormProps) {
12+
function BufferEdgeForm({ edge, onChange }: BufferEdgeFormProps) {
1313
const handleDataChange = (
1414
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
1515
) => {
1616
if (edge.type === 'bufferKey') {
1717
const newKey = event.target.value;
18-
onChanges?.([
19-
{
20-
type: 'replace',
21-
id: edge.id,
22-
item: { ...edge, data: { key: newKey } },
23-
},
24-
]);
18+
onChange?.({
19+
type: 'replace',
20+
id: edge.id,
21+
item: { ...edge, data: { key: newKey } },
22+
});
2523
} else if (edge.type === 'bufferSeq') {
2624
const newSeq = Number.parseInt(event.target.value, 10);
2725
if (!Number.isNaN(newSeq)) {
28-
onChanges?.([
29-
{
30-
type: 'replace',
31-
id: edge.id,
32-
item: { ...edge, data: { seq: newSeq } },
33-
},
34-
]);
26+
onChange?.({
27+
type: 'replace',
28+
id: edge.id,
29+
item: { ...edge, data: { seq: newSeq } },
30+
});
3531
}
3632
}
3733
};

‎diagram-editor/frontend/forms/buffer-form.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
import { FormControlLabel, Switch } from '@mui/material';
2-
import EditOperationForm, {
3-
type EditOperationFormProps,
4-
} from './edit-operation-form';
2+
import BaseEditOperationForm, {
3+
type BaseEditOperationFormProps,
4+
} from './base-edit-operation-form';
55

6-
export function BufferForm(props: EditOperationFormProps<'buffer'>) {
6+
export type BufferFormProps = BaseEditOperationFormProps<'buffer'>;
7+
8+
function BufferForm(props: BufferFormProps) {
79
return (
8-
<EditOperationForm {...props}>
10+
<BaseEditOperationForm {...props}>
911
<FormControlLabel
1012
control={
1113
<Switch
1214
checked={props.node.data.op.serialize ?? false}
1315
onChange={(_, checked) => {
1416
const updatedNode = { ...props.node };
1517
updatedNode.data.op.serialize = checked;
16-
props.onChanges?.([
17-
{
18-
type: 'replace',
19-
id: props.node.id,
20-
item: updatedNode,
21-
},
22-
]);
18+
props.onChange?.({
19+
type: 'replace',
20+
id: props.node.id,
21+
item: updatedNode,
22+
});
2323
}}
2424
/>
2525
}
2626
label="Serialize"
2727
/>
28-
</EditOperationForm>
28+
</BaseEditOperationForm>
2929
);
3030
}
3131

‎diagram-editor/frontend/forms/edit-edge-form.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ const render: Story['render'] = (args) => {
1717
return (
1818
<EditEdgeForm
1919
{...args}
20-
onChanges={(changes) => {
21-
if (changes.length > 0 && changes[0].type === 'replace') {
22-
updateArgs({ node: changes[0].item });
20+
onChange={(change) => {
21+
if (change.type === 'replace') {
22+
updateArgs({ node: change.item });
2323
}
2424
}}
2525
/>

‎diagram-editor/frontend/forms/edit-edge-form.tsx

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -55,23 +55,21 @@ export function defaultEdgeData(type: EdgeTypes): EdgeData<EdgeTypes> {
5555
export interface EditEdgeFormProps {
5656
edge: DiagramEditorEdge;
5757
allowedEdgeTypes: EdgeTypes[];
58-
onChanges?: (changes: EdgeChange<DiagramEditorEdge>[]) => void;
58+
onChange?: (changes: EdgeChange<DiagramEditorEdge>) => void;
5959
onDelete?: (change: EdgeRemoveChange) => void;
6060
}
6161

6262
function EditEdgeForm({
6363
edge,
6464
allowedEdgeTypes,
65-
onChanges,
65+
onChange,
6666
onDelete,
6767
}: EditEdgeFormProps) {
6868
const subForm = React.useMemo(() => {
6969
switch (edge.type) {
7070
case 'bufferKey':
7171
case 'bufferSeq': {
72-
return (
73-
<BufferEdgeForm edge={edge as BufferEdge} onChanges={onChanges} />
74-
);
72+
return <BufferEdgeForm edge={edge as BufferEdge} onChange={onChange} />;
7573
}
7674
case 'forkResultOk':
7775
case 'forkResultErr': {
@@ -80,16 +78,16 @@ function EditEdgeForm({
8078
case 'splitKey':
8179
case 'splitRemaining':
8280
case 'splitSeq': {
83-
return <SplitEdgeForm edge={edge as SplitEdge} onChanges={onChanges} />;
81+
return <SplitEdgeForm edge={edge as SplitEdge} onChange={onChange} />;
8482
}
8583
case 'unzip': {
86-
return <UnzipEdgeForm edge={edge as UnzipEdge} onChanges={onChanges} />;
84+
return <UnzipEdgeForm edge={edge as UnzipEdge} onChange={onChange} />;
8785
}
8886
default: {
8987
return null;
9088
}
9189
}
92-
}, [edge, onChanges]);
90+
}, [edge, onChange]);
9391

9492
const typeLabelId = React.useId();
9593

@@ -118,13 +116,11 @@ function EditEdgeForm({
118116
const newEdge = { ...edge };
119117
newEdge.type = ev.target.value;
120118
newEdge.data = defaultEdgeData(newEdge.type);
121-
onChanges?.([
122-
{
123-
type: 'replace',
124-
id: edge.id,
125-
item: newEdge,
126-
},
127-
]);
119+
onChange?.({
120+
type: 'replace',
121+
id: edge.id,
122+
item: newEdge,
123+
});
128124
}}
129125
>
130126
{allowedEdgeTypes.map((t) => (

‎diagram-editor/frontend/forms/edit-node-form.stories.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export const Node: Story = {
3434
return (
3535
<EditNodeForm
3636
{...args}
37-
onChanges={(changes) => {
38-
if (changes.length > 0 && changes[0].type === 'replace') {
39-
updateArgs({ node: changes[0].item });
37+
onChange={(change) => {
38+
if (change.type === 'replace') {
39+
updateArgs({ node: change.item });
4040
}
4141
}}
4242
/>
@@ -65,9 +65,9 @@ export const Buffer: Story = {
6565
return (
6666
<EditNodeForm
6767
{...args}
68-
onChanges={(changes) => {
69-
if (changes.length > 0 && changes[0].type === 'replace') {
70-
updateArgs({ node: changes[0].item });
68+
onChange={(change) => {
69+
if (change.type === 'replace') {
70+
updateArgs({ node: change.item });
7171
}
7272
}}
7373
/>
@@ -97,9 +97,9 @@ export const Transform: Story = {
9797
return (
9898
<EditNodeForm
9999
{...args}
100-
onChanges={(changes) => {
101-
if (changes.length > 0 && changes[0].type === 'replace') {
102-
updateArgs({ node: changes[0].item });
100+
onChange={(change) => {
101+
if (change.type === 'replace') {
102+
updateArgs({ node: change.item });
103103
}
104104
}}
105105
/>

0 commit comments

Comments
 (0)