Skip to content

Add optional built-in guided tour to webgl viewers#660

Open
jackgallant wants to merge 5 commits into
gallantlab:mainfrom
jackgallant:claude/webgl-tour
Open

Add optional built-in guided tour to webgl viewers#660
jackgallant wants to merge 5 commits into
gallantlab:mainfrom
jackgallant:claude/webgl-tour

Conversation

@jackgallant

Copy link
Copy Markdown
Contributor

Summary

Adds an optional, built-in guided tour to the webgl viewers, enabled with a single argument:

cortex.webgl.make_static(outpath, volume, tour=True)

Today, every gallantlab viewer that has a tour hand-carries its own copy of a Tour class, markup, and CSS inside a custom make_static template. Those copies also share a show/hide bug: the old showhide() toggled only the title/content/buttons, leaving the stepper dots and a translucent strip stranded on screen. This PR promotes a cleaned tour into pycortex so viewers can stop copy-pasting it, and fixes that bug in the process.

The built-in tour is a generic stub — a few dataset-agnostic steps (navigating, f/i/r surface keys, h for shortcuts). It says nothing viewer-specific.

What it does

  • make_static(..., tour=True) bakes the tour in; default tour=False emits nothing (existing viewers are unaffected).
  • The tour box appears top-left. The user can page it with Back/Next or the dots, collapse it with its on-screen "(hide tour)" link, or fully toggle it with the o key (t was already taken by surface morph). The o shortcut is listed in the h help menu.

Implementation

Mirrors the existing leapmotion / python_interface optional-feature pattern:

  • cortex/webgl/resources/js/tour.js (new) — a self-contained Tour class that injects its own markup; per-step view/call hooks are optional (the stub uses neither); toggle() shows/hides the whole box (the fix).
  • cortex/webgl/resources/css/tour.css (new) — the tour styles.
  • cortex/webgl/template.html — a {% if tour %} block that includes the two assets, beside the existing {% if leapmotion %} block.
  • cortex/webgl/view.py — a tour=False argument on make_static; sets viewopts["tour"] and passes tour= to the template renderer.
  • cortex/webgl/resources/js/mriview.js — when viewopts.tour is set, constructs the tour and registers the o toggle.

Tests

cortex/tests/test_webgl_tour.py renders the base template with tour=True / tour=False (via the same FallbackLoader machinery make_static uses, no subject fixture needed) and asserts the tour assets are included only when enabled.

The Tour runtime behavior (box injection, stepping, the o full-toggle, and the minimize link) was verified against jsdom + jQuery locally.

🤖 Generated with Claude Code

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces an optional guided-tour feature to the pycortex webgl viewer, allowing users to enable a dataset-agnostic stepper via cortex.webgl.make_static(tour=True). It adds the necessary frontend assets (CSS and JS), integrates the tour initialization into mriview.js, updates the HTML template, and adds corresponding unit tests. One critical issue was identified: rendering the template via cortex.webgl.show() will crash with a NameError because the tour variable is not defined in that context. It is recommended to wrap the tour conditional block in the template with a try/except NameError block to ensure backward compatibility.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment on lines +50 to +53
{% if tour %}
<script type='text/javascript' src="resources/js/tour.js"></script>
<link rel="stylesheet" href="resources/css/tour.css" type='text/css' />
{% end %}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

Rendering this template via cortex.webgl.show() (which uses mixer.html extending template.html) will crash with a NameError: name 'tour' is not defined because tour is not passed to html.generate() in show()'s MixerHandler.

To prevent this crash and ensure backward compatibility with other viewer entry points, wrap the tour conditional block in a try/except NameError block. This is a clean, template-level solution that avoids breaking cortex.webgl.show().

{% try %}
{% if tour %}
<script type='text/javascript' src="resources/js/tour.js"></script>
<link rel="stylesheet" href="resources/css/tour.css" type='text/css' />
{% end %}
{% except NameError %}
{% end %}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant