fpc visualizer example code

plugins/dashboard/frontend/src/app/components/FPC.tsx

+import * as React from 'react';
+import NodeStore from "app/stores/NodeStore";
+import {inject, observer} from "mobx-react";
+import {FPCStore, LightenDarkenColor, Node} from "app/stores/FPCStore";
+import Row from "react-bootstrap/Row";
+import Container from "react-bootstrap/Container";
+import Col from "react-bootstrap/Col";
+
+interface Props {
+    nodeStore?: NodeStore;
+    fpcStore?: FPCStore;
+}
+
+@inject("nodeStore")
+@inject("fpcStore")
+@observer
+export default class FPC extends React.Component<Props, any> {
+    render() {
+        let {nodes} = this.props.fpcStore;
+        let nodeSquares = [];
+        nodes.forEach((node: Node, id: number, obj: Map<number, Node>) => {
+            nodeSquares.push(
+                <Col xs={1} key={id.toString()} style={{
+                    height: 50,
+                    width: 50,
+                    background: LightenDarkenColor("#707070", node.opinion),
+                }}>
+                    {node.opinion}
+                </Col>
+            )
+        })
+        return (
+            <Container>
+                <Row>
+                    {nodeSquares}
+                </Row>
+            </Container>
+        );
+    }
+}

plugins/dashboard/frontend/src/app/components/Root.tsx

@@ -16,6 +16,7 @@ import {ExplorerAddressQueryResult} from "app/components/ExplorerAddressResult";
 import {Explorer404} from "app/components/Explorer404";
 import {Neighbors} from "app/components/Neighbors";
 import {Visualizer} from "app/components/Visualizer";
+import FPC from "app/components/FPC";
 
 interface Props {
     history: any;
@@ -65,6 +66,11 @@ export class Root extends React.Component<Props, any> {
                                 dRNG
                             </Nav.Link>
                         </LinkContainer>
+                        <LinkContainer to="/fpc-example">
+                            <Nav.Link>
+                                FPC
+                            </Nav.Link>
+                        </LinkContainer>
                     </Nav>
                     <Navbar.Collapse className="justify-content-end">
                         <NavExplorerSearchbar/>
@@ -82,6 +88,7 @@ export class Root extends React.Component<Props, any> {
                     <Route exact path="/explorer/address/:id" component={ExplorerAddressQueryResult}/>
                     <Route exact path="/explorer/404/:search" component={Explorer404}/>
                     <Route exact path="/explorer" component={Explorer}/>
+                    <Route exact path="/fpc-example" component={FPC}/>
                     <Route exact path="/visualizer" component={Visualizer}/>
                     <Route exact path="/drng" component={Drng}/>
                     <Redirect to="/dashboard"/>

plugins/dashboard/frontend/src/app/stores/FPCStore.tsx

+import {RouterStore} from "mobx-react-router";
+import {action, observable, ObservableMap} from "mobx";
+
+export class Node {
+    id: number;
+    opinion: number = 0;
+}
+
+export function LightenDarkenColor(col, amt) {
+    var num = parseInt(col, 16);
+    var r = (num >> 16) + amt;
+    var b = ((num >> 8) & 0x00FF) + amt;
+    var g = (num & 0x0000FF) + amt;
+    var newColor = g | (b << 8) | (r << 16);
+    return newColor.toString(16);
+}
+
+export class FPCStore {
+    routerStore: RouterStore;
+
+    @observable n: number = 0;
+
+    @observable nodes = new ObservableMap<number, Node>();
+
+    constructor(routerStore: RouterStore) {
+        this.routerStore = routerStore;
+
+        setInterval(this.addNewNode, 100);
+        setInterval(this.updateNodeValue, 400);
+    }
+
+    @action
+    addNewNode = () => {
+        const id = Math.floor(Math.random() * 1000);
+        let node = new Node();
+        node.id = id;
+        node.opinion = Math.floor(Math.random() * 100);
+        this.nodes.set(id, node);
+    }
+
+    @action
+    updateNodeValue = () => {
+        let iter: IterableIterator<number> = this.nodes.keys();
+        for (const key of iter) {
+            let node = this.nodes.get(key);
+            node.opinion = Math.floor(Math.random() * 100);
+            this.nodes.set(key, node);
+        }
+    }
+
+
+}
+
+export default FPCStore;
\ No newline at end of file

plugins/dashboard/frontend/src/main.tsx

@@ -10,6 +10,7 @@ import NodeStore from "app/stores/NodeStore";
 import ExplorerStore from "app/stores/ExplorerStore";
 import DrngStore from "app/stores/DrngStore";
 import VisualizerStore from "app/stores/VisualizerStore";
+import FPCStore from "app/stores/FPCStore";
 
 // prepare MobX stores
 const routerStore = new RouterStore();
@@ -17,12 +18,14 @@ const nodeStore = new NodeStore();
 const explorerStore = new ExplorerStore(routerStore);
 const drngStore = new DrngStore(routerStore);
 const visualizerStore = new VisualizerStore(routerStore);
+const fpcStore = new FPCStore(routerStore);
 const stores = {
     "routerStore": routerStore,
     "nodeStore": nodeStore,
     "explorerStore": explorerStore,
     "drngStore": drngStore,
     "visualizerStore": visualizerStore,
+    "fpcStore": fpcStore,
 };
 
 const browserHistory = createBrowserHistory();