[Security Solution][Resolver] Replace Selectable popover with badges (#…

…76997) (#77257)

* replace selectable/popover with badges

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/security_solution/public/resolver/view/assets.tsx

@@ -24,7 +24,8 @@ type ResolverColorNames =
  | 'resolverBackground'
  | 'resolverEdge'
  | 'resolverEdgeText'
- | 'resolverBreadcrumbBackground';
+ | 'resolverBreadcrumbBackground'
+ | 'pillStroke';
 
 type ColorMap = Record<ResolverColorNames, string>;
 interface NodeStyleConfig {
@@ -438,6 +439,7 @@ export const useResolverTheme = (): {
  resolverBreadcrumbBackground: theme.euiColorLightestShade,
  resolverEdgeText: getThemedOption(theme.euiColorDarkShade, theme.euiColorFullShade),
  triggerBackingFill: `${theme.euiColorDanger}${getThemedOption('0F', '1F')}`,
+ pillStroke: theme.euiColorLightShade,
  };
 
  const nodeAssets: NodeStyleMap = {

x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx

@@ -38,6 +38,7 @@ const StyledActionsContainer = styled.div<StyledActionsContainer>`
  position: absolute;
  top: ${(props) => `${props.topPct}%`};
  width: auto;
+ pointer-events: all;
 `;
 
 interface StyledDescriptionText {
@@ -61,6 +62,11 @@ const StyledDescriptionText = styled.div<StyledDescriptionText>`
  width: fit-content;
 `;
 
+const StyledOuterGroup = styled.g`
+ fill: none;
+ pointer-events: visiblePainted;
+`;
+
 /**
  * An artifact that represents a process node and the things associated with it in the Resolver
  */
@@ -329,6 +335,7 @@ const UnstyledProcessEventDot = React.memo(
  }
  role="img"
  aria-labelledby={labelHTMLID}
+ fill="none"
  style={{
  display: 'block',
  width: '100%',
@@ -338,9 +345,10 @@ const UnstyledProcessEventDot = React.memo(
  left: '0',
  outline: 'transparent',
  border: 'none',
+ pointerEvents: 'none',
  }}
  >
- <g>
+ <StyledOuterGroup>
  <use
  xlinkHref={`#${SymbolIds.processCubeActiveBacking}`}
  fill={backingFill} // Only visible on hover
@@ -372,7 +380,7 @@ const UnstyledProcessEventDot = React.memo(
  ref={animationTarget}
  />
  </use>
- </g>
+ </StyledOuterGroup>
  </svg>
  <StyledActionsContainer
  color={colorMap.full}
@@ -464,6 +472,7 @@ export const ProcessEventDot = styled(UnstyledProcessEventDot)`
  min-width: 280px;
  min-height: 90px;
  overflow-y: visible;
+ pointer-events: none;
 
  //dasharray & dashoffset should be equal to "pull" the stroke back
  //when it is transitioned.