vis.js-network

How does the `filter` object in the `configure` object in Vis.js work?

The configure.filter can receive strings like nodes, edges, layout, interaction, manipulation, physics, selection, renderer. It also accepts a function, but I don't know how to tweak it. I tried both

function (enabled, path) {
  return path.indexOf('physics') !== -1;
}

and

function (option, enabled) {
  return enabled.indexOf('physics') !== -1;
}

but none of them works. The whole configuration panel for physics still displays.

In Vis Network | Physics | Playing with Physics there is an example code to display only the smooth option of the edges:

filter: function (option, path) {
    if (path.indexOf("physics") !== -1) {
        return true;
    }
    if (path.indexOf("smooth") !== -1 || option === "smooth") {
        return true;
    }
    return false;

And from there I can go wild and do this:

return path.indexOf("smooth") !== -1 || path.indexOf("font") !== -1 || path.indexOf("smooth") !== -1

But again I don't know how it works. This still limits my choice of what options to display. For example I can't limit font to be only for nodes, not for edges, or use only font.size or hidden.

See also: Can labels be hidden by default, but shown when the node is selected?

Solution

  • In vis-network configure.filter allows a function to be set which filters the displayed configuration options. When the configuration options are loaded/updated this function is called once for each option to determine if the option should be displayed.

    As per the function definition filter: function (option, path) { two arguments are passed for each configuration option. The first argument option is a string with the name of the option being checked, for example "size". The second argument path is an array of strings, giving the path to the option for example ["nodes", "font"]. These options and paths match the vis-network options documentation. The function should return true if the option should be displayed, or false if it should not.

    To only display specific options the function should check:

    The below example displays the "nodes font" options (except colors), the "nodes hidden" option and the "edges arrows to" option. Comments are included to describe the checks and show the contents of path and options being checked for.

    filter: function(option, path){
  // Uncomment the below to print all options
  //console.log(path, option);
  
  // Display the general headers
  // Without this the options can display in the wrong sections
  // path: []
  // option: "nodes" or "edges"
  if (path.length === 0 && (option === "nodes" || option === "edges")){
    return true;
  }
  
  // Display the options for node fonts
  // path: ["nodes", "font"]
  // options: <any>
  if (path.indexOf("nodes") === 0 && path.indexOf("font") === 1){
    // Do not display the options for color, background or strokeColor (these appear to be bugged even in the physics example on vis.js site)
    if (option !== "color" && option !== "background" && option !== "strokeColor"){
      return true;
    }
  }
  
  // Display the option for nodes being hidden
  // path: ["nodes"]
  // option: "hidden"
  if (path.length === 1 && path.indexOf("nodes") === 0 && option === "hidden"){
    return true;
  }
  
  // Display the option for "to" arrows on edges
  // path: ["edges", "arrows", "to"]
  // option: "enabled"
  if (path.length === 3 && path.indexOf("edges") === 0 && path.indexOf("arrows") === 1 && path.indexOf("to") === 2 && option === "enabled"){
    return true;
  }
  
  // By default return false so other options are hidden
  return false;
}

    This is incorporated into the working example below.

    // create an array with nodes
var nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" },
]);

// create an array with edges
var edges = new vis.DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 },
]);

// create a network
var container = document.getElementById("mynetwork");
var treeData = {
  nodes: nodes,
  edges: edges,
};
var options = {
  configure: {
    filter: function(option, path){
      // Uncomment the below to print all options
      //console.log(path, option);
      
      // Display the general headers
      // Without this the options can display in the wrong sections
      // path: []
      // option: "nodes" or "edges"
      if (path.length === 0 && (option === "nodes" || option === "edges")){
        return true;
      }
      
      // Display the options for node fonts
      // path: ["nodes", "font"]
      // options: <any>
      if (path.indexOf("nodes") === 0 && path.indexOf("font") === 1){
        // Do not display the options for color, background or strokeColor (these appear to be bugged even in the physics example on vis.js site)
        if (option !== "color" && option !== "background" && option !== "strokeColor"){
          return true;
        }
      }
      
      // Display the option for nodes being hidden
      // path: ["nodes"]
      // option: "hidden"
      if (path.length === 1 && path.indexOf("nodes") === 0 && option === "hidden"){
        return true;
      }
      
      // Display the option for "to" arrows on edges
      // path: ["edges", "arrows", "to"]
      // option: "enabled"
      if (path.length === 3 && path.indexOf("edges") === 0 && path.indexOf("arrows") === 1 && path.indexOf("to") === 2 && option === "enabled"){
        return true;
      }
      
      // By default return false so option is hidden
      return false;
    }
  }
};
var network = new vis.Network(container, treeData, options);
    
    #mynetwork {
  width: 600px;
  height: 100px;
  border: 1px solid lightgray;
}
    <script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork"></div>