Add a version of the Datapoint Editor which does not replicate on exa…

…mple comparison. With this version, only the selected datapoint will be editable, not the pinned one. PiperOrigin-RevId: 616246154
PAIR-code · Mar 15, 2024 · 27cafd8 · 27cafd8
1 parent 84af141
commit 27cafd8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/lit_nlp/api/layout.py b/lit_nlp/api/layout.py
@@ -38,6 +38,9 @@ class LitModuleName(dtypes.EnumSerializableAsValues, enum.Enum):
   DataTableModule = 'data-table-module'
   SimpleDataTableModule = 'simple-data-table-module'
   DatapointEditorModule = 'datapoint-editor-module'
+  # Non-replicating version of Datapoint Editor
+  SingleDatapointEditorModule = 'single-datapoint-editor-module'
+  # Simplified, non-replicating version of Datapoint Editor
   SimpleDatapointEditorModule = 'simple-datapoint-editor-module'
   DiveModule = 'dive-module'
   DocumentationModule = 'documentation-module'

diff --git a/lit_nlp/client/modules/datapoint_editor_module.ts b/lit_nlp/client/modules/datapoint_editor_module.ts
@@ -842,22 +842,33 @@ export class DatapointEditorModule extends LitModule {
   }
 }
 
+/**
+ * Regular datapoint editor, but does not duplicate in example SxS mode.
+ */
+@customElement('single-datapoint-editor-module')
+export class SingleDatapointEditorModule extends DatapointEditorModule {
+  static override duplicateForExampleComparison = false;
+  static override template = () => {
+    return html`<single-datapoint-editor-module></single-datapoint-editor-module>`;
+  };
+}
+
 /**
  * Simplified version of the above; omits add-and-compare button.
  */
 @customElement('simple-datapoint-editor-module')
-export class SimpleDatapointEditorModule extends DatapointEditorModule {
+export class SimpleDatapointEditorModule extends SingleDatapointEditorModule {
   protected override addButtonText = 'Analyze';
   protected override showAddAndCompare = false;
-  static override template = (model = '', selectionServiceIndex = 0) => {
-    return html`<simple-datapoint-editor-module selectionServiceIndex=${
-        selectionServiceIndex}></simple-datapoint-editor-module>`;
+  static override template = () => {
+    return html`<simple-datapoint-editor-module></simple-datapoint-editor-module>`;
   };
 }
 
 declare global {
   interface HTMLElementTagNameMap {
     'datapoint-editor-module': DatapointEditorModule;
+    'single-datapoint-editor-module': SingleDatapointEditorModule;
     'simple-datapoint-editor-module': SimpleDatapointEditorModule;
   }
 }
diff --git a/lit_nlp/examples/lm_salience_demo.py b/lit_nlp/examples/lm_salience_demo.py
@@ -86,7 +86,7 @@
 LEFT_RIGHT_LAYOUT = layout.LitCanonicalLayout(
     left={
         "Examples": [modules.DataTableModule],
-        "Editor": [modules.DatapointEditorModule],
+        "Editor": [modules.SingleDatapointEditorModule],
     },
     upper={  # if 'lower' not specified, this fills the right side
         "Salience": [modules.LMSalienceModule],
@@ -115,7 +115,7 @@
         "Embeddings": [modules.EmbeddingsModule],
     },
     upper={
-        "Datapoint Editor": [modules.DatapointEditorModule],
+        "Datapoint Editor": [modules.SingleDatapointEditorModule],
         "Datapoint Generators": [modules.GeneratorModule],
     },
     lower={