fix: modify bounding element

Author: Patricio Albizu

projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts

@@ -20,12 +20,12 @@ export class TopologyTooltipPopover implements TopologyTooltip {
     private readonly injector: Injector,
     private readonly popoverService: PopoverService
   ) {
-    this.popoverSubject = new BehaviorSubject(this.buildPopover(false));
+    this.popoverSubject = new BehaviorSubject(this.buildPopover(null, false));
     this.hidden$ = this.popoverSubject.pipe(switchMap(popover => merge(popover.hidden$, popover.closed$)));
   }
 
   public showWithNodeData(node: TopologyNode, options: TopologyTooltipOptions = {}): void {
-    this.rebuildPopoverIfNeeded(options);
+    this.rebuildPopoverIfNeeded(node, options);
     this.dataSubject.next({
       type: 'node',
       node: node,
@@ -35,7 +35,7 @@ export class TopologyTooltipPopover implements TopologyTooltip {
   }
 
   public showWithEdgeData(edge: TopologyEdge, options: TopologyTooltipOptions = {}): void {
-    this.rebuildPopoverIfNeeded(options);
+    this.rebuildPopoverIfNeeded(edge, options);
     this.dataSubject.next({
       type: 'edge',
       edge: edge,
@@ -54,17 +54,17 @@ export class TopologyTooltipPopover implements TopologyTooltip {
     this.popoverSubject.complete();
   }
 
-  private rebuildPopoverIfNeeded(options: TopologyTooltipOptions): void {
+  private rebuildPopoverIfNeeded(node: TopologyNode | TopologyEdge, options: TopologyTooltipOptions): void {
     const modal = !!options.modal;
     if (modal === this.popover.hasBackdrop()) {
       return;
     }
 
     this.popover.close(); // Close existing popover
-    this.popoverSubject.next(this.buildPopover(modal));
+    this.popoverSubject.next(this.buildPopover(node, modal));
   }
 
-  private buildPopover(modal: boolean): PopoverRef {
+  private buildPopover(node: any, modal: boolean): PopoverRef {
     const popover = this.popoverService.drawPopover({
       componentOrTemplate: this.tooltipDefinition.class,
       position: {
@@ -81,11 +81,27 @@ export class TopologyTooltipPopover implements TopologyTooltip {
 
     popover.updatePositionStrategy({
       type: PopoverPositionType.FollowMouse,
-      boundingElement: this.container.nativeElement,
+      boundingElement: this.getElementContainer(node?.data?.name, modal),
       offsetX: 50,
       offsetY: 30
     });
 
     return popover;
   }
+
+  private getElementContainer(textContent: string = '', modal: boolean): HTMLElement {
+    if (!modal) {
+      return this.container.nativeElement;
+    }
+
+    if (textContent) {
+      return (
+        Array.from(this.container.nativeElement.querySelector('.topology-data').children as HTMLCollection).find(
+          el => el.querySelector('text')?.textContent === textContent
+        ) ?? this.container.nativeElement
+      );
+    } else {
+      return this.container.nativeElement.querySelector('.topology-data .emphasized');
+    }
+  }
 }