From 25d67ff9819c592b3bd1551465c59beb6a0c481a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20H=C3=A9risson?= Date: Fri, 12 Dec 2025 16:08:56 +0100 Subject: [PATCH 1/2] feat(rpviz): Toggle panels --- rptools/rpviz/templates/css/viewer.css | 20 ++++++++++++++++++++ rptools/rpviz/templates/index.html | 23 +++++++++++++++++++++++ 2 files changed, 43 insertions(+) diff --git a/rptools/rpviz/templates/css/viewer.css b/rptools/rpviz/templates/css/viewer.css index 6d570a9..b674c3a 100644 --- a/rptools/rpviz/templates/css/viewer.css +++ b/rptools/rpviz/templates/css/viewer.css @@ -20,6 +20,26 @@ body { box-shadow: 0 0 5px 0px black; } +/* Hide panels **************************************/ +#toggle-panels-container { + position: fixed; + top: 10px; + left: 50%; + transform: translateX(-50%); + z-index: 9999; +} + +#toggle-panels { + padding: 6px 12px; + font-size: 13px; + cursor: pointer; +} + +/* Hide panels */ +.panel-hidden { + display: none !important; +} + /* Left panel: pathway level interaction **************************************/ #interaction { position: absolute; diff --git a/rptools/rpviz/templates/index.html b/rptools/rpviz/templates/index.html index f3642d5..73f11d5 100644 --- a/rptools/rpviz/templates/index.html +++ b/rptools/rpviz/templates/index.html @@ -56,7 +56,30 @@ + + + + +
+ +
From 4b14985c729f55910ffa4f3bb4d39e22fb5c0fe3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20H=C3=A9risson?= Date: Mon, 15 Dec 2025 18:28:52 +0100 Subject: [PATCH 2/2] fix(rpviz): hidding panels expands viewable area --- rptools/rpviz/templates/css/viewer.css | 11 ++++++++ rptools/rpviz/templates/index.html | 37 +++++++++++++++++++++----- 2 files changed, 42 insertions(+), 6 deletions(-) diff --git a/rptools/rpviz/templates/css/viewer.css b/rptools/rpviz/templates/css/viewer.css index b674c3a..9523254 100644 --- a/rptools/rpviz/templates/css/viewer.css +++ b/rptools/rpviz/templates/css/viewer.css @@ -40,6 +40,17 @@ body { display: none !important; } +/* Expanded view when panels are hidden */ +#viewer.panels-hidden #cy { + width: 100%; + margin-left: 0; +} + +#viewer.panels-hidden #interaction, +#viewer.panels-hidden #info { + display: none !important; +} + /* Left panel: pathway level interaction **************************************/ #interaction { position: absolute; diff --git a/rptools/rpviz/templates/index.html b/rptools/rpviz/templates/index.html index 73f11d5..c8a8464 100644 --- a/rptools/rpviz/templates/index.html +++ b/rptools/rpviz/templates/index.html @@ -62,15 +62,40 @@ $(function () { $('#toggle-panels').on('click', function () { - $('#interaction, #info').toggleClass('panel-hidden'); - resizeCy(); + if (!window.cy) return; + + const cyEl = document.getElementById('cy'); + + const oldPan = cy.pan(); + const oldZoom = cy.zoom(); + const oldLeft = cyEl.getBoundingClientRect().left; + + $('#interaction, #info').toggleClass('panel-hidden'); + $('#viewer').toggleClass('panels-hidden'); + + requestAnimationFrame(() => { + const newLeft = cyEl.getBoundingClientRect().left; + + // Correct sign: compensate by how much the container shifted + const shift = oldLeft - newLeft; + + cy.resize(); + cy.zoom(oldZoom); + cy.pan({ x: oldPan.x + shift, y: oldPan.y }); + }); }); function resizeCy() { - if (window.cy) { - cy.resize(); - cy.fit(); - } + if (!window.cy) return; + + // save current viewport + const z = cy.zoom(); + const p = cy.pan(); + + cy.resize(); // let Cytoscape recompute its canvas size + cy.zoom(z); // restore zoom + cy.pan(p); // restore pan + // (no cy.fit()) } });