Extend Column mode removes annotation click listeners permanently

[thehabes]

Bug Description

On the Manage Columns page, entering Extend Column mode (checking the checkbox) permanently removes all annotation overlay box click listeners. Users cannot select any lines on the image — not during Extend mode, and not after unchecking it.

This also affects Merge Column mode for the same reason, though merge mode doesn't require clicking annotations so it's less visible there.

Steps to Reproduce

1. Navigate to a project's Manage Columns page with annotation lines visible
2. Verify you can click annotation overlay boxes (they highlight and show selection numbers)
3. Check the Extend Column checkbox
4. Try to click annotation overlay boxes — they no longer respond to clicks
5. Uncheck the Extend Column checkbox
6. Try to click annotation overlay boxes again — still no response

Expected Behavior

• Annotation overlay boxes should remain clickable in Extend mode (users need to select annotations to add to a column)
• After exiting Extend/Merge mode, annotation click behavior should be fully restored

Root Cause

PR #499 consolidated the old workspaceCleanup registry (for workspace buttons) into renderCleanup (which also manages annotation box listeners). When extendColumn() or mergeColumns() calls this.renderCleanup.run() to clear workspace buttons, it also removes all annotation box click listeners registered by renderAnnotations().

The old components/create-column/index.js used three separate registries to avoid this:

• cleanup — persistent listeners (window, document, eventDispatcher)
• renderCleanup — annotation overlay box listeners
• workspaceCleanup — workspace button listeners

The refactored interfaces/manage-columns/index.js only uses two (cleanup and renderCleanup), mixing annotation and workspace concerns.

Relevant code (interfaces/manage-columns/index.js):

extendColumn() {
    this.renderCleanup.run()  // ← Removes ALL renderCleanup listeners, including annotation boxes
    // ... creates workspace buttons also via this.renderCleanup
}

Suggested Fix

Reintroduce workspaceCleanup as a separate CleanupRegistry for workspace-specific listeners:

1. Add workspaceCleanup = new CleanupRegistry() class field
2. In extendColumn() and mergeColumns(), replace this.renderCleanup.run() with this.workspaceCleanup.run()
3. Register workspace buttons on this.workspaceCleanup instead of this.renderCleanup
4. Add this.workspaceCleanup.run() to disconnectedCallback()

Context

• Branch: 346-column-refresh-refactor
• PR: Enable in-place column sync, caching & reload #499
• Introduced by: Consolidation of workspaceCleanup into renderCleanup during refactor
• Confirmed by: Manual testing — lines are unselectable after toggling extend mode

[thehabes]

Related: renderCleanup accumulates stale entries across column operations

There's a secondary issue with the same renderCleanup registry that should be addressed alongside the fix.

Problem

refreshFromCache() removes overlay box DOM elements (box.remove()) and then calls renderAnnotations() which registers new click listeners via this.renderCleanup. But renderCleanup.run() is never called before re-creating them, so stale cleanup functions from previous renders accumulate in the registry. Each column operation (create/merge/extend/clear) adds another batch without clearing the old ones — a minor but growing memory leak.

Relevant Code (interfaces/manage-columns/index.js ~line 522)

refreshFromCache() {
    // ...
    this.container.querySelectorAll('.overlayBox').forEach(box => box.remove())
    // ← renderCleanup.run() should be called here to clear stale listener references
    this.renderAnnotations(this.cachedAnnotations, imgWidth, imgHeight, assignedAnnotationIds)
    // ...
}

Fix

Add this.renderCleanup.run() before removing old boxes in refreshFromCache():

refreshFromCache() {
    if (!this.cachedImageInfo || !this.cachedAnnotations?.length) return false
    const { imgWidth, imgHeight } = this.cachedImageInfo
    const assignedAnnotationIds = this.buildAssignedAnnotations()
    this.totalIds = this.cachedAnnotations
        .filter(anno => !assignedAnnotationIds.some(a => a.lineId === anno.lineId))
        .map(a => a.lineId)
    localStorage.setItem('annotationsState', JSON.stringify({
        remainingIDs: this.totalIds,
        selectedIDs: []
    }))
    this.renderCleanup.run()  // ← Clear old listener references before re-creating
    this.container.querySelectorAll('.overlayBox').forEach(box => box.remove())
    this.renderAnnotations(this.cachedAnnotations, imgWidth, imgHeight, assignedAnnotationIds)
    this.restoreAnnotationState()
    return true
}

Note: This fix pairs with the workspaceCleanup reintroduction. Once workspace buttons use their own registry, renderCleanup.run() here will only clear annotation box listeners (correct behavior).