Activating the manipulation system in react-graph-vis

Question

I'm using react-graph-vis to visualize networks. According to the vis.js documentation I can turn on the manipulation system by supplying an appropriate manipulation object to the options key. I'm trying to add an Add Edge button to the visualization GUI and this is more or less how I've configured my component:

class MyComponent extends React.Component {
   constructor(props) {
      var graph = /* initial graph */;
      this.state = {
         options: {
            manipulation: {
               enabled: true, initiallyActive: true, addEdge: true
            }
         },
         graph: graph
      }
   }

   render() {
      return <Graph graph={this.state.graph}, options={this.state.options}/>
   }
}

The component renders the specified graph but the manipulation system is missing from the GUI. That is, adding the manipulation entry to options had no effect at all. In particular, there are no edit or add edge buttons and therefore the graph cannot be manipulated. I don't get any errors and the problem is simply that the manipulation system is not being rendered. Adding other options (such as ones related to the layout of the network) works properly. It is only the manipulation option that seems not to be set.

Aladdin

Answer 1

Make sure you import the vis.js stylesheet. The way to do this depends on your project's setup.

You may include it in your html file from a CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis-network.min.css">

If you are using webpack you can do this by adding the following into your JavaScript file:

import 'vis/dist/vis.css';

Involuntary

If using webpack, the import statement should be import 'vis-network/dist/vis-network.min.css'; and you will need to add a css-loader and a style-loader to webpack.config.js – Diabetes