add three new tooltip sort orders

Author: rileyajones

tensorboard/webapp/metrics/BUILD

@@ -46,6 +46,7 @@ tf_ts_library(
     ],
     visibility = ["//tensorboard/webapp/metrics:__subpackages__"],
     deps = [
+        "//tensorboard/webapp/persistent_settings/_data_source:types",
         "//tensorboard/webapp/widgets/card_fob:types",
         "//tensorboard/webapp/widgets/histogram:types",
     ],

tensorboard/webapp/metrics/internal_types.ts

@@ -15,6 +15,7 @@ limitations under the License.
 import {TimeSelection} from '../widgets/card_fob/card_fob_types';
 import {HistogramMode} from '../widgets/histogram/histogram_types';
 
+export {TooltipSort} from '../persistent_settings/_data_source/types';
 export {HistogramMode, TimeSelection};
 
 export enum PluginType {
@@ -23,18 +24,6 @@ export enum PluginType {
   IMAGES = 'images',
 }
 
-// When adding a new value to the enum, please implement the deserializer on
-// data_source/metrics_data_source.ts.
-// When editing a value of the enum, please write a backward compatible
-// deserializer in data_source/metrics_data_source.ts.
-export enum TooltipSort {
-  DEFAULT = 'default',
-  ALPHABETICAL = 'alphabetical',
-  ASCENDING = 'ascending',
-  DESCENDING = 'descending',
-  NEAREST = 'nearest',
-}
-
 export enum XAxisType {
   STEP,
   RELATIVE,

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -42,7 +42,6 @@ import {
   CardUniqueInfo,
   SCALARS_SMOOTHING_MAX,
   SCALARS_SMOOTHING_MIN,
-  TooltipSort,
   URLDeserializedState,
 } from '../internal_types';
 import {groupCardIdWithMetdata} from '../utils';
@@ -427,22 +426,7 @@ const reducer = createReducer(
   on(globalSettingsLoaded, (state, {partialSettings}) => {
     const metricsSettings: Partial<MetricsSettings> = {};
     if (partialSettings.tooltipSortString) {
-      switch (partialSettings.tooltipSortString) {
-        case TooltipSort.DEFAULT:
-        case TooltipSort.ALPHABETICAL:
-          metricsSettings.tooltipSort = TooltipSort.ALPHABETICAL;
-          break;
-        case TooltipSort.ASCENDING:
-          metricsSettings.tooltipSort = TooltipSort.ASCENDING;
-          break;
-        case TooltipSort.DESCENDING:
-          metricsSettings.tooltipSort = TooltipSort.DESCENDING;
-          break;
-        case TooltipSort.NEAREST:
-          metricsSettings.tooltipSort = TooltipSort.NEAREST;
-          break;
-        default:
-      }
+      metricsSettings.tooltipSort = partialSettings.tooltipSortString;
     }
     if (typeof partialSettings.timeSeriesCardMinWidth === 'number') {
       metricsSettings.cardMinWidth = partialSettings.timeSeriesCardMinWidth;

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

@@ -119,7 +119,8 @@
   <ng-template
     #tooltip
     let-tooltipData="data"
-    let-cursorLoc="cursorLocationInDataCoord"
+    let-cursorLocationInDataCoord="cursorLocationInDataCoord"
+    let-cursorLocation="cursorLocation"
   >
     <table class="tooltip">
       <thead>
@@ -136,7 +137,7 @@
       <tbody>
         <ng-container
           *ngFor="
-            let datum of getCursorAwareTooltipData(tooltipData, cursorLoc);
+            let datum of getCursorAwareTooltipData(tooltipData, cursorLocationInDataCoord, cursorLocation);
             trackBy: trackByTooltipDatum
           "
         >

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

@@ -163,7 +163,8 @@ export class ScalarCardComponent<Downloader> {
 
   getCursorAwareTooltipData(
     tooltipData: TooltipDatum<ScalarCardSeriesMetadata>[],
-    cursorLoc: {x: number; y: number}
+    cursorLocationInDataCoord: {x: number; y: number},
+    cursorLocation: {x: number; y: number}
   ): ScalarTooltipDatum[] {
     const scalarTooltipData = tooltipData.map((datum) => {
       return {
@@ -172,8 +173,20 @@ export class ScalarCardComponent<Downloader> {
           ...datum.metadata,
           closest: false,
           distSqToCursor: Math.hypot(
-            datum.point.x - cursorLoc.x,
-            datum.point.y - cursorLoc.y
+            datum.point.x - cursorLocationInDataCoord.x,
+            datum.point.y - cursorLocationInDataCoord.y
+          ),
+          distSqToCursorPixels: Math.hypot(
+            datum.point.x - cursorLocation.x,
+            datum.point.y - cursorLocation.y
+          ),
+          distSqToCursorX: Math.hypot(
+            datum.point.x - cursorLocationInDataCoord.x,
+            0
+          ),
+          distSqToCursorY: Math.hypot(
+            0,
+            datum.point.y - cursorLocationInDataCoord.y
           ),
         },
       };
@@ -201,6 +214,20 @@ export class ScalarCardComponent<Downloader> {
         return scalarTooltipData.sort((a, b) => {
           return a.metadata.distSqToCursor - b.metadata.distSqToCursor;
         });
+      case TooltipSort.NEAREST_PIXEL:
+        return scalarTooltipData.sort((a, b) => {
+          return (
+            a.metadata.distSqToCursorPixels - b.metadata.distSqToCursorPixels
+          );
+        });
+      case TooltipSort.NEAREST_X:
+        return scalarTooltipData.sort((a, b) => {
+          return a.metadata.distSqToCursorX - b.metadata.distSqToCursorX;
+        });
+      case TooltipSort.NEAREST_Y:
+        return scalarTooltipData.sort((a, b) => {
+          return a.metadata.distSqToCursorY - b.metadata.distSqToCursorY;
+        });
       case TooltipSort.DEFAULT:
       case TooltipSort.ALPHABETICAL:
         return scalarTooltipData.sort((a, b) => {

tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts

@@ -87,6 +87,9 @@ export class SettingsViewComponent {
     {value: TooltipSort.ASCENDING, displayText: 'Ascending'},
     {value: TooltipSort.DESCENDING, displayText: 'Descending'},
     {value: TooltipSort.NEAREST, displayText: 'Nearest'},
+    {value: TooltipSort.NEAREST_PIXEL, displayText: 'Nearest Pixel'},
+    {value: TooltipSort.NEAREST_X, displayText: 'Nearest X'},
+    {value: TooltipSort.NEAREST_Y, displayText: 'Nearest Y'},
   ];
   @Input() tooltipSort!: TooltipSort;
   @Output() tooltipSortChanged = new EventEmitter<TooltipSort>();

tensorboard/webapp/persistent_settings/_data_source/types.ts

@@ -19,6 +19,21 @@ export enum ThemeValue {
   DARK = 'dark',
 }
 
+// When adding a new value to the enum, please implement the deserializer on
+// data_source/metrics_data_source.ts.
+// When editing a value of the enum, please write a backward compatible
+// deserializer in tensorboard/webapp/metrics/store/metrics_reducers.ts
+export enum TooltipSort {
+  DEFAULT = 'default',
+  ALPHABETICAL = 'alphabetical',
+  ASCENDING = 'ascending',
+  DESCENDING = 'descending',
+  NEAREST = 'nearest',
+  NEAREST_PIXEL = 'nearest_pixel',
+  NEAREST_X = 'nearest_x',
+  NEAREST_Y = 'nearest_Y',
+}
+
 /**
  * Global settings that the backend remembers. `declare`d so properties do not
  * get mangled or mangled differently when a version compiler changes.
@@ -28,7 +43,7 @@ export enum ThemeValue {
  */
 export declare interface BackendSettings {
   scalarSmoothing?: number;
-  tooltipSort?: string;
+  tooltipSort?: TooltipSort;
   ignoreOutliers?: boolean;
   autoReload?: boolean;
   autoReloadPeriodInMs?: number;
@@ -50,7 +65,7 @@ export declare interface BackendSettings {
  */
 export interface PersistableSettings {
   scalarSmoothing?: number;
-  tooltipSortString?: string;
+  tooltipSortString?: TooltipSort;
   ignoreOutliers?: boolean;
   autoReload?: boolean;
   autoReloadPeriodInMs?: number;

tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ng.html

@@ -67,7 +67,8 @@
       [ngTemplateOutlet]="tooltipTemplate ? tooltipTemplate : defaultTooltip"
       [ngTemplateOutletContext]="{
         data: cursoredData,
-        cursorLocationInDataCoord: cursorLocationInDataCoord
+        cursorLocationInDataCoord: cursorLocationInDataCoord,
+        cursorLocation: cursorLocation
       }"
     ></ng-container>
   </div>

tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ts

@@ -202,6 +202,7 @@ export class LineChartInteractiveViewComponent
   ];
 
   cursorLocationInDataCoord: {x: number; y: number} | null = null;
+  cursorLocation: {x: number; y: number} | null = null;
   cursoredData: TooltipDatum[] = [];
   tooltipDisplayAttached: boolean = false;
 
@@ -522,6 +523,10 @@ export class LineChartInteractiveViewComponent
       x: this.getDataX(event.offsetX),
       y: this.getDataY(event.offsetY),
     };
+    this.cursorLocation = {
+      x: event.offsetX,
+      y: event.offsetY,
+    };
     this.updateCursoredDataAndTooltipVisibility();
   }