Summer School Explainability Demos
These are the live xOpat configurations from the summer-school collaboration notebooks, embedded directly in the docs. Each viewer below loads a whole-slide H&E image together with model-explainability overlays, and runs a short guided tutorial the first time it opens. Pan with drag, zoom with the mouse wheel, and use the Open the demo in a new tab link beneath each viewer for a full-screen session.
Occlusion Masks
Occlusion-based explanation: a model-prediction heatmap and a bipolar importance map rendered over the slide, with a helper grid. Two visualizations ship — Occlusion - Precomputed (the full reference) and Occlusion - Ours (work-in-progress masks) — switchable from the Layers-panel dropdown.
Config highlight — locking down controls with interactive: false. Each
shader parameter can be hidden from the Layers panel so viewers see a curated,
non-editable preset. Here the heatmap's colour and inversion controls are locked:
"params": {
"opacity": 0.5,
"color": { "interactive": false },
"inverse": { "interactive": false }
}
The layer still renders, but those rows are removed from the UI — handy for demos where you want a fixed look. Expand View session configuration below to see every parameter.
View session configuration
xOpat session config
{
"params": {
"activeBackgroundIndex": 0,
"bypassCache": true,
"ui": {
"globalMenu": false
},
"disablePluginsUi": true,
"notificationsPosition": "top"
},
"data": [
"Projects/demo/summer-school-coolab/slide.tiff",
"Projects/demo/summer-school-coolab/occlusion_mask_precomputed.tiff",
"Projects/demo/summer-school-coolab/occlusion_mask_unfinished.tiff",
"Projects/demo/summer-school-coolab/heatmap_mask_precomputed.tiff",
"Projects/demo/summer-school-coolab/heatmap_mask_unfinished.tiff"
],
"background": [
{
"dataReference": 0,
"goalIndex": 0
},
{
"dataReference": 0,
"goalIndex": 1
}
],
"visualizations": [
{
"name": "Occlusion - Precomputed",
"shaders": {
"occlusion_heatmap": {
"name": "Model Prediction",
"type": "heatmap",
"fixed": false,
"dataReferences": [
3
],
"params": {
"opacity": 0.5,
"color": {
"interactive": false
},
"inverse": {
"interactive": false
}
}
},
"occlusion_importance": {
"name": "Occlusion Importance",
"type": "bipolar-heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"colorHigh": {
"default": "#00ff00",
"interactive": false
},
"colorLow": {
"default": "#ff0000",
"interactive": false
}
}
},
"grid": {
"name": "Helper grid",
"type": "grid",
"dataReferences": [
0
],
"params": {
"color": {
"default": "#000000",
"interactive": false
},
"cell_x": {
"default": 256
},
"cell_y": {
"default": 256
},
"offset_x": {
"interactive": false
},
"offset_y": {
"interactive": false
},
"adaptive_lod": {
"interactive": false
}
}
}
}
},
{
"name": "Occlusion - Ours",
"shaders": {
"occlusion_heatmap_ours": {
"name": "Model Prediction",
"type": "heatmap",
"fixed": false,
"dataReferences": [
4
],
"params": {
"opacity": 0.5,
"color": {
"interactive": false
},
"inverse": {
"interactive": false
}
}
},
"occlusion_importance_ours": {
"name": "Occlusion Importance",
"type": "bipolar-heatmap",
"fixed": false,
"dataReferences": [
2
],
"params": {
"opacity": 0.5,
"colorHigh": {
"default": "#00ff00",
"interactive": false
},
"colorLow": {
"default": "#ff0000",
"interactive": false
}
}
},
"grid_2": {
"name": "Helper grid",
"type": "grid",
"dataReferences": [
0
],
"params": {
"color": {
"default": "#000000",
"interactive": false
},
"cell_x": {
"default": 256
},
"cell_y": {
"default": 256
},
"offset_x": {
"interactive": false
},
"offset_y": {
"interactive": false
},
"adaptive_lod": {
"interactive": false
}
}
}
}
}
],
"plugins": {
"extra-tutorials": {
"data": [
{
"title": "ECDP2026: Occlusion masks",
"attach": true,
"runDelay": 600,
"confirm": {
"title": "Welcome to xOpat",
"message": "Quick orientation around the viewer — under a minute.<br/>You can re-run it any time from the tutorials menu.",
"acceptLabel": "Show me around",
"declineLabel": "Skip"
},
"content": [
{
"next #viewer-container": "This is the slide viewer. Pan with drag, zoom with the mouse wheel. In the notebook, you need to hold Ctrl/Cmd while scrolling. This is enabled in order to not to interfere with the notebook UI. Here, two overlays render on top of the H&E slide — a heatmap and a bipolar importance map."
},
{
"next #osd-0-right-menu-menu-b-opened-navigator": "The Navigator tab opens a minimap of the slide. The navigator is fully interactive position preview."
},
{
"click #osd-0-right-menu-menu-b-opened-shaders": "Click here to open the Layers tab — it lists the overlays (heatmap, bipolar importance, helper grid) for the current visualization."
},
{
"next #osd-0-right-menu-menu-c-shaders select[name='shaders']": "Switch between <b>Occlusion — Precomputed</b> (full reference) and <b>Occlusion — Ours</b> (your work-in-progress masks) from this dropdown."
},
{
"next #fullscreen-button": "Hides all UI chrome so the slide takes the whole window. Click again to bring it back."
},
{
"next #visual-menu-b-view": "The View menu re-opens hidden menus, toggles panels — handy if you've hidden something by accident."
}
]
}
]
}
}
}
GradCam Comparison
Your model's GradCam output rendered through a colour ramp. The tutorial points you at the interactive range selector so you can reshape which intensity bands are drawn.
Config highlight — the colormap shader. GradCam intensities are mapped
through a colour ramp rather than a single tint. The color block defines the
ramp (the Turbo palette as a 5-step continuous sequential default), and
threshold gates which value bands are drawn — breaks are the band edges and
mask switches each band on/off (here the lowest band is hidden so background
noise stays transparent):
"type": "colormap",
"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] }
}
Open the Layers panel to recolour the ramp or drag the threshold breaks live — click a red interval in the range selector to mask that band out.
View session configuration
xOpat session config
{
"params": {
"activeBackgroundIndex": [
0
],
"bypassCache": true,
"ui": {
"globalMenu": false
},
"disablePluginsUi": true,
"notificationsPosition": "top"
},
"data": [
"Projects/demo/summer-school-coolab/slide.tiff",
"Projects/demo/summer-school-coolab/gradcam_mask.tiff"
],
"background": [
{
"dataReference": 0,
"goalIndex": 0
},
{
"dataReference": 0,
"goalIndex": 1
}
],
"visualizations": [
{
"name": "GradCam",
"shaders": {
"gradcam-ours": {
"name": "Gradcam",
"type": "colormap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"use_gamma": 1,
"opacity": 0.8,
"connect": false,
"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
]
}
}
}
}
}
],
"plugins": {
"extra-tutorials": {
"data": [
{
"title": "GradCam comparison: align and inspect",
"attach": true,
"runDelay": 600,
"confirm": {
"title": "Compare your GradCam to the reference",
"message": "Two viewers side-by-side: the <b>precomputed reference</b> and <b>your model's output</b>. We'll align them with a couple of clicks so you can scrutinize differences.",
"acceptLabel": "Walk me through it",
"declineLabel": "Skip"
},
"content": [
{
"next #osd-0": "On the slide we can see the computed GradCam overlay."
},
{
"click #osd-0-right-menu-menu-b-opened-shaders": "Click here to open the Layers tab as before."
},
{
"click #vosd0_gradcamours-shader .er-control__body--advanced-slider": "The colormap range selector is fully interactive. You can move the knobs and click on the red intervals to disable them."
},
{
"next #vosd0_gradcamours_connect": "If you need the color to follow your knobs, use this checkbox."
}
]
}
]
}
}
}
Activation Clusters
A multi-channel activation-clustering map (6 classes) over the slide. Hover to reveal the H&E underneath via the visualization inspector, and reshape the colormap from the Layers panel without touching the session config.
Config highlight — sampling one channel per class from a multi-channel TIFF.
All cluster classes live in a single ac.tiff. The data entry asks the
tifffile plugin to expose all channels:
{
"dataID": "Projects/demo/summer-school-coolab/ac.tiff",
"options": { "format": "tiff", "channels": "all", "plugin": "tifffile" }
}
Each class layer then selects its channel with use_channel_base0 (a 0-based
channel index), so the same data source feeds several differently-coloured
heatmaps:
"class_4": {
"type": "heatmap",
"dataReferences": [1],
"params": { "use_channel_base0": 3, "color": { "default": "#D62728" } }
}
options is server-specificThe options block is not a generic xOpat field — it is forwarded verbatim
to the server's tile-source integration (the OpenSeadragon tileSource the
server hands back). The { "format", "channels", "plugin" } shape above is what
the wsi-service backend expects to expose a multi-channel TIFF. Other image
servers may auto-detect the channels and need no options at all, or recognise a
different option schema — always check the integration API of the server you are
pointing xOpat at.
Switch to Activation Clusters (Hatching) from the top selector to see the
same channels rendered as patternmap overlays instead.
View session configuration
xOpat session config
{
"params": {
"activeBackgroundIndex": 0,
"bypassCache": true,
"visualizationInspectorEnabled": true,
"visualizationInspectorMode": "reveal-outside",
"disablePluginsUi": true,
"notificationsPosition": "top"
},
"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,
"goalIndex": 0
}
],
"visualizations": [
{
"name": "Activation Clusters",
"shaders": {
"class_1": {
"name": "Class 1 Heatmap",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 0,
"threshold": 0,
"color": {
"default": "#1F77B4"
},
"inverse": {
"interactive": false
}
}
},
"class_2": {
"name": "Class 2 Heatmap",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 1,
"threshold": 0,
"color": {
"default": "#2CA02C"
},
"inverse": {
"interactive": false
}
}
},
"class_3": {
"name": "Class 3 Heatmap",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 2,
"threshold": 0,
"color": {
"default": "#FF7F0E"
},
"inverse": {
"interactive": false
}
}
},
"class_4": {
"name": "Class 4 Heatmap",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 3,
"threshold": 0,
"color": {
"default": "#D62728"
},
"inverse": {
"interactive": false
}
}
},
"class_5": {
"name": "Class 5 Heatmap",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 4,
"threshold": 0,
"color": {
"default": "#8C564B"
},
"inverse": {
"interactive": false
}
}
},
"class_6": {
"name": "Class 6 Heatmap",
"type": "heatmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.8,
"use_channel_base0": 5,
"threshold": 0,
"color": {
"default": "#17BECF"
},
"inverse": {
"interactive": false
}
}
}
}
},
{
"name": "Activation Clusters (Hatching)",
"shaders": {
"class_1_hatch": {
"name": "Class 1 Pattern Map",
"type": "patternmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.9,
"use_channel_base0": 0,
"threshold": 0,
"pattern_type": 2,
"spacing": 7,
"line_width": 2.5,
"offset_x": 0,
"offset_y": 0,
"rotation": 0,
"color": {
"default": "#1F77B4"
},
"inverse": {
"interactive": false
}
}
},
"class_2_hatch": {
"name": "Class 2 Pattern Map",
"type": "patternmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.9,
"use_channel_base0": 1,
"threshold": 0,
"pattern_type": 2,
"spacing": 7,
"line_width": 2.5,
"offset_x": 1.5,
"offset_y": 1.5,
"rotation": 17,
"color": {
"default": "#2CA02C"
},
"inverse": {
"interactive": false
}
}
},
"class_3_hatch": {
"name": "Class 3 Pattern Map",
"type": "patternmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.9,
"use_channel_base0": 2,
"threshold": 0,
"pattern_type": 2,
"spacing": 7,
"line_width": 2.5,
"offset_x": 3,
"offset_y": 3,
"rotation": 34,
"color": {
"default": "#FF7F0E"
},
"inverse": {
"interactive": false
}
}
},
"class_4_hatch": {
"name": "Class 4 Pattern Map",
"type": "patternmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.9,
"use_channel_base0": 3,
"threshold": 0,
"pattern_type": 2,
"spacing": 7,
"line_width": 2.5,
"offset_x": 4.5,
"offset_y": 4.5,
"rotation": 51,
"color": {
"default": "#D62728"
},
"inverse": {
"interactive": false
}
}
},
"class_5_hatch": {
"name": "Class 5 Pattern Map",
"type": "patternmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.9,
"use_channel_base0": 4,
"threshold": 0,
"pattern_type": 2,
"spacing": 7,
"line_width": 2.5,
"offset_x": 6,
"offset_y": 6,
"rotation": 68,
"color": {
"default": "#8C564B"
},
"inverse": {
"interactive": false
}
}
},
"class_6_hatch": {
"name": "Class 6 Pattern Map",
"type": "patternmap",
"fixed": false,
"dataReferences": [
1
],
"params": {
"opacity": 0.9,
"use_channel_base0": 5,
"threshold": 0,
"pattern_type": 2,
"spacing": 7,
"line_width": 2.5,
"offset_x": 7.5,
"offset_y": 7.5,
"rotation": 85,
"color": {
"default": "#17BECF"
},
"inverse": {
"interactive": false
}
}
}
}
}
],
"plugins": {
"extra-tutorials": {
"data": [
{
"title": "Activation Clusters: inspect & tweak",
"attach": true,
"runDelay": 600,
"confirm": {
"title": "Inspect and reshape the cluster map",
"message": "Two quick things: how to peek under the overlay, and how to reshape the colormap without touching the session config.",
"acceptLabel": "Show me",
"declineLabel": "Skip"
},
"content": [
{
"next #osd-0": "<b>Hover over the slide.</b> The visualization inspector (<code>reveal-outside</code> mode) fades the cluster overlay away under your cursor so you can see the H&E underneath. Move the mouse away to bring it back."
},
{
"next #visual-menu-b-edit": "The inspector is configurable from the <b>Edit</b> menu — toggle it off entirely, or swap between <i>reveal-outside</i> (overlay disappears under cursor) and <i>reveal-inside</i> (overlay shows only under cursor)."
},
{
"click #osd-0-right-menu-menu-b-opened-shaders": "Open the <b>Layers</b> tab — that is where you can play with individual classes. You can also select a different style, a pattern heatmap, from the top select."
},
{
"next #osd-0-right-menu-menu-opendiv-shaders": "<b>Activation Clusters are shown as individual layers.</b><br/>And they overlap. You can reorder layers, change opacity, turn them on/off."
},
{
"next #osd-0-right-menu-menu-opendiv-shaders select[name='shaders']": "<b>You can try alternative 'hatching' which tries to solve overlaps with different grid overlays.</b>"
},
{
"next #osd-0": "Want to experiment without touching the session? <b>Right-click anywhere on the slide</b> and pick <b>Viewer → Open Visualization Playground</b>. It clones the current visualization into a sandbox where you can change shader type, palette, breaks, params — anything — and the underlying display() config stays untouched."
}
]
}
]
}
}
}