Fix: CodeHighlightTabs persistence conflict when navigating between pages

[benweinberg89]

Problem

When navigating between pages that use the .. source:: directive to display code, a JavaScript error occurs:

TypeError: Cannot read properties of undefined (reading 'props')
    at getProps (persistence.js:286:12)
    at recordUiEdit (persistence.js:321:9)

The error happens when navigating between any pages that both use the .. source:: directive to render dmc.CodeHighlightTabs.

Root Cause

The CodeHighlightTabs components rendered by the source directive had no id prop. Dash's persistence system gets confused when unmounting/remounting these components during page navigation, causing it to try to access props on undefined components.

Solution

Added unique IDs to CodeHighlightTabs in lib/directives/source.py:

import uuid

# Generate unique ID to avoid persistence conflicts during navigation
unique_id = f"source-{uuid.uuid4().hex[:8]}"
return dmc.CodeHighlightTabs(
    id=unique_id,
    code=code,
    ...
)

Files Changed

• lib/directives/source.py - Added uuid import and unique ID generation for CodeHighlightTabs