datastorm-open / visNetwork

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

Display information of the nodes when an edge is selected #461

Open ramadatta opened 1 year ago

ramadatta commented 1 year ago

Hi,

Thank you for the wonderful tool.

I am looking for an option where I can select an edge between two nodes (A and B). The edge and two nodes needs to be highlighted and all other nodes and edges are greyed out. Both nodes displays me a textbox with list of ligands (A, B, C, D, E) for node A and ligands (P, Q, R, S, T) for node B.

May i kindly know if there is there an option to do this?

Many thanks in advance!

ramadatta commented 1 year ago

Hi, So far I could make the information available on the edge label. But it would be nice, if when the edge is chosen both the nodes highlight and display the information in two boxes rather than single long box on the edge label.

Kindly let me know if it is possible.

nodes <- data.frame(id = 1:7,label = 1:7)
edges <- data.frame(from = c(1,2,2,2,3,3),
                    to = c(2,3,4,5,6,7))

# Create the data frame
df <- data.frame(
  id = 1:7,
  ligand_name = c("Ligand A", "Ligand B", "Ligand C", "Ligand D", "Ligand E", "Ligand F", "Ligand G"),
  target = c("Target X", "Target Y", "Target Z", "Target X", "Target Y", "Target Z", "Target X")
)

# Print the dataframe
print(df)
# Merge the edges dataframe with the df dataframe
edges <- merge(edges, df, by.x = "from", by.y = "id", all.x = TRUE)
edges <- merge(edges, df, by.x = "to", by.y = "id", all.x = TRUE, suffixes = c("", "_to"))

# Create the detail column with newline characters and formatting
edges$title <- paste("Ligand for", edges$from, ":<br>",
                      edges$ligand_name, "<br><br>",
                      "Target for", edges$from, ":<br>",
                       edges$target, "<br><br>",
                      "Ligand for", edges$to, ":<br>",
                       edges$ligand_name_to, "<br><br>",
                      "Target for", edges$to, ":<br>",
                       edges$target_to)

# Print the updated edges dataframe
print(edges)

# Create the visNetwork
visNetwork(nodes, edges, width = "100%") %>% 
  visEdges(arrows = "to") %>% 
  visIgraphLayout(layout = "layout_in_circle") %>% 
  visNodes(size = 20, color = list(background = "#28A99E", border = "black", highlight = "yellow", hover = "yellow"),
           shapeProperties = list(useImageSize = FALSE, interpolation = FALSE)) %>% 
  visInteraction(tooltipStyle = 'position: fixed;visibility:hidden;padding: 5px;
                font-family: verdana;font-size:14px;font-color:#000000;background-color: #f5f4ed;
                -moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
                 border: 1px solid #808074;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
                 max-width:200px;word-break: break-all')