feat: hold traces tooltip on hover

hypertrace · Sep 8, 2023 · 1fe1886 · 1fe1886
1 parent 04963be
commit 1fe1886
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/projects/observability/src/shared/components/cartesian/d3/chart/cartesian-chart.ts b/projects/observability/src/shared/components/cartesian/d3/chart/cartesian-chart.ts
@@ -36,6 +36,7 @@ import { CartesianIntervalData } from '../legend/cartesian-interval-control.comp
 import { CartesianLegend } from '../legend/cartesian-legend';
 import { ScaleBounds } from '../scale/cartesian-scale';
 import { CartesianScaleBuilder } from '../scale/cartesian-scale-builder';
+import { debounceTime, tap } from 'rxjs/operators';
 
 export class DefaultCartesianChart<TData> implements CartesianChart<TData> {
   public static DATA_SERIES_CLASS: string = 'data-series';
@@ -608,16 +609,23 @@ export class DefaultCartesianChart<TData> implements CartesianChart<TData> {
   }
 
   private onMouseLeave(): void {
-    if (this.tooltip) {
-      this.tooltip.hide();
-    }
-
-    this.eventListeners.forEach(listener => {
-      if (listener.event === ChartEvent.MouseLeave) {
-        listener.onEvent();
-      }
-    });
-
-    this.hideCrosshair();
+    this.tooltip?.hovered$
+      .pipe(
+        debounceTime(300),
+        tap(onHoverTooltip => {
+          if (!onHoverTooltip) {
+            this.tooltip?.hide();
+
+            this.eventListeners.forEach(listener => {
+              if (listener.event === ChartEvent.MouseLeave) {
+                listener.onEvent();
+              }
+            });
+
+            this.hideCrosshair();
+          }
+        })
+      )
+      .subscribe();
   }
 }
diff --git a/projects/observability/src/shared/components/utils/chart-tooltip/chart-tooltip-popover.ts b/projects/observability/src/shared/components/utils/chart-tooltip/chart-tooltip-popover.ts
@@ -1,14 +1,17 @@
 import { PopoverPositionType, PopoverRef } from '@hypertrace/components';
-import { Observer } from 'rxjs';
+import { Observable, Observer } from 'rxjs';
 import { MouseLocationData } from '../mouse-tracking/mouse-tracking';
 
 export class ChartTooltipPopover<TData, TContext> implements ChartTooltipRef<TData, TContext> {
   private boundElement?: Element;
+  public readonly hovered$: Observable<boolean>;
 
   public constructor(
     private readonly popoverRef: PopoverRef,
     private readonly dataObserver: Observer<MouseLocationData<TData, TContext>[]>
-  ) {}
+  ) {
+    this.hovered$ = popoverRef.hovered$;
+  }
 
   public showWithData(element: Element, data: MouseLocationData<TData, TContext>[]): void {
     this.updatePositionStrategyIfNeeded(element);
@@ -30,8 +33,8 @@ export class ChartTooltipPopover<TData, TContext> implements ChartTooltipRef<TDa
       this.popoverRef.updatePositionStrategy({
         type: PopoverPositionType.FollowMouse,
         boundingElement: element,
-        offsetX: 20,
-        offsetY: 30
+        offsetX: 0,
+        offsetY: 0
       });
       this.boundElement = element;
     }
@@ -42,4 +45,5 @@ export interface ChartTooltipRef<TData, TContext = unknown> {
   showWithData(relativeTo: Element, data: MouseLocationData<TData, TContext>[]): void;
   hide(): void;
   destroy(): void;
+  hovered$: Observable<boolean>;
 }