datastorm-open / visNetwork

R package, using vis.js library for network visualization
Other
542 stars 127 forks source link

When node is selected, only label highlighted edges and only display direct edges #470

Open scemmons opened 1 month ago

scemmons commented 1 month ago

Hi,

In the following code, when you select a node, only that node and the nodes that have relationships with that node are selected. However, edges that have indirect connections are also highlighted, but not effected by the selectionWidth argument. In other words, how can I make it such that the edges with indirect connections are greyed out like the other nodes and edges?

# make nodes 
nodes <- data.frame(
  id = paste0(LETTERS[1:15]), 
  group = rep(paste0("group", 1:5), each = 3),  
  label = paste0(LETTERS[1:15])  
)

# set seed
set.seed(123)

# make edges
edges <- data.frame(
  from = sample(nodes$id, 50, replace = TRUE),  
  to = sample(nodes$id, 50, replace = TRUE),   
  title = runif(50, min = -1, max = 1)  
) %>%
  mutate(title = round(title,3)) %>% 
  mutate(
    direction = case_when(
      title >= 0 ~ "positive",
      TRUE ~ "negative"
    ),
    color = ifelse(title >= 0, "lightblue", "#FF7F7F")
  )

# Plot visNetwork, coloring groups and edges
(example_net <- visNetwork(nodes, edges, height = "1200px", width = "100%") %>% 
    visPhysics(
      solver = "barnesHut",
      maxVelocity = 5,
      minVelocity = 1,
      timestep = 0.5,
      stabilization = list(enabled = TRUE, iterations = 20),
      adaptiveTimestep = TRUE
    ) %>%
    visGroups(groupname = "group1", color = "#5d7174", 
              shadow = list(enabled = TRUE)) %>%
    visGroups(groupname = "group2", color = "#3288BD", 
              shadow = list(enabled = TRUE)) %>%
    visGroups(groupname = "group3", color = "#bc455a", 
              shadow = list(enabled = TRUE)) %>%
    visGroups(groupname = "group4", color = "#FDAE61", 
              shadow = list(enabled = TRUE)) %>%
    visGroups(groupname = "group5", color = "#a9845a", 
              shadow = list(enabled = TRUE)) %>%
    visEdges(arrows = "to",
             color = list(inherit = "to", color = edges$color),
             selectionWidth = 3) %>%
    visOptions(highlightNearest = list(enabled = TRUE,
                                       algorithm = "hierarchical",
                                       degree = list(from = 1, to = 1),
                                       hideColor = "rgba(0,0,0,0.05)",
                                       labelOnly = F, 
                                       hover = T),
               nodesIdSelection = list(enabled = TRUE
               ),
               selectedBy = "group",
               height = "1200px") )

For example, when node "O" is highlighted, edges from "D", "G", "O", and to "B" are affected by the selectionWidth argument and are thickened, but edges from "D" to "B" and from "B" to "G" are still present due to their indirect effects on "O". Is there a way to for these edges to be greyed out like the other edges and nodes in the figure below?

image

Similarly, if we add a label to the edges and select a node, all labels show up. Is there a way to have edge labels only show up when a node is selected, or hide unselected edge labels?

# make new df
edges2 <- edges

# add label column to edges to label coefficients
edges2$label <- as.character(edges$title)

# Plot visNetwork, coloring groups and edges, label edges
(example_net2 <- visNetwork(nodes, edges2, height = "1200px", width = "100%") %>% 
    visPhysics(
      solver = "barnesHut",
      maxVelocity = 5,
      minVelocity = 1,
      timestep = 0.5,
      stabilization = list(enabled = TRUE, iterations = 20),
      adaptiveTimestep = TRUE
    ) %>%
    visGroups(groupname = "group1", color = "#5d7174", 
              shadow = list(enabled = TRUE)) %>%
    visGroups(groupname = "group2", color = "#3288BD", 
              shadow = list(enabled = TRUE)) %>%
    visGroups(groupname = "group3", color = "#bc455a", 
              shadow = list(enabled = TRUE)) %>%
    visGroups(groupname = "group4", color = "#FDAE61", 
              shadow = list(enabled = TRUE)) %>%
    visGroups(groupname = "group5", color = "#a9845a", 
              shadow = list(enabled = TRUE)) %>%
    visEdges(arrows = "to",
             color = list(inherit = "to", color = edges$color),
             selectionWidth = 3) %>%
    visOptions(highlightNearest = list(enabled = TRUE,
                                       algorithm = "hierarchical",
                                       degree = list(from = 1, to = 1),
                                       hideColor = "rgba(0,0,0,0.05)",
                                       labelOnly = F, 
                                       hover = T),
               nodesIdSelection = list(enabled = TRUE
               ),
               selectedBy = "group",
               height = "1200px") )

For example, when we select node "O" again, all the edge labels appear. Is there a way to only show edge labels for edges that appear when a node is selected? In other words, can all the edge labels for the greyed-out edges dissapear? image