diff --git a/cortex/tests/test_webgl_headless.py b/cortex/tests/test_webgl_headless.py
index f998ba73c..b4c357c6b 100644
--- a/cortex/tests/test_webgl_headless.py
+++ b/cortex/tests/test_webgl_headless.py
@@ -285,3 +285,136 @@ def test_addData_no_crash():
time.sleep(2)
pageerrors = [e for e in handle._pw_thread.browser_errors if "[pageerror]" in e]
assert len(pageerrors) == 0, f"JS errors after addData: {pageerrors}"
+
+
+# ---------------------------------------------------------------------------
+# Group 8: show_multi (multi-viewer page)
+# ---------------------------------------------------------------------------
+
+
+def _free_port():
+ import socket
+
+ s = socket.socket()
+ s.bind(("127.0.0.1", 0))
+ port = s.getsockname()[1]
+ s.close()
+ return port
+
+
+class _MultiViewerHandle:
+ """Spin up a show_multi server + Playwright page; clean up on exit."""
+
+ def __init__(self, views, layout, yoke):
+ self.views = views
+ self.layout = layout
+ self.yoke = yoke
+ self.errors = []
+
+ def __enter__(self):
+ from playwright.sync_api import sync_playwright
+
+ port = _free_port()
+ # autoclose=False so the server outlives the client disconnect when
+ # Playwright reloads or navigates away during the test.
+ self.server = cortex.webgl.show_multi(
+ self.views,
+ layout=self.layout,
+ yoke=self.yoke,
+ port=port,
+ open_browser=False,
+ autoclose=False,
+ display_url=False,
+ title="pytest multi viewer",
+ )
+ # Give the surface CTM endpoints a moment to come up.
+ time.sleep(2)
+ self._pw = sync_playwright().start()
+ # swiftshader gives us a software WebGL context that survives multiple
+ # contexts on a single headless process.
+ self._browser = self._pw.chromium.launch(
+ headless=True, args=["--no-sandbox", "--use-gl=swiftshader"]
+ )
+ self.page = self._browser.new_page(viewport={"width": 1200, "height": 700})
+ self.page.on("pageerror", lambda e: self.errors.append(str(e)))
+ self.page.goto(
+ "http://localhost:%d/" % port,
+ wait_until="networkidle",
+ timeout=45000,
+ )
+ # Wait for the JS-side viewers array to populate and CTMs to load.
+ self.page.wait_for_function(
+ "() => window.viewers && window.viewers.length === %d" % len(self.views),
+ timeout=30000,
+ )
+ time.sleep(4)
+ return self
+
+ def __exit__(self, *exc):
+ try:
+ self._browser.close()
+ finally:
+ self._pw.stop()
+ self.server.stop()
+
+
+def test_show_multi_smoke():
+ """show_multi(2 vols) renders two viewers, two canvases, no JS errors."""
+ np.random.seed(0)
+ v1 = cortex.Volume(np.random.randn(*volshape), subj, xfmname)
+ v2 = cortex.Volume(np.random.randn(*volshape), subj, xfmname)
+ with _MultiViewerHandle([v1, v2], layout=(1, 2), yoke=False) as h:
+ canvases = h.page.evaluate("document.querySelectorAll('canvas').length")
+ n_viewers = h.page.evaluate("window.viewers.length")
+ assert n_viewers == 2
+ assert canvases >= 2 # at least one per viewer
+ # No uncaught JS errors during construction.
+ assert h.errors == [], f"JS pageerrors: {h.errors}"
+
+
+def test_show_multi_yoke_lockstep():
+ """With yoke ON, dispatching change on viewer 0 syncs viewer 1 azimuth + mix."""
+ np.random.seed(0)
+ v1 = cortex.Volume(np.random.randn(*volshape), subj, xfmname)
+ v2 = cortex.Volume(np.random.randn(*volshape), subj, xfmname)
+ with _MultiViewerHandle([v1, v2], layout=(1, 2), yoke=True) as h:
+ result = h.page.evaluate(
+ """() => {
+ window.viewers[1].controls.setAzimuth(45);
+ window.viewers[0].controls.setAzimuth(200);
+ window.viewers[0].controls.dispatchEvent({type:'change'});
+ window.viewers[0].controls.setMix(0.5);
+ window.viewers[0].controls.dispatchEvent({type:'change'});
+ return {
+ az0: window.viewers[0].controls.azimuth,
+ az1: window.viewers[1].controls.azimuth,
+ mix0: window.viewers[0].controls.mix,
+ mix1: window.viewers[1].controls.mix,
+ };
+ }"""
+ )
+ assert result["az0"] == result["az1"]
+ assert result["mix0"] == result["mix1"]
+ assert h.errors == [], f"JS pageerrors: {h.errors}"
+
+
+def test_show_multi_unyoked_independent():
+ """With yoke OFF, change on viewer 0 does not affect viewer 1."""
+ np.random.seed(0)
+ v1 = cortex.Volume(np.random.randn(*volshape), subj, xfmname)
+ v2 = cortex.Volume(np.random.randn(*volshape), subj, xfmname)
+ with _MultiViewerHandle([v1, v2], layout=(1, 2), yoke=False) as h:
+ result = h.page.evaluate(
+ """() => {
+ window.viewers[1].controls.setAzimuth(45);
+ window.viewers[0].controls.setAzimuth(200);
+ window.viewers[0].controls.dispatchEvent({type:'change'});
+ return {
+ az0: window.viewers[0].controls.azimuth,
+ az1: window.viewers[1].controls.azimuth,
+ };
+ }"""
+ )
+ assert result["az0"] == 200
+ assert result["az1"] == 45
+ assert h.errors == [], f"JS pageerrors: {h.errors}"
diff --git a/cortex/webgl/__init__.py b/cortex/webgl/__init__.py
index b31971b5e..b1e9b9f0f 100644
--- a/cortex/webgl/__init__.py
+++ b/cortex/webgl/__init__.py
@@ -1,15 +1,18 @@
-"""Makes an interactive viewer for viewing data in a browser
-"""
+"""Makes an interactive viewer for viewing data in a browser"""
+
from typing import TYPE_CHECKING
from ..utils import DocLoader
if TYPE_CHECKING:
from cortex.webgl.view import show as _show
+ from cortex.webgl.view import show_multi as _show_multi
from cortex.webgl.view import make_static as _static
else:
_show = None
+ _show_multi = None
_static = None
show = DocLoader("show", ".view", "cortex.webgl", actual_func=_show)
+show_multi = DocLoader("show_multi", ".view", "cortex.webgl", actual_func=_show_multi)
make_static = DocLoader("make_static", ".view", "cortex.webgl", actual_func=_static)
diff --git a/cortex/webgl/multi.html b/cortex/webgl/multi.html
new file mode 100644
index 000000000..e97387e73
--- /dev/null
+++ b/cortex/webgl/multi.html
@@ -0,0 +1,62 @@
+{% autoescape None %}
+{% extends template.html %}
+{% block jsinit %}
+ var viewers = [], figure, subjects, sock, viewopts, yokeController;
+{% end %}
+{% block onload %}
+ viewopts = {{viewopts}};
+ // Raw per-subject CTM info keyed by subject name. Keep the unwrapped
+ // info around so each viewer can build its own Surface (Three.js
+ // objects can have only one parent — a shared Surface would get
+ // reparented out of the first viewer's scene when added to the second).
+ var subjectInfo = {{subjects}};
+ subjects = {};
+
+ var panels = {{panels_json}};
+ var nrows = {{nrows}};
+ var ncols = {{ncols}};
+
+ figure = new jsplot.GridFigure(undefined, nrows, ncols);
+
+ for (var i = 0; i < panels.length; i++) {
+ try {
+ console.log("[multi] constructing viewer", i);
+ var v = figure.add(mriview.Viewer, i, {idPrefix: 'p' + i + '_'});
+ // Per-viewer Surface registry; one Surface instance per subject
+ // *for this viewer*. SurfDelegate.update prefers viewer.subjects
+ // over the global `subjects` dict.
+ v.subjects = {};
+ for (var sname in subjectInfo) {
+ var sur = new mriview.Surface(subjectInfo[sname]);
+ // Disable per-Surface picking in multi-viewer mode. The
+ // picker shares the viewer's WebGLRenderer to draw vertex
+ // IDs into offscreen render targets, but in multi-viewer
+ // the renderer's cached render-target/texture-unit state
+ // gets corrupted on the way back, so the next regular
+ // render samples from the picker's encoding targets and
+ // shows a high-frequency speckled brain. Out of scope for
+ // MVP (see plan).
+ sur.pick = function () { return null; };
+ v.subjects[sname] = sur;
+ }
+ console.log("[multi] viewer constructed, calling addData", i);
+ v.addData(dataset.fromJSON(panels[i].data));
+ console.log("[multi] addData done", i);
+ viewers.push(v);
+ } catch (e) {
+ console.error("[multi] viewer", i, "failed:", e.message, e.stack);
+ throw e;
+ }
+ }
+ // Expose for tests/debug.
+ window.viewers = viewers;
+ window.figure = figure;
+
+ // Yoke controller + toggle button. The Python side passes the initial
+ // ON/OFF state via the `yoke` template var.
+ yokeController = new multiview.YokeController(viewers);
+ multiview.attachYokeToggle(figure.object, yokeController, {{yoke}});
+ window.yokeController = yokeController;
+
+ sock = new Websock();
+{% end %}
diff --git a/cortex/webgl/resources/css/mriview.css b/cortex/webgl/resources/css/mriview.css
index f365dc8bd..2433fdb77 100644
--- a/cortex/webgl/resources/css/mriview.css
+++ b/cortex/webgl/resources/css/mriview.css
@@ -46,7 +46,7 @@ table {
-webkit-transition-delay:.1s;
}
-#main {
+#main, [id$='_main'] {
margin:0px;
min-height:100%;
height: auto !important;
@@ -76,7 +76,10 @@ a:visited { color:white; }
/*************************************************
* WebGL Canvas
*************************************************/
-#brain {
+#brain, /*************************************************
+ * WebGL Canvas
+ *************************************************/
+[id$='_brain'] {
transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-webkit-transition:opacity .5s ease;
@@ -89,13 +92,16 @@ a:visited { color:white; }
/*************************************************
* Loading messages
*************************************************/
-#dataload {
+#dataload, /*************************************************
+ * Loading messages
+ *************************************************/
+[id$='_dataload'] {
font-size:150%;
}
-#dataload img {
+#dataload img, [id$='_dataload'] img {
height:32px;
}
-#ctmload {
+#ctmload, [id$='_ctmload'] {
background:none;
color:#AAA;
width:400px;
@@ -108,7 +114,7 @@ a:visited { color:white; }
z-index:2;
}
-#dataopts {
+#dataopts, [id$='_dataopts'] {
position:absolute;
z-index:8;
float:left;
@@ -131,18 +137,19 @@ a:visited { color:white; }
-webkit-transition-timing-function: ease;
-webkit-transition-delay:1s;
}
-#dataopts:hover, #dataopts:active {
+#dataopts:hover, [id$='_dataopts']:hover,
+#dataopts:active, [id$='_dataopts']:active {
transition-delay:.1s;
-moz-transition-delay:.1s;
-webkit-transition-delay:.1s;
}
-#dataname {
+#dataname, [id$='_dataname'] {
color:white;
text-shadow:0px 2px 8px black, 0px 1px 8px black;
font-size:24pt;
font-weight:bold;
}
-#helpmenu {
+#helpmenu, [id$='_helpmenu'] {
position:absolute;
z-index:8;
top: 50%;
@@ -169,7 +176,9 @@ a:visited { color:white; }
/* mouseover data styles */
-#picked_value {
+#picked_value, /* mouseover data styles */
+
+[id$='_picked_value'] {
position: absolute;
bottom: 5vmin;
left:10px;
@@ -180,7 +189,7 @@ a:visited { color:white; }
vertical-align:bottom;
}
-#mouseover_value {
+#mouseover_value, [id$='_mouseover_value'] {
position: absolute;
bottom: 1.5vmin;
left:10px;
@@ -194,7 +203,10 @@ a:visited { color:white; }
/*************************************************
* Colorlegend styles
*************************************************/
-#colorlegend {
+#colorlegend, /*************************************************
+ * Colorlegend styles
+ *************************************************/
+[id$='_colorlegend'] {
width:30vw;
position:absolute;
bottom:30px;
@@ -206,83 +218,93 @@ a:visited { color:white; }
.select2-dropdown {
width: 30vw!important;
}
-#colorlegend-colors {
+#colorlegend-colors, [id$='_colorlegend-colors'] {
height:100%;
overflow:hidden;
}
-#colorlegend-colorbar {
+#colorlegend-colorbar, [id$='_colorlegend-colorbar'] {
height: 4vh;
width:100%;
display:block;
text-align:right;
}
-#vlims-2d {
+#vlims-2d, [id$='_vlims-2d'] {
display: none;
}
/* 3D version */
-#colorlegend.colorlegend-3d #vlims-1d {
+#colorlegend.colorlegend-3d #vlims-1d, /* 3D version */
+[id$='_colorlegend'].colorlegend-3d [id$='_vlims-1d'] {
display: none;
}
-#colorlegend.colorlegend-3d #vlims-2d {
+#colorlegend.colorlegend-3d #vlims-2d, [id$='_colorlegend'].colorlegend-3d [id$='_vlims-2d'] {
display: none;
}
-#colorlegend.colorlegend-3d #colorlegend-colors {
+#colorlegend.colorlegend-3d #colorlegend-colors, [id$='_colorlegend'].colorlegend-3d [id$='_colorlegend-colors'] {
display: none;
}
/* 2D version */
-#colorlegend.colorlegend-2d {
+#colorlegend.colorlegend-2d, /* 2D version */
+[id$='_colorlegend'].colorlegend-2d {
height:20vmin;
width:20vmin;
margin-left: auto;
margin-right: 2vmin;
bottom: 5vmin;
}
-.colorlegend-2d #vlims-2d {
+.colorlegend-2d #vlims-2d, .colorlegend-2d [id$='_vlims-2d'] {
display: block;
}
-.colorlegend-2d #vlims-1d {
+.colorlegend-2d #vlims-1d, .colorlegend-2d [id$='_vlims-1d'] {
display: none;
}
-.colorlegend-2d #colorlegend-colorbar {
+.colorlegend-2d #colorlegend-colorbar, .colorlegend-2d [id$='_colorlegend-colorbar'] {
height: 20vmin;
}
-#xd-vmin-container, #xd-vmax-container, #yd-vmin-container, #yd-vmax-container {
+#xd-vmin-container, [id$='_xd-vmin-container'],
+#xd-vmax-container, [id$='_xd-vmax-container'],
+#yd-vmin-container, [id$='_yd-vmin-container'],
+#yd-vmax-container, [id$='_yd-vmax-container'] {
font-size:2.5vmin;
color: white;
}
-#xd-vmin-container, #xd-vmax-container {
+#xd-vmin-container, [id$='_xd-vmin-container'],
+#xd-vmax-container, [id$='_xd-vmax-container'] {
position: absolute;
top: 21.5vmin;
}
-#xd-vmin-container {
+#xd-vmin-container, [id$='_xd-vmin-container'] {
left: 0;
text-align: left;
display: block;
}
-#xd-vmax-container {
+#xd-vmax-container, [id$='_xd-vmax-container'] {
width: 14vmin;
display: block;
right: 0;
text-align: right;
}
-#yd-vmin-container, #yd-vmax-container {
+#yd-vmin-container, [id$='_yd-vmin-container'],
+#yd-vmax-container, [id$='_yd-vmax-container'] {
position: absolute;
right: -12vmin;
width: 10vmin;
}
-#yd-vmin-container {
+#yd-vmin-container, [id$='_yd-vmin-container'] {
text-align: right;
left: -12vmin;
bottom: 0;
}
-#yd-vmax-container {
+#yd-vmax-container, [id$='_yd-vmax-container'] {
text-align: right;
top: 0vmin;
left: -12vmin;
}
-#xd-vmin-input, #xd-vmax-input, #yd-vmin-input, #yd-vmax-input {
+#xd-vmin-input, [id$='_xd-vmin-input'],
+#xd-vmax-input, [id$='_xd-vmax-input'],
+#yd-vmin-input, [id$='_yd-vmin-input'],
+#yd-vmax-input, [id$='_yd-vmax-input'] {
position: absolute;
display: none;
font-size:2.5vmin;
@@ -295,21 +317,21 @@ a:visited { color:white; }
padding:0.5vmin;
}
-#yd-vmax-input {
+#yd-vmax-input, [id$='_yd-vmax-input'] {
text-align: right;
top: calc(-1px - 0.5vmin);
left: calc(2px - 0.5vmin);
}
-#yd-vmin-input {
+#yd-vmin-input, [id$='_yd-vmin-input'] {
text-align: right;
bottom:calc(-1px - 0.5vmin);
left:calc(2px - 0.5vmin);
}
-#xd-vmin-input {
+#xd-vmin-input, [id$='_xd-vmin-input'] {
top: calc(-1px - 0.5vmin);
left:calc(-1px - 0.5vmin);
}
-#xd-vmax-input {
+#xd-vmax-input, [id$='_xd-vmax-input'] {
text-align: right;
top: calc(-1px - 0.5vmin);
right: calc(-2px - 0.5vmin);
@@ -317,7 +339,9 @@ a:visited { color:white; }
/* 1D version*/
-#vmin-container, #vmax-container {
+#vmin-container, /* 1D version*/
+[id$='_vmin-container'],
+#vmax-container, [id$='_vmax-container'] {
font-size:4vmin;
color:white;
z-index:110;
@@ -327,13 +351,14 @@ a:visited { color:white; }
line-height:0vmin;
top:50%;
}
-#vmin-container {
+#vmin-container, [id$='_vmin-container'] {
left:-42vw;
}
-#vmax-container {
+#vmax-container, [id$='_vmax-container'] {
right:-42vw;
}
-#vmin-input, #vmax-input {
+#vmin-input, [id$='_vmin-input'],
+#vmax-input, [id$='_vmax-input'] {
color:white;
background-color:black;
font-size:4vmin;
@@ -350,19 +375,20 @@ a:visited { color:white; }
top:calc(-1px - 3vh);
}
-#vmin-input {
+#vmin-input, [id$='_vmin-input'] {
right:calc(-1px - 1vw);
text-align:right;
}
-#vmax-input {
+#vmax-input, [id$='_vmax-input'] {
left:calc(-1px - 1vw);
}
-#vmin, #vmax {
+#vmin, [id$='_vmin'],
+#vmax, [id$='_vmax'] {
}
-#vmin {
+#vmin, [id$='_vmin'] {
text-align:right;
}
-#vmax {
+#vmax, [id$='_vmax'] {
}
/* selection styles*/
@@ -395,7 +421,7 @@ a:visited { color:white; }
color:#CCC;
}
-#figure_ui {
+#figure_ui, [id$='_figure_ui'] {
position:absolute;
right:0;
width:265px !important;
@@ -448,11 +474,11 @@ div.opt_category p.opt_label {
max-width:220px;
max-height:220px;
}
-#cmapsearchbox {
+#cmapsearchbox, [id$='_cmapsearchbox'] {
position:absolute;
z-index:6;
}
-#cmapsearchresults {
+#cmapsearchresults, [id$='_cmapsearchresults'] {
z-index:5;
margin-top:30px;
position:absolute;
@@ -474,18 +500,19 @@ input.vlim {
float:left;
padding:5px 10px;
}
-#vrange {
+#vrange, [id$='_vrange'] {
width:200px;
}
-#vrange2 {
+#vrange2, [id$='_vrange2'] {
height:200px;
}
-#topbar fieldset {
+#topbar fieldset, [id$='_topbar'] fieldset {
min-width:200px;
}
/* datasets */
-ul#datasets {
+ul#datasets, /* datasets */
+ul[id$='_datasets'] {
max-width: 400px;
list-style: none;
margin: 0;
@@ -493,7 +520,7 @@ ul#datasets {
overflow:auto;
max-height:70vh;
}
-ul#datasets li {
+ul#datasets li, ul[id$='_datasets'] li {
background: white;
position:relative;
margin: 5px;
@@ -502,7 +529,7 @@ ul#datasets li {
list-style: none;
padding-left: 42px;
}
-ul#datasets li .handle {
+ul#datasets li .handle, ul[id$='_datasets'] li .handle {
background: #CCC;
position: absolute;
left: 0;
@@ -527,57 +554,58 @@ ul#datasets li .handle {
margin-top:-135px !important;
}
-#bottombar {
+#bottombar, [id$='_bottombar'] {
height:135px;
margin-top:-10px;
border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
clear:both;
text-align:left;
}
-#bottombar table {
+#bottombar table, [id$='_bottombar'] table {
padding:4px;
width:100%;
}
-#bottombar table td:first-child {
+#bottombar table td:first-child, [id$='_bottombar'] table td:first-child {
width:60px;
}
-#bottombar:hover, #bottombar:active {
+#bottombar:hover, [id$='_bottombar']:hover,
+#bottombar:active, [id$='_bottombar']:active {
margin-top:-115px;
}
-#moviecontrols {
+#moviecontrols, [id$='_moviecontrols'] {
width:100%;
text-align:center;
display:none;
}
-table#movieui {
+table#movieui, table[id$='_movieui'] {
width:80%;
margin:auto;
margin-top:-5px;
text-align:left;
vertical-align:middle;
}
-#moviecontrol {
+#moviecontrol, [id$='_moviecontrol'] {
padding:2px;
}
-#moviecontrol img {
+#moviecontrol img, [id$='_moviecontrol'] img {
padding:4px;
margin:4px;
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
}
-#movieframe {
+#movieframe, [id$='_movieframe'] {
width:60px;
}
-#movieprogress {
+#movieprogress, [id$='_movieprogress'] {
width:100%;
}
-#mixbtns td {
+#mixbtns td, [id$='_mixbtns'] td {
text-align:center;
}
-button#twodbutton {
+button#twodbutton, button[id$='_twodbutton'] {
/*visibility: hidden;*/
display: none;
position: absolute;
@@ -593,7 +621,8 @@ button#twodbutton {
color: white;
}
-button#twodbutton:disabled, button#twodbutton[disabled] {
+button#twodbutton:disabled, button[id$='_twodbutton']:disabled,
+button#twodbutton[disabled], button[id$='_twodbutton'][disabled] {
color: #888;
opacity: 0.5;
}
\ No newline at end of file
diff --git a/cortex/webgl/resources/js/figure.js b/cortex/webgl/resources/js/figure.js
index a2e05b226..9265839e5 100644
--- a/cortex/webgl/resources/js/figure.js
+++ b/cortex/webgl/resources/js/figure.js
@@ -226,21 +226,25 @@ var jsplot = (function (module) {
this.figure.addEventListener("resize", this.resize.bind(this));
}
- // color legend
+ // color legend (scoped to this Axes' container so multiple viewers
+ // on one page don't bind to each other's elements)
function formatState (state) {
if (!state.id) { return state.text; }
var $state = $('
' + state.text + '');
return $state;
};
+ var self = this;
$(document).ready(function() {
- var selector = $(".colorlegend-select").select2({
+ var $root = $(self.object);
+ var selector = $root.find(".colorlegend-select").select2({
templateResult: formatState
});
- $("#colorlegend-colorbar").on('click', function() {
+ $root.find("[id$='colorlegend-colorbar']").on('click', function() {
selector.show();
selector.select2('open');
});
- $('#brain').on('click', function () { selector.select2("close"); })
+ // The brain canvas is the only