style(admin): sort junior mermaid tree

admin/app/utils/create-tree-data.js

@@ -6,6 +6,21 @@ const COLORS = {
   SKIPPED: '#ffe5c0',
   STARTED: '#f4f5f7',
 };
+
+const NODE_ORDER = [
+  'STARTED',
+  'SKIPPED',
+  'FAILED',
+  '1-TUTORIAL',
+  '1-TRAINING',
+  '1-VALIDATION',
+  '2-TUTORIAL',
+  '2-TRAINING',
+  '2-VALIDATION',
+  'SUCCEEDED',
+  '-CHALLENGE',
+];
+
 import { fromUint8Array } from 'js-base64';
 import { deflate } from 'pako';
 
@@ -53,13 +68,29 @@ function createRelationsFromPath(path) {
   return relations;
 }
 
+function sortTree(tree) {
+  return {
+    relations: tree.relations.sort((relation1, relation2) => {
+      return lastWordValue(relation2.to) - lastWordValue(relation1.to);
+    }),
+    nodes: tree.nodes.sort((node1, node2) => {
+      return lastWordValue(node2.id) - lastWordValue(node1.id);
+    }),
+  };
+}
+
+function lastWordValue(path) {
+  return NODE_ORDER.findIndex((nodeLabel) => nodeLabel === lastWord(path));
+}
+
+function lastWord(path) {
+  return path.split(' ').slice(-1)[0];
+}
+
 function minifyTree(tree) {
   const nodesMinifiedNamesByPath = new Map(Array.from(tree.nodes, (node, i) => [node.id, i]));
   const nodeLabelsById = new Map(
-    Array.from(nodesMinifiedNamesByPath.entries()).map(([path, minifiedName]) => [
-      minifiedName,
-      path.split(' ').slice(-1)[0],
-    ]),
+    Array.from(nodesMinifiedNamesByPath.entries()).map(([path, minifiedName]) => [minifiedName, lastWord(path)]),
   );
   return {
     nodeLabelsById,
@@ -107,7 +138,7 @@ function createMermaidFlowchart(tree) {
 }
 
 function createMermaidFlowchartLink(data) {
-  const flowChart = createMermaidFlowchart(minifyTree(createTreeFromData(data)));
+  const flowChart = createMermaidFlowchart(minifyTree(sortTree(createTreeFromData(data))));
   const defaultState = {
     code: flowChart,
     mermaid: formatJSON({
@@ -122,4 +153,11 @@ function createMermaidFlowchartLink(data) {
   return `https://mermaid.live/edit#pako:${serialized}`;
 }
 
-export { createMermaidFlowchart, createMermaidFlowchartLink, createRelationsFromPath, createTreeFromData, minifyTree };
+export {
+  createMermaidFlowchart,
+  createMermaidFlowchartLink,
+  createRelationsFromPath,
+  createTreeFromData,
+  minifyTree,
+  sortTree,
+};

admin/tests/unit/utils/create-tree-data_test.js

@@ -4,6 +4,7 @@ import {
   createRelationsFromPath,
   createTreeFromData,
   minifyTree,
+  sortTree,
 } from 'pix-admin/utils/create-tree-data.js';
 import { module, test } from 'qunit';
 
@@ -68,6 +69,38 @@ module('Unit | Utils | create tree data', function () {
     });
   });
 
+  module('#sortTree', function () {
+    test('should sort tree relations in order to have successes first', async function (assert) {
+      const tree = {
+        relations: [
+          { from: '1-VALIDATION', to: '1-VALIDATION > 1-TRAINING' },
+          { from: '1-VALIDATION > 1-TRAINING', to: '1-VALIDATION > 1-TRAINING > 1-TUTORIAL' },
+          { from: '1-VALIDATION', to: '1-VALIDATION > 2-VALIDATION' },
+          { from: '1-VALIDATION > 1-TRAINING', to: '1-VALIDATION > 1-TRAINING > 1-VALIDATION' },
+        ],
+        nodes: [
+          { id: '1-VALIDATION > 1-TRAINING' },
+          { id: '1-VALIDATION > 1-TRAINING > STARTED' },
+          { id: '1-VALIDATION' },
+          { id: '1-VALIDATION > 2-VALIDATION' },
+        ],
+      };
+
+      const sortedTree = sortTree(tree);
+      assert.deepEqual(sortedTree.relations, [
+        { from: '1-VALIDATION', to: '1-VALIDATION > 2-VALIDATION' },
+        { from: '1-VALIDATION > 1-TRAINING', to: '1-VALIDATION > 1-TRAINING > 1-VALIDATION' },
+        { from: '1-VALIDATION', to: '1-VALIDATION > 1-TRAINING' },
+        { from: '1-VALIDATION > 1-TRAINING', to: '1-VALIDATION > 1-TRAINING > 1-TUTORIAL' },
+      ]);
+      assert.deepEqual(sortedTree.nodes, [
+        { id: '1-VALIDATION > 2-VALIDATION' },
+        { id: '1-VALIDATION' },
+        { id: '1-VALIDATION > 1-TRAINING' },
+        { id: '1-VALIDATION > 1-TRAINING > STARTED' },
+      ]);
+    });
+  });
   module('#minifyTree', function () {
     test('should create tree with short node ids and meaningfull labels', async function (assert) {
       const tree = {