Let's see if we can get the top-down direction to stick

Author: s2t2

src/_App/BotAnalysis/Networks/Graph2.js

@@ -1,5 +1,6 @@
 
 // adapted from source: https://github.com/vasturiano/react-force-graph/blob/master/example/tree/index.html
+// https://github.com/vasturiano/react-force-graph#data-input
 
 import React, { PureComponent, useEffect, useRef} from 'react'
 import { ForceGraph2D } from 'react-force-graph'
@@ -12,6 +13,26 @@ import Spinner from '../../Spinner'
 import cachedData from './data'
 
 const ForceTree = ({ data }) => {
+
+    data["nodes"] = data["nodes"].map(function(node){
+        return {
+            "id": node["id"], // NODE ID
+            "mean_opinion": node["opinion"],
+            "status_count": node["Rate"],
+            "color": node["color"], // NODE COLOR
+            //"x": node["xcoord"],
+            //"y": node["ycoord"],
+        }
+    })
+
+    data["links"] = data["links"].map(function(link){
+        return {
+            "source": link["source"], // SOURCE NODE ID
+            "target": link["target"], // TARGET NODE ID
+            //"weight": link["weight"],
+        }
+    })
+
     const containerRef = useRef()
     useEffect(() => {
         // add collision force
@@ -21,18 +42,17 @@ const ForceTree = ({ data }) => {
     }, [])
     //console.log("GRAPH DATA", data)
 
-    return <ForceGraph2D ref={containerRef} width={900} height={550}
+    return <ForceGraph2D ref={containerRef} width={900} height={500} backgroundColor="#101020"
         graphData={data}
+
         nodeId="id"
-        nodeVal={node => Math.sqrt(50)}
-        nodeLabel="Name"
-        nodeAutoColorBy="color"
+        nodeVal="status_count"
+        nodeLabel={(node) => `@${node["id"]}`}
+        nodeRelSize={1}
 
-        dagMode="td"
-        dagLevelDistance={300}
-        backgroundColor="#101020"
+        //dagMode="td"
+        //dagLevelDistance={300}
         linkColor={() => 'rgba(255,255,255,0.2)'}
-        nodeRelSize={1}
         linkDirectionalParticles={2}
         linkDirectionalParticleWidth={2}
         d3VelocityDecay={0.3}
@@ -60,10 +80,11 @@ export default class NetworkGraph extends PureComponent {
 
     componentDidMount() {
         console.log("DASHBOARD DID MOUNT")
-        this.fetchData() // temporary for dev
-        setTimeout(function(){
-            this.setState({parsedResponse: cachedData})
-        }.bind(this), 800) // let you see the spinner
+        //this.fetchData() // temporary for dev
+        //setTimeout(function(){
+        //    this.setState({parsedResponse: cachedData})
+        //}.bind(this), 800) // let you see the spinner
+        this.setState({parsedResponse: cachedData})
     }
 
     fetchData() {

src/_App/BotAnalysis/Networks/Graph.js src/_App/BotAnalysis/Networks/Graph3.jssrc/_App/BotAnalysis/Networks/Graph.js renamed to src/_App/BotAnalysis/Networks/Graph3.js

@@ -6,8 +6,9 @@ import Container from 'react-bootstrap/Container'
 import Card from 'react-bootstrap/Card'
 //import Table from 'react-bootstrap/Table'
 
-import NetworkGraph from "./Graph"
 import TreeGraph from "./Graph1"
+import NetworkGraph from "./Graph2"
+import NewGraph from "./Graph3"
 
 export default function BotNetworks() {
     return (
@@ -16,6 +17,11 @@ export default function BotNetworks() {
                 <Card.Body>
                     <Card.Title><h3>Bot Networks</h3></Card.Title>
 
+                     <Card.Text>
+                        Bot Community Networks (tree view):
+                    </Card.Text>
+                    <NewGraph/>
+
                     <Card.Text>
                         Bot Community Networks:
                     </Card.Text>