From 1cf610b1df91ed80130220c87f28774906f40033 Mon Sep 17 00:00:00 2001
From: uditDewan <udit.dewan21@gmail.com>
Date: Sat, 18 Jul 2026 22:47:17 -0400
Subject: [PATCH] Make highlighted entities clickable in visualization

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 #103
---
 langextract/visualization.py |  9 ++++++++-
 tests/visualization_test.py  | 22 ++++++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/langextract/visualization.py b/langextract/visualization.py
index 725757cb..9e172da7 100644
--- a/langextract/visualization.py
+++ b/langextract/visualization.py
@@ -75,7 +75,7 @@ def _is_jupyter() -> bool:
 
 _VISUALIZATION_CSS = textwrap.dedent("""\
     <style>
-    .lx-highlight { position: relative; border-radius:3px; padding:1px 2px;}
+    .lx-highlight { position: relative; border-radius:3px; padding:1px 2px; cursor: pointer;}
     .lx-highlight .lx-tooltip {
       visibility: hidden;
       opacity: 0;
@@ -544,6 +544,13 @@ def _extraction_sort_key(extraction):
         window.prevExtraction = prevExtraction;
         window.jumpToExtraction = jumpToExtraction;
 
+        document.getElementById('textWindow').addEventListener('click', (event) => {{
+          const highlight = event.target.closest('.lx-highlight');
+          if (highlight && highlight.dataset.idx !== undefined) {{
+            jumpToExtraction(highlight.dataset.idx);
+          }}
+        }});
+
         updateDisplay();
       }})();
     </script>""")
diff --git a/tests/visualization_test.py b/tests/visualization_test.py
index 43f42759..3c08a20f 100644
--- a/tests/visualization_test.py
+++ b/tests/visualization_test.py
@@ -138,6 +138,28 @@ def test_visualize_basic_document_renders_correctly(self):
     for component in expected_components:
       self.assertIn(component, actual_html)
 
+  @mock.patch.object(
+      visualization, "HTML", new=None
+  )  # Ensures visualize returns str
+  def test_visualize_highlights_are_clickable(self):
+
+    doc = data.AnnotatedDocument(
+        text="Patient needs Aspirin.",
+        extractions=[
+            data.Extraction(
+                extraction_class="MEDICATION",
+                extraction_text="Aspirin",
+                char_interval=data.CharInterval(start_pos=14, end_pos=21),
+            )
+        ],
+    )
+
+    actual_html = visualization.visualize(doc)
+
+    self.assertIn("cursor: pointer", actual_html)
+    self.assertIn("addEventListener('click'", actual_html)
+    self.assertIn("closest('.lx-highlight')", actual_html)
+
   @mock.patch.object(
       visualization, "HTML", new=None
   )  # Ensures visualize returns str