Fixes to service map single node banner

* Make the banner 95% width so it takes up the full width
* Check the actual count of cytoscape nodes to determine whether or not to show the banner
* Make the Cytoscape component able to take a function as children so we can access the cytoscape instance directly
* Update the .NET icon

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx

@@ -4,29 +4,29 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import cytoscape from 'cytoscape';
 import React, {
+  createContext,
   CSSProperties,
-  useState,
-  useRef,
-  useEffect,
   ReactNode,
-  createContext,
-  useCallback
+  useCallback,
+  useEffect,
+  useRef,
+  useState
 } from 'react';
-import cytoscape from 'cytoscape';
 import { isRumAgentName } from '../../../../../../../plugins/apm/common/agent_name';
 import {
+  animationOptions,
   cytoscapeOptions,
-  nodeHeight,
-  animationOptions
+  nodeHeight
 } from './cytoscapeOptions';
 
 export const CytoscapeContext = createContext<cytoscape.Core | undefined>(
   undefined
 );
 
 interface CytoscapeProps {
-  children?: ReactNode;
+  children?: (cy?: cytoscape.Core) => ReactNode | ReactNode;
   elements: cytoscape.ElementDefinition[];
   height: number;
   width: number;
@@ -175,7 +175,7 @@ export function Cytoscape({
   return (
     <CytoscapeContext.Provider value={cy}>
       <div ref={ref} style={divStyle}>
-        {children}
+        {typeof children === 'function' ? children(cy) : children}
       </div>
     </CytoscapeContext.Provider>
   );

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx

@@ -19,6 +19,7 @@ const EmptyBannerCallOut = styled(EuiCallOut)`
       ${lightTheme.gutterTypes.gutterExtraLarge}
   );
   position: absolute;
+  width: 95%;
   z-index: 1;
 `;
 

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx

@@ -201,7 +201,7 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
   if (!license) {
     return null;
   }
-
+  console.log({ elements, renderedElements: renderedElements.current });
   return isValidPlatinumLicense(license) ? (
     <div
       style={{ height: height - parseInt(theme.gutterTypes.gutterLarge, 10) }}
@@ -214,11 +214,15 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
         width={width}
         style={cytoscapeDivStyle}
       >
-        <Controls />
-        {serviceName && renderedElements.current.length === 1 && (
-          <EmptyBanner />
-        )}
-        <Popover focusedServiceName={serviceName} />
+        {cy => {
+          return (
+            <>
+              <Controls />
+              {serviceName && cy?.nodes().length === 1 && <EmptyBanner />}
+              <Popover focusedServiceName={serviceName} />
+            </>
+          );
+        }}
       </Cytoscape>
     </div>
   ) : (