feat: add custom configurations to the topology widget (#938)

* feat: custom configurations for topology

Author: itssharmasandeep

projects/observability/src/shared/components/topology/d3/d3-topology.ts

@@ -182,7 +182,7 @@ export class D3Topology implements Topology {
       target: data,
       scroll: this.config.zoomable ? zoomScrollConfig : undefined,
       pan: this.config.zoomable ? zoomPanConfig : undefined,
-      showBrush: true
+      showBrush: this.config.showBrush
     });
 
     this.onDestroy(() => {

projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, InjectionToken } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, InjectionToken, OnInit } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import { SubscriptionLifecycle, throwIfNil } from '@hypertrace/common';
 
@@ -69,7 +69,7 @@ export const TOPOLOGY_INTERACTION_CONTROL_DATA = new InjectionToken<TopologyInte
     </div>
   `
 })
-export class TopologyInteractionControlComponent {
+export class TopologyInteractionControlComponent implements OnInit {
   public currentZoomPercentage: string = '100';
   public canIncrement: boolean = true;
   public canDecrement: boolean = true;
@@ -111,6 +111,12 @@ export class TopologyInteractionControlComponent {
     this.nodeDataSpecifiers = interactionControlData.topologyConfig.nodeDataSpecifiers;
   }
 
+  public ngOnInit(): void {
+    if (this.interactionControlData.topologyConfig.shouldAutoZoomToFit) {
+      this.zoomToFit();
+    }
+  }
+
   // TODO should make the increments logarithmic
   public incrementZoom(): void {
     this.getZoomOrThrow().setZoomScale(this.getZoomOrThrow().getZoomScale() + 0.1);

projects/observability/src/shared/components/topology/topology.component.ts

@@ -43,6 +43,12 @@ export class TopologyComponent implements OnChanges, OnDestroy {
   @Input()
   public edgeDataSpecifiers?: TopologyDataSpecifier[];
 
+  @Input()
+  public showBrush?: boolean = true;
+
+  @Input()
+  public shouldAutoZoomToFit?: boolean = false;
+
   @ViewChild('topologyContainer', { static: true })
   private readonly container!: ElementRef;
 
@@ -65,7 +71,9 @@ export class TopologyComponent implements OnChanges, OnDestroy {
       edgeRenderer: this.edgeRenderer,
       nodeDataSpecifiers: this.nodeDataSpecifiers,
       edgeDataSpecifiers: this.edgeDataSpecifiers,
-      tooltipRenderer: this.tooltipRenderer
+      tooltipRenderer: this.tooltipRenderer,
+      showBrush: this.showBrush,
+      shouldAutoZoomToFit: this.shouldAutoZoomToFit
     });
 
     // Angular doesn't like introducing new child views mid-change detection

projects/observability/src/shared/components/topology/topology.ts

@@ -44,6 +44,16 @@ export interface TopologyConfiguration {
    */
   zoomable: boolean;
 
+  /**
+   * If true, brush will be shown
+   */
+  showBrush?: boolean;
+
+  /**
+   * If true, it will be automatic zoom to fit
+   */
+  shouldAutoZoomToFit?: boolean;
+
   /**
    * A list of specifiers for node data. Up to one will be selectable to the user,
    * and provided to the node renderer.

projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.test.ts

@@ -83,7 +83,8 @@ describe('Topology Widget renderer', () => {
         edgeSpecification: edgeSpec,
         nodeTypes: uniq(mockResponse.map(node => node.data[entityTypeKey]))
       })
-    )
+    ),
+    showLegend: true
   };
 
   const createComponent = createComponentFactory<TopologyWidgetRendererComponent>({

projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts

@@ -35,7 +35,7 @@ import { TopologyWidgetModel } from './topology-widget.model';
   template: `
     <ht-titled-content [title]="this.model.title | htDisplayTitle">
       <div class="visualization" *htLoadAsync="this.data$ as data">
-        <div class="legend">
+        <div *ngIf="this.model.showLegend" class="legend">
           <div class="latency">
             <div class="label">P99 Latency:</div>
             <div class="entry" *ngFor="let entry of this.getLatencyLegendConfig()">
@@ -59,6 +59,8 @@ import { TopologyWidgetModel } from './topology-widget.model';
           [tooltipRenderer]="this.tooltipRenderer"
           [nodeDataSpecifiers]="data.nodeSpecs"
           [edgeDataSpecifiers]="data.edgeSpecs"
+          [showBrush]="this.model.showBrush"
+          [shouldAutoZoomToFit]="this.model.shouldAutoZoomToFit"
         >
         </ht-topology>
       </div>

projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts

@@ -1,4 +1,4 @@
-import { Model, ModelApi, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
+import { BOOLEAN_PROPERTY, Model, ModelApi, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
 import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular';
 import { Observable } from 'rxjs';
 import { TopologyData, TopologyDataSourceModel } from '../../data/graphql/topology/topology-data-source.model';
@@ -16,6 +16,30 @@ export class TopologyWidgetModel {
   })
   public title?: string;
 
+  @ModelProperty({
+    key: 'showLegend',
+    displayName: 'Show Legend',
+    type: BOOLEAN_PROPERTY.type,
+    required: false
+  })
+  public showLegend?: boolean = true;
+
+  @ModelProperty({
+    key: 'showBrush',
+    displayName: 'Show Brush',
+    type: BOOLEAN_PROPERTY.type,
+    required: false
+  })
+  public showBrush?: boolean = true;
+
+  @ModelProperty({
+    key: 'shouldAutoZoomToFit',
+    displayName: 'Should Auto Zoom To Fit',
+    type: BOOLEAN_PROPERTY.type,
+    required: false
+  })
+  public shouldAutoZoomToFit?: boolean = false;
+
   @ModelInject(MODEL_API)
   private readonly api!: ModelApi;