setOptions about vis-react

[anishmprasad]

Hi,
sorry, I missed this on my documentation.
I already exposed vis instance through the prop name vis. you can access all vis methods through this prop

<Graph
   graph={this.state.graph}
   style={this.state.style}
   options={options}
   getNetwork={this.getNetwork.bind(this)}
   events={this.events}
   vis={vis => (this.vis = vis)}
/>

looking forward to more suggestions

[VVranic]

Hi, thank you so much for your quick response.

[mariopnvds]

Hi there!
I can't really get it, could you please make an example?
Thank you!

[anishmprasad]

Example Component

import React from 'react';
import Graph from 'vis-react';

let allNodes;
var highlightActive = false;

let options = {
    layout: {
        randomSeed: 2
    },
    nodes: {
        fixed: {
            x: false,
            y: false
        },
        shape: 'dot',
        size: 13,
        borderWidth: 1.5,
        borderWidthSelected: 2,
        font: {
            size: 15,
            align: 'center',
            bold: {
                color: '#bbbdc0',
                size: 15,
                vadjust: 0,
                mod: 'bold'
            }
        }
    },
    edges: {
        width: 0.01,
        color: {
            color: '#D3D3D3',
            highlight: '#797979',
            hover: '#797979',
            opacity: 1.0
        },
        arrows: {
            to: { enabled: true, scaleFactor: 1, type: 'arrow' },
            middle: { enabled: false, scaleFactor: 1, type: 'arrow' },
            from: { enabled: true, scaleFactor: 1, type: 'arrow' }
        },
        smooth: {
            type: 'continuous',
            roundness: 0
        }
    },
    groups: {
    },
    physics: {
        barnesHut: {
            gravitationalConstant: -30000,
            centralGravity: 1,
            springLength: 70,
            avoidOverlap: 1
        },
        stabilization: { iterations: 2500 }
    },
    interaction: {
        hover: true,
        hoverConnectedEdges: true,
        selectable: false,
        selectConnectedEdges: false,
        zoomView: false,
        dragView: false
    }
};

export default class VisReact extends React.Component {
    constructor(props) {
        super(props);
        this.events = {
            select: function (event) {
                var { nodes, edges } = event;
                console.log('Selected nodes:');
                console.log(nodes);
                console.log('Selected edges:');
                console.log(edges);
            },
            hoverNode: function (event) {
                this.neighbourhoodHighlight(event);
            },
            blurNode: function (event) {
                this.neighbourhoodHighlightHide(event);
            },
            click: function (event) {
                this.redirectToLearn(event);
            }
        };
        let jsonData = this.props.initialGraph; // sample data set

        let nodes = [];
        let edges = [];

        if (jsonData && jsonData.length > 0) {
            for (let i = 0; i < jsonData[0].relation.root_kt_node.length; i++) {
                jsonData[0].relation.root_kt_node[i].color = undefined;
                jsonData[0].relation.root_kt_node[i].label = jsonData[0].relation.root_kt_node[i].source;
                jsonData[0].relation.root_kt_node[i].id = jsonData[0].relation.root_kt_node[i].from;
                jsonData[0].relation.root_kt_node[i].group = jsonData[0].relation.root_kt_node[i].seo_subject_name;
                nodes.push(jsonData[0].relation.root_kt_node[i]);
            }
            for (let j = 0; j < jsonData[0].relation.leading_to_links.length; j++) {
                if (
                    jsonData[0].relation.leading_to_links[j].target.length > 20 &&
                    jsonData[0].relation.leading_to_links[j].target.indexOf('\n') == -1
                ) {
                    jsonData[0].relation.leading_to_links[j].target = jsonData[0].relation.leading_to_links[j].target
                        .split(' ')
                        .reduce((a, e, i) => a + e + (i % 20 === 3 ? '\n' : ' '), ' ');
                }
                jsonData[0].relation.leading_to_links[j].color = undefined;
                jsonData[0].relation.leading_to_links[j].label = jsonData[0].relation.leading_to_links[j].target;
                jsonData[0].relation.leading_to_links[j].id = jsonData[0].relation.leading_to_links[j].to;
                jsonData[0].relation.leading_to_links[j].group =
                    jsonData[0].relation.leading_to_links[j].seo_subject_name;
                nodes.push(jsonData[0].relation.leading_to_links[j]);
            }
            for (let k = 0; k < jsonData[0].relation.derived_from_links.length; k++) {
                if (
                    jsonData[0].relation.derived_from_links[k].source.length > 20 &&
                    jsonData[0].relation.derived_from_links[k].source.indexOf('\n') == -1
                ) {
                    jsonData[0].relation.derived_from_links[k].source = jsonData[0].relation.derived_from_links[
                        k
                    ].source
                        .split(' ')
                        .reduce((a, e, i) => a + e + (i % 20 === 3 ? '\n' : ' '), ' ');
                }
                jsonData[0].relation.derived_from_links[k].color = undefined;
                jsonData[0].relation.derived_from_links[k].label = jsonData[0].relation.derived_from_links[k].source;
                jsonData[0].relation.derived_from_links[k].id = jsonData[0].relation.derived_from_links[k].from;
                jsonData[0].relation.derived_from_links[k].group =
                    jsonData[0].relation.derived_from_links[k].seo_subject_name;
                nodes.push(jsonData[0].relation.derived_from_links[k]);
            }
            for (let i = 0; i < nodes.length; i++) {
                if (nodes[i].target !== '' && nodes[i].to !== '') {
                    let edgeDir = {};
                    edgeDir.from = nodes[i].from;
                    edgeDir.to = nodes[i].to;
                    edgeDir.arrows = 'to';
                    edges.push(edgeDir);
                }
            }
        }

        let newGraph = {};
        newGraph.nodes = nodes;
        newGraph.edges = edges;
        this.state = {
            graph: newGraph,
            style: { width: '100%', height: '100%' },
            network: null
        };
        this.measure = this.measure.bind(this);
        this.events.hoverNode = this.events.hoverNode.bind(this);
        this.events.blurNode = this.events.blurNode.bind(this);
        this.events.click = this.events.click.bind(this);
        this.neighbourhoodHighlight = this.neighbourhoodHighlight.bind(this);
        this.redirectToLearn = this.redirectToLearn.bind(this);
        this.neighbourhoodHighlightHide = this.neighbourhoodHighlightHide.bind(this);
    }

    componentDidMount() {
        window.addEventListener('resize', this.measure);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.measure);
    }

    measure(data) {
        console.log('measure');
        this.state.network.redraw();
        this.state.network.fit();
    }

    redirectToLearn(params) {
    }

    neighbourhoodHighlight(params) {
        let allNodes = this.state.graph.nodes;
        let Nodes = new this.vis.DataSet(allNodes);
        let cloneNodes = Nodes.get({ returnType: 'Object' }); 
        this.state.network.canvas.body.container.style.cursor = 'pointer';

        if (params.node !== undefined) {
            highlightActive = true;
            let i, j;
            let selectedNode = params.node;
            let degrees = 1;

            for (var nodeId in cloneNodes) {
                cloneNodes[nodeId].color = 'rgba(200,200,200,0.5)';
                if (cloneNodes[nodeId].hiddenLabel === undefined) {
                    cloneNodes[nodeId].hiddenLabel = cloneNodes[nodeId].label;
                    cloneNodes[nodeId].label = undefined;
                }
            }

            let connectedNodes = this.state.network.getConnectedNodes(selectedNode);
            let allConnectedNodes = [];
            // get the second degree nodes
            for (i = 1; i < degrees; i++) {
                for (j = 0; j < connectedNodes.length; j++) {
                    allConnectedNodes = allConnectedNodes.concat(
                        this.state.network.getConnectedNodes(connectedNodes[j])
                    );
                }
            }

            // all second degree nodes get a different color and their label back
            for (i = 0; i < allConnectedNodes.length; i++) {
                cloneNodes[allConnectedNodes[i]].color = 'rgba(150,150,150,0.75)';
                if (cloneNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
                    cloneNodes[allConnectedNodes[i]].label = cloneNodes[allConnectedNodes[i]].hiddenLabel;
                    cloneNodes[allConnectedNodes[i]].hiddenLabel = undefined;
                }
            }

            // all first degree nodes get their own color and their label back
            for (let i = 0; i < connectedNodes.length; i++) {
                cloneNodes[connectedNodes[i]].color = undefined;
                if (cloneNodes[connectedNodes[i]]['hiddenLabel'] !== undefined) {
                    cloneNodes[connectedNodes[i]].label = cloneNodes[connectedNodes[i]]['hiddenLabel'];
                    const fontSize = this.state.network.body.nodes;
                    fontSize[connectedNodes[i]].options.font.size = 15;
                    cloneNodes[connectedNodes[i]]['hiddenLabel'] = undefined;
                }
            }

            // the main node gets its own color and its label back.
            cloneNodes[selectedNode].color = undefined;
            if (cloneNodes[selectedNode]['hiddenLabel'] !== undefined) {
                cloneNodes[selectedNode].label = cloneNodes[selectedNode]['hiddenLabel'];
                const fontSize = this.state.network.body.nodes;
                fontSize[selectedNode].options.font.size = 15;
                // this.setState({fontSize})
                cloneNodes[selectedNode]['hiddenLabel'] = undefined;
            }
        } else if (highlightActive === true) {
            // reset all nodes
            for (let nodeId in cloneNodes) {
                cloneNodes[nodeId].color = undefined;
                if (cloneNodes[nodeId]['hiddenLabel'] !== undefined) {
                    cloneNodes[nodeId].label = cloneNodes[nodeId]['hiddenLabel'];
                    const fontSize = this.state.network.body.nodes;
                    fontSize[nodeId].options.font.size = 15;
                    this.setState({ fontSize });
                    cloneNodes[nodeId]['hiddenLabel'] = undefined;
                }
            }
            highlightActive = false;
        }

        let updateArray = [];
        for (let nodeId in cloneNodes) {
            if (cloneNodes.hasOwnProperty(nodeId)) {
                updateArray.push(cloneNodes[nodeId]);
            }
        }
    }

    neighbourhoodHighlightHide(params) {
        let allNodes = this.state.graph.nodes;
        let Nodes = new this.vis.DataSet(allNodes);
        let allNodess = Nodes.get({ returnType: 'Object' });
        this.state.network.canvas.body.container.style.cursor = 'default';
        for (var nodeId in allNodess) {
            allNodess[nodeId].color = 'rgba(200,200,200,0.5)';
            if (allNodess[nodeId].hiddenLabel === undefined) {
                allNodess[nodeId].hiddenLabel = allNodess[nodeId].label;
                allNodess[nodeId].label = undefined;
            }
        }
        highlightActive = true;
        if (highlightActive === true) {
            // reset all nodes
            for (var nodeIds in allNodess) {
                allNodess[nodeIds].color = undefined;
                if (allNodess[nodeIds].hiddenLabel !== undefined) {
                    allNodess[nodeIds].label = allNodess[nodeIds].hiddenLabel;
                    const fontSize = this.state.network.body.nodes;
                    fontSize[nodeIds].options.font.size = 15;
                    this.setState({ fontSize });
                    allNodess[nodeIds].hiddenLabel = undefined;
                }
            }
            highlightActive = false;
        }
        var updateArray = [];
        for (var nodeIde in allNodess) {
            if (allNodess.hasOwnProperty(nodeIde)) {
                updateArray.push(allNodess[nodeIde]);
            }
        }
    }

    getNetwork(data) {
        this.setState({ network: data });
    }

    render() {
        return (
            <div className='vis-react'>
                <div className='vis-react-container'>
                    <Graph
                        graph={this.state.graph}
                        style={this.state.style}
                        options={options}
                        getNetwork={this.getNetwork.bind(this)}
                        events={this.events}
                        vis={vis => (this.vis = vis)}
                    />
                </div>
            </div>
        );
    }
}

[mariopnvds]

Thank you so much!
I really appreciate it!