[8.17] [ML][APM] Fix Cytoscape listener typing, Update Cytoscape vers…

…ions (elastic#205726) (elastic#205850)

# Backport

This will backport the following commits from `main` to `8.17`:
- [[ML][APM] Fix Cytoscape listener typing, Update Cytoscape versions
(elastic#205726)](elastic#205726)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Gonçalo Rica Pais da
Silva","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-08T09:16:17Z","message":"[ML][APM]
Fix Cytoscape listener typing, Update Cytoscape versions (elastic#205726)\n\n##
Summary\r\n\r\nUpdates Cytoscape to newer versions, requiring one change
with some\r\n`removeListener` usage no longer being valid
typing.\r\n\r\nSupersedes elastic#205444\r\n\r\n## How to test\r\n\r\n- Passes
CI with no type errors or failed CI jobs for ML\r\n- Job Map or wherever
cytoscape is being used on ML doesn't leak event\r\nlisteners.\r\n-
Usages in APM also do not
break.","sha":"7363f03d81835f70f39caa27e7096b8a0361ae69","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:all-open","Team:obs-ux-infra_services"],"title":"[ML][APM]
Fix Cytoscape listener typing, Update Cytoscape
versions","number":205726,"url":"https://github.com/elastic/kibana/pull/205726","mergeCommit":{"message":"[ML][APM]
Fix Cytoscape listener typing, Update Cytoscape versions (elastic#205726)\n\n##
Summary\r\n\r\nUpdates Cytoscape to newer versions, requiring one change
with some\r\n`removeListener` usage no longer being valid
typing.\r\n\r\nSupersedes elastic#205444\r\n\r\n## How to test\r\n\r\n- Passes
CI with no type errors or failed CI jobs for ML\r\n- Job Map or wherever
cytoscape is being used on ML doesn't leak event\r\nlisteners.\r\n-
Usages in APM also do not
break.","sha":"7363f03d81835f70f39caa27e7096b8a0361ae69"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/205726","number":205726,"mergeCommit":{"message":"[ML][APM]
Fix Cytoscape listener typing, Update Cytoscape versions (elastic#205726)\n\n##
Summary\r\n\r\nUpdates Cytoscape to newer versions, requiring one change
with some\r\n`removeListener` usage no longer being valid
typing.\r\n\r\nSupersedes elastic#205444\r\n\r\n## How to test\r\n\r\n- Passes
CI with no type errors or failed CI jobs for ML\r\n- Job Map or wherever
cytoscape is being used on ML doesn't leak event\r\nlisteners.\r\n-
Usages in APM also do not
break.","sha":"7363f03d81835f70f39caa27e7096b8a0361ae69"}}]}]
BACKPORT-->

package.json

@@ -1103,8 +1103,8 @@
     "css-box-model": "^1.2.1",
     "css.escape": "^1.5.1",
     "cypress-data-session": "^2.8.0",
-    "cytoscape": "^3.10.0",
-    "cytoscape-dagre": "^2.2.2",
+    "cytoscape": "^3.30.4",
+    "cytoscape-dagre": "^2.5.0",
     "d3": "3.5.17",
     "d3-array": "2.12.1",
     "d3-brush": "^3.0.0",
@@ -1543,7 +1543,7 @@
     "@types/classnames": "^2.2.9",
     "@types/cli-progress": "^3.11.5",
     "@types/color": "^3.0.3",
-    "@types/cytoscape": "^3.14.0",
+    "@types/cytoscape": "^3.21.8",
     "@types/d3": "^3.5.43",
     "@types/d3-array": "^2.12.1",
     "@types/d3-brush": "^3.0.0",

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

@@ -110,7 +110,7 @@ export function Cytoscape({
 
     return () => {
       if (cy) {
-        cy.removeListener('data', undefined, dataHandler as cytoscape.EventHandler);
+        cy.removeListener('data', dataHandler);
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps

x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx

@@ -86,7 +86,7 @@ function useDebugDownloadUrl(cy?: cytoscape.Core) {
 
     return () => {
       if (cy) {
-        cy.off('add remove', undefined, elementsHandler);
+        cy.off('add remove', elementsHandler);
       }
     };
   }, [cy, debug]);
@@ -131,7 +131,7 @@ export function Controls() {
 
     return () => {
       if (cy) {
-        cy.off('zoom', undefined, zoomHandler);
+        cy.off('zoom', zoomHandler);
       }
     };
   }, [cy]);

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

@@ -174,15 +174,12 @@ const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.S
         'source-arrow-shape': isIE11 ? 'none' : 'triangle',
         'source-arrow-color': lineColor,
         'target-arrow-shape': isIE11 ? 'none' : 'triangle',
-        // @ts-expect-error
         'source-distance-from-node': isIE11 ? undefined : parseInt(theme.eui.euiSizeXS, 10),
         'target-distance-from-node': isIE11 ? undefined : parseInt(theme.eui.euiSizeXS, 10),
       },
     },
     {
       selector: 'edge[isInverseEdge]',
-      // @ts-expect-error DefinitelyTyped says visibility is "none" but it's
-      // actually "hidden"
       style: { visibility: 'hidden' },
     },
     {

x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/index.tsx

@@ -143,7 +143,7 @@ export function Popover({ focusedServiceName, environment, kuery, start, end }:
       if (cy) {
         cy.removeListener('select', 'node', selectHandler);
         cy.removeListener('unselect', 'node', deselect);
-        cy.removeListener('viewport', undefined, deselect);
+        cy.removeListener('viewport', deselect);
         cy.removeListener('drag', 'node', deselect);
         cy.removeListener('select', 'edge', selectHandler);
         cy.removeListener('unselect', 'edge', deselect);

x-pack/plugins/observability_solution/apm/public/components/app/service_map/use_cytoscape_event_handlers.ts

@@ -49,7 +49,6 @@ function getLayoutOptions({
 
   return {
     animationDuration: animationOptions.duration,
-    // @ts-expect-error upgrade typescript v5.1.6
     animationEasing: animationOptions.easing,
     fit,
     name: 'dagre',
@@ -61,7 +60,7 @@ function getLayoutOptions({
     rankSep: 128,
     rankDir: 'LR',
     ranker: 'network-simplex',
-  };
+  } as cytoscape.LayoutOptions;
 }
 
 function setCursor(cursor: string, event: cytoscape.EventObjectCore) {
@@ -201,19 +200,18 @@ export function useCytoscapeEventHandlers({
       if (cy) {
         cy.removeListener(
           'custom:data drag dragfree layoutstop select tapstart tapend unselect',
-          undefined,
           debugHandler
         );
-        cy.removeListener('custom:data', undefined, dataHandler);
-        cy.removeListener('layoutstop', undefined, layoutstopHandler);
+        cy.removeListener('custom:data', dataHandler);
+        cy.removeListener('layoutstop', layoutstopHandler);
         cy.removeListener('mouseover', 'edge, node', mouseoverHandler);
         cy.removeListener('mouseout', 'edge, node', mouseoutHandler);
         cy.removeListener('select', 'node', selectHandler);
         cy.removeListener('unselect', 'node', unselectHandler);
         cy.removeListener('drag', 'node', dragHandler);
         cy.removeListener('dragfree', 'node', dragfreeHandler);
-        cy.removeListener('tapstart', undefined, tapstartHandler);
-        cy.removeListener('tapend', undefined, tapendHandler);
+        cy.removeListener('tapstart', tapstartHandler);
+        cy.removeListener('tapend', tapendHandler);
       }
     };
   }, [cy, serviceName, trackApmEvent, theme]);

yarn.lock

@@ -11238,10 +11238,10 @@
   resolved "https://registry.yarnpkg.com/@types/cookiejar/-/cookiejar-2.1.5.tgz#14a3e83fa641beb169a2dd8422d91c3c345a9a78"
   integrity sha512-he+DHOWReW0nghN24E1WUqM0efK4kI9oTqDm6XmK8ZPe2djZ90BSNdGnIyCLzCPw7/pogPlGbzI2wHGGmi4O/Q==
 
-"@types/cytoscape@^3.14.0":
-  version "3.14.0"
-  resolved "https://registry.yarnpkg.com/@types/cytoscape/-/cytoscape-3.14.0.tgz#346b5430a7a1533784bcf44fcbe6c5255b948d36"
-  integrity sha512-qOhhZFGb35457vmCu9YHqwjqleraSAEikaIFmMUPWzTC7FrwkS7VR/6ymqRHW7Z8wivHuzsZDYCoePIepd69qg==
+"@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"
@@ -16350,20 +16350,17 @@ [email protected]:
     untildify "^4.0.0"
     yauzl "^2.10.0"
 
-cytoscape-dagre@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/cytoscape-dagre/-/cytoscape-dagre-2.2.2.tgz#5f32a85c0ba835f167efee531df9e89ac58ff411"
-  integrity sha512-zsg36qNwua/L2stJSWkcbSDcvW3E6VZf6KRe6aLnQJxuXuz89tMqI5EVYVKEcNBgzTEzFMFv0PE3T0nD4m6VDw==
+cytoscape-dagre@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/cytoscape-dagre/-/cytoscape-dagre-2.5.0.tgz#47d9835ab64dd0b596d9c94731f070282f82fc5a"
+  integrity sha512-VG2Knemmshop4kh5fpLO27rYcyUaaDkRw+6PiX4bstpB+QFt0p2oauMrsjVbUamGWQ6YNavh7x2em2uZlzV44g==
   dependencies:
-    dagre "^0.8.2"
+    dagre "^0.8.5"
 
-cytoscape@^3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.10.0.tgz#3b462e0d35121ecd2d2702f470915fd6dae01777"
-  integrity sha512-lWOnG4HJQD0cy+tCiBmbV/QRknInuZ8HvjcUifQZ7E4LWmKMvl6d5eP0LaaRLfBJAplXWcJfwc17ZJ/nwPeaYg==
-  dependencies:
-    heap "^0.2.6"
-    lodash.debounce "^4.0.8"
+cytoscape@^3.30.4:
+  version "3.30.4"
+  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.30.4.tgz#3404da0a159c00a1a3df2c85b2b43fdc66a0e28e"
+  integrity sha512-OxtlZwQl1WbwMmLiyPSEBuzeTIQnwZhJYYWFzZ2PhEHVFwpeaqNIkUzSiso00D98qk60l8Gwon2RP304d3BJ1A==
 
 "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"
@@ -16621,7 +16618,7 @@ [email protected], d3@^3.5.6:
   resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.17.tgz#bc46748004378b21a360c9fc7cf5231790762fb8"
   integrity sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g=
 
-dagre@^0.8.2:
+dagre@^0.8.5:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/dagre/-/dagre-0.8.5.tgz#ba30b0055dac12b6c1fcc247817442777d06afee"
   integrity sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==
@@ -20423,11 +20420,6 @@ headers-polyfill@^4.0.2:
   resolved "https://registry.yarnpkg.com/headers-polyfill/-/headers-polyfill-4.0.3.tgz#922a0155de30ecc1f785bcf04be77844ca95ad07"
   integrity sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==
 
-heap@^0.2.6:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.6.tgz#087e1f10b046932fc8594dd9e6d378afc9d1e5ac"
-  integrity sha1-CH4fELBGky/IWU3Z5tN4r8nR5aw=
-
 hexoid@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/hexoid/-/hexoid-2.0.0.tgz#fb36c740ebbf364403fa1ec0c7efd268460ec5b9"