time series: deduplicate tags in the search (tensorflow#5249)

Image cards are a bit odd; unlike others, the same tuple of run and tag
can appear more than once and that is because it has the third
axis--sample. When there are more than one sample for a run+tag, the tag
filters previously showed the duplicate entry which this can
de-duplicates.

Author: stephanwlee

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

@@ -14,19 +14,17 @@ limitations under the License.
 ==============================================================================*/
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {Store} from '@ngrx/store';
-import {combineLatest, of} from 'rxjs';
-import {combineLatestWith, filter, map, switchMap} from 'rxjs/operators';
+import {Observable} from 'rxjs';
+import {combineLatestWith, filter, map} from 'rxjs/operators';
 
 import {State} from '../../../app_state';
 import {
   getMetricsTagFilter,
   getNonEmptyCardIdsWithMetadata,
 } from '../../../selectors';
 import {metricsTagFilterChanged} from '../../actions';
-import {compareTagNames} from '../utils';
-
-/** @typehack */ import * as _typeHackRxjs from 'rxjs';
 import {getMetricsFilteredPluginTypes} from '../../store';
+import {compareTagNames} from '../utils';
 
 @Component({
   selector: 'metrics-tag-filter',
@@ -43,9 +41,11 @@ import {getMetricsFilteredPluginTypes} from '../../store';
 export class MetricsFilterInputContainer {
   constructor(private readonly store: Store<State>) {}
 
-  readonly tagFilter$ = this.store.select(getMetricsTagFilter);
+  readonly tagFilter$: Observable<string> = this.store.select(
+    getMetricsTagFilter
+  );
 
-  readonly isTagFilterRegexValid$ = this.tagFilter$.pipe(
+  readonly isTagFilterRegexValid$: Observable<boolean> = this.tagFilter$.pipe(
     map((tagFilterString) => {
       try {
         // tslint:disable-next-line:no-unused-expression Check for validity of filter.
@@ -57,7 +57,7 @@ export class MetricsFilterInputContainer {
     })
   );
 
-  readonly completions$ = this.store
+  readonly completions$: Observable<string[]> = this.store
     .select(getNonEmptyCardIdsWithMetadata)
     .pipe(
       combineLatestWith(this.store.select(getMetricsFilteredPluginTypes)),
@@ -68,12 +68,10 @@ export class MetricsFilterInputContainer {
           })
           .map(({tag}) => tag);
       }),
-      switchMap((cardList) => {
-        return combineLatest([
-          of(cardList),
-          this.store.select(getMetricsTagFilter),
-        ]);
-      }),
+      // De-duplicate using Set since Image cards has a notion of Sample and
+      // the same `run` and `tag` can appear more than once.
+      map((tags) => [...new Set(tags)]),
+      combineLatestWith(this.store.select(getMetricsTagFilter)),
       map<[string[], string], [string[], RegExp | null]>(
         ([tags, tagFilter]) => {
           try {

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

@@ -198,6 +198,54 @@ describe('metrics filter input', () => {
       ).toEqual(['tagA', 'tagC/woof']);
     });
 
+    it('filters de-duplicating tags', () => {
+      store.overrideSelector(
+        selectors.getMetricsFilteredPluginTypes,
+        new Set<PluginType>([])
+      );
+      store.overrideSelector(selectors.getNonEmptyCardIdsWithMetadata, [
+        {
+          cardId: 'card1',
+          plugin: PluginType.SCALARS,
+          tag: 'tagA',
+          runId: null,
+        },
+        {
+          cardId: 'card1',
+          plugin: PluginType.IMAGES,
+          tag: 'tagB/Images',
+          runId: 'run1',
+          sample: 0,
+        },
+        {
+          cardId: 'card1',
+          plugin: PluginType.IMAGES,
+          tag: 'tagB/Images',
+          runId: 'run1',
+          sample: 1,
+        },
+        {
+          cardId: 'card1',
+          plugin: PluginType.IMAGES,
+          tag: 'tagB/Images',
+          runId: 'run1',
+          sample: 2,
+        },
+      ]);
+      store.overrideSelector(selectors.getMetricsTagFilter, '');
+      const fixture = TestBed.createComponent(MetricsFilterInputContainer);
+      fixture.detectChanges();
+
+      const input = fixture.debugElement.query(By.css('input'));
+      input.nativeElement.focus();
+      fixture.detectChanges();
+
+      const optionBefore = getAutocompleteOptions(overlayContainer);
+      expect(
+        optionBefore.map((option) => option.nativeElement.textContent)
+      ).toEqual(['tagA', 'tagB/Images']);
+    });
+
     it('filters by regex', () => {
       store.overrideSelector(selectors.getMetricsTagFilter, '[/I]m');
       const fixture = TestBed.createComponent(MetricsFilterInputContainer);