Chore: Lazy loads VisJs library (#32341)

public/app/features/variables/inspect/NetworkGraph.tsx

@@ -1,7 +1,5 @@
 import React, { FC, useCallback, useEffect, useRef } from 'react';
-// @ts-ignore
-import vis from 'visjs-network';
-import { GraphEdge, GraphNode, toVisNetworkEdges, toVisNetworkNodes } from './utils';
+import { GraphEdge, GraphNode } from './utils';
 
 interface OwnProps {
   nodes: GraphNode[];
@@ -32,11 +30,13 @@ export const NetworkGraph: FC<Props> = ({ nodes, edges, direction, width, height
   );
 
   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(nodes),
-      edges: toVisNetworkEdges(edges),
+        nodes: toVisNetworkNodes(visJs, nodes),
+        edges: toVisNetworkEdges(visJs, edges),
       };
-
       const options = {
         width: '100%',
         height: '100%',
@@ -55,8 +55,11 @@ export const NetworkGraph: FC<Props> = ({ nodes, edges, direction, width, height
         },
       };
 
-    network.current = new vis.Network(ref.current, data, options);
+      network.current = new visJs.Network(ref.current, data, options);
       network.current?.on('doubleClick', onNodeDoubleClick);
+    };
+
+    createNetwork();
 
     return () => {
       // unsubscribe event handlers
@@ -72,3 +75,16 @@ export const NetworkGraph: FC<Props> = ({ nodes, edges, direction, width, height
     </div>
   );
 };
+
+function toVisNetworkNodes(visJs: any, nodes: GraphNode[]): any[] {
+  const nodesWithStyle: any[] = nodes.map((node) => ({
+    ...node,
+    shape: 'box',
+  }));
+  return new visJs.DataSet(nodesWithStyle);
+}
+
+function toVisNetworkEdges(visJs: any, edges: GraphEdge[]): any[] {
+  const edgesWithStyle: any[] = edges.map((edge) => ({ ...edge, arrows: 'to', dashes: true }));
+  return new visJs.DataSet(edgesWithStyle);
+}

public/app/features/variables/inspect/NetworkGraphModal.tsx

@@ -1,6 +1,7 @@
-import { GraphEdge, GraphNode } from './utils';
 import React, { useCallback, useState } from 'react';
 import { Modal } from '@grafana/ui';
+
+import { GraphEdge, GraphNode } from './utils';
 import { NetworkGraph, Props as NetWorkGraphProps } from './NetworkGraph';
 
 interface NetworkGraphModalApi {

public/app/features/variables/inspect/utils.ts

@@ -1,6 +1,3 @@
-// @ts-ignore
-import vis from 'visjs-network';
-
 import { variableAdapters } from '../adapters';
 import { DashboardModel } from '../../dashboard/state';
 import { isAdHoc } from '../guard';
@@ -52,19 +49,6 @@ export const createDependencyEdges = (variables: VariableModel[]): GraphEdge[] =
   return edges;
 };
 
-export const toVisNetworkNodes = (nodes: GraphNode[]): any[] => {
-  const nodesWithStyle: any[] = nodes.map((node) => ({
-    ...node,
-    shape: 'box',
-  }));
-  return new vis.DataSet(nodesWithStyle);
-};
-
-export const toVisNetworkEdges = (edges: GraphEdge[]): any[] => {
-  const edgesWithStyle: any[] = edges.map((edge) => ({ ...edge, arrows: 'to', dashes: true }));
-  return new vis.DataSet(edgesWithStyle);
-};
-
 function getVariableName(expression: string) {
   variableRegex.lastIndex = 0;
   const match = variableRegex.exec(expression);