Developer Setup Playground
The viewer ships a developer setup page where you can author a session
configuration interactively — edit the JSON, pick slides, and launch the viewer
with it. It is the same form the colab notebooks build on top of. The page below
is the live /dev_setup endpoint of the demo deployment.
The /dev_setup editor opens on a bare template with placeholder data
("data-to-fetch-1") — that will not load anything on its own. Pick one of
the ready-made sessions below instead: hit Open the demo in a new tab to
launch it, or expand View session configuration and paste the JSON into the
editor above, then press Ready!.
Data available on this demo
A session only loads if its data entries exist on the server it points at.
The public demo deployment serves just the summer-school sample set below — the
examples on this page reference only these. Point a session at anything else and
it will 404 here (a real deployment exposes its own slide catalogue).
dataID | What it is |
|---|---|
Projects/demo/summer-school-coolab/slide.tiff | H&E whole-slide image (use as background) |
Projects/demo/summer-school-coolab/heatmap_mask_precomputed.tiff | Single-channel model-prediction heatmap |
Projects/demo/summer-school-coolab/heatmap_mask_unfinished.tiff | Work-in-progress prediction heatmap |
Projects/demo/summer-school-coolab/occlusion_mask_precomputed.tiff | Signed occlusion-importance map (bipolar) |
Projects/demo/summer-school-coolab/occlusion_mask_unfinished.tiff | Work-in-progress occlusion map (bipolar) |
Projects/demo/summer-school-coolab/gradcam_mask.tiff | GradCam intensity map (drive through a colormap) |
Projects/demo/summer-school-coolab/ac.tiff | Multi-channel activation clusters (6 classes, one per channel) |
Ready-made example sessions
Each card launches a real viewer with the JSON shown beneath it. They start minimal and add one concept at a time — background only, a single overlay, a signed (bipolar) map, a colormap, stacked layers, a multi-channel TIFF, and switchable visualizations. Copy any of them into the editor above as a starting point.
The examples keep the full viewer UI so you can explore the Layers panel,
navigator, and toolbar. In your own sessions, trim the chrome via
params.ui — see the Core params
Configuration table rendered inside the /dev_setup page
above.
Minimal — just the slide
The smallest valid session: one data entry used as the background. No visualizations, no overlays.
View session configuration
{
"data": [
"Projects/demo/summer-school-coolab/slide.tiff"
],
"background": [
{
"dataReference": 0
}
]
}
Single heatmap overlay
An H&E background with one heatmap layer on top. dataReferences: [1] points the layer at the second data entry.
View session configuration
{
"params": {
"customBlending": true
},
"data": [
"Projects/demo/summer-school-coolab/slide.tiff",
"Projects/demo/summer-school-coolab/heatmap_mask_precomputed.tiff"
],
"background": [
{
"dataReference": 0
}
],
"visualizations": [
{
"name": "Prediction heatmap",
"shaders": {
"prediction": {
"name": "Model prediction",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.6
}
}
}
}
]
}
Bipolar importance map
A signed map rendered with bipolar-heatmap — positive values in green, negative in red, transparent around zero.
View session configuration
{
"params": {
"customBlending": true
},
"data": [
"Projects/demo/summer-school-coolab/slide.tiff",
"Projects/demo/summer-school-coolab/occlusion_mask_precomputed.tiff"
],
"background": [
{
"dataReference": 0
}
],
"visualizations": [
{
"name": "Occlusion importance",
"shaders": {
"importance": {
"name": "Occlusion importance",
"type": "bipolar-heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.7,
"colorHigh": {
"default": "#00ff00"
},
"colorLow": {
"default": "#ff0000"
}
}
}
}
}
]
}
Colormap with a threshold selector
GradCam intensities mapped through the Turbo colour ramp. threshold.breaks are the band edges and mask switches each band on/off.
View session configuration
{
"params": {
"customBlending": true
},
"data": [
"Projects/demo/summer-school-coolab/slide.tiff",
"Projects/demo/summer-school-coolab/gradcam_mask.tiff"
],
"background": [
{
"dataReference": 0
}
],
"visualizations": [
{
"name": "GradCam",
"shaders": {
"gradcam": {
"name": "GradCam",
"type": "colormap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"use_gamma": 1,
"opacity": 0.8,
"color": {
"type": "colormap",
"default": "Turbo",
"steps": 5,
"mode": "sequential",
"continuous": true
},
"threshold": {
"breaks": [
0.2,
0.4,
0.8,
0.9
],
"mask": [
0,
1,
1,
1,
1
]
}
}
}
}
}
]
}
Several layers at once
A shaders map with two layers — a heatmap plus a helper grid. Each layer becomes its own reorderable row in the Layers panel.
View session configuration
{
"params": {
"customBlending": true
},
"data": [
"Projects/demo/summer-school-coolab/slide.tiff",
"Projects/demo/summer-school-coolab/heatmap_mask_precomputed.tiff"
],
"background": [
{
"dataReference": 0
}
],
"visualizations": [
{
"name": "Heatmap + grid",
"shaders": {
"prediction": {
"name": "Model prediction",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.55
}
},
"grid": {
"name": "Helper grid",
"type": "grid",
"fixed": false,
"dataReferences": [
0
],
"params": {
"color": {
"default": "#000000"
},
"cell_x": {
"default": 256
},
"cell_y": {
"default": 256
}
}
}
}
}
]
}
Multi-channel TIFF (one class per channel)
A single multi-channel ac.tiff exposed via the server options block; each layer selects its channel with use_channel_base0.
View session configuration
{
"params": {
"customBlending": true
},
"data": [
"Projects/demo/summer-school-coolab/slide.tiff",
{
"dataID": "Projects/demo/summer-school-coolab/ac.tiff",
"options": {
"format": "tiff",
"channels": "all",
"plugin": "tifffile"
}
}
],
"background": [
{
"dataReference": 0
}
],
"visualizations": [
{
"name": "Activation clusters",
"shaders": {
"class_1": {
"name": "Class 1",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 0,
"threshold": 0,
"color": {
"default": "#1F77B4"
}
}
},
"class_2": {
"name": "Class 2",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 1,
"threshold": 0,
"color": {
"default": "#2CA02C"
}
}
},
"class_3": {
"name": "Class 3",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 2,
"threshold": 0,
"color": {
"default": "#FF7F0E"
}
}
},
"class_4": {
"name": "Class 4",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 3,
"threshold": 0,
"color": {
"default": "#D62728"
}
}
},
"class_5": {
"name": "Class 5",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 4,
"threshold": 0,
"color": {
"default": "#8C564B"
}
}
},
"class_6": {
"name": "Class 6",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 5,
"threshold": 0,
"color": {
"default": "#17BECF"
}
}
}
}
}
]
}
Two visualizations, switchable
Two visualization goals over the same background. The Layers panel shows a dropdown to flip between them — great for reference-vs-candidate comparisons.
View session configuration
{
"params": {
"customBlending": true,
"activeVisualizationIndex": 0
},
"data": [
"Projects/demo/summer-school-coolab/slide.tiff",
"Projects/demo/summer-school-coolab/heatmap_mask_precomputed.tiff",
"Projects/demo/summer-school-coolab/heatmap_mask_unfinished.tiff"
],
"background": [
{
"dataReference": 0
}
],
"visualizations": [
{
"name": "Prediction — precomputed",
"shaders": {
"pred_ref": {
"name": "Model prediction",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.6
}
}
}
},
{
"name": "Prediction — work in progress",
"shaders": {
"pred_wip": {
"name": "Model prediction",
"type": "heatmap",
"fixed": false,
"dataReferences": [
2
],
"params": {
"opacity": 0.6
}
}
}
}
]
}
options block is server-specificIn the multi-channel example, options is not a generic xOpat field — it is
forwarded verbatim to the server's tile-source integration. The
{ "format", "channels", "plugin" } shape is what the wsi-service backend
expects. Other image servers may auto-detect channels and need no options, or
recognise a different schema — always check the integration API of the server
you point xOpat at.
For heavier, tutorial-guided configurations built on the same data, see the Summer School Demos page. For a session that enables the AI assistant in bring-your-own-key mode, see the BYOK AI Chat Demo.