From 509990ca897049cab45ddb07b81dbcb1bf4c39c2 Mon Sep 17 00:00:00 2001 From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com> Date: Tue, 8 Jul 2025 11:30:46 +0200 Subject: [PATCH] Variables: Change vis library from visj-network to vis-network (#107712) * Change from visj-network to vis-network * Check that ref exists * Remove vis-util as a direct dependency * Update betterer * Address PR feedback --- .betterer.results | 5 +- package.json | 3 +- .../variables/inspect/NetworkGraph.tsx | 55 +++++--------- yarn.lock | 74 ++++++------------- 4 files changed, 47 insertions(+), 90 deletions(-) diff --git a/.betterer.results b/.betterer.results index e84c90caa42..fa1406d7eb5 100644 --- a/.betterer.results +++ b/.betterer.results @@ -2897,10 +2897,7 @@ exports[`better eslint`] = { ], "public/app/features/variables/inspect/NetworkGraph.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], - [0, 0, 0, "Unexpected any. Specify a different type.", "1"], - [0, 0, 0, "Unexpected any. Specify a different type.", "2"], - [0, 0, 0, "Unexpected any. Specify a different type.", "3"], - [0, 0, 0, "Unexpected any. Specify a different type.", "4"] + [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], "public/app/features/variables/inspect/VariablesUnknownTable.tsx:5381": [ [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], diff --git a/package.json b/package.json index 5bc553728f6..287bf23e960 100644 --- a/package.json +++ b/package.json @@ -424,7 +424,8 @@ "type-fest": "^4.18.2", "uplot": "1.6.32", "uuid": "11.1.0", - "visjs-network": "4.25.0", + "vis-data": "^7.1.10", + "vis-network": "9.1.13", "whatwg-fetch": "3.6.20" }, "resolutions": { diff --git a/public/app/features/variables/inspect/NetworkGraph.tsx b/public/app/features/variables/inspect/NetworkGraph.tsx index 78b6977359c..cbcb413ea4d 100644 --- a/public/app/features/variables/inspect/NetworkGraph.tsx +++ b/public/app/features/variables/inspect/NetworkGraph.tsx @@ -1,4 +1,6 @@ -import { useCallback, useEffect, useRef } from 'react'; +import { useEffect, useRef } from 'react'; +import type { DataSet } from 'vis-data'; +import type { Network, Options, Data, Edge, Node } from 'vis-network'; import { GraphEdge, GraphNode } from './utils'; @@ -6,7 +8,6 @@ interface OwnProps { nodes: GraphNode[]; edges: GraphEdge[]; direction?: 'UD' | 'DU' | 'LR' | 'RL'; - onDoubleClick?: (node: string) => void; width?: string; height?: string; } @@ -17,28 +18,19 @@ interface DispatchProps {} export type Props = OwnProps & ConnectedProps & DispatchProps; -export const NetworkGraph = ({ nodes, edges, direction, width, height, onDoubleClick }: Props) => { - const network = useRef(null); - const ref = useRef(null); - - const onNodeDoubleClick = useCallback( - (params: { nodes: string[] }) => { - if (onDoubleClick) { - onDoubleClick(params.nodes[0]); - } - }, - [onDoubleClick] - ); +export const NetworkGraph = ({ nodes, edges, direction, width, height }: Props) => { + const network = useRef(null); + const ref = useRef(null); useEffect(() => { const createNetwork = async () => { - // @ts-ignore no types yet for visjs-network - const visJs = await import(/* webpackChunkName: "visjs-network" */ 'visjs-network'); - const data = { - nodes: toVisNetworkNodes(visJs, nodes), - edges: toVisNetworkEdges(visJs, edges), + const visJs = await import(/* webpackChunkName: "vis-network" */ 'vis-network'); + const visData = await import(/* webpackChunkName: "vis-data" */ 'vis-data'); + const data: Data = { + nodes: toVisNetworkNodes(visData, nodes), + edges: toVisNetworkEdges(visData, edges), }; - const options = { + const options: Options = { width: '100%', height: '100%', autoResize: true, @@ -55,20 +47,13 @@ export const NetworkGraph = ({ nodes, edges, direction, width, height, onDoubleC dragNodes: false, }, }; - - network.current = new visJs.Network(ref.current, data, options); - network.current?.on('doubleClick', onNodeDoubleClick); + if (ref.current) { + network.current = new visJs.Network(ref.current, data, options); + } }; createNetwork(); - - return () => { - // unsubscribe event handlers - if (network.current) { - network.current.off('doubleClick'); - } - }; - }, [direction, edges, nodes, onNodeDoubleClick]); + }, [direction, edges, nodes]); return (
@@ -77,15 +62,15 @@ export const NetworkGraph = ({ nodes, edges, direction, width, height, onDoubleC ); }; -function toVisNetworkNodes(visJs: any, nodes: GraphNode[]): any[] { +function toVisNetworkNodes(visData: any, nodes: GraphNode[]): DataSet { const nodesWithStyle = nodes.map((node) => ({ ...node, shape: 'box', })); - return new visJs.DataSet(nodesWithStyle); + return new visData.DataSet(nodesWithStyle); } -function toVisNetworkEdges(visJs: any, edges: GraphEdge[]): any[] { +function toVisNetworkEdges(visData: any, edges: GraphEdge[]): DataSet { const edgesWithStyle = edges.map((edge) => ({ ...edge, arrows: 'to', dashes: true })); - return new visJs.DataSet(edgesWithStyle); + return new visData.DataSet(edgesWithStyle); } diff --git a/yarn.lock b/yarn.lock index 896049380f9..4527dcfdf6d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15391,13 +15391,6 @@ __metadata: languageName: node linkType: hard -"emitter-component@npm:^1.1.1": - version: 1.1.1 - resolution: "emitter-component@npm:1.1.1" - checksum: 10/b43814692fb874c1a75c3c417670123ab33961225b73fa680501dbd5d4ab779ef37082570fb64516bf12cedd906842eea0bccbf1d3bc530162e86bafa17d2737 - languageName: node - linkType: hard - "emittery@npm:^0.13.1": version: 0.13.1 resolution: "emittery@npm:0.13.1" @@ -18424,7 +18417,8 @@ __metadata: typescript: "npm:5.8.3" uplot: "npm:1.6.32" uuid: "npm:11.1.0" - visjs-network: "npm:4.25.0" + vis-data: "npm:^7.1.10" + vis-network: "npm:9.1.13" webpack: "npm:5.97.1" webpack-assets-manifest: "npm:^5.1.0" webpack-cli: "npm:6.0.1" @@ -18483,13 +18477,6 @@ __metadata: languageName: node linkType: hard -"hammerjs@npm:^2.0.8": - version: 2.0.8 - resolution: "hammerjs@npm:2.0.8" - checksum: 10/9155d056f252ef35e8ca258dbb5ee2c9d8794f6805d083da7d1d9763d185e3e149459ecc2b36ccce584e3cd5f099fd9fa55056e3bcc7724046390f2e5ae25815 - languageName: node - linkType: hard - "handle-thing@npm:^2.0.0": version: 2.0.1 resolution: "handle-thing@npm:2.0.1" @@ -21458,13 +21445,6 @@ __metadata: languageName: node linkType: hard -"keycharm@npm:^0.2.0": - version: 0.2.0 - resolution: "keycharm@npm:0.2.0" - checksum: 10/9c0f227fddfb8f82dbe6ff6450c1d3110d10715eaab2034ef656ce1be4900a979ce7994ecef0ef8bfc190c9f11c1a82e5f454052fa92142c44e6843bcff1249f - languageName: node - linkType: hard - "keycode@npm:^2.2.0": version: 2.2.0 resolution: "keycode@npm:2.2.0" @@ -23090,7 +23070,7 @@ __metadata: languageName: node linkType: hard -"moment@npm:2.30.1, moment@npm:^2.20.1, moment@npm:^2.29.4, moment@npm:^2.30.1": +"moment@npm:2.30.1, moment@npm:^2.29.4, moment@npm:^2.30.1": version: 2.30.1 resolution: "moment@npm:2.30.1" checksum: 10/ae42d876d4ec831ef66110bdc302c0657c664991e45cf2afffc4b0f6cd6d251dde11375c982a5c0564ccc0fa593fc564576ddceb8c8845e87c15f58aa6baca69 @@ -25960,15 +25940,6 @@ __metadata: languageName: node linkType: hard -"propagating-hammerjs@npm:^1.4.6": - version: 1.5.0 - resolution: "propagating-hammerjs@npm:1.5.0" - dependencies: - hammerjs: "npm:^2.0.8" - checksum: 10/ff83ae333e69942af80af5ce53d240a63a8d63c96cbee1771bbe194ef70ee2977b31f909ea952c13a0d155ffc059e6f71253f04f40299842354b2b8ffc081d48 - languageName: node - linkType: hard - "property-information@npm:^5.0.0": version: 5.6.0 resolution: "property-information@npm:5.6.0" @@ -30581,13 +30552,6 @@ __metadata: languageName: node linkType: hard -"timsort@npm:^0.3.0": - version: 0.3.0 - resolution: "timsort@npm:0.3.0" - checksum: 10/f4b8e0afa770440660b98034d7170333033b96fb6cb32d2fdfab65f78ba7741b9e271e2351631daacfa78a471d33f8ea1f5a29f94e960621f25045bfada46f3f - languageName: node - linkType: hard - "tiny-invariant@npm:^1.0.1, tiny-invariant@npm:^1.0.2, tiny-invariant@npm:^1.0.6, tiny-invariant@npm:^1.2.0, tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3": version: 1.3.3 resolution: "tiny-invariant@npm:1.3.3" @@ -31946,17 +31910,27 @@ __metadata: languageName: node linkType: hard -"visjs-network@npm:4.25.0": - version: 4.25.0 - resolution: "visjs-network@npm:4.25.0" - dependencies: - emitter-component: "npm:^1.1.1" - hammerjs: "npm:^2.0.8" - keycharm: "npm:^0.2.0" - moment: "npm:^2.20.1" - propagating-hammerjs: "npm:^1.4.6" - timsort: "npm:^0.3.0" - checksum: 10/9914c6df0e56c22bebf43ed4a3799ecc84bc2430de776cb0b3b3b51e02454b3fe7093bb8017b6ac43717aa1458a839a4ffcf30feae2fae31b4d88358f3e6d34a +"vis-data@npm:^7.1.10": + version: 7.1.10 + resolution: "vis-data@npm:7.1.10" + peerDependencies: + uuid: ^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 + vis-util: ^5.0.1 + checksum: 10/23fb2ef26864153013372e1d95107765be86dd9ce96f987bf99fdd93759fbe5ec1bd2603d354ca18a03f0fb607b829396ec02fe005aead63ef24599512f21402 + languageName: node + linkType: hard + +"vis-network@npm:9.1.13": + version: 9.1.13 + resolution: "vis-network@npm:9.1.13" + peerDependencies: + "@egjs/hammerjs": ^2.0.0 + component-emitter: ^1.3.0 || ^2.0.0 + keycharm: ^0.2.0 || ^0.3.0 || ^0.4.0 + uuid: ^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 + vis-data: ^6.3.0 || ^7.0.0 + vis-util: ^5.0.1 + checksum: 10/7fd7264ee0a79282596efece988a78c037c418fa5e79aba632521a3093e9742a438b254dc698f488eb7707e3f7033352c25e7651a8d49b42662af0b368a12db7 languageName: node linkType: hard