CenterForDigitalHumanities / CenterForDigitalHumanities/TPEN-interfaces
Extend Column mode removes annotation click listeners permanently
- 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.