angular · milomg · Jun 6, 2025
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
@@ -77,6 +77,7 @@
         [showCommentNodes]="showCommentNodes()"
         [isHydrationEnabled]="isHydrationEnabled()"
         (toggleInspector)="toggleInspector()"
+        [signalGraphEnabled]="signalGraphEnabled()"
       />
 
       @let profilerVisible = activeTab() === 'Profiler';

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
@@ -66,6 +66,7 @@ export class DevToolsTabsComponent {
   readonly showCommentNodes = signal(false);
   readonly routerGraphEnabled = signal(false);
   readonly timingAPIEnabled = signal(false);
+  readonly signalGraphEnabled = signal(false);
 
   readonly componentExplorerView = signal<ComponentExplorerView | null>(null);
   readonly providers = signal<SerializedProviderRecord[]>([]);

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/BUILD.bazel
@@ -34,6 +34,7 @@ ng_project(
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest:index-forest_rjs",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver:property-resolver_rjs",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab:property-tab_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view:signals-tab_rjs",
         "//devtools/projects/ng-devtools/src/lib/vendor/angular-split:angular-split_rjs",
         "//devtools/projects/protocol:protocol_rjs",
     ],

diff --git a/...ts/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html b/...ts/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html
@@ -1,7 +1,7 @@
 <as-split unit="percent" [direction]="splitDirection()" [gutterSize]="9">
   <as-split-area #directiveForestSplitArea size="60">
-    <as-split direction="vertical" [gutterSize]="9" unit="pixel" [disabled]="true">
-      <as-split-area size="*">
+    <as-split direction="vertical" [gutterSize]="9" unit="percent">
+      <as-split-area class="forest-breadcrumbs" size="30">
         <ng-directive-forest
           (selectNode)="handleNodeSelection($event)"
           (selectDomElement)="handleSelectDomElement($event)"
@@ -13,24 +13,34 @@
           [currentSelectedElement]="currentSelectedElement()!"
           [showCommentNodes]="showCommentNodes()"
         />
+        <div class="breadcrumbs">
+          @if (parents()) {
+            <ng-breadcrumbs
+              (mouseLeaveNode)="unhighlight()"
+              (mouseOverNode)="highlight($event)"
+              (handleSelect)="handleSelect($event)"
+              [parents]="parents()!"
+            />
+          }
+        </div>
       </as-split-area>
-      <as-split-area size="22">
-        @if (parents()) {
-          <ng-breadcrumbs
-            (mouseLeaveNode)="unhighlight()"
-            (mouseOverNode)="highlight($event)"
-            (handleSelect)="handleSelect($event)"
-            [parents]="parents()!"
+      @if (signalsOpen() && currentSelectedElement(); as currentSelectedElement) {
+        <as-split-area size="70">
+          <ng-signals-tab
+            [currentElement]="currentSelectedElement.position"
+            (close)="signalsOpen.set(false)"
           />
-        }
-      </as-split-area>
+        </as-split-area>
+      }
     </as-split>
   </as-split-area>
   <as-split-area size="40" minSize="25" class="prop-split">
     <div class="property-tab-wrapper">
       @if (currentSelectedElement(); as currentSelectedElement) {
         <ng-property-tab
           [currentSelectedElement]="currentSelectedElement"
+          [signalGraphEnabled]="signalGraphEnabled()"
+          (showSignalGraph)="showSignalGraph($event)"
           (inspect)="inspect($event)"
           (viewSource)="viewSource($event)"
         />

diff --git a/...ts/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.scss b/...ts/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.scss
@@ -12,6 +12,16 @@
   }
 }
 
+.forest-breadcrumbs {
+  display: flex;
+  flex-direction: column;
+
+  .breadcrumbs {
+    height: 22px;
+    border-top: 1px solid var(--color-separator);
+  }
+}
+
 .prop-split {
   display: flex;
   flex-direction: column;

diff --git a/...ects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts b/...ects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts
@@ -48,6 +48,7 @@ import {MatSlideToggle} from '@angular/material/slide-toggle';
 import {FormsModule} from '@angular/forms';
 import {Platform} from '@angular/cdk/platform';
 import {MatSnackBarModule, MatSnackBar} from '@angular/material/snack-bar';
+import {SignalsTabComponent} from './signals-view/signals-tab.component';
 
 const sameDirectives = (a: IndexedNode, b: IndexedNode) => {
   if ((a.component && !b.component) || (!a.component && b.component)) {
@@ -84,6 +85,7 @@ const sameDirectives = (a: IndexedNode, b: IndexedNode) => {
     MatSlideToggle,
     FormsModule,
     MatSnackBarModule,
+    SignalsTabComponent,
   ],
 })
 export class DirectiveExplorerComponent {
@@ -97,12 +99,16 @@ export class DirectiveExplorerComponent {
     read: ElementRef,
   });
 
+  readonly signalGraphEnabled = input.required<boolean>();
+
   readonly currentSelectedElement = signal<IndexedNode | null>(null);
   readonly forest = signal<DevToolsNode[]>([]);
   readonly splitDirection = signal<'horizontal' | 'vertical'>('horizontal');
   readonly parents = signal<FlatNode[] | null>(null);
   readonly showHydrationNodeHighlights = signal(false);
 
+  readonly signalsOpen = signal(false);
+
   private _clickedElement: IndexedNode | null = null;
   private _refreshRetryTimeout: null | ReturnType<typeof setTimeout> = null;
 
@@ -112,7 +118,6 @@ export class DirectiveExplorerComponent {
   private readonly _frameManager = inject(FrameManager);
 
   private readonly platform = inject(Platform);
-
   private readonly snackBar = inject(MatSnackBar);
 
   constructor() {
@@ -339,4 +344,9 @@ export class DirectiveExplorerComponent {
       this.hightlightHydrationNodes();
     }
   }
+
+  showSignalGraph(node: PropertyFlatNode | null) {
+    // TBD: Use the node argument for graph node selection/highlighting.
+    this.signalsOpen.set(true);
+  }
 }
diff --git a/.../devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss b/.../devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss
@@ -20,6 +20,7 @@
 
   .breadcrumbs {
     overflow-x: auto;
+    overflow-y: hidden;
     white-space: nowrap;
     display: inline-block;
     // width: calc(100% - 50px);

diff --git a/...ls/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel b/...ls/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel
@@ -48,6 +48,7 @@ ng_project(
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver:property-resolver_rjs",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view:defer-view_rjs",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view:property-view_rjs",
+        "//devtools/projects/ng-devtools/src/lib/shared/button:button_rjs",
         "//devtools/projects/protocol:protocol_rjs",
     ],
 )
diff --git a/.../src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.html b/.../src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.html
@@ -7,6 +7,11 @@
           <mat-panel-title>
             <div class="element-header">
               <div class="component-name">{{ comp.name }}</div>
+              @if (signalGraphEnabled()) {
+                <button ng-button type="button" size="compact" (click)="showGraph($event)">
+                  Show Signal Graph
+                </button>
+              }
             </div>
           </mat-panel-title>
         </mat-expansion-panel-header>
@@ -17,5 +22,10 @@
 } @else {
   <div class="element-header">
     <div class="element-name">{{ currentSelectedElement().element }}</div>
+    @if (signalGraphEnabled()) {
+      <button ng-button type="button" size="compact" (click)="showGraph($event)">
+        Show Signal Graph
+      </button>
+    }
   </div>
 }
diff --git a/...ls/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts b/...ls/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts
@@ -6,19 +6,27 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, input, output} from '@angular/core';
+import {MatExpansionModule} from '@angular/material/expansion';
 
 import {IndexedNode} from '../directive-forest/index-forest';
 import {ComponentMetadataComponent} from './component-metadata.component';
-import {MatExpansionModule} from '@angular/material/expansion';
+import {ButtonComponent} from '../../../shared/button/button.component';
 
 @Component({
   templateUrl: './property-tab-header.component.html',
   selector: 'ng-property-tab-header',
   styleUrls: ['./property-tab-header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatExpansionModule, ComponentMetadataComponent],
+  imports: [MatExpansionModule, ComponentMetadataComponent, ButtonComponent],
 })
 export class PropertyTabHeaderComponent {
-  currentSelectedElement = input.required<IndexedNode>();
+  readonly currentSelectedElement = input.required<IndexedNode>();
+  readonly signalGraphEnabled = input.required<boolean>();
+  readonly showSignalGraph = output<void>();
+
+  showGraph(event: Event) {
+    event.stopPropagation();
+    this.showSignalGraph.emit();
+  }
 }
diff --git a/...evtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html b/...evtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html
@@ -1,7 +1,11 @@
 @let currentSelectedElement = this.currentSelectedElement();
 
 @if (currentSelectedElement) {
-  <ng-property-tab-header [currentSelectedElement]="currentSelectedElement" />
+  <ng-property-tab-header
+    [currentSelectedElement]="currentSelectedElement"
+    [signalGraphEnabled]="signalGraphEnabled()"
+    (showSignalGraph)="showSignalGraph.emit(null)"
+  />
   <ng-property-tab-body
     (inspect)="inspect.emit($event)"
     (viewSource)="viewSource.emit($event)"

diff --git a/...-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts b/...-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts
@@ -23,6 +23,9 @@ import {DeferViewComponent} from './defer-view/defer-view.component';
 })
 export class PropertyTabComponent {
   readonly currentSelectedElement = input.required<IndexedNode | null>();
+  readonly signalGraphEnabled = input.required<boolean>();
+
   readonly viewSource = output<string>();
   readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
+  readonly showSignalGraph = output<FlatNode | null>();
 }
diff --git a/...ools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss b/...ools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss
@@ -38,6 +38,27 @@
   margin-left: 18px;
 }
 
+.show-signal-btn {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: var(--quinary-contrast);
+  color: var(--primary-contrast);
+  vertical-align: text-bottom;
+  padding: 0;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--dynamic-blue-02);
+    color: var(--septenary-contrast);
+  }
+
+  mat-icon {
+    top: 2px;
+  }
+}
+
 .property-list {
   margin: 5px 5px 5px 15px;
   mat-tree-node {

diff --git a/...vtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts b/...vtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts
@@ -6,12 +6,12 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {ChangeDetectionStrategy, Component, input, output} from '@angular/core';
+import {MatIcon} from '@angular/material/icon';
 import {FlatTreeControl} from '@angular/cdk/tree';
-import {Component, input, output} from '@angular/core';
 
 import {FlatNode} from '../../property-resolver/element-property-resolver';
 import {PropertyDataSource} from '../../property-resolver/property-data-source';
-import {MatIcon} from '@angular/material/icon';
 import {PropertyEditorComponent} from './property-editor.component';
 import {PropertyPreviewComponent} from './property-preview.component';
 import {MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding} from '@angular/material/tree';
@@ -20,6 +20,7 @@ import {MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding} from '@angular
   selector: 'ng-property-view-tree',
   templateUrl: './property-view-tree.component.html',
   styleUrls: ['./property-view-tree.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     MatTree,
     MatTreeNode,