Skip to content

Commit 0ddd158

Browse files
jimbethancourtjimbethancourt
committed
#128 Adding link labels & disabling highlighting
1 parent d97596b commit 0ddd158

File tree

1 file changed

+62
-35
lines changed

1 file changed

+62
-35
lines changed

‎report/src/test/resources/sigmaPlayground.html‎

Lines changed: 62 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@
186186

187187
function createForceGraph(popupId, containerName, dot) {
188188
// Add event listener for Escape key to close the popup
189-
document.addEventListener('keydown', function(event) {
189+
document.addEventListener('keydown', function (event) {
190190
if (event.key === 'Escape') {
191191
hidePopup();
192192
}
@@ -202,20 +202,21 @@
202202
var nodes = [];
203203
var links = [];
204204

205-
graphlibGraph.nodes().forEach(function(node) {
205+
graphlibGraph.nodes().forEach(function (node) {
206206
var nodeData = graphlibGraph.node(node);
207207
nodes.push({
208208
id: node,
209209
color: nodeData.color || 'white',
210-
211210
});
212211
});
213212

214-
graphlibGraph.edges().forEach(function(edge) {
213+
graphlibGraph.edges().forEach(function (edge) {
215214
links.push({
216215
source: edge.v,
217216
target: edge.w,
218-
color: graphlibGraph.edge(edge).color || 'white' });
217+
color: graphlibGraph.edge(edge).color || 'white',
218+
weight: graphlibGraph.edge(edge).weight
219+
});
219220
});
220221

221222
const gData = {
@@ -255,49 +256,75 @@
255256
const Graph = new ForceGraph3D(container)
256257
.graphData(gData)
257258
.nodeLabel('id')
258-
.nodeColor(node => highlightNodes.has(node) ? node === hoverNode ? 'rgb(255,0,0,1)' : 'rgba(255,160,0,0.8)' : 'rgba(0,255,255,0.6)')
259+
// .nodeColor(node => highlightNodes.has(node) ? node === hoverNode ? 'rgb(255,0,0,1)' : 'rgba(255,160,0,0.8)' : 'rgba(0,255,255,0.6)')
259260
.linkWidth(link => highlightLinks.has(link) ? 4 : 1)
260261
.linkDirectionalParticles(link => highlightLinks.has(link) ? 4 : 0)
261262
.linkDirectionalParticleWidth(4)
262263
.width(container.clientWidth)
263264
.height(container.clientHeight)
264265
.nodeThreeObject(node => {
266+
// use node labels instead of spheres
265267
const sprite = new SpriteText(node.id);
266268
sprite.material.depthWrite = false; // make sprite background transparent
267269
sprite.color = node.color;
268-
sprite.textHeight = 2;
270+
sprite.textHeight = 4;
269271
return sprite;
270272
})
271-
.onNodeHover(node => {
272-
// no state change
273-
if ((!node && !highlightNodes.size) || (node && hoverNode === node)) return;
274-
275-
highlightNodes.clear();
276-
highlightLinks.clear();
277-
if (node) {
278-
highlightNodes.add(node);
279-
node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
280-
node.links.forEach(link => highlightLinks.add(link));
281-
}
282-
283-
hoverNode = node || null;
284-
285-
updateHighlight(Graph);
273+
// code to display weight as link text - may be too much for browsers to handle
274+
.linkThreeObjectExtend(true)
275+
.linkThreeObject(link => {
276+
// extend link with text sprite
277+
const sprite = new SpriteText(`${link.weight}`);
278+
sprite.color = 'lightgrey';
279+
sprite.textHeight = 3;
280+
return sprite;
286281
})
287-
.onLinkHover(link => {
288-
highlightNodes.clear();
289-
highlightLinks.clear();
282+
.linkPositionUpdate((sprite, { start, end }) => {
283+
const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({
284+
[c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
285+
})));
290286

291-
if (link) {
292-
highlightLinks.add(link);
293-
highlightNodes.add(link.source);
294-
highlightNodes.add(link.target);
295-
}
287+
// Position sprite
288+
Object.assign(sprite.position, middlePos);
289+
})
290+
// code to highlight nodes & links
291+
// TODO: enable via control - see Manipulate Link Force Distance for example
292+
// .onNodeHover(node => {
293+
// // no state change
294+
// if ((!node && !highlightNodes.size) || (node && hoverNode === node)) return;
295+
//
296+
// highlightNodes.clear();
297+
// highlightLinks.clear();
298+
// if (node) {
299+
// highlightNodes.add(node);
300+
// node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
301+
// node.links.forEach(link => highlightLinks.add(link));
302+
// }
303+
//
304+
// hoverNode = node || null;
305+
//
306+
// updateHighlight(Graph);
307+
// })
308+
// .onLinkHover(link => {
309+
// highlightNodes.clear();
310+
// highlightLinks.clear();
311+
//
312+
// if (link) {
313+
// highlightLinks.add(link);
314+
// highlightNodes.add(link.source);
315+
// highlightNodes.add(link.target);
316+
// }
317+
//
318+
// updateHighlight(Graph);
319+
// })
320+
;
296321

297-
updateHighlight(Graph);
298-
});
322+
Graph
323+
.d3Force('link')
324+
.distance(link => (1/link.weight) * 200);
299325
}
300326

327+
// used by highlighting functionality
301328
function updateHighlight(Graph) {
302329
// trigger update of highlighted objects in scene
303330
Graph
@@ -313,7 +340,7 @@
313340
<script>
314341
function showPopup(popupId, containerName, dot) {
315342
// Add event listener for Escape key to close the popup
316-
document.addEventListener('keydown', function(event) {
343+
document.addEventListener('keydown', function (event) {
317344
if (event.key === 'Escape') {
318345
hidePopup();
319346
}
@@ -345,7 +372,7 @@
345372
});
346373

347374
// Remove the Escape key event listener
348-
document.removeEventListener('keydown', function(event) {
375+
document.removeEventListener('keydown', function (event) {
349376
if (event.key === 'Escape') {
350377
hidePopup();
351378
}
@@ -372,7 +399,7 @@
372399
C -> A [color=cyan];
373400
}
374401
`;
375-
const mb_dot = `strict digraph G {
402+
const mb_dot = `strict digraph G {
376403
AboutDialog -> MiscTools [ label = "10" weight = "10" color = "red" ];
377404
AboutDialog -> MainPanelView [ label = "1" weight = "1" color = "red" ];
378405
ChunkDownloader -> SecureSingleThreadNotifiable [ label = "1" weight = "1" ];

0 commit comments

Comments
 (0)