feat: updated Readme.md + fixing application node bug (#193)

* fixing subscribe node error when creation of flow from yaml file

* Update README.md

added the mqtt.yaml file and demo video

* updating the readme.md file

Author: SumantxD

Desktop/src/parser/flowGenerator.ts

@@ -1,5 +1,6 @@
 import { AsyncAPIDocument, Channel, Operation, Message } from '@asyncapi/parser';
 import { Edge, Node } from 'reactflow';
+import { connect } from 'mqtt';
 
 interface FileredChannel {
   channel: string;
@@ -8,6 +9,16 @@ interface FileredChannel {
   messagesModel: Message[]; 
 }
 
+function createMqttClient() {
+    
+  const client = connect('mqtt://localhost:1883', {
+    manualConnect: true,
+  });
+
+  return client;
+
+}
+
 //given the operation publish/subscribe we will extract the channels realted to it from the spec
 function getChannelsByOperation(operation: string, spec: AsyncAPIDocument) {
     const channels = spec.channels();
@@ -30,6 +41,8 @@ function getChannelsByOperation(operation: string, spec: AsyncAPIDocument) {
   function buildFlowElementsForOperation({ operation, spec, applicationLinkType, data }: { operation: 'publish' | 'subscribe'; spec: AsyncAPIDocument; applicationLinkType: string, data: any }): Array<{ node: Node, edge: Edge }> {
     return getChannelsByOperation(operation, spec).reduce((nodes: any, channel) => {
       const { channelModel, operationModel, messagesModel } = channel;
+
+      const mqttClient = createMqttClient();
 
       const node: Node = {
         id: `${operation}-${channel.channel}`,
@@ -42,7 +55,7 @@ function getChannelsByOperation(operation: string, spec: AsyncAPIDocument) {
             title: message.uid(),
             description: message.description(),
           })),
-  
+          autoClient: mqttClient,
           spec,
           description: channelModel.description(),
           operationId: operationModel.id(),

Desktop/src/renderer/GraphGenerator/ApiVisualizer.tsx

@@ -202,11 +202,11 @@ export default function ApiVisualizer() {
       const targetNode = nodes.find((node) => node.id === edge.target);
 
       if(sourceNode?.type === 'publishNode' || sourceNode?.type === 'subscribeNode'){
-        sourceNode?.data.mqttClient.end();
+        sourceNode?.data.mqttClient?.end();
       }
 
       if(targetNode?.type === 'publishNode' || targetNode?.type === 'subscribeNode'){
-        targetNode?.data.mqttClient.end();
+        targetNode?.data.mqttClient?.end();
       }
 
     });

Desktop/src/renderer/Nodes/ApplicationNode.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Handle, Position } from 'reactflow';
 import { AsyncAPIDocument } from '@asyncapi/parser';
 import type { FunctionComponent } from 'react';
@@ -94,18 +94,23 @@ export const ApplicationNode: FunctionComponent<ApplicationNodeProps> = ({
   }
 
   const handleClick = () => {
-    console.log('the button was clicked')
     ipcRenderer.send('start-aedes');
   };
 
   const disconnectAedes = () => {
     ipcRenderer.send('stop-aedes');
   }
 
+  useEffect(() => {
+    return () => {
+      ipcRenderer.send('stop-aedes');
+    }
+  }, [])
+
   const [isConnected, setIsConnected] = useState(false);
 
   return (
-    <div style={{ margin: '0.7rem', padding: '1rem', border: '1px solid #F0E68C', borderRadius: '0.5rem', fontFamily: 'Arial, sans-serif', backgroundColor: 'rgba(255, 255, 153, 0.32)' }}>
+    <div style={{ margin: '0.7rem', maxWidth: '500px', padding: '1rem', border: '1px solid #F0E68C', borderRadius: '0.5rem', fontFamily: 'Arial, sans-serif', backgroundColor: 'rgba(255, 255, 153, 0.32)' }}>
       <Handle
         type="target"
         position={Position.Left}

Desktop/src/renderer/Nodes/PublishNode.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Handle, Position } from 'reactflow';
 
 
@@ -7,25 +7,24 @@ interface IData {
   channel: string
   description: string
   mqttClient?: any;
+  autoClient?: any;
 }
 
 interface PublishNodeProps {
   data: IData
 }
 
 export const PublishNode: React.FunctionComponent<PublishNodeProps> = ({
-  data: { message , channel, description, mqttClient },
+  data: { message , channel, description, mqttClient, autoClient },
 }) => {
 
   const [topic, setTopic] = useState(channel || '');
   const [payload, setPayload] = useState(message || '');
   const [qos, setQos] = useState(0);
 
+  const client = mqttClient || autoClient
 
   const handleClick = () => {
-
-    const client = mqttClient
-
     if (client) {
       client.publish(topic, payload, { qos: qos }, function (err) {
         console.log(topic,payload,"T&Pwhild publishing")
@@ -37,6 +36,14 @@ export const PublishNode: React.FunctionComponent<PublishNodeProps> = ({
 
   };
 
+
+  useEffect(() => {
+    if(autoClient){
+      autoClient.connect()
+    }
+  }, [])
+  
+
   return (
     <div style={{ margin: '0.7rem', padding: '1rem', border: '1px solid #3498db', borderRadius: '0.5rem', fontFamily: 'Arial, sans-serif', backgroundColor: 'rgba(173, 216, 230, 0.32)' }}>
       <div>

Desktop/src/renderer/Nodes/SubscribeNode.tsx

@@ -10,18 +10,19 @@ interface IData {
   description: string
   id: string
   mqttClient?: any;
+  autoClient?: any;
 }
 
 interface PublishNodeProps {
   data: IData
 }
 
-export const SubscribeNode: FunctionComponent<PublishNodeProps> = ({ data: { topic, description, messages, mqttClient, id, QOS } }) => {
+export const SubscribeNode: FunctionComponent<PublishNodeProps> = ({ data: { topic, description, messages, mqttClient, id, QOS, autoClient } }) => {
 
   const [subTopic, setSubTopic] = useState(topic || '');
   const [qos, setQos] = useState(QOS || 0);
 
-  const client = mqttClient
+  const client = mqttClient || autoClient
 
   const handleClick = () => {
     if (client) {
@@ -34,10 +35,17 @@ export const SubscribeNode: FunctionComponent<PublishNodeProps> = ({ data: { top
   };
 
   useEffect(() => {
-    client.on('message', function (topic, message) {
-      console.log(message.toString())
-      handleAddMessage(message.toString()+ "--/" + topic.toString())
-    })
+
+    if(autoClient){
+      autoClient.connect()
+    }
+
+    if (client) {
+      client.on('message', function (topic, message) {
+        console.log(message.toString())
+        handleAddMessage(message.toString()+ "--/" + topic.toString())
+      })
+    }
   }, [])
 
 

Desktop/src/renderer/containers/TitleBar/menu.tsx

@@ -29,6 +29,10 @@ export const MenuBar: React.FC<MenuBarProps> = ({ menu: propMenu }) => {
     [clicked]
   );
 
+  useEffect(() => {
+    setMenu(propMenu);
+  }, [propMenu]);
+
   const onButtonClick = useCallback(
     (i) => {
       if (lock.current) {
@@ -40,6 +44,25 @@ export const MenuBar: React.FC<MenuBarProps> = ({ menu: propMenu }) => {
     [clicked, focusing]
   );
 
+  // const onButtonClick = useCallback(
+  //   (i) => {
+  //     if (lock.current) {
+  //       lock.current = false;
+  //       return;
+  //     }
+
+  //     // Use the previous state when updating based on the current state
+  //     setClicked((prevClicked) => {
+  //       const newClicked = !(focusing === i && prevClicked);
+  //       if (newClicked) {
+  //         setFocusing(i);
+  //       }
+  //       return newClicked;
+  //     });
+  //   },
+  //   [focusing,clicked]
+  // );
+
   const onTouchStart = useCallback(
     (i) => {
       if (i !== focusing && clicked) {

README.md

@@ -31,6 +31,17 @@ Usage
 ```
 npm run desktop
 ```
+#### Video Demo :
+
+https://github.com/SumantxD/simulator/assets/65810424/a8f143b8-1ba5-4b8e-bb2a-5e2f4a91c1e1
+
+#### Simulation Configuration YAML :
+
+[Dowload mqtt.zip](https://github.com/asyncapi/simulator/files/13696873/mqtt.zip)
+
+
+
+
 
 #### Throught command line: