fix(devtools): signal graph linkedSignal node UI (angular#64105)

Fix the colors of `linkedSignal`s. Use grayish colors for unknown/unhandled signals.

PR Close angular#64105

Author: hawkgs

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view/signals-details/signals-details.component.scss

@@ -68,7 +68,7 @@
         }
 
         &.type-computed {
-          background-color: var(--green-02);
+          background-color: var(--green-01);
         }
 
         &.type-effect {
@@ -78,6 +78,10 @@
         &.type-template {
           background-color: var(--gray-500);
         }
+
+        &.type-linked-signal {
+          background-color: var(--red-03);
+        }
       }
     }
   }

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

@@ -24,6 +24,7 @@ const TYPE_CLASS_MAP: {[key: string]: string} = {
   'computed': 'type-computed',
   'effect': 'type-effect',
   'template': 'type-template',
+  'linkedSignal': 'type-linked-signal',
 };
 
 @Component({

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

@@ -21,31 +21,36 @@
         text-align: center;
         word-wrap: break-word;
         border-radius: 8px;
-        background-color: var(--red-03);
+        background-color: var(--gray-400);
         cursor: pointer;
         transition: border-width 0.25s ease-in-out;
         border: 0px solid black;
+
         &.animating {
           border-width: 5px;
         }
+
         .header {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          padding: 3px;
-          background-color: var(--red-06);
+          padding: 3px 5px;
+          background-color: var(--gray-500);
 
           &.special {
             font-style: italic;
           }
         }
+
         .body {
           font-family: tg.$font-family-mono;
           font-size: 11px;
           padding: 5px;
-          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
       }
+
       .selected rect {
         stroke: var(--dynamic-blue-02);
         stroke-width: 3px;
@@ -55,28 +60,43 @@
 
       .kind-signal {
         background-color: var(--blue-02);
+
         .header {
           background-color: var(--blue-01);
         }
       }
+
       .kind-computed {
         background-color: var(--green-02);
+
         .header {
           background-color: var(--green-01);
         }
       }
+
       .kind-effect {
         background-color: var(--purple-02);
+
         .header {
           background-color: var(--purple-01);
         }
       }
+
       .kind-template {
         background-color: var(--gray-400);
+
         .header {
           background-color: var(--gray-700);
         }
       }
+
+      .kind-linked-signal {
+        background-color: var(--red-04);
+
+        .header {
+          background-color: var(--red-03);
+        }
+      }
     }
   }
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view/signals-visualizer.ts

@@ -10,6 +10,14 @@ import {DebugSignalGraph, DebugSignalGraphNode} from '../../../../../../protocol
 import * as d3 from 'd3';
 import {graphlib, render as dagreRender} from 'dagre-d3-es';
 
+const KIND_CLASS_MAP: {[key: string]: string} = {
+  'signal': 'kind-signal',
+  'computed': 'kind-computed',
+  'effect': 'kind-effect',
+  'template': 'kind-template',
+  'linkedSignal': 'kind-linked-signal',
+};
+
 export class SignalsGraphVisualizer {
   private graph: graphlib.Graph;
   private drender: ReturnType<typeof dagreRender>;
@@ -111,7 +119,7 @@ export class SignalsGraphVisualizer {
           cb(node);
         }
       };
-      outer.className = `node-label kind-${node.kind}`;
+      outer.className = `node-label ${KIND_CLASS_MAP[node.kind]}`;
       const header = document.createElement('div');
       let label = node.label;
       if (node.kind === 'effect') {