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,31 +30,36 @@ export const NetworkGraph: FC<Props> = ({ nodes, edges, direction, width, height
   );
 
   useEffect(() => {
-    const data = {
-      nodes: toVisNetworkNodes(nodes),
-      edges: toVisNetworkEdges(edges),
-    };
-
-    const options = {
-      width: '100%',
-      height: '100%',
-      autoResize: true,
-      layout: {
-        improvedLayout: true,
-        hierarchical: {
-          enabled: true,
-          direction: direction ?? 'DU',
-          sortMethod: 'directed',
+    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 options = {
+        width: '100%',
+        height: '100%',
+        autoResize: true,
+        layout: {
+          improvedLayout: true,
+          hierarchical: {
+            enabled: true,
+            direction: direction ?? 'DU',
+            sortMethod: 'directed',
+          },
         },
-      },
-      interaction: {
-        navigationButtons: true,
-        dragNodes: false,
-      },
+        interaction: {
+          navigationButtons: true,
+          dragNodes: false,
+        },
+      };
+
+      network.current = new visJs.Network(ref.current, data, options);
+      network.current?.on('doubleClick', onNodeDoubleClick);
     };
 
-    network.current = new vis.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);