Skip to content

Commit b46017a

Browse files
jpinsonneaujpinsonneau
committed
fix node decorators
1 parent 81835a6 commit b46017a

File tree

3 files changed

+37
-33
lines changed

3 files changed

+37
-33
lines changed

‎web/src/components/tabs/netflow-topology/2d/styles/styleDecorator.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ type Reference = React.ComponentProps<typeof ContextMenu>['reference'];
66

77
type ClickableDecoratorProps = {
88
pos: { x: number; y: number };
9-
icon: React.ReactNode;
9+
icon: React.ReactElement;
1010
tooltip: string;
1111
isActive: boolean;
1212
onClick: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
@@ -21,8 +21,10 @@ export const ClickableDecorator: React.FC<ClickableDecoratorProps> = ({
2121
onClick,
2222
padding
2323
}) => {
24+
const ref = React.useRef<SVGGElement>(null);
25+
2426
return (
25-
<Tooltip content={tooltip} position={TooltipPosition.right}>
27+
<>
2628
<Decorator
2729
x={pos.x}
2830
y={pos.y}
@@ -32,8 +34,10 @@ export const ClickableDecorator: React.FC<ClickableDecoratorProps> = ({
3234
icon={icon}
3335
className={isActive ? 'selected-decorator' : ''}
3436
onClick={onClick}
37+
innerRef={ref}
3538
/>
36-
</Tooltip>
39+
<Tooltip content={tooltip} position={TooltipPosition.right} triggerRef={ref} />
40+
</>
3741
);
3842
};
3943

‎web/src/components/tabs/netflow-topology/2d/styles/styleNode.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ const StyleNode: React.FC<StyleNodeProps> = ({ element, showLabel, dragging, get
138138
showStatusDecorator={detailsLevel === ScaleDetailsLevel.high && passedData.showStatusDecorator}
139139
statusDecoratorTooltip={nodeElement.getNodeStatus()}
140140
attachments={
141-
(hover || detailsLevel === ScaleDetailsLevel.high) && (
141+
(hover || updatedRest.selected) && (
142142
<NodeDecorators
143143
element={element}
144144
data={data}

‎web/src/components/tabs/netflow-topology/2d/topology-content.css‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
.selected-decorator>g>.pf-v5-topology__node__decorator__icon>svg {
2-
fill: white;
1+
.selected-decorator>g>.pf-topology__node__decorator__icon>svg {
2+
fill: white !important;
33
}
44

55
.selected-decorator>circle {
6-
fill: #06c;
6+
fill: #06c !important;
77
}
88

99
#topology-search-result-count {
@@ -17,86 +17,86 @@
1717
width: 250px;
1818
}
1919

20-
span.pf-v5-topology-control-bar {
20+
span.pf-topology-control-bar {
2121
left: 0;
2222
}
2323

2424
g.netobserv.topology.shadowed {
2525
opacity: 0.5;
2626
}
2727

28-
g.netobserv.topology.pf-v5-topology__edge>.pf-v5-topology__edge__background {
28+
g.netobserv.topology.pf-topology__edge>.pf-topology__edge__background {
2929
stroke-width: 6px;
3030
}
3131

32-
g.netobserv.topology.pf-v5-topology__edge.dark>.pf-v5-topology__edge__tag>.pf-v5-topology__edge__tag__background{
32+
g.netobserv.topology.pf-topology__edge.dark>.pf-topology__edge__tag>.pf-topology__edge__tag__background{
3333
fill: #E0E0E0;
3434
}
3535

36-
g.netobserv.topology.pf-v5-topology__edge>.pf-v5-topology__edge__link,
37-
g.netobserv.topology.pf-v5-topology__edge>.pf-v5-topology-connector-arrow {
36+
g.netobserv.topology.pf-topology__edge>.pf-topology__edge__link,
37+
g.netobserv.topology.pf-topology__edge>.pf-topology-connector-arrow {
3838
stroke: #6A6E73;
3939
fill: #E0E0E0;
4040
}
4141

42-
g.netobserv.topology.pf-v5-topology__edge.dark>.pf-v5-topology__edge__link,
43-
g.netobserv.topology.pf-v5-topology__edge.dark>.pf-v5-topology-connector-arrow {
42+
g.netobserv.topology.pf-topology__edge.dark>.pf-topology__edge__link,
43+
g.netobserv.topology.pf-topology__edge.dark>.pf-topology-connector-arrow {
4444
stroke: #E0E0E0;
4545
fill: #6A6E73;
4646
}
4747

48-
g.netobserv.topology.node-filtered>g>.pf-v5-topology__node__background {
48+
g.netobserv.topology.node-filtered>g>.pf-topology__node__background {
4949
stroke: #EF9234;
5050
stroke-width: 2px;
5151
}
5252

53-
g.netobserv.topology.pf-v5-topology__edge.edge-filtered>.pf-v5-topology__edge__link,
54-
g.netobserv.topology.pf-v5-topology__edge.edge-filtered>.pf-v5-topology-connector-arrow,
55-
g.netobserv.topology.pf-v5-topology__edge.edge-filtered.dark>.pf-v5-topology__edge__link,
56-
g.netobserv.topology.pf-v5-topology__edge.edge-filtered.dark>.pf-v5-topology-connector-arrow {
53+
g.netobserv.topology.pf-topology__edge.edge-filtered>.pf-topology__edge__link,
54+
g.netobserv.topology.pf-topology__edge.edge-filtered>.pf-topology-connector-arrow,
55+
g.netobserv.topology.pf-topology__edge.edge-filtered.dark>.pf-topology__edge__link,
56+
g.netobserv.topology.pf-topology__edge.edge-filtered.dark>.pf-topology-connector-arrow {
5757
stroke: #EF9234;
5858
fill: #773D00;
5959
}
6060

61-
g.netobserv.topology.pf-v5-topology__edge.edge-has-drops>.pf-v5-topology__edge__link,
62-
g.netobserv.topology.pf-v5-topology__edge.edge-has-drops>.pf-v5-topology-connector-arrow,
63-
g.netobserv.topology.pf-v5-topology__edge.edge-has-drops.dark>.pf-v5-topology__edge__link,
64-
g.netobserv.topology.pf-v5-topology__edge.edge-has-drops.dark>.pf-v5-topology-connector-arrow {
61+
g.netobserv.topology.pf-topology__edge.edge-has-drops>.pf-topology__edge__link,
62+
g.netobserv.topology.pf-topology__edge.edge-has-drops>.pf-topology-connector-arrow,
63+
g.netobserv.topology.pf-topology__edge.edge-has-drops.dark>.pf-topology__edge__link,
64+
g.netobserv.topology.pf-topology__edge.edge-has-drops.dark>.pf-topology-connector-arrow {
6565
stroke: #C9190B;
6666
fill: #A30000;
6767
}
6868

69-
g.netobserv.topology>g>.pf-v5-topology__node__background {
69+
g.netobserv.topology>g>.pf-topology__node__background {
7070
fill: #FFFFFF;
7171
}
7272

73-
g.netobserv.topology.dark>g>.pf-v5-topology__node__background {
73+
g.netobserv.topology.dark>g>.pf-topology__node__background {
7474
fill: #26292D;
7575
}
7676

77-
g.netobserv.topology.node-highlighted>g>.pf-v5-topology__node__background {
77+
g.netobserv.topology.node-highlighted>g>.pf-topology__node__background {
7878
stroke: #0066CC;
7979
stroke-width: 2px;
8080
}
8181

82-
g.netobserv.topology.pf-v5-topology__edge.edge-highlighted>.pf-v5-topology__edge__link,
83-
g.netobserv.topology.pf-v5-topology__edge.edge-highlighted>.pf-v5-topology-connector-arrow,
84-
g.netobserv.topology.pf-v5-topology__edge.edge-highlighted.dark>.pf-v5-topology__edge__link,
85-
g.netobserv.topology.pf-v5-topology__edge.edge-highlighted.dark>.pf-v5-topology-connector-arrow {
82+
g.netobserv.topology.pf-topology__edge.edge-highlighted>.pf-topology__edge__link,
83+
g.netobserv.topology.pf-topology__edge.edge-highlighted>.pf-topology-connector-arrow,
84+
g.netobserv.topology.pf-topology__edge.edge-highlighted.dark>.pf-topology__edge__link,
85+
g.netobserv.topology.pf-topology__edge.edge-highlighted.dark>.pf-topology-connector-arrow {
8686
stroke: #0066CC;
8787
fill: #002952;
8888
}
8989

90-
g.netobserv.pf-v5-topology__group>.pf-v5-topology__group__background {
90+
g.netobserv.pf-topology__group>.pf-topology__group__background {
9191
fill: #D2D2D2;
9292
fill-opacity: 0.5;
9393
}
9494

95-
g.netobserv.pf-v5-topology__group.pf-v5-m-hover>.pf-v5-topology__group__background {
95+
g.netobserv.pf-topology__group.pf-v5-m-hover>.pf-topology__group__background {
9696
stroke: #4F5255;
9797
}
9898

99-
g.netobserv.pf-v5-topology__group.pf-v5-m-selected>.pf-v5-topology__group__background {
99+
g.netobserv.pf-topology__group.pf-v5-m-selected>.pf-topology__group__background {
100100
stroke: #0066CC;
101101
fill: #A5C4E2;
102102
}

0 commit comments

Comments
 (0)