[LAD Tables] Use RAF for updating template

src/plugins/LADTable/components/LADRow.vue

@@ -48,6 +48,7 @@ const CONTEXT_MENU_ACTIONS = [
     'viewHistoricalData',
     'remove'
 ];
+const BLANK_VALUE = '---';
 
 export default {
     inject: ['openmct', 'currentView'],
@@ -67,15 +68,43 @@ export default {
     },
     data() {
         return {
+            datum: undefined,
             timestamp: undefined,
-            value: '---',
-            valueClass: '',
+            timestampKey: undefined,
             unit: ''
         };
     },
     computed: {
+        value() {
+            if (!this.datum) {
+                return BLANK_VALUE;
+            }
+
+            return this.formats[this.valueKey].format(this.datum);
+        },
+        valueClass() {
+            if (!this.datum) {
+                return '';
+            }
+
+            const limit = this.limitEvaluator.evaluate(this.datum, this.valueMetadata);
+
+            return limit ? limit.cssClass : '';
+
+        },
         formattedTimestamp() {
-            return this.timestamp !== undefined ? this.getFormattedTimestamp(this.timestamp) : '---';
+            if (!this.timestamp) {
+                return BLANK_VALUE;
+            }
+
+            return this.timeSystemFormat.format(this.timestamp);
+        },
+        timeSystemFormat() {
+            if (!this.formats[this.timestampKey]) {
+                console.warn(`No formatter for ${this.timestampKey} time system for ${this.domainObject.name}.`);
+            }
+
+            return this.formats[this.timestampKey];
         },
         objectPath() {
             return [this.domainObject, ...this.pathToTable];
@@ -104,7 +133,7 @@ export default {
 
         this.unsubscribe = this.openmct
             .telemetry
-            .subscribe(this.domainObject, this.updateValues);
+            .subscribe(this.domainObject, this.setLatestValues);
 
         this.requestHistory();
 
@@ -118,29 +147,29 @@ export default {
         this.openmct.time.off('bounds', this.updateBounds);
     },
     methods: {
-        updateValues(datum) {
-            let newTimestamp = this.getParsedTimestamp(datum);
-            let limit;
-
-            if (this.shouldUpdate(newTimestamp)) {
-                this.datum = datum;
-                this.timestamp = newTimestamp;
-                this.value = this.formats[this.valueKey].format(datum);
-                limit = this.limitEvaluator.evaluate(datum, this.valueMetadata);
-                if (limit) {
-                    this.valueClass = limit.cssClass;
-                } else {
-                    this.valueClass = '';
-                }
+        updateView() {
+            if (!this.updatingView) {
+                this.updatingView = true;
+                requestAnimationFrame(() => {
+                    let newTimestamp = this.getParsedTimestamp(this.latestDatum);
+
+                    if (this.shouldUpdate(newTimestamp)) {
+                        this.timestamp = newTimestamp;
+                        this.datum = this.latestDatum;
+                    }
+
+                    this.updatingView = false;
+                });
             }
         },
-        shouldUpdate(newTimestamp) {
-            let newTimestampInBounds = this.inBounds(newTimestamp);
-            let noExistingTimestamp = this.timestamp === undefined;
-            let newTimestampIsLatest = newTimestamp > this.timestamp;
+        setLatestValues(datum) {
+            this.latestDatum = datum;
 
-            return newTimestampInBounds
-                && (noExistingTimestamp || newTimestampIsLatest);
+            this.updateView();
+        },
+        shouldUpdate(newTimestamp) {
+            return this.inBounds(newTimestamp)
+                && (this.timestamp === undefined || newTimestamp > this.timestamp);
         },
         requestHistory() {
             this.openmct
@@ -151,7 +180,7 @@ export default {
                     size: 1,
                     strategy: 'latest'
                 })
-                .then((array) => this.updateValues(array[array.length - 1]))
+                .then((array) => this.setLatestValues(array[array.length - 1]))
                 .catch((error) => {
                     console.warn('Error fetching data', error);
                 });
@@ -189,27 +218,12 @@ export default {
             }
         },
         resetValues() {
-            this.value = '---';
             this.timestamp = undefined;
-            this.valueClass = '';
+            this.datum = undefined;
         },
         getParsedTimestamp(timestamp) {
-            if (this.timeSystemFormat()) {
-                return this.formats[this.timestampKey].parse(timestamp);
-            }
-        },
-        getFormattedTimestamp(timestamp) {
-            if (this.timeSystemFormat()) {
-                return this.formats[this.timestampKey].format(timestamp);
-            }
-        },
-        timeSystemFormat() {
-            if (this.formats[this.timestampKey]) {
-                return true;
-            } else {
-                console.warn(`No formatter for ${this.timestampKey} time system for ${this.domainObject.name}.`);
-
-                return false;
+            if (this.timeSystemFormat) {
+                return this.timeSystemFormat.parse(timestamp);
             }
         },
         setUnit() {

src/plugins/LADTable/pluginSpec.js

@@ -26,6 +26,7 @@ import {
     getMockObjects,
     getMockTelemetry,
     getLatestTelemetry,
+    spyOnBuiltins,
     resetApplicationState
 } from 'utils/testing';
 
@@ -160,6 +161,11 @@ describe("The LAD Table", () => {
                 anotherTelemetryObjectResolve = resolve;
             });
 
+            spyOnBuiltins(['requestAnimationFrame']);
+            window.requestAnimationFrame.and.callFake((callBack) => {
+                callBack();
+            });
+
             openmct.telemetry.request.and.callFake(() => {
                 telemetryRequestResolve(mockTelemetry);