CenterForDigitalHumanities / CenterForDigitalHumanities/TPEN-interfaces

Extend Column mode removes annotation click listeners permanently

Open
#505 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
2
Forks
3
PR merge metrics
No merged PRs in 30d

Description

## 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`):
```javascript
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**: #499
- **Introduced by**: Consolidation of `workspaceCleanup` into `renderCleanup` during refactor
- **Confirmed by**: Manual testing — lines are unselectable after toggling extend mode

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.