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 2b5a18c0a..f6821ca61 100644 --- a/projects/observability/src/shared/components/topology/d3/d3-topology.ts +++ b/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(() => { diff --git a/projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts b/projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts index 6831eb7c0..8f7c90e7e 100644 --- a/projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts +++ b/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 ` }) -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); diff --git a/projects/observability/src/shared/components/topology/topology.component.ts b/projects/observability/src/shared/components/topology/topology.component.ts index a839a3852..748324a3b 100644 --- a/projects/observability/src/shared/components/topology/topology.component.ts +++ b/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 diff --git a/projects/observability/src/shared/components/topology/topology.ts b/projects/observability/src/shared/components/topology/topology.ts index 2c9558f1d..9aa74464e 100644 --- a/projects/observability/src/shared/components/topology/topology.ts +++ b/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. diff --git a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.test.ts b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.test.ts index 42eb6bf19..a475b3a7f 100644 --- a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.test.ts +++ b/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({ diff --git a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts index 8b4757eef..0dc778555 100644 --- a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts @@ -35,7 +35,7 @@ import { TopologyWidgetModel } from './topology-widget.model'; template: `
-
+
P99 Latency:
@@ -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" >
diff --git a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts index d2309c1b4..0162ff0c4 100644 --- a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts +++ b/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;