fix initial load

src/plugins/comps/CompsManager.js

@@ -9,6 +9,7 @@ export default class CompsManager extends EventEmitter {
   #dataFrame = {};
   #telemetryLoadedPromises = [];
   #loaded = false;
+  #valid = false;
   #telemetryProcessors = {};
 
   constructor(openmct, domainObject) {
@@ -17,6 +18,31 @@ export default class CompsManager extends EventEmitter {
     this.#domainObject = domainObject;
   }
 
+  isValid() {
+    return this.#valid;
+  }
+
+  setValid(valid) {
+    this.#valid = valid;
+  }
+
+  #getNextAlphabeticalParameterName() {
+    const parameters = this.#domainObject.configuration.comps.parameters;
+    const existingNames = new Set(parameters.map((p) => p.name));
+    const alphabet = 'abcdefghijklmnopqrstuvwxyz';
+    let suffix = '';
+    while (true) {
+      for (let letter of alphabet) {
+        const proposedName = letter + suffix;
+        if (!existingNames.has(proposedName)) {
+          return proposedName;
+        }
+      }
+      // Increment suffix after exhausting the alphabet
+      suffix = (parseInt(suffix, 10) || 0) + 1;
+    }
+  }
+
   addParameter(telemetryObject) {
     const keyString = this.#openmct.objects.makeKeyString(telemetryObject.identifier);
     const metaData = this.#openmct.telemetry.getMetadata(telemetryObject);
@@ -25,7 +51,6 @@ export default class CompsManager extends EventEmitter {
     const timeMetaData = metaData.valueMetadatas.find((metaDatum) => {
       return metaDatum.key === specificTimeKey || metaDatum.source === specificTimeKey;
     });
-    const random4Digit = Math.floor(1000 + Math.random() * 9000);
     // in the valuesMetadata, find the first numeric data type
     const rangeItems = metaData.valueMetadatas.filter(
       (metaDatum) => metaDatum.hints && metaDatum.hints.range
@@ -38,12 +63,11 @@ export default class CompsManager extends EventEmitter {
     }
     this.#domainObject.configuration.comps.parameters.push({
       keyString,
-      name: `${telemetryObject.name}_${random4Digit}`,
+      name: `${this.#getNextAlphabeticalParameterName()}`,
       valueToUse,
       testValue: 0,
       timeMetaData
     });
-    this.persist(this.#domainObject);
     this.emit('parametersUpdated', keyString);
   }
 
@@ -80,7 +104,6 @@ export default class CompsManager extends EventEmitter {
     if (!parameterExists) {
       this.#composition.remove(this.#telemetryObjects[keyString]);
     }
-    this.persist(this.#domainObject);
   }
 
   persist(passedDomainObject) {
@@ -101,6 +124,7 @@ export default class CompsManager extends EventEmitter {
       await Promise.all(this.#telemetryLoadedPromises);
       this.#telemetryLoadedPromises = [];
       this.#loaded = true;
+      console.debug('📦 CompsManager: loaded');
     }
   }
 
@@ -138,6 +162,7 @@ export default class CompsManager extends EventEmitter {
       this.#composition.on('remove', this.#removeTelemetryObject);
       await this.#composition.load();
     }
+    console.debug(`📢 CompsManager: composition loaded`);
   }
 
   getFullDataFrame(newTelemetry) {
@@ -225,6 +250,7 @@ export default class CompsManager extends EventEmitter {
   }
 
   #addTelemetryObject = (telemetryObject) => {
+    console.debug(`📢 CompsManager: addTelemetryObject`, telemetryObject);
     const keyString = this.#openmct.objects.makeKeyString(telemetryObject.identifier);
     this.#telemetryObjects[keyString] = telemetryObject;
     this.#telemetryCollections[keyString] =
@@ -244,6 +270,7 @@ export default class CompsManager extends EventEmitter {
     if (!parameterExists) {
       this.addParameter(telemetryObject);
     }
+    console.debug(`📢 CompsManager: done adding telemetry object`, telemetryObject);
   };
 
   static getCompsManager(domainObject, openmct, compsManagerPool) {

src/plugins/comps/CompsTelemetryProvider.js

@@ -58,6 +58,10 @@ export default class CompsTelemetryProvider {
         this.#openmct,
         this.#compsManagerPool
       );
+      if (!specificCompsManager.isValid()) {
+        resolve([]);
+        return;
+      }
       specificCompsManager.load().then(() => {
         const callbackID = this.#getCallbackID();
         const telemetryForComps = specificCompsManager.requestUnderlyingTelemetry();
@@ -76,6 +80,9 @@ export default class CompsTelemetryProvider {
   }
 
   #computeOnNewTelemetry(specificCompsManager, newTelemetry, callbackID) {
+    if (!specificCompsManager.isValid()) {
+      return;
+    }
     const expression = specificCompsManager.getExpression();
     const telemetryForComps = specificCompsManager.getFullDataFrame(newTelemetry);
     const parameters = specificCompsManager.getParameters();

src/plugins/comps/components/CompsView.vue

@@ -26,7 +26,7 @@
       <div class="c-cs__content c-cs__current-output-value">
         <span class="c-cs__current-output-value__label">Current Output</span>
         <span class="c-cs__current-output-value__value" aria-label="Current Output Value">
-          <template v-if="currentCompOutput">
+          <template v-if="testDataApplied">
             {{ currentCompOutput }}
           </template>
           <template v-else> --- </template>
@@ -49,7 +49,14 @@
           <span class="c-toggle-switch__label">Apply Test Values</span>
         </label>
       </div>
-      <div class="c-cs__content">
+      <div
+        :class="{ 'is-active-dragging': isDragging }"
+        class="c-cs__content"
+        @drop="drop($event)"
+        @dragover.prevent
+        @dragstart="dragStart($event)"
+        @dragleave="dragLeave($event)"
+      >
         <div
           class="hint"
           :class="{ 's-status-icon-warning-lo': !domainObject.configuration.comps.parameters }"
@@ -64,7 +71,7 @@
             <ObjectPath
               :domain-object="compsManager.getTelemetryObjectForParameter(parameter.keyString)"
             />
-            {{ compsManager.getTelemetryObjectForParameter(parameter.keyString).name }}
+            {{ compsManager.getTelemetryObjectForParameter(parameter.keyString)?.name }}
             <!-- drop down to select value from telemetry -->
             <select v-model="parameter.valueToUse" @change="persistParameters">
               <option
@@ -102,6 +109,7 @@
             @change="persistExpression"
           ></textarea>
         </div>
+        <div v-show="expressionOutput" class="c-expression-output">{{ expressionOutput }}</div>
       </div>
     </section>
   </div>
@@ -122,6 +130,8 @@ const currentCompOutput = ref(null);
 const testDataApplied = ref(false);
 const parameters = ref(null);
 const expression = ref(null);
+const expressionOutput = ref(null);
+const isDragging = ref(false);
 
 let outputTelemetryCollection;
 
@@ -135,7 +145,6 @@ watch(
     parameters.value = newParameters;
   }
 );
-
 onBeforeMount(async () => {
   console.debug('🚀 CompsView: onMounted with compsManager', compsManager);
   outputTelemetryCollection = openmct.telemetry.requestCollection(domainObject);
@@ -154,6 +163,19 @@ onBeforeUnmount(() => {
   outputTelemetryCollection.destroy();
 });
 
+function drop(event) {
+  isDragging.value = false;
+  console.debug('🚀 CompsView: drop', event);
+}
+
+function dragStart(event) {
+  isDragging.value = true;
+}
+
+function dragLeave(event) {
+  isDragging.value = false;
+}
+
 function reloadParameters() {
   parameters.value = compsManager.getParameters();
 }
@@ -175,6 +197,9 @@ function toggleTestData() {
 function persistExpression() {
   domainObject.configuration.comps.expression = expression.value;
   compsManager.persist(domainObject);
+  if (testDataApplied.value) {
+    applyTestData();
+  }
 }
 
 function persistAndApplyTestData() {