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

Commit feaf27f

Browse files
jonaslagonijonaslagoni
committed
feat: add application focused view
1 parent 1c9190d commit feaf27f

File tree

15 files changed

+363
-41
lines changed

15 files changed

+363
-41
lines changed

‎docs/views.md‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@
22
The [views](views.md) just wraps the building blocks into a specific use-case.
33

44
## ApplicationView
5-
This view is centralizing everything around an application. What is sends and what it receives and who interact with it.
6-
7-
<p align="center">
8-
<img src="./views/ApplicationView.png" />
9-
</p>
5+
This view is centralizing everything around the applications. What is sends and what it receives and who interact with it.
106

7+
## ApplicationFocusView
8+
This view is centralizing everything around a single application, where it shows connections to external applications.
119

1210
## SystemView
1311
This view is focused on the larger picture, how applications interact with each other within a system.

‎examples/simple-react/package-lock.json‎

Lines changed: 10 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/simple-react/package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"dependencies": {
66
"@asyncapi/parser": "^1.15.0",
7-
"@lagoni/edavisualiser": "0.8.0",
7+
"@lagoni/edavisualiser": "0.10.0",
88
"react": "^16.8.0",
99
"react-dom": "^16.8.0",
1010
"react-router-dom": "^5.3.0",
@@ -21,8 +21,7 @@
2121
"build": "react-scripts build",
2222
"test": "react-scripts test",
2323
"eject": "react-scripts eject",
24-
"build:symlink": "npm link ../../library/node_modules/react-dom && npm link ../../library/node_modules/react",
25-
"build:link": "cd ../../library && npm link && cd ../examples/simple-react && npm link @lagoni/edavisualiser"
24+
"postinstall": "npm link ../../library/node_modules/react-dom ../../library/node_modules/react ../../library/"
2625
},
2726
"eslintConfig": {
2827
"extends": [

‎examples/simple-react/src/gamingapi/application.js‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
11
import React, { useState, useEffect } from 'react';
22
import {
3-
ApplicationView,
3+
ApplicationFocusView,
44
AsyncAPIApplication,
5-
SystemView,
65
} from '@lagoni/edavisualiser';
76
import '@lagoni/edavisualiser/styles/default.css';
87
import '../App.css';
98
import '@asyncapi/parser/dist/bundle';
10-
import { useParams } from 'react-router-dom';
119
import { apps } from './apps';
10+
import { useParams } from 'react-router-dom';
1211

1312
const parser = window['AsyncAPIParser'];
1413
function Asyncapi() {
1514
let { application } = useParams();
16-
const [asyncapiDocument, setAsyncapiDocument] = useState(undefined);
15+
const [externalApplications, setAsyncapiDocuments] = useState([]);
16+
const [focusedApplication, setFocusedApplication] = useState(undefined);
1717

1818
useEffect(() => {
1919
// declare the async data fetching function
2020
const fetchData = async () => {
21-
const appLink = apps[application];
22-
if (appLink !== undefined) {
23-
const doc = await parser.parseFromUrl(appLink);
24-
setAsyncapiDocument(doc);
21+
const data = [];
22+
for (const [name, asyncapiUrl] of Object.entries(apps)) {
23+
if (application === name) {
24+
const parsedDoc = await parser.parseFromUrl(asyncapiUrl);
25+
setFocusedApplication({ parsedDoc, name });
26+
} else {
27+
const parsedDoc = await parser.parseFromUrl(asyncapiUrl);
28+
data.push({ parsedDoc, name });
29+
}
2530
}
31+
setAsyncapiDocuments(data);
2632
};
2733

2834
// call the function
@@ -31,11 +37,28 @@ function Asyncapi() {
3137
.catch(console.error);
3238
}, []);
3339
let something;
34-
if (asyncapiDocument !== undefined) {
40+
if (externalApplications.length > 0) {
3541
something = (
36-
<ApplicationView>
37-
<AsyncAPIApplication document={asyncapiDocument} />
38-
</ApplicationView>
42+
<ApplicationFocusView>
43+
<AsyncAPIApplication document={focusedApplication.parsedDoc} />
44+
{externalApplications.map(({ parsedDoc, name }) => {
45+
return (
46+
<AsyncAPIApplication
47+
document={parsedDoc}
48+
topExtended={
49+
<div className="flex justify-between mb-4">
50+
<a
51+
className="block leading-6 text-gray-900 uppercase text-xs font-light"
52+
href={'/gamingapi/application/' + name}
53+
>
54+
Go to application
55+
</a>
56+
</div>
57+
}
58+
/>
59+
);
60+
})}
61+
</ApplicationFocusView>
3962
);
4063
} else {
4164
something = <h1>Not loaded</h1>;

‎library/src/components/layouts/ColumnLayout.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,18 @@ function calculateLayout(
2121
passedOptions: Partial<ColumnLayoutOptions> = defaultOptions,
2222
onGroupGive: (element: FlowElement) => number = element => {
2323
switch (element.type) {
24+
case 'externalApplicationNode':
25+
if (element.data.side === 'outgoing') {
26+
return 0;
27+
} else {
28+
return 4;
29+
}
2430
case 'incomingNode':
25-
return 0;
26-
case 'applicationNode':
2731
return 1;
28-
case 'outgoingNode':
32+
case 'applicationNode':
2933
return 2;
34+
case 'outgoingNode':
35+
return 3;
3036
}
3137
return 0;
3238
},

‎library/src/components/nodes/External.tsx‎

Whitespace-only changes.

‎library/src/components/react-flow-renderer-nodes/ApplicationNode.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,15 @@ export const ApplicationNode: React.FunctionComponent<ApplicationNodeProps> = ({
1313
servers,
1414
defaultContentType,
1515
hideHandlers,
16+
hideInHandler,
17+
hideOutHandler,
1618
topExtended,
1719
},
1820
}) => {
1921
return (
2022
<div className="bg-white shadow sm:rounded-lg border-2 border-gray-300 flex">
2123
<Handle type="target" position={Position.Left} style={{ opacity: 0 }} />
22-
{hideHandlers !== true && (
24+
{hideInHandler !== true && hideHandlers !== true && (
2325
<div className="flex justify-center items-center border-r border-gray-200">
2426
<span className="block transform -rotate-90 uppercase text-green-500 w-full font-bold tracking-widest px-2 ">
2527
In
@@ -112,7 +114,7 @@ export const ApplicationNode: React.FunctionComponent<ApplicationNodeProps> = ({
112114
)}
113115
</div>
114116
</div>
115-
{hideHandlers !== true && (
117+
{hideOutHandler !== true && hideHandlers !== true && (
116118
<div className="flex justify-center items-center border-l border-gray-2">
117119
<span className="block transform -rotate-90 uppercase text-yellow-500 w-full font-bold tracking-widest">
118120
Out

‎library/src/components/react-flow-renderer-nodes/ExternalApplication.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React from 'react';
2+
import { Handle, Position } from 'react-flow-renderer';
3+
import { Markdown } from '../Markdown';
4+
import { ExternalApplicationNodeProps } from '../../types';
5+
6+
export const ExternalApplicationNode: React.FunctionComponent<ExternalApplicationNodeProps> = ({
7+
data: {
8+
description,
9+
title,
10+
version,
11+
license,
12+
externalDocs,
13+
defaultContentType,
14+
side,
15+
topExtended,
16+
},
17+
}) => {
18+
return (
19+
<div className="bg-gray-300 shadow sm:rounded-lg border-2 border-white flex">
20+
<Handle type="target" position={Position.Left} style={{ opacity: 0 }} />
21+
{side === 'incoming' && (
22+
<div className="flex justify-center items-center border-r border-gray-200">
23+
<span className="block transform -rotate-90 uppercase text-green-500 w-full font-bold tracking-widest px-2 ">
24+
In
25+
</span>
26+
</div>
27+
)}
28+
29+
<div>
30+
<div className="px-4 py-5 sm:px-6">
31+
{topExtended !== undefined && topExtended}
32+
<div className="flex justify-between mb-4">
33+
<span className="block leading-6 text-gray-900 uppercase text-xs font-light">
34+
application
35+
</span>
36+
</div>
37+
38+
<div className="flex space-x-4">
39+
<h3 className="text-lg leading-6 font-medium text-gray-900">
40+
{title}
41+
</h3>
42+
<span className="block leading-6 px-1.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
43+
v{version}
44+
</span>
45+
</div>
46+
{description && (
47+
<div className="mt-2 text-sm text-gray-500 max-w-xl">
48+
<Markdown>{description}</Markdown>
49+
</div>
50+
)}
51+
{defaultContentType && (
52+
<p className="mt-5 text-xs text-gray-500 ">
53+
Default ContentType:{' '}
54+
<span className="bg-gray-100 text-gray-500 py-0.5 px-0.5 rounded-md">
55+
{defaultContentType}
56+
</span>
57+
</p>
58+
)}
59+
</div>
60+
61+
<div className="text-right text-xs mt-10 space-y-2 italic py-5 sm:px-6">
62+
{externalDocs && (
63+
<a
64+
href={externalDocs}
65+
target="_blank"
66+
className="underline text-blue-400"
67+
rel="noreferrer"
68+
>
69+
{externalDocs}
70+
</a>
71+
)}
72+
{license && (
73+
<a
74+
href={license.url}
75+
target="_blank"
76+
className="block text-gray-400 underline"
77+
rel="noreferrer"
78+
>
79+
License: {license.name}
80+
</a>
81+
)}
82+
</div>
83+
</div>
84+
{side === 'outgoing' && (
85+
<div className="flex justify-center items-center border-l border-gray-2">
86+
<span className="block transform -rotate-90 uppercase text-yellow-500 w-full font-bold tracking-widest">
87+
Out
88+
</span>
89+
</div>
90+
)}
91+
92+
<Handle type="source" position={Position.Right} style={{ opacity: 0 }} />
93+
</div>
94+
);
95+
};
96+
97+
export default ExternalApplicationNode;

‎library/src/components/react-flow-renderer-nodes/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import OutgoingNode from './OutgoingNode';
22
import IncomingNode from './IncomingNode';
33
import ApplicationNode from './ApplicationNode';
4+
import ExternalApplicationNode from './ExternalApplication';
45

56
const nodeTypes = {
67
outgoingNode: OutgoingNode,
78
incomingNode: IncomingNode,
89
applicationNode: ApplicationNode,
10+
externalApplicationNode: ExternalApplicationNode,
911
};
1012

1113
export default nodeTypes;

‎library/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './visualiser/react-flow-renderer/ApplicationView';
2+
export * from './visualiser/react-flow-renderer/ApplicationFocusView';
23
export * from './visualiser/react-flow-renderer/SystemView';
34
export * from './components/nodes/Application';
45
export * from './components/nodes/Incoming';

0 commit comments

Comments
 (0)