Integrate compact bound placeholder display

.github/workflows/bound_placeholder_display_compaction.yml

@@ -1,64 +0,0 @@
-name: Bound placeholder display compaction
-
-on:
-  pull_request:
-    branches:
-      - main
-
-permissions:
-  contents: write
-
-jobs:
-  implement-and-test:
-    runs-on: ubuntu-latest
-    env:
-      PYTHONPATH: ${{ github.workspace }}
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Apply display-only UI integration
-        shell: bash
-        run: |
-          set -euo pipefail
-          git checkout -B scrub-bound-placeholder-display-compaction origin/scrub-bound-placeholder-display-compaction
-          python - <<'PY'
-          from pathlib import Path
-          path = Path("ops/implement_bound_placeholder_display_compaction.py")
-          text = path.read_text(encoding="utf-8")
-          start_marker = '''patch(\n    "side_by_side_review_panel_ui.py",\n    """.sp-side-by-side-highlight-token'''
-          end_marker = '''\n\npatch(\n    "side_by_side_review_panel_ui.py",\n    \'\'\'def _highlighted_processed_inner_html'''
-          start = text.find(start_marker)
-          end = text.find(end_marker, start)
-          if start < 0 or end < 0:
-              raise SystemExit("CSS patch block anchors not found")
-          path.write_text(text[:start] + text[end + 2 :], encoding="utf-8")
-          PY
-          python ops/implement_bound_placeholder_display_compaction.py
-          git config user.name "github-actions[bot]"
-          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
-          git add -A
-          git diff --cached --check
-          git commit -m "Integrate compact bound placeholder display"
-          git push origin HEAD:scrub-bound-placeholder-display-compaction
-
-      - name: Run frontend display and component tests
-        run: |
-          node --test tests/frontend/bound_placeholder_display.test.js
-          node --test tests/frontend/processed_text_selection_component_core.test.js
-
-      - name: Set up Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: "3.10"
-
-      - name: Install test dependencies
-        run: |
-          python -m pip install --upgrade pip
-          python -m pip install pytest presidio-analyzer click==8.1.8 python-docx pymupdf reportlab pypdf
-
-      - name: Run full regression
-        run: python -m pytest -q tests

frontend/processed_text_selection_component/component.js

@@ -19,6 +19,8 @@
   let currentArgs = {};
   let processedText = "";
   let highlightSpans = [];
+  let renderedProcessedSegments = [];
+  let selectionProtectedSpans = [];
   let currentSelection = null;
   let lastMenuPosition = { x: 16, y: 16 };
   let lastRenderedInspectionToken = "";
@@ -39,18 +41,28 @@
 
   function renderProcessedText(text, spans) {
     clearElement(processedPane);
-    Core.buildTextSegments(text, spans).forEach(function (segment) {
-      if (segment.marked) {
-        const marker = document.createElement("mark");
-        marker.className = "sp-highlight";
-        marker.setAttribute("aria-label", "gemarkeerde vervanging");
-        marker.dataset.startUtf16 = String(segment.start_utf16);
-        marker.dataset.endUtf16 = String(segment.end_utf16);
-        appendSafeText(marker, segment.text);
-        processedPane.appendChild(marker);
-      } else {
-        appendSafeText(processedPane, segment.text);
+    renderedProcessedSegments = Core.buildDisplayTextSegments(text, spans);
+    selectionProtectedSpans = Core.protectedSpansFromDisplaySegments(renderedProcessedSegments);
+    renderedProcessedSegments.forEach(function (segment, index) {
+      const element = document.createElement(segment.marked ? "mark" : "span");
+      element.className = segment.marked
+        ? "sp-highlight sp-processed-segment"
+        : "sp-processed-segment";
+      if (segment.compacted) {
+        element.classList.add("sp-compact-placeholder");
+        element.title = `Volledige gebonden placeholder: ${segment.full_placeholder}`;
+        element.setAttribute(
+          "aria-label",
+          `Gebonden placeholder, compact weergegeven als ${segment.display_text}`,
+        );
+      } else if (segment.marked) {
+        element.setAttribute("aria-label", "gemarkeerde vervanging");
       }
+      element.dataset.segmentIndex = String(index);
+      element.dataset.startUtf16 = String(segment.start_utf16);
+      element.dataset.endUtf16 = String(segment.end_utf16);
+      appendSafeText(element, segment.display_text);
+      processedPane.appendChild(element);
     });
   }
 
@@ -85,10 +97,34 @@
     if (!nodeWithin(rootElement, container)) {
       throw new Error("selection endpoint is outside processed text");
     }
+    if (container === rootElement) {
+      if (!Number.isInteger(offset) || offset < 0 || offset > rootElement.childNodes.length) {
+        throw new Error("selection endpoint is outside processed text");
+      }
+      if (offset === 0) {
+        return 0;
+      }
+      if (offset >= renderedProcessedSegments.length) {
+        return processedText.length;
+      }
+      return renderedProcessedSegments[offset - 1].end_utf16;
+    }
+    const candidate = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;
+    const segmentElement = candidate && candidate.closest
+      ? candidate.closest("[data-segment-index]")
+      : null;
+    if (!segmentElement || !rootElement.contains(segmentElement)) {
+      throw new Error("selection endpoint has no source segment");
+    }
+    const segmentIndex = Number(segmentElement.dataset.segmentIndex);
     const range = document.createRange();
-    range.selectNodeContents(rootElement);
+    range.selectNodeContents(segmentElement);
     range.setEnd(container, offset);
-    return range.toString().length;
+    return Core.utf16OffsetFromDisplaySegments(
+      renderedProcessedSegments,
+      segmentIndex,
+      range.toString().length,
+    );
   }
 
   function readProcessedSelection() {
@@ -108,7 +144,7 @@
     } catch (_error) {
       return null;
     }
-    return Core.selectionFromOffsets(processedText, highlightSpans, start, end);
+    return Core.selectionFromOffsets(processedText, selectionProtectedSpans, start, end);
   }
 
   function updateSelectionState() {
@@ -358,9 +394,18 @@
 
     renderPlainText(sourcePane, currentArgs.source_text);
     renderProcessedText(processedText, highlightSpans);
-    processedLegend.textContent = highlightSpans.length
-      ? "Geel = vervangen of gemaskeerde waarde"
-      : "Verwerkte tekst";
+    const compactedCount = renderedProcessedSegments.filter(function (segment) {
+      return segment.compacted;
+    }).length;
+    if (highlightSpans.length && compactedCount) {
+      processedLegend.textContent = "Geel = vervangen; documentcode compact weergegeven";
+    } else if (highlightSpans.length) {
+      processedLegend.textContent = "Geel = vervangen of gemaskeerde waarde";
+    } else if (compactedCount) {
+      processedLegend.textContent = "Documentcode compact weergegeven";
+    } else {
+      processedLegend.textContent = "Verwerkte tekst";
+    }
 
     const restoreSource = currentArgs.restore_source_scroll_ratio;
     const restoreProcessed = currentArgs.restore_processed_scroll_ratio;

ops/implement_bound_placeholder_display_compaction.py

@@ -1,83 +0,0 @@
-from __future__ import annotations
-
-from pathlib import Path
-
-ROOT = Path(__file__).resolve().parents[1]
-
-
-def patch(path: str, old: str, new: str) -> None:
-    target = ROOT / path
-    text = target.read_text(encoding="utf-8")
-    if old not in text:
-        raise RuntimeError(f"Required anchor missing in {path}: {old[:120]!r}")
-    target.write_text(text.replace(old, new, 1), encoding="utf-8")
-
-
-patch(
-    "frontend/processed_text_selection_component/component.js",
-    """  let processedText = \"\";\n  let highlightSpans = [];\n  let currentSelection = null;\n""",
-    """  let processedText = \"\";\n  let highlightSpans = [];\n  let renderedProcessedSegments = [];\n  let selectionProtectedSpans = [];\n  let currentSelection = null;\n""",
-)
-
-patch(
-    "frontend/processed_text_selection_component/component.js",
-    """  function renderProcessedText(text, spans) {\n    clearElement(processedPane);\n    Core.buildTextSegments(text, spans).forEach(function (segment) {\n      if (segment.marked) {\n        const marker = document.createElement(\"mark\");\n        marker.className = \"sp-highlight\";\n        marker.setAttribute(\"aria-label\", \"gemarkeerde vervanging\");\n        marker.dataset.startUtf16 = String(segment.start_utf16);\n        marker.dataset.endUtf16 = String(segment.end_utf16);\n        appendSafeText(marker, segment.text);\n        processedPane.appendChild(marker);\n      } else {\n        appendSafeText(processedPane, segment.text);\n      }\n    });\n  }\n""",
-    """  function renderProcessedText(text, spans) {\n    clearElement(processedPane);\n    renderedProcessedSegments = Core.buildDisplayTextSegments(text, spans);\n    selectionProtectedSpans = Core.protectedSpansFromDisplaySegments(renderedProcessedSegments);\n    renderedProcessedSegments.forEach(function (segment, index) {\n      const element = document.createElement(segment.marked ? \"mark\" : \"span\");\n      element.className = segment.marked\n        ? \"sp-highlight sp-processed-segment\"\n        : \"sp-processed-segment\";\n      if (segment.compacted) {\n        element.classList.add(\"sp-compact-placeholder\");\n        element.title = `Volledige gebonden placeholder: ${segment.full_placeholder}`;\n        element.setAttribute(\n          \"aria-label\",\n          `Gebonden placeholder, compact weergegeven als ${segment.display_text}`,\n        );\n      } else if (segment.marked) {\n        element.setAttribute(\"aria-label\", \"gemarkeerde vervanging\");\n      }\n      element.dataset.segmentIndex = String(index);\n      element.dataset.startUtf16 = String(segment.start_utf16);\n      element.dataset.endUtf16 = String(segment.end_utf16);\n      appendSafeText(element, segment.display_text);\n      processedPane.appendChild(element);\n    });\n  }\n""",
-)
-
-patch(
-    "frontend/processed_text_selection_component/component.js",
-    """  function domUtf16Offset(rootElement, container, offset) {\n    if (!nodeWithin(rootElement, container)) {\n      throw new Error(\"selection endpoint is outside processed text\");\n    }\n    const range = document.createRange();\n    range.selectNodeContents(rootElement);\n    range.setEnd(container, offset);\n    return range.toString().length;\n  }\n""",
-    """  function domUtf16Offset(rootElement, container, offset) {\n    if (!nodeWithin(rootElement, container)) {\n      throw new Error(\"selection endpoint is outside processed text\");\n    }\n    if (container === rootElement) {\n      if (!Number.isInteger(offset) || offset < 0 || offset > rootElement.childNodes.length) {\n        throw new Error(\"selection endpoint is outside processed text\");\n      }\n      if (offset === 0) {\n        return 0;\n      }\n      if (offset >= renderedProcessedSegments.length) {\n        return processedText.length;\n      }\n      return renderedProcessedSegments[offset - 1].end_utf16;\n    }\n    const candidate = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;\n    const segmentElement = candidate && candidate.closest\n      ? candidate.closest(\"[data-segment-index]\")\n      : null;\n    if (!segmentElement || !rootElement.contains(segmentElement)) {\n      throw new Error(\"selection endpoint has no source segment\");\n    }\n    const segmentIndex = Number(segmentElement.dataset.segmentIndex);\n    const range = document.createRange();\n    range.selectNodeContents(segmentElement);\n    range.setEnd(container, offset);\n    return Core.utf16OffsetFromDisplaySegments(\n      renderedProcessedSegments,\n      segmentIndex,\n      range.toString().length,\n    );\n  }\n""",
-)
-
-patch(
-    "frontend/processed_text_selection_component/component.js",
-    """    return Core.selectionFromOffsets(processedText, highlightSpans, start, end);\n""",
-    """    return Core.selectionFromOffsets(processedText, selectionProtectedSpans, start, end);\n""",
-)
-
-patch(
-    "frontend/processed_text_selection_component/component.js",
-    """    processedLegend.textContent = highlightSpans.length\n      ? \"Geel = vervangen of gemaskeerde waarde\"\n      : \"Verwerkte tekst\";\n""",
-    """    const compactedCount = renderedProcessedSegments.filter(function (segment) {\n      return segment.compacted;\n    }).length;\n    if (highlightSpans.length && compactedCount) {\n      processedLegend.textContent = \"Geel = vervangen; documentcode compact weergegeven\";\n    } else if (highlightSpans.length) {\n      processedLegend.textContent = \"Geel = vervangen of gemaskeerde waarde\";\n    } else if (compactedCount) {\n      processedLegend.textContent = \"Documentcode compact weergegeven\";\n    } else {\n      processedLegend.textContent = \"Verwerkte tekst\";\n    }\n""",
-)
-
-patch(
-    "side_by_side_review_panel_ui.py",
-    """import streamlit.components.v1 as components\n\nfrom processed_text_selection_component import (\n""",
-    """import streamlit.components.v1 as components\n\nfrom bound_placeholder_display import build_bound_placeholder_display_segments\nfrom processed_text_selection_component import (\n""",
-)
-
-patch(
-    "side_by_side_review_panel_ui.py",
-    """.sp-side-by-side-highlight-token {\n    background: #fef3c7;\n    border: 1px solid #f59e0b;\n    border-radius: 0.25rem;\n    padding: 0.05rem 0.15rem;\n}\n""",
-    """.sp-side-by-side-highlight-token {\n    background: #fef3c7;\n    border: 1px solid #f59e0b;\n    border-radius: 0.25rem;\n    padding: 0.05rem 0.15rem;\n}\n.sp-compact-placeholder {\n    border-bottom: 1px dotted #94a3b8;\n    cursor: help;\n}\n""",
-)
-
-patch(
-    "side_by_side_review_panel_ui.py",
-    '''def _highlighted_processed_inner_html(\n    processed_text: str,\n    highlight_spans: list[tuple[int, int]],\n) -> str:\n    """Return escaped inner HTML for the static fallback processed pane."""\n\n    parts: list[str] = []\n    cursor = 0\n    for start, end in highlight_spans:\n        parts.append(escape(processed_text[cursor:start]))\n        parts.append(\n            '<mark class="sp-side-by-side-highlight-token" aria-label="gemarkeerde vervanging">'\n            f"{escape(processed_text[start:end])}"\n            "</mark>"\n        )\n        cursor = end\n    parts.append(escape(processed_text[cursor:]))\n    return "".join(parts)\n''',
-    '''def _highlighted_processed_inner_html(\n    processed_text: str,\n    highlight_spans: list[tuple[int, int]],\n) -> str:\n    """Return lossless compact display HTML for the static fallback pane."""\n\n    parts: list[str] = []\n    for segment in build_bound_placeholder_display_segments(processed_text, highlight_spans):\n        display_text = escape(str(segment["display_text"]))\n        full_placeholder = str(segment["full_placeholder"])\n        compact_attributes = ""\n        compact_class = ""\n        if segment["compacted"]:\n            compact_class = " sp-compact-placeholder"\n            compact_attributes = (\n                f' title="Volledige gebonden placeholder: {escape(full_placeholder)}"'\n                f' aria-label="Gebonden placeholder, compact weergegeven als {display_text}"'\n            )\n        if segment["highlighted"]:\n            parts.append(\n                f'<mark class="sp-side-by-side-highlight-token{compact_class}"'\n                f'{compact_attributes}>{display_text}</mark>'\n            )\n        elif segment["compacted"]:\n            parts.append(\n                f'<span class="sp-compact-placeholder"{compact_attributes}>'\n                f'{display_text}</span>'\n            )\n        else:\n            parts.append(display_text)\n    return "".join(parts)\n''',
-)
-
-patch(
-    "side_by_side_review_panel_ui.py",
-    """    processed_legend = \"Geel = vervangen of gemaskeerde waarde\" if show_markers else \"Verwerkte tekst\"\n""",
-    """    compacted = any(\n        segment[\"compacted\"]\n        for segment in build_bound_placeholder_display_segments(processed_text, [])\n    )\n    if show_markers and compacted:\n        processed_legend = \"Geel = vervangen; documentcode compact weergegeven\"\n    elif show_markers:\n        processed_legend = \"Geel = vervangen of gemaskeerde waarde\"\n    elif compacted:\n        processed_legend = \"Documentcode compact weergegeven\"\n    else:\n        processed_legend = \"Verwerkte tekst\"\n""",
-)
-
-patch(
-    "side_by_side_review_panel_ui.py",
-    """    processed_html = (\n        _highlighted_processed_inner_html(processed_text, highlight_spans)\n        if show_markers and highlight_spans\n        else escape(processed_text)\n    )\n""",
-    """    processed_html = _highlighted_processed_inner_html(\n        processed_text,\n        highlight_spans if show_markers else [],\n    )\n""",
-)
-
-patch(
-    "side_by_side_review_panel_ui.py",
-    """        \"component_environment_switch\": INTERACTIVE_COMPONENT_ENV,\n        \"pane_height\": SIDE_BY_SIDE_REVIEW_PANE_HEIGHT,\n""",
-    """        \"component_environment_switch\": INTERACTIVE_COMPONENT_ENV,\n        \"bound_placeholder_display_compaction\": True,\n        \"bound_placeholder_source_tokens_unchanged\": True,\n        \"bound_placeholder_binding_entropy_changed\": False,\n        \"pane_height\": SIDE_BY_SIDE_REVIEW_PANE_HEIGHT,\n""",
-)
-
-(ROOT / "ops/implement_bound_placeholder_display_compaction.py").unlink()
-(ROOT / ".github/workflows/bound_placeholder_display_compaction.yml").unlink()

side_by_side_review_panel_ui.py

@@ -15,6 +15,7 @@ from typing import Any, Mapping
 import streamlit as st
 import streamlit.components.v1 as components
 
+from bound_placeholder_display import build_bound_placeholder_display_segments
 from processed_text_selection_component import (
     render_processed_text_selection_component,
 )
@@ -96,19 +97,32 @@ def _highlighted_processed_inner_html(
     processed_text: str,
     highlight_spans: list[tuple[int, int]],
 ) -> str:
-    """Return escaped inner HTML for the static fallback processed pane."""
+    """Return lossless compact display HTML for the static fallback pane."""
 
     parts: list[str] = []
-    cursor = 0
-    for start, end in highlight_spans:
-        parts.append(escape(processed_text[cursor:start]))
-        parts.append(
-            '<mark class="sp-side-by-side-highlight-token" aria-label="gemarkeerde vervanging">'
-            f"{escape(processed_text[start:end])}"
-            "</mark>"
-        )
-        cursor = end
-    parts.append(escape(processed_text[cursor:]))
+    for segment in build_bound_placeholder_display_segments(processed_text, highlight_spans):
+        display_text = escape(str(segment["display_text"]))
+        full_placeholder = str(segment["full_placeholder"])
+        compact_attributes = ""
+        compact_class = ""
+        if segment["compacted"]:
+            compact_class = " sp-compact-placeholder"
+            compact_attributes = (
+                f' title="Volledige gebonden placeholder: {escape(full_placeholder)}"'
+                f' aria-label="Gebonden placeholder, compact weergegeven als {display_text}"'
+            )
+        if segment["highlighted"]:
+            parts.append(
+                f'<mark class="sp-side-by-side-highlight-token{compact_class}"'
+                f'{compact_attributes}>{display_text}</mark>'
+            )
+        elif segment["compacted"]:
+            parts.append(
+                f'<span class="sp-compact-placeholder"{compact_attributes}>'
+                f'{display_text}</span>'
+            )
+        else:
+            parts.append(display_text)
     return "".join(parts)
 
 
@@ -122,7 +136,18 @@ def _side_by_side_sync_scroll_html(
     """Build escaped HTML for the synchronized static fallback."""
 
     source_html = escape(source_text)
-    processed_legend = "Geel = vervangen of gemaskeerde waarde" if show_markers else "Verwerkte tekst"
+    compacted = any(
+        segment["compacted"]
+        for segment in build_bound_placeholder_display_segments(processed_text, [])
+    )
+    if show_markers and compacted:
+        processed_legend = "Geel = vervangen; documentcode compact weergegeven"
+    elif show_markers:
+        processed_legend = "Geel = vervangen of gemaskeerde waarde"
+    elif compacted:
+        processed_legend = "Documentcode compact weergegeven"
+    else:
+        processed_legend = "Verwerkte tekst"
     return f"""
 {_SYNC_SCROLL_COMPONENT_CSS}
 <div class="sp-sync-scroll-wrapper">
@@ -195,10 +220,9 @@ def _render_static_fallback(
     highlight_spans: list[tuple[int, int]],
     show_markers: bool,
 ) -> None:
-    processed_html = (
-        _highlighted_processed_inner_html(processed_text, highlight_spans)
-        if show_markers and highlight_spans
-        else escape(processed_text)
+    processed_html = _highlighted_processed_inner_html(
+        processed_text,
+        highlight_spans if show_markers else [],
     )
     components.html(
         _side_by_side_sync_scroll_html(
@@ -352,6 +376,9 @@ def render_side_by_side_review_panel(
         "static_fallback_used": static_fallback_used,
         "component_error": component_error,
         "component_environment_switch": INTERACTIVE_COMPONENT_ENV,
+        "bound_placeholder_display_compaction": True,
+        "bound_placeholder_source_tokens_unchanged": True,
+        "bound_placeholder_binding_entropy_changed": False,
         "pane_height": SIDE_BY_SIDE_REVIEW_PANE_HEIGHT,
         "compact_legend": compact_legend,
         "model": model,