linked time: rename linked time fob to card fob (#5732)

We want to decouple fob from linked time to be reused it in "Step Selector", which is data table in scalar card and displaying the value of step selected by the fob. This is the first step of rename all linked-time related fob and components to be just fob. We now use fob on the cards (to be specific, scalar card and histogram card). Therefore rename it to be "card fob" to make it less generic.

tensorboard/plugins/histogram/tf_histogram_dashboard/BUILD

@@ -43,7 +43,6 @@ tf_ts_library(
         "//tensorboard/webapp/angular:expect_angular_core_testing",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/widgets/intersection_observer:intersection_observer_testing",
-        "//tensorboard/webapp/widgets/linked_time_fob",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
         "@npm//@types/jasmine",

tensorboard/webapp/BUILD

@@ -331,6 +331,7 @@ tf_ng_web_test_suite(
         "//tensorboard/webapp/webapp_data_source:webapp_data_source_test_lib",
         "//tensorboard/webapp/widgets:resize_detector_test",
         "//tensorboard/webapp/widgets:resize_detector_testing",
+        "//tensorboard/webapp/widgets/card_fob:card_fob_test",
         "//tensorboard/webapp/widgets/content_wrapping_input:content_wrapping_input_tests",
         "//tensorboard/webapp/widgets/dropdown:dropdown_tests",
         "//tensorboard/webapp/widgets/experiment_alias:experiment_alias_test",
@@ -343,7 +344,6 @@ tf_ng_web_test_suite(
         "//tensorboard/webapp/widgets/line_chart_v2/lib/renderer:renderer_test",
         "//tensorboard/webapp/widgets/line_chart_v2/lib/worker:worker_test",
         "//tensorboard/webapp/widgets/line_chart_v2/sub_view:sub_view_tests",
-        "//tensorboard/webapp/widgets/linked_time_fob:linked_time_fob_test",
         "//tensorboard/webapp/widgets/markdown_renderer:markdown_renderer_tests",
         "//tensorboard/webapp/widgets/range_input:range_input_tests",
         "//tensorboard/webapp/widgets/source_code:source_code_container_test_lib",

tensorboard/webapp/metrics/BUILD

@@ -46,8 +46,8 @@ tf_ts_library(
     ],
     visibility = ["//tensorboard/webapp/metrics:__subpackages__"],
     deps = [
+        "//tensorboard/webapp/widgets/card_fob:types",
         "//tensorboard/webapp/widgets/histogram:types",
-        "//tensorboard/webapp/widgets/linked_time_fob:types",
     ],
 )
 

tensorboard/webapp/metrics/internal_types.ts

@@ -12,8 +12,8 @@ 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 {LinkedTime} from '../widgets/card_fob/card_fob_types';
 import {HistogramMode} from '../widgets/histogram/histogram_types';
-import {LinkedTime} from '../widgets/linked_time_fob/linked_time_types';
 
 export {HistogramMode, LinkedTime};
 

tensorboard/webapp/metrics/views/card_renderer/BUILD

@@ -259,7 +259,7 @@ tf_ng_module(
     srcs = [
         "scalar_card_component.ts",
         "scalar_card_container.ts",
-        "scalar_card_linked_time_fob_controller.ts",
+        "scalar_card_fob_controller.ts",
         "scalar_card_module.ts",
     ],
     assets = [
@@ -293,15 +293,15 @@ tf_ng_module(
         "//tensorboard/webapp/types:ui",
         "//tensorboard/webapp/util:value_formatter",
         "//tensorboard/webapp/widgets:resize_detector",
+        "//tensorboard/webapp/widgets/card_fob",
+        "//tensorboard/webapp/widgets/card_fob:types",
         "//tensorboard/webapp/widgets/data_table",
         "//tensorboard/webapp/widgets/experiment_alias",
         "//tensorboard/webapp/widgets/intersection_observer",
         "//tensorboard/webapp/widgets/line_chart_v2",
         "//tensorboard/webapp/widgets/line_chart_v2:line_chart_utils",
         "//tensorboard/webapp/widgets/line_chart_v2/lib:formatter",
         "//tensorboard/webapp/widgets/line_chart_v2/lib:public_types",
-        "//tensorboard/webapp/widgets/linked_time_fob",
-        "//tensorboard/webapp/widgets/linked_time_fob:types",
         "//tensorboard/webapp/widgets/text:truncated_path",
         "@npm//@angular/common",
         "@npm//@angular/core",
@@ -321,7 +321,7 @@ tf_ts_library(
         "histogram_card_test.ts",
         "image_card_test.ts",
         "run_name_test.ts",
-        "scalar_card_linked_time_fob_test.ts",
+        "scalar_card_fob_test.ts",
         "scalar_card_test.ts",
         "utils_test.ts",
     ],
@@ -361,14 +361,14 @@ tf_ts_library(
         "//tensorboard/webapp/types:ui",
         "//tensorboard/webapp/util:dom",
         "//tensorboard/webapp/widgets:resize_detector_testing",
+        "//tensorboard/webapp/widgets/card_fob",
+        "//tensorboard/webapp/widgets/card_fob:types",
         "//tensorboard/webapp/widgets/experiment_alias",
         "//tensorboard/webapp/widgets/histogram:types",
         "//tensorboard/webapp/widgets/intersection_observer:intersection_observer_testing",
         "//tensorboard/webapp/widgets/line_chart_v2",
         "//tensorboard/webapp/widgets/line_chart_v2/lib:formatter",
         "//tensorboard/webapp/widgets/line_chart_v2/lib:scale",
-        "//tensorboard/webapp/widgets/linked_time_fob",
-        "//tensorboard/webapp/widgets/linked_time_fob:types",
         "//tensorboard/webapp/widgets/text:truncated_path",
         "@npm//@angular/core",
         "@npm//@angular/forms",

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html

@@ -219,13 +219,13 @@
   let-xScale="xScale"
 >
   <ng-container *ngIf="selectedTime">
-    <scalar-card-linked-time-fob-controller
+    <scalar-card-fob-controller
       [linkedTime]="getLinkedTime()"
       [scale]="xScale"
       [minMax]="viewExtent.x"
       [axisSize]="domDim.width"
       (onSelectTimeChanged)="onSelectTimeChanged.emit($event)"
       (onSelectTimeToggle)="onSelectTimeToggle.emit()"
-    ></scalar-card-linked-time-fob-controller>
+    ></scalar-card-fob-controller>
   </ng-container>
 </ng-template>

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts

@@ -24,6 +24,7 @@ import {
 } from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
 import {DataLoadState} from '../../../types/data';
+import {LinkedTime} from '../../../widgets/card_fob/card_fob_types';
 import {
   Formatter,
   intlNumberFormatter,
@@ -37,7 +38,6 @@ import {
   ScaleType,
   TooltipDatum,
 } from '../../../widgets/line_chart_v2/types';
-import {LinkedTime} from '../../../widgets/linked_time_fob/linked_time_types';
 import {TooltipSort, XAxisType} from '../../types';
 import {
   ScalarCardDataSeries,

tensorboard/webapp/metrics/views/card_renderer/scalar_card_container.ts

@@ -52,9 +52,9 @@ import {
   getRunColorMap,
 } from '../../../selectors';
 import {DataLoadState} from '../../../types/data';
+import {LinkedTime} from '../../../widgets/card_fob/card_fob_types';
 import {classicSmoothing} from '../../../widgets/line_chart_v2/data_transformer';
 import {ScaleType} from '../../../widgets/line_chart_v2/types';
-import {LinkedTime} from '../../../widgets/linked_time_fob/linked_time_types';
 import {selectTimeEnableToggled, timeSelectionChanged} from '../../actions';
 import {PluginType, ScalarStepDatum} from '../../data_source';
 import {

tensorboard/webapp/metrics/views/card_renderer/scalar_card_linked_time_fob_controller.ts → tensorboard/webapp/metrics/views/card_renderer/scalar_card_fob_controller.ts

@@ -11,28 +11,28 @@ limitations under the License.
 ==============================================================================*/
 
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {Scale} from '../../../widgets/line_chart_v2/lib/public_types';
 import {
   AxisDirection,
-  FobCardAdapter,
+  CardFobAdapter,
   LinkedTime,
-} from '../../../widgets/linked_time_fob/linked_time_types';
+} from '../../../widgets/card_fob/card_fob_types';
+import {Scale} from '../../../widgets/line_chart_v2/lib/public_types';
 
 @Component({
-  selector: 'scalar-card-linked-time-fob-controller',
+  selector: 'scalar-card-fob-controller',
   template: `
-    <linked-time-fob-controller
+    <card-fob-controller
       [axisDirection]="axisDirection"
       [linkedTime]="linkedTime"
       [cardAdapter]="this"
       [showExtendedLine]="true"
       (onSelectTimeChanged)="onSelectTimeChanged.emit($event)"
       (onSelectTimeToggle)="onSelectTimeToggle.emit($event)"
-    ></linked-time-fob-controller>
+    ></card-fob-controller>
   `,
   styleUrls: ['scalar_card_linked_time_fob_controller.css'],
 })
-export class ScalarCardLinkedTimeFobController implements FobCardAdapter {
+export class ScalarCardFobController implements CardFobAdapter {
   @Input() linkedTime!: LinkedTime;
   @Input() scale!: Scale;
   @Input() minMax!: [number, number];

tensorboard/webapp/metrics/views/card_renderer/scalar_card_linked_time_fob_test.ts → tensorboard/webapp/metrics/views/card_renderer/scalar_card_fob_test.ts

@@ -12,23 +12,20 @@ limitations under the License.
 
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {CardFobControllerComponent} from '../../../widgets/card_fob/card_fob_controller_component';
+import {LinkedTime} from '../../../widgets/card_fob/card_fob_types';
 import {LinearScale} from '../../../widgets/line_chart_v2/lib/scale';
-import {LinkedTimeFobControllerComponent} from '../../../widgets/linked_time_fob/linked_time_fob_controller_component';
-import {LinkedTime} from '../../../widgets/linked_time_fob/linked_time_types';
-import {ScalarCardLinkedTimeFobController} from './scalar_card_linked_time_fob_controller';
+import {ScalarCardFobController} from './scalar_card_fob_controller';
 
 const SCALE_RATIO = 10;
 
-describe('ScalarLinkedTimeFobController', () => {
+describe('ScalarFobController', () => {
   let forwardScaleSpy: jasmine.Spy;
   let reverseScaleSpy: jasmine.Spy;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        ScalarCardLinkedTimeFobController,
-        LinkedTimeFobControllerComponent,
-      ],
+      declarations: [ScalarCardFobController, CardFobControllerComponent],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   });
@@ -37,8 +34,8 @@ describe('ScalarLinkedTimeFobController', () => {
     linkedTime?: LinkedTime;
     minMax?: [number, number];
     axisSize?: number;
-  }): ComponentFixture<ScalarCardLinkedTimeFobController> {
-    const fixture = TestBed.createComponent(ScalarCardLinkedTimeFobController);
+  }): ComponentFixture<ScalarCardFobController> {
+    const fixture = TestBed.createComponent(ScalarCardFobController);
     fixture.componentInstance.linkedTime = input.linkedTime ?? {
       start: {step: 200},
       end: null,

tensorboard/webapp/metrics/views/card_renderer/scalar_card_module.ts

@@ -18,34 +18,34 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {CardFobModule} from '../../../widgets/card_fob/card_fob_module';
 import {DataTableModule} from '../../../widgets/data_table/data_table_module';
 import {ExperimentAliasModule} from '../../../widgets/experiment_alias/experiment_alias_module';
 import {IntersectionObserverModule} from '../../../widgets/intersection_observer/intersection_observer_module';
 import {LineChartModule as LineChartV2Module} from '../../../widgets/line_chart_v2/line_chart_module';
-import {LinkedTimeFobModule} from '../../../widgets/linked_time_fob/linked_time_fob_module';
 import {ResizeDetectorModule} from '../../../widgets/resize_detector_module';
 import {TruncatedPathModule} from '../../../widgets/text/truncated_path_module';
 import {DataDownloadModule} from './data_download_module';
 import {ScalarCardComponent} from './scalar_card_component';
 import {ScalarCardContainer} from './scalar_card_container';
-import {ScalarCardLinkedTimeFobController} from './scalar_card_linked_time_fob_controller';
+import {ScalarCardFobController} from './scalar_card_fob_controller';
 import {VisSelectedTimeWarningModule} from './vis_selected_time_warning_module';
 
 @NgModule({
   declarations: [
     ScalarCardContainer,
     ScalarCardComponent,
-    ScalarCardLinkedTimeFobController,
+    ScalarCardFobController,
   ],
   exports: [ScalarCardContainer],
   imports: [
+    CardFobModule,
     CommonModule,
     DataDownloadModule,
     DataTableModule,
     ExperimentAliasModule,
     IntersectionObserverModule,
     LineChartV2Module,
-    LinkedTimeFobModule,
     MatButtonModule,
     MatIconModule,
     MatMenuModule,

tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts

@@ -45,6 +45,12 @@ import {buildRun} from '../../../runs/store/testing';
 import * as selectors from '../../../selectors';
 import {MatIconTestingModule} from '../../../testing/mat_icon_module';
 import {DataLoadState} from '../../../types/data';
+import {CardFobComponent} from '../../../widgets/card_fob/card_fob_component';
+import {
+  CardFobControllerComponent,
+  Fob,
+} from '../../../widgets/card_fob/card_fob_controller_component';
+import {CardFobModule} from '../../../widgets/card_fob/card_fob_module';
 import {ExperimentAliasModule} from '../../../widgets/experiment_alias/experiment_alias_module';
 import {IntersectionObserverTestingModule} from '../../../widgets/intersection_observer/intersection_observer_testing_module';
 import {
@@ -59,12 +65,6 @@ import {
   ScaleType,
   TooltipDatum,
 } from '../../../widgets/line_chart_v2/types';
-import {LinkedTimeFobComponent} from '../../../widgets/linked_time_fob/linked_time_fob_component';
-import {
-  Fob,
-  LinkedTimeFobControllerComponent,
-} from '../../../widgets/linked_time_fob/linked_time_fob_controller_component';
-import {LinkedTimeFobModule} from '../../../widgets/linked_time_fob/linked_time_fob_module';
 import {ResizeDetectorTestingModule} from '../../../widgets/resize_detector_testing_module';
 import {TruncatedPathModule} from '../../../widgets/text/truncated_path_module';
 import {selectTimeEnableToggled, timeSelectionChanged} from '../../actions';
@@ -79,7 +79,7 @@ import {
 import {TooltipSort, XAxisType} from '../../types';
 import {ScalarCardComponent} from './scalar_card_component';
 import {ScalarCardContainer} from './scalar_card_container';
-import {ScalarCardLinkedTimeFobController} from './scalar_card_linked_time_fob_controller';
+import {ScalarCardFobController} from './scalar_card_fob_controller';
 import {
   ScalarCardPoint,
   ScalarCardSeriesMetadata,
@@ -265,7 +265,7 @@ describe('scalar card', () => {
       imports: [
         ExperimentAliasModule,
         IntersectionObserverTestingModule,
-        LinkedTimeFobModule,
+        CardFobModule,
         MatDialogModule,
         MatIconTestingModule,
         MatMenuModule,
@@ -278,7 +278,7 @@ describe('scalar card', () => {
       declarations: [
         ScalarCardContainer,
         ScalarCardComponent,
-        ScalarCardLinkedTimeFobController,
+        ScalarCardFobController,
         TestableDataDownload,
         TestableLineChart,
       ],
@@ -2143,7 +2143,7 @@ describe('scalar card', () => {
         fixture.detectChanges();
 
         const fobs = fixture.debugElement.queryAll(
-          By.directive(LinkedTimeFobComponent)
+          By.directive(CardFobComponent)
         );
         expect(
           fobs[0].query(By.css('span')).nativeElement.textContent.trim()
@@ -2171,7 +2171,7 @@ describe('scalar card', () => {
         fixture.detectChanges();
 
         const fobs = fixture.debugElement.queryAll(
-          By.directive(LinkedTimeFobComponent)
+          By.directive(CardFobComponent)
         );
         expect(
           fobs[0].query(By.css('span')).nativeElement.textContent.trim()
@@ -2208,7 +2208,7 @@ describe('scalar card', () => {
         const fixture = createComponent('card1');
         fixture.detectChanges();
         const testController = fixture.debugElement.query(
-          By.directive(LinkedTimeFobControllerComponent)
+          By.directive(CardFobControllerComponent)
         ).componentInstance;
         const controllerStartPosition =
           testController.root.nativeElement.getBoundingClientRect().left;
@@ -2238,7 +2238,7 @@ describe('scalar card', () => {
         const fixture = createComponent('card1');
         fixture.detectChanges();
         const fobComponent = fixture.debugElement.query(
-          By.directive(LinkedTimeFobComponent)
+          By.directive(CardFobComponent)
         ).componentInstance;
         fobComponent.fobRemoved.emit();