Show view switcher in the control bar under CLL on graph experiment.

PiperOrigin-RevId: 740735248

Author: Googler

src/app/toolbar.ng.html

@@ -1,6 +1,9 @@
 <nav [ngClass]="['toolbar', graphState]">
   <ng-container *ngFor="let customToggleTemplate of leftAlignedCustomToolbarToggleTemplates">
-    <div class="cell toggler">
+    <div
+      class="cell toggler"
+      [class.flex]="customToggleTemplate == fillerCustomToolbarToggleTemplate"
+    >
       <ng-container
         *ngTemplateOutlet="customToggleTemplate; context: {
           nodes,
@@ -9,7 +12,7 @@
       ></ng-container>
     </div>
   </ng-container>
-  <div *ngIf="rightAlignMainControls" class="flex"></div>
+  <div *ngIf="fillerCustomToolbarToggleTemplate == null && rightAlignMainControls" class="flex"></div>
   <ng-container *ngVar="labelGenerator(this, 'graphState') as label">
     <div class="cell state" *ngIf="label !== false">
       <workflow-graph-icon icon="info"></workflow-graph-icon>
@@ -138,7 +141,10 @@
     </button>
   </div>
   <ng-container *ngFor="let customToggleTemplate of customToolbarToggleTemplates">
-    <div class="cell toggler">
+    <div
+      class="cell toggler"
+      [class.flex]="customToggleTemplate == fillerCustomToolbarToggleTemplate"
+    >
       <ng-container
         *ngTemplateOutlet="customToggleTemplate; context: {
           nodes,
@@ -147,9 +153,12 @@
       ></ng-container>
     </div>
   </ng-container>
-  <div *ngIf="!rightAlignMainControls" class="flex"></div>
+  <div *ngIf="fillerCustomToolbarToggleTemplate == null && !rightAlignMainControls" class="flex"></div>
   <ng-container *ngFor="let customToggleTemplate of rightAlignedCustomToolbarToggleTemplates">
-    <div class="cell toggler">
+    <div
+      class="cell toggler"
+      [class.flex]="customToggleTemplate == fillerCustomToolbarToggleTemplate"
+    >
       <ng-container *ngTemplateOutlet="customToggleTemplate; context: {
         nodes,
         groups

src/app/toolbar.ts

@@ -134,6 +134,7 @@ export class DagToolbar {
   private $customToolbarToggleTemplates: TemplateRef<any>[] = [];
   private $leftAlignedCustomToolbarToggleTemplates: TemplateRef<any>[] = [];
   private $rightAlignedCustomToolbarToggleTemplates: TemplateRef<any>[] = [];
+  private $fillerCustomToolbarToggleTemplate: TemplateRef<any>|null = null;
 
   @Input() enableMinimap = true;
   @Output() enableMinimapChange = new EventEmitter();
@@ -222,6 +223,15 @@ export class DagToolbar {
     return this.$rightAlignedCustomToolbarToggleTemplates;
   }
 
+  @Input('fillerCustomToolbarToggleTemplate')
+  set fillerCustomToolbarToggleTemplate(template: TemplateRef<any>|null) {
+    this.$fillerCustomToolbarToggleTemplate = template;
+    this.cdr.detectChanges();
+  }
+  get fillerCustomToolbarToggleTemplate() {
+    return this.$fillerCustomToolbarToggleTemplate;
+  }
+
   constructor(
       private readonly cdr: ChangeDetectorRef,
       private readonly dialog: MatDialog,