mirror of https://github.com/MISP/misp-dashboard
chg: improvement of proxyMapper UI
parent
9ffe8ed30d
commit
9e657ea415
|
@ -35,7 +35,6 @@
|
|||
constructor: ProxyMapper,
|
||||
|
||||
perform_mapping: function(data) {
|
||||
console.log(this.mapping);
|
||||
if (this.mapping.dates.length > 0) {
|
||||
this.c_dates(this.data, this.mapping.dates); // probe and fetch all dates
|
||||
}
|
||||
|
@ -65,7 +64,9 @@
|
|||
let label = intermediate[index];
|
||||
let val = [];
|
||||
for (var i=0; i<additionalData.valueLength; i++) {
|
||||
val.push(that.options.fillValue);
|
||||
if ((that.options.fillValue !== undefined && that.options.fillValue != '')) {
|
||||
val.push(that.options.fillValue);
|
||||
}
|
||||
}
|
||||
that.result[label] = val;
|
||||
};
|
||||
|
|
|
@ -11,14 +11,16 @@
|
|||
|
||||
var TreeFromJson = function(container, data, options) {
|
||||
this.container = container;
|
||||
console.log(container.width());
|
||||
this._default_options = {
|
||||
margin: {top: 20, right: 20, bottom: 20, left: 20},
|
||||
width: 800,
|
||||
height: 800,
|
||||
width: container.width() > 800 ? container.width()/2 : 800,
|
||||
height: container.height() > 800 ? container.height()/2 : 800,
|
||||
treeNodes : {
|
||||
width: 3,
|
||||
depth: 5
|
||||
},
|
||||
maxCharDisplay: 20,
|
||||
itemColors: ['#fc440f', '#a5e12e', '#5d2e8c', '#2ec4b6', '#65524d', '#adcad6', '#99c24d'],
|
||||
duration: 500,
|
||||
interaction: true,
|
||||
|
@ -29,7 +31,11 @@
|
|||
this.data = data;
|
||||
this.treeData = [this.create_tree(data, '', this.options.treeNodes.depth, this.options.treeNodes.depth, this.options.treeNodes.width)];
|
||||
|
||||
this.letterWidth = 10;
|
||||
this.letterWidth = 8;
|
||||
this.treeDiv = $('<div class="treeDiv panel panel-default panel-body"></div>');
|
||||
this.container.append(
|
||||
$('<div></div>').append(this.treeDiv)
|
||||
);
|
||||
this.width = this.options.width - this.options.margin.right - this.options.margin.left,
|
||||
this.height = this.options.height - this.options.margin.top - this.options.margin.bottom;
|
||||
|
||||
|
@ -47,7 +53,7 @@
|
|||
this.diagonal = d3.svg.diagonal()
|
||||
.projection(function(d) { return [d.y, d.x]; });
|
||||
|
||||
this.svg = d3.select(this.container[0]).append("svg")
|
||||
this.svg = d3.select(this.treeDiv[0]).append("svg")
|
||||
.attr("width", this.width + this.options.margin.right + this.options.margin.left)
|
||||
.attr("height", this.height + this.options.margin.top + this.options.margin.bottom)
|
||||
.append("g")
|
||||
|
@ -70,10 +76,17 @@
|
|||
this.set_current_mapping_item();
|
||||
}
|
||||
|
||||
this.jsonDivIn = $('<div class="jsonDiv panel panel-default panel-body"></div>');
|
||||
this.treeDiv.append(this.jsonDivIn);
|
||||
var j = this.syntaxHighlightJson(this.data);
|
||||
this.jsonDivIn.html(j);
|
||||
if (this.options.interaction) {
|
||||
//var result = new $.proxyMapper(this.instructions, this.treeData, {});
|
||||
this.treeDivResult = $('<div class="resultTree"></div>');
|
||||
this.container.append(this.treeDivResult);
|
||||
this.jsonDivOut = $('<div class="jsonDiv"></div>');
|
||||
this.treeDivResult.append(this.jsonDivOut);
|
||||
this.container.children().append(
|
||||
this.treeDivResult
|
||||
);
|
||||
this.update_result_tree();
|
||||
}
|
||||
|
||||
|
@ -90,8 +103,25 @@
|
|||
var nodes = this.tree.nodes(this.root).reverse(),
|
||||
links = this.tree.links(nodes);
|
||||
|
||||
// Normalize for fixed-depth.
|
||||
nodes.forEach(function(d) { d.y = d.depth * 100; });
|
||||
// Compute depth size based on the link name
|
||||
var maxSizePerDepth = [];
|
||||
nodes.forEach(function(d) {
|
||||
let m = maxSizePerDepth[d.depth] !== undefined ? maxSizePerDepth[d.depth] : 0;
|
||||
let text = that.adjust_text_length(d.linkname).length;
|
||||
let size = d.linkname !== undefined ? text : 0;
|
||||
maxSizePerDepth[d.depth] = size > m ? size : m;
|
||||
});
|
||||
// add previous level together
|
||||
for (var i=1; i<maxSizePerDepth.length; i++) {
|
||||
maxSizePerDepth[i] += maxSizePerDepth[i-1];
|
||||
}
|
||||
|
||||
// Normalize for fixed-depth. (+ consider linkname)
|
||||
//nodes.forEach(function(d) { d.y = d.depth * 100; });
|
||||
nodes.forEach(function(d) {
|
||||
let offset = maxSizePerDepth[d.depth]*(that.options.maxCharDisplay-2);
|
||||
d.y = d.depth * 100 + offset;
|
||||
});
|
||||
|
||||
// Update the nodes…
|
||||
var node = this.svg.selectAll("g.node")
|
||||
|
@ -165,12 +195,16 @@
|
|||
|
||||
linkEnter.append('rect')
|
||||
.attr("class", "rectText")
|
||||
.attr("rx", 5)
|
||||
.attr("ry", 5)
|
||||
.attr("transform", function(d) {
|
||||
let xoffset = d.target.linkname !== undefined ? that.letterWidth*that.adjust_text_length(d.target.linkname).length/2 : 0;
|
||||
let yoffset = 10;
|
||||
return "translate(" +
|
||||
d.source.y + "," +
|
||||
d.source.x + ")";
|
||||
(d.source.y-xoffset) + "," +
|
||||
(d.source.x-yoffset) + ")";
|
||||
})
|
||||
.style("fill-opacity", 1e-6);
|
||||
.style("opacity", 1e-6);
|
||||
linkEnter.append('text')
|
||||
.attr("class", "linkText")
|
||||
.attr("font-family", "Arial, Helvetica, sans-serif")
|
||||
|
@ -183,13 +217,13 @@
|
|||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", "middle")
|
||||
.text(function(d) {
|
||||
return d.target.linkname;
|
||||
return that.adjust_text_length(d.target.linkname);
|
||||
})
|
||||
.style("fill-opacity", 1e-6);
|
||||
|
||||
// update rectangle size based on text
|
||||
linkEnter.selectAll("rect")
|
||||
.attr("width", function(d) { return d.target.linkname !== undefined ? that.letterWidth*d.target.linkname.length : 0; })
|
||||
.attr("width", function(d) { return d.target.linkname !== undefined ? that.letterWidth*that.adjust_text_length(d.target.linkname).length : 0; })
|
||||
.attr("height", 22)
|
||||
|
||||
|
||||
|
@ -201,10 +235,10 @@
|
|||
|
||||
linkUpdate.select('rect').transition()
|
||||
.duration(this.options.duration)
|
||||
.style("fill-opacity", 1)
|
||||
.style("opacity", 0.85)
|
||||
.attr("d", this.diagonal)
|
||||
.attr("transform", function(d){
|
||||
let xoffset = d.target.linkname !== undefined ? that.letterWidth*d.target.linkname.length/2 : 0;
|
||||
let xoffset = d.target.linkname !== undefined ? that.letterWidth*that.adjust_text_length(d.target.linkname).length/2 : 0;
|
||||
let yoffset = 10;
|
||||
return "translate(" +
|
||||
((d.source.y + d.target.y)/2-xoffset) + "," +
|
||||
|
@ -476,7 +510,7 @@
|
|||
|
||||
//var result = new $.proxyMapper(this.instructions, this.data, {});
|
||||
var pm_options = {
|
||||
fillValue: this.fillValueDomInput.val() ? this.fillValueDomInput.val() : 0
|
||||
fillValue: this.fillValueDomInput.val()
|
||||
};
|
||||
var result = new $.proxyMapper(adjusted_instructions, this.data, pm_options);
|
||||
this.treeDivResult[0].innerHTML = '';
|
||||
|
@ -487,6 +521,17 @@
|
|||
return v !== null && typeof v === 'object';
|
||||
},
|
||||
|
||||
adjust_text_length: function(text) {
|
||||
if (text === undefined || text === '') {
|
||||
return '';
|
||||
}
|
||||
text = text.slice(0, this.options.maxCharDisplay);
|
||||
if (text.length > this.options.maxCharDisplay) {
|
||||
text += '...';
|
||||
}
|
||||
return text;
|
||||
},
|
||||
|
||||
create_tree: function(root, linkname, depth, maxDepth, maxWidth) {
|
||||
if (depth == 0) {
|
||||
return;
|
||||
|
@ -522,7 +567,7 @@
|
|||
child.children.push(this.create_tree(node, k, depth-1, maxDepth, maxWidth));
|
||||
i++;
|
||||
}
|
||||
if (root.length > maxWidth) {
|
||||
if (Object.keys(root).length > maxWidth) {
|
||||
var addNode = {};
|
||||
addNode.name = '...';
|
||||
addNode.parent = null;
|
||||
|
@ -534,8 +579,32 @@
|
|||
child.name = root;
|
||||
}
|
||||
return child;
|
||||
},
|
||||
|
||||
syntaxHighlightJson: function(json) {
|
||||
if (typeof json == 'string') {
|
||||
json = JSON.parse(json);
|
||||
}
|
||||
json = JSON.stringify(json, undefined, 2);
|
||||
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/ /g, ' ');
|
||||
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
||||
var cls = 'json_number';
|
||||
if (/^"/.test(match)) {
|
||||
if (/:$/.test(match)) {
|
||||
cls = 'json_key';
|
||||
} else {
|
||||
cls = 'json_string';
|
||||
}
|
||||
} else if (/true|false/.test(match)) {
|
||||
cls = 'json_boolean';
|
||||
} else if (/null/.test(match)) {
|
||||
cls = 'json_null';
|
||||
}
|
||||
return '<span class="' + cls + '">' + match + '</span>';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
$.treeFromJson = TreeFromJson;
|
||||
|
|
|
@ -23,9 +23,15 @@
|
|||
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.resultTree {
|
||||
float: right;
|
||||
.treeDiv {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.resultTree {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.node {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
@ -71,11 +77,26 @@
|
|||
}
|
||||
|
||||
.linkText {
|
||||
font-size: 18px;
|
||||
/*font-size: 18px;*/
|
||||
fill: #000;
|
||||
}
|
||||
.rectText {
|
||||
fill: #fff;
|
||||
fill: #f5f5f5;
|
||||
stroke: #ddd;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.json_key {
|
||||
color: #690;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.json_string, .json_boolean, .json_number {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.json_null {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -87,55 +108,6 @@
|
|||
<div id='treediv'></div>
|
||||
|
||||
<script>
|
||||
//function isObject(v) {
|
||||
// return v !== null && typeof v === 'object';
|
||||
//}
|
||||
|
||||
//function create_tree(root, depth, maxDepth, maxWidth) {
|
||||
// if (depth == 0) {
|
||||
// return;
|
||||
// }
|
||||
// var child = {
|
||||
// parent: null
|
||||
// };
|
||||
|
||||
// if (Array.isArray(root)) {
|
||||
// child.children = [];
|
||||
|
||||
// for (var node of root.slice(0, maxWidth)) {
|
||||
// child['children'].push(create_tree(node, depth-1, maxDepth, maxWidth));
|
||||
// }
|
||||
// if (root.length > maxWidth) {
|
||||
// var addNode = {};
|
||||
// addNode.name = '...';
|
||||
// addNode.parent = null;
|
||||
// addNode.additionalNode = true;
|
||||
// child['children'].push(addNode);
|
||||
// }
|
||||
// return child;
|
||||
|
||||
// } else if (isObject(root)) {
|
||||
// child.children = {};
|
||||
|
||||
// for (var k in root.slice(0, maxWidth)) {
|
||||
// var node = root[k];
|
||||
// child['children'] = create_tree(node, depth-1, maxDepth, maxWidth);
|
||||
// }
|
||||
// if (root.length > maxWidth) {
|
||||
// var addNode = {};
|
||||
// addNode.name = '...';
|
||||
// addNode.parent = null;
|
||||
// addNode.additionalNode = true;
|
||||
// child['children'].push(addNode);
|
||||
// }
|
||||
// return child;
|
||||
|
||||
// } else {
|
||||
// child.name = root;
|
||||
// return child;
|
||||
// }
|
||||
|
||||
//}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
|
Loading…
Reference in New Issue