diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/ConnectionLines.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/ConnectionLines.tsx
index fd40592e987..fd44eda74a5 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/ConnectionLines.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/ConnectionLines.tsx
@@ -135,7 +135,7 @@ export function ConnectionLines({ connections, isDragging = false, selected, onC
return null;
}
const pointY = cardRect.top + cardRect.height / 2 - containerRect.top;
- return ;
+ return ;
})}
@@ -157,6 +157,10 @@ const getStyles = (theme: GrafanaTheme2, selected?: boolean) => ({
connectionGroup: css({
pointerEvents: 'auto',
cursor: 'pointer',
+ opacity: 0.7,
+ '&:hover': {
+ opacity: 1,
+ },
[theme.transitions.handleMotion('no-preference', 'reduce')]: {
animation: 'fadeIn 0.2s ease-in-out',
'@keyframes fadeIn': {
@@ -167,15 +171,27 @@ const getStyles = (theme: GrafanaTheme2, selected?: boolean) => ({
opacity: 1,
},
},
+ transition: theme.transitions.create(['opacity']),
},
}),
swimlane: css({
stroke: selected ? theme.colors.primary.border : theme.colors.text.maxContrast,
- strokeWidth: 4,
- opacity: 0.6,
+ strokeWidth: 2,
+ 'g:hover &': {
+ strokeWidth: 3,
+ },
+ [theme.transitions.handleMotion('no-preference', 'reduce')]: {
+ transition: theme.transitions.create(['strokeWidth']),
+ },
}),
point: css({
fill: selected ? theme.colors.primary.border : theme.colors.text.maxContrast,
- opacity: 0.8,
+ r: 4,
+ 'g:hover &': {
+ r: 6,
+ },
+ [theme.transitions.handleMotion('no-preference', 'reduce')]: {
+ transition: theme.transitions.create(['r']),
+ },
}),
});