Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(devtools): display provider count on injector tree nodes (#63632)

Browse source 
Allows the tree visualizer to display a sublabel for each node.

Used by the injector tree to display provider count for each injector.

PR Close #63632
This commit is contained in:
AleksanderBodurri 2025-09-07 21:17:02 -04:00 committed by Jessica Janiuk
parent 950ffd001e
commit 4fa3b2673e
3 changed files with 27 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.ts
View file

@ -154,6 +154,12 @@ export function transformInjectorResolutionPathsIntoTree(
injector,
children: [],
};
if (injector.providers !== undefined) {
const providerText = injector.providers === 1 ? 'Provider' : 'Providers';
next.subLabel = `${injector.providers} ${providerText}`;
}
next.injector.node = injectorIdToNode.get(next.injector.id);
currentLevel.push(next);
currentLevel = next.children;

12
devtools/projects/ng-devtools/src/lib/shared/tree-visualizer/tree-visualizer.component.scss
View file

@ -17,6 +17,18 @@
background: var(--primary-contrast);
}
.sub-label {
background-color: #fff;
padding: 1px 4px;
bottom: -8px;
right: -2px;
font-size: 14px;
position: absolute;
border-radius: 50px;
color: #000;
outline: 1px solid #000;
}
.arrow {
fill: var(--full-contrast);
}

9
devtools/projects/ng-devtools/src/lib/shared/tree-visualizer/tree-visualizer.ts
View file

@ -18,6 +18,7 @@ const RESIZE_OBSERVER_DEBOUNCE = 250;
export interface TreeNode {
label: string;
subLabel?: string;
children: TreeNode[];
}
@ -270,6 +271,7 @@ export class TreeVisualizer<T extends TreeNode = TreeNode> extends GraphRenderer
.attr('y', -halfLabelHeight)
.append('xhtml:div')
.attr('class', 'node')
.style('position', 'relative')
.text((node: TreeD3Node<T>) => {
const label = node.data.label;
return label.length > MAX_NODE_LABEL_LENGTH
@ -277,6 +279,13 @@ export class TreeVisualizer<T extends TreeNode = TreeNode> extends GraphRenderer
: label;
});
d3Node.each(function (node: TreeD3Node<T>) {
const subLabel = node.data.subLabel;
if (subLabel) {
d3.select(this).append('div').attr('class', 'sub-label').text(subLabel);
}
});
this.config.d3NodeModifier(d3Node);
svg.attr('height', '100%').attr('width', '100%');