add icons and fix errant telemetry

src/api/telemetry/TelemetryCollection.js

@@ -485,9 +485,9 @@ export default class TelemetryCollection extends EventEmitter {
     this.boundedTelemetry = [];
     this.futureBuffer = [];
 
-    this.emit('clear');
+    const telemetryLoadPromise = this._requestHistoricalTelemetry();
 
-    this._requestHistoricalTelemetry();
+    this.emit('clear', telemetryLoadPromise);
   }
 
   /**

src/plugins/comps/CompsManager.js

@@ -9,12 +9,14 @@ export default class CompsManager extends EventEmitter {
   #dataFrame = {};
   #telemetryLoadedPromises = [];
   #loaded = false;
+  #compositionLoaded = false;
   #telemetryProcessors = {};
 
   constructor(openmct, domainObject) {
     super();
     this.#openmct = openmct;
     this.#domainObject = domainObject;
+    this.clearData = this.clearData.bind(this);
   }
 
   isValid() {
@@ -110,13 +112,16 @@ export default class CompsManager extends EventEmitter {
     this.#domainObject = passedDomainObject;
   }
 
-  isLoaded() {
+  isReady() {
-    return this.#loaded;
+    return this.isValid() && this.#loaded;
   }
 
   async load() {
-    if (!this.#loaded) {
+    if (!this.#compositionLoaded) {
       await this.#loadComposition();
+      this.#compositionLoaded = true;
+    }
+    if (!this.#loaded) {
       await Promise.all(this.#telemetryLoadedPromises);
       this.#telemetryLoadedPromises = [];
       this.#loaded = true;
@@ -130,7 +135,7 @@ export default class CompsManager extends EventEmitter {
       if (!this.#telemetryCollections[keyString].loaded) {
         const specificTelemetryProcessor = this.#getTelemetryProcessor(keyString);
         this.#telemetryCollections[keyString].on('add', specificTelemetryProcessor);
-        this.#telemetryCollections[keyString].on('clear', this.#clearData);
+        this.#telemetryCollections[keyString].on('clear', this.clearData);
         this.#telemetryCollections[keyString].load();
       }
     });
@@ -142,7 +147,7 @@ export default class CompsManager extends EventEmitter {
       const specificTelemetryProcessor = this.#telemetryProcessors[keyString];
       delete this.#telemetryProcessors[keyString];
       this.#telemetryCollections[keyString].off('add', specificTelemetryProcessor);
-      this.#telemetryCollections[keyString].off('clear', this.#clearData);
+      this.#telemetryCollections[keyString].off('clear', this.clearData);
       this.#telemetryCollections[keyString].destroy();
     });
   }
@@ -236,8 +241,10 @@ export default class CompsManager extends EventEmitter {
     this.emit('underlyingTelemetryUpdated', { [keyString]: newTelemetry });
   };
 
-  #clearData() {
+  clearData(telemetryLoadedPromise) {
-    console.debug('Clear Data');
+    console.debug('💨 Clear Data fired, need to wait for all telemetry collections to load');
+    this.#loaded = false;
+    this.#telemetryLoadedPromises.push(telemetryLoadedPromise);
   }
 
   getOutputFormat() {
@@ -256,7 +263,7 @@ export default class CompsManager extends EventEmitter {
       this.#openmct.telemetry.requestCollection(telemetryObject);
 
     this.#telemetryCollections[keyString].on('add', this.#getTelemetryProcessor(keyString));
-    this.#telemetryCollections[keyString].on('clear', this.#clearData);
+    this.#telemetryCollections[keyString].on('clear', this.clearData);
     const telemetryLoadedPromise = this.#telemetryCollections[keyString].load();
     this.#telemetryLoadedPromises.push(telemetryLoadedPromise);
     console.debug('📢 CompsManager: loaded telemetry collection', keyString);

src/plugins/comps/CompsTelemetryProvider.js

@@ -77,17 +77,17 @@ export default class CompsTelemetryProvider {
           callbackID
         };
         this.#sharedWorker.port.postMessage(payload);
+        console.debug('🧮 Comps Telemetry Provider: sending request request (bleh)', payload);
       });
     });
   }
 
   #computeOnNewTelemetry(specificCompsManager, newTelemetry, callbackID) {
-    if (!specificCompsManager.isValid() || !specificCompsManager.isLoaded()) {
+    if (!specificCompsManager.isReady()) {
       return;
     }
     const expression = specificCompsManager.getExpression();
     const telemetryForComps = specificCompsManager.getFullDataFrame(newTelemetry);
-    // TODO: this is nasty. instead figure out why a proxy is getting in here
     const parameters = JSON.parse(JSON.stringify(specificCompsManager.getParameters()));
     const payload = {
       type: 'calculateSubscription',
@@ -96,7 +96,7 @@ export default class CompsTelemetryProvider {
       parameters,
       callbackID
     };
-    console.debug('🧮 Comps Telemetry Provider: sending calculation request', payload);
+    console.debug('🧮 Comps Telemetry Provider: sending subscription request', payload);
     this.#sharedWorker.port.postMessage(payload);
   }
 

src/plugins/comps/components/CompsView.vue

@@ -62,7 +62,17 @@
             <ObjectPath
               :domain-object="compsManager.getTelemetryObjectForParameter(parameter.keyString)"
             />
-            {{ compsManager.getTelemetryObjectForParameter(parameter.keyString)?.name }}
+            <div class="parametery-telemetry">
+              <div
+                class="parameter-telemetry-icon"
+                :class="
+                  getIconForType(compsManager.getTelemetryObjectForParameter(parameter.keyString))
+                "
+              />
+              <div class="parametery-telemetry-name">
+                {{ compsManager.getTelemetryObjectForParameter(parameter.keyString)?.name }}
+              </div>
+            </div>
             <!-- drop down to select value from telemetry -->
             <select v-if="isEditing" v-model="parameter.valueToUse" @change="updateParameters">
               <option
@@ -176,6 +186,10 @@ function updateParameters() {
   applyTestData();
 }
 
+function getIconForType(telemetryObject) {
+  return openmct.types.get(telemetryObject.type).definition.cssClass;
+}
+
 function toggleTestData() {
   testDataApplied.value = !testDataApplied.value;
   if (testDataApplied.value) {

src/plugins/comps/components/comps.scss

@@ -30,6 +30,11 @@
   padding-top: 10px;
 }
 
+.parametery-telemetry {
+  display: flex;
+  flex-direction: row;
+}
+
 .expression-input {
   width: 100%;
   margin-right: 10px;