mirror of https://github.com/grafana/grafana.git
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
This commit is contained in:
Tobias Skarhed
GitHub
parent
de50c5a497
commit
509990ca89
|
|
@ -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"],
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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<any>(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<Network | null>(null);
|
||||
const ref = useRef<HTMLDivElement>(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 (
|
||||
<div>
|
||||
|
|
@ -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<Node> {
|
||||
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<Edge> {
|
||||
const edgesWithStyle = edges.map((edge) => ({ ...edge, arrows: 'to', dashes: true }));
|
||||
return new visJs.DataSet(edgesWithStyle);
|
||||
return new visData.DataSet(edgesWithStyle);
|
||||
}
|
||||
|
|
|
|||
74
yarn.lock
74
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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue