Adding Two Search Bars to Networks

[swaheera]

I have the following data:

library(igraph)
library(visNetwork)

nodes_df = structure(list(id = c("Boss", "TeamA", "TeamB", "SubteamA1", 
"SubteamA2", "SubteamA3", "SubteamB1", "SubteamB2", "SubteamB3", 
"employee1", "employee2", "employee3", "employee4", "employee5", 
"employee6", "employee7", "employee8", "employee9", "employee10", 
"employee11", "employee12", "employee13", "employee14", "employee15", 
"employee16", "employee17", "employee18"), label = c("Boss", 
"TeamA", "TeamB", "SubteamA1", "SubteamA2", "SubteamA3", "SubteamB1", 
"SubteamB2", "SubteamB3", "employee1", "employee2", "employee3", 
"employee4", "employee5", "employee6", "employee7", "employee8", 
"employee9", "employee10", "employee11", "employee12", "employee13", 
"employee14", "employee15", "employee16", "employee17", "employee18"
), group = c("yellow", "red", "red", "green", "green", "green", 
"green", "green", "green", "purple", "purple", "purple", "purple", 
"purple", "purple", "purple", "purple", "purple", "purple", "purple", 
"purple", "purple", "purple", "purple", "purple", "purple", "purple"
)), row.names = c(NA, -27L), class = "data.frame")

edges_df = structure(list(from = c("Boss", "TeamA", "TeamA", "TeamA", "SubteamA1", 
"SubteamA1", "SubteamA1", "SubteamA2", "SubteamA2", "SubteamA2", 
"SubteamA3", "SubteamA3", "SubteamA3", "Boss", "TeamB", "TeamB", 
"TeamB", "SubteamB1", "SubteamB1", "SubteamB1", "SubteamB2", 
"SubteamB2", "SubteamB2", "SubteamB3", "SubteamB3", "SubteamB3"
), to = c("TeamA", "SubteamA1", "SubteamA2", "SubteamA3", "employee1", 
"employee2", "employee3", "employee4", "employee5", "employee6", 
"employee7", "employee8", "employee9", "TeamB", "SubteamB1", 
"SubteamB2", "SubteamB3", "employee10", "employee11", "employee12", 
"employee13", "employee14", "employee15", "employee16", "employee17", 
"employee18")), row.names = c(NA, -26L), class = "data.frame")

names <- c("john", "jason", "jack", "jim", "julian", "james", "jack", "joseph", "johnathan", "alex", "andrew", "anthony", "avery", "allison", "alistair", "alan", "alexander", "art", "steven", "stephen", "sean", "shawn", "simon", "sasha", "solomon", "serge", "stuart")

nodes_df$names = names

Using this data, I made the following graph network:

 # Create the visNetwork object
    visNetwork(nodes_df, edges_df) %>%   visHierarchicalLayout(direction = "LR") %>%
        visOptions(highlightNearest = TRUE, nodesIdSelection = TRUE) %>%
        visInteraction(navigation = "zoom") %>%
        visInteraction(navigation = "drag")

The result looks something like this: https://i.stack.imgur.com/zTg9e.png

My Question: I am trying to add another "search bar" to this diagram that also lets you search by "name" - this would look something like this:

https://i.stack.imgur.com/VqOTy.png

My Attempt: I tried to look into this (e.g. https://cran.r-project.org/web/packages/visNetwork/vignettes/Introduction-to-visNetwork.html) and try the following code but got a warning:

visNetwork(nodes_df, edges_df) %>%   visHierarchicalLayout(direction = "LR") %>%
    visOptions(highlightNearest = TRUE, nodesIdSelection = TRUE) %>%
    visInteraction(navigation = "zoom") %>%
    visInteraction(navigation = "drag") %>%  visOptions(selectedBy = c("names", "id"))

    Warning message:
    In if (!byselection$variable %in% colnames(graph$x$nodes)) { :
      the condition has length > 1 and only the first element will be used

I also tried:

visNetwork(nodes_df, edges_df) %>%   visHierarchicalLayout(direction = "LR") %>%
    visOptions(highlightNearest = TRUE, nodesIdSelection = TRUE) %>%
    visInteraction(navigation = "zoom") %>%
    visInteraction(navigation = "drag") %>%  visOptions(selectedBy = "names")  %>%  visOptions(selectedBy = "id")
But this just over writes the previous search option.

Can someone please show me how to fix this?

Thanks!