Bot Networks

package.json

@@ -17,6 +17,7 @@
     "react-bootstrap": "^1.3.0",
     "react-bootstrap-range-slider": "^1.2.2",
     "react-dom": "^16.13.1",
+    "react-force-graph": "^1.37.1",
     "react-ga": "^3.1.2",
     "react-gauge-chart": "^0.2.5",
     "react-plotly.js": "^2.5.0",

src/_App/BotAnalysis/Networks/ForceTree1.js

@@ -0,0 +1,49 @@
+// source: https://github.com/vasturiano/react-force-graph/blob/master/example/tree/index.html
+
+import React, {useEffect, useRef } from 'react' // useState
+import { ForceGraph2D } from 'react-force-graph'
+import * as d3 from 'd3'
+
+//const useForceUpdate = () => {
+//    const setToggle = useState(false)[1]
+//    return () => setToggle(b => !b)
+//}
+
+const ForceTree = ({ data }) => {
+    const fgRef = useRef()
+
+    //const [controls] = useState({ 'DAG Orientation': 'td'});
+    //const forceUpdate = useForceUpdate()
+
+    //useEffect(() => {
+    //    // add controls GUI
+    //    const gui = new dat.GUI()
+    //    gui.add(controls, 'DAG Orientation', ['td', 'bu', 'lr', 'rl', 'radialout', 'radialin', null])
+    //        .onChange(forceUpdate)
+    //}, [])
+
+    useEffect(() => {
+        // add collision force
+        fgRef.current.d3Force('collision', d3.forceCollide(node => Math.sqrt(100 / (node.level + 1))));
+    }, [])
+
+    console.log("GRAPH DATA", data)
+    return <ForceGraph2D width={900} height={550}
+        ref={fgRef}
+        graphData={data}
+        dagMode="td" // dagMode={controls['DAG Orientation']}
+        dagLevelDistance={300}
+        backgroundColor="#101020"
+        linkColor={() => 'rgba(255,255,255,0.2)'}
+        nodeRelSize={1}
+        nodeId="path"
+        nodeVal={node => 100 / (node.level + 1)}
+        nodeLabel="path"
+        nodeAutoColorBy="module"
+        linkDirectionalParticles={2}
+        linkDirectionalParticleWidth={2}
+        d3VelocityDecay={0.3}
+    />
+}
+
+export default ForceTree

src/_App/BotAnalysis/Networks/Graph.js

@@ -0,0 +1,137 @@
+
+// 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, createRef, useEffect, useRef} from 'react'
+import { ForceGraph2D } from 'react-force-graph'
+import * as d3 from 'd3'
+import Card from 'react-bootstrap/Card'
+//import Row from 'react-bootstrap/Row'
+//import Col from 'react-bootstrap/Col'
+import ReactGA from 'react-ga'
+
+import Spinner from '../../Spinner'
+import cachedData from './data'
+
+//function MyGraph(props){
+//    var height = props.height || 500
+//    var width = props.width || 300 // todo: use container ref instead
+//
+//    return <span>
+//        <p>Height: {height} Width: {width}</p>
+//        <svg height={height} width={width} style={{border:"1px solid black"}}></svg>
+//    </span>
+//}
+
+function nodeClickHandler(node, event){
+    console.log("YOU CLICKED", node["id"])
+    ReactGA.event({category: "Bot Networks", action: "Click Node", label: node["id"]})
+    //window.open(`https://twitter.com/${node["id"]}`, '_blank')
+    window.open(`/user-opinions?sn=${node["id"]}`, '_blank')
+}
+
+function MyGraph(props){
+    var height = props.height || 500
+    var width = props.width || 300 // todo: use container ref instead
+    var data = props.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"],
+        }
+    })
+
+    //console.log("GRAPH DATA", data)
+
+    const containerRef = useRef()
+    useEffect(() => {
+        // add collision force
+        //containerRef.current.d3Force('collision', d3.forceCollide(node => Math.sqrt(100 / (node.level + 1))));
+        //containerRef.current.d3Force('collision', d3.forceCollide(node => Math.sqrt(node["Rate"])));
+        containerRef.current.d3Force('collision', d3.forceCollide(node => Math.sqrt(50)));
+    }, [])
+
+    return <ForceGraph2D ref={containerRef} width={width} height={height} backgroundColor="#101020"
+        graphData={data}
+
+        nodeId="id"
+        //nodeVal="status_count"
+        //nodeVal={node => Math.sqrt(node["status_count"])}
+        nodeVal={5}
+        nodeLabel={(node) => `@${node["id"]}`}
+        nodeRelSize={1}
+        onNodeClick={nodeClickHandler}
+
+        //dagMode="td"
+        //dagLevelDistance={300}
+        linkColor={() => 'rgba(255,255,255,0.2)'} // todo: source opinion color
+        linkDirectionalParticles={2}
+        linkDirectionalParticleWidth={2}
+        d3VelocityDecay={0.6} // lower numbers push the nodes farther and faster from eachother (keep large to prevent red bots from flying off screen)
+    />
+}
+
+export default class NetworkGraph extends PureComponent {
+    constructor(props) {
+        super(props)
+        this.state = {parsedResponse: null, width: null}
+        this.containerRef = createRef()
+        this.handleResize = this.handleResize.bind(this)
+    }
+
+    render() {
+        return (
+            <Card style={{marginBottom:0}}>
+                <Card.Body>
+                    {!this.state.parsedResponse ?
+                        <Spinner/> :
+
+                        <div ref={this.containerRef}>
+                            <MyGraph data={this.state.parsedResponse}
+                                width={this.state.width} // so it will re-render on window resize
+                            />
+                        </div>
+                    }
+                </Card.Body>
+            </Card>
+        )
+    }
+
+    componentDidMount(){
+        console.log("COMPONENT DID MOUNT")
+        window.addEventListener("resize", this.handleResize)
+        //const width = this.containerRef.current.clientWidth // containerRef is null here
+        const width = window.innerWidth * 0.74
+        this.setState({parsedResponse:cachedData, width: width})
+    }
+
+    componentWillUnmount() {
+        console.log("COMPONENT WILL UNMOUNT")
+        window.removeEventListener("resize", this.handleResize);
+    }
+
+    handleResize(event){
+        const width = this.containerRef.current.clientWidth // window.innerWidth * 0.75
+        //const width = this.containerRef.current.width
+        console.log("RESIZED THE WINDOW!!", width)
+        this.setState({width: width})
+    }
+
+    componentDidUpdate(){
+        //console.log("COMPONENT DID UPDATE")
+    }
+
+}

src/_App/BotAnalysis/Networks/Graph1.js

@@ -0,0 +1,109 @@
+import React, { PureComponent} from 'react' //createRef, useState, useEffect, useRef
+import * as d3 from 'd3'
+
+import Card from 'react-bootstrap/Card'
+//import Row from 'react-bootstrap/Row'
+//import Col from 'react-bootstrap/Col'
+
+import Spinner from '../../Spinner'
+import cachedData from './data'
+import ForceTree from './ForceTree1'
+
+const MOCK_DATA_MODE = true
+
+export default class NetworkGraph extends PureComponent {
+    constructor(props) {
+        super(props)
+        this.state = {parsedResponse: null} // orientation: "td",
+        //this.containerRef = createRef()
+    }
+
+    render() {
+        return (
+            <Card style={{marginBottom:0}}>
+                <Card.Body>
+                    {!this.state.parsedResponse ?
+                        <Spinner/> :
+                        //<ForceGraph2D
+                        //    ref={this.containerRef}
+                        //    graphData={this.state.parsedResponse}
+                        //    dagMode={this.state.orientation}
+                        //    dagLevelDistance={300}
+                        //    backgroundColor="#fff" //"#101020"
+                        //    linkColor={() => 'rgba(255,255,255,0.2)'}
+                        //    nodeRelSize={1}
+                        //    nodeId="path"
+                        //    nodeVal={node => 100 / (node.level + 1)}
+                        //    nodeLabel="path"
+                        //    nodeAutoColorBy="module"
+                        //    linkDirectionalParticles={2}
+                        //    linkDirectionalParticleWidth={2}
+                        //    d3VelocityDecay={0.3}
+                        ///>
+                        //<ForceTree data={{ nodes, links }}/>
+                        <ForceTree data={this.state.parsedResponse}/>
+                        //<Row>
+                        //    <Col md={12}>
+                        //        <ForceTree data={this.state.parsedResponse}/>
+                        //    </Col>
+                        //</Row>
+                    }
+                </Card.Body>
+            </Card>
+        )
+    }
+
+    componentDidMount() {
+        console.log("DASHBOARD DID MOUNT")
+
+        if(MOCK_DATA_MODE){
+            this.fetchData()
+        } else {
+            this.setState({parsedResponse: cachedData})
+            //setTimeout(function(){
+            //    this.setState({parsedResponse: cachedData})
+            //}.bind(this), 1000) // let you see the spinner
+        }
+    }
+
+    fetchData() {
+        // https://github.com/vasturiano/react-force-graph/blob/master/example/tree/index.html
+        const requestUrl = "https://raw.githubusercontent.com/vasturiano/react-force-graph/master/example/datasets/d3-dependencies.csv"
+        console.log("REQUEST URL:", requestUrl)
+        fetch(requestUrl)
+        .then(r => r.text())
+        .then(d3.csvParse)
+        .then(data => {
+            const nodes = [], links = []
+
+            data.forEach(({ size, path }) => {
+                const levels = path.split('/')
+                const level = levels.length - 1
+                const module = level > 0 ? levels[1] : null
+                const leaf = levels.pop()
+                const parent = levels.join('/')
+
+                const node = {
+                    path,
+                    leaf,
+                    module,
+                    size: +size || 20,
+                    level
+                };
+
+                nodes.push(node)
+
+                if (parent) {
+                    links.push({source: parent, target: path,
+                    //targetNode: node
+                    })
+                }
+            })
+
+            this.setState({parsedResponse: {nodes: nodes, links: links}})
+
+        })
+
+    }
+
+}