correctly persist

src/plugins/comps/CompsManager.js

@@ -18,10 +18,30 @@ export default class CompsManager extends EventEmitter {
     this.#domainObject = domainObject;
   }
 
-  async load() {
+  addParameter(keyString) {
-    await this.#loadComposition();
+    const random4Digit = Math.floor(1000 + Math.random() * 9000);
-    await Promise.all(this.#telemetryLoadedPromises);
+    this.#domainObject.configuration.comps.parameters.push({
-    this.#telemetryLoadedPromises = [];
+      keyString,
+      name: `New_Parameter_${random4Digit}`,
+      valueToUse: 'sin',
+      testValue: 0
+    });
+    this.persist();
+  }
+
+  deleteParameter(keyString) {
+    this.#domainObject.configuration.comps.parameters =
+      this.#domainObject.configuration.comps.parameters.filter(
+        (parameter) => parameter.keyString !== keyString
+      );
+    // if there are no parameters referencing this parameter keyString, remove the telemetry object too
+    const parameterExists = this.#domainObject.configuration.comps.parameters.some(
+      (parameter) => parameter.keyString === keyString
+    );
+    if (!parameterExists) {
+      this.#composition.remove(this.#telemetryObjects[keyString]);
+    }
+    this.persist();
   }
 
   persist() {
@@ -32,6 +52,12 @@ export default class CompsManager extends EventEmitter {
     );
   }
 
+  async load() {
+    await this.#loadComposition();
+    await Promise.all(this.#telemetryLoadedPromises);
+    this.#telemetryLoadedPromises = [];
+  }
+
   getTelemetryObjects() {
     return this.#telemetryObjects;
   }
@@ -167,6 +193,15 @@ export default class CompsManager extends EventEmitter {
     const telemetryLoadedPromise = this.#telemetryCollections[keyString].load();
     this.#telemetryLoadedPromises.push(telemetryLoadedPromise);
     console.debug('📢 CompsManager: loaded telemetry collection', keyString);
+
+    // check to see if we have a corresponding parameter
+    // if not, add one
+    const parameterExists = this.#domainObject.configuration.comps.parameters.some(
+      (parameter) => parameter.keyString === keyString
+    );
+    if (!parameterExists) {
+      this.addParameter(keyString);
+    }
   };
 
   static getCompsManager(domainObject, openmct, compsManagerPool) {

src/plugins/comps/CompsMathWorker.js

@@ -1,5 +1,6 @@
 import { evaluate } from 'mathjs';
 
+// eslint-disable-next-line no-undef
 onconnect = function (e) {
   const port = e.ports[0];
   console.debug('🧮 Comps Math Worker connected');
@@ -52,6 +53,9 @@ function calculate(dataFrame, expression) {
   // Iterate over the first dataset and check for matching utc in the other dataset
   const firstDataSet = Object.values(dataFrame)[0];
   const secondDataSet = Object.values(dataFrame)[1];
+  if (!firstDataSet || !secondDataSet) {
+    return sumResults;
+  }
 
   for (const [utc, item1] of firstDataSet.entries()) {
     if (secondDataSet.has(utc)) {

src/plugins/comps/components/CompsView.vue

@@ -40,7 +40,7 @@
       <div
         :class="[
           'c-cs__test-data__controls c-cdef__controls',
-          { disabled: !telemetryObjectLength }
+          { disabled: !domainObject.configuration.comps.parameters }
         ]"
       >
         <label class="c-toggle-switch">
@@ -51,11 +51,18 @@
       </div>
       <div class="c-cs__content">
         <div
-          v-show="isEditing"
           class="hint"
-          :class="{ 's-status-icon-warning-lo': !telemetryObjectLength }"
+          :class="{ 's-status-icon-warning-lo': !domainObject.configuration.comps.parameters }"
         >
-          <template v-if="!telemetryObjectLength"
+          <div
+            v-for="parameter in domainObject.configuration.comps.parameters"
+            :key="parameter.key"
+          >
+            <div class="c-cs__telemetry-reference">
+              <span class="c-cs__telemetry-reference__label">{{ parameter.name }}</span>
+            </div>
+          </div>
+          <template v-if="!domainObject.configuration.comps.parameters"
             >Drag telemetry into Telemetry References to add variables for an expression</template
           >
         </div>
@@ -66,10 +73,10 @@
         <div class="c-cs__header-label c-section__label">Expression</div>
       </div>
       <div class="c-cs__content">
-        <div v-if="!isEditing">{{ domainObject.configuration.expression }}</div>
+        <div v-if="!isEditing">{{ domainObject.configuration.comps.expression }}</div>
         <div v-else>
           <textarea
-            v-model="domainObject.configuration.expression"
+            v-model="domainObject.configuration.comps.expression"
             class="c-cs__expression__input"
             placeholder="Enter an expression"
             @change="compsManager.persist"
@@ -90,7 +97,6 @@ const domainObject = inject('domainObject');
 const compsManagerPool = inject('compsManagerPool');
 const compsManager = CompsManager.getCompsManager(domainObject, openmct, compsManagerPool);
 const currentCompOutput = ref(null);
-const telemetryObjectLength = ref(0);
 const testDataApplied = ref(false);
 
 let outputTelemetryCollection;
@@ -108,7 +114,6 @@ onMounted(async () => {
   outputTelemetryCollection.on('clear', clearData);
   await outputTelemetryCollection.load();
   await compsManager.load();
-  telemetryObjectLength.value = Object.keys(compsManager.getTelemetryObjects()).length;
 });
 
 function applyTestData() {}