Skip to content

Make highlighted entities clickable in visualization - #490

Open
UditDewan wants to merge 3 commits into
google:mainfrom
UditDewan:clickable-entity-highlights
Open

Make highlighted entities clickable in visualization#490
UditDewan wants to merge 3 commits into
google:mainfrom
UditDewan:clickable-entity-highlights

Conversation

@UditDewan

@UditDewan UditDewan commented Jul 19, 2026

Copy link
Copy Markdown

Description

Clicking a highlighted entity in the HTML visualization now jumps the selector to that extraction — updating the attributes panel, progress slider, entity counter, and position info. This makes reviewing extractions on longer documents much faster than stepping through them one at a time with Previous/Next.

Implements the suggestion from the linked issue:

  • Added cursor: pointer to .lx-highlight so highlights signal they are clickable.
  • Added a delegated click listener on the text window that resolves the clicked .lx-highlight span (via closest(), so nested spans work) and calls the existing jumpToExtraction().

Fixes #103

Feature

How Has This Been Tested?

Added test_visualize_highlights_are_clickable to tests/visualization_test.py verifying the generated HTML wires up the click handler and pointer cursor.

$ python -m pytest tests/visualization_test.py
6 passed

Also exercised the generated HTML in a DOM environment (jsdom): clicking a highlight selects that entity (attributes panel, slider, entity counter, and position info all update, and the lx-current-highlight marker moves), clicking the first entity (data-idx="0") works, and clicks on non-highlighted text are a no-op. Play/Previous/Next behavior is unchanged.

Checklist:

  • I have read and acknowledged Google's Open Source
    Code of conduct.
  • I have read the
    Contributing
    page, and I either signed the Google
    Individual CLA
    or am covered by my company's
    Corporate CLA.
  • I have discussed my proposed solution with code owners in the linked
    issue(s) and we have agreed upon the general approach.
  • I have made any needed documentation changes, or noted in the linked
    issue(s) that documentation elsewhere needs updating.
  • I have added tests, or I have ensured existing tests cover the changes
  • I have followed
    Google's Python Style Guide
    and ran pylint over the affected code.

Clicking a highlighted entity in the HTML visualization now selects it,
updating the attributes panel, slider, and position info, which makes
reviewing extractions on longer documents much faster than stepping
through them sequentially. Adds a pointer cursor on highlights to
signal clickability.

Fixes google#103
@github-actions github-actions Bot added the size/XS Pull request with less than 50 lines changed label Jul 19, 2026
@github-actions

Copy link
Copy Markdown

⚠️ Branch Update Required

Your branch is 1 commits behind main. Please update your branch to ensure CI checks run with the latest code:

git fetch origin main
git merge origin/main
git push

Note: Enable "Allow edits by maintainers" to allow automatic updates.

@github-actions

github-actions Bot commented Aug 2, 2026

Copy link
Copy Markdown

⚠️ Branch Update Required

Your branch is 1 commits behind main. Please update your branch to ensure CI checks run with the latest code:

git fetch origin main
git merge origin/main
git push

Note: Enable "Allow edits by maintainers" to allow automatic updates.

@github-actions

Copy link
Copy Markdown

⚠️ Branch Update Required

Your branch is 1 commits behind main. Please update your branch to ensure CI checks run with the latest code:

git fetch origin main
git merge origin/main
git push

Note: Enable "Allow edits by maintainers" to allow automatic updates.

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

Labels

size/XS Pull request with less than 50 lines changed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clickable Entity Selector in Visualizations

1 participant