MISP
/
misp-galaxy
mirror of https://github.com/MISP/misp-galaxy
2
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #6 from NMD03/visual 

Visual
pull/941/head
Niclas Dauster 2024-03-05 12:10:42 +01:00 committed by GitHub
parent ab5a95ffc6 7ff99f5201
commit 17066667f9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 196 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
tools/mkdocs/site/docs/01_attachements/javascripts/graph.js
View File

@ -1,10 +1,16 @@
document$.subscribe(function () {
const NODE_RADIUS = 8;
const NODE_COLOR = "#69b3a2";
// const NODE_COLOR = "#69b3a2";
const Parent_Node_COLOR = "#ff0000";
function applyTableFilter(tf) {
var valuesToSelect = ['1', '2', '3'];
tf.setFilterValue(4, valuesToSelect);
tf.filter();
};
function parseFilteredTable(tf, allData) {
var data = [];
tf.getFilteredData().forEach((row, i) => {
@ -55,7 +61,8 @@ document$.subscribe(function () {
var newNodes = Array.from(new Set(newData.flatMap(d => [d.source, d.target])))
.map(id => ({
id,
path: nodePaths[id]
path: nodePaths[id],
galaxy: newData.find(d => d.source === id) ? newData.find(d => d.source === id).sourceGalaxy : newData.find(d => d.target === id).targetGalaxy
}));
var newLinks = newData.map(d => ({ source: d.source, target: d.target }));
@ -76,10 +83,39 @@ document$.subscribe(function () {
nodePaths[d.target] = d.targetPath || null;
});
// Extract unique galaxy names from data
const galaxies = Array.from(new Set(data.flatMap(d => [d.sourceGalaxy, d.targetGalaxy])));
const colorScheme = [
'#E63946', // Red
'#F1FAEE', // Off White
'#A8DADC', // Light Blue
'#457B9D', // Medium Blue
'#1D3557', // Dark Blue
'#F4A261', // Sandy Brown
'#2A9D8F', // Teal
'#E9C46A', // Saffron
'#F77F00', // Orange
'#D62828', // Dark Red
'#023E8A', // Royal Blue
'#0077B6', // Light Sea Blue
'#0096C7', // Sky Blue
'#00B4D8', // Bright Sky Blue
'#48CAE4', // Light Blue
'#90E0EF', // Powder Blue
'#ADE8F4', // Pale Cerulean
'#CAF0F8', // Blithe Blue
'#FFBA08', // Selective Yellow
'#FFD60A' // Naples Yellow
];
const colorScale = d3.scaleOrdinal(colorScheme)
.domain(galaxies);
var nodes = Array.from(new Set(data.flatMap(d => [d.source, d.target])))
.map(id => ({
id,
path: nodePaths[id]
path: nodePaths[id],
galaxy: data.find(d => d.source === id) ? data.find(d => d.source === id).sourceGalaxy : data.find(d => d.target === id).targetGalaxy
}));
let header = document.querySelector('h1').textContent;
@ -104,9 +140,9 @@ document$.subscribe(function () {
var simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id).distance(linkDistance))
.force("charge", d3.forceManyBody().strength(-50))
.force("charge", d3.forceManyBody().strength(-50).distanceMax(500))
.force("center", d3.forceCenter(width / 2, height / 2))
.alphaDecay(0.02); // A lower value, adjust as needed
.alphaDecay(0.05); // A lower value, adjust as needed
// Create links
var link = svg.append("g")
@ -115,7 +151,7 @@ document$.subscribe(function () {
.selectAll("line")
.data(links)
.enter().append("line")
.attr("stroke-width", d => Math.sqrt(d.value));
.attr("stroke-width", 1);
// Create nodes
var node = svg.append("g")
@ -128,8 +164,9 @@ document$.subscribe(function () {
return d.id === Parent_Node.id ? NODE_RADIUS + 5 : NODE_RADIUS;
})
.attr("fill", function (d, i) {
return d.id === Parent_Node.id ? Parent_Node_COLOR : NODE_COLOR;
});
return d.id === Parent_Node.id ? Parent_Node_COLOR : colorScale(d.galaxy);
})
.attr("class", d => "node galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-'));
// Apply tooltip on nodes
node.on("mouseover", function (event, d) {
@ -139,17 +176,42 @@ document$.subscribe(function () {
tooltip.html(d.id)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY - 28) + "px");
node.style("opacity", 0.1);
link.style("opacity", 0.1);
d3.select(this)
.attr("r", parseFloat(d3.select(this).attr("r")) + 5)
.style("opacity", 1);
svg.selectAll(".legend-text.galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
.style("font-weight", "bold")
.style("font-size", "14px");
link.filter(l => l.source.id === d.id || l.target.id === d.id)
.attr("stroke-width", 3)
.style("opacity", 1);
node.filter(n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id)))
.style("opacity", 1);
})
.on("mousemove", function (event) {
tooltip.style("left", (event.pageX) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function (d) {
.on("mouseout", function (event, d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
node.style("opacity", 1);
link.style("opacity", 1);
d3.select(this).attr("r", function (d, i) {
return d.id === Parent_Node.id ? NODE_RADIUS + 5 : NODE_RADIUS;
});
svg.selectAll(".legend-text.galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
.style("font-weight", "normal")
.style("font-size", "12px");
link.filter(l => l.source.id === d.id || l.target.id === d.id)
.attr("stroke-width", 1);
node.filter(n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id)))
});
// Apply links on nodes
node.on("dblclick", function (event, d) {
location.href = d.path;
@ -180,6 +242,93 @@ document$.subscribe(function () {
if (!event.active) simulation.alphaTarget(0);
}
// Prepare legend data
const legendData = galaxies.map(galaxy => ({
name: galaxy,
color: colorScale(galaxy)
}));
const maxCharLength = 10; // Maximum number of characters to display in legend
// Create legend
const legend = svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(" + (width - 100) + ",20)"); // Adjust position as needed
// Add legend title
legend.append("text")
.attr("x", 0)
.attr("y", -10)
.style("font-size", "13px")
.style("text-anchor", "start")
.style("fill", "grey")
.text("Galaxy Colors");
// Add colored rectangles and text labels for each galaxy
const legendItem = legend.selectAll(".legend-item")
.data(legendData)
.enter().append("g")
.attr("class", "legend-item")
.attr("transform", (d, i) => `translate(0, ${i * 20})`);
legendItem.append("rect")
.attr("width", 12)
.attr("height", 12)
.style("fill", d => d.color)
.on("mouseover", function (event, d) {
node.style("opacity", 0.1);
link.style("opacity", 0.1);
svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
.each(function () {
var currentRadius = d3.select(this).attr("r");
d3.select(this).style("opacity", 1);
});
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d.name)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function (event, d) {
node.style("opacity", 1);
link.style("opacity", 1);
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
legendItem.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", "0.35em")
.style("text-anchor", "start")
.style("fill", "grey")
.style("font-size", "12px")
.attr("class", d => "legend-text galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
.text(d => d.name.length > maxCharLength ? d.name.substring(0, maxCharLength) + "..." : d.name)
.on("mouseover", function (event, d) {
node.style("opacity", 0.1);
link.style("opacity", 0.1);
svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
.each(function () {
d3.select(this).style("opacity", 1);
});
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d.name)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function (event, d) {
node.style("opacity", 1);
link.style("opacity", 1);
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
// Update positions on each simulation 'tick'
simulation.on("tick", () => {
nodes.forEach(d => {
@ -210,8 +359,9 @@ document$.subscribe(function () {
return d.id === Parent_Node.id ? NODE_RADIUS + 5 : NODE_RADIUS;
})
.attr("fill", function (d, i) {
return d.id === Parent_Node.id ? Parent_Node_COLOR : NODE_COLOR;
}),
return d.id === Parent_Node.id ? Parent_Node_COLOR : colorScale(d.galaxy);
})
.attr("class", d => "node galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-')),
update => update,
exit => exit.remove()
);
@ -226,15 +376,39 @@ document$.subscribe(function () {
tooltip.html(d.id)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY - 28) + "px");
node.style("opacity", 0.1);
link.style("opacity", 0.1);
d3.select(this)
.attr("r", parseFloat(d3.select(this).attr("r")) + 5)
.style("opacity", 1);
svg.selectAll(".legend-text.galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
.style("font-weight", "bold")
.style("font-size", "14px");
link.filter(l => l.source.id === d.id || l.target.id === d.id)
.attr("stroke-width", 3)
.style("opacity", 1);
node.filter(n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id)))
.style("opacity", 1);
})
.on("mousemove", function (event) {
tooltip.style("left", (event.pageX) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function (d) {
.on("mouseout", function (event, d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
node.style("opacity", 1);
link.style("opacity", 1);
d3.select(this).attr("r", function (d, i) {
return d.id === Parent_Node.id ? NODE_RADIUS + 5 : NODE_RADIUS;
});
svg.selectAll(".legend-text.galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
.style("font-weight", "normal")
.style("font-size", "12px");
link.filter(l => l.source.id === d.id || l.target.id === d.id)
.attr("stroke-width", 1);
node.filter(n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id)))
});
// Apply links on nodes
@ -261,6 +435,8 @@ document$.subscribe(function () {
// Restart the simulation with new data
simulation.nodes(nodes);
simulation.force("link").links(links);
linkDistance = Math.sqrt((width * height) / nodes.length);
simulation.force("link").distance(linkDistance);
simulation.alpha(1).restart();
}
});
@ -307,7 +483,13 @@ document$.subscribe(function () {
});
tf.init();
var data = parseTable(table);
var allData = parseTable(table);
if (allData.length > 1000) {
applyTableFilter(tf);
data = parseFilteredTable(tf, allData);
} else {
data = allData;
}
var graphId = "graph" + index;
var div = document.createElement("div");
div.id = graphId;
@ -316,7 +498,7 @@ document$.subscribe(function () {
// Listen for table filtering events
tf.emitter.on(['after-filtering'], function () {
filterTableAndGraph(tf, simulation, data);
filterTableAndGraph(tf, simulation, allData);
});
}
});