Modernized helpers

src/common/helpers.ts

+export { getClientWidth, getWindowInnerHeight };
+
+/**
+ * Returns the maximum width that should be used if displaying elements inside of wordpress.
+ * @returns {number}
+ */
+function getClientWidth(elementId: string): number {
+    return document.getElementById("knowledge-space-display").clientWidth;
+}
+
+/**
+ * Returns the maximum height that should be used if displaying elements inside of wordpress.
+ * @returns {number}
+ */
+function getWindowInnerHeight(offset = 200): number {
+    return window.innerHeight - offset;
+}

src/display/display.tsx

@@ -4,7 +4,7 @@ import PropTypes, { InferType } from "prop-types";
 
 import "./display.css";
 import { VisualGraphNode, GraphRenderer } from "./renderer";
-import * as Helpers from "./helpers";
+import * as Helpers from "../common/helpers";
 import { Graph } from "../common/graph/graph";
 import { loadGraphJson } from "../common/datasets";
 import NodeInfoBar from "./components/nodeinfo/nodeinfobar";
@@ -58,8 +58,8 @@ class Display extends React.Component<
 
     componentDidMount() {
         this.setState({
-            width: Helpers.getWidth(),
-            height: Helpers.getHeight(),
+            width: Helpers.getClientWidth("knowledge-space-display"),
+            height: Helpers.getWindowInnerHeight(200),
         });
 
         const fetchGraph = async () => {
@@ -101,8 +101,8 @@ class Display extends React.Component<
                 });
             } else {
                 this.setState({
-                    width: Helpers.getWidth(),
-                    height: Helpers.getHeight(),
+                    width: Helpers.getClientWidth("knowledge-space-display"),
+                    height: Helpers.getWindowInnerHeight(200),
                 });
             }
 

src/display/helpers.js

-export { getWidth, getHeight, getCanvasDivNode, createDiv, createHTMLElement };
-
-/**
- * Returns the maximum width that should be used if displaying elements inside of wordpress.
- * @returns {number}
- */
-function getWidth() {
-    return document.getElementById("knowledge-space-display").clientWidth;
-}
-
-/**
- * Returns the maximum height that should be used if displaying elements inside of wordpress.
- * @returns {number}
- */
-function getHeight() {
-    return window.innerHeight - 200;
-}
-
-/**
- * Returns the div node which encapsulates the canvas the 3d-force-graph is drawn on.
- * @returns {ChildNode}
- */
-function getCanvasDivNode() {
-    const domNode = document.getElementById("3d-graph");
-    return domNode.firstChild.firstChild.firstChild;
-}
-
-/**
- * Creates a new div element.
- * @param {string} className Class name of the new div element.
- * @param {HTMLElement} parent Optional parent element of the new div.
- * @param opts Defines any additional values that should be set for the new div element.
- * @returns {HTMLDivElement} The new div element.
- */
-function createDiv(className, parent, opts = {}) {
-    opts["className"] = className;
-    return createHTMLElement("div", parent, opts);
-}
-
-/**
- * Creates a new HTML element with specified options.
- * @param {string} type Type of the new element (e.g. div or img)
- * @param {HTMLElement} parent Optional parent for the new element.
- * @param opts Optional parameters to attach to the new element.
- * @returns {HTMLElement}
- */
-function createHTMLElement(type, parent, opts = {}) {
-    const node = document.createElement(type);
-
-    for (const [key, value] of Object.entries(opts)) {
-        node[key] = value;
-    }
-
-    if (typeof parent !== "undefined") {
-        parent.appendChild(node);
-    }
-    return node;
-}