refactor(admin): refactor + clean console.log

1024pix · Nov 25, 2024 · 146b1d7 · 146b1d7
1 parent 1c8be32
commit 146b1d7
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 35 deletions.
diff --git a/admin/app/utils/create-tree-data.js b/admin/app/utils/create-tree-data.js
@@ -32,7 +32,6 @@ const serialize = (state) => {
 };
 
 function createTreeFromData(data) {
-  console.log(data);
   const relations = data.flatMap((pathWithNumber) =>
     createRelationsFromPath(pathWithNumber.fullPath).map((path) => {
       return { ...path, number: pathWithNumber.nombre };
@@ -41,9 +40,7 @@ function createTreeFromData(data) {
   const uniqueRelations = [];
 
   relations.forEach((relation) => {
-    const uniqueRelation = uniqueRelations.filter(
-      (uniqueRelations) => relation.from === relation.from && uniqueRelations.to === relation.to,
-    )?.[0];
+    const uniqueRelation = uniqueRelations.filter((uniqueRelation) => uniqueRelation.to === relation.to)?.[0];
     if (uniqueRelation) {
       uniqueRelation.number = new String(Number(uniqueRelation.number) + Number(relation.number));
     } else {
@@ -104,6 +101,26 @@ function minifyTree(tree) {
   };
 }
 
+function applyBoxStyle([id, label]) {
+  const nodeColor = COLORS[label];
+  if (nodeColor) {
+    return `style ${id} fill:${nodeColor}`;
+  }
+  const stepNumber = label.charAt(0);
+  if (stepNumber === '0') {
+    return `style ${id} stroke:#ff3f94,stroke-width:4px`;
+  } else if (stepNumber === '1') {
+    return `style ${id} stroke:#3d68ff,stroke-width:4px`;
+  } else if (stepNumber === '-') {
+    return `style ${id} stroke:#ac008d,stroke-width:4px`;
+  }
+  return `style ${id} stroke:#52d987,stroke-width:4px`;
+}
+
+function applyMermaidStyle(tree) {
+  return Array.from(tree.nodeLabelsById.entries(), applyBoxStyle).join('\n');
+}
+
 function createMermaidFlowchart(tree) {
   return (
     'flowchart LR\n' +
@@ -114,33 +131,20 @@ function createMermaidFlowchart(tree) {
         const finalNode = RESULT_STATUSES.includes(toLabel) ? `(${toLabel})` : `[${toLabel}]`;
         return `${relation.from}[${fromLabel}] -->|${relation.number}| ${relation.to}${finalNode}`;
       })
-      .join('\n') +
-    '\n' +
-    Array.from(tree.nodeLabelsById.entries())
-      .map(([id, label]) => {
-        const nodeColor = COLORS[label];
-        if (nodeColor) {
-          return `style ${id} fill:${nodeColor}`;
-        }
-        const stepNumber = label.charAt(0);
-        if (stepNumber === '0') {
-          return `style ${id} stroke:#ff3f94,stroke-width:4px`;
-        } else if (stepNumber === '1') {
-          return `style ${id} stroke:#3d68ff,stroke-width:4px`;
-        } else if (stepNumber === '-') {
-          // Challenge
-          return `style ${id} stroke:#ac008d,stroke-width:4px`;
-        }
-        return `style ${id} stroke:#52d987,stroke-width:4px`;
-      })
       .join('\n')
   );
 }
 
 function createMermaidFlowchartLink(data) {
-  const flowChart = createMermaidFlowchart(minifyTree(sortTree(createTreeFromData(data))));
+  const rawTree = createTreeFromData(data);
+  const sortedTree = sortTree(rawTree);
+  const minifiedTree = minifyTree(sortedTree);
+
+  const flowChart = createMermaidFlowchart(minifiedTree);
+  const flowChartStyle = applyMermaidStyle(minifiedTree);
+
   const defaultState = {
-    code: flowChart,
+    code: flowChart + '\n' + flowChartStyle,
     mermaid: formatJSON({
       theme: 'default',
     }),
@@ -154,6 +158,7 @@ function createMermaidFlowchartLink(data) {
 }
 
 export {
+  applyMermaidStyle,
   createMermaidFlowchart,
   createMermaidFlowchartLink,
   createRelationsFromPath,

diff --git a/admin/package-lock.json b/admin/package-lock.json
diff --git a/admin/package.json b/admin/package.json
@@ -107,10 +107,12 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-qunit": "^8.0.0",
     "joi": "^17.12.2",
+    "js-base64": "^3.7.7",
     "jwt-decode": "^4.0.0",
     "loader.js": "^4.7.0",
     "lodash": "^4.17.21",
     "npm-run-all2": "^6.0.0",
+    "pako": "^2.1.0",
     "p-queue": "^8.0.0",
     "prettier": "^3.3.2",
     "prettier-plugin-ember-template-tag": "^2.0.2",

diff --git a/admin/tests/unit/utils/create-tree-data_test.js b/admin/tests/unit/utils/create-tree-data_test.js
@@ -1,5 +1,6 @@
 import { setupTest } from 'ember-qunit';
 import {
+  applyMermaidStyle,
   createMermaidFlowchart,
   createRelationsFromPath,
   createTreeFromData,
@@ -153,11 +154,7 @@ module('Unit | Utils | create tree data', function () {
         `flowchart LR
 0[1-VALIDATION] -->|5| 1[1-TRAINING]
 1[1-TRAINING] -->|5| 2[1-VALIDATION]
-0[1-VALIDATION] -->|10| 3[2-VALIDATION]
-style 0 stroke:#3d68ff,stroke-width:4px
-style 1 stroke:#3d68ff,stroke-width:4px
-style 2 stroke:#3d68ff,stroke-width:4px
-style 3 stroke:#52d987,stroke-width:4px`,
+0[1-VALIDATION] -->|10| 3[2-VALIDATION]`,
       );
     });
     test('should shape final states with rounded rectangles', async function (assert) {
@@ -177,8 +174,41 @@ style 3 stroke:#52d987,stroke-width:4px`,
         mermaidFlowchart,
         `flowchart LR
 0[1-VALIDATION] -->|5| 1[1-TRAINING]
-1[1-TRAINING] -->|5| 2(FAILED)
-style 0 stroke:#3d68ff,stroke-width:4px
+1[1-TRAINING] -->|5| 2(FAILED)`,
+      );
+    });
+  });
+  module('#applyMermaidStyle', function () {
+    test('should create mermaid Flowchart from tree', async function (assert) {
+      const tree = {
+        nodeLabelsById: new Map([
+          [0, '1-VALIDATION'],
+          [1, '1-TRAINING'],
+          [2, '1-VALIDATION'],
+          [3, '2-VALIDATION'],
+        ]),
+      };
+      const mermaidFlowchart = applyMermaidStyle(tree);
+      assert.strictEqual(
+        mermaidFlowchart,
+        `style 0 stroke:#3d68ff,stroke-width:4px
+style 1 stroke:#3d68ff,stroke-width:4px
+style 2 stroke:#3d68ff,stroke-width:4px
+style 3 stroke:#52d987,stroke-width:4px`,
+      );
+    });
+    test('should shape final states with rounded rectangles', async function (assert) {
+      const tree = {
+        nodeLabelsById: new Map([
+          [0, '1-VALIDATION'],
+          [1, '1-TRAINING'],
+          [2, 'FAILED'],
+        ]),
+      };
+      const mermaidFlowchart = applyMermaidStyle(tree);
+      assert.strictEqual(
+        mermaidFlowchart,
+        `style 0 stroke:#3d68ff,stroke-width:4px
 style 1 stroke:#3d68ff,stroke-width:4px
 style 2 fill:#f1c4c4`,
       );

diff --git a/package.json b/package.json
@@ -101,9 +101,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-mocha": "^10.0.0",
     "husky": "^9.0.0",
-    "js-base64": "^3.7.7",
-    "lint-staged": "^15.0.0",
-    "pako": "^2.1.0"
+    "lint-staged": "^15.0.0"
   },
   "peerDependencies": {
     "markdown-link-check": "^3.8.6"