New UI module for training-data attribution / influence functions.

Based on the generator module, but streamlined for retrieving sets of examples.
- Operates only on a single selected datapoint
- Output table non-editable
- Simplified add-datapoint controls

PiperOrigin-RevId: 433823444

lit_nlp/api/types.py

@@ -482,4 +482,15 @@ class CurveDataPoints(LitType):
   pass
 
 
+@attr.s(auto_attribs=True, frozen=True, kw_only=True)
+class InfluentialExamples(LitType):
+  """Represents influential examples from the training set.
+
+  This is as returned by a training-data attribution method like TracIn or
+  influence functions.
+
+  This describes a generator component; values are List[List[JsonDict]].
+  """
+  pass
+
 # LINT.ThenChange(../client/lib/types.ts)

lit_nlp/client/default/layout.ts

@@ -46,6 +46,7 @@ import {SequenceSalienceModule} from '../modules/sequence_salience_module';
 import {SliceModule} from '../modules/slice_module';
 import {SpanGraphGoldModuleVertical, SpanGraphModuleVertical} from '../modules/span_graph_module';
 import {TCAVModule} from '../modules/tcav_module';
+import {TrainingDataAttributionModule} from '../modules/tda_module';
 import {ThresholderModule} from '../modules/thresholder_module';
 
 // clang-format off
@@ -86,6 +87,7 @@ export const LAYOUTS: LitComponentLayouts = {
     lower: {
       'Predictions': [ ...MODEL_PREDS_MODULES],
       'Salience': [SalienceMapModule, SequenceSalienceModule],
+      'Influence': [TrainingDataAttributionModule],
     },
     layoutSettings: {
       hideToolbar: true,
@@ -118,6 +120,7 @@ export const LAYOUTS: LitComponentLayouts = {
         ConfusionMatrixModule,
         ThresholderModule,
       ],
+      'Influence': [TrainingDataAttributionModule],
       'Counterfactuals': [GeneratorModule, CounterfactualExplainerModule],
       'TCAV': [
         TCAVModule,

lit_nlp/client/elements/interpreter_controls.ts

@@ -49,6 +49,8 @@ export class InterpreterControls extends ReactiveElement {
   @observable @property({type: Object}) spec = {};
   @observable @property({type: String}) name = '';
   @observable @property({type: String}) description = '';
+  @observable @property({type: String}) applyButtonText = 'Apply';
+  @property({type: Boolean, reflect: true}) applyButtonDisabled = false;
   @observable settings: Settings = {};
   @property({type: Boolean, reflect: true}) opened = false;
 
@@ -77,7 +79,10 @@ export class InterpreterControls extends ReactiveElement {
           <div class="description">${this.description}</div>
           ${this.renderControls()}
           <div class="buttons-holder">
-            <button class="filled-button" @click=${apply}>Apply</button>
+            <button class="filled-button" @click=${apply}
+              ?disabled=${this.applyButtonDisabled}>
+              ${this.applyButtonText}
+            </button>
           </div>
         </div>`;
 

lit_nlp/client/lib/types.ts

@@ -33,7 +33,7 @@ export type LitName = 'type'|'LitType'|'String'|'TextSegment'|'GeneratedText'|
     'AttentionHeads'|'SparseMultilabel'|'FieldMatcher'|'MultiFieldMatcher'|
     'Gradients'|'Boolean'|'TokenSalience'|'ImageBytes'|'SparseMultilabelPreds'|
     'ImageGradients'|'ImageSalience'|'SequenceSalience'|'ReferenceScores'|
-    'FeatureSalience'|'TopTokens'|'CurveDataPoints';
+    'FeatureSalience'|'TopTokens'|'CurveDataPoints'|'InfluentialExamples';
 
 export const listFieldTypes: LitName[] =
     ['Tokens', 'SequenceTags', 'SpanLabels', 'EdgeLabels', 'SparseMultilabel'];

lit_nlp/client/modules/tda_module.css

@@ -0,0 +1,81 @@
+.module-toolbar {
+  border-bottom: 1px solid #dadce0;
+  box-sizing: border-box;
+  justify-content: space-between;
+}
+
+.tda-module-content {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.generators-panel {
+  border-right: 1px solid var(--lit-neutral-300);
+  box-sizing: border-box;
+  flex-grow: 0;
+  flex-shrink: 0;
+  overflow-y: auto;
+  width: 400px;
+}
+
+.results-holder {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-y: auto;
+  margin-left: 4px;
+}
+
+/**
+ * TODO(lit-dev): move interstitial styles to shared_styles
+ */
+.interstitial {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+  justify-content: center;
+  overflow: hidden;
+  font-family: 'Google Sans', sans;
+}
+
+.interstitial > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+  max-width: 300px;
+}
+
+.interstitial > img {
+  flex-shrink: 1;
+  max-height: 130px;
+}
+
+.interstitial p {
+  color: #5f6368;
+}
+
+.interstitial strong {
+  display: block;
+  font-size: 1.5em;
+  margin-bottom: 4px;
+}
+
+.generators-panel .label {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.generators-panel.visible {
+  display: block;
+}
+
+.footer-end-controls {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}