diff --git a/lit_nlp/client/elements/token_chips.css b/lit_nlp/client/elements/token_chips.css index 4b241431..bdba78f2 100644 --- a/lit_nlp/client/elements/token_chips.css +++ b/lit_nlp/client/elements/token_chips.css @@ -1,3 +1,7 @@ +:host { + --block-line-height: 22px; +} + .tokens-group { position: relative; } @@ -71,7 +75,7 @@ .tokens-holder-display-block { display: block; font-size: 0; /* hack to get zero spacing between elements */ - line-height: 22px; + line-height: var(--block-line-height); } .tokens-holder-display-block > * { diff --git a/lit_nlp/client/modules/lm_salience_module.ts b/lit_nlp/client/modules/lm_salience_module.ts index cb7d6ed5..3c65f076 100644 --- a/lit_nlp/client/modules/lm_salience_module.ts +++ b/lit_nlp/client/modules/lm_salience_module.ts @@ -11,6 +11,7 @@ import {css, html} from 'lit'; // tslint:disable:no-new-decorators import {customElement} from 'lit/decorators.js'; import {classMap} from 'lit/directives/class-map.js'; +import {styleMap} from 'lit/directives/style-map.js'; import {computed, observable} from 'mobx'; import {LitModule} from '../core/lit_module'; @@ -39,6 +40,7 @@ enum SegmentationMode { WORDS = 'Words', SENTENCES = 'Sentences', LINES = 'Lines', + PARAGRAPHS = 'ΒΆ', // TODO(b/324961811): add phrase or clause chunking? // TODO(b/324961803): add custom regex? } @@ -148,10 +150,15 @@ class LMSalienceChips extends TokenChips { --token-outline-color: var(--lit-neutral-300); /* outline in non-dense mode */ } .tokens-holder-display-block .salient-token { - padding: 3px 0; + padding: 3px 0; /* this controls the visible highlight */ margin: 0; margin-right: 4px; } + .tokens-holder-display-block .salient-token span { + /* this controls the mouseover area, so there are no gaps */ + /* or flickering when hovering over multiline tokens */ + padding: 6px 0; + } .salient-token.selected { --token-outline-color: var(--lit-mage-700); box-shadow: 0px 0px 3px var(--token-outline-color); @@ -207,6 +214,7 @@ export class LMSalienceModule extends SingleExampleSingleModelModule { @observable private selectedSalienceMethod? = 'grad_l2'; @observable private cmapGamma = 1.0; @observable private denseView = true; + @observable private vDense = false; /* vertical spacing */ @observable private showSelfSalience = false; @observable.ref private currentTokens: string[] = []; @@ -302,6 +310,12 @@ export class LMSalienceModule extends SingleExampleSingleModelModule { // - a run of consecutive \n as its own segment // - any non-\n following \n return groupTokensByRegexPrefix(this.currentTokens, /(\n+)|([^\n]+)/g); + } else if (this.segmentationMode === SegmentationMode.PARAGRAPHS) { + // Paragraph start is either: + // - two or more newlines as its own segment + // - any non-\n following \n\n + return groupTokensByRegexPrefix( + this.currentTokens, /(\n\n+)|(?<=\n\n)([^\n]+)/g); } else { throw new Error( `Unsupported segmentation mode ${this.segmentationMode}.`); @@ -541,6 +555,10 @@ export class LMSalienceModule extends SingleExampleSingleModelModule { }; }); + const onClickToggleVDense = () => { + this.vDense = !this.vDense; + }; + // prettier-ignore return html`
@@ -559,6 +577,10 @@ export class LMSalienceModule extends SingleExampleSingleModelModule { grid_view + + ${this.vDense ? 'expand' : 'compress'} +
`; } @@ -854,12 +876,16 @@ export class LMSalienceModule extends SingleExampleSingleModelModule { }); } + const chipHostStyle = + styleMap({'--block-line-height': this.vDense ? '16px' : '22px'}); + // prettier-ignore return html`
+ .cmap=${this.cmap} breakNewlines displayBlock + style=${chipHostStyle}>
`;