chg: [eventGraph] Improved object coloring strategy

app/Lib/Tools/ColourPaletteTool.php

@@ -66,7 +66,11 @@ class ColourPaletteTool
     // pass the element's id from the list along to get a colour for a single item
     public function generatePaletteFromString($string, $items, $onlySpecific = false)
     {
-        $hue = $this->__stringToNumber($string);
+        if (Validation::uuid($string)) {
+            $hue = $this->__uuidToNumber($string);
+        } else {
+            $hue = $this->__stringToNumber($string);
+        }
         $saturation = 1;
         $steps = 80 / $items;
         $results = array();
@@ -91,4 +95,12 @@ class ColourPaletteTool
         }
         return $number % 100 / 100;
     }
+
+    private function __uuidToNumber($string)
+    {
+        $part = explode('-', $string)[4];
+        $number = hexdec($part);
+        $max = hexdec('ffffffffffff');
+        return round($number / $max, 2);
+    }
 }

app/Lib/Tools/EventGraphTool.php

@@ -28,6 +28,9 @@
                 'distributionLevels' => $this->__eventModel->Attribute->distributionLevels
             );
             $this->__authorized_JSON_key = array('event_id', 'distribution', 'category', 'type', 'value', 'comment', 'uuid', 'to_ids', 'timestamp', 'id');
+
+            App::uses('ColourPaletteTool', 'Tools');
+            $this->__paletteTool = new ColourPaletteTool();
             return true;
         }
 
@@ -270,6 +273,7 @@
                 $this->__extendedEventUUIDMapping[$toPush['event_id']] = '';
             }
 
+            $templatesCount = [];
             foreach ($object as $obj) {
                 $toPush = array(
                     'id' => sprintf('o-%s', $obj['id']),
@@ -290,6 +294,10 @@
                         $this->__json['existing_object_relation'][$attr['object_relation']] = 0; // set-alike
                     }
                 }
+                if (empty($templatesCount[$obj['template_uuid']])) {
+                    $templatesCount[$obj['template_uuid']] = 0;
+                }
+                $templatesCount[$obj['template_uuid']]++;
 
                 array_push($this->__json['items'], $toPush);
                 $this->__extendedEventUUIDMapping[$toPush['event_id']] = '';
@@ -307,6 +315,7 @@
                     array_push($this->__json['relations'], $toPush);
                 }
             }
+            $this->__json['items'] = $this->addObjectColors($this->__json['items'], $templatesCount);
 
             if ($this->__extended_view) {
                 $this->fetchEventUUIDFromId();
@@ -564,4 +573,18 @@
             ]);
             $this->__extendedEventUUIDMapping = $eventUUIDs;
         }
+
+        private function addObjectColors($items, $templatesCount)
+        {
+            $colours = [];
+            foreach ($templatesCount as $templateUUID => $count) {
+                $colours[$templateUUID] = $this->__paletteTool->generatePaletteFromString($templateUUID, $count);
+            }
+            foreach ($items as $i => $item) {
+                if ($item['node_type'] == 'object') {
+                    $items[$i]['color'] = array_shift($colours[$item['template_uuid']]);
+                }
+            }
+            return $items;
+        }
     }

app/webroot/js/event-graph.js

@@ -86,13 +86,13 @@ class EventGraph {
     bind_listener() {
         var that = this;
         this.network.on("selectNode", function (params) {
-            that.network.moveTo({
-                position: {
-                    x: params.pointer.canvas.x,
-                    y: params.pointer.canvas.y
-                },
-                animation: true,
-            });
+            // that.network.moveTo({
+            //     position: {
+            //         x: params.pointer.canvas.x,
+            //         y: params.pointer.canvas.y
+            //     },
+            //     animation: true,
+            // });
         });
 
         this.network.on("dragStart", function (params) {
@@ -717,7 +717,7 @@ class EventGraph {
                     group: group,
                     mass: 5,
                     icon: {
-                        color: stringToRGB(label),
+                        color: node.color,
                         face: '"Font Awesome 5 Free"',
                         code: that.get_FA_icon(node['meta-category']),
                     }