From ce679a67b758cb081df1ec1c14cf6f8c36ee7655 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Fri, 26 Mar 2021 10:07:22 +0100
Subject: [PATCH] Chore: Lazy loads VisJs library (#32341)

---
 .../variables/inspect/NetworkGraph.tsx        | 66 ++++++++++++-------
 .../variables/inspect/NetworkGraphModal.tsx   |  3 +-
 .../app/features/variables/inspect/utils.ts   | 16 -----
 3 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/public/app/features/variables/inspect/NetworkGraph.tsx b/public/app/features/variables/inspect/NetworkGraph.tsx
index f2601de1a9d..c72c00b8c6f 100644
--- a/public/app/features/variables/inspect/NetworkGraph.tsx
+++ b/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);
+}
diff --git a/public/app/features/variables/inspect/NetworkGraphModal.tsx b/public/app/features/variables/inspect/NetworkGraphModal.tsx
index 36a1ba21b54..53afe503487 100644
--- a/public/app/features/variables/inspect/NetworkGraphModal.tsx
+++ b/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 {
diff --git a/public/app/features/variables/inspect/utils.ts b/public/app/features/variables/inspect/utils.ts
index e898605eeb4..7f081187a05 100644
--- a/public/app/features/variables/inspect/utils.ts
+++ b/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);