feat(devtools): add resource visualization to the signal graph

Convert the signal graph to a Devtools-FE-specific signal graph that supports clusters; Add support for `resource` clusters; Introduce some improvements to the signal graph viz

Author: hawkgs

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/BUILD.bazel

@@ -30,7 +30,7 @@ ng_project(
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph:signal-graph-manager",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view:signals-tab",
         "//devtools/projects/ng-devtools/src/lib/shared/object-tree-explorer:types",
         "//devtools/projects/ng-devtools/src/lib/shared/split",
@@ -54,7 +54,7 @@ ts_test_library(
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph:signal-graph-manager",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph",
         "//devtools/projects/ng-devtools/src/lib/shared/object-tree-explorer:types",
         "//devtools/projects/protocol",
     ],

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts

@@ -23,7 +23,6 @@ import {
 import {
   ComponentExplorerView,
   ComponentExplorerViewQuery,
-  DebugSignalGraphNode,
   DevToolsNode,
   DirectivePosition,
   ElementPosition,
@@ -56,6 +55,7 @@ import {SplitAreaDirective} from '../../shared/split/splitArea.directive';
 import {SplitComponent} from '../../shared/split/split.component';
 import {Direction} from '../../shared/split/interface';
 import {SignalGraphManager} from './signal-graph/signal-graph-manager';
+import {DevtoolsSignalGraphNode} from './signal-graph';
 
 const FOREST_VER_SPLIT_SIZE = 30;
 const SIGNAL_GRAPH_VER_SPLIT_SIZE = 70;
@@ -388,7 +388,7 @@ export class DirectiveExplorerComponent {
     }
   }
 
-  showSignalGraph(node: DebugSignalGraphNode | null) {
+  showSignalGraph(node: DevtoolsSignalGraphNode | null) {
     if (node) {
       this.preselectedSignalNodeId.set(node.id);
     }

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel

@@ -22,6 +22,7 @@ ng_project(
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph",
         "//devtools/projects/ng-devtools/src/lib/shared/object-tree-explorer:types",
         "//devtools/projects/protocol",
     ],

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts

@@ -7,13 +7,14 @@
  */
 
 import {ChangeDetectionStrategy, Component, computed, input, output} from '@angular/core';
-import {DebugSignalGraphNode, DirectivePosition} from '../../../../../../protocol';
+import {DirectivePosition} from '../../../../../../protocol';
 
 import {IndexedNode} from '../directive-forest/index-forest';
 import {PropertyTabHeaderComponent} from './property-tab-header/property-tab-header.component';
 import {DeferViewComponent} from './defer-view/defer-view.component';
 import {PropertyViewComponent} from './property-view/property-view.component';
 import {FlatNode} from '../../../shared/object-tree-explorer/object-tree-types';
+import {DevtoolsSignalGraphNode} from '../signal-graph';
 
 @Component({
   selector: 'ng-property-tab',
@@ -27,7 +28,7 @@ export class PropertyTabComponent {
 
   readonly viewSource = output<string>();
   readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
-  readonly showSignalGraph = output<DebugSignalGraphNode | null>();
+  readonly showSignalGraph = output<DevtoolsSignalGraphNode | null>();
 
   readonly currentDirectives = computed(() => {
     const selected = this.currentSelectedElement();

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel

@@ -21,6 +21,7 @@ ng_project(
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph",
         "//devtools/projects/ng-devtools/src/lib/shared/object-tree-explorer:types",
         "//devtools/projects/protocol",
     ],

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/BUILD.bazel

@@ -26,7 +26,7 @@ ng_project(
         "//devtools/projects/ng-devtools/src/lib/application-providers:supported_apis",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph:signal-graph-manager",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph",
         "//devtools/projects/ng-devtools/src/lib/shared/docs-ref-button",
         "//devtools/projects/ng-devtools/src/lib/shared/object-tree-explorer",
         "//devtools/projects/ng-devtools/src/lib/shared/object-tree-explorer:types",

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts

@@ -33,6 +33,7 @@ import {SUPPORTED_APIS} from '../../../../../application-providers/supported_api
 
 import {SignalGraphManager} from '../../../signal-graph/signal-graph-manager';
 import {FlatNode} from '../../../../../shared/object-tree-explorer/object-tree-types';
+import {DevtoolsSignalGraphNode} from '../../../signal-graph';
 
 @Component({
   selector: 'ng-property-view-body',
@@ -63,7 +64,7 @@ export class PropertyViewBodyComponent {
   readonly directiveStateControls = input.required<DirectiveTreeData>();
 
   readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
-  readonly showSignalGraph = output<DebugSignalGraphNode>();
+  readonly showSignalGraph = output<DevtoolsSignalGraphNode>();
 
   protected readonly dependencies = computed(() => {
     const metadata = this.controller().directiveMetadata;
@@ -120,7 +121,7 @@ export class PropertyViewBodyComponent {
     });
   }
 
-  getSignalNode(node: FlatNode): DebugSignalGraphNode | null {
+  getSignalNode(node: FlatNode): DevtoolsSignalGraphNode | null {
     if (node.prop.descriptor.containerType?.includes('Signal')) {
       return this.signalGraph.graph()?.nodes.find((sn) => sn.label === node.prop.name) ?? null;
     }

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts

@@ -7,12 +7,13 @@
  */
 
 import {ChangeDetectionStrategy, Component, computed, inject, input, output} from '@angular/core';
-import {DebugSignalGraphNode, DirectivePosition} from '../../../../../../../protocol';
+import {DirectivePosition} from '../../../../../../../protocol';
 
 import {ElementPropertyResolver} from '../../property-resolver/element-property-resolver';
 import {PropertyViewBodyComponent} from './property-view-body/property-view-body.component';
 import {PropertyViewHeaderComponent} from './property-view-header/property-view-header.component';
 import {FlatNode} from '../../../../shared/object-tree-explorer/object-tree-types';
+import {DevtoolsSignalGraphNode} from '../../signal-graph';
 
 @Component({
   selector: 'ng-property-view',
@@ -26,7 +27,7 @@ export class PropertyViewComponent {
 
   readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
   readonly viewSource = output<void>();
-  readonly showSignalGraph = output<DebugSignalGraphNode>();
+  readonly showSignalGraph = output<DevtoolsSignalGraphNode>();
 
   handleLogInstance(): void {
     const controller = this.controller();

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph/BUILD.bazel

@@ -3,8 +3,13 @@ load("//devtools/tools:defaults.bzl", "ng_project", "ts_test_library", "zoneless
 package(default_visibility = ["//devtools:__subpackages__"])
 
 ng_project(
-    name = "signal-graph-manager",
-    srcs = ["signal-graph-manager.ts"],
+    name = "signal-graph",
+    srcs = glob(
+        ["*.ts"],
+        exclude = [
+            "*.spec.ts",
+        ],
+    ),
     deps = [
         "//:node_modules/@angular/core",
         "//devtools/projects/protocol",
@@ -15,7 +20,7 @@ ts_test_library(
     name = "test_lib",
     srcs = glob(["*.spec.ts"]),
     deps = [
-        ":signal-graph-manager",
+        ":signal-graph",
         "//:node_modules/@angular/core",
         "//devtools/projects/protocol",
     ],