layout and arrangement for the visualizer in the ui (#107)

ui/src/NewConsole.js

@@ -1,7 +1,8 @@
-import {Container, Nav, Navbar, NavDropdown} from "react-bootstrap";
+import {Container, Nav, Navbar, NavDropdown, Row} from "react-bootstrap";
 import {useState} from "react";
-import NewEnable from "./NewEnable";
-import NewVersion from "./NewVersion";
+import Visualizer from "./visualizer/Visualizer";
+import NewEnable from "./modals/NewEnable";
+import NewVersion from "./modals/NewVersion";
 
 const NewConsole = (props) => {
     const [showEnableModal, setShowEnableModal] = useState(false);
@@ -32,6 +33,7 @@ const NewConsole = (props) => {
                     </Navbar.Collapse>
                 </Container>
             </Navbar>
+            <Visualizer />
             <NewEnable show={showEnableModal} onHide={closeEnableModal} token={props.user.token}/>
             <NewVersion show={showVersionModal} onHide={closeVersionModal} />
         </Container>

ui/src/index.css

@@ -14,6 +14,17 @@ code, pre {
     padding: 15px 50px 20px;
 }
 
+.visualizer-container {
+    padding: 10px;
+    background: #3b2693;
+    border-radius: 15px;
+    margin-top: 15px;
+}
+.visualizer-controls {
+    text-align: right;
+    margin-top: 5px;
+}
+
 .header-title {
     font-family: 'Russo One', sans-serif;
     font-size: 3em;

ui/src/modals/NewVersion.js

@@ -1,5 +1,5 @@
 import {useEffect, useState} from "react";
-import * as metadata from "./api/metadata";
+import * as metadata from "../api/metadata";
 import Modal from "react-bootstrap/Modal";
 
 const NewVersion = (props) => {

ui/src/visualizer/Network.js

@@ -1,5 +1,6 @@
 import {withSize} from "react-sizeme";
 import {useRef} from "react";
+import {ForceGraph2D} from "react-force-graph";
 
 const Network = (props) => {
     const targetRef = useRef();
@@ -14,7 +15,7 @@ const Network = (props) => {
             width={props.size.width}
             height={500}
             linkOpacity={.75}
-            backgroundColor={"#30205d"}
+            backgroundColor={"#3b2693"}
         />
     )
 }

ui/src/visualizer/Visualizer.js

@@ -0,0 +1,30 @@
+import React, {useState} from "react";
+import {Button, Container, Row} from "react-bootstrap";
+import Network from "./Network";
+
+const Visualizer = (props) => {
+    const [networkGraph, setNetworkGraph] = useState({nodes: [{id: 1}], links: []});
+    const [fgRef, setFgRef] = useState(() => {});
+
+    const centerFocus = () => {
+        if(fgRef != null) {
+            fgRef.current.zoomToFit(200);
+        }
+    }
+
+    return (
+        <div>
+            <div className={"visualizer-container"}>
+                <Network
+                    networkGraph={networkGraph}
+                    setRef={setFgRef}
+                />
+            </div>
+            <div className={"visualizer-controls"}>
+                <Button onClick={centerFocus}>Zoom to Fit</Button>
+            </div>
+        </div>
+    )
+}
+
+export default Visualizer;