start of visualizer scaffolding; dependencies (#107)

ui/package.json

@@ -17,8 +17,10 @@
     "react-data-table-component": "^7.5.2",
     "react-dom": "^18.2.0",
     "react-flow-renderer": "^10.3.12",
+    "react-force-graph": "^1.41.17",
     "react-router-dom": "^6.4.0",
     "react-scripts": "5.0.1",
+    "react-sizeme": "^3.0.2",
     "react-sparklines": "^1.7.0",
     "styled-components": "^5.3.5"
   },

ui/src/index.js

@@ -6,9 +6,7 @@ import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>
 );
 
 gateway.init({

ui/src/visualizer/Network.js

@@ -0,0 +1,22 @@
+import {withSize} from "react-sizeme";
+import {useRef} from "react";
+
+const Network = (props) => {
+    const targetRef = useRef();
+    if(props.setRef != null) {
+        props.setRef(targetRef);
+    }
+
+    return (
+        <ForceGraph2D
+            ref={targetRef}
+            graphData={props.networkGraph}
+            width={props.size.width}
+            height={500}
+            linkOpacity={.75}
+            backgroundColor={"#30205d"}
+        />
+    )
+}
+
+export default withSize()(Network);