Fix textarea sizing in datapoint editor.

Textareas (.entry-long) now flex-grow to fill available space. The previous content-based height is now applied to min-height, so that they don't become too small before scrolling is triggered. This should greatly improve the experience of using LIT with longer text. Also fix a minor issue with text wrapping in footer buttons. PiperOrigin-RevId: 607815280
PAIR-code · Feb 16, 2024 · a758f98 · a758f98
1 parent 000c844
commit a758f98
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 19 deletions.
diff --git a/lit_nlp/client/modules/datapoint_editor_module.css b/lit_nlp/client/modules/datapoint_editor_module.css
@@ -133,6 +133,12 @@ select.dropdown {
   min-width: 50px;
 }
 
+#edit-table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .entry {
   align-items: center;
   box-sizing: border-box;
@@ -144,6 +150,15 @@ select.dropdown {
   border-radius: 4px;
 }
 
+.entry-long {
+  flex-grow: 1;
+  flex-basis: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-flow: column;
+}
+
 .entry-edited {
   background: var(--lit-bric-50);
 }
@@ -154,12 +169,23 @@ select.dropdown {
   justify-content: flex-end;
 }
 
-.entry-content-long {
+.entry-medium .entry-content {
   flex-grow: 1;
-  flex-basis: 100%;
+  max-width: max(50%, 500px);
+}
+
+.entry-long .entry-content {
+  flex-direction: column;
+  justify-content: flex-start;
+  height: 100%;
+  width: 100%;
+}
+
+.entry-long .entry-content textarea {
+  height: 100%;
 }
 
-.entry-content.left-align {
+.entry-left-align .entry-content {
   justify-content: flex-start;
 }
 
@@ -170,7 +196,6 @@ input {
 
 textarea {
   resize: vertical;
-  height: 100px;
   font-family: 'Roboto', sans;
   line-height: 18px;
   color: var(--lit-gray-800);

diff --git a/lit_nlp/client/modules/datapoint_editor_module.ts b/lit_nlp/client/modules/datapoint_editor_module.ts
@@ -382,7 +382,7 @@ export class DatapointEditorModule extends LitModule {
       </button>
     `;
     const compareButton = html`
-      <button id="compare" class='hairline-button'
+      <button id="compare" class='hairline-button' style="text-wrap: nowrap;"
         @click=${onClickCompare} ?disabled="${!compareEnabled}">
         Add and compare
       </button>
@@ -524,7 +524,7 @@ export class DatapointEditorModule extends LitModule {
     const errorInputClasses = renderError ? 'error-input' : '';
     const errorIconClasses = renderError ? 'error-icon' : '';
 
-    const inputStyle = {'height': this.inputHeights[key]};
+    const inputStyle = {'min-height': this.inputHeights[key]};
     // Render a multi-line text input.
     const renderFreeformInput = () => html`
       <textarea
@@ -612,25 +612,29 @@ export class DatapointEditorModule extends LitModule {
           !(fieldSpec instanceof Embeddings));
     };
 
-    let renderInput = renderFreeformInput;  // default: free text
-    const entryContentClasses = {
-      'entry-content': true,
-      'entry-content-long': false,
-      'left-align': false,
+    const entryClasses = {
+      'entry': true,
+      'entry-edited': this.dataEdits[key] !== undefined,
+      'entry-medium': false,
+      'entry-long': false,
+      'entry-left-align': false,
     };
+
+    let renderInput = renderFreeformInput;  // default: free text
     const fieldSpec = this.appState.currentDatasetSpec[key];
     const {vocab} = fieldSpec as LitTypeWithVocab;
     if (vocab != null && !(fieldSpec instanceof SparseMultilabel)) {
       renderInput = () => renderCategoricalInput(vocab);
     } else if (this.groupService.categoricalFeatureNames.includes(key)) {
       renderInput = renderShortformInput;
+      entryClasses['entry-medium'] = true;
     } else if (this.groupService.numericalFeatureNames.includes(key)) {
       renderInput = renderNumericInput;
     } else if (isLitSubtype(
                    fieldSpec, [Tokens, SequenceTags, SparseMultilabel])) {
       renderInput = renderTokensInput;
-      entryContentClasses['entry-content-long'] = true;
-      entryContentClasses['left-align'] = true;
+      entryClasses['entry-long'] = true;
+      entryClasses['entry-left-align'] = true;
     } else if (fieldSpec instanceof Embeddings) {
       renderInput = renderEmbeddingsNonEditable;
     } else if (fieldSpec instanceof SpanLabels) {
@@ -644,7 +648,7 @@ export class DatapointEditorModule extends LitModule {
     } else if (fieldSpec instanceof BooleanLitType) {
       renderInput = renderBoolean;
     } else {
-      entryContentClasses['entry-content-long'] = true;
+      entryClasses['entry-long'] = true;
     }
 
     // Shift + enter creates a newline; enter alone creates a new datapoint.
@@ -689,14 +693,11 @@ export class DatapointEditorModule extends LitModule {
         </a>`;
     }
 
-    const entryClasses = classMap(
-        {'entry': true, 'entry-edited': this.dataEdits[key] !== undefined});
-
     // Note the "." before "value" in the template below - this is to ensure
     // the value gets set by the template.
     // clang-format off
     return html`
-      <div class=${entryClasses}
+      <div class=${classMap(entryClasses)}
         @keyup=${(e: KeyboardEvent) => {onKeyUp(e);}}
         @keydown=${(e: KeyboardEvent) => {onKeyDown(e);}}
         >
@@ -709,7 +710,7 @@ export class DatapointEditorModule extends LitModule {
             </mwc-icon>
           </lit-tooltip>
         </div>
-        <div class=${classMap(entryContentClasses)}>
+        <div class='entry-content'>
           ${renderInput()}
         </div>
       </div>

diff --git a/lit_nlp/client/modules/embeddings_module.css b/lit_nlp/client/modules/embeddings_module.css
@@ -24,6 +24,10 @@
 
 .module-footer > * { min-width: 0; }
 
+.selected-nearest-button {
+  text-wrap: nowrap;
+}
+
 .selected-nearest-button:disabled {
   pointer-events: auto;
 }