[Imagery] Update to be compatible with VIPER (#3744)

* heading, sun heading, and camera pan  are all absolute directions
* removing roll and pitch keys as they will not be necessary
* proofing against empty historical or realtime ids from config
* adding checks in imagerylayout for missing properties

Co-authored-by: Jamie Vigliotta <jamie.j.vigliotta@nasa.gov>

src/plugins/imagery/components/Compass/Compass.vue

@@ -27,7 +27,6 @@
 >
     <CompassHUD
         v-if="hasCameraFieldOfView"
-        :heading="heading"
         :sun-heading="sunHeading"
         :camera-angle-of-view="cameraAngleOfView"
         :camera-pan="cameraPan"
@@ -79,26 +78,20 @@ export default {
     },
     computed: {
         hasCameraFieldOfView() {
-            return this.heading !== undefined && this.cameraPan !== undefined;
+            return this.cameraPan !== undefined && this.cameraAngleOfView > 0;
         },
-        // compass direction from north in degrees
+        // horizontal rotation from north in degrees
         heading() {
             return this.image.heading;
         },
-        pitch() {
-            return this.image.pitch;
-        },
-        // compass direction from north in degrees
+        // horizontal rotation from north in degrees
         sunHeading() {
             return this.image.sunOrientation;
         },
-        // relative direction from heading in degrees
+        // horizontal rotation from north in degrees
         cameraPan() {
             return this.image.cameraPan;
         },
-        cameraTilt() {
-            return this.image.cameraTilt;
-        },
         cameraAngleOfView() {
             return CAMERA_ANGLE_OF_VIEW;
         },

src/plugins/imagery/components/Compass/CompassHUD.vue

@@ -94,10 +94,6 @@ const COMPASS_POINTS = [
 
 export default {
     props: {
-        heading: {
-            type: Number,
-            required: true
-        },
         sunHeading: {
             type: Number,
             default: undefined
@@ -136,8 +132,8 @@ export default {
         },
         visibleRange() {
             return [
-                rotate(this.heading, this.cameraPan, -this.cameraAngleOfView / 2),
-                rotate(this.heading, this.cameraPan, this.cameraAngleOfView / 2)
+                rotate(this.cameraPan, -this.cameraAngleOfView / 2),
+                rotate(this.cameraPan, this.cameraAngleOfView / 2)
             ];
         }
     }

src/plugins/imagery/components/Compass/CompassRose.vue

@@ -27,7 +27,7 @@
 >
     <div
         class="c-nsew"
-        :style="rotateFrameStyle"
+        :style="compassRoseStyle"
     >
         <svg
             class="c-nsew__minor-ticks"
@@ -118,21 +118,21 @@
     </div>
 
     <div
+        v-if="hasHeading"
         class="c-spacecraft-body"
         :style="headingStyle"
     >
     </div>
 
     <div
-        v-if="showSunHeading"
+        v-if="hasSunHeading"
         class="c-sun"
         :style="sunHeadingStyle"
     ></div>
 
     <div
-        v-if="showCameraFOV"
         class="c-cam-field"
-        :style="cameraHeadingStyle"
+        :style="cameraPanStyle"
     >
         <div class="cam-field-half cam-field-half-l">
             <div
@@ -177,16 +177,10 @@ export default {
         }
     },
     computed: {
-        cameraHeading() {
-            return rotate(this.heading, this.cameraPan);
-        },
-        compassHeading() {
-            return this.lockCompass ? this.cameraHeading : 0;
-        },
         north() {
-            return rotate(this.compassHeading, -this.cameraHeading);
+            return this.lockCompass ? rotate(-this.cameraPan) : 0;
         },
-        rotateFrameStyle() {
+        compassRoseStyle() {
             return { transform: `rotate(${ this.north }deg)` };
         },
         northTextTransform() {
@@ -216,6 +210,9 @@ export default {
                 west: `translate(50,87) ${ rotation }`
             };
         },
+        hasHeading() {
+            return this.heading !== undefined;
+        },
         headingStyle() {
             const rotation = rotate(this.north, this.heading);
 
@@ -223,14 +220,7 @@ export default {
                 transform: `translateX(-50%) rotate(${ rotation }deg)`
             };
         },
-        cameraHeadingStyle() {
-            const rotation = rotate(this.north, this.cameraHeading);
-
-            return {
-                transform: `rotate(${ rotation }deg)`
-            };
-        },
-        showSunHeading() {
+        hasSunHeading() {
             return this.sunHeading !== undefined;
         },
         sunHeadingStyle() {
@@ -240,18 +230,22 @@ export default {
                 transform: `rotate(${ rotation }deg)`
             };
         },
-        showCameraFOV() {
-            return this.cameraPan !== undefined && this.cameraAngleOfView > 0;
+        cameraPanStyle() {
+            const rotation = rotate(this.north, this.cameraPan);
+
+            return {
+                transform: `rotate(${ rotation }deg)`
+            };
         },
         // left half of camera field of view
-        // rotated counter-clockwise from camera field of view heading
+        // rotated counter-clockwise from camera pan angle
         cameraFOVStyleLeftHalf() {
             return {
                 transform: `translateX(50%) rotate(${ -this.cameraAngleOfView / 2 }deg)`
             };
         },
         // right half of camera field of view
-        // rotated clockwise from camera field of view heading
+        // rotated clockwise from camera pan angle
         cameraFOVStyleRightHalf() {
             return {
                 transform: `translateX(-50%) rotate(${ this.cameraAngleOfView / 2 }deg)`

src/plugins/imagery/components/Compass/utils.js

@@ -1,23 +1,28 @@
-export function rotate(direction, ...rotations) {
+/**
+ *
+ * sums an arbitrary number of absolute rotations
+ * (meaning rotations relative to one common direction 0)
+ * normalizes the rotation to the range [0, 360)
+ *
+ * @param  {...number} rotations in degrees
+ * @returns {number} normalized sum of all rotations - [0, 360) degrees
+ */
+export function rotate(...rotations) {
     const rotation = rotations.reduce((a, b) => a + b, 0);
 
-    return normalizeCompassDirection(direction + rotation);
-}
-
-export function normalizeCompassDirection(degrees) {
-    const base = degrees % 360;
-
-    return base >= 0 ? base : 360 + base;
+    return normalizeCompassDirection(rotation);
 }
 
 export function inRange(degrees, [min, max]) {
+    const point = rotate(degrees);
+
     return min > max
-        ? (degrees >= min && degrees < 360) || (degrees <= max && degrees >= 0)
-        : degrees >= min && degrees <= max;
+        ? (point >= min && point < 360) || (point <= max && point >= 0)
+        : point >= min && point <= max;
 }
 
 export function percentOfRange(degrees, [min, max]) {
-    let distance = degrees;
+    let distance = rotate(degrees);
     let minRange = min;
     let maxRange = max;
 
@@ -31,3 +36,9 @@ export function percentOfRange(degrees, [min, max]) {
 
     return (distance - minRange) / (maxRange - minRange);
 }
+
+function normalizeCompassDirection(degrees) {
+    const base = degrees % 360;
+
+    return base >= 0 ? base : 360 + base;
+}

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -348,7 +348,7 @@ export default {
 
         // related telemetry keys
         this.spacecraftPositionKeys = ['positionX', 'positionY', 'positionZ'];
-        this.spacecraftOrientationKeys = ['heading', 'roll', 'pitch'];
+        this.spacecraftOrientationKeys = ['heading'];
         this.cameraKeys = ['cameraPan', 'cameraTilt'];
         this.sunKeys = ['sunOrientation'];
 
@@ -468,7 +468,12 @@ export default {
 
             // set data ON image telemetry as well as in focusedImageRelatedTelemetry
             for (let key of this.relatedTelemetry.keys) {
-                if (this.relatedTelemetry[key] && this.relatedTelemetry[key].historical) {
+                if (
+                    this.relatedTelemetry[key]
+                    && this.relatedTelemetry[key].historical
+                    && this.relatedTelemetry[key].requestLatestFor
+
+                ) {
                     let valuesOnTelemetry = this.relatedTelemetry[key].hasTelemetryOnDatum;
                     let value = await this.getMostRecentRelatedTelemetry(key, this.focusedImage);
 

src/plugins/imagery/components/RelatedTelemetry/RelatedTelemetry.js

@@ -73,7 +73,7 @@ export default class RelatedTelemetry {
                         await this._initializeHistorical(key);
                     }
 
-                    if (this[key].realtime && this[key].realtime.telemetryObjectId) {
+                    if (this[key].realtime && this[key].realtime.telemetryObjectId && this[key].realtime.telemetryObjectId !== '') {
                         await this._intializeRealtime(key);
                     }
                 }
@@ -82,7 +82,9 @@ export default class RelatedTelemetry {
     }
 
     async _initializeHistorical(key) {
-        if (this[key].historical.telemetryObjectId) {
+        if (!this[key].historical.telemetryObjectId) {
+            this[key].historical.hasTelemetryOnDatum = true;
+        } else if (this[key].historical.telemetryObjectId !== '') {
             this[key].historicalDomainObject = await this._openmct.objects.get(this[key].historical.telemetryObjectId);
 
             this[key].requestLatestFor = async (datum) => {
@@ -96,8 +98,6 @@ export default class RelatedTelemetry {
 
                 return results[results.length - 1];
             };
-        } else {
-            this[key].historical.hasTelemetryOnDatum = true;
         }
     }