fix(devtools): fix incorrect styling of nodes between renders (angular#63979)

Previously, the router tree would not properly clean up css classes placed on nodes which would lead to some nodes being incorrectly visualized after each update.

PR Close angular#63979

Author: AleksanderBodurri

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

@@ -163,9 +163,19 @@ export class RouterTreeComponent {
 
   private d3NodeModifier(d3Node: SvgD3Node<RouterTreeNode>) {
     d3Node.attr('class', (node: RouterTreeD3Node) => {
-      // Since `node-faded` could pre-exist, drop it if the node is a match.
-      const classNames = d3Node.attr('class').replace('node-faded', '');
-      const nodeClasses = [classNames];
+      // Drop all class labels and recompute them.
+      const classesToRemove = new Set([
+        'node-faded',
+        'node-element',
+        'node-lazy',
+        'node-search',
+        'node-environment',
+      ]);
+
+      const nodeClasses = d3Node
+        .attr('class')
+        .split(' ')
+        .filter((cls) => !classesToRemove.has(cls));
 
       if (node.data.isActive) {
         nodeClasses.push('node-element');