Fix ShowMore default behavior such that columns with undefined maxWid…

…ths get clipped using a default column width of 200px Add GeneratedTextCandidates to LitType width dict Add ShowMore functionality that chooses between truncating based on line width and line breaks, such that columns in list format take up less vertical space by default (see qgen:query column for example). PiperOrigin-RevId: 528514481
PAIR-code · May 1, 2023 · 8c4bf1f · 8c4bf1f
1 parent 550fc19
commit 8c4bf1f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/lit_nlp/client/elements/table.ts b/lit_nlp/client/elements/table.ts
@@ -1052,7 +1052,7 @@ export class DataTable extends ReactiveElement {
       this.hasExpandedCells = true;
     };
 
-    const formatCellContents = (d: TableEntry, maxWidth: number) => {
+    const formatCellContents = (d: TableEntry, maxWidth?: number) => {
       if (d == null) return null;
 
       if (typeof d === 'string' && d.startsWith(IMAGE_PREFIX)) {
@@ -1097,7 +1097,7 @@ export class DataTable extends ReactiveElement {
         h => classMap({'cell-holder': true,
         'right-align': h.rightAlign!}));
 
-    const cellMaxWidths = this.columnHeaders.map(h => h.maxWidth?? 0);
+    const cellMaxWidths = this.columnHeaders.map(h => h.maxWidth);
 
     const cellStyles = styleMap(
         {'vertical-align': this.verticalAlignMiddle ? 'middle' : 'top'});

diff --git a/lit_nlp/client/elements/table_text_cell.ts b/lit_nlp/client/elements/table_text_cell.ts
@@ -29,6 +29,7 @@ import {formatForDisplay} from '../lib/types';
 const PX_TO_CHAR = 0.139;
 const SHOW_MORE_WIDTH_PX = 25;
 const LINES_TO_RENDER = 3;
+const DEFAULT_MAX_WIDTH = 200;
 
 /**
  * A text cell element that expands hidden text on click.
@@ -61,7 +62,7 @@ export class LitTableTextCell extends ReactiveElement {
     }
 
     @property({type: String}) content = '';
-    @property({type: Number}) maxWidth = 100;
+    @property({type: Number}) maxWidth?: number;
     @property({type: Boolean}) expanded = false;
 
     /**
@@ -76,14 +77,23 @@ export class LitTableTextCell extends ReactiveElement {
         e.preventDefault();
       };
 
+      const maxWidth = this.maxWidth ?? DEFAULT_MAX_WIDTH;
+
       const showMoreStyles = styleMap({
-        '--show-more-max-width': `${this.maxWidth}px`,
+        '--show-more-max-width': `${maxWidth}px`,
         '--show-more-icon-width': `20px`,
       });
 
       const clippedTextLengthPx =
-        this.maxWidth*LINES_TO_RENDER - SHOW_MORE_WIDTH_PX;
-      const clippedTextLengthChars = Math.floor(clippedTextLengthPx*PX_TO_CHAR);
+        maxWidth*LINES_TO_RENDER - SHOW_MORE_WIDTH_PX;
+
+      const clippedByMaxWidthChars = Math.floor(clippedTextLengthPx*PX_TO_CHAR);
+
+      const clippedByLineBreaksChars =
+        this.content.split("\n\n", LINES_TO_RENDER).join("\n\n").length;
+
+      const clippedTextLengthChars =
+        Math.min(clippedByMaxWidthChars, clippedByLineBreaksChars);
 
       const isExpanded =
         this.expanded ||  this.content.length <= clippedTextLengthChars;

diff --git a/lit_nlp/client/modules/data_table_module.ts b/lit_nlp/client/modules/data_table_module.ts
@@ -47,12 +47,13 @@ const LIT_TYPE_MIN_MAX_WIDTHS: {[key: string]: ColWidths} = {
   "Scalar": [60, 100],
   "RegressionScore": [60, 100],
   "ImageBytes": [60, undefined],
-  "SearchQuery": [220, 600],
+  "SearchQuery": [100, 300],
   "Tokens": [220, 600],
   "SequenceTags": [100, 600],
   "SpanLabels": [150, 200],
   "EdgeLabels": [150, 200],
-  "MultiSegmentAnnotations": [60, 200]
+  "MultiSegmentAnnotations": [60, 200],
+  "GeneratedTextCandidates": [150, 400]
 };
 
 // TODO(b/275101197): consolidate this with other rendering code.