[APM][ML] Update cytoscape with new index.d.ts def, fix typing issues (…

…elastic#206651)

## Summary

`cytoscape` released yet another semver breaking change, affecting
typing once more in a couple of places. They now have their own
`index.d.ts` file for Typescript support, but this causes some issues as
they don't always have the same type name as the `@types` version. Had
to fix in a couple of places, both in APM and in ML codebases.

Supersedes elastic#206498

## How to test

* This PR passes the CI with no typing issues, or failed tests
* Going to APM or ML pages with cytoscape being loaded shows no
regressions.

package.json

@@ -1093,7 +1093,7 @@
     "css-box-model": "^1.2.1",
     "css.escape": "^1.5.1",
     "cypress-data-session": "^2.8.0",
-    "cytoscape": "^3.30.4",
+    "cytoscape": "^3.31.0",
     "cytoscape-dagre": "^2.5.0",
     "d3": "3.5.17",
     "d3-array": "2.12.1",
@@ -1564,7 +1564,6 @@
     "@types/cli-progress": "^3.11.5",
     "@types/color": "^3.0.3",
     "@types/cssstyle": "^2.2.4",
-    "@types/cytoscape": "^3.21.8",
     "@types/d3": "^3.5.43",
     "@types/d3-array": "^2.12.1",
     "@types/d3-brush": "^3.0.0",

x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape.tsx

@@ -8,7 +8,7 @@
 import type { CSSProperties, PropsWithChildren } from 'react';
 import React, { useState, useRef, useEffect, createContext, useCallback, useMemo } from 'react';
 import { css } from '@emotion/react';
-import cytoscape, { type Stylesheet } from 'cytoscape';
+import cytoscape, { type StylesheetJson } from 'cytoscape';
 // @ts-ignore no declaration file
 import dagre from 'cytoscape-dagre';
 import { useCytoscapeOptions } from './cytoscape_options';
@@ -35,7 +35,7 @@ function useCytoscape(options: cytoscape.CytoscapeOptions) {
       setCy(cytoscape({ ...options, container: ref.current }));
     } else {
       // update styles for existing instance
-      cy.style(options.style as unknown as Stylesheet);
+      cy.style(options.style as StylesheetJson);
     }
   }, [options, cy]);
 

x-pack/solutions/observability/plugins/apm/public/components/app/service_map/cytoscape_options.ts

@@ -100,7 +100,7 @@ function isService(el: cytoscape.NodeSingular) {
 const getStyle = (
   euiTheme: EuiThemeComputed,
   isTraceExplorerEnabled: boolean
-): cytoscape.Stylesheet[] => {
+): cytoscape.StylesheetJson => {
   const lineColor = euiTheme.colors.mediumShade;
   return [
     {

yarn.lock

@@ -11392,11 +11392,6 @@
   resolved "https://registry.yarnpkg.com/@types/cssstyle/-/cssstyle-2.2.4.tgz#3d333ab9f8e6c40183ad1d6ebeebfcb8da2bfe4b"
   integrity sha512-FTGMeuHZtLB7hRm+NGvOLZElslR1UkKvZmEmFevOZe/e7Av0nFleka1s8ZwoX+QvbJ2y7r9NDZXIzyqpRWDJXQ==
 
-"@types/cytoscape@^3.21.8":
-  version "3.21.8"
-  resolved "https://registry.yarnpkg.com/@types/cytoscape/-/cytoscape-3.21.8.tgz#6166a2eabd66d3ae3259024875e037492adb8db6"
-  integrity sha512-6Bo9ZDrv0vfwe8Sg/ERc5VL0yU0gYvP4dgZi0fAXYkKHfyHaNqWRMcwYm3mu4sLsXbB8ZuXE75sR7qnaOL5JgQ==
-
 "@types/d3-array@^2.12.1":
   version "2.12.3"
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-2.12.3.tgz#8d16d51fb04ad5a5a8ebe14eb8263a579f1efdd1"
@@ -16507,10 +16502,10 @@ cytoscape-dagre@^2.5.0:
   dependencies:
     dagre "^0.8.5"
 
-cytoscape@^3.30.4:
-  version "3.30.4"
-  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.30.4.tgz#3404da0a159c00a1a3df2c85b2b43fdc66a0e28e"
-  integrity sha512-OxtlZwQl1WbwMmLiyPSEBuzeTIQnwZhJYYWFzZ2PhEHVFwpeaqNIkUzSiso00D98qk60l8Gwon2RP304d3BJ1A==
+cytoscape@^3.31.0:
+  version "3.31.0"
+  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.31.0.tgz#cffbbb8ca51db01cbf360e0cf59088db6d429837"
+  integrity sha512-zDGn1K/tfZwEnoGOcHc0H4XazqAAXAuDpcYw9mUnUjATjqljyCNGJv8uEvbvxGaGHaVshxMecyl6oc6uKzRfbw==
 
 "d3-array@1 - 3", "d3-array@2 - 3", "[email protected] - 3", "[email protected] - 3", [email protected], d3-array@^3.2.2:
   version "3.2.2"