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

* replace selectable/popover with badges

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

Author: bkimmel

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.