feat: add top extension for nodes

Author: jonaslagoni

examples/simple-react/package-lock.json

@@ -4,9 +4,10 @@
   "private": true,
   "dependencies": {
     "@asyncapi/parser": "^1.15.0",
-    "@lagoni/edavisualiser": "0.4.2",
+    "@lagoni/edavisualiser": "0.8.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -20,7 +21,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "build:symlink": "npm link ../../library/node_modules/react-dom && npm link ../../library/node_modules/react"
+    "build:symlink": "npm link ../../library/node_modules/react-dom && npm link ../../library/node_modules/react",
+    "build:link": "cd ../../library && npm link && cd ../examples/simple-react && npm link @lagoni/edavisualiser"
   },
   "eslintConfig": {
     "extends": [

examples/simple-react/package.json

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import {
+  ApplicationView,
+  AsyncAPIApplication,
+  SystemView,
+} from '@lagoni/edavisualiser';
+import '@lagoni/edavisualiser/styles/default.css';
+import '../App.css';
+import '@asyncapi/parser/dist/bundle';
+import { useParams } from 'react-router-dom';
+import { apps } from './apps';
+
+const parser = window['AsyncAPIParser'];
+function Asyncapi() {
+  let { application } = useParams();
+  const [asyncapiDocument, setAsyncapiDocument] = useState(undefined);
+
+  useEffect(() => {
+    // declare the async data fetching function
+    const fetchData = async () => {
+      const appLink = apps[application];
+      if (appLink !== undefined) {
+        const doc = await parser.parseFromUrl(appLink);
+        setAsyncapiDocument(doc);
+      }
+    };
+
+    // call the function
+    fetchData()
+      // make sure to catch any error
+      .catch(console.error);
+  }, []);
+  let something;
+  if (asyncapiDocument !== undefined) {
+    something = (
+      <ApplicationView>
+        <AsyncAPIApplication document={asyncapiDocument} />
+      </ApplicationView>
+    );
+  } else {
+    something = <h1>Not loaded</h1>;
+  }
+  return <div className="App">{something}</div>;
+}
+
+export default Asyncapi;

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

@@ -0,0 +1,6 @@
+export const apps = {
+  rust_public:
+    'https://raw.githubusercontent.com/GamingAPI/definitions/main/bundled/rust_public.asyncapi.json',
+  rust:
+    'https://raw.githubusercontent.com/GamingAPI/definitions/main/bundled/rust.asyncapi.json',
+};

examples/simple-react/src/gamingapi/apps.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+import { AsyncAPIApplication, SystemView } from '@lagoni/edavisualiser';
+import '@lagoni/edavisualiser/styles/default.css';
+import '../App.css';
+import '@asyncapi/parser/dist/bundle';
+import { apps } from './apps';
+
+const parser = window['AsyncAPIParser'];
+function Asyncapi() {
+  const [asyncapiDocuments, setAsyncapiDocuments] = useState([]);
+  useEffect(() => {
+    // declare the async data fetching function
+    const fetchData = async () => {
+      const data = [];
+      for (const [name, asyncapiUrl] of Object.entries(apps)) {
+        const parsedDoc = await parser.parseFromUrl(asyncapiUrl);
+        data.push({ parsedDoc, name });
+      }
+      setAsyncapiDocuments(data);
+    };
+
+    // call the function
+    fetchData()
+      // make sure to catch any error
+      .catch(console.error);
+  }, []);
+  let something;
+  if (asyncapiDocuments.length > 0) {
+    something = (
+      <SystemView>
+        {asyncapiDocuments.map(({ parsedDoc, name }) => {
+          return (
+            <AsyncAPIApplication
+              document={parsedDoc}
+              topExtended={
+                <div className="flex justify-between mb-4">
+                  <a
+                    className="block leading-6 text-gray-900 uppercase text-xs font-light"
+                    href={'/gamingapi/application/' + name}
+                  >
+                    Go to application
+                  </a>
+                </div>
+              }
+            />
+          );
+        })}
+      </SystemView>
+    );
+  } else {
+    something = <h1>Not loaded</h1>;
+  }
+  return <div className="App">{something}</div>;
+}
+
+export default Asyncapi;

examples/simple-react/src/gamingapi/system.js

@@ -3,16 +3,30 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import SystemView from './SystemView';
-import reportWebVitals from './reportWebVitals';
+import GamingapiSystem from './gamingapi/system';
+import GamingapiApplication from './gamingapi/application';
+import Asyncapi from './Asyncapi';
+import { Route, BrowserRouter as Router } from 'react-router-dom';
 
 ReactDOM.render(
   <React.StrictMode>
-    <SystemView />
+    <Router>
+      <Route exact path="/">
+        <App />
+      </Route>
+      <Route exact path="/system">
+        <SystemView />
+      </Route>
+      <Route exact path="/asyncapi">
+        <Asyncapi />
+      </Route>
+      <Route exact path="/gamingapi/system">
+        <GamingapiSystem />
+      </Route>
+      <Route exact path="/gamingapi/application/:application">
+        <GamingapiApplication />
+      </Route>
+    </Router>
   </React.StrictMode>,
   document.getElementById('root'),
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

examples/simple-react/src/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import {
   ApplicationLicenseData,
   ApplicationServerData,
@@ -11,6 +11,7 @@ import { AsyncAPIDocument } from '@asyncapi/parser';
 import { Incoming } from './Incoming';
 type AsyncapiApplicationProps = {
   document: AsyncAPIDocument;
+  topExtended?: ReactElement;
 };
 
 type ApplicationProps = AsyncapiApplicationProps & InternalProps;
@@ -85,6 +86,7 @@ export const AsyncAPIApplication: React.FunctionComponent<ApplicationProps> = pr
   });
   return (
     <Application
+      topExtended={props.topExtended}
       internal={props.internal}
       defaultContentType={props.document.defaultContentType() || 'Undefined'}
       description={props.document.info().description() || 'No description'}

library/src/components/nodes/AsyncAPIApplication.tsx

@@ -13,6 +13,7 @@ export const ApplicationNode: React.FunctionComponent<ApplicationNodeProps> = ({
     servers,
     defaultContentType,
     hideHandlers,
+    topExtended,
   },
 }) => {
   return (
@@ -28,8 +29,9 @@ export const ApplicationNode: React.FunctionComponent<ApplicationNodeProps> = ({
 
       <div>
         <div className="px-4 py-5 sm:px-6">
+          {topExtended !== undefined && topExtended}
           <div className="flex justify-between mb-4">
-            <span className="block leading-6 text-gray-900 uppercase text-xs  font-light">
+            <span className="block leading-6 text-gray-900 uppercase text-xs font-light">
               application
             </span>
           </div>

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

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { FlowElement } from 'react-flow-renderer';
 
 export type InternalProps = {
@@ -29,6 +30,7 @@ export interface ApplicationNodeData {
   externalDocs?: string;
   servers?: ApplicationServerData[];
   hideHandlers?: boolean;
+  topExtended?: ReactElement;
 }
 
 export interface ApplicationNodeProps {

library/src/types.ts

@@ -46,21 +46,23 @@ export const SystemView: React.FunctionComponent<SystemViewProps> = ({
     };
     tempElements.push(applicationReactFlowRendererNode);
   };
+
   const addOutgoingCallback = (node: OutgoingNodeData) => {
     const appId = node.forApplication || '';
     const uniqueConnectionId = node.channel;
     !outgoingConnections[appId] && (outgoingConnections[appId] = []);
     outgoingConnections[appId].push(uniqueConnectionId);
   };
+
   const addIncomingCallback = (node: IncomingNodeData) => {
     const appId = node.forApplication || '';
     const uniqueConnectionId = node.channel;
     !incomingConnections[uniqueConnectionId] &&
       (incomingConnections[uniqueConnectionId] = []);
     incomingConnections[uniqueConnectionId].push(appId);
   };
-  // for each application, list all applications it connects to based on channel
 
+  // for each application, list all applications it connects to based on channel
   useEffect(() => {
     for (const [appId, uniqueChannels] of Object.entries(outgoingConnections)) {
       for (const uniqueChannel of uniqueChannels) {