Skip to content
This repository was archived by the owner on Oct 29, 2022. It is now read-only.

Commit 581524c

Browse files
jonaslagonijonaslagoni
authored
feat: add optional edge types (#20)
1 parent 7566ccd commit 581524c

File tree

7 files changed

+130
-75
lines changed

7 files changed

+130
-75
lines changed

‎examples/simple-react/src/SimpleAsyncapi.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ function Asyncapi() {
230230
let node;
231231
if (document !== undefined) {
232232
node = (
233-
<ApplicationView asyncapi={{ document }} />
233+
<ApplicationView asyncapi={{ document }} edgeType={'default'} />
234234
);
235235
} else {
236236
node = <h1>Wait...</h1>;

‎examples/simple-react/src/SimpleSystem.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ function App() {
55
<div className="App">
66
<SystemView
77
includeControls={true}
8+
edgeType={'smoothstep'}
89
applications={[
910
{
1011
application: {

‎library/src/types.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,3 +114,10 @@ export interface OutgoingNodeProps {
114114
export interface LayoutProps {
115115
elementsToRender: FlowElement[];
116116
}
117+
118+
export type EdgeType =
119+
| 'smoothstep'
120+
| 'step'
121+
| 'straight'
122+
| 'floating'
123+
| 'default';

‎library/src/visualiser/helpers/collect-nodes.ts‎

Lines changed: 85 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -10,78 +10,85 @@ import {
1010
ApplicationServerData,
1111
MessageData,
1212
SystemViewData,
13+
EdgeType,
1314
} from '../../types';
1415

15-
export function collectApplicationNodes({
16-
asyncapi,
17-
application,
18-
incomingOperations,
19-
outgoingOperations,
20-
}: ApplicationViewData): Array<FlowElement> {
16+
export function collectApplicationNodes(
17+
{
18+
asyncapi,
19+
application,
20+
incomingOperations,
21+
outgoingOperations,
22+
}: ApplicationViewData,
23+
edgeType: EdgeType = 'smoothstep',
24+
): Array<FlowElement> {
2125
const nodes: Array<FlowElement> = [];
2226

2327
if (asyncapi) {
24-
nodes.push(...collectAsyncAPINodes(asyncapi));
28+
nodes.push(...collectAsyncAPINodes(asyncapi, { edgeType }));
2529
} else if (application) {
2630
nodes.push(...createApplicationNode(application));
2731
}
2832

2933
if (incomingOperations) {
3034
incomingOperations.forEach(op => {
31-
nodes.push(...createIncomingNode(op));
35+
nodes.push(...createIncomingNode(op, edgeType));
3236
});
3337
}
3438
if (outgoingOperations) {
3539
outgoingOperations.forEach(op => {
36-
nodes.push(...createOutgoingNode(op));
40+
nodes.push(...createOutgoingNode(op, edgeType));
3741
});
3842
}
3943

4044
return nodes;
4145
}
4246

43-
export function collectApplicationFocusNodes({
44-
asyncapi,
45-
application,
46-
external,
47-
incomingOperations,
48-
outgoingOperations,
49-
}: ApplicationFocusViewData): Array<FlowElement> {
47+
export function collectApplicationFocusNodes(
48+
{
49+
asyncapi,
50+
application,
51+
external,
52+
incomingOperations,
53+
outgoingOperations,
54+
}: ApplicationFocusViewData,
55+
edgeType: EdgeType = 'smoothstep',
56+
): Array<FlowElement> {
5057
const nodes: Array<FlowElement> = [];
5158
const leadApplicationIncomingChannels: string[] = [];
5259
const leadApplicationOutgoingChannels: string[] = [];
5360

5461
if (asyncapi) {
5562
const createIncomingNodeFn = (data: IncomingNodeData) => {
5663
leadApplicationIncomingChannels.push(data.id);
57-
return createIncomingNode(data);
64+
return createIncomingNode(data, edgeType);
5865
};
5966
const createOutgoingNodeFn = (data: OutgoingNodeData) => {
6067
leadApplicationOutgoingChannels.push(data.id);
61-
return createOutgoingNode(data);
68+
return createOutgoingNode(data, edgeType);
6269
};
6370

6471
nodes.push(
65-
...collectAsyncAPINodes(
66-
asyncapi,
67-
createApplicationNode,
72+
...collectAsyncAPINodes(asyncapi, {
73+
createApplicationNodeFn: createApplicationNode,
6874
createIncomingNodeFn,
6975
createOutgoingNodeFn,
70-
),
76+
edgeType,
77+
}),
7178
);
7279
} else if (application) {
7380
nodes.push(...createApplicationNode(application));
7481
}
7582

7683
if (incomingOperations) {
7784
incomingOperations.forEach(op => {
78-
nodes.push(...createIncomingNode(op));
85+
nodes.push(...createIncomingNode(op, edgeType));
7986
leadApplicationIncomingChannels.push(op.id);
8087
});
8188
}
8289
if (outgoingOperations) {
8390
outgoingOperations.forEach(op => {
84-
nodes.push(...createOutgoingNode(op));
91+
nodes.push(...createOutgoingNode(op, edgeType));
8592
leadApplicationOutgoingChannels.push(op.id);
8693
});
8794
}
@@ -106,12 +113,12 @@ export function collectApplicationFocusNodes({
106113
external.forEach(externalApp => {
107114
if (externalApp.asyncapi) {
108115
nodes.push(
109-
...collectAsyncAPINodes(
110-
externalApp.asyncapi,
111-
createExternalApplicationNode,
116+
...collectAsyncAPINodes(externalApp.asyncapi, {
117+
createApplicationNodeFn: createExternalApplicationNode,
112118
createIncomingNodeFn,
113119
createOutgoingNodeFn,
114-
),
120+
edgeType,
121+
}),
115122
);
116123
} else if (externalApp.application) {
117124
nodes.push(...createExternalApplicationNode(externalApp.application));
@@ -129,9 +136,10 @@ export function collectApplicationFocusNodes({
129136
return nodes;
130137
}
131138

132-
export function collectSystemNodes({
133-
applications = [],
134-
}: SystemViewData): Array<FlowElement> {
139+
export function collectSystemNodes(
140+
{ applications = [] }: SystemViewData,
141+
edgeType: EdgeType = 'floating',
142+
): Array<FlowElement> {
135143
const nodes: Array<FlowElement> = [];
136144
const outgoingConnections: { [key: string]: string[] } = {};
137145
const incomingConnections: { [key: string]: string[] } = {};
@@ -158,12 +166,12 @@ export function collectSystemNodes({
158166

159167
applications.forEach(app => {
160168
if (app.asyncapi) {
161-
collectAsyncAPINodes(
162-
app.asyncapi,
169+
collectAsyncAPINodes(app.asyncapi, {
163170
createApplicationNodeFn,
164171
createOutgoingNodeFn,
165172
createIncomingNodeFn,
166-
);
173+
edgeType,
174+
});
167175
} else if (app.application) {
168176
nodes.push(...createApplicationNode(app.application));
169177
}
@@ -182,7 +190,7 @@ export function collectSystemNodes({
182190
for (const incomingApp of incomingConnections[uniqueChannel]) {
183191
const edge = {
184192
id: `${appId}-to-${incomingApp}`,
185-
type: 'floating',
193+
type: edgeType,
186194
style: { stroke: 'orange', strokeWidth: 4 },
187195
source: appId,
188196
target: incomingApp,
@@ -196,11 +204,19 @@ export function collectSystemNodes({
196204
return nodes;
197205
}
198206

199-
export function collectAsyncAPINodes(
207+
function collectAsyncAPINodes(
200208
{ document, topExtended }: AsyncapiApplicationData,
201-
createApplicationNodeFn: typeof createApplicationNode = createApplicationNode,
202-
createIncomingNodeFn: typeof createIncomingNode = createIncomingNode,
203-
createOutgoingNodeFn: typeof createOutgoingNode = createOutgoingNode,
209+
{
210+
createApplicationNodeFn = createApplicationNode,
211+
createIncomingNodeFn = createIncomingNode,
212+
createOutgoingNodeFn = createOutgoingNode,
213+
edgeType = 'floating',
214+
}: {
215+
createApplicationNodeFn?: typeof createApplicationNode;
216+
createIncomingNodeFn?: typeof createIncomingNode;
217+
createOutgoingNodeFn?: typeof createOutgoingNode;
218+
edgeType?: EdgeType;
219+
},
204220
): Array<FlowElement> {
205221
const nodes: Array<FlowElement> = [];
206222
const documentTitle = document.info().title();
@@ -216,13 +232,16 @@ export function collectAsyncAPINodes(
216232
});
217233

218234
nodes.push(
219-
...createIncomingNodeFn({
220-
id: `incoming_${channelId}`,
221-
channel: channelPath,
222-
description: channel.description() || 'No description',
223-
messages,
224-
forApplication: documentTitle,
225-
}),
235+
...createIncomingNodeFn(
236+
{
237+
id: `incoming_${channelId}`,
238+
channel: channelPath,
239+
description: channel.description() || 'No description',
240+
messages,
241+
forApplication: documentTitle,
242+
},
243+
edgeType,
244+
),
226245
);
227246
} else if (channel.hasSubscribe()) {
228247
const messages: MessageData[] = channel
@@ -233,13 +252,16 @@ export function collectAsyncAPINodes(
233252
});
234253

235254
nodes.push(
236-
...createOutgoingNodeFn({
237-
id: `outgoing_${channelId}`,
238-
channel: channelPath,
239-
description: channel.description() || 'No description',
240-
messages,
241-
forApplication: documentTitle,
242-
}),
255+
...createOutgoingNodeFn(
256+
{
257+
id: `outgoing_${channelId}`,
258+
channel: channelPath,
259+
description: channel.description() || 'No description',
260+
messages,
261+
forApplication: documentTitle,
262+
},
263+
edgeType,
264+
),
243265
);
244266
}
245267
}
@@ -323,7 +345,10 @@ export function createExternalApplicationNode(
323345
return [externalOutgoing, externalIncoming];
324346
}
325347

326-
export function createIncomingNode(data: IncomingNodeData): Array<FlowElement> {
348+
export function createIncomingNode(
349+
data: IncomingNodeData,
350+
edgeType: EdgeType,
351+
): Array<FlowElement> {
327352
const appId = data.forApplication || '';
328353
const incomingNode: Node = {
329354
id: data.id,
@@ -333,7 +358,7 @@ export function createIncomingNode(data: IncomingNodeData): Array<FlowElement> {
333358
};
334359
const connectionEdge: Edge = {
335360
id: `incoming-${appId}-${data.id}`,
336-
type: 'smoothstep',
361+
type: edgeType,
337362
style: { stroke: '#7ee3be', strokeWidth: 4 },
338363
target: appId,
339364
source: data.id,
@@ -357,7 +382,10 @@ export function createExternalIncomingNode(
357382
] as Edge[];
358383
}
359384

360-
export function createOutgoingNode(data: OutgoingNodeData): Array<FlowElement> {
385+
export function createOutgoingNode(
386+
data: OutgoingNodeData,
387+
edgeType: EdgeType,
388+
): Array<FlowElement> {
361389
const appId = data.forApplication || '';
362390
const outgoingNode: Node = {
363391
id: data.id,
@@ -367,7 +395,7 @@ export function createOutgoingNode(data: OutgoingNodeData): Array<FlowElement> {
367395
};
368396
const connectionEdge: Edge = {
369397
id: `outgoing-${appId}-${data.id}`,
370-
type: 'smoothstep',
398+
type: edgeType,
371399
style: { stroke: 'orange', strokeWidth: 4 },
372400
source: appId,
373401
target: data.id,

‎library/src/visualiser/react-flow-renderer/ApplicationFocusView.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import nodeTypes from '../../components/react-flow-renderer-nodes';
1111
import FloatingEdge from '../../components/react-flow-renderer-nodes/FloatingEdge';
1212
import { collectApplicationFocusNodes } from '../helpers/collect-nodes';
1313

14-
import { ApplicationFocusViewData, LayoutProps } from '../../types';
14+
import { ApplicationFocusViewData, EdgeType, LayoutProps } from '../../types';
1515

1616
const edgeTypes: EdgeTypesType = {
1717
floating: FloatingEdge,
@@ -23,6 +23,7 @@ export interface ApplicationFocusViewProps extends ApplicationFocusViewData {
2323
) => React.JSXElementConstructor<LayoutProps>;
2424
sideMenu?: () => React.JSXElementConstructor<any>;
2525
includeControls?: boolean;
26+
edgeType?: EdgeType;
2627
}
2728

2829
export const ApplicationFocusView: React.FunctionComponent<ApplicationFocusViewProps> = ({
@@ -44,15 +45,19 @@ export const ApplicationFocusView: React.FunctionComponent<ApplicationFocusViewP
4445
);
4546
},
4647
includeControls = false,
48+
edgeType = 'smoothstep',
4749
}) => {
4850
const [loaded, setLoaded] = useState(false);
49-
const elements = collectApplicationFocusNodes({
50-
asyncapi,
51-
application,
52-
external,
53-
incomingOperations,
54-
outgoingOperations,
55-
});
51+
const elements = collectApplicationFocusNodes(
52+
{
53+
asyncapi,
54+
application,
55+
external,
56+
incomingOperations,
57+
outgoingOperations,
58+
},
59+
edgeType,
60+
);
5661

5762
const handleLoaded = (reactFlowInstance: any) => {
5863
setLoaded(true);

0 commit comments

Comments
 (0)