Repository: angular/angular
File: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view/signals-tab.component.ts (TypeScript)

Code before:
  private readonly frameManager = inject(FrameManager);

  protected readonly close = output<void>();

  // Source for selected node ID.
  // Use only for triggering behavior dependent on external node ID changes.
  protected readonly externallySelectedNodeId = input<{id: string} | null>(null);

  private readonly selectedNodeSource = computed<SelectedNodeSource>(() => ({
    element: this.signalGraph.element(),
    externallySelectedNodeId: this.externallySelectedNodeId()?.id ?? null,
  }));

  // Use a single source of truth for the selected node ID.
  // The selected node ID computation is triggered either
  // by an element (graph) change or externally selected node ID change.
  protected readonly selectedNodeId = linkedSignal<SelectedNodeSource, string | null>({
    source: this.selectedNodeSource,
    computation: (source, prev) => {
      // If the element changes, this means we have a new graph => reset
      if (prev?.value && source.element !== prev.source.element) {
        return null;
      }
      // In all other cases (e.g. initialization,  externally selected node change),
      // use the externally selected node as a value.
      return source?.externallySelectedNodeId;
    },
  });

  protected selectedNode = computed(() => {
    const signalGraph = this.signalGraph.graph();
    if (!signalGraph) {
      return undefined;
    }
    const selectedNodeId = this.selectedNodeId();
    if (!selectedNodeId) {
      return undefined;
    }
    return signalGraph.nodes.find((node) => node.id === selectedNodeId);
  });

  protected readonly detailsVisible = signal(false);

  protected empty = computed(() => !(this.signalGraph.graph()?.nodes.length! > 0));

  onNodeClick(node: DevtoolsSignalGraphNode) {
    this.selectedNodeId.set(node.id);
    this.detailsVisible.set(true);
  }

  gotoSource(node: DevtoolsSignalGraphNode) {

Review comment (suggestion):
this can return `undefined` right ? I'm surprised the type signature allows that. 

Code after:
  private readonly frameManager = inject(FrameManager);

  protected readonly close = output<void>();

  // Source for selected node ID.
  // Use only for triggering behavior dependent on external node ID changes.
  protected readonly externallySelectedNodeId = input<{id: string} | null>(null);

  private readonly selectedNodeSource = computed<SelectedNodeSource>(() => ({
    element: this.signalGraph.element(),
    externallySelectedNodeId: this.externallySelectedNodeId()?.id ?? null,
  }));

  // Use a single source of truth for the selected node ID.
  // The selected node ID computation is triggered either
  // by an element (graph) change or externally selected node ID change.
  protected readonly selectedNodeId = linkedSignal<SelectedNodeSource, string | null>({
    source: this.selectedNodeSource,
    computation: (source, prev) => {
      // If the element changes, this means we have a new graph => reset
      if (prev?.value && source.element !== prev.source.element) {
        return null;
      }
      // In all other cases (e.g. initialization,  externally selected node change),
      // use the externally selected node as a value.
      return source.externallySelectedNodeId;
    },
  });

  protected selectedNode = computed(() => {
    const signalGraph = this.signalGraph.graph();
    if (!signalGraph) {
      return undefined;
    }
    const selectedNodeId = this.selectedNodeId();
    if (!selectedNodeId) {
      return undefined;
    }
    return signalGraph.nodes.find((node) => node.id === selectedNodeId);
  });

  protected readonly detailsVisible = signal(false);

  protected empty = computed(() => !(this.signalGraph.graph()?.nodes.length! > 0));

  onNodeClick(node: DevtoolsSignalGraphNode) {
    this.selectedNodeId.set(node.id);
    this.detailsVisible.set(true);
  }

  gotoSource(node: DevtoolsSignalGraphNode) {