Sequence Salience: improve toolbar layout and wrapping in smaller win…

…dows

PiperOrigin-RevId: 616236748

lit_nlp/client/elements/color_legend.css

@@ -5,6 +5,7 @@
   height: 30px;
   overflow-x: auto;
   overflow-y: hidden;
+  line-height: 18px; /* pin this to avoid alignment issues */
 }
 
 .legend-container.align-right {

lit_nlp/client/modules/lm_salience_module.css

@@ -93,10 +93,21 @@ select:invalid {
   border-bottom: 1px solid #dadce0;
   box-sizing: border-box;
   justify-content: space-between;
+
+  /* should match min-height? Consider moving this to shared_styles */
+  line-height: 36px;
+  container-type: inline-size;
+}
+
+.module-container .module-toolbar:first-child {
+  /* fix for tooltip occlusion issues caused by container-type */
+  z-index: 1;
 }
 
 .module-footer {
   justify-content: space-between;
+
+  container-type: inline-size;
 }
 
 .controls-group {
@@ -105,6 +116,8 @@ select:invalid {
   align-items: center;
   margin: 0 4px;
   gap: 4px;
+
+  height: 36px; /* for proper height when wrapping */
 }
 
 .controls-group[disabled] {
@@ -120,11 +133,16 @@ select:invalid {
   margin-right: 8px;
 }
 
-.change-target-button {
+#change-target-button {
   white-space: nowrap;
   margin: 0; /* have enough already from controls-group */
 }
 
+#change-target-icon {
+  display: none; /* hide by default */
+  line-height: 36px; /* vertical alignment issue */
+}
+
 .vertical-separator {
   background: #dadce0;
   width: 2px;
@@ -136,29 +154,55 @@ select:invalid {
 /* Allow wrap. TODO move this to shared_styles as an option? */
 .module-footer-wrappable {
   flex-wrap: wrap;
-  /* line-height: 30px; */  /* causes alignment issues */
   height: unset;
   min-height: 36px;
+  /* should match min-height? Consider moving this to shared_styles */
+  line-height: 36px;
 }
 
 .module-footer > * { min-width: 0; }
 
 .controls-group > * { min-width: 0; }
 
+.controls-group label {
+  white-space: nowrap;
+}
+
+/**
+ * Container queries to hide some labels in narrow windows.
+ * Helps in SxS mode when the module is replicated.
+ */
+@container (width < 720px) {
+  #granularity-label {
+    display: none;
+  }
+}
+
+@container (width < 660px) {
+  #change-target-button, #method-label, #colormap-slider-label {
+    display: none;
+  }
+
+  #change-target-icon {
+    display: block; /* show */
+  }
+}
+
 color-legend {
   /* extra space to keep other controls from jumping when legend changes */
   /* width: 400px; */
   margin-right: 16px;
 }
 
 
-/* Pending request indicator */
+/**
+ * Pending request indicator
+ */
 .loading-indicator-container {
   position: relative;
   width: 100%;
 }
 
-
 @keyframes running-progress {
   0% { margin-left: 0; width: 0; }
   50% { margin-left: 35%; width: 65%; }

lit_nlp/client/modules/lm_salience_module.ts

@@ -592,7 +592,8 @@ export class LMSalienceModule extends SingleExampleSingleModelModule {
     // prettier-ignore
     return html`
       <div class="controls-group" style="gap: 8px;">
-        <label class="dropdown-label" for="granularity-selector">Granularity:</label>
+        <label class="dropdown-label" id="granularity-label"
+         for="granularity-selector">Granularity:</label>
         <lit-fused-button-bar id="granularity-selector"
             .options=${segmentationOptions}
             ?disabled=${this.currentTokens.length === 0}>
@@ -655,7 +656,8 @@ export class LMSalienceModule extends SingleExampleSingleModelModule {
     // prettier-ignore
     return html`
       <div class="controls-group" style="gap: 8px;">
-        <label class="dropdown-label" for="method-selector">Method:</label>
+        <label class="dropdown-label" id="method-label"
+         for="method-selector">Method:</label>
         <lit-fused-button-bar .options=${methodOptions} id="method-selector">
         </lit-fused-button-bar>
         ${this.renderSelfScoreSelector()}
@@ -713,21 +715,27 @@ export class LMSalienceModule extends SingleExampleSingleModelModule {
 
     // prettier-ignore
     return html`
-      <div class="controls-group controls-group-variable"
-        title=${targetSelectorHelp}>
-        <label class="dropdown-label">Sequence${sourceInfo}:</label>
-        <div class=${indicatorTextClass}>
+      <div class="controls-group controls-group-variable">
+        <label class="dropdown-label" title=${targetSelectorHelp}>
+          Sequence${sourceInfo}:
+        </label>
+        <div class=${indicatorTextClass}
+         title=${target == null ? 'No target; select one below.' : targetText}>
           ${targetText}
           ${isLoadingPreds ? this.renderLoadingIndicator() : null}
         </div>
       </div>
       <div class='controls-group'>
         <lit-tooltip content=${targetSelectorHelp} tooltipPosition="left">
-          <button class='hairline-button change-target-button'
+          <button class='hairline-button' id='change-target-button'
             slot='tooltip-anchor' @click=${clearSalienceTarget}
             ?disabled=${target == null}>
             <span>Select sequence </span><span class='material-icon'>arrow_drop_down</span>
           </button>
+          <mwc-icon class='icon-button' id='change-target-icon'
+            slot='tooltip-anchor' @click=${clearSalienceTarget}>
+            edit
+          </mwc-icon>
         </lit-tooltip>
       </div>
     `;
@@ -965,7 +973,9 @@ export class LMSalienceModule extends SingleExampleSingleModelModule {
     return html`
       <div class="controls-group">
         ${this.renderColorLegend()}
-        <label for="cmap-range-slider">Colormap intensity:</label>
+        <mwc-icon class='icon'>opacity</mwc-icon>
+        <label id='colormap-slider-label' class='dropdown-label'
+         for="cmap-range-slider">Colormap intensity:</label>
         <lit-numeric-input min="0" max="1" step="0.1" id='cmap-range-slider'
           value="${this.cmapRange}" @change=${onChangeRange}>
         </lit-numeric-input>