From 9dbbcb15d4dd9769843be900b4adbd1b1531f9b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gon=C3=A7alo=20Rica=20Pais=20da=20Silva?= Date: Wed, 8 Jan 2025 10:16:17 +0100 Subject: [PATCH] [ML][APM] Fix Cytoscape listener typing, Update Cytoscape versions (#205726) ## Summary Updates Cytoscape to newer versions, requiring one change with some `removeListener` usage no longer being valid typing. Supersedes #205444 ## How to test - Passes CI with no type errors or failed CI jobs for ML - Job Map or wherever cytoscape is being used on ML doesn't leak event listeners. - Usages in APM also do not break. --- package.json | 6 ++-- .../pages/job_map/components/cytoscape.tsx | 2 +- .../components/app/service_map/controls.tsx | 4 +-- .../app/service_map/cytoscape_options.ts | 3 -- .../app/service_map/popover/index.tsx | 2 +- .../use_cytoscape_event_handlers.ts | 12 +++---- yarn.lock | 36 ++++++++----------- 7 files changed, 26 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index b441c4987932b..025c39133d17c 100644 --- a/package.json +++ b/package.json @@ -1117,8 +1117,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", @@ -1569,7 +1569,7 @@ "@types/cli-progress": "^3.11.5", "@types/color": "^3.0.3", "@types/cssstyle": "^2.2.4", - "@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", diff --git a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape.tsx b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape.tsx index de890ad9f9f98..77affc598066a 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape.tsx @@ -108,7 +108,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 diff --git a/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/controls.tsx b/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/controls.tsx index 26be768bdabfd..4d9d5e86a4074 100644 --- a/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/controls.tsx +++ b/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/controls.tsx @@ -85,7 +85,7 @@ function useDebugDownloadUrl(cy?: cytoscape.Core) { return () => { if (cy) { - cy.off('add remove', undefined, elementsHandler); + cy.off('add remove', elementsHandler); } }; }, [cy, debug]); @@ -130,7 +130,7 @@ export function Controls() { return () => { if (cy) { - cy.off('zoom', undefined, zoomHandler); + cy.off('zoom', zoomHandler); } }; }, [cy]); diff --git a/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/cytoscape_options.ts b/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/cytoscape_options.ts index cfe12a5d8b5a3..9cf1acccd7b79 100644 --- a/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/cytoscape_options.ts +++ b/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/cytoscape_options.ts @@ -178,15 +178,12 @@ const getStyle = ( '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(euiTheme.size.xs, 10), 'target-distance-from-node': isIE11 ? undefined : parseInt(euiTheme.size.xs, 10), }, }, { selector: 'edge[isInverseEdge]', - // @ts-expect-error DefinitelyTyped says visibility is "none" but it's - // actually "hidden" style: { visibility: 'hidden' }, }, { diff --git a/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/popover/index.tsx b/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/popover/index.tsx index 1bdd6240b63dc..ceade5a2b5736 100644 --- a/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/popover/index.tsx +++ b/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/popover/index.tsx @@ -136,7 +136,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); diff --git a/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/use_cytoscape_event_handlers.ts b/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/use_cytoscape_event_handlers.ts index 9f40a34be5cbf..27f951a925aff 100644 --- a/x-pack/solutions/observability/plugins/apm/public/components/app/service_map/use_cytoscape_event_handlers.ts +++ b/x-pack/solutions/observability/plugins/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, euiTheme]); diff --git a/yarn.lock b/yarn.lock index f8222e4eb6c7d..194c99b308e9e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11394,10 +11394,10 @@ resolved "https://registry.yarnpkg.com/@types/cssstyle/-/cssstyle-2.2.4.tgz#3d333ab9f8e6c40183ad1d6ebeebfcb8da2bfe4b" integrity sha512-FTGMeuHZtLB7hRm+NGvOLZElslR1UkKvZmEmFevOZe/e7Av0nFleka1s8ZwoX+QvbJ2y7r9NDZXIzyqpRWDJXQ== -"@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" @@ -16517,20 +16517,17 @@ cypress@13.17.0: 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", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3.2.2, d3-array@^3.2.2: version "3.2.2" @@ -16796,7 +16793,7 @@ d@1, d@^1.0.1, d@^1.0.2: es5-ext "^0.10.64" type "^2.7.2" -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== @@ -20705,11 +20702,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"