From 15e78812632b3501c103d98517b9c1e2cf96855e Mon Sep 17 00:00:00 2001 From: tonywu1999 Date: Tue, 14 Oct 2025 11:22:17 -0400 Subject: [PATCH 1/8] increase font size of legend --- R/visualizeNetworksWithHTML.R | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/R/visualizeNetworksWithHTML.R b/R/visualizeNetworksWithHTML.R index c244d98..eb9998e 100644 --- a/R/visualizeNetworksWithHTML.R +++ b/R/visualizeNetworksWithHTML.R @@ -808,7 +808,7 @@ exportCytoscapeToHTML <- function(config, .legend-title { font-weight: bold; margin-bottom: 10px; - font-size: 14px; + font-size: 16px; color: #333; } @@ -841,7 +841,7 @@ exportCytoscapeToHTML <- function(config, flex-direction: column; justify-content: space-between; height: 120px; - font-size: 11px; + font-size: 14px; } .edge-legend { @@ -852,7 +852,7 @@ exportCytoscapeToHTML <- function(config, display: flex; align-items: center; margin-bottom: 6px; - font-size: 11px; + font-size: 14px; } .edge-legend-line { @@ -929,7 +929,7 @@ exportCytoscapeToHTML <- function(config,
Downregulated
-
+
Log Fold Change values
`; From 617be561761c5d55a02ac7c651167b86c2f4efc2 Mon Sep 17 00:00:00 2001 From: tonywu1999 Date: Tue, 14 Oct 2025 11:40:38 -0400 Subject: [PATCH 2/8] Only include edges in legend if its in dataset --- R/visualizeNetworksWithHTML.R | 72 +++++++++++++++++++---------------- 1 file changed, 40 insertions(+), 32 deletions(-) diff --git a/R/visualizeNetworksWithHTML.R b/R/visualizeNetworksWithHTML.R index eb9998e..c10420b 100644 --- a/R/visualizeNetworksWithHTML.R +++ b/R/visualizeNetworksWithHTML.R @@ -943,40 +943,48 @@ exportCytoscapeToHTML <- function(config, `; } - // Add edge legend - legendHTML += ` -
-
Edge Types
-
-
- Activation -
-
-
- Inhibition -
-
-
- Increase Amount -
-
-
- Decrease Amount -
-
-
- Phosphorylation + 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) { + existingEdgeTypes.add(edgeType); + } + }); + + 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 += ` +
+
+ ${config.label} +
`; + } + }); + + if (edgeLegendItems) { + legendHTML += ` +
+
Edge Types
${edgeLegendItems}
-
-
- Complex +
+ PTM Site Info:
+ Hover over edges to see overlapping PTM sites between the edge target and node data
-
-
- PTM Site Info:
- Hover over edges to see overlapping PTM sites between the edge target and node data -
- `; + `; + } legendDiv.innerHTML = legendHTML; } From b1adfa2c560b455c4e7cb5f48de709d8d1bd9edd Mon Sep 17 00:00:00 2001 From: Tony Wu Date: Tue, 21 Oct 2025 13:09:05 -0400 Subject: [PATCH 3/8] add option to export network as a high quality PNG --- R/visualizeNetworksWithHTML.R | 68 +++++++++++++++++++++++++++++++++-- 1 file changed, 66 insertions(+), 2 deletions(-) diff --git a/R/visualizeNetworksWithHTML.R b/R/visualizeNetworksWithHTML.R index c10420b..badb513 100644 --- a/R/visualizeNetworksWithHTML.R +++ b/R/visualizeNetworksWithHTML.R @@ -435,7 +435,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` = "15px", `font-weight` = "bold", color = "#000", `text-valign` = "center", @@ -462,7 +462,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", @@ -703,6 +703,7 @@ exportCytoscapeToHTML <- function(config, +
' controls_css <- ' @@ -720,6 +721,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 <- ' @@ -749,6 +763,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, // 8x 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; + } });' } @@ -896,6 +959,7 @@ exportCytoscapeToHTML <- function(config, | Hover over edges to see PTM site overlap information | Click on nodes or edges to select them ', if(include_controls) '| Use the buttons above for common navigation actions' else '', ' + ', if(include_controls) '| Export as PNG to save the current view in high resolution' else '', '
From 98fdc775c0a7d4b7d94ab964a8a1eaf7e7aa6ec2 Mon Sep 17 00:00:00 2001 From: tonywu1999 Date: Wed, 22 Oct 2025 13:06:48 -0400 Subject: [PATCH 4/8] shrink node font size to 12 --- R/visualizeNetworksWithHTML.R | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/R/visualizeNetworksWithHTML.R b/R/visualizeNetworksWithHTML.R index badb513..4a20d30 100644 --- a/R/visualizeNetworksWithHTML.R +++ b/R/visualizeNetworksWithHTML.R @@ -435,7 +435,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` = "15px", + `font-size` = "12px", `font-weight` = "bold", color = "#000", `text-valign` = "center", From a8925411685dee103a19326e5b63d2e0fe92f57f Mon Sep 17 00:00:00 2001 From: tonywu1999 Date: Wed, 22 Oct 2025 13:29:16 -0400 Subject: [PATCH 5/8] add option to configure node font size --- R/visualizeNetworksWithHTML.R | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/R/visualizeNetworksWithHTML.R b/R/visualizeNetworksWithHTML.R index 4a20d30..000db56 100644 --- a/R/visualizeNetworksWithHTML.R +++ b/R/visualizeNetworksWithHTML.R @@ -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) @@ -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` = "12px", + `font-size` = paste0(node_font_size, "px"), `font-weight` = "bold", color = "#000", `text-valign` = "center", @@ -1115,10 +1116,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, ...) @@ -1135,10 +1137,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") From 3a8809aefe36368a3e13946d3e0c490137d128bd Mon Sep 17 00:00:00 2001 From: Tony Wu Date: Tue, 4 Nov 2025 18:27:11 -0500 Subject: [PATCH 6/8] coderabbit comment addressed --- R/visualizeNetworksWithHTML.R | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/R/visualizeNetworksWithHTML.R b/R/visualizeNetworksWithHTML.R index 000db56..c2d20a9 100644 --- a/R/visualizeNetworksWithHTML.R +++ b/R/visualizeNetworksWithHTML.R @@ -1023,7 +1023,8 @@ exportCytoscapeToHTML <- function(config, edges.forEach(edge => { const edgeType = edge.data("interaction"); if (edgeType) { - existingEdgeTypes.add(edgeType); + const normalizedType = edgeType.replace(/ \((?:bi)?directional\)$/, ""); + existingEdgeTypes.add(normalizedType); } }); From 9030e0a43ceb8b6c8196f7be5024d71191d31844 Mon Sep 17 00:00:00 2001 From: Tony Wu Date: Tue, 4 Nov 2025 18:36:00 -0500 Subject: [PATCH 7/8] fix bugs --- R/visualizeNetworksWithHTML.R | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/R/visualizeNetworksWithHTML.R b/R/visualizeNetworksWithHTML.R index c2d20a9..32c4ee6 100644 --- a/R/visualizeNetworksWithHTML.R +++ b/R/visualizeNetworksWithHTML.R @@ -781,7 +781,7 @@ exportCytoscapeToHTML <- function(config, output: "base64uri", bg: "white", full: true, // Export the entire graph - scale: 10, // 8x resolution for publication quality + scale: 10, // 10x resolution for publication quality maxWidth: 10000, // Maximum width in pixels maxHeight: 10000 // Maximum height in pixels }); @@ -1023,7 +1023,7 @@ exportCytoscapeToHTML <- function(config, edges.forEach(edge => { const edgeType = edge.data("interaction"); if (edgeType) { - const normalizedType = edgeType.replace(/ \((?:bi)?directional\)$/, ""); + const normalizedType = edgeType.replace(" (bidirectional)", ""); existingEdgeTypes.add(normalizedType); } }); From ba207a68aa1502adb2749263c334b2c22585ea44 Mon Sep 17 00:00:00 2001 From: Tony Wu Date: Tue, 4 Nov 2025 18:40:21 -0500 Subject: [PATCH 8/8] remove non-ascii character --- R/visualizeNetworksWithHTML.R | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/R/visualizeNetworksWithHTML.R b/R/visualizeNetworksWithHTML.R index 32c4ee6..35d8561 100644 --- a/R/visualizeNetworksWithHTML.R +++ b/R/visualizeNetworksWithHTML.R @@ -797,7 +797,7 @@ exportCytoscapeToHTML <- function(config, document.body.removeChild(link); // Show success feedback - exportBtn.textContent = "✓ Exported!"; + exportBtn.textContent = "Exported!"; exportBtn.style.backgroundColor = "#28a745"; // Reset button after 2 seconds