<div class="sdc-composition-graph-wrapper {{zoneTagMode}}" [ngClass]="{'with-sidebar': withSidebar$ | async, 'view-only':isViewOnly$ | async}"> </div> <div class="sdc-composition-menu" [ngClass]="{'with-sidebar': withSidebar$ | async}"> <service-path-selector *ngIf="topologyTemplate.isService() && compositionService.forwardingPaths" [drawPath]="drawPathOnCy" [deletePaths]="deletePathsOnCy" [selectedPathId]="selectedPathId"> </service-path-selector> <canvas-search *ngIf="componentInstanceNames" class="composition-search" [placeholder]="'Type to search'" [data]="componentInstanceNames" (searchChanged)="getAutoCompleteValues($event)" (searchButtonClicked)="highlightSearchMatches($event)"> </canvas-search> <!--<service-path class="zoom-icons"--> <!--*ngIf="!(isViewOnly$ | async) && topologyTemplate.isService()"--> <!--[service]="topologyTemplate"--> <!--[onCreate]="createOrUpdateServicePath">--> <!--</service-path>--> <svg-icon *ngIf="!(isViewOnly$ | async) && topologyTemplate.isService()" class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'" [backgroundColor]="'silver'" [name]="'browse'" [clickable]="true" [testId]="'pathsMenuBtn'" (click)="openServicePathMenu($event)"></svg-icon> <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'" [backgroundColor]="'silver'" [name]="'expand-o'" [clickable]="true" (click)="zoomAllWithoutSidebar()"></svg-icon> <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'" [backgroundColor]="'silver'" [name]="'plus'" [clickable]="true" (click)="zoom(true)"></svg-icon> <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'" [backgroundColor]="'silver'" [name]="'minus'" [clickable]="true" (click)="zoom(false)"></svg-icon> </div> <div class="sdc-canvas-zones__wrapper {{zoneTagMode}}" [ngClass]="{'with-sidebar': withSidebar$ | async}"> <zone-container *ngFor="let zone of zones" [title]="zone.title" [type]="zone.type" [count]="zone.instances.length" [visible]="zone.visible" [minimized]="zone.minimized" (minimize)="zoneMinimizeToggle(zone.type)" (backgroundClick)="zoneBackgroundClicked()"> <zone-instance *ngFor="let instance of zone.instances" [hidden]="instance.hidden" [zoneInstance]="instance" [defaultIconText]="zone.defaultIconText" [isActive]="activeZoneInstance == instance" [activeInstanceMode]="activeZoneInstance && activeZoneInstance.mode" [isViewOnly]="isViewOnly$ | async" [forceSave]="instance.forceSave" (modeChange)="zoneInstanceModeChanged($event.newMode, $event.instance, zone.type)" (tagHandleClick)="zoneInstanceTagged($event)" (assignmentSaveStart)="zoneAssignmentSaveStart()" (assignmentSaveComplete)="zoneAssignmentSaveComplete($event)"> </zone-instance> </zone-container> </div>