WIP atomic JS map

Former-commit-id: 95736d11295948e5dc20aefcf1293b7882729588
This commit is contained in:
fbsanchez 2019-03-29 20:31:55 +01:00
parent 2a96b610d9
commit 4854d4b2df

View File

@ -34,9 +34,9 @@ enterprise_include_once('include/functions_networkmap.php');
enterprise_include_once('include/functions_discovery.php'); enterprise_include_once('include/functions_discovery.php');
// Avoid node overlapping. // Avoid node overlapping.
define('GRAPHVIZ_RADIUS_CONVERSION_FACTOR', 20); define('GRAPHVIZ_CONVERSION_FACTOR', 30);
define('MAP_X_CORRECTION', 600); define('MAP_X_CORRECTION', 0);
define('MAP_Y_CORRECTION', 150); define('MAP_Y_CORRECTION', 0);
/** /**
@ -319,6 +319,8 @@ class NetworkMap
// Default mapOptions values. // Default mapOptions values.
// Defines the command to generate positions. // Defines the command to generate positions.
$this->mapOptions['generation_method'] = LAYOUT_SPRING1; $this->mapOptions['generation_method'] = LAYOUT_SPRING1;
// Use fixed positions defined (X,Y) per node.
$this->mapOptions['fixed_positions'] = 0;
$this->mapOptions['width'] = $config['networkmap_max_width']; $this->mapOptions['width'] = $config['networkmap_max_width'];
$this->mapOptions['height'] = $config['networkmap_max_width']; $this->mapOptions['height'] = $config['networkmap_max_width'];
$this->mapOptions['simple'] = 0; $this->mapOptions['simple'] = 0;
@ -999,23 +1001,25 @@ class NetworkMap
case NODE_GENERIC: case NODE_GENERIC:
// Handmade ones. // Handmade ones.
// Add also parent relationship. // Add also parent relationship.
$parent_id = $node['id_parent']; if (isset($node['id_parent'])) {
$parent_id = $node['id_parent'];
if ((int) $parent_id > 0) { if ((int) $parent_id >= 0) {
$parent_node = $this->getNodeData( $parent_node = $this->getNodeData(
(int) $parent_id, (int) $parent_id,
'id_node' 'id_node'
); );
} }
// Store relationship. // Store relationship.
if ($parent_node) { if ($parent_node !== null) {
$relations[] = [ $relations[] = [
'id_parent' => $parent_node, 'id_parent' => $parent_node,
'parent_type' => NODE_GENERIC, 'parent_type' => NODE_GENERIC,
'id_child' => $node['id_node'], 'id_child' => $node['id_node'],
'child_type' => NODE_GENERIC, 'child_type' => NODE_GENERIC,
]; ];
}
} }
break; break;
@ -1233,8 +1237,13 @@ class NetworkMap
$url = 'none'; $url = 'none';
$parent = $data['parent']; $parent = $data['parent'];
$font_size = $this->mapOptions['font_size']; $font_size = $this->mapOptions['font_size'];
$radius = $this->mapOptions['map_filter']['node_radius']; if (isset($data['radius'])) {
$radius /= GRAPHVIZ_RADIUS_CONVERSION_FACTOR; $radius = $data['radius'];
} else {
$radius = $this->mapOptions['map_filter']['node_radius'];
}
$radius /= GRAPHVIZ_CONVERSION_FACTOR;
if (strlen($label) > 16) { if (strlen($label) > 16) {
$label = ui_print_truncate_text($label, 16, false, true, false); $label = ui_print_truncate_text($label, 16, false, true, false);
@ -1632,7 +1641,7 @@ class NetworkMap
$node[$k] = $v; $node[$k] = $v;
} }
$node['style']['label'] = $node['name']; $node['style']['label'] = $node['label'];
$node['style']['shape'] = 'circle'; $node['style']['shape'] = 'circle';
$item['color'] = self::getColorByStatus($node['status']); $item['color'] = self::getColorByStatus($node['status']);
break; break;
@ -1660,6 +1669,11 @@ class NetworkMap
$count_item_holding_area++; $count_item_holding_area++;
} }
// Propagate styles.
foreach ($node['style'] as $k => $v) {
$item[$k] = $v;
}
// Node image. // Node image.
$item['image_url'] = ''; $item['image_url'] = '';
$item['image_width'] = 0; $item['image_width'] = 0;
@ -1679,6 +1693,7 @@ class NetworkMap
$item['text'] = io_safe_output($node['style']['label']); $item['text'] = io_safe_output($node['style']['label']);
$item['shape'] = $node['style']['shape']; $item['shape'] = $node['style']['shape'];
$item['map_id'] = $node['id_map']; $item['map_id'] = $node['id_map'];
if (!isset($node['style']['id_networkmap']) if (!isset($node['style']['id_networkmap'])
|| $node['style']['id_networkmap'] == '' || $node['style']['id_networkmap'] == ''
|| $node['style']['id_networkmap'] == 0 || $node['style']['id_networkmap'] == 0
@ -1694,8 +1709,6 @@ class NetworkMap
$item['image'] = $item['image_url']; $item['image'] = $item['image_url'];
$item['image_height'] = 52; $item['image_height'] = 52;
$item['image_width'] = 52; $item['image_width'] = 52;
$item['width'] = $this->mapOptions['map_filter']['node_radius'];
$item['height'] = $this->mapOptions['map_filter']['node_radius'];
} }
$return[] = $item; $return[] = $item;
@ -2148,8 +2161,8 @@ class NetworkMap
if (preg_match('/^graph.*$/', $line) != 0) { if (preg_match('/^graph.*$/', $line) != 0) {
// Graph definition. // Graph definition.
$fields = explode(' ', $line); $fields = explode(' ', $line);
$this->map['width'] = ($fields[2] * 10 * GRAPHVIZ_RADIUS_CONVERSION_FACTOR); $this->map['width'] = ($fields[2] * GRAPHVIZ_CONVERSION_FACTOR);
$this->map['height'] = ($fields[3] * 10 * GRAPHVIZ_RADIUS_CONVERSION_FACTOR); $this->map['height'] = ($fields[3] * GRAPHVIZ_CONVERSION_FACTOR);
if ($this->map['width'] > $config['networkmap_max_width']) { if ($this->map['width'] > $config['networkmap_max_width']) {
$this->map['width'] = $config['networkmap_max_width']; $this->map['width'] = $config['networkmap_max_width'];
@ -2162,8 +2175,8 @@ class NetworkMap
// Node. // Node.
$fields = explode(' ', $line); $fields = explode(' ', $line);
$id = $fields[1]; $id = $fields[1];
$nodes[$id]['x'] = (($fields[2] * $this->mapOptions['map_filter']['node_radius']) - $this->mapOptions['map_filter']['rank_sep'] * GRAPHVIZ_RADIUS_CONVERSION_FACTOR); $nodes[$id]['x'] = ($fields[2] * GRAPHVIZ_CONVERSION_FACTOR);
$nodes[$id]['y'] = (($fields[3] * $this->mapOptions['map_filter']['node_radius']) - $this->mapOptions['map_filter']['rank_sep'] * GRAPHVIZ_RADIUS_CONVERSION_FACTOR); $nodes[$id]['y'] = ($fields[3] * GRAPHVIZ_CONVERSION_FACTOR);
} else if (preg_match('/^edge.*$/', $line) != 0 } else if (preg_match('/^edge.*$/', $line) != 0
&& empty($this->relations) === true && empty($this->relations) === true
) { ) {
@ -2401,7 +2414,14 @@ class NetworkMap
* Calculate X,Y positions. * Calculate X,Y positions.
*/ */
$graph = $this->calculateCoords(); if (!$this->mapOptions['fixed_positions']) {
$graph = $this->calculateCoords();
} else {
// Set by user.
$graph['nodes'] = $this->rawNodes;
$this->map['width'] = $this->mapOptions['width'];
$this->map['height'] = $this->mapOptions['height'];
}
if (is_array($graph) === true) { if (is_array($graph) === true) {
$nodes = $graph['nodes']; $nodes = $graph['nodes'];
@ -2501,6 +2521,10 @@ class NetworkMap
$style['image'] = $node_tmp['image']; $style['image'] = $node_tmp['image'];
$style['width'] = $node_tmp['width']; $style['width'] = $node_tmp['width'];
$style['height'] = $node_tmp['height']; $style['height'] = $node_tmp['height'];
$style['radius'] = max(
$style['width'],
$style['height']
);
$style['label'] = $node_tmp['text']; $style['label'] = $node_tmp['text'];
$node_tmp['style'] = json_encode($style); $node_tmp['style'] = json_encode($style);
@ -2676,6 +2700,7 @@ class NetworkMap
$nodes = []; $nodes = [];
} }
$this->nodes = $nodes;
$nodes_js = $this->nodesToJS($nodes); $nodes_js = $this->nodesToJS($nodes);
$output .= 'networkmap.nodes = ('.json_encode($nodes_js).");\n"; $output .= 'networkmap.nodes = ('.json_encode($nodes_js).");\n";
@ -2685,6 +2710,7 @@ class NetworkMap
$relations = []; $relations = [];
} }
$this->relations = $relations;
$links_js = $this->edgeToJS($relations); $links_js = $this->edgeToJS($relations);
$output .= 'networkmap.links = ('.json_encode($links_js).");\n"; $output .= 'networkmap.links = ('.json_encode($links_js).");\n";
@ -3220,17 +3246,25 @@ class NetworkMap
if (enterprise_installed() if (enterprise_installed()
&& $this->useTooltipster && $this->useTooltipster
) { ) {
$nodes_js = $this->nodesToJS($this->nodes);
$links_js = $this->edgeToJS($this->relations);
$output .= '<script type="text/javascript"> $output .= '<script type="text/javascript">
var nodes = networkmap.nodes;
var arrows = networkmap.links;
var width = networkmap_dimensions[0];
var height = networkmap_dimensions[1];
var font_size = '.$this->mapOptions['font_size'].';
var custom_params = '.json_encode($this->tooltipParams).';
var controller = null;
var homedir = "'.ui_get_full_url(false).'"
$(function() { $(function() {
controller = new SimpleMapController("#simple_map"); controller = new SimpleMapController({
map_width: '.$this->map['width'].',
map_height: '.$this->map['height'].',
id: "'.$this->idMap.'",
target: "#simple_map",
nodes: '.json_encode($nodes_js).',
arrows: '.json_encode($links_js).',
center_x: '.$this->map['center_x'].',
center_y: '.$this->map['center_y'].',
z_dash: '.$this->map['filter']['z_dash'].',
font_size: '.$this->mapOptions['font_size'].',
homedir: "'.ui_get_full_url(false).'",
custom_params: '.json_encode($this->tooltipParams).'
});
controller.init_map(); controller.init_map();
}); });
</script>'; </script>';
@ -3315,9 +3349,17 @@ class NetworkMap
$output .= '<div id="simple_map" data-id="'.$this->idMap.'" '; $output .= '<div id="simple_map" data-id="'.$this->idMap.'" ';
$output .= 'style="border: 1px #ddd solid;'; $output .= 'style="border: 1px #ddd solid;';
$output .= ' width:'.$this->mapOptions['width'];
$output .= ' ;height:'.$this->mapOptions['height'].'">'; if ($this->fullSize) {
$output .= '<svg id="svg'.$this->idMap.'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" pointer-events="all" width="'.$this->mapOptions['width'].'" height="'.$this->mapOptions['height'].'px">'; $output .= ' width:100%';
$output .= ' ;height: 100%">';
$output .= '<svg id="svg'.$this->idMap.'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" pointer-events="all" width="100%" height="100%">';
} else {
$output .= ' width:'.$this->mapOptions['width'].'px';
$output .= ' ;height:'.$this->mapOptions['height'].'px">';
$output .= '<svg id="svg'.$this->idMap.'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" pointer-events="all" width="'.$this->mapOptions['width'].'" height="'.$this->mapOptions['height'].'px">';
}
$output .= '</svg>'; $output .= '</svg>';
$output .= '</div>'; $output .= '</div>';
} else { } else {