hypertrace · itssharmasandeep · Nov 28, 2023 · Oct 20, 2023 · Oct 24, 2023 · Nov 6, 2023
@@ -61,6 +61,7 @@ const iconsRootPath = 'assets/icons';
         { key: IconType.EyeVisibilityOff, url: `${iconsRootPath}/eye-visibility-off.svg` },
         { key: IconType.FileCode, url: `${iconsRootPath}/file-code.svg` },
         { key: IconType.Filter, url: `${iconsRootPath}/filter.svg` },
+        { key: IconType.Folder, url: `${iconsRootPath}/folder.svg` },
         { key: IconType.Go, url: `${iconsRootPath}/go.svg` },
         { key: IconType.Helm, url: `${iconsRootPath}/helm.svg` },
         { key: IconType.Hypertrace, url: `${iconsRootPath}/hypertrace.svg` },

@@ -66,6 +66,7 @@ export const enum IconType {
   FileCode = 'svg:file-code',
   Filter = 'svg:filter',
   First = 'first_page',
+  Folder = 'svg:folder',
   Go = 'svg:go',
   Helm = 'svg:helm',
   Home = 'home',

@@ -297,6 +297,7 @@ export * from './shared/components/topology/renderers/node/topology-node-rendere
 export * from './shared/components/topology/renderers/tooltip/topology-tooltip-renderer.service';
 export * from './shared/components/topology/topology.component';
 export * from './shared/components/topology/topology.module';
+export * from './shared/components/topology/d3/layouts/graph-layout';
 export * from './shared/dashboard/data/graphql/topology/topology-data-source.model';
 export * from './shared/dashboard/data/graphql/topology/metrics/topology-metric-category.model';
 export * from './shared/dashboard/data/graphql/topology/metrics/topology-metric-with-category.model';
@@ -306,8 +307,10 @@ export * from './shared/dashboard/widgets/topology/edge/curved/entity-edge-curve
 export * from './shared/dashboard/widgets/topology/node/box/api-node-renderer/api-node-box-renderer.service';
 export * from './shared/dashboard/widgets/topology/node/box/backend-node-renderer/backend-node-box-renderer.service';
 export * from './shared/dashboard/widgets/topology/node/box/service-node-renderer/service-node-box-renderer.service';
+export * from './shared/dashboard/widgets/topology/node/box/group-node/group-node-box-renderer.service';
 export * from './shared/dashboard/widgets/topology/tooltip/topology-entity-tooltip.component';
 export * from './shared/dashboard/widgets/topology/visibility-updater';
+export * from './shared/components/topology/utils/topology-group-node.util';
 
 // Topology Metric
 export * from './shared/dashboard/widgets/topology/metric/edge-metric-category';

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';
 import {
   ApplicationRef,
@@ -44,6 +45,7 @@
 import { ForceLayout } from './layouts/force-layout';
 import { GraphLayout } from './layouts/graph-layout';
 import { TreeLayout } from './layouts/tree-layout';
+import { TopologyGroupNodeUtil } from '../utils/topology-group-node.util';
 
 export class D3Topology implements Topology {
   private static readonly CONTAINER_CLASS: string = 'topology-internal-container';
@@ -62,8 +64,9 @@
   protected container?: HTMLDivElement;
   protected tooltip?: TopologyTooltip;
   protected layout: TopologyLayout;
+  protected readonly supportGroupNode: boolean;
 
-  protected readonly userNodes: TopologyNode[];
+  protected userNodes: TopologyNode[];
   protected readonly nodeRenderer: TopologyNodeRenderer;
   protected readonly edgeRenderer: TopologyEdgeRenderer;
   protected readonly domRenderer: Renderer2;
@@ -84,18 +87,21 @@
     this.edgeRenderer = config.edgeRenderer;
     this.domRenderer = injector.get(Renderer2 as Type<Renderer2>);
     this.stateManager = new TopologyStateManager(this.config);
+    this.supportGroupNode = this.config.supportGroupNode ?? false;
     this.topologyData = this.topologyConverter.convertTopology(
       this.userNodes,
       this.stateManager,
       this.nodeRenderer,
       this.domRenderer,
+      undefined,
+      this.supportGroupNode,
     );
     this.d3Util = injector.get(D3UtilService);
     this.drag = new TopologyNodeDrag(this.d3Util, this.domRenderer);
     this.hover = new TopologyHover(this.d3Util, this.domRenderer);
     this.click = new TopologyClick(this.d3Util, this.domRenderer);
     this.zoom = new TopologyZoom();
-    this.layout = this.initializeLayout(config.layoutType);
+    this.layout = this.config.customLayout ?? this.initializeLayout(this.config.layoutType);
   }
 
   private initializeLayout(layoutType?: TopologyLayoutType): TopologyLayout {
@@ -159,8 +165,15 @@
   }
 
   private updateLayout(): void {
-    this.layout.layout(this.topologyData, this.width, this.height);
-    this.updatePositions();
+    if (this.supportGroupNode) {
+      this.runAndDrainCallbacks(this.dataClearCallbacks);
+      this.collapseGroupNodesIfPresent();
+      this.layout.layout(this.topologyData, this.width, this.height);
+      this.drawData(this.topologyData, this.nodeRenderer, this.edgeRenderer);
+    } else {
+      this.layout.layout(this.topologyData, this.width, this.height);
+      this.updatePositions();
+    }
   }
 
   private initializeContainer(): HTMLDivElement {
@@ -227,7 +240,9 @@
     this.dataClearCallbacks.push(() => data.nodes.forEach(node => nodeRenderer.destroyNode(node)));
 
     if (this.config.draggableNodes) {
-      const subscription = this.drag.addDragBehavior(data, nodeRenderer).subscribe(event => this.onNodeDrag(event));
+      const subscription = this.drag
+        .addDragBehavior(data, nodeRenderer, this.supportGroupNode)
+        .subscribe(event => this.onNodeDrag(event));
       this.dataClearCallbacks.push(() => subscription.unsubscribe());
     }
     if (this.config.hoverableNodes) {
@@ -323,6 +338,7 @@
       this.nodeRenderer,
       this.domRenderer,
       this.topologyData,
+      this.supportGroupNode,
     );
     this.layout.layout(this.topologyData, this.width, this.height);
     this.drawData(this.topologyData, this.nodeRenderer, this.edgeRenderer);
@@ -410,6 +426,10 @@
       this.neighborhoodFinder.singleNodeNeighborhood(node.userNode),
     );
 
+    if (this.supportGroupNode) {
+      this.checkAndHandleGroupNodeClick(node);
+    }
+
     if (!isNil(this.config.nodeInteractionHandler?.click)) {
       this.config.nodeInteractionHandler?.click(node.userNode).subscribe(() => this.resetVisibility());
     } else if (this.tooltip) {
@@ -420,6 +440,35 @@
     }
   }
 
+  private checkAndHandleGroupNodeClick(node: RenderableTopologyNode): void {
+    const userNode = node.userNode;
+    if (!TopologyGroupNodeUtil.isTopologyGroupNode(userNode)) {
+      return;
+    }
+
+    this.userNodes = TopologyGroupNodeUtil.getUpdatedNodesOnGroupNodeClick(userNode, this.userNodes);
+    this.runAndDrainCallbacks(this.dataClearCallbacks);
+    this.convertTopology();
+    TopologyGroupNodeUtil.updateLayoutForGroupNode(this.topologyData, userNode);
+    this.drawData(this.topologyData, this.nodeRenderer, this.edgeRenderer);
+  }
+
+  private collapseGroupNodesIfPresent(): void {
+    this.userNodes = TopologyGroupNodeUtil.collapseGroupNodes(this.userNodes);
+    this.convertTopology();
+  }
+
+  private convertTopology(): void {
+    this.topologyData = this.topologyConverter.convertTopology(
+      this.userNodes,
+      this.stateManager,
+      this.nodeRenderer,
+      this.domRenderer,
+      this.topologyData,
+      this.supportGroupNode,
+    );
+  }
+
   private onEdgeClick(edge: RenderableTopologyEdge): void {
     this.emphasizeTopologyNeighborhood(this.neighborhoodFinder.neighborhoodForEdge(edge.userEdge));
 
@@ -445,6 +494,9 @@
         });
         break;
       case 'drag':
+        if (this.supportGroupNode) {
+          TopologyGroupNodeUtil.updateLayoutOnGroupNodeDrag(dragEvent, this.topologyData);
+        }
         this.updatePositions();
         break;
       default:

@@ -5,10 +5,12 @@
   RenderableTopology,
   RenderableTopologyNode,
   TopologyEdge,
+  TopologyGroupNode,
   TopologyNode,
   TopologyNodeRenderer,
 } from '../../../topology';
 import { TopologyEventBehavior } from '../topology-event-behavior';
+import { TopologyGroupNodeUtil } from '../../../utils/topology-group-node.util';
 
 export class TopologyNodeDrag extends TopologyEventBehavior {
   /**
@@ -18,11 +20,26 @@
   public addDragBehavior(
     topologyData: RenderableTopology<TopologyNode, TopologyEdge>,
     nodeRenderer: TopologyNodeRenderer,
+    supportGroupNode: boolean,
   ): Observable<TopologyDragEvent> {
     if (topologyData.nodes.length === 0) {
       return EMPTY;
     }
-    const nodeLookup = this.buildLookupMap(topologyData.nodes, node => nodeRenderer.getElementForNode(node));
+
+    let nodeLookup = this.buildLookupMap(topologyData.nodes, node => nodeRenderer.getElementForNode(node));
+
+    if (supportGroupNode) {
+      const childUserNodesOfGroup = topologyData.nodes
+        .filter(n => TopologyGroupNodeUtil.isTopologyGroupNode(n.userNode))
+        .flatMap(n => (n.userNode as TopologyGroupNode).children);
+      const childRenderableNodesOfGroup = topologyData.nodes.filter(n => childUserNodesOfGroup.includes(n.userNode));
+
+      nodeLookup = this.buildLookupMap(
+        topologyData.nodes.filter(n => !childRenderableNodesOfGroup.includes(n)),
+        node => nodeRenderer.getElementForNode(node),
+      );
+    }
+
     const dragSubect = new Subject<TopologyDragEvent>();
 
     this.d3Utils.selectAll(Array.from(nodeLookup.keys()), this.domRenderer).call(

@@ -1,8 +1,11 @@
 import { RenderableTopology, RenderableTopologyNode, TopologyEdge, TopologyNode } from '../../topology';
 
 export class GraphLayout {
-  private levelToNodesMap: Map<number, RenderableTopologyNode[]> = new Map<number, RenderableTopologyNode[]>([[0, []]]);
-  private readonly nodeToLevelMap: Map<RenderableTopologyNode, number> = new Map<RenderableTopologyNode, number>();
+  protected levelToNodesMap: Map<number, RenderableTopologyNode[]> = new Map<number, RenderableTopologyNode[]>([
+    [0, []],
+  ]);
+  protected readonly nodeToLevelMap: Map<RenderableTopologyNode, number> = new Map<RenderableTopologyNode, number>();
+  private readonly layoutConfig: TopologyGraphLayoutConfig = this.getLayoutConfig();
 
   public layout(topology: RenderableTopology<TopologyNode, TopologyEdge>): void {
     this.initialize();
@@ -12,12 +15,12 @@
     this.verticallyCenterAlignNodes();
   }
 
-  private initialize(): void {
+  protected initialize(): void {
     this.levelToNodesMap = new Map([[0, []]]);
     this.nodeToLevelMap.clear();
   }
 
-  private findRootNodes(topology: RenderableTopology<TopologyNode, TopologyEdge>): void {
+  protected findRootNodes(topology: RenderableTopology<TopologyNode, TopologyEdge>): void {
     topology.nodes.forEach(node => {
       if (node.incoming.length === 0) {
         this.nodeToLevelMap.set(node, 0);
@@ -26,14 +29,14 @@
     });
   }
 
-  private fillNodeAndLevelMaps(): void {
+  protected fillNodeAndLevelMaps(): void {
     const goingToBeExploredNodes = [...(this.levelToNodesMap.get(0) ?? [])];
     const goingToBeOrAlreadyExploredNodes = new Set<RenderableTopologyNode>([...goingToBeExploredNodes]);
 
     this.levelOrderTraversal(goingToBeExploredNodes, goingToBeOrAlreadyExploredNodes);
   }
 
-  private levelOrderTraversal(
+  protected levelOrderTraversal(
     goingToBeExploredNodes: RenderableTopologyNode[],
     goingToBeOrAlreadyExploredNodes: Set<RenderableTopologyNode>,
   ): void {
@@ -60,31 +63,59 @@
     this.levelOrderTraversal(goingToBeExploredNodes, goingToBeOrAlreadyExploredNodes);
   }
 
-  private assignCoordinatesToNodes(): void {
-    let curX = 1;
+  protected assignCoordinatesToNodes(): void {
+    let curX = this.layoutConfig.startX;
 
     Array.from(this.levelToNodesMap.values()).forEach(nodes => {
-      let curY = 1;
+      let curY = this.layoutConfig.startY;
       let maxWidth = 0;
       nodes.forEach(node => {
         node.x = curX;
         node.y = curY;
-        curY += (node.renderedData()?.getBoudingBox()?.height ?? 36) + 20;
-        maxWidth = Math.max(maxWidth, node.renderedData()?.getBoudingBox()?.width ?? 400);
+        curY +=
+          (node.renderedData()?.getBoudingBox()?.height ?? this.layoutConfig.defaultNodeHeight) +
+          this.layoutConfig.verticalNodeGap;
+        maxWidth = Math.max(
+          maxWidth,
+          node.renderedData()?.getBoudingBox()?.width ?? this.layoutConfig.defaultNodeWidth,
+        );
       });
 
-      curX += maxWidth + 240;
+      curX += maxWidth + this.layoutConfig.horizontalNodeGap;
     });
   }
 
-  private verticallyCenterAlignNodes(): void {
+  protected verticallyCenterAlignNodes(): void {
     const longestLevelLength = Math.max(...Array.from(this.levelToNodesMap.values()).map(nodes => nodes.length));
 
     Array.from(this.levelToNodesMap.values()).forEach(nodes => {
       nodes.forEach(node => {
         node.y +=
-          ((longestLevelLength - nodes.length) * ((node.renderedData()?.getBoudingBox()?.height ?? 36) + 20)) / 2;
+          ((longestLevelLength - nodes.length) *
+            ((node.renderedData()?.getBoudingBox()?.height ?? this.layoutConfig.defaultNodeHeight) +
+              this.layoutConfig.verticalNodeGap)) /
+          2;
       });
     });
   }
+
+  protected getLayoutConfig(): TopologyGraphLayoutConfig {
+    return {
+      horizontalNodeGap: 240,
+      verticalNodeGap: 20,
+      startX: 1,
+      startY: 1,
+      defaultNodeWidth: 240,
+      defaultNodeHeight: 36,
+    };
+  }
+}
+
+export interface TopologyGraphLayoutConfig {
+  horizontalNodeGap: number;
+  verticalNodeGap: number;
+  startX: number;
+  startY: number;
+  defaultNodeWidth: number;
+  defaultNodeHeight: number;
 }
@@ -13,6 +13,7 @@ import {
   TopologyDataSpecifier,
   TopologyEdgeInteractionHandler,
   TopologyEdgeRenderer,
+  TopologyLayout,
   TopologyLayoutType,
   TopologyNode,
   TopologyNodeInteractionHandler,
@@ -58,9 +59,18 @@ export class TopologyComponent implements OnChanges, OnDestroy {
   @Input()
   public shouldAutoZoomToFit?: boolean = false;
 
+  @Input()
+  public draggableNodes?: boolean = true;
+
   @Input()
   public layoutType?: TopologyLayoutType;
 
+  @Input()
+  public customLayout?: TopologyLayout; // This will override `layoutType` property
+
+  @Input()
+  public supportGroupNode?: boolean;
+
   @ViewChild('topologyContainer', { static: true })
   private readonly container!: ElementRef;
 
@@ -86,9 +96,12 @@ export class TopologyComponent implements OnChanges, OnDestroy {
       tooltipRenderer: this.tooltipRenderer,
       showBrush: this.showBrush,
       shouldAutoZoomToFit: this.shouldAutoZoomToFit,
+      draggableNodes: this.draggableNodes,
       nodeInteractionHandler: this.nodeInteractionHandler,
       edgeInteractionHandler: this.edgeInteractionHandler,
       layoutType: this.layoutType,
+      customLayout: this.customLayout,
+      supportGroupNode: this.supportGroupNode,
     });
 
     // Angular doesn't like introducing new child views mid-change detection