Node Types
"""
# Node types in 2 columns
for node_type, color in NODE_TYPE_COLORS.items():
if node_type == 'kegg_Pathway':
continue
if node_type in NODE_LABEL_TRANSLATION:
node_label = NODE_LABEL_TRANSLATION[node_type]
else:
node_label = node_type
legend_html += f"""
"""
# Edge types in 1 column
legend_html += """
Edge Colors
Confirmed Prediction (Found in Ground Truth)
Novel Prediction (Not in Ground Truth)
Existing GO Term Annotation
"""
# Save graph to a protein-specific file in a temporary directory
os.makedirs('temp_viz', exist_ok=True)
suffix = "_with_2nd_degree" if include_second_degree else "_1st_degree"
file_path = os.path.join('temp_viz', f'{protein_id}_graph{suffix}.html')
net.save_graph(file_path)
with open(file_path, 'r', encoding='utf-8') as f:
content = f.read()
# Add the custom popup JavaScript code before the return network statement
custom_popup_code = """
// make a custom popup
var popup = document.createElement("div");
popup.className = 'popup';
popupTimeout = null;
popup.addEventListener('mouseover', function () {
if (popupTimeout !== null) {
clearTimeout(popupTimeout);
popupTimeout = null;
}
});
popup.addEventListener('mouseout', function () {
if (popupTimeout === null) {
hidePopup();
}
});
container.appendChild(popup);
// use the popup event to show
network.on("showPopup", function (params) {
showPopup(params);
});
// use the hide event to hide it
network.on("hidePopup", function (params) {
hidePopup();
});
// hiding the popup through css
function hidePopup() {
popupTimeout = setTimeout(function () { popup.style.display = 'none'; }, 500);
}
// showing the popup
function showPopup(nodeId) {
// get the data from the vis.DataSet
var nodeData = nodes.get(nodeId);
// get the position of the node
var posCanvas = network.getPositions([nodeId])[nodeId];
if (!nodeData) {
var edgeData = edges.get(nodeId);
var poses = network.getPositions([edgeData.from, edgeData.to]);
var middle_x = (poses[edgeData.to].x - poses[edgeData.from].x) * 0.5;
var middle_y = (poses[edgeData.to].y - poses[edgeData.from].y) * 0.5;
posCanvas = poses[edgeData.from];
posCanvas.x = posCanvas.x + middle_x;
posCanvas.y = posCanvas.y + middle_y;
popup.innerHTML = edgeData.title;
} else {
popup.innerHTML = nodeData.title;
// get the bounding box of the node
var boundingBox = network.getBoundingBox(nodeId);
posCanvas.x = posCanvas.x + 0.5 * (boundingBox.right - boundingBox.left);
posCanvas.y = posCanvas.y + 0.5 * (boundingBox.top - boundingBox.bottom);
};
//position tooltip:
// convert coordinates to the DOM space
var posDOM = network.canvasToDOM(posCanvas);
// Give it an offset
posDOM.x += 10;
posDOM.y -= 20;
// show and place the tooltip.
popup.style.display = 'block';
popup.style.top = posDOM.y + 'px';
popup.style.left = posDOM.x + 'px';
}
"""
# Add the custom popup CSS
custom_popup_css = """
/* position absolute is important and the container has to be relative or absolute as well. */
div.popup {
position: absolute;
top: 0px;
left: 0px;
display: none;
background-color: white;
border-radius: 3px;
border: 1px solid #ddd;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
padding: 5px;
z-index: 1000;
}
div.popup a {
color: inherit;
text-decoration: underline;
}
"""
# Insert the custom CSS in the head
content = content.replace('', f'{custom_popup_css}')
# Insert the custom popup code before the "return network;" statement
content = content.replace('return network;', f'{custom_popup_code}\nreturn network;')
# Remove the original tooltip-hiding CSS if it exists
content = content.replace("""
/* hide the original tooltip */
.vis-network-tooltip {
display:none;
}""", "")
# Insert the legend before the closing body tag
content = content.replace('