From 45db32d0bad26483e44d231c5af2d8bf55c4f7d6 Mon Sep 17 00:00:00 2001 From: Patricio Albizu Date: Tue, 30 Mar 2021 19:56:49 -0300 Subject: [PATCH 1/7] fix: Unable to click topology --- .../renderers/tooltip/topology-tooltip-popover.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts index 1a3f35e45..bc34663d8 100644 --- a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts +++ b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts @@ -3,7 +3,6 @@ import { PopoverBackdrop, PopoverPositionType, PopoverRef, - PopoverRelativePositionLocation, PopoverService } from '@hypertrace/components'; import { BehaviorSubject, merge, Observable, ReplaySubject, Subject } from 'rxjs'; @@ -86,9 +85,10 @@ export class TopologyTooltipPopover implements TopologyTooltip { } popover.updatePositionStrategy({ - type: PopoverPositionType.Relative, - locationPreferences: [PopoverRelativePositionLocation.InsideTopLeft], - origin: this.container + type: PopoverPositionType.FollowMouse, + boundingElement: this.container.nativeElement, + offsetX: 50, + offsetY: 30 }); return popover; From 0866634dbb809c5e03978eaeae6e10459c5a9323 Mon Sep 17 00:00:00 2001 From: Patricio Albizu Date: Wed, 31 Mar 2021 11:54:45 -0300 Subject: [PATCH 2/7] fix: running lintern --- .../topology/renderers/tooltip/topology-tooltip-popover.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts index bc34663d8..e1d8fd13c 100644 --- a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts +++ b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts @@ -1,10 +1,5 @@ import { ElementRef, Injector } from '@angular/core'; -import { - PopoverBackdrop, - PopoverPositionType, - PopoverRef, - PopoverService -} from '@hypertrace/components'; +import { PopoverBackdrop, PopoverPositionType, PopoverRef, PopoverService } from '@hypertrace/components'; import { BehaviorSubject, merge, Observable, ReplaySubject, Subject } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { TopologyEdge, TopologyNode, TopologyTooltip, TopologyTooltipOptions } from '../../topology'; From 3249de71fca4e632b6a1b29eb268137d69c8db89 Mon Sep 17 00:00:00 2001 From: Patricio Albizu Date: Thu, 1 Apr 2021 16:51:45 -0300 Subject: [PATCH 3/7] fix: modify bounding element --- .../tooltip/topology-tooltip-popover.ts | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts index e1d8fd13c..243adf24d 100644 --- a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts +++ b/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'); + } + } } From 39792cf27a13b21e9de95ed4b13fddfe6b1bc985 Mon Sep 17 00:00:00 2001 From: Patricio Albizu Date: Thu, 1 Apr 2021 16:58:19 -0300 Subject: [PATCH 4/7] fix: fixing lint --- .../topology/renderers/tooltip/topology-tooltip-popover.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts index 243adf24d..7ef713a31 100644 --- a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts +++ b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts @@ -20,7 +20,7 @@ export class TopologyTooltipPopover implements TopologyTooltip { private readonly injector: Injector, private readonly popoverService: PopoverService ) { - this.popoverSubject = new BehaviorSubject(this.buildPopover(null, false)); + this.popoverSubject = new BehaviorSubject(this.buildPopover(false)); this.hidden$ = this.popoverSubject.pipe(switchMap(popover => merge(popover.hidden$, popover.closed$))); } @@ -61,10 +61,10 @@ export class TopologyTooltipPopover implements TopologyTooltip { } this.popover.close(); // Close existing popover - this.popoverSubject.next(this.buildPopover(node, modal)); + this.popoverSubject.next(this.buildPopover(modal, node)); } - private buildPopover(node: any, modal: boolean): PopoverRef { + private buildPopover(modal: boolean, node: any = null): PopoverRef { const popover = this.popoverService.drawPopover({ componentOrTemplate: this.tooltipDefinition.class, position: { From 5d01a0e9358b4e78c418e52c7b9196d2db7b01bc Mon Sep 17 00:00:00 2001 From: Patricio Albizu Date: Thu, 1 Apr 2021 17:42:53 -0300 Subject: [PATCH 5/7] fix: fixing lintern --- .../renderers/tooltip/topology-tooltip-popover.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts index 7ef713a31..b203ebc13 100644 --- a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts +++ b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts @@ -20,7 +20,7 @@ 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(false, null)); this.hidden$ = this.popoverSubject.pipe(switchMap(popover => merge(popover.hidden$, popover.closed$))); } @@ -64,7 +64,7 @@ export class TopologyTooltipPopover implements TopologyTooltip { this.popoverSubject.next(this.buildPopover(modal, node)); } - private buildPopover(modal: boolean, node: any = null): PopoverRef { + private buildPopover(modal: boolean, node: TopologyNode | TopologyEdge | null): PopoverRef { const popover = this.popoverService.drawPopover({ componentOrTemplate: this.tooltipDefinition.class, position: { @@ -81,7 +81,7 @@ export class TopologyTooltipPopover implements TopologyTooltip { popover.updatePositionStrategy({ type: PopoverPositionType.FollowMouse, - boundingElement: this.getElementContainer(node?.data?.name, modal), + boundingElement: this.getElementContainer((node as any)?.data?.name, modal), offsetX: 50, offsetY: 30 }); @@ -94,14 +94,14 @@ export class TopologyTooltipPopover implements TopologyTooltip { return this.container.nativeElement; } - if (textContent) { + 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'); } + + return this.container.nativeElement.querySelector('.topology-data .emphasized'); } } From e89deec00b6476e92dda1c861cd473e455092b66 Mon Sep 17 00:00:00 2001 From: Patricio Albizu Date: Thu, 1 Apr 2021 22:19:07 -0300 Subject: [PATCH 6/7] fix: refactoring of popover positioning --- .../components/topology/d3/d3-topology.ts | 25 ++++++++-- .../tooltip/topology-tooltip-popover.ts | 49 +++++++++---------- .../shared/components/topology/topology.ts | 4 +- 3 files changed, 46 insertions(+), 32 deletions(-) diff --git a/projects/observability/src/shared/components/topology/d3/d3-topology.ts b/projects/observability/src/shared/components/topology/d3/d3-topology.ts index 9f64de3ea..2b5a18c0a 100644 --- a/projects/observability/src/shared/components/topology/d3/d3-topology.ts +++ b/projects/observability/src/shared/components/topology/d3/d3-topology.ts @@ -318,7 +318,7 @@ export class D3Topology implements Topology { this.neighborhoodFinder.neighborhoodForNode(hoverEvent.source.userNode), this.neighborhoodFinder.singleNodeNeighborhood(hoverEvent.source.userNode) ); - this.tooltip && this.tooltip.showWithNodeData(hoverEvent.source.userNode); + this.showNodeTooltip(hoverEvent.source, false); } } @@ -328,7 +328,7 @@ export class D3Topology implements Topology { this.tooltip && this.tooltip.hide(); } else { this.emphasizeTopologyNeighborhood(this.neighborhoodFinder.neighborhoodForEdge(hoverEvent.source.userEdge)); - this.tooltip && this.tooltip.showWithEdgeData(hoverEvent.source.userEdge); + this.showEdgeTooltip(hoverEvent.source, false); } } @@ -386,7 +386,7 @@ export class D3Topology implements Topology { ); if (this.tooltip) { // TODO - a modal tooltip disables the interactions like hover (which is good), but doesn't allow clicking another element without an extra click - this.tooltip.showWithNodeData(node.userNode, { modal: true }); + this.showNodeTooltip(node, true); this.tooltip.hidden$.pipe(take(1)).subscribe(() => this.resetVisibility()); } } @@ -395,7 +395,7 @@ export class D3Topology implements Topology { this.emphasizeTopologyNeighborhood(this.neighborhoodFinder.neighborhoodForEdge(edge.userEdge)); if (this.tooltip) { // TODO - a modal tooltip disables the interactions like hover (which is good), but doesn't allow clicking another element without an extra click - this.tooltip.showWithEdgeData(edge.userEdge, { modal: true }); + this.showEdgeTooltip(edge, true); this.tooltip.hidden$.pipe(take(1)).subscribe(() => this.resetVisibility()); } } @@ -422,5 +422,20 @@ export class D3Topology implements Topology { private select(selector: string | T): Selection { return this.d3Util.select(selector, this.domRenderer); } - // tslint:disable-next-line: max-file-line-count + + private showNodeTooltip(node: RenderableTopologyNode, modal: boolean): void { + const originEl = this.nodeRenderer.getElementForNode(node); + if (!originEl || !this.tooltip) { + return; + } + this.tooltip.showWithNodeData(node.userNode, new ElementRef(originEl), { modal: modal }); + } + + private showEdgeTooltip(edge: RenderableTopologyEdge, modal: boolean): void { + const originEl = this.edgeRenderer.getElementForEdge(edge); + if (!originEl || !this.tooltip) { + return; + } + this.tooltip.showWithEdgeData(edge.userEdge, new ElementRef(originEl), { modal: modal }); + } } diff --git a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts index b203ebc13..4c1804d83 100644 --- a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts +++ b/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, null)); + this.popoverSubject = new BehaviorSubject(this.buildPopover(false, this.container)); this.hidden$ = this.popoverSubject.pipe(switchMap(popover => merge(popover.hidden$, popover.closed$))); } - public showWithNodeData(node: TopologyNode, options: TopologyTooltipOptions = {}): void { - this.rebuildPopoverIfNeeded(node, options); + public showWithNodeData(node: TopologyNode, origin: ElementRef, options: TopologyTooltipOptions = {}): void { + this.rebuildPopoverIfNeeded(origin, options); this.dataSubject.next({ type: 'node', node: node, @@ -34,8 +34,8 @@ export class TopologyTooltipPopover implements TopologyTooltip { this.popover.show(); } - public showWithEdgeData(edge: TopologyEdge, options: TopologyTooltipOptions = {}): void { - this.rebuildPopoverIfNeeded(edge, options); + public showWithEdgeData(edge: TopologyEdge, origin: ElementRef, options: TopologyTooltipOptions = {}): void { + this.rebuildPopoverIfNeeded(origin, options); this.dataSubject.next({ type: 'edge', edge: edge, @@ -54,17 +54,32 @@ export class TopologyTooltipPopover implements TopologyTooltip { this.popoverSubject.complete(); } - private rebuildPopoverIfNeeded(node: TopologyNode | TopologyEdge, options: TopologyTooltipOptions): void { + private rebuildPopoverIfNeeded(origin: ElementRef, 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, node)); + this.popoverSubject.next(this.buildPopover(!!options.modal, origin)); } - private buildPopover(modal: boolean, node: TopologyNode | TopologyEdge | null): PopoverRef { + // private buildHiddenPopover(): PopoverRef { + // const popover = this.popoverService.drawPopover({ + // componentOrTemplate: this.tooltipDefinition.class, + // position: { + // type: PopoverPositionType.Hidden + // }, + // parentInjector: this.injector, + // backdrop: PopoverBackdrop.None, + // data: this.dataSubject + // }); + + // return popover; + // } + + private buildPopover(modal: boolean, origin: ElementRef): PopoverRef { + console.log('entro aca'); const popover = this.popoverService.drawPopover({ componentOrTemplate: this.tooltipDefinition.class, position: { @@ -81,27 +96,11 @@ export class TopologyTooltipPopover implements TopologyTooltip { popover.updatePositionStrategy({ type: PopoverPositionType.FollowMouse, - boundingElement: this.getElementContainer((node as any)?.data?.name, modal), + boundingElement: modal ? origin.nativeElement : this.container.nativeElement, 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 - ); - } - - return this.container.nativeElement.querySelector('.topology-data .emphasized'); - } } diff --git a/projects/observability/src/shared/components/topology/topology.ts b/projects/observability/src/shared/components/topology/topology.ts index 66c423994..2c9558f1d 100644 --- a/projects/observability/src/shared/components/topology/topology.ts +++ b/projects/observability/src/shared/components/topology/topology.ts @@ -179,8 +179,8 @@ export interface TopologyTooltipRenderer { } export interface TopologyTooltip { - showWithNodeData(node: TopologyNode, options?: TopologyTooltipOptions): void; - showWithEdgeData(edge: TopologyEdge, options?: TopologyTooltipOptions): void; + showWithNodeData(node: TopologyNode, origin: ElementRef, options?: TopologyTooltipOptions): void; + showWithEdgeData(edge: TopologyEdge, origin: ElementRef, options?: TopologyTooltipOptions): void; hide(): void; destroy(): void; hidden$: Observable; From 2dfb5780e4228aca435b2627e4b1193ace1aba0c Mon Sep 17 00:00:00 2001 From: Patricio Albizu Date: Thu, 1 Apr 2021 22:19:21 -0300 Subject: [PATCH 7/7] fix: refactoring of popover positioning --- .../renderers/tooltip/topology-tooltip-popover.ts | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts index 4c1804d83..a85bb769f 100644 --- a/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts +++ b/projects/observability/src/shared/components/topology/renderers/tooltip/topology-tooltip-popover.ts @@ -64,22 +64,7 @@ export class TopologyTooltipPopover implements TopologyTooltip { this.popoverSubject.next(this.buildPopover(!!options.modal, origin)); } - // private buildHiddenPopover(): PopoverRef { - // const popover = this.popoverService.drawPopover({ - // componentOrTemplate: this.tooltipDefinition.class, - // position: { - // type: PopoverPositionType.Hidden - // }, - // parentInjector: this.injector, - // backdrop: PopoverBackdrop.None, - // data: this.dataSubject - // }); - - // return popover; - // } - private buildPopover(modal: boolean, origin: ElementRef): PopoverRef { - console.log('entro aca'); const popover = this.popoverService.drawPopover({ componentOrTemplate: this.tooltipDefinition.class, position: {