Move the Slice Module to the main toolbar button

PiperOrigin-RevId: 485946588
PAIR-code · Nov 3, 2022 · 7db22ae · 7db22ae
1 parent de7d8ba
commit 7db22ae
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 9 deletions.
diff --git a/documentation/api.md b/documentation/api.md
@@ -346,7 +346,6 @@ LM_LAYOUT = layout.LitCanonicalLayout(
             modules.EmbeddingsModule,
             modules.DataTableModule,
             modules.DatapointEditorModule,
-            modules.SliceModule,
         ]
     },
     lower={

diff --git a/lit_nlp/api/layout.py b/lit_nlp/api/layout.py
@@ -57,7 +57,6 @@ class LitModuleName(dtypes.EnumSerializableAsValues, enum.Enum):
   SalienceMapModule = 'salience-map-module'
   ScalarModule = 'scalar-module'
   SequenceSalienceModule = 'sequence-salience-module'
-  SliceModule = 'lit-slice-module'
   SpanGraphGoldModule = 'span-graph-gold-module'
   SpanGraphModule = 'span-graph-module'
   SpanGraphGoldModuleVertical = 'span-graph-gold-module-vertical'
@@ -152,7 +151,6 @@ def to_json(self) -> JsonDict:
 DEFAULT_MAIN_GROUP = (
     modules.DataTableModule,
     modules.DatapointEditorModule,
-    modules.SliceModule,
 )
 
 ##

diff --git a/lit_nlp/client/core/main_toolbar.css b/lit_nlp/client/core/main_toolbar.css
@@ -33,6 +33,11 @@
   position: absolute;
 }
 
+.slice-container {
+  width: 300px;
+  height: 300px;
+}
+
 #slice-toolbar-container {
   right: 0; /* remove to span page */
 }

diff --git a/lit_nlp/client/core/main_toolbar.ts b/lit_nlp/client/core/main_toolbar.ts
@@ -19,6 +19,8 @@
  * LIT App selection controls toolbar
  */
 
+ import '../elements/popup_container';
+
 import '@material/mwc-icon';
 import '@material/mwc-switch';
 
@@ -27,6 +29,7 @@ import {MobxLitElement} from '@adobe/lit-mobx';
 import {html} from 'lit';
 import {customElement} from 'lit/decorators';
 import {classMap} from 'lit/directives/class-map';
+import {styleMap} from 'lit/directives/style-map';
 import {computed} from 'mobx';
 
 import {MenuItem} from '../elements/menu';
@@ -333,6 +336,32 @@ export class LitMainToolbar extends MobxLitElement {
     // clang-format on
   }
 
+  // Render a Slices button to show the Slice Editor
+  renderSlices() {
+    // Left-anchor the Slice Editor popup.
+    const popupStyle = styleMap({'--popup-top': '4px'});
+    // clang-format off
+    return html`
+    <popup-container style=${popupStyle}>
+      <button class='hairline-button xl' slot='toggle-anchor-closed'>
+        <span class='material-icon-outlined'>dataset</span>
+        &nbsp;Slices&nbsp;
+        <span class='material-icon'>expand_more</span>
+      </button>
+      <button class='hairline-button xl' slot='toggle-anchor-open'>
+          <span class='material-icon-outlined'>dataset</span>
+          &nbsp;Slices&nbsp;
+          <span class='material-icon'>expand_less</span>
+        </button>
+      <div class='slice-container'>
+        <lit-slice-module model="unused" shouldReact=1 selectionServiceIndex=0>
+        </lit-slice-module>
+      </div>
+    </popup-container>
+    `;
+    // clang-format on
+  }
+
   /**
    * Pair controls. Assumes reference is showing parent, main showing child.
    */
@@ -460,6 +489,7 @@ export class LitMainToolbar extends MobxLitElement {
     <div class='toolbar main-toolbar'>
       <div id='left-container'>
         <lit-main-menu></lit-main-menu>
+        ${this.renderSlices()}
         <button class="${buttonClasses}" title=${title}
                 ?disabled=${pinDisabled} @click=${updatePinnedDatapoint}>
           <div class="pin-button-content">

diff --git a/lit_nlp/client/modules/slice_module.css → lit_nlp/client/core/slice_module.css b/lit_nlp/client/modules/slice_module.css → lit_nlp/client/core/slice_module.css
diff --git a/lit_nlp/client/modules/slice_module.ts → lit_nlp/client/core/slice_module.ts b/lit_nlp/client/modules/slice_module.ts → lit_nlp/client/core/slice_module.ts
@@ -17,12 +17,12 @@
 
 // tslint:disable:no-new-decorators
 import {customElement} from 'lit/decorators';
-import { html} from 'lit';
+import {html} from 'lit';
 import {classMap} from 'lit/directives/class-map';
 import {computed, observable} from 'mobx';
 
-import {app} from '../core/app';
-import {LitModule} from '../core/lit_module';
+import {app} from './app';
+import {LitModule} from './lit_module';
 import {ModelInfoMap, Spec} from '../lib/types';
 import {handleEnterKey} from '../lib/utils';
 import {GroupService, NumericFeatureBins} from '../services/group_service';

diff --git a/lit_nlp/examples/coref/coref_demo.py b/lit_nlp/examples/coref/coref_demo.py
@@ -102,7 +102,6 @@
         "Main": [
             modules.DataTableModule,
             modules.DatapointEditorModule,
-            modules.SliceModule,
         ],
         "Predictions": [
             modules.SpanGraphGoldModule,

diff --git a/lit_nlp/examples/image_demo.py b/lit_nlp/examples/image_demo.py
@@ -44,7 +44,6 @@ def main(_):
           'Main': [
               modules.DataTableModule,
               modules.DatapointEditorModule,
-              modules.SliceModule,
           ],
           'Predictions': [modules.ClassificationModule, modules.ScalarModule],
           'Explanations': [

diff --git a/lit_nlp/examples/lm_demo.py b/lit_nlp/examples/lm_demo.py
@@ -58,7 +58,6 @@
             modules.EmbeddingsModule,
             modules.DataTableModule,
             modules.DatapointEditorModule,
-            modules.SliceModule,
         ]
     },
     lower={