fix(devtools): refine when signal graph button is shown

Show the signal graph button only when a signal-graph-eligible node from the directive explorer is selected; Fix client app error when a `defer` node is selected (related)

devtools/cypress/integration/view-component-metadata.e2e.js

@@ -8,7 +8,7 @@
 
 const prepareHeaderExpansionPanelForAssertions = (selector) => {
   cy.get('.tree-wrapper').find(selector).first().click({force: true});
-  cy.get('.element-header .component-name').click();
+  cy.get('.node-header .component-name').click();
 };
 
 describe('Viewing component metadata', () => {

devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts

@@ -654,12 +654,14 @@ const getSignalGraphCallback = (messageBus: MessageBus<Events>) => (element: Ele
     initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest(),
   );
   if (!node) {
+    messageBus.emit('latestSignalGraph', [null]);
     return;
   }
 
   const injector = getInjectorFromElementNode(node.nativeElement!);
 
   if (!injector) {
+    messageBus.emit('latestSignalGraph', [null]);
     return;
   }
 

devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.ts

@@ -76,7 +76,11 @@ export function getInjectorResolutionPath(injector: Injector): Injector[] {
 }
 
 export function getInjectorFromElementNode(element: Node): Injector | null {
-  return ngDebugClient().getInjector?.(element) ?? null;
+  try {
+    return ngDebugClient().getInjector?.(element) ?? null;
+  } catch {
+    return null;
+  }
 }
 
 function getDirectivesFromElement(element: HTMLElement): {

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

@@ -4,7 +4,7 @@
     <mat-expansion-panel [hideToggle]="true" [expanded]="expanded()" disabled>
       <mat-expansion-panel-header collapsedHeight="32px" expandedHeight="32px">
         <mat-panel-title>
-          <div class="element-header">
+          <div class="node-header">
             <button
               class="component-name"
               (click)="expanded.set(!expanded())"
@@ -31,18 +31,7 @@
     </mat-expansion-panel>
   </mat-accordion>
 } @else {
-  <div class="element-header">
-    <div class="element-name">{{ currentSelectedElement().element }}</div>
-    @if (signalGraphEnabled()) {
-      <button
-        ng-button
-        type="button"
-        class="signal-btn"
-        size="compact"
-        (click)="showSignalGraph.emit()"
-      >
-        Show Signal Graph
-      </button>
-    }
+  <div class="node-header">
+    <div class="non-component-name">{{ currentSelectedElement().element }}</div>
   </div>
 }

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

@@ -8,7 +8,7 @@
     width: 100%;
   }
 
-  .element-header {
+  .node-header {
     @extend %body-bold-01;
     display: flex;
     justify-content: space-between;

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

@@ -13,7 +13,6 @@ import {MatIcon} from '@angular/material/icon';
 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({
@@ -24,7 +23,6 @@ import {SUPPORTED_APIS} from '../../../../application-providers/supported_apis';
   imports: [MatExpansionModule, MatIcon, ComponentMetadataComponent, ButtonComponent],
 })
 export class PropertyTabHeaderComponent {
-  private readonly settings = inject(Settings);
   private readonly supportedApis = inject(SUPPORTED_APIS);
 
   protected readonly currentSelectedElement = input.required<IndexedNode>();

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

@@ -59,7 +59,7 @@
     }
   }
 
-  .mat-accordion-content:not(:empty):not(:last-child) {
-    border-bottom: 1px solid var(--color-separator);
+  .mat-accordion-content:not(:empty) {
+    border-top: 1px solid var(--color-separator);
   }
 }

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

@@ -8,7 +8,6 @@ mat-toolbar {
   overflow: hidden;
   line-height: 25px;
   height: auto;
-  border-bottom: 1px solid var(--color-separator);
 
   .button-wrapper {
     display: flex;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph/signal-graph-manager.ts

@@ -29,8 +29,9 @@ export class SignalGraphManager {
   constructor() {
     this.lastesSignalGraphMessageUnlistenFn = this.messageBus.on(
       'latestSignalGraph',
-      (graph: DebugSignalGraph) => {
-        this.signalGraph.set(graph);
+      (graph: DebugSignalGraph | null) => {
+        // TODO(hawkgs): Drop logical or after/in resource viz PR.
+        this.signalGraph.set(graph || {nodes: [], edges: []});
       },
     );
   }

devtools/projects/protocol/src/lib/messages.ts

@@ -381,7 +381,7 @@ export interface Events {
   inspectorEnd: () => void;
 
   getSignalGraph: (query: ElementPosition) => void;
-  latestSignalGraph: (graph: DebugSignalGraph) => void;
+  latestSignalGraph: (graph: DebugSignalGraph | null) => void;
 
   getSignalNestedProperties: (position: SignalNodePosition, path: string[]) => void;
   signalNestedProperties: (position: SignalNodePosition, data: Properties, path: string[]) => void;