Improved bottom overlay.

Further toned down background lightness and colors.

graph.js

@@ -4,6 +4,10 @@ let hoverNode = null;
 let Graph = null;
 let firstTick = true;
 
+const colorPallette = ['rgb(104, 169, 77)', 'rgb(102, 75, 154)', 'rgb(41, 171, 226)', 'rgb(224, 133, 35)',
+    'rgb(214, 207, 126)', 'rgb(239, 65, 35)', 'rgb(255, 255, 255)'];
+const edgeColors = {};
+
 loadGraph();
 
 async function loadGraph() {
@@ -19,12 +23,15 @@ async function loadGraph() {
         .onNodeClick(focusOnNode)
         .onNodeHover(nodeHover)
         .onLinkHover(linkHover)
+        .linkColor(linkColor)
+        .linkOpacity(0.8)
         .onEngineTick(loadComponents);
 }
 
 
 function loadComponents() {
     if (firstTick) {
+        mapEdgeColors();
         updateLinks();
         add_background();
         drawOverlay();
@@ -32,6 +39,13 @@ function loadComponents() {
     }
 }
 
+function mapEdgeColors() {
+    const linkClasses = getLinkClasses()
+    for (let i = 0; i < linkClasses.length; i++) {
+        edgeColors[linkClasses[i]] = colorPallette[i % colorPallette.length]
+    }
+}
+
 
 function getLinkClasses() {
     const linkClasses = [];
@@ -47,20 +61,19 @@ function drawOverlay() {
     //overlayNode.innerText = 'Hello there!';
     sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2])
 
-    const colorPallette = ['rgb(104, 169, 77)', 'rgb(102, 75, 154)', 'rgb(41, 171, 226)', 'rgb(224, 133, 35)',
-        'rgb(214, 207, 126)', 'rgb(239, 65, 35)', 'rgb(255, 255, 255)'];
     const linkClasses = getLinkClasses();
+    const chars = Math.max.apply(Math, linkClasses.map(function (c) { return c.length; }));
 
     for (let i=0; i<linkClasses.length; i++) {
         const relation = document.createElement('div');
         relation.className = 'relation';
         relation.innerHTML = "<p>" + linkClasses[i] + "</p>";
-        overlayNode.appendChild(relation)
+        overlayNode.appendChild(relation);
 
         const colorStrip = document.createElement('div');
         colorStrip.className = 'rel-container';
-        colorStrip.style = "background-color: " + colorPallette[i] + ";"
-        relation.appendChild(colorStrip)
+        colorStrip.style = "background-color: " + edgeColors[linkClasses[i]] + "; width: " + 10 * chars + "px;";
+        relation.appendChild(colorStrip);
     }
 
     //sceneNode.appendChild(overlayNode);
@@ -73,7 +86,7 @@ function add_background() {
     //const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
     const loader = new THREE.TextureLoader();
     //const planeMaterial = new THREE.MeshLambertMaterial({color: 0xFF0000, side: THREE.DoubleSide}); //THREE.BackSide
-    const planeMaterial = new THREE.MeshBasicMaterial({map: loader.load(plugin_path + 'background_2.jpg'), side: THREE.DoubleSide}); //THREE.BackSide
+    const planeMaterial = new THREE.MeshBasicMaterial({map: loader.load(plugin_path + 'backgrounds/background_3.jpg'), side: THREE.DoubleSide}); //THREE.BackSide
     const mesh = new THREE.Mesh(sphereGeometry, planeMaterial);
     mesh.position.set(0, 0, 0);
     //mesh.rotation.set(0.5 * Math.PI, 0, 0);
@@ -146,6 +159,13 @@ function linkHover(link) {
     updateHighlight();
 }
 
+function linkColor(link) {
+    if ('type' in link) {
+        return edgeColors[link.type]
+    }
+    return 'rgb(255, 255, 255)'
+}
+
 
 function updateHighlight() {
     // trigger update of highlighted objects in scene

kg-style.css

@@ -7,8 +7,8 @@
     bottom: 0;
     pointer-events: none;
     width: 350px;
+    max-width: 400px;
     padding-left: 10px;
-    text-align: center;
     left: 0px;
     display: block;
     background-color: rgba(0,0,0,.6);
@@ -17,15 +17,13 @@
 
 .relation {
     display: inline-block;
-    padding-right: 1px;
+    padding-right: 5px;
     color: #fff;
     font-size: 13px;
     line-height: 20px;
     font-family: CuratorRegular,Helvetica Neue,Helvetica,Arial,sans-serif;
     text-transform: uppercase;
     margin-bottom: 6px;
-    width: 24%;
-    float: none;
     height: 17px;
 }