Saving interaction map / ligand network

[nezix]

Is there a way to render a PNG/JPG image of a LigNetwork ?

Context

• I am running ProLIF in a docker container and I would like to render an interaction map without installing ipython/jupyter or even use xvfb trick (if possible)
• The process will be started from a script so I not use any interactivity with the 2D graph.

Ideas

• Generate .gml, .dot or similar file formats to save and render the interaction map with other tools (Networkx, graph-tools...)
• Maybe use pure python visulization framework like Matplotlib, Plotly ?

[cbouy]

Hi,

There isn't really a nice way that suits your need:

• There's this code snippet here for saving a PNG but that would only work from a notebook
• Alternatively you could save as an HTML file, and then I guess there are libraries to basically screenshot an HTML file and save it as PNG (probably using Selenium). For the first part that would be something like:

from prolif.plotting.network import LigNetwork

ligplot = LigNetwork.from_fingerprint(fp, ...)
ligplot.save(html_path)

Unfortunately the layout for residues is pretty much random so even if you manage to do that it won't be a pretty image :/

[cbouy]

Oops pressed enter too quickly, will update my comment above

[nezix]

Is there a part of the code we can change to enable this in an easier way than hack our way around it ?

[cbouy]

That would be quite the significant change to be able to produce a simple PNG I'm afraid 😅

If you're feeling adventurous you could have a look at this method which generates all the data for the underlying JavaScript library, i.e.

lignetwork = LigNetwork.from_fingerprint(fp, ...)
lignetwork._make_graph_data()

and then just use the lignetwork.nodes and lignetwork.edges attributes and convert them to a networkx graph or whatever you choose. The biggest difficulty would be to provide X and Y coordinates for the residue nodes (tagged with "group": "protein") while keeping the ligand nodes (tagged with "fixed": True) in place, before generating your plot.

In terms of data structure, all nodes have an id attribute, and the ones corresponding to the ligand will have the x and y for coordinates and this "fixed": True. They'll also have a label and either a color or a "font": {"color": ...}.
For edges, all of them have a from and to attribute that relate to a node id, and a group which should be either ligand or interaction.

I'll leave this issue open if you have other related questions