From 146b1d7f9f70b4213b86fcbdba82d68e969a5d37 Mon Sep 17 00:00:00 2001 From: rouxxi Date: Mon, 25 Nov 2024 11:16:07 +0100 Subject: [PATCH] refactor(admin): refactor + clean console.log --- admin/app/utils/create-tree-data.js | 55 ++++++++++--------- admin/package-lock.json | 15 +++++ admin/package.json | 2 + .../tests/unit/utils/create-tree-data_test.js | 44 ++++++++++++--- package.json | 4 +- 5 files changed, 85 insertions(+), 35 deletions(-) diff --git a/admin/app/utils/create-tree-data.js b/admin/app/utils/create-tree-data.js index 5be883c44a9..3f6531e0aea 100644 --- 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 index 340472e2829..5da2f6a9e6b 100644 --- a/admin/package-lock.json +++ b/admin/package-lock.json @@ -75,11 +75,13 @@ "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", "p-queue": "^8.0.0", + "pako": "^2.1.0", "prettier": "^3.3.2", "prettier-plugin-ember-template-tag": "^2.0.2", "query-string": "^9.0.0", @@ -36980,6 +36982,12 @@ "@sideway/pinpoint": "^2.0.0" } }, + "node_modules/js-base64": { + "version": "3.7.7", + "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.7.tgz", + "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==", + "dev": true + }, "node_modules/js-string-escape": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz", @@ -39485,6 +39493,13 @@ "dev": true, "license": "BlueOak-1.0.0" }, + "node_modules/pako": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", + "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==", + "dev": true, + "license": "(MIT AND Zlib)" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", diff --git a/admin/package.json b/admin/package.json index 95067487a7c..17206adabdd 100644 --- 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 index 2bdb7c3e93b..766d2431cc9 100644 --- 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 index b03efb0849d..9e1997aca94 100644 --- 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"