352 lines
11 KiB
JavaScript
352 lines
11 KiB
JavaScript
|
|
const CONFIG = {
|
|
'nodeSize': 16,
|
|
'baseUrl': 'https://www.securityvision.io/wiki/index.php/',
|
|
'dataUrl': 'semantic_data.json',
|
|
'labels': {
|
|
'rotate': true,
|
|
},
|
|
};
|
|
|
|
|
|
function getSizeForNode(node) {
|
|
// if (node.hasOwnProperty('https://schema.org/thumbnailUrl')) return nodeSize;
|
|
// if (weights[node['@id']]) return nodeSize * weights[node['@id']];
|
|
// if (node['@id'] == firstNodeId) return nodeSize * 1.2;
|
|
// // everynode has at least one link. these should equal 1
|
|
// return nodeSize * (.7 + Math.min(20, linkMap[node['@id']].length) / 40);
|
|
if (node.parent) {
|
|
return 2;
|
|
}
|
|
return CONFIG.nodeSize;
|
|
}
|
|
|
|
function splitText(text) {
|
|
var characters = [" ", "-", "_", '\xAD'];
|
|
var charSplitPos = {};
|
|
var mid = Math.floor(text.length / 2);
|
|
var splitPos = false;
|
|
var splitPosChar = false;
|
|
// split sentences
|
|
var _iteratorNormalCompletion6 = true;
|
|
var _didIteratorError6 = false;
|
|
var _iteratorError6 = undefined;
|
|
|
|
try {
|
|
for (var _iterator6 = characters[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) {
|
|
var char = _step6.value;
|
|
|
|
if (text.indexOf(char) < 0) {
|
|
continue;
|
|
}
|
|
var tmid = text.substr(0, mid).lastIndexOf(char);
|
|
if (tmid === -1) {
|
|
tmid = text.indexOf(char);
|
|
}
|
|
tmid += 1; // we want to cut _after_ the character
|
|
// console.log("Char", char, tmid);
|
|
if (splitPos === false || Math.abs(tmid - mid) < Math.abs(splitPos - mid)) {
|
|
// console.log("least!");
|
|
splitPos = tmid;
|
|
splitPosChar = char;
|
|
}
|
|
}
|
|
// console.log("pos",splitPos)
|
|
|
|
} catch (err) {
|
|
_didIteratorError6 = true;
|
|
_iteratorError6 = err;
|
|
} finally {
|
|
try {
|
|
if (!_iteratorNormalCompletion6 && _iterator6.return) {
|
|
_iterator6.return();
|
|
}
|
|
} finally {
|
|
if (_didIteratorError6) {
|
|
throw _iteratorError6;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (splitPos === false) {
|
|
return false;
|
|
}
|
|
|
|
var text1 = text.substr(0, splitPos).trim();
|
|
var text2 = text.substr(splitPos).trim();
|
|
|
|
if (splitPosChar == '\xAD') {
|
|
text1 += "-";
|
|
}
|
|
|
|
// find most equal split
|
|
return [text1, text2];
|
|
};
|
|
|
|
function getTitle(obj) {
|
|
if(obj.parent) {
|
|
return "sub of " + obj.parent.split('#', 1)[0].replace('_', ' ');
|
|
}
|
|
return obj['@id'].split('#', 1)[0].replace('_', ' ');
|
|
}
|
|
function getClasses(obj) {
|
|
if (!obj._INST)
|
|
return 'node';
|
|
const classes = obj['_INST'].map(classId => classId.split('#', 1)[0]);
|
|
return 'node ' + classes.join(' ');
|
|
}
|
|
function getUrl(obj) {
|
|
return CONFIG.baseUrl + obj['@id'].split('#', 1)[0];
|
|
}
|
|
|
|
let width = window.innerWidth;
|
|
let height = window.innerHeight;
|
|
|
|
const request = new Request(CONFIG.dataUrl, { method: 'GET' });
|
|
fetch(request)
|
|
.then(response => {
|
|
if (response.status === 200) {
|
|
return response.json();
|
|
} else {
|
|
throw new Error('Something went wrong on api server!');
|
|
}
|
|
})
|
|
.then(data => {
|
|
buildGraph(data);
|
|
}).catch(error => {
|
|
console.error(error);
|
|
});
|
|
|
|
function buildGraph(data) {
|
|
console.log(data);
|
|
const nodes = data.nodes.filter(n => n._INST || n.parent).map(d => Object.create(d));
|
|
const nodeMap = Object.fromEntries(nodes.map(d => [d['@id'], d]));
|
|
const links = data.links.filter(l => nodeMap[l.source] && nodeMap[l.target]).map(d => Object.create(d));
|
|
|
|
const simulation = d3.forceSimulation(nodes)
|
|
.force("link", d3.forceLink(links)
|
|
.id(d => d['@id'])
|
|
.iterations(2) // increase to make more rigid
|
|
)
|
|
.force("charge", d3.forceManyBody()
|
|
.strength(-50)
|
|
)
|
|
.force("center", d3.forceCenter(width / 2, height / 2))
|
|
.force("collision", d3.forceCollide(function (d) {
|
|
return getSizeForNode(d) * 1.5; // avoid overlapping nodes
|
|
}));
|
|
|
|
const svg = d3.select("svg")
|
|
.attr("viewBox", [0, 0, width, height]);
|
|
const container = svg.append("g").attr("id", "container");
|
|
|
|
const link = container.append("g")
|
|
.attr('class', 'links')
|
|
.selectAll(".link")
|
|
.data(links)
|
|
.join("g")
|
|
.attr("class", "link")
|
|
|
|
const linkLine = link
|
|
.append("line").
|
|
attr("marker-end", "url(#arrowHead)");
|
|
const linkText = link.append("text").text(function (l) {
|
|
return l.name;
|
|
});
|
|
|
|
const node = container.append("g")
|
|
.attr('class', 'nodes')
|
|
.selectAll(".node")
|
|
.data(nodes)
|
|
.join("g")
|
|
.attr('class', getClasses)
|
|
.call(drag(simulation))
|
|
.on("click", (evt, n) => selectNode(evt, n, node))
|
|
;
|
|
|
|
node
|
|
.append('circle')
|
|
.attr("r", getSizeForNode)
|
|
// .call(drag(simulation));
|
|
|
|
var nodeTitle = node.append('text').attr("class", "nodeTitle").attr("y", "5");
|
|
nodeTitle
|
|
.each(function (node, nodes) {
|
|
var textLength = void 0;
|
|
const self = d3.select(this);
|
|
const titleText = getTitle(node);
|
|
var titleTexts = false;
|
|
if (titleText.length > 20) {
|
|
titleTexts = splitText(titleText);
|
|
}
|
|
if (titleTexts !== false) {
|
|
const tspan1 = self.append("tspan").text(titleTexts[0]).attr("y", "-10").attr("x", "0");
|
|
const tspan = self.append("tspan").text(titleTexts[1]).attr("y", "10").attr("x", "0");
|
|
const textLength1 = tspan.node().getComputedTextLength();
|
|
const textLength2 = tspan.node().getComputedTextLength();
|
|
textLength = Math.max(textLength1, textLength2);
|
|
} else {
|
|
self.text(titleText);
|
|
textLength = self.node().getComputedTextLength();
|
|
}
|
|
// scale according to text length:
|
|
if (textLength > getSizeForNode(node) * 2) {
|
|
self.attr('transform', 'scale(' + getSizeForNode(node) * 2 / textLength / 1.05 + ')');
|
|
}
|
|
});
|
|
|
|
// node.append("title")
|
|
// .text(d => d['@id']);
|
|
|
|
svg.call(d3.zoom().scaleExtent([0.3, 6]).on("start", function () {
|
|
svg.node().classList.add("dragging");
|
|
}).on("end", function () {
|
|
svg.node().classList.remove("dragging");
|
|
}).on("zoom", function ({ transform }) {
|
|
container.attr("transform", transform);
|
|
}));
|
|
|
|
|
|
simulation.on("tick", () => {
|
|
|
|
|
|
data.nodes.forEach(function (d, idx) {
|
|
d.leftX = d.rightX = d.x;
|
|
|
|
// fix first node on center
|
|
// if(idx === 0) {
|
|
// d.fx = width/2;
|
|
// d.fy = height/2;
|
|
// return;
|
|
// }
|
|
});
|
|
link
|
|
.attr("x1", d => d.source.x)
|
|
.attr("y1", d => d.source.y)
|
|
.attr("x2", d => d.target.x)
|
|
.attr("y2", d => d.target.y);
|
|
|
|
linkLine.each(function (d) {
|
|
var sourceX, targetX, midX, dx, dy, angle;
|
|
|
|
// This mess makes the arrows exactly perfect.
|
|
// thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4
|
|
if (d.source.x < d.target.x) {
|
|
sourceX = d.source.x;
|
|
targetX = d.target.x;
|
|
} else if (d.target.x < d.source.x) {
|
|
targetX = d.target.x;
|
|
sourceX = d.source.x;
|
|
} else if (d.target.isCircle) {
|
|
targetX = sourceX = d.target.x;
|
|
} else if (d.source.isCircle) {
|
|
targetX = sourceX = d.source.x;
|
|
} else {
|
|
midX = (d.source.x + d.target.x) / 2;
|
|
if (midX > d.target.x) {
|
|
midX = d.target.x;
|
|
} else if (midX > d.source.x) {
|
|
midX = d.source.x;
|
|
} else if (midX < d.target.x) {
|
|
midX = d.target.x;
|
|
} else if (midX < d.source.x) {
|
|
midX = d.source.x;
|
|
}
|
|
targetX = sourceX = midX;
|
|
}
|
|
|
|
dx = targetX - sourceX;
|
|
dy = d.target.y - d.source.y;
|
|
angle = Math.atan2(dx, dy);
|
|
|
|
/* DISABLED
|
|
srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
|
|
tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
|
|
*/
|
|
var srcSize = getSizeForNode(d.source);
|
|
var tgtSize = getSizeForNode(d.target);
|
|
|
|
// Compute the line endpoint such that the arrow
|
|
// is touching the edge of the node rectangle perfectly.
|
|
d.sourceX = sourceX + Math.sin(angle) * srcSize;
|
|
d.targetX = targetX - Math.sin(angle) * tgtSize;
|
|
d.sourceY = d.source.y + Math.cos(angle) * srcSize;
|
|
d.targetY = d.target.y - Math.cos(angle) * tgtSize;
|
|
}).attr("x1", function (d) {
|
|
return d.sourceX;
|
|
}).attr("y1", function (d) {
|
|
return d.sourceY;
|
|
}).attr("x2", function (d) {
|
|
return d.targetX;
|
|
}).attr("y2", function (d) {
|
|
return d.targetY;
|
|
});
|
|
linkText.attr("transform", function (d) {
|
|
const dx = (d.target.x - d.source.x) / 2;
|
|
const dy = (d.target.y - d.source.y) / 2;
|
|
const x = d.source.x + dx;
|
|
const y = d.source.y + dy;
|
|
const deg = Math.atan(dy / dx) * 180 / Math.PI;
|
|
// if dx/dy == 0/0 -> deg == NaN
|
|
if (isNaN(deg)) {
|
|
return "";
|
|
}
|
|
// return "";
|
|
return "translate(" + x + " " + y + ") rotate(" + (CONFIG.labels.rotate ? deg : 0) + ")";
|
|
});
|
|
|
|
node
|
|
.attr("transform", d => `translate(${d.x}, ${d.y})`);
|
|
});
|
|
|
|
|
|
return svg.node();
|
|
}
|
|
|
|
color = _ => {
|
|
const scale = d3.scaleOrdinal(d3.schemeCategory10);
|
|
return d => scale(d.group);
|
|
};
|
|
|
|
const drag = simulation => {
|
|
|
|
function dragstarted(event) {
|
|
if (!event.active) simulation.alphaTarget(0.3).restart();
|
|
event.subject.fx = event.subject.x;
|
|
event.subject.fy = event.subject.y;
|
|
}
|
|
|
|
function dragged(event) {
|
|
event.subject.fx = event.x;
|
|
event.subject.fy = event.y;
|
|
}
|
|
|
|
function dragended(event) {
|
|
if (!event.active) simulation.alphaTarget(0);
|
|
event.subject.fx = null;
|
|
event.subject.fy = null;
|
|
}
|
|
|
|
return d3.drag()
|
|
.on("start", dragstarted)
|
|
.on("drag", dragged)
|
|
.on("end", dragended);
|
|
};
|
|
|
|
function selectNode(evt, node, d3Node){
|
|
console.log(evt, node, d3Node);
|
|
document.querySelectorAll('svg .node').forEach(n => n.classList.remove('selected'));
|
|
d3Node._groups[0][node.index].classList.add('selected');
|
|
|
|
infoEl = document.getElementById('nodeInfo');
|
|
infoEl.classList.remove('hidden');
|
|
|
|
infoEl.querySelector('.nodeTitle').textContent = getTitle(node);
|
|
infoEl.querySelector('.nodeContents').src = getUrl(node);
|
|
|
|
}
|
|
|
|
document.getElementById('closeInfo').addEventListener('click', (evt) => {
|
|
document.querySelectorAll('svg .node').forEach(n => n.classList.remove('selected'));
|
|
document.getElementById('nodeInfo').classList.add('hidden');
|
|
}) |