working commit

client/.madgerc

@@ -0,0 +1,18 @@
+{
+	"fontSize": "10px",
+  "tsconfig": "tsconfig.json",
+  "fileExtensions": ["ts", "tsx", "js", "jsx"],
+  "backgroundColor": "#FFFFFF",
+  "textColor": "#FFFFFF",
+  "nodeColor": "black",
+  "noDependencyColor": "green",
+  "cyclicNodeColor": "red",
+  "edgeColor": "green",
+	"graphVizOptions": {
+		"G": {
+			"rankdir": "TB",
+      "layout": "neato",
+      "splines": "curved"
+		}
+	}
+}

client/package.json

@@ -20,7 +20,8 @@
     "configapp": "script/config.bash",
     "start": "script/start.bash",
     "clean": "script/clean.bash",
-    "format": "prettier --ignore-path ../.gitignore --write \"**/*.{ts,tsx,css,scss}\""
+    "format": "prettier --ignore-path ../.gitignore --write \"**/*.{ts,tsx,css,scss}\"",
+    "graph": "script/graph.bash"
   },
   "eslintConfig": {
     "extends": [

client/script/clean.bash

@@ -1,2 +1,3 @@
 #!/bin/bash
-rm -rf build/ node_modules/ coverage/ playwright-report/
+rm -rf build/ node_modules/ coverage/ playwright-report/
+rm src.svg test.svg

client/script/graph.bash

@@ -0,0 +1,9 @@
+#!/bin/bash
+PATH="$(yarn bin):$PATH"
+export PATH
+printf "Generate dependency graph for code"
+
+madge --image src.svg src
+madge --image test.svg test
+#eval madge --image src.svg "$TS_CONFIG" "$EXTENSIONS" src 
+#madge --image test.svg --ts-config tsconfig.json --extensions ts,tsx test 

docs/developer/client/client.md

@@ -3,3 +3,7 @@
 The [Website](https://github.com/INTO-CPS-Association/DTaaS/tree/feature/distributed-demo/client#readme)
 is how the end-users interact with the software platform. The website is
 being developed as a React single page web application.
+
+A dependency graph for the entire codebase of the react application is:
+
+![React website dependency graph](client-dep-graph.svg)

script/env.sh

@@ -84,4 +84,8 @@ sudo -H pip3 install mkdocs-with-pdf
 sudo -H pip3 install qrcode
 
 # Install markdownlint
-sudo gem install mdl
+sudo gem install mdl
+
+# Install madge for generating dependency graphs of typescript projects
+sudo apt-get install graphviz
+sudo npm install -g madge

servers/execution/runner/package.json

@@ -16,7 +16,8 @@
     "syntax": "script/syntax.bash",
     "test": "script/test.bash",
     "test:nocov": "script/test.bash nocoverage",
-    "test:watchAll": "script/test.bash watchAll"
+    "test:watchAll": "script/test.bash watchAll",
+    "graph": "script/graph.bash"
   },
   "bin": {
     "runner": "./dist/src/main.js"

servers/execution/runner/script/clean.bash

@@ -1,2 +1,3 @@
 #!/bin/bash
-rm -rf build node_modules coverage dist
+rm -rf build node_modules coverage dist
+rm src.svg test.svg

servers/execution/runner/script/graph.bash

@@ -0,0 +1,6 @@
+#!/bin/bash
+PATH="$(yarn bin):$PATH"
+export PATH
+printf "Generate graph for source code"
+madge --image src.svg --ts-config tsconfig.json --extensions ts,tsx src 
+madge --image test.svg --ts-config tsconfig.json --extensions ts,tsx test 

servers/lib/package.json

@@ -13,7 +13,8 @@
     "clean": "script/clean.bash",
     "start": "script/start.bash",
     "syntax": "script/syntax.bash",
-    "test": "script/test.bash"
+    "test": "script/test.bash",
+    "graph": "script/graph.bash"
   },
   "dependencies": {
     "@apollo/client": "^3.7.10",

servers/lib/script/clean.bash

@@ -1,2 +1,3 @@
 #!/bin/bash
-rm -rf build node_modules coverage dist
+rm -rf build node_modules coverage dist
+rm src.svg test.svg

servers/lib/script/graph.bash

@@ -0,0 +1,6 @@
+#!/bin/bash
+PATH="$(yarn bin):$PATH"
+export PATH
+printf "Generate graph for source code"
+madge --image src.svg --ts-config tsconfig.json --extensions ts,tsx src 
+madge --image test.svg --ts-config tsconfig.json --extensions ts,tsx test