Traffic Light: address review — bounds clearing, request/limits guards, limits subscription, raw-value limit checks

- Clear the displayed datum on non-tick bounds changes so an empty window
  shows gray/no data instead of an out-of-window alarm
- Guard async request and limits results by request id + telemetry identity
  so a removed child cannot overwrite its replacement
- Subscribe to runtime limit changes via telemetry.subscribeToLimits
- Compare limits against the parsed raw value, not the formatted text
- Bind to the first non-string range value, matching hasNumericTelemetry
- Treat evaluator results with no cssClass/name as nominal
- Drop redundant TrafficLight install in spec (already default-installed)

Co-Authored-By: Samantha Taylor <samantha.taylor@cognition.ai>

Author: devin-ai-integration[bot]

src/plugins/trafficLight/components/TrafficLightComponent.vue

@@ -50,6 +50,10 @@ const STATUS_LABELS = {
   [STATUS.GRAY]: 'No data'
 };
 
+function isNumericText(value) {
+  return value !== '' && value != null && !Number.isNaN(Number(value));
+}
+
 export default {
   mixins: [stalenessMixin],
   inject: ['openmct', 'domainObject', 'composition', 'renderWhenVisible'],
@@ -165,8 +169,10 @@ export default {
         return;
       }
 
+      const rangeValues = this.metadata.valuesForHints(['range']);
+
       this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
-      this.valueMetadata = this.metadata.valuesForHints(['range'])[0];
+      this.valueMetadata = rangeValues.find((value) => value.format !== 'string') ?? rangeValues[0];
       this.valueKey = this.valueMetadata?.key;
       this.valueSource = this.valueMetadata?.source ?? this.valueKey;
       this.units = this.valueMetadata?.unit ?? '';
@@ -175,21 +181,36 @@ export default {
       this.openmct.telemetry
         .getLimits(domainObject)
         .limits()
-        .then(this.updateLimitDefinition)
+        .then((limitDefinition) => {
+          this.updateLimitDefinition(domainObject, limitDefinition);
+        })
         .catch(() => {
-          this.limitDefinition = undefined;
+          this.updateLimitDefinition(domainObject, undefined);
         });
+      this.unsubscribeLimits = this.openmct.telemetry.subscribeToLimits(
+        domainObject,
+        (limitDefinition) => {
+          this.updateLimitDefinition(domainObject, limitDefinition);
+        }
+      );
 
       this.request();
       this.subscribe();
       this.subscribeToStaleness(domainObject);
     },
     removeTelemetryObject() {
+      this.requestId = (this.requestId ?? 0) + 1;
+
       if (this.unsubscribe) {
         this.unsubscribe();
         this.unsubscribe = undefined;
       }
 
+      if (this.unsubscribeLimits) {
+        this.unsubscribeLimits();
+        this.unsubscribeLimits = undefined;
+      }
+
       if (this.telemetryObject) {
         this.triggerUnsubscribeFromStaleness(this.telemetryObject);
       }
@@ -200,38 +221,51 @@ export default {
       this.valueMetadata = undefined;
       this.limitEvaluator = undefined;
       this.limitDefinition = undefined;
-      this.limitEvaluation = undefined;
       this.valueKey = undefined;
       this.valueSource = undefined;
       this.units = '';
+      this.clearValue();
+    },
+    clearValue() {
       this.datum = undefined;
       this.curVal = DEFAULT_CURRENT_VALUE;
       this.rawValue = undefined;
+      this.limitEvaluation = undefined;
       this.hasData = false;
     },
     refreshData(bounds, isTick) {
-      if (!isTick && this.telemetryObject) {
-        this.request();
+      if (isTick || !this.telemetryObject) {
+        return;
       }
+
+      this.clearValue();
+      this.request();
     },
     request() {
+      const requestedObject = this.telemetryObject;
+      const requestId = (this.requestId ?? 0) + 1;
       const options = {
         strategy: 'latest',
         size: 1,
         timeContext: this.openmct.time.getContextForView([])
       };
 
-      this.openmct.telemetry.request(this.telemetryObject, options).then((values) => {
-        if (values && values.length) {
+      this.requestId = requestId;
+      this.openmct.telemetry.request(requestedObject, options).then((values) => {
+        const isCurrent = requestId === this.requestId && requestedObject === this.telemetryObject;
+
+        if (isCurrent && values && values.length) {
           this.updateValue(values[values.length - 1]);
         }
       });
     },
     subscribe() {
       this.unsubscribe = this.openmct.telemetry.subscribe(this.telemetryObject, this.updateValue);
     },
-    updateLimitDefinition(limitDefinition) {
-      this.limitDefinition = limitDefinition;
+    updateLimitDefinition(domainObject, limitDefinition) {
+      if (domainObject === this.telemetryObject) {
+        this.limitDefinition = limitDefinition;
+      }
     },
     updateConfiguration(configuration) {
       if (!configuration) {
@@ -266,16 +300,23 @@ export default {
       this.isRendering = true;
       this.renderWhenVisible(() => {
         this.isRendering = false;
-        this.render(this.datum);
+
+        if (this.datum) {
+          this.render(this.datum);
+        }
       });
     },
     render(datum) {
       const formatter = this.formats?.[this.valueKey] ?? this.formats?.[this.valueSource];
-      const formatted = formatter ? formatter.format(datum) : datum[this.valueSource];
-      const numeric = formatted === '' || formatted == null ? NaN : Number(formatted);
-
-      this.rawValue = Number.isNaN(numeric) ? undefined : numeric;
-      this.curVal = Number.isNaN(numeric) ? String(formatted) : this.formatNumber(numeric);
+      const raw = formatter ? formatter.parse(datum) : datum[this.valueSource];
+      const formatted = formatter ? formatter.format(datum) : raw;
+      const numeric = typeof raw === 'number' && Number.isFinite(raw) ? raw : undefined;
+
+      this.rawValue = numeric;
+      this.curVal =
+        numeric !== undefined && isNumericText(formatted)
+          ? this.formatNumber(numeric)
+          : String(formatted ?? DEFAULT_CURRENT_VALUE);
       this.limitEvaluation = this.limitEvaluator?.evaluate(datum, this.valueMetadata);
       this.hasData = true;
     },

src/plugins/trafficLight/pluginSpec.js

@@ -103,7 +103,6 @@ describe('Traffic Light plugin', () => {
     openmct.on('start', done);
 
     openmct.install(openmct.plugins.example.Generator());
-    openmct.install(openmct.plugins.TrafficLight());
 
     openmct.startHeadless();
   });
@@ -211,6 +210,12 @@ describe('Traffic Light plugin', () => {
       );
     });
 
+    it('treats evaluator results without a class or name as nominal', () => {
+      expect(statusFromLimitEvaluation({})).toBeUndefined();
+      expect(statusFromLimitEvaluation({ cssClass: '', name: '' })).toBeUndefined();
+      expect(statusFromLimitEvaluation({ cssClass: 'is-limit--yellow' })).toEqual(STATUS.YELLOW);
+    });
+
     it('is gray without data or when stale, and green without limits', () => {
       expect(resolveStatus({ hasData: false, isStale: false })).toEqual(STATUS.GRAY);
       expect(resolveStatus({ hasData: true, isStale: true, value: 0.95 })).toEqual(STATUS.GRAY);
@@ -221,13 +226,17 @@ describe('Traffic Light plugin', () => {
   describe('Traffic Light view', () => {
     let trafficLightView;
     let subscriptionCallback;
+    let limitsCallback;
     let unsubscribeSpy;
+    let unsubscribeLimitsSpy;
     let requestedValue;
 
     beforeEach(() => {
       requestedValue = 0.1;
       subscriptionCallback = undefined;
+      limitsCallback = undefined;
       unsubscribeSpy = jasmine.createSpy('unsubscribe');
+      unsubscribeLimitsSpy = jasmine.createSpy('unsubscribeLimits');
 
       const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
         'get',
@@ -252,13 +261,18 @@ describe('Traffic Light plugin', () => {
       openmct.objects.addProvider('test-namespace', testObjectProvider);
 
       spyOn(openmct.telemetry, 'request').and.callFake(() =>
-        Promise.resolve([sineDatum(requestedValue)])
+        Promise.resolve(requestedValue === undefined ? [] : [sineDatum(requestedValue)])
       );
       spyOn(openmct.telemetry, 'subscribe').and.callFake((domainObject, callback) => {
         subscriptionCallback = callback;
 
         return unsubscribeSpy;
       });
+      spyOn(openmct.telemetry, 'subscribeToLimits').and.callFake((domainObject, callback) => {
+        limitsCallback = callback;
+
+        return unsubscribeLimitsSpy;
+      });
       spyOn(openmct.telemetry, 'subscribeToStaleness').and.returnValue(() => {});
       spyOn(openmct.telemetry, 'isStale').and.returnValue(Promise.resolve({ isStale: false }));
       spyOn(openmct.time, 'getBounds').and.returnValue(TIME_BOUNDS);
@@ -308,6 +322,12 @@ describe('Traffic Light plugin', () => {
       return nextTick();
     }
 
+    function changeBounds() {
+      openmct.time.emit('boundsChanged', TIME_BOUNDS, false);
+
+      return new Promise((resolve) => setTimeout(resolve, 20)).then(nextTick);
+    }
+
     it('renders the light and the latest formatted value', () => {
       expect(holder.querySelectorAll('.js-traffic-light').length).toBe(1);
       expect(lightElement()).not.toBeNull();
@@ -349,10 +369,40 @@ describe('Traffic Light plugin', () => {
       expect(holder.querySelector('.js-traffic-light-value').textContent).toContain('-0.20');
     });
 
+    it('clears the light when new bounds contain no data', async () => {
+      await emit(0.95);
+      expect(lightElement().classList).toContain('is-red');
+
+      requestedValue = undefined;
+      await changeBounds();
+
+      expect(lightElement().classList).toContain('is-gray');
+      expect(holder.querySelector('.js-traffic-light-value').textContent).toContain('--');
+    });
+
+    it('re-requests the latest in-bounds value when bounds change', async () => {
+      requestedValue = 0.6;
+      await changeBounds();
+
+      expect(lightElement().classList).toContain('is-yellow');
+      expect(holder.querySelector('.js-traffic-light-value').textContent).toContain('0.60');
+    });
+
+    it('applies limit definitions pushed by the limits subscription', async () => {
+      expect(openmct.telemetry.subscribeToLimits).toHaveBeenCalled();
+      expect(lightElement().classList).toContain('is-green');
+
+      limitsCallback({ CRITICAL: { high: { sin: 0.05 } } });
+      await nextTick();
+
+      expect(lightElement().classList).toContain('is-red');
+    });
+
     it('cleans up subscriptions on destroy', () => {
       trafficLightView.destroy();
 
       expect(unsubscribeSpy).toHaveBeenCalled();
+      expect(unsubscribeLimitsSpy).toHaveBeenCalled();
 
       trafficLightView = { destroy() {} };
     });

src/plugins/trafficLight/traffic-light-status.js

@@ -44,13 +44,14 @@ function containsToken(text, tokens) {
 
 /**
  * Map the result of a LimitEvaluator's evaluate() call to a traffic light status.
- * Any limit violation whose severity cannot be recognized is treated as a warning.
+ * A result without a cssClass or name is treated as nominal; any other limit
+ * violation whose severity cannot be recognized is treated as a warning.
  * @param {{cssClass?: string, name?: string} | undefined} limit
  * @returns {string | undefined} STATUS.RED, STATUS.YELLOW, or undefined when the
  *   evaluation carried no limit violation
  */
 export function statusFromLimitEvaluation(limit) {
-  if (!limit) {
+  if (!limit || (!limit.cssClass && !limit.name)) {
     return undefined;
   }