From d3980cc5414e1f9be895defc4f967bee8a2480fc Mon Sep 17 00:00:00 2001
From: Ian Tenney <iftenney@google.com>
Date: Thu, 15 Feb 2024 08:57:29 -0800
Subject: [PATCH] Fix end-of-line token chip clipping in block mode.

Also fix another small z-index issue.

PiperOrigin-RevId: 607350268
---
 lit_nlp/client/elements/token_chips.css      | 22 +++++++++++++++++++-
 lit_nlp/client/elements/token_chips.ts       | 19 ++++++++++-------
 lit_nlp/client/modules/lm_salience_module.ts |  2 +-
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/lit_nlp/client/elements/token_chips.css b/lit_nlp/client/elements/token_chips.css
index bea68608..4b241431 100644
--- a/lit_nlp/client/elements/token_chips.css
+++ b/lit_nlp/client/elements/token_chips.css
@@ -85,7 +85,27 @@
   vertical-align: baseline;
 }
 
-.tokens-holder-display-block.tokens-holder-dense .salient-token span {
+/**
+ * This is the ugliest matcher I've ever written but it seems to fix the mess
+ * that is element spacing in inline mode. In particular: with the way we use
+ * word-spacer, any token followed by one would get extra trailing whitespace, 
+ * e.g. it would appear as |word | rather than |word|, making the highlighting
+ * awkward.
+ * 
+ * It's possible to fix this by scrupulously removing whitespace from the HTML,
+ * so long as the <span> are direct siblings of the word spacer. But this all 
+ * breaks down when they're nested inside <lit-tooltip> to provide the 
+ * mouseover.
+ * 
+ * So, instead we need to add a negative margin equal to the width 
+ * of a single space, only to those .salient-token elements that are followed
+ * by a .word-spacer. Of course, CSS provides only a next-sibling combinator
+ * (+), which would work to match the .word-spacer itself - but applying
+ * margin-left there does not have the desired effect (you just get twice the 
+ * spacing). So, we hack it with the unofficial but well-supported :has() 
+ * pseudo-class to match .salient-token that "has" a next-sibling .word-spacer.
+ */ 
+.tokens-holder-display-block.tokens-holder-dense .salient-token:has(+ .word-spacer) span {
    /* hack to remove extra whitespace. ugh. */
   margin-right: -0.445ch;
 }
diff --git a/lit_nlp/client/elements/token_chips.ts b/lit_nlp/client/elements/token_chips.ts
index 2e14ffdc..8f631345 100644
--- a/lit_nlp/client/elements/token_chips.ts
+++ b/lit_nlp/client/elements/token_chips.ts
@@ -97,12 +97,6 @@ export class TokenChips extends LitElement {
 
     let tokenText = tokenInfo.token;
 
-    let preSpace = false;
-    if (this.preSpace && tokenText.startsWith(' ')) {
-      preSpace = true;
-      tokenText = tokenText.slice(1);
-    }
-
     // TODO(b/324955623): render a gray '⏎' for newlines?
     // Maybe make this a toggleable option, as it can be distracting.
     // TODO(b/324955623): better rendering for multiple newlines, like \n\n\n ?
@@ -131,10 +125,21 @@ export class TokenChips extends LitElement {
       }
     }
 
+    let preSpace = false;
+    if (this.preSpace && tokenText.startsWith(' ')) {
+      preSpace = true;
+      tokenText = tokenText.slice(1);
+    }
+
+    // Don't let token text shrink that much.
+    if (tokenText === '') {
+      tokenText = ' ';
+    }
+
     // prettier-ignore
     return html`
-      ${preBreak ? html`<div class='row-break'></div>` : null}
       ${preSpace ? html`<div class='word-spacer'> </div>` : null}
+      ${preBreak ? html`<div class='row-break'></div>` : null}
       <div class=${tokenClass} style=${tokenStyle} @click=${tokenInfo.onClick}
         @mouseover=${tokenInfo.onMouseover} @mouseout=${tokenInfo.onMouseout}>
         <lit-tooltip content=${tokenInfo.weight.toPrecision(3)}
diff --git a/lit_nlp/client/modules/lm_salience_module.ts b/lit_nlp/client/modules/lm_salience_module.ts
index 7bddaac3..1d064a70 100644
--- a/lit_nlp/client/modules/lm_salience_module.ts
+++ b/lit_nlp/client/modules/lm_salience_module.ts
@@ -164,7 +164,7 @@ class LMSalienceChips extends TokenChips {
           border: 0;
           box-shadow: unset;
           /* TODO see if we can get away from z-index here */
-          z-index: 10;
+          z-index: 1;
         }
       `,
     ];