Extracted some functions from graph.js

display/display.js

+import * as Helpers from "./helpers";
+import * as Config from "../config";
+import { FilterOverlay } from "./overlays/filteroverlay";
+import { NodeInfoOverlay } from "./overlays/nodeinfo";
+import Graph from "./graph";
+
+function loadComponents() {
+    filterOverlay.create();
+    infoOverlay.create();
+    filterOverlay.filterChangedCallback = (cls) =>
+        infoOverlay.bottomMenu.toggleTabVisibility(cls);
+    createFullScreenButton();
+}
+
+function createFullScreenButton() {
+    const sceneNode = Helpers.getCanvasDivNode();
+    const overlayNode = document.createElement("div");
+    overlayNode.className = "fullscreen-button";
+    overlayNode.innerHTML = "<p>&#10530;</p>";
+    overlayNode.addEventListener("click", function () {
+        if (!document.fullscreenElement) {
+            Helpers.getCanvasDivNode().requestFullscreen();
+        } else {
+            document.exitFullscreen();
+        }
+        G.resize();
+    });
+    sceneNode.appendChild(overlayNode);
+}
+
+let G = null;
+let filterOverlay = null;
+let infoOverlay = null;
+
+// Only execute, if corresponding dom is present
+if (document.getElementById("3d-graph") !== null) {
+    G = new Graph(Config.SPACE, loadComponents);
+    filterOverlay = new FilterOverlay(G, "node");
+    infoOverlay = new NodeInfoOverlay(G);
+    G.infoOverlay = infoOverlay;
+}

display/graph.js

 import * as Config from "../config";
 import * as Helpers from "./helpers";
 import { loadGraphJson } from "../datasets/datasets";
-import { NodeInfoOverlay } from "./overlays/nodeinfo";
-import { FilterOverlay } from "./overlays/filteroverlay";
 
 import * as THREE from "three";
 import ForceGraph3D from "3d-force-graph";
@@ -16,12 +14,13 @@ import {
 /**
  * The main ForceGraph. Displays the graph and handles all connected events.
  */
-class Graph {
+export default class Graph {
     /**
      * Constructs a new Graph object.
-     * @param {string} dataUrl URL to a JSON object defining the graph structure.
+     * @param {string} spaceId Name of the knowledge space that should be loaded
+     * @param {function} loadingFinishedCallback Callback that is called when the graph is fully loaded.
      */
-    constructor(spaceId) {
+    constructor(spaceId, loadingFinishedCallback = Function()) {
         this.graph = null;
         this.gData = null;
 
@@ -38,6 +37,8 @@ class Graph {
         this.edgeTypeVisibility = {};
         this.nodeTypeVisibility = {};
 
+        this.loadingFinishedCallback = loadingFinishedCallback;
+
         this.loadGraph(spaceId);
     }
 
@@ -95,9 +96,6 @@ class Graph {
             // Can only be called after link colors have been mapped.
             this.graph.linkThreeObject((link) => this.drawLink(link));
 
-            // Add overlay components
-            loadComponents();
-
             // Catch resize events
             document.addEventListener("fullscreenchange", () => this.resize());
             window.addEventListener("resize", () => this.resize());
@@ -110,6 +108,7 @@ class Graph {
                 (item) => (this.nodeTypeVisibility[item] = true)
             );
             this.firstTick = false;
+            this.loadingFinishedCallback();
         }
     }
 
@@ -494,39 +493,3 @@ class Graph {
         return group;
     }
 }
-
-function loadComponents() {
-    filterOverlay.create();
-    infoOverlay.create();
-    filterOverlay.filterChangedCallback = (cls) =>
-        infoOverlay.bottomMenu.toggleTabVisibility(cls);
-    createFullScreenButton();
-}
-
-function createFullScreenButton() {
-    const sceneNode = Helpers.getCanvasDivNode();
-    const overlayNode = document.createElement("div");
-    overlayNode.className = "fullscreen-button";
-    overlayNode.innerHTML = "<p>&#10530;</p>";
-    overlayNode.addEventListener("click", function () {
-        if (!document.fullscreenElement) {
-            Helpers.getCanvasDivNode().requestFullscreen();
-        } else {
-            document.exitFullscreen();
-        }
-        G.resize();
-    });
-    sceneNode.appendChild(overlayNode);
-}
-
-let G = null;
-let filterOverlay = null;
-let infoOverlay = null;
-
-// Only execute, if corresponding dom is present
-if (document.getElementById("3d-graph") !== null) {
-    G = new Graph(Config.SPACE); // space_id defined globaly through knowledge-space.php
-    filterOverlay = new FilterOverlay(G, "node");
-    infoOverlay = new NodeInfoOverlay(G);
-    G.infoOverlay = infoOverlay;
-}

index.js

 import "./display/display.css";
 import "./editor/css/editor.css";
 
-import "./display/graph";
+import "./display/display";
 import "./editor/js/editor";