timeseries: show empty match warning text

tensorboard/webapp/metrics/views/_common.scss

@@ -62,3 +62,11 @@ $metrics-min-card-height: 320px;
   @include tb-theme-foreground-prop(color, secondary-text);
   white-space: nowrap;
 }
+
+@mixin metrics-empty-message {
+  @include tb-theme-foreground-prop(color, secondary-text);
+  font-size: 13px;
+  font-style: italic;
+  padding: 16px;
+  text-align: center;
+}

tensorboard/webapp/metrics/views/main_view/BUILD

@@ -47,13 +47,30 @@ tf_sass_binary(
     ],
 )
 
+tf_ts_library(
+    name = "common_selectors",
+    srcs = ["common_selectors.ts"],
+    deps = [
+        "//tensorboard/webapp:app_state",
+        "//tensorboard/webapp:selectors",
+        "//tensorboard/webapp/metrics/data_source",
+        "//tensorboard/webapp/metrics/store",
+        "//tensorboard/webapp/metrics/views:types",
+        "//tensorboard/webapp/metrics/views:utils",
+        "//tensorboard/webapp/util:types",
+        "@npm//@ngrx/store",
+    ],
+)
+
 tf_ng_module(
     name = "main_view",
     srcs = [
         "card_grid_component.ts",
         "card_grid_container.ts",
         "card_groups_component.ts",
         "card_groups_container.ts",
+        "empty_tag_match_message_component.ts",
+        "empty_tag_match_message_container.ts",
         "filter_input_component.ts",
         "filter_input_container.ts",
         "filtered_view_component.ts",
@@ -76,6 +93,7 @@ tf_ng_module(
         ":pinned_view_component_styles",
     ],
     deps = [
+        ":common_selectors",
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
         "//tensorboard/webapp/angular:expect_angular_cdk_scrolling",

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

@@ -13,33 +13,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
-import {createSelector, Store} from '@ngrx/store';
+import {Store} from '@ngrx/store';
 import {Observable} from 'rxjs';
 import {combineLatestWith, map} from 'rxjs/operators';
 
 import {State} from '../../../app_state';
-import {getCurrentRouteRunSelection} from '../../../selectors';
-import {isSingleRunPlugin} from '../../data_source';
-import {
-  getMetricsFilteredPluginTypes,
-  getNonEmptyCardIdsWithMetadata,
-} from '../../store';
+import {getMetricsFilteredPluginTypes} from '../../store';
 import {CardObserver} from '../card_renderer/card_lazy_loader';
 import {CardGroup} from '../metrics_view_types';
 import {groupCardIdWithMetdata} from '../utils';
-
-const getRenderableCardIdsWithMetadata = createSelector(
-  getNonEmptyCardIdsWithMetadata,
-  getCurrentRouteRunSelection,
-  (cardList, runSelectionMap) => {
-    return cardList.filter((card) => {
-      if (!isSingleRunPlugin(card.plugin)) {
-        return true;
-      }
-      return Boolean(runSelectionMap && runSelectionMap.get(card.runId!));
-    });
-  }
-);
+import {getSortedRenderableCardIdsWithMetadata} from './common_selectors';
 
 @Component({
   selector: 'metrics-card-groups',
@@ -57,7 +40,7 @@ export class CardGroupsContainer {
   constructor(private readonly store: Store<State>) {}
 
   readonly cardGroups$: Observable<CardGroup[]> = this.store
-    .select(getRenderableCardIdsWithMetadata)
+    .select(getSortedRenderableCardIdsWithMetadata)
     .pipe(
       combineLatestWith(this.store.select(getMetricsFilteredPluginTypes)),
       map(([cardList, filteredPlugins]) => {

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

@@ -0,0 +1,51 @@
+/* Copyright 2021 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {createSelector} from '@ngrx/store';
+
+import {State} from '../../../app_state';
+import {getCurrentRouteRunSelection} from '../../../selectors';
+import {DeepReadonly} from '../../../util/types';
+import {isSingleRunPlugin} from '../../data_source';
+import {getNonEmptyCardIdsWithMetadata} from '../../store';
+import {CardIdWithMetadata} from '../metrics_view_types';
+import {compareTagNames} from '../utils';
+
+const getRenderableCardIdsWithMetadata = createSelector<
+  State,
+  readonly DeepReadonly<CardIdWithMetadata>[],
+  Map<string, boolean> | null,
+  DeepReadonly<CardIdWithMetadata>[]
+>(
+  getNonEmptyCardIdsWithMetadata,
+  getCurrentRouteRunSelection,
+  (cardList, runSelectionMap) => {
+    return cardList.filter((card) => {
+      if (!isSingleRunPlugin(card.plugin)) {
+        return true;
+      }
+      return Boolean(runSelectionMap && runSelectionMap.get(card.runId!));
+    });
+  }
+);
+
+export const getSortedRenderableCardIdsWithMetadata = createSelector<
+  State,
+  DeepReadonly<CardIdWithMetadata>[],
+  DeepReadonly<CardIdWithMetadata>[]
+>(getRenderableCardIdsWithMetadata, (cardList) => {
+  return cardList.sort((cardA, cardB) => {
+    return compareTagNames(cardA.tag, cardB.tag);
+  });
+});

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

@@ -0,0 +1,74 @@
+/* Copyright 2021 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+
+import {PluginType} from '../../data_source';
+
+declare namespace Intl {
+  class ListFormat {
+    constructor(
+      locale?: string,
+      options?: {
+        localeMatcher?: 'lookup' | 'best fit';
+        style?: 'long' | 'short' | 'narrow';
+        type?: 'unit' | 'conjunction' | 'disjunction';
+      }
+    );
+    format: (items: string[]) => string;
+  }
+}
+
+@Component({
+  selector: 'metrics-empty-tag-match-component',
+  template: `No cards matches tag filter
+    <code>/{{ tagFilterRegex }}/</code> among {{ tagCounts | number }} tags<span
+      *ngIf="pluginTypes.size"
+    >
+      and {{ getPluginTypeFilterString(pluginTypes) }} visualization
+      filter</span
+    >.`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EmptyTagMatchMessageComponent {
+  readonly PluginType = PluginType;
+  private readonly listFormatter = new Intl.ListFormat(undefined, {
+    style: 'long',
+    type: 'disjunction',
+  });
+
+  @Input() pluginTypes!: Set<PluginType>;
+  @Input() tagFilterRegex!: string;
+  @Input() tagCounts!: number;
+
+  getPluginTypeFilterString(pluginTypes: Set<PluginType>): string {
+    const humanReadableTypes = [...pluginTypes].map((type) => {
+      switch (type) {
+        case PluginType.SCALARS:
+          return 'scalar';
+        case PluginType.IMAGES:
+          return 'image';
+        case PluginType.HISTOGRAMS:
+          return 'histogram';
+        default:
+          const _: never = type;
+          throw new RangeError(
+            `Please implement human readable name for plugin type: ${type}`
+          );
+      }
+    });
+
+    return this.listFormatter.format(humanReadableTypes);
+  }
+}

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

@@ -0,0 +1,55 @@
+/* Copyright 2021 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {Store} from '@ngrx/store';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+import {State} from '../../../app_state';
+import {PluginType} from '../../data_source';
+import {getMetricsFilteredPluginTypes, getMetricsTagFilter} from '../../store';
+import {getSortedRenderableCardIdsWithMetadata} from './common_selectors';
+
+/**
+ * Warning message that displays when no tags do not match filter query.
+ */
+@Component({
+  selector: 'metrics-empty-tag-match',
+  template: `
+    <metrics-empty-tag-match-component
+      [pluginTypes]="pluginTypes$ | async"
+      [tagFilterRegex]="tagFilterRegex$ | async"
+      [tagCounts]="tagCounts$ | async"
+    ></metrics-empty-tag-match-component>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EmptyTagMatchMessageContainer {
+  constructor(private readonly store: Store<State>) {}
+
+  readonly pluginTypes$: Observable<Set<PluginType>> = this.store.select(
+    getMetricsFilteredPluginTypes
+  );
+  readonly tagFilterRegex$: Observable<string> = this.store.select(
+    getMetricsTagFilter
+  );
+  readonly tagCounts$: Observable<number> = this.store
+    .select(getSortedRenderableCardIdsWithMetadata)
+    .pipe(
+      map((cardList) => {
+        return new Set(cardList.map(({tag}) => tag)).size;
+      })
+    );
+}

tensorboard/webapp/metrics/views/main_view/filtered_view_component.scss

@@ -32,3 +32,8 @@ limitations under the License.
   @include metrics-card-group-count-text;
   margin-left: 6px;
 }
+
+metrics-empty-tag-match {
+  @include metrics-empty-message;
+  display: block;
+}

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

@@ -30,6 +30,10 @@ import {CardIdWithMetadata} from '../metrics_view_types';
         >
       </span>
     </div>
+    <metrics-empty-tag-match
+      *ngIf="isEmptyMatch"
+      class="warn"
+    ></metrics-empty-tag-match>
     <metrics-card-grid
       [cardIdsWithMetadata]="cardIdsWithMetadata"
       [cardObserver]="cardObserver"
@@ -39,6 +43,7 @@ import {CardIdWithMetadata} from '../metrics_view_types';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FilteredViewComponent {
+  @Input() isEmptyMatch!: boolean;
   @Input() cardObserver!: CardObserver;
   @Input() cardIdsWithMetadata!: CardIdWithMetadata[];
 }