feat(text): preserve group color in nodes and links

commitlint.config.js

@@ -13,8 +13,8 @@ module.exports = {
         'nodes',
         'links',
         'graph',
-	'groups',
-	'canvas',
+        'groups',
+        'canvas',
       ],
     ]
   },

src/scenes/graph/components/groups/components/color-box.component.js

@@ -10,7 +10,6 @@ const styles = (theme) => ({
 });
 
 function ColorBox({ color = '#ccc', classes }) {
-  console.log(color);
   return <div className={classes.root} style={{ backgroundColor: color }} />;
 }
 

src/services/graph-grammar.js

@@ -245,9 +245,9 @@ const mapEntities = (entities) => {
         [node.id]: {
           ...existingNode,
           ...node,
-          groups: [...existingGroups, ...node.groups].filter(
-            (item, index, groups) => groups.findIndex((candidate) => candidate.name === item.name) === index
-          ),
+          groups: [...existingGroups, ...node.groups]
+            .filter((item, index, groups) => groups.findIndex((candidate) => candidate.name === item.name) === index)
+            .map(({ name }) => groups.find(({ name: existingGroupName }) => existingGroupName === name)),
         },
       };
     }, {});
@@ -276,9 +276,9 @@ const mapEntities = (entities) => {
         [sourceAndTargetId]: {
           ...existingLink,
           ...link,
-          groups: [...existingGroups, ...link.groups].filter(
-            (item, index, groups) => groups.findIndex((candidate) => candidate.name === item.name) === index
-          ),
+          groups: [...existingGroups, ...link.groups]
+            .filter((item, index, groups) => groups.findIndex((candidate) => candidate.name === item.name) === index)
+            .map(({ name }) => groups.find(({ name: existingGroupName }) => existingGroupName === name)),
         },
       };
     }, {});

src/services/graph-grammar.spec.js

@@ -621,5 +621,40 @@ describe('graph-grammar', () => {
         groups: expect.anything(),
       });
     });
+
+    it('preserves first color defined for a group', () => {
+      const result = graphGrammar.eval(graphGrammar.match(':foo #red;:foo #yellow'));
+      expect(result).toEqual({
+        nodes: expect.anything(),
+        links: expect.anything(),
+        groups: [
+          {
+            id: expect.anything(),
+            name: 'foo',
+            color: red['A700'],
+          },
+        ],
+      });
+    });
+
+    it('includes colors of groups in nodes', () => {
+      const result = graphGrammar.eval(graphGrammar.match(':foo #red;(bar:foo)'));
+      expect(result).toEqual({
+        nodes: [
+          {
+            id: 'bar',
+            groups: [
+              {
+                id: expect.anything(),
+                name: 'foo',
+                color: red['A700'],
+              },
+            ],
+          },
+        ],
+        links: expect.anything(),
+        groups: expect.anything(),
+      });
+    });
   });
 });