Skip to content

feature(export-png): Add functionality to export networks as high quality PNGs #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tonywu1999 merged 8 commits into from
Nov 4, 2025
Merged

feature(export-png): Add functionality to export networks as high quality PNGs #62

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
15e7881
increase font size of legend
tonywu1999 Oct 14, 2025
617be56
Only include edges in legend if its in dataset
tonywu1999 Oct 14, 2025
b1adfa2
add option to export network as a high quality PNG
tonywu1999 Oct 21, 2025
98fdc77
shrink node font size to 12
tonywu1999 Oct 22, 2025
a892541
add option to configure node font size
tonywu1999 Oct 22, 2025
3a8809a
coderabbit comment addressed
tonywu1999 Nov 4, 2025
9030e0a
fix bugs
tonywu1999 Nov 4, 2025
ba207a6
remove non-ascii character
tonywu1999 Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 117 additions & 41 deletions R/visualizeNetworksWithHTML.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -398,7 +398,8 @@ generateCytoscapeConfig <- function(nodes, edges,
display_label_type = "id",
container_id = "network-cy",
event_handlers = NULL,
layout_options = NULL) {
layout_options = NULL,
node_font_size = 12) {

# Create elements
node_elements <- createNodeElements(nodes, display_label_type)
Expand Down Expand Up @@ -435,7 +436,7 @@ generateCytoscapeConfig <- function(nodes, edges,
width = "function(ele) { var label = ele.data('label') || ''; var labelLength = label.length; return Math.max(60, Math.min(labelLength * 8 + 20, 150)); }",
height = "function(ele) { var label = ele.data('label') || ''; var labelLength = label.length; return Math.max(40, Math.min(labelLength * 2 + 30, 60)); }",
shape = "round-rectangle",
`font-size` = "11px",
`font-size` = paste0(node_font_size, "px"),
`font-weight` = "bold",
color = "#000",
`text-valign` = "center",
Expand All @@ -462,7 +463,7 @@ generateCytoscapeConfig <- function(nodes, edges,
`edge-text-rotation` = "autorotate",
`text-margin-y` = -12,
`text-halign` = "center",
`font-size` = "12px",
`font-size` = "16px",
`font-weight` = "bold",
color = "data(color)",
`text-background-color` = "#ffffff",
Expand Down Expand Up @@ -703,6 +704,7 @@ exportCytoscapeToHTML <- function(config,
<button id="zoom-in-btn" class="control-btn">Zoom In</button>
<button id="zoom-out-btn" class="control-btn">Zoom Out</button>
<button id="reset-btn" class="control-btn">Reset View</button>
<button id="export-png-btn" class="control-btn export-btn">Export as PNG</button>
</div>'

controls_css <- '
Expand All @@ -720,6 +722,19 @@ exportCytoscapeToHTML <- function(config,
}
.control-btn:active {
background-color: #dee2e6;
}
.export-btn {
background-color: #28a745;
color: white;
border-color: #28a745;
font-weight: bold;
}
.export-btn:hover {
background-color: #218838;
border-color: #1e7e34;
}
.export-btn:active {
background-color: #1e7e34;
}'

controls_js <- '
Expand Down Expand Up @@ -749,6 +764,55 @@ exportCytoscapeToHTML <- function(config,
document.getElementById("reset-btn").addEventListener("click", function() {
cy.reset();
cy.fit();
});

// Export PNG functionality
document.getElementById("export-png-btn").addEventListener("click", function() {
const exportBtn = this;
const originalText = exportBtn.textContent;

// Disable button and show loading state
exportBtn.disabled = true;
exportBtn.textContent = "Exporting...";

try {
// Generate high-resolution PNG (scale factor of 8 for high quality)
const png64 = cy.png({
output: "base64uri",
bg: "white",
full: true, // Export the entire graph
scale: 10, // 10x resolution for publication quality
maxWidth: 10000, // Maximum width in pixels
maxHeight: 10000 // Maximum height in pixels
});

// Create download link
const link = document.createElement("a");
link.href = png64;
link.download = "network_visualization_" + new Date().getTime() + ".png";

// Trigger download
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

// Show success feedback
exportBtn.textContent = "Exported!";
exportBtn.style.backgroundColor = "#28a745";

// Reset button after 2 seconds
setTimeout(function() {
exportBtn.disabled = false;
exportBtn.textContent = originalText;
exportBtn.style.backgroundColor = "";
}, 2000);

} catch (error) {
console.error("Error exporting PNG:", error);
alert("Error exporting PNG: " + error.message);
exportBtn.disabled = false;
exportBtn.textContent = originalText;
}
});'
}

Expand Down Expand Up @@ -808,7 +872,7 @@ exportCytoscapeToHTML <- function(config,
.legend-title {
font-weight: bold;
margin-bottom: 10px;
font-size: 14px;
font-size: 16px;
color: #333;
}

Expand Down Expand Up @@ -841,7 +905,7 @@ exportCytoscapeToHTML <- function(config,
flex-direction: column;
justify-content: space-between;
height: 120px;
font-size: 11px;
font-size: 14px;
}

.edge-legend {
Expand All @@ -852,7 +916,7 @@ exportCytoscapeToHTML <- function(config,
display: flex;
align-items: center;
margin-bottom: 6px;
font-size: 11px;
font-size: 14px;
}

.edge-legend-line {
Expand Down Expand Up @@ -896,6 +960,7 @@ exportCytoscapeToHTML <- function(config,
| <strong>Hover over edges to see PTM site overlap information</strong>
| Click on nodes or edges to select them
', if(include_controls) '| Use the buttons above for common navigation actions' else '', '
', if(include_controls) '| <strong>Export as PNG to save the current view in high resolution</strong>' else '', '
</div>
</div>

Expand Down Expand Up @@ -929,7 +994,7 @@ exportCytoscapeToHTML <- function(config,
<div>Downregulated</div>
</div>
</div>
<div style="margin-top: 10px; font-size: 10px; color: #666;">
<div style="margin-top: 10px; font-size: 14px; color: #666;">
Log Fold Change values
</div>
`;
Expand All @@ -943,40 +1008,49 @@ exportCytoscapeToHTML <- function(config,
`;
}

// Add edge legend
legendHTML += `
<div class="edge-legend">
<div class="legend-title">Edge Types</div>
<div class="edge-legend-item">
<div class="edge-legend-line" style="background-color: #44AA44;"></div>
<span>Activation</span>
</div>
<div class="edge-legend-item">
<div class="edge-legend-line" style="background-color: #FF4444;"></div>
<span>Inhibition</span>
</div>
<div class="edge-legend-item">
<div class="edge-legend-line" style="background-color: #4488FF;"></div>
<span>Increase Amount</span>
</div>
<div class="edge-legend-item">
<div class="edge-legend-line" style="background-color: #FF8844;"></div>
<span>Decrease Amount</span>
</div>
<div class="edge-legend-item">
<div class="edge-legend-line" style="background-color: #9932CC; border-style: dashed; border-width: 1px; height: 0px; border-top-width: 2px;"></div>
<span>Phosphorylation</span>
const edges = cy.edges();

const edgeTypeConfigs = [
{ type: "Activation", color: "#44AA44", label: "Activation", style: "" },
{ type: "Inhibition", color: "#FF4444", label: "Inhibition", style: "" },
{ type: "IncreaseAmount", color: "#4488FF", label: "Increase Amount", style: "" },
{ type: "DecreaseAmount", color: "#FF8844", label: "Decrease Amount", style: "" },
{ type: "Phosphorylation", color: "#9932CC", label: "Phosphorylation", style: "border-style: dashed; border-width: 1px; height: 0px; border-top-width: 2px;" },
{ type: "Complex", color: "#8B4513", label: "Complex", style: "" }
];

const existingEdgeTypes = new Set();
edges.forEach(edge => {
const edgeType = edge.data("interaction");
if (edgeType) {
const normalizedType = edgeType.replace(" (bidirectional)", "");
existingEdgeTypes.add(normalizedType);
}
});

let edgeLegendItems = "";
edgeTypeConfigs.forEach(config => {
if (existingEdgeTypes.has(config.type)) {
const styleAttr = config.style ? `style="background-color: ${config.color}; ${config.style}"` : `style="background-color: ${config.color};"`;
edgeLegendItems += `
<div class="edge-legend-item">
<div class="edge-legend-line" ${styleAttr}></div>
<span>${config.label}</span>
</div>`;
}
});

if (edgeLegendItems) {
legendHTML += `
<div class="edge-legend">
<div class="legend-title">Edge Types</div>${edgeLegendItems}
</div>
<div class="edge-legend-item">
<div class="edge-legend-line" style="background-color: #8B4513;"></div>
<span>Complex</span>
<div style="margin-top: 15px; padding: 8px; background-color: #e3f2fd; border-radius: 4px; font-size: 10px;">
<strong>PTM Site Info:</strong><br>
Hover over edges to see overlapping PTM sites between the edge target and node data
</div>
</div>
<div style="margin-top: 15px; padding: 8px; background-color: #e3f2fd; border-radius: 4px; font-size: 10px;">
<strong>PTM Site Info:</strong><br>
Hover over edges to see overlapping PTM sites between the edge target and node data
</div>
`;
`;
}

legendDiv.innerHTML = legendHTML;
}
Expand Down Expand Up @@ -1043,10 +1117,11 @@ exportCytoscapeToHTML <- function(config,
exportNetworkToHTML <- function(nodes, edges,
filename = "network_visualization.html",
displayLabelType = "id",
nodeFontSize = 12,
...) {

# Generate configuration
config <- generateCytoscapeConfig(nodes, edges, display_label_type = displayLabelType)
config <- generateCytoscapeConfig(nodes, edges, display_label_type = displayLabelType, node_font_size = nodeFontSize)

# Export to HTML
exportCytoscapeToHTML(config, filename, ...)
Expand All @@ -1063,10 +1138,11 @@ exportNetworkToHTML <- function(nodes, edges,
#' @param ... Additional arguments passed to exportCytoscapeToHTML()
previewNetworkInBrowser <- function(nodes, edges,
displayLabelType = "id",
nodeFontSize = 12,
...) {

# Generate configuration
config <- generateCytoscapeConfig(nodes, edges, display_label_type = displayLabelType)
config <- generateCytoscapeConfig(nodes, edges, display_label_type = displayLabelType, node_font_size = nodeFontSize)

# Create temporary filename
temp_file <- tempfile(fileext = ".html")
Expand Down
Loading