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

Object in tree are now displayed as hexagon + better input parsing

megaRefact
Sami Mokaddem 2018-08-27 09:58:36 +00:00
parent 61d01176b7
commit d6ebcff553
1 changed files with 75 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
static/js/treeFromJson.js
View File

@ -119,7 +119,6 @@
} }
// Normalize for fixed-depth. (+ consider linkname) // Normalize for fixed-depth. (+ consider linkname)
//nodes.forEach(function(d) { d.y = d.depth * 100; });
nodes.forEach(function(d) { nodes.forEach(function(d) {
let offset = maxSizePerDepth[d.depth]*(that.options.maxCharDisplay-2); let offset = maxSizePerDepth[d.depth]*(that.options.maxCharDisplay-2);
d.y = d.depth * 100 + offset; d.y = d.depth * 100 + offset;
@ -142,23 +141,36 @@
nodeEnter.attr("class", "node nodeNoInteraction"); nodeEnter.attr("class", "node nodeNoInteraction");
} }
var nodeEnterNotArray = nodeEnter.filter(function(d) { var nodeEnterLeaf = nodeEnter.filter(function(d) {
var not_add = d.additionalNode === undefined || !d.additionalNode;
var is_leaf = d.children === undefined || d.children.length == 0;
return not_add && is_leaf;
});
var nodeEnterObject = nodeEnter.filter(function(d) {
var not_add = d.additionalNode === undefined || !d.additionalNode; var not_add = d.additionalNode === undefined || !d.additionalNode;
var not_arr = d.children === undefined || d.children[0].linkname === undefined || d.children[0].linkname !== ''; var not_arr = d.children === undefined || d.children[0].linkname === undefined || d.children[0].linkname !== '';
return not_add && not_arr; var is_obj = d.children !== undefined && d.children[0].linkname !== undefined && d.children[0].linkname !== '';
}); return not_add && not_arr && is_obj;
nodeEnterNotArray });
.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
var nodeEnterArray = nodeEnter.filter(function(d) { var nodeEnterArray = nodeEnter.filter(function(d) {
var not_add = d.additionalNode === undefined || !d.additionalNode; var not_add = d.additionalNode === undefined || !d.additionalNode;
var not_arr = d.children === undefined || d.children[0].linkname === undefined || d.children[0].linkname !== ''; var not_arr = d.children === undefined || d.children[0].linkname === undefined || d.children[0].linkname !== '';
return not_add && !not_arr; return not_add && !not_arr;
}); });
// svg style
nodeEnterLeaf
.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnterObject
.append("polygon")
.attr("points", this.getPointsHexagon(0))
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnterArray nodeEnterArray
.append("rect") .append("rect")
.attr("width", 0) .attr("width", 0)
.attr("height", 0) .attr("height", 0)
.attr("y", 0) .attr("y", 0)
@ -181,6 +193,9 @@
.attr("r", 10) .attr("r", 10)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("polygon")
.attr("points", this.getPointsHexagon(11.5))
nodeUpdate.select("rect") nodeUpdate.select("rect")
.attr("width", 20) .attr("width", 20)
.attr("height", 20) .attr("height", 20)
@ -198,6 +213,9 @@
nodeExit.select("circle") nodeExit.select("circle")
.attr("r", 1e-6); .attr("r", 1e-6);
nodeExit.select("polygon")
.attr("points", this.getPointsHexagon(0));
nodeExit.select("rect") nodeExit.select("rect")
.attr("width", 0) .attr("width", 0)
.attr("height", 0) .attr("height", 0)
@ -351,6 +369,7 @@
// select all nodes matching the clicked element // select all nodes matching the clicked element
var resCircle; var resCircle;
var resRect; var resRect;
var resHexa;
if (clicked.data()[0].children === undefined) { // is leaf if (clicked.data()[0].children === undefined) { // is leaf
resCircle = that.svg.selectAll(".node circle") resCircle = that.svg.selectAll(".node circle")
.filter(function(d) { .filter(function(d) {
@ -358,22 +377,27 @@
return false; return false;
} }
var c1 = d.depth == o_depth; var c1 = d.depth == o_depth;
//var c2 = d.parent.id - c_index -1 == d.id; var c2_childIndexMatch = d.parent.id - c_index -1 == d.id
var c21 = d.parent.id - c_index -1 == d.id
// is label
var c2_isLabel = !Number.isInteger(c_index) && (typeof c_index === 'string');
// consider linkname if label has been picked manually // consider linkname if label has been picked manually
let il_last = that.instructions.labels.length-1; let il_last = that.instructions.labels.length-1;
var labelIsManual = that.instructions.labels[il_last] != 'l'; var labelIsManual = that.instructions.labels[il_last] != 'l';
var c22 = true; var c2_manualLabelMatch = true;
if (labelIsManual) { if (labelIsManual) {
c22 = d.linkname === c_index; c2_manualLabelMatch = d.linkname === c_index;
} else { } else {
//c2_manualLabelMatch = false;
} }
var c2 = c21 || c22;
var c2 = (c2_childIndexMatch && !c2_isLabel) || (c2_manualLabelMatch && c2_isLabel);
var notClicked = d.id != c_id; var notClicked = d.id != c_id;
return c1 && c2; return c1 && c2;
}); });
} else {
} else { // children may be leaves
// check if children are leaf // check if children are leaf
var child = clicked.data()[0].children[0]; var child = clicked.data()[0].children[0];
if (that.isObject(child) || Array.isArray(child)) { // children are not leaves if (that.isObject(child) || Array.isArray(child)) { // children are not leaves
@ -408,10 +432,13 @@
resText.style('fill', that.should_invert_text_color(itemColor) ? 'white' : 'black'); resText.style('fill', that.should_invert_text_color(itemColor) ? 'white' : 'black');
resCircle = that.svg.selectAll(".node circle") resCircle = that.svg.selectAll(".node polygon, .node circle")
.filter(function(d) { .filter(function(d) {
return d.parent.depth == clicked.data()[0].depth; if (d.parent === undefined || d.parent === null) {
//return d.parent !== null && d.parent.id == clicked.data()[0].id; return d.id == clicked.data()[0].id;
} else {
return d.parent.depth == clicked.data()[0].depth;
}
}); });
var nodesData = []; var nodesData = [];
if(resCircle !== undefined) { if(resCircle !== undefined) {
@ -435,15 +462,6 @@
this.add_instruction(instructions); this.add_instruction(instructions);
return; return;
//let source = clicked.data()[0];
//let target = child;
//if (target.linkname !== undefined && target.linkname !== '') {
// var resL = this.svg.selectAll("path.link").filter(function(d) {
// return d.source.id == source.id && d.target.id == target.id;
// });
// that.clickLabel(resL.data()[0]);
//}
//return;
} else { // children are leaves } else { // children are leaves
resCircle = that.svg.selectAll(".node circle") resCircle = that.svg.selectAll(".node circle")
.filter(function(d) { .filter(function(d) {
@ -618,6 +636,12 @@
instruction = instruction !== null ? instruction : prevVal; instruction = instruction !== null ? instruction : prevVal;
mapping.unshift(instruction); mapping.unshift(instruction);
} }
// if no path found, we are at the root -> need to iterate
if (mapping.length == 0) {
mapping.push('l');
}
return mapping; return mapping;
}, },
@ -778,6 +802,14 @@
var l = this.instructions.labels; var l = this.instructions.labels;
var v = this.instructions.values; var v = this.instructions.values;
var d = this.instructions.dates; var d = this.instructions.dates;
// convert integer index into {index}
for (var i=0; i<v.length; i++) {
if (Number.isInteger(v[i])) {
adjustedInstructions.values[i] = '{'+v[i]+'}';
}
}
// label & value // label & value
if (l.length != 0 && v.length != 0) { if (l.length != 0 && v.length != 0) {
var smaller_array = v.length < l.length ? v : l; var smaller_array = v.length < l.length ? v : l;
@ -789,10 +821,9 @@
break; break;
} }
} }
// in case no match, last one should be registered // in case no match, last one should be registered
matchingIndex = has_matched ? matchingIndex : smaller_array.length-1; matchingIndex = has_matched ? matchingIndex : smaller_array.length-1;
//adjustedInstructions.values[matchingIndex] = 'i1,l';
//adjustedInstructions.values[matchingIndex] = 'i1,'+adjustedInstructions.values[matchingIndex];
let inst = adjustedInstructions.values[matchingIndex]; let inst = adjustedInstructions.values[matchingIndex];
inst = inst == 'l' ? 'l' : '{'+inst+'}'; inst = inst == 'l' ? 'l' : '{'+inst+'}';
adjustedInstructions.values[matchingIndex] = 'i1,'+inst; adjustedInstructions.values[matchingIndex] = 'i1,'+inst;
@ -809,7 +840,6 @@
break; break;
} }
} }
//adjustedInstructions.values[matchingIndex] = 'i2,l';
adjustedInstructions.values[matchingIndex] = 'i2,'+adjustedInstructions.values[matchingIndex]; adjustedInstructions.values[matchingIndex] = 'i2,'+adjustedInstructions.values[matchingIndex];
adjustedInstructions.index['i2'] = adjustedInstructions.dates.slice(matchingIndex+1); adjustedInstructions.index['i2'] = adjustedInstructions.dates.slice(matchingIndex+1);
@ -903,7 +933,6 @@
if (root.length > maxWidth) { if (root.length > maxWidth) {
var addNode = {}; var addNode = {};
var remaining = root.length - maxWidth; var remaining = root.length - maxWidth;
//addNode.name = ''+remaining+'...';
addNode.name = '['+remaining+' more]'; addNode.name = '['+remaining+' more]';
addNode.parent = null; addNode.parent = null;
addNode.additionalNode = true; addNode.additionalNode = true;
@ -924,8 +953,7 @@
} }
if (Object.keys(root).length > maxWidth) { if (Object.keys(root).length > maxWidth) {
var addNode = {}; var addNode = {};
var remaining = root.length - maxWidth; var remaining = Object.keys(root).length - maxWidth;
//addNode.name = ''+remaining+' ...';
addNode.name = '['+remaining+' more]'; addNode.name = '['+remaining+' more]';
addNode.parent = null; addNode.parent = null;
addNode.additionalNode = true; addNode.additionalNode = true;
@ -938,6 +966,18 @@
return child; return child;
}, },
getPointsHexagon: function(size) {
let pts = [
0+','+size,
size*0.87 + ',' + size*0.5,
size*0.87 + ',' + -size*0.5,
0 + ',' + -size,
-size*0.87 + ',' + -size*0.5,
-size*0.87 + ',' + size*0.5,
];
return pts.join(', ');
},
syntaxHighlightJson: function(json) { syntaxHighlightJson: function(json) {
if (typeof json == 'string') { if (typeof json == 'string') {
json = JSON.parse(json); json = JSON.parse(json);