Adds the feature attribution module

This module displays a table summarizing the minimum, median, mean, and maximum
salience values for each feature in the dataset. Only `FeatureSalience` is
supported, and salience can be provided by the model (i.e., intrinsic) or
retrieved from an interpreter (e.g., derived).

Controls are provided to enable/disable the compatible salience providers, and
to facet the current dataset into subsets.

A table is created for each salience provider and each facet. Tables are shown
in an expansion panel so users can choose to show/hide data as they see fit.

PiperOrigin-RevId: 426202158

lit_nlp/client/default/layout.ts

@@ -29,6 +29,7 @@ import {CounterfactualExplainerModule} from '../modules/counterfactual_explainer
 import {DataTableModule, SimpleDataTableModule} from '../modules/data_table_module';
 import {DatapointEditorModule, SimpleDatapointEditorModule} from '../modules/datapoint_editor_module';
 import {EmbeddingsModule} from '../modules/embeddings_module';
+import {FeatureAttributionModule} from '../modules/feature_attribution_module';
 import {GeneratedImageModule} from '../modules/generated_image_module';
 import {GeneratedTextModule} from '../modules/generated_text_module';
 import {GeneratorModule} from '../modules/generator_module';
@@ -47,7 +48,7 @@ import {TCAVModule} from '../modules/tcav_module';
 import {ThresholderModule} from '../modules/thresholder_module';
 
 // clang-format off
-const MODEL_PREDS_MODULES: LitModuleType[] = [
+const MODEL_PREDS_MODULES: readonly LitModuleType[] = [
   SpanGraphGoldModuleVertical,
   SpanGraphModuleVertical,
   ClassificationModule,
@@ -60,7 +61,7 @@ const MODEL_PREDS_MODULES: LitModuleType[] = [
   GeneratedImageModule,
 ];
 
-const DEFAULT_MAIN_GROUP: LitModuleType[] = [
+const DEFAULT_MAIN_GROUP: readonly LitModuleType[] = [
   DataTableModule,
   DatapointEditorModule,
   SliceModule,
@@ -108,6 +109,7 @@ export const LAYOUTS: LitComponentLayouts = {
         SalienceMapModule,
         SequenceSalienceModule,
         AttentionModule,
+        FeatureAttributionModule,
       ],
       'Clustering': [SalienceClusteringModule],
       'Metrics': [

lit_nlp/client/lib/utils.ts

@@ -24,6 +24,28 @@ import * as d3 from 'd3';  // Used for array helpers.
 import {html, TemplateResult} from 'lit';
 import {FacetMap, LitName, LitType, ModelInfoMap, Spec} from './types';
 
+/** Calculates the mean for a list of numbers */
+export function mean(values: number[]): number {
+  return values.reduce((a, b) => a + b) / values.length;
+}
+
+/** Calculates the median for a list of numbers. */
+export function median(values: number[]): number {
+  const sorted = [...values].sort();
+  const medIdx = Math.floor(sorted.length / 2);
+  let median: number;
+
+  if (sorted.length % 2 === 0) {
+    const upper = sorted[medIdx];
+    const lower = sorted[medIdx - 1];
+    median = (upper + lower) / 2;
+  } else {
+    median = sorted[medIdx];
+  }
+
+  return median;
+}
+
 /**
  * Random integer in range [min, max), where min and max are integers
  * (behavior on floats is undefined).

lit_nlp/client/lib/utils_test.ts

@@ -23,6 +23,25 @@ import 'jasmine';
 import {Spec} from '../lib/types';
 import * as utils from './utils';
 
+describe('mean test', () => {
+  it('computes a mean', () => {
+    const values = [1,3,2,5,4];
+    expect(utils.mean(values)).toEqual(3);
+  });
+});
+
+describe('median test', () => {
+  it('computes a median for a list of integers with odd length', () => {
+    const values = [1,3,2,5,4];
+    expect(utils.median(values)).toEqual(3);
+  });
+
+  it('computes a median for a list of integers with even length', () => {
+    const values = [1,3,2,5,4,6];
+    expect(utils.median(values)).toEqual(3.5);
+  });
+});
+
 describe('randInt test', () => {
   it('generates random integers in a given range', async () => {
     let start = 1;

lit_nlp/client/modules/feature_attribution_module.css

@@ -0,0 +1,25 @@
+.module-toolbar {
+  border-bottom: 1px solid var(--lit-neutral-300);
+}
+
+.attribution-container {
+  border-bottom: 1px solid var(--lit-neutral-300);
+}
+
+.expansion-header {
+  width: calc(100% - 16px);
+  height: 30px;
+  padding: 2px 8px;
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--lit-neutral-100);
+  color: var(--lit-majtonal-nv-800);
+  font-weight: bold;
+}
+
+.expansion-header:not(:only-child) {
+  border-bottom: 1px solid var(--lit-neutral-200);
+}