diff --git a/display/graph.js b/display/graph.js index e6eb010be832a762356216a257a81e511ce02785..d088c4ba50acd6167b2010339a00c2224af3ba3b 100644 --- a/display/graph.js +++ b/display/graph.js @@ -3,11 +3,14 @@ import * as Helpers from "./helpers"; import { InfoOverlay } from "./infooverlay"; import { LinkOverlay } from "./linkoverlay"; -import * as THREE from 'three'; -import ForceGraph3D from '3d-force-graph'; +import * as THREE from "three"; +import ForceGraph3D from "3d-force-graph"; -import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js' -import { CSS3DRenderer, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js' +import { CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer.js"; +import { + CSS3DRenderer, + CSS3DSprite, +} from "three/examples/jsm/renderers/CSS3DRenderer.js"; class Graph { constructor(dataUrl) { @@ -31,10 +34,7 @@ class Graph { async loadGraph(dataUrl) { this.gData = await fetch(dataUrl).then((res) => res.json()); this.graph = ForceGraph3D({ - extraRenderers: [ - new CSS2DRenderer(), - new CSS3DRenderer(), - ], + extraRenderers: [new CSS2DRenderer(), new CSS3DRenderer()], })(document.getElementById("3d-graph")) .graphData(this.gData) .nodeLabel("id") @@ -81,7 +81,7 @@ class Graph { getNodeColor(node) { return this.highlightNodes.has(node) - ? node === hoverNode + ? node === this.hoverNode ? "rgb(255,0,0,1)" : "rgba(255,160,0,0.8)" : "rgba(0,255,255,0.6)"; @@ -354,7 +354,7 @@ function createFullScreenButton() { } const dataUrl = plugin_path + "datasets/aud1.json"; -G = new Graph(dataUrl); -linkoverlay = new LinkOverlay(G); -infooverlay = new InfoOverlay(G); +const G = new Graph(dataUrl); +const linkoverlay = new LinkOverlay(G); +const infooverlay = new InfoOverlay(G); G.infooverlay = infooverlay; diff --git a/display/helpers.js b/display/helpers.js index e4b7d94dad5b92cb32db57a415b60989ee314771..4469d407baacd6ee74dc7bececc6f5455c8e5c4f 100644 --- a/display/helpers.js +++ b/display/helpers.js @@ -1,5 +1,4 @@ -export {getWidth, getHeight, getCanvasDivNode} - +export { getWidth, getHeight, getCanvasDivNode }; function getWidth() { return document.getElementById("3d-graph").offsetWidth; diff --git a/display/infooverlay.js b/display/infooverlay.js index d0a3c7d96d97b7f536a950dfdd05757ce3fac68b..8da19c39d0894ac316c6b15618786140091ade7a 100644 --- a/display/infooverlay.js +++ b/display/infooverlay.js @@ -1,4 +1,5 @@ import * as Helpers from "./helpers"; +import jQuery from "jquery"; export { InfoOverlay }; diff --git a/display/linkoverlay.js b/display/linkoverlay.js index 18e3912a1900af3f5ef3eec07c99ab39c87f044a..0aa25f026213e38228f529ed9ddaca1961eb4f61 100644 --- a/display/linkoverlay.js +++ b/display/linkoverlay.js @@ -1,4 +1,5 @@ import * as Helpers from "./helpers"; +import jQuery from "jquery"; export { LinkOverlay }; diff --git a/package.json b/package.json index 072b05efff2fb956a8502d7202b4fc7bd71013a1..40c99ccf1542eb0f3770ee293aa6f88361507431 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ }, "dependencies": { "3d-force-graph": "^1.70.5", + "jquery": "^3.6.0", "three": "^0.131.2" } }