refactor(devtools): stabilize signal graph (angular#64263)

remove experimental signal graph toggle, enable the signal graph by default if it is available

PR Close angular#64263

Author: milomg

devtools/projects/ng-devtools/src/lib/application-services/settings.ts

@@ -33,12 +33,6 @@ export class Settings {
     initialValue: false,
   });
 
-  readonly signalGraphEnabled = this.settingsStore.create({
-    key: 'signal_graph_enabled',
-    category: 'general',
-    initialValue: false,
-  });
-
   readonly transferStateEnabled = this.settingsStore.create({
     key: 'transfer_state_enabled',
     category: 'general',

devtools/projects/ng-devtools/src/lib/application-services/test-utils/settings_mock.ts

@@ -14,7 +14,6 @@ import {ThemePreference} from '../theme_types';
 export class SettingsMock extends Settings {
   routerGraphEnabled = signal(false);
   showCommentNodes = signal(false);
-  signalGraphEnabled = signal(false);
   timingAPIEnabled = signal(false);
   theme = signal<ThemePreference>('system');
   activeTab = signal('Components');

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html

@@ -132,15 +132,6 @@
         <span class="ng-mat-menu-label-text">Enable Router Tree</span>
       </label>
     }
-    @if (supportedApis().signals) {
-      <label mat-menu-item disableRipple>
-        <mat-slide-toggle
-          [checked]="signalGraphEnabled()"
-          (change)="setSignalGraph($event.checked)"
-        />
-        <span class="ng-mat-menu-label-text">Enable Signal Graph (experimental)</span>
-      </label>
-    }
     @if (supportedApis().transferState) {
       <label mat-menu-item disableRipple>
         <mat-slide-toggle

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

@@ -84,7 +84,7 @@ export class DevToolsTabsComponent {
   protected readonly showCommentNodes = this.settings.showCommentNodes;
   protected readonly routerGraphEnabled = this.settings.routerGraphEnabled;
   protected readonly timingAPIEnabled = this.settings.timingAPIEnabled;
-  protected readonly signalGraphEnabled = this.settings.signalGraphEnabled;
+  protected readonly signalGraphEnabled = () => this.supportedApis().signals;
   protected readonly transferStateEnabled = this.settings.transferStateEnabled;
   protected readonly activeTab = this.settings.activeTab;
 
@@ -202,10 +202,6 @@ export class DevToolsTabsComponent {
     }
   }
 
-  protected setSignalGraph(enabled: boolean): void {
-    this.signalGraphEnabled.set(enabled);
-  }
-
   protected setTransferStateTab(enabled: boolean): void {
     this.transferStateEnabled.set(enabled);
     if (!enabled && this.activeTab() === 'Transfer State') {

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

@@ -22,6 +22,7 @@ ng_project(
     deps = [
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/material",
+        "//devtools/projects/ng-devtools/src/lib/application-providers:supported_apis",
         "//devtools/projects/ng-devtools/src/lib/application-services:settings",
         "//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-tab/property-tab-header/component-metadata",

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

@@ -14,6 +14,7 @@ import {IndexedNode} from '../../directive-forest/index-forest';
 import {ComponentMetadataComponent} from './component-metadata/component-metadata.component';
 import {ButtonComponent} from '../../../../shared/button/button.component';
 import {Settings} from '../../../../application-services/settings';
+import {SUPPORTED_APIS} from '../../../../application-providers/supported_apis';
 
 @Component({
   templateUrl: './property-tab-header.component.html',
@@ -24,11 +25,12 @@ import {Settings} from '../../../../application-services/settings';
 })
 export class PropertyTabHeaderComponent {
   private readonly settings = inject(Settings);
+  private readonly supportedApis = inject(SUPPORTED_APIS);
 
   protected readonly currentSelectedElement = input.required<IndexedNode>();
   protected readonly showSignalGraph = output<void>();
 
   protected readonly expanded = signal(false);
 
-  protected readonly signalGraphEnabled = this.settings.signalGraphEnabled;
+  protected readonly signalGraphEnabled = () => this.supportedApis().signals;
 }

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

@@ -42,7 +42,6 @@ import {Settings} from '../../../../../../application-services/settings';
 export class PropertyViewTreeComponent {
   protected readonly supportedApis = inject(SUPPORTED_APIS);
   private readonly signalGraph = inject(SignalGraphManager);
-  private readonly settings = inject(Settings);
 
   readonly dataSource = input.required<PropertyDataSource>();
   readonly treeControl = input.required<FlatTreeControl<FlatNode>>();
@@ -51,7 +50,7 @@ export class PropertyViewTreeComponent {
   readonly logValue = output<FlatNode>();
   readonly showSignalGraph = output<DebugSignalGraphNode>();
 
-  protected readonly signalGraphEnabled = this.settings.signalGraphEnabled;
+  protected readonly signalGraphEnabled = () => this.supportedApis().signals;
 
   hasChild = (_: number, node: FlatNode): boolean => node.expandable;