Set service map cursors (#80920)

* Set service map cursors

* "pointer" when mousing over a node
* "default" when mousing out
* "grabbing" while dragging

Sets the cursor style on the container, not on the individual element.

Since the node can both be clicked (to open a popover) and dragged, I left the cursor on hover as "pointer" to indicate the clickability.

Fixes #64283.

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

@@ -14,7 +14,7 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
 import { getAPMHref } from '../../shared/Links/apm/APMLink';
 import { APMQueryParams } from '../../shared/Links/url_helpers';
 import { CytoscapeContext } from './Cytoscape';
-import { getAnimationOptions, getNodeHeight } from './cytoscapeOptions';
+import { getAnimationOptions, getNodeHeight } from './cytoscape_options';
 
 const ControlsContainer = styled('div')`
   left: ${({ theme }) => theme.eui.gutterTypes.gutterMedium};

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

@@ -17,7 +17,7 @@ import React, {
   useState,
 } from 'react';
 import { useTheme } from '../../../hooks/useTheme';
-import { getCytoscapeOptions } from './cytoscapeOptions';
+import { getCytoscapeOptions } from './cytoscape_options';
 import { useCytoscapeEventHandlers } from './use_cytoscape_event_handlers';
 
 cytoscape.use(dagre);

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/AnomalyDetection.tsx

@@ -22,7 +22,7 @@ import { useTheme } from '../../../../hooks/useTheme';
 import { fontSize, px } from '../../../../style/variables';
 import { asInteger, asDuration } from '../../../../../common/utils/formatters';
 import { MLJobLink } from '../../../shared/Links/MachineLearningLinks/MLJobLink';
-import { popoverWidth } from '../cytoscapeOptions';
+import { popoverWidth } from '../cytoscape_options';
 import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types';
 import {
   getSeverity,

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx

@@ -15,7 +15,7 @@ import React, { MouseEvent } from 'react';
 import { Buttons } from './Buttons';
 import { Info } from './Info';
 import { ServiceStatsFetcher } from './ServiceStatsFetcher';
-import { popoverWidth } from '../cytoscapeOptions';
+import { popoverWidth } from '../cytoscape_options';
 
 interface ContentsProps {
   isService: boolean;

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

@@ -18,7 +18,7 @@ import cytoscape from 'cytoscape';
 import { useTheme } from '../../../../hooks/useTheme';
 import { SERVICE_NAME } from '../../../../../common/elasticsearch_fieldnames';
 import { CytoscapeContext } from '../Cytoscape';
-import { getAnimationOptions } from '../cytoscapeOptions';
+import { getAnimationOptions } from '../cytoscape_options';
 import { Contents } from './Contents';
 
 interface PopoverProps {

x-pack/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts → x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts

@@ -5,17 +5,18 @@
  */
 import cytoscape from 'cytoscape';
 import { CSSProperties } from 'react';
-import {
-  getServiceHealthStatusColor,
-  ServiceHealthStatus,
-} from '../../../../common/service_health_status';
+import { EuiTheme } from '../../../../../observability/public';
+import { ServiceAnomalyStats } from '../../../../common/anomaly_detection';
 import {
   SERVICE_NAME,
   SPAN_DESTINATION_SERVICE_RESOURCE,
 } from '../../../../common/elasticsearch_fieldnames';
-import { EuiTheme } from '../../../../../observability/public';
+import {
+  getServiceHealthStatusColor,
+  ServiceHealthStatus,
+} from '../../../../common/service_health_status';
+import { FETCH_STATUS } from '../../../hooks/useFetcher';
 import { defaultIcon, iconForNode } from './icons';
-import { ServiceAnomalyStats } from '../../../../common/anomaly_detection';
 
 export const popoverWidth = 280;
 
@@ -104,6 +105,11 @@ function isService(el: cytoscape.NodeSingular) {
 const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
   const lineColor = theme.eui.euiColorMediumShade;
   return [
+    {
+      selector: 'core',
+      // @ts-expect-error DefinitelyTyped does not recognize 'active-bg-opacity'
+      style: { 'active-bg-opacity': 0 },
+    },
     {
       selector: 'node',
       style: {
@@ -226,7 +232,10 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
 
 // The CSS styles for the div containing the cytoscape element. Makes a
 // background grid of dots.
-export const getCytoscapeDivStyle = (theme: EuiTheme): CSSProperties => ({
+export const getCytoscapeDivStyle = (
+  theme: EuiTheme,
+  status: FETCH_STATUS
+): CSSProperties => ({
   background: `linear-gradient(
   90deg,
   ${theme.eui.euiPageBackgroundColor}
@@ -242,6 +251,7 @@ linear-gradient(
 center,
 ${theme.eui.euiColorLightShade}`,
   backgroundSize: `${theme.eui.euiSizeL} ${theme.eui.euiSizeL}`,
+  cursor: `${status === FETCH_STATUS.LOADING ? 'wait' : 'grab'}`,
   margin: `-${theme.eui.gutterTypes.gutterLarge}`,
   marginTop: 0,
 });

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

@@ -19,7 +19,7 @@ import { callApmApi } from '../../../services/rest/createCallApmApi';
 import { LicensePrompt } from '../../shared/LicensePrompt';
 import { Controls } from './Controls';
 import { Cytoscape } from './Cytoscape';
-import { getCytoscapeDivStyle } from './cytoscapeOptions';
+import { getCytoscapeDivStyle } from './cytoscape_options';
 import { EmptyBanner } from './EmptyBanner';
 import { EmptyPrompt } from './empty_prompt';
 import { Popover } from './Popover';
@@ -121,7 +121,7 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
         elements={data.elements}
         height={height}
         serviceName={serviceName}
-        style={getCytoscapeDivStyle(theme)}
+        style={getCytoscapeDivStyle(theme, status)}
       >
         <Controls />
         {serviceName && <EmptyBanner />}