diff --git a/src/plugins/comps/CompsManager.js b/src/plugins/comps/CompsManager.js index acb9ff3ee8..dde296b72d 100644 --- a/src/plugins/comps/CompsManager.js +++ b/src/plugins/comps/CompsManager.js @@ -31,6 +31,7 @@ export default class CompsManager extends EventEmitter { const existingNames = new Set(parameters.map((p) => p.name)); const alphabet = 'abcdefghijklmnopqrstuvwxyz'; let suffix = ''; + // eslint-disable-next-line no-constant-condition while (true) { for (let letter of alphabet) { const proposedName = letter + suffix; diff --git a/src/plugins/comps/components/CompsView.vue b/src/plugins/comps/components/CompsView.vue index 57d81a5807..cfd6f0cd53 100644 --- a/src/plugins/comps/components/CompsView.vue +++ b/src/plugins/comps/components/CompsView.vue @@ -87,7 +87,7 @@ <input v-model="parameter.testValue" class="telemery-reference-variable-input" - @change="persistAndApplyTestData" + @change="persistParameters" /> </div> <template v-if="!domainObject.configuration.comps.parameters" @@ -109,7 +109,8 @@ @change="persistExpression" ></textarea> </div> - <div v-show="expressionOutput" class="c-expression-output">{{ expressionOutput }}</div> + <div v-if="expressionOutput" class="c-expression-output-bad">{{ expressionOutput }}</div> + <div v-else class="c-expression-output-good">Valid Expression</div> </div> </section> </div> @@ -155,6 +156,7 @@ onBeforeMount(async () => { expression.value = compsManager.getExpression(); compsManager.on('parametersUpdated', reloadParameters); outputTelemetryCollection.load(); + applyTestData(); }); onBeforeUnmount(() => { @@ -183,6 +185,7 @@ function reloadParameters() { function persistParameters() { domainObject.configuration.comps.parameters = parameters.value; compsManager.persist(domainObject); + applyTestData(); } function toggleTestData() { @@ -197,13 +200,6 @@ function toggleTestData() { function persistExpression() { domainObject.configuration.comps.expression = expression.value; compsManager.persist(domainObject); - if (testDataApplied.value) { - applyTestData(); - } -} - -function persistAndApplyTestData() { - persistParameters(); applyTestData(); } @@ -212,8 +208,16 @@ function applyTestData() { acc[parameter.name] = parameter.testValue; return acc; }, {}); - const testOutput = evaluate(expression.value, scope); - currentCompOutput.value = testOutput; + try { + const testOutput = evaluate(expression.value, scope); + currentCompOutput.value = testOutput; + expressionOutput.value = null; + } catch (error) { + console.error('👎 Error applying test data', error); + currentCompOutput.value = null; + compsManager.setValid(false); + expressionOutput.value = error.message; + } } function telemetryProcessor(data) { diff --git a/src/plugins/comps/components/comps.scss b/src/plugins/comps/components/comps.scss index 3eeb875894..8feb5aaf72 100644 --- a/src/plugins/comps/components/comps.scss +++ b/src/plugins/comps/components/comps.scss @@ -39,3 +39,15 @@ background-color: $colorBodyBg; color: white; } + +.c-expression-output-good { + width: 100%; + margin-right: 10px; + color: green; +} + +.c-expression-output-bad { + width: 100%; + margin-right: 10px; + color: red; +}