Hparams: Show 'differs' tag in selector if hparam has differing value (#6779)

Shows a 'differs' tag in the data table column selector if an hparam has
multiple values.

We start by adding generic support to the data table column selector for
"tags". Tags can be arbitrary strings.

Then, for each Hparam column, we calculate whether to include a
'differs' tag.

Light mode:

![image](https://github.com/tensorflow/tensorboard/assets/17152369/7c8110cd-ac9f-48e5-97f1-ff4c1b5bf8d4)

Dark mode:

![image](https://github.com/tensorflow/tensorboard/assets/17152369/59b3af5d-6990-483b-8a05-4c27c0c37182)

Internal Light mode:

![image](https://github.com/tensorflow/tensorboard/assets/17152369/1ada0711-724a-4e2a-80ab-452bc1f8cd02)

Internal Dark mode:

![image](https://github.com/tensorflow/tensorboard/assets/17152369/48c0321d-4db7-4244-b7b0-6fb249539d69)

Author: bmd3k

tensorboard/webapp/hparams/_redux/hparams_data_source_test.ts

@@ -82,6 +82,7 @@ describe('HparamsDataSource Test', () => {
             minValue: -100,
             maxValue: 100,
           },
+          differs: true,
         },
         {
           description: 'describes hparams two',
@@ -92,6 +93,7 @@ describe('HparamsDataSource Test', () => {
             type: DomainType.DISCRETE,
             values: ['foo', 'bar', 'baz'],
           },
+          differs: true,
         },
       ]);
     });
@@ -112,6 +114,7 @@ describe('HparamsDataSource Test', () => {
             type: DomainType.DISCRETE,
             values: [],
           },
+          differs: false,
         },
         {
           description: 'describes hparams two',
@@ -122,6 +125,7 @@ describe('HparamsDataSource Test', () => {
             type: DomainType.DISCRETE,
             values: ['foo', 'bar', 'baz'],
           },
+          differs: true,
         },
       ]);
     });
@@ -321,13 +325,15 @@ export function createHparamsExperimentResponse(): BackendHparamsExperimentRespo
         name: 'hparams1',
         type: BackendHparamsValueType.DATA_TYPE_STRING,
         domainInterval: {minValue: -100, maxValue: 100},
+        differs: true,
       },
       {
         description: 'describes hparams two',
         displayName: 'hparams two',
         name: 'hparams2',
         type: BackendHparamsValueType.DATA_TYPE_BOOL,
         domainDiscrete: ['foo', 'bar', 'baz'],
+        differs: true,
       },
     ],
     metricInfos: [],
@@ -346,13 +352,15 @@ export function createHparamsExperimentNoDomainResponse(): BackendHparamsExperim
         displayName: 'hparams one',
         name: 'hparams1',
         type: BackendHparamsValueType.DATA_TYPE_STRING,
+        differs: false,
       } as BackendHparamSpec,
       {
         description: 'describes hparams two',
         displayName: 'hparams two',
         name: 'hparams2',
         type: BackendHparamsValueType.DATA_TYPE_BOOL,
         domainDiscrete: ['foo', 'bar', 'baz'],
+        differs: true,
       },
     ],
     metricInfos: [],

tensorboard/webapp/hparams/_redux/testing.ts

@@ -57,6 +57,7 @@ export function buildHparamSpec(
     domain: {type: DomainType.INTERVAL, minValue: 0, maxValue: 1},
     name: 'sample_param',
     type: HparamsValueType.DATA_TYPE_FLOAT64,
+    differs: false,
     ...override,
   };
 }

tensorboard/webapp/metrics/views/main_view/common_selectors.ts

@@ -284,6 +284,7 @@ export const getPotentialHparamColumns = createSelector(
       // be displayed tensorboard/plugins/hparams/api.proto
       displayName: hparamSpec.displayName || hparamSpec.name,
       enabled: false,
+      tags: hparamSpec.differs ? ['differs'] : [],
       removable: true,
       sortable: true,
       movable: true,

tensorboard/webapp/metrics/views/main_view/common_selectors_test.ts

@@ -1008,12 +1008,13 @@ describe('common selectors', () => {
   });
 
   describe('getPotentialHparamColumns', () => {
-    const expectedBooleanFlags = {
+    const expectedCommonProperties = {
       enabled: false,
       removable: true,
       sortable: true,
       movable: true,
       filterable: true,
+      tags: [],
     };
 
     it('returns empty list when there are no experiments', () => {
@@ -1028,25 +1029,25 @@ describe('common selectors', () => {
           type: ColumnHeaderType.HPARAM,
           name: 'conv_layers',
           displayName: 'Conv Layers',
-          ...expectedBooleanFlags,
+          ...expectedCommonProperties,
         },
         {
           type: ColumnHeaderType.HPARAM,
           name: 'conv_kernel_size',
           displayName: 'Conv Kernel Size',
-          ...expectedBooleanFlags,
+          ...expectedCommonProperties,
         },
         {
           type: ColumnHeaderType.HPARAM,
           name: 'dense_layers',
           displayName: 'Dense Layers',
-          ...expectedBooleanFlags,
+          ...expectedCommonProperties,
         },
         {
           type: ColumnHeaderType.HPARAM,
           name: 'dropout',
           displayName: 'Dropout',
-          ...expectedBooleanFlags,
+          ...expectedCommonProperties,
         },
       ]);
     });
@@ -1061,10 +1062,18 @@ describe('common selectors', () => {
           type: ColumnHeaderType.HPARAM,
           name: 'conv_layers',
           displayName: 'conv_layers',
-          ...expectedBooleanFlags,
+          ...expectedCommonProperties,
         },
       ]);
     });
+
+    it('sets differs tag', () => {
+      state.hparams!.dashboardHparamSpecs = [buildHparamSpec({differs: true})];
+
+      expect(selectors.getPotentialHparamColumns(state)[0].tags).toEqual([
+        'differs',
+      ]);
+    });
   });
 
   describe('getSelectableColumns', () => {

tensorboard/webapp/runs/data_source/runs_backend_types.ts

@@ -54,6 +54,7 @@ interface BaseHparamSpec {
   displayName: string;
   name: string;
   type: BackendHparamsValueType;
+  differs: boolean;
 }
 
 export interface IntervalDomainHparamSpec extends BaseHparamSpec {

tensorboard/webapp/widgets/data_table/column_selector_component.ng.html

@@ -48,6 +48,7 @@
       [matTooltipDisabled]="column.name.localeCompare(column.displayName, undefined, {sensitivity: 'accent'}) === 0"
     >
       {{column.displayName}}
+      <span *ngFor="let tag of column.tags" class="tag"> {{ tag }} </span>
     </button>
   </div>
 </div>

tensorboard/webapp/widgets/data_table/column_selector_component.scss

@@ -87,4 +87,13 @@ limitations under the License.
       }
     }
   }
+
+  .tag {
+    background-color: mat.get-color-from-palette($tb-primary, 500);
+    border-radius: 8px;
+    font-size: 12px;
+    font-style: italic;
+    font-weight: normal;
+    padding: 4px;
+  }
 }

tensorboard/webapp/widgets/data_table/column_selector_test.ts

@@ -212,6 +212,24 @@ describe('column selector', () => {
     expect(selectedColumn!.name).toEqual('runs');
   }));
 
+  it('renders tags', () => {
+    fixture.componentInstance.selectableColumns = [
+      {
+        type: ColumnHeaderType.HPARAM,
+        name: 'lr',
+        displayName: 'Learning Rate',
+        enabled: true,
+        tags: ['tag1', 'tag2'],
+      },
+    ];
+    fixture.detectChanges();
+
+    const tagEls = fixture.debugElement.queryAll(By.css('.tag'));
+    expect(tagEls.length).toEqual(2);
+    expect(tagEls[0].nativeElement.textContent.trim()).toEqual('tag1');
+    expect(tagEls[1].nativeElement.textContent.trim()).toEqual('tag2');
+  });
+
   it('renders number of loaded columns', fakeAsync(() => {
     fixture.componentInstance.numColumnsLoaded = 100;
     fixture.detectChanges();

tensorboard/webapp/widgets/data_table/types.ts

@@ -80,6 +80,7 @@ export declare interface ColumnHeader {
   name: string;
   displayName: string;
   enabled: boolean;
+  tags?: string[];
 
   // Default to false when not specified.
   removable?: boolean;