it now starts a server

.idea/misc.xml

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ANTLRGenerationPreferences">
     <option name="perGrammarGenerationSettings">

src/main/java/org/lumijiez/Main.java

@@ -43,6 +43,8 @@ public class Main {
 
         } catch (IOException | URISyntaxException e) {
             System.err.println("Error processing the input file: " + e.getMessage());
+        } catch (InterruptedException e) {
+            throw new RuntimeException(e);
         }
     }
 
@@ -58,19 +60,18 @@ public class Main {
         }
     }
 
-    private static void startReactServer() throws IOException {
+    private static void startReactServer() throws IOException, InterruptedException {
         ProcessBuilder processBuilder = new ProcessBuilder();
         String os = System.getProperty("os.name").toLowerCase();
         if (os.contains("win")) {
-            processBuilder.command("cmd.exe", "/c", "cd winx-serve && npm start");
+            processBuilder.command("cmd.exe", "/c", "start", "cmd.exe", "/k", "cd winx-serve && npm start");
         } else {
-            processBuilder.command("bash", "-c", "cd winx-serve && npm start");
+            processBuilder.command("xterm", "-e", "bash", "-c", "cd winx-serve && npm start");
         }
-        processBuilder.inheritIO();
+        //processBuilder.inheritIO();
-//        Process process =
         processBuilder.start();
 
-        // int exitCode = process.waitFor();
+         //int exitCode = process.waitFor();
-        // System.out.println("React server started with exit code " + exitCode);
+         //System.out.println("React server started with exit code " + exitCode);
     }
 }

winx-serve/src/CustomGraph.js

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import ReactFlow, { Controls, Background, useNodesState, useEdgesState } from 'react-flow-renderer';
 import CustomNodeComponent from './CustomNodeComponent';
-import {ReactFlowProvider} from "reactflow";
+import { ReactFlowProvider } from "reactflow";
-import {jsonData} from './Data.js';
+import { jsonData } from './Data.js';
+import dagre from 'dagre';
 
 const nodeTypes = {
     customNode: CustomNodeComponent,
@@ -12,11 +13,32 @@ function CustomGraph() {
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
+    const yOffset = 1;
+
     useEffect(() => {
+        const g = new dagre.graphlib.Graph();
+        g.setGraph({
+            rankdir: 'TB',
+            marginx: 50,
+            marginy: 50
+        });
+        g.setDefaultEdgeLabel(() => ({}));
+
+        const addNodesAndEdges = (nodesToAdd, edgesToAdd) => {
+            nodesToAdd.forEach(node => {
+                g.setNode(node.id, { width: 450, height: 200 });
+            });
+            edgesToAdd.forEach(edge => {
+                g.setEdge(edge.source, edge.target);
+            });
+            return { nodesToAdd, edgesToAdd };
+        };
+
+        // Initialize loaded nodes and edges arrays
         const loadedNodes = [];
         const loadedEdges = [];
-        let yOffset = 100;
 
+        // Process each package in the JSON data
         jsonData.forEach((pkg, index) => {
             const pkgId = `pkg-${pkg.name}`;
             loadedNodes.push({
@@ -121,14 +143,25 @@ function CustomGraph() {
             });
         });
 
-        console.log(loadedEdges)
+        // Apply nodes and edges to the dagre graph for layout calculation
+        const { nodesToAdd, edgesToAdd } = addNodesAndEdges(loadedNodes, loadedEdges);
+        dagre.layout(g);
 
-        setNodes(loadedNodes);
+        // Assign positions to nodes based on dagre layout
-        setEdges(loadedEdges);
+        const positionedNodes = nodesToAdd.map(node => ({
+            ...node,
+            position: {
+                x: g.node(node.id).x - g.node(node.id).width / 2,
+                y: g.node(node.id).y - g.node(node.id).height / 2
+            }
+        }));
+
+        setNodes(positionedNodes);
+        setEdges(edgesToAdd);
     }, [setNodes, setEdges]);
 
     return (
-        <div style={{ height: 100+'vh', width: 100 + '%' }}>
+        <div style={{ height: '100vh', width: '100%' }}>
             <ReactFlowProvider>
                 <ReactFlow
                     nodes={nodes}
@@ -136,8 +169,8 @@ function CustomGraph() {
                     onNodesChange={onNodesChange}
                     onEdgesChange={onEdgesChange}
                     nodeTypes={nodeTypes}
-                    fitView>
+                    fitView
-
+                >
                     <Controls />
                     <Background />
                 </ReactFlow>

winx-serve/src/CustomGraph1.js

@@ -0,0 +1,149 @@
+import React, { useEffect } from 'react';
+import ReactFlow, { Controls, Background, useNodesState, useEdgesState } from 'react-flow-renderer';
+import CustomNodeComponent from './CustomNodeComponent';
+import {ReactFlowProvider} from "reactflow";
+import {jsonData} from './Data.js';
+
+const nodeTypes = {
+    customNode: CustomNodeComponent,
+};
+
+function CustomGraph1() {
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+    useEffect(() => {
+        const loadedNodes = [];
+        const loadedEdges = [];
+        let yOffset = 100;
+
+        jsonData.forEach((pkg, index) => {
+            const pkgId = `pkg-${pkg.name}`;
+            loadedNodes.push({
+                id: pkgId,
+                type: 'customNode',
+                position: { x: 100, y: yOffset * index },
+                data: { label: `Package: ${pkg.name}`, ...pkg }
+            });
+
+            pkg.interfaces.forEach((iface, iIndex) => {
+                const ifaceId = `iface-${iface.name}`;
+                loadedNodes.push({
+                    id: ifaceId,
+                    type: 'customNode',
+                    position: { x: 300, y: yOffset * (index + 1 + iIndex) },
+                    data: { label: `Interface: ${iface.name}`, ...iface }
+                });
+                loadedEdges.push({
+                    id: `e-${pkgId}-${ifaceId}`,
+                    source: pkgId,
+                    target: ifaceId,
+                    type: 'simplebezier',
+                    animated: true,
+                });
+
+                iface.functions.forEach((func, fIndex) => {
+                    const funcId = `func-${iface.name}-${func.name}`;
+                    loadedNodes.push({
+                        id: funcId,
+                        type: 'customNode',
+                        position: { x: 500, y: yOffset * (index + 2 + iIndex + fIndex) },
+                        data: { label: `${func.name}()`, ...func }
+                    });
+                    loadedEdges.push({
+                        id: `e-${ifaceId}-${funcId}`,
+                        source: ifaceId,
+                        target: funcId,
+                        type: 'simplebezier',
+                        animated: true
+                    });
+                });
+            });
+
+            pkg.specifications.forEach((spec, sIndex) => {
+                const specId = `spec-${spec.name}`;
+                loadedNodes.push({
+                    id: specId,
+                    type: 'customNode',
+                    position: { x: 300, y: yOffset * (index + 1 + sIndex) },
+                    data: { label: `Specification: ${spec.name}`, ...spec }
+                });
+
+                if (spec.implemented_interface) {
+                    const interfaceId = `iface-${spec.implemented_interface}`;
+                    loadedEdges.push({
+                        id: `e-${interfaceId}-${specId}`,
+                        source: interfaceId,
+                        target: specId,
+                        type: 'simplebezier',
+                        animated: true
+                    });
+                }
+
+                loadedEdges.push({
+                    id: `e-${pkgId}-${specId}`,
+                    source: pkgId,
+                    target: specId,
+                    type: 'simplebezier',
+                    animated: true,
+                    style: { stroke: '#000', strokeWidth: 4 }
+                });
+
+                spec.functions.forEach((func, fIndex) => {
+                    const funcId = `func-${spec.name}-${func.name}`;
+                    loadedNodes.push({
+                        id: funcId,
+                        type: 'customNode',
+                        position: { x: 500, y: yOffset * (index + 2 + sIndex + fIndex) },
+                        data: { label: `${func.name}()`, ...func },
+                    });
+
+                    if (func.implemented_interface) {
+                        const interfaceId = `iface-${func.implemented_interface}`;
+                        loadedEdges.push({
+                            id: `e-${interfaceId}-${funcId}`,
+                            source: interfaceId,
+                            target: funcId,
+                            type: 'simplebezier',
+                            animated: true
+                        });
+                    }
+
+                    loadedEdges.push({
+                        id: `e-${specId}-${funcId}`,
+                        source: specId,
+                        target: funcId,
+                        type: 'simplebezier',
+                        animated: true,
+                        style: { stroke: '#000', strokeWidth: 4 }
+                    });
+                });
+            });
+        });
+
+        console.log(loadedEdges)
+
+        setNodes(loadedNodes);
+        setEdges(loadedEdges);
+    }, [setNodes, setEdges]);
+
+    return (
+        <div style={{ height: 100+'vh', width: 100 + '%' }}>
+            <ReactFlowProvider>
+                <ReactFlow
+                    nodes={nodes}
+                    edges={edges}
+                    onNodesChange={onNodesChange}
+                    onEdgesChange={onEdgesChange}
+                    nodeTypes={nodeTypes}
+                    fitView>
+
+                    <Controls />
+                    <Background />
+                </ReactFlow>
+            </ReactFlowProvider>
+        </div>
+    );
+}
+
+export default CustomGraph1;

winx-serve/src/Data.js

@@ -23,7 +23,7 @@ export const jsonData = [ {
         "value" : "\"1\""
       }, {
         "key" : "DataFormat",
-        "value" : "\"ID: %patientId, DOB: %dob\""
+        "value" : "\"ID: %patientId,DOB: %dob\""
       }, {
         "key" : "DataPrivacy",
         "value" : "\"High\""