Identify Tasks and Services based on their spelling (#20)

- Use that a Task always starts in lower case, a Service does not
- Adjust test to cover this behaviour

client/src/code_visualization/element_creation.ts

@@ -68,17 +68,23 @@ const buildTreeStructure = (
   // assign the colors
   for (const container of containers) {
     const containerLabel = container.label.toLowerCase();
-    if (containerLabel.includes('task')) {
-      container.fillColor = taskColor;
-    } else if (containerLabel.includes('condition')) {
+    if (containerLabel.includes('condition')) {
       container.fillColor = conditionColor;
     } else if (containerLabel.includes('parallel')) {
       container.fillColor = parallelColor;
     } else if (containerLabel.includes('loop')) {
       container.fillColor = loopColor;
     } else {
-      // service is the only remaining boxtype
-      container.fillColor = serviceColor;
+      // Tasks and Services may not include a keyword, differentiate by the first letter
+      const labelStart = container.label[0];
+      const labelStartLowercase = containerLabel[0];
+      if (labelStart == labelStartLowercase) {
+        // lower case -> Task
+        container.fillColor = taskColor;
+      } else {
+        // upper case -> Service
+        container.fillColor = serviceColor;
+      }
     }
   }
   return containers;

client/src/test/dot_files/simple_task_test.dot

@@ -130,7 +130,7 @@ call_tree:{
     "children": [
         {
             "id": "28f29fd8-cb15-4ebc-9fc0-994c54c3ed80",
-            "name": "paintingTask",
+            "name": "painting",
             "children": [
                 {
                     "id": "67681725-92ef-438d-90df-8a68a75c09e8",

client/src/test/graph_element_creation.test.ts

@@ -111,7 +111,7 @@ function checkDotfileSplitting(dotfileString, treeStructure) {
 
   const paintingTask = treeStructure.children[0];
   expect(paintingTask.children).toBeArrayOfSize(1);
-  expect(paintingTask.name).toBe('paintingTask');
+  expect(paintingTask.name).toBe('painting');
 
   const painting = paintingTask.children[0];
   expect(painting.children).toBeArrayOfSize(0);
@@ -129,22 +129,25 @@ function checkContainerCreation(dotfileString, treeStructure) {
   expect(productionTask).toBeDefined();
   expect(productionTask.level).toBe(0);
   expect(productionTask.parentId).toBeNull();
+  expect(productionTask.fillColor).toBe('#000'); // predefined Task color
   const productionTaskId = productionTask.id;
 
   const paintingTask = containers.find(
-    (container) => container.label == 'paintingTask'
+    (container) => container.label == 'painting'
   );
   expect(paintingTask).toBeDefined();
   expect(paintingTask.level).toBe(1);
   expect(paintingTask.parentId).toBe(productionTaskId);
+  expect(paintingTask.fillColor).toBe('#000'); // predefined Task color
   const paintingTaskId = paintingTask.id;
 
-  const painting = containers.find(
+  const paintingService = containers.find(
     (container) => container.label == 'Painting'
   );
-  expect(painting).toBeDefined();
-  expect(painting.level).toBe(2);
-  expect(painting.parentId).toBe(paintingTaskId);
+  expect(paintingService).toBeDefined();
+  expect(paintingService.level).toBe(2);
+  expect(paintingService.fillColor).toBe('#111'); // predefined Service color
+  expect(paintingService.parentId).toBe(paintingTaskId);
 }
 
 function checkElementCreation(dotfileString) {