add mmgis dependency

bubble activity logic to parent
add missing copyrights
2021-07-19 11:32:24 -07:00 · 2021-07-13 17:06:11 -07:00 · 2021-07-13 16:33:26 -07:00 · 2021-07-13 16:32:22 -07:00 · 2021-07-09 18:03:11 -07:00 · 2021-07-09 15:13:54 -07:00
22 changed files with 766 additions and 514 deletions
--- a/example/imagery/plugin.js
+++ b/example/imagery/plugin.js
@@ -49,6 +49,10 @@ define([
        ];
        const IMAGE_DELAY = 20000;

+        function getCompassValues(min, max) {
+            return min + Math.random() * (max - min);
+        }
+
        function pointForTimestamp(timestamp, name) {
            const url = IMAGE_SAMPLES[Math.floor(timestamp / IMAGE_DELAY) % IMAGE_SAMPLES.length];
            const urlItems = url.split('/');
@@ -59,6 +63,9 @@ define([
                utc: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
                local: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
                url,
+                sunOrientation: getCompassValues(0, 360),
+                cameraPan: getCompassValues(0, 360),
+                heading: getCompassValues(0, 360),
                imageDownloadName
            };
        }
--- a/package.json
+++ b/package.json
@@ -1,8 +1,10 @@
 {
  "name": "openmct",
-  "version": "1.7.4-SNAPSHOT",
+  "version": "1.7.4",
  "description": "The Open MCT core platform",
-  "dependencies": {},
+  "dependencies": {
+    "openmct-mmgis": "git+https://trunk.arc.nasa.gov/bitbucket/scm/vipergds/openmct-mmgis.git#api-mmgis-inspector"
+  },
  "devDependencies": {
    "angular": ">=1.8.0",
    "angular-route": "1.4.14",
@@ -34,7 +36,7 @@
    "git-rev-sync": "^1.4.0",
    "glob": ">= 3.0.0",
    "html-loader": "^0.5.5",
-    "html2canvas": "^1.0.0-alpha.12",
+    "html2canvas": "^1.0.0-rc.7",
    "imports-loader": "^0.8.0",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jasmine-core": "^3.1.0",
--- a/src/api/objects/ObjectAPI.js
+++ b/src/api/objects/ObjectAPI.js
@@ -399,25 +399,25 @@ ObjectAPI.prototype._toMutable = function (object) {
        mutableObject = object;
    } else {
        mutableObject = MutableDomainObject.createMutable(object, this.eventEmitter);
-    }

-    // Check if provider supports realtime updates
-    let identifier = utils.parseKeyString(mutableObject.identifier);
-    let provider = this.getProvider(identifier);
+        // Check if provider supports realtime updates
+        let identifier = utils.parseKeyString(mutableObject.identifier);
+        let provider = this.getProvider(identifier);

-    if (provider !== undefined
-        && provider.observe !== undefined
-        && this.SYNCHRONIZED_OBJECT_TYPES.includes(object.type)) {
-        let unobserve = provider.observe(identifier, (updatedModel) => {
-            if (updatedModel.persisted > mutableObject.modified) {
-                //Don't replace with a stale model. This can happen on slow connections when multiple mutations happen
-                //in rapid succession and intermediate persistence states are returned by the observe function.
-                mutableObject.$refresh(updatedModel);
-            }
-        });
-        mutableObject.$on('$_destroy', () => {
-            unobserve();
-        });
+        if (provider !== undefined
+            && provider.observe !== undefined
+            && this.SYNCHRONIZED_OBJECT_TYPES.includes(object.type)) {
+            let unobserve = provider.observe(identifier, (updatedModel) => {
+                if (updatedModel.persisted > mutableObject.modified) {
+                    //Don't replace with a stale model. This can happen on slow connections when multiple mutations happen
+                    //in rapid succession and intermediate persistence states are returned by the observe function.
+                    mutableObject.$refresh(updatedModel);
+                }
+            });
+            mutableObject.$on('$_destroy', () => {
+                unobserve();
+            });
+        }
    }

    return mutableObject;
--- a/src/plugins/duplicate/DuplicateAction.js
+++ b/src/plugins/duplicate/DuplicateAction.js
@@ -37,7 +37,15 @@ export default class DuplicateAction {
        let duplicationTask = new DuplicateTask(this.openmct);
        let originalObject = objectPath[0];
        let parent = objectPath[1];
-        let userInput = await this.getUserInput(originalObject, parent);
+        let userInput;
+
+        try {
+            userInput = await this.getUserInput(originalObject, parent);
+        } catch (error) {
+            // user most likely canceled
+            return;
+        }
+
        let newParent = userInput.location;
        let inNavigationPath = this.inNavigationPath(originalObject);

--- a/src/plugins/imagery/components/Compass/Compass.vue
+++ b/src/plugins/imagery/components/Compass/Compass.vue
@@ -23,7 +23,7 @@
 <template>
 <div
    class="c-compass"
-    :style="`width: ${ sizedImageDimensions.width }px; height: ${ sizedImageDimensions.height }px`"
+    :style="`width: 100%; height: 100%`"
 >
    <CompassHUD
        v-if="hasCameraFieldOfView"
@@ -33,13 +33,12 @@
    />
    <CompassRose
        v-if="hasCameraFieldOfView"
-        :heading="heading"
-        :sized-image-width="sizedImageDimensions.width"
-        :sun-heading="sunHeading"
        :camera-angle-of-view="cameraAngleOfView"
        :camera-pan="cameraPan"
-        :lock-compass="lockCompass"
-        @toggle-lock-compass="toggleLockCompass"
+        :compass-rose-sizing-classes="compassRoseSizingClasses"
+        :heading="heading"
+        :sized-image-dimensions="sizedImageDimensions"
+        :sun-heading="sunHeading"
    />
 </div>
 </template>
@@ -56,42 +55,20 @@ export default {
        CompassRose
    },
    props: {
-        containerWidth: {
-            type: Number,
-            required: true
-        },
-        containerHeight: {
-            type: Number,
-            required: true
-        },
-        naturalAspectRatio: {
-            type: Number,
+        compassRoseSizingClasses: {
+            type: String,
            required: true
        },
        image: {
            type: Object,
            required: true
        },
-        lockCompass: {
-            type: Boolean,
+        sizedImageDimensions: {
+            type: Object,
            required: true
        }
    },
    computed: {
-        sizedImageDimensions() {
-            let sizedImageDimensions = {};
-            if ((this.containerWidth / this.containerHeight) > this.naturalAspectRatio) {
-                // container is wider than image
-                sizedImageDimensions.width = this.containerHeight * this.naturalAspectRatio;
-                sizedImageDimensions.height = this.containerHeight;
-            } else {
-                // container is taller than image
-                sizedImageDimensions.width = this.containerWidth;
-                sizedImageDimensions.height = this.containerWidth * this.naturalAspectRatio;
-            }
-
-            return sizedImageDimensions;
-        },
        hasCameraFieldOfView() {
            return this.cameraPan !== undefined && this.cameraAngleOfView > 0;
        },
--- a/src/plugins/imagery/components/Compass/CompassRose.vue
+++ b/src/plugins/imagery/components/Compass/CompassRose.vue
@@ -21,152 +21,203 @@
 *****************************************************************************/

 <template>
-<div
-    class="w-direction-rose"
-    :class="compassRoseSizingClasses"
+<div ref="compassRoseWrapper"
+     class="w-direction-rose"
+     :class="compassRoseSizingClasses"
+     @click="toggleLockCompass"
 >
-    <div
-        class="c-direction-rose"
-        @click="toggleLockCompass"
+    <svg ref="compassRoseSvg"
+         class="c-compass-rose-svg"
+         viewBox="0 0 100 100"
    >
-        <div
-            class="c-nsew"
-            :style="compassRoseStyle"
+        <mask id="mask0"
+              mask-type="alpha"
+              maskUnits="userSpaceOnUse"
+              x="0"
+              y="0"
+              width="100"
+              height="100"
        >
-            <svg
-                class="c-nsew__minor-ticks"
-                viewBox="0 0 100 100"
+            <circle cx="50"
+                    cy="50"
+                    r="50"
+                    fill="black"
+            />
+        </mask>
+        <g class="c-cr__compass-wrapper">
+            <g class="c-cr__compass-main"
+               mask="url(#mask0)"
            >
-                <rect
-                    class="c-nsew__tick c-tick-ne"
-                    x="49"
-                    y="0"
-                    width="2"
-                    height="5"
+                <!-- Background and clipped elements -->
+                <rect class="c-cr__bg"
+                      width="100"
+                      height="100"
+                      fill="black"
                />
-                <rect
-                    class="c-nsew__tick c-tick-se"
-                    x="95"
-                    y="49"
-                    width="5"
-                    height="2"
+                <rect class="c-cr__edge"
+                      width="100"
+                      height="100"
+                      fill="url(#paint0_radial)"
                />
-                <rect
-                    class="c-nsew__tick c-tick-sw"
-                    x="49"
-                    y="95"
-                    width="2"
-                    height="5"
-                />
-                <rect
-                    class="c-nsew__tick c-tick-nw"
-                    x="0"
-                    y="49"
-                    width="5"
-                    height="2"
+                <rect v-if="hasSunHeading"
+                      class="c-cr__sun"
+                      width="100"
+                      height="100"
+                      fill="url(#paint1_radial)"
+                      :style="sunHeadingStyle"
                />

-            </svg>
+                <!-- Camera FOV -->
+                <mask id="mask2"
+                      class="c-cr__cam-fov-l-mask"
+                      mask-type="alpha"
+                      maskUnits="userSpaceOnUse"
+                      x="0"
+                      y="0"
+                      width="50"
+                      height="100"
+                >
+                    <rect width="51"
+                          height="100"
+                    />
+                </mask>
+                <mask id="mask1"
+                      class="c-cr__cam-fov-r-mask"
+                      mask-type="alpha"
+                      maskUnits="userSpaceOnUse"
+                      x="50"
+                      y="0"
+                      width="50"
+                      height="100"
+                >
+                    <rect x="49"
+                          width="51"
+                          height="100"
+                    />
+                </mask>
+                <g class="c-cr__cam-fov"
+                   :style="cameraPanStyle"
+                >
+                    <g mask="url(#mask2)">
+                        <rect class="c-cr__cam-fov-r"
+                              x="49"
+                              width="51"
+                              height="100"
+                              :style="cameraFOVStyleRightHalf"
+                        />
+                    </g>
+                    <g mask="url(#mask1)">
+                        <rect class="c-cr__cam-fov-l"
+                              width="51"
+                              height="100"
+                              :style="cameraFOVStyleLeftHalf"
+                        />
+                    </g>
+                </g>
+            </g>

-            <svg
-                class="c-nsew__ticks"
-                viewBox="0 0 100 100"
+            <!-- Spacecraft body -->
+            <path v-if="hasHeading"
+                  class="c-cr__spacecraft-body"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M37 49C35.3431 49 34 50.3431 34 52V82C34 83.6569 35.3431 85 37 85H63C64.6569 85 66 83.6569 66 82V52C66 50.3431 64.6569 49 63 49H37ZM50 52L58 60H55V67H45V60H42L50 52Z"
+                  :style="headingStyle"
+            />
+
+            <!-- NSEW and ticks -->
+            <g class="c-cr__nsew"
+               :style="compassRoseStyle"
            >
-                <polygon
-                    class="c-nsew__tick c-tick-n"
-                    points="50,0 60,10 40,10"
+                <g class="c-cr__ticks-major">
+                    <path d="M50 3L43 10H57L50 3Z" />
+                    <path d="M4 51V49H10V51H4Z"
+                          class="--hide-min"
+                    />
+                    <path d="M49 96V90H51V96H49Z"
+                          class="--hide-min"
+                    />
+                    <path d="M90 49V51H96V49H90Z"
+                          class="--hide-min"
+                    />
+                </g>
+                <g class="c-cr__ticks-minor --hide-small">
+                    <path d="M4 51V49H10V51H4Z" />
+                    <path d="M90 51V49H96V51H90Z" />
+                    <path d="M51 96H49V90H51V96Z" />
+                    <path d="M51 10L49 10V4L51 4V10Z" />
+                </g>
+                <g class="c-cr__nsew-text">
+                    <path :style="cardinalTextRotateW"
+                          class="c-cr__nsew-w --hide-small"
+                          d="M56.7418 45.004H54.1378L52.7238 52.312H52.6958L51.2258 45.004H48.7758L47.3058 52.312H47.2778L45.8638 45.004H43.2598L45.9618 55H48.6078L49.9798 48.112H50.0078L51.3798 55H53.9838L56.7418 45.004Z"
+                    />
+                    <path :style="cardinalTextRotateE"
+                          class="c-cr__nsew-e --hide-small"
+                          d="M46.104 55H54.21V52.76H48.708V50.856H53.608V48.84H48.708V47.09H54.07V45.004H46.104V55Z"
+                    />
+                    <path :style="cardinalTextRotateS"
+                          class="c-cr__nsew-s --hide-small"
+                          d="M45.6531 51.64C45.6671 54.202 47.6971 55.21 49.9931 55.21C52.1911 55.21 54.3471 54.398 54.3471 51.864C54.3471 50.058 52.8911 49.386 51.4491 48.98C49.9931 48.574 48.5511 48.434 48.5511 47.664C48.5511 47.006 49.2511 46.81 49.8111 46.81C50.6091 46.81 51.4631 47.104 51.4211 48.014H54.0251C54.0111 45.76 52.0091 44.794 50.0211 44.794C48.1451 44.794 45.9471 45.648 45.9471 47.832C45.9471 49.666 47.4451 50.31 48.8731 50.716C50.3151 51.122 51.7431 51.29 51.7431 52.172C51.7431 52.914 50.9311 53.194 50.1471 53.194C49.0411 53.194 48.3131 52.816 48.2571 51.64H45.6531Z"
+                    />
+                    <path :style="cardinalTextRotateN"
+                          class="c-cr__nsew-n"
+                          d="M42.5935 60H46.7935V49.32H46.8415L52.7935 60H57.3775V42.864H53.1775V53.424H53.1295L47.1775 42.864H42.5935V60Z"
+                    />
+                </g>
+            </g>
+        </g>
+        <defs>
+            <radialGradient id="paint0_radial"
+                            cx="0"
+                            cy="0"
+                            r="1"
+                            gradientUnits="userSpaceOnUse"
+                            gradientTransform="translate(50 50) rotate(90) scale(50)"
+            >
+                <stop offset="0.751387"
+                      stop-opacity="0"
                />
-                <rect
-                    class="c-nsew__tick c-tick-e"
-                    x="95"
-                    y="49"
-                    width="5"
-                    height="2"
+                <stop offset="1"
+                      stop-color="white"
                />
-                <rect
-                    class="c-nsew__tick c-tick-w"
-                    x="0"
-                    y="49"
-                    width="5"
-                    height="2"
+            </radialGradient>
+            <radialGradient id="paint1_radial"
+                            cx="0"
+                            cy="0"
+                            r="1"
+                            gradientUnits="userSpaceOnUse"
+                            gradientTransform="translate(50 -7) rotate(-90) scale(18.5)"
+            >
+                <stop offset="0.716377"
+                      stop-color="#FFCC00"
                />
-                <rect
-                    class="c-nsew__tick c-tick-s"
-                    x="49"
-                    y="95"
-                    width="2"
-                    height="5"
+                <stop offset="1"
+                      stop-color="#FF9900"
+                      stop-opacity="0"
                />
-
-                <text
-                    class="c-nsew__label c-label-n"
-                    text-anchor="middle"
-                    :transform="northTextTransform"
-                >N</text>
-                <text
-                    class="c-nsew__label c-label-e"
-                    text-anchor="middle"
-                    :transform="eastTextTransform"
-                >E</text>
-                <text
-                    class="c-nsew__label c-label-w"
-                    text-anchor="middle"
-                    :transform="southTextTransform"
-                >W</text>
-                <text
-                    class="c-nsew__label c-label-s"
-                    text-anchor="middle"
-                    :transform="westTextTransform"
-                >S</text>
-            </svg>
-        </div>
-
-        <div
-            v-if="hasHeading"
-            class="c-spacecraft-body"
-            :style="headingStyle"
-        >
-        </div>
-
-        <div
-            v-if="hasSunHeading"
-            class="c-sun"
-            :style="sunHeadingStyle"
-        ></div>
-
-        <div
-            class="c-cam-field"
-            :style="cameraPanStyle"
-        >
-            <div class="cam-field-half cam-field-half-l">
-                <div
-                    class="cam-field-area"
-                    :style="cameraFOVStyleLeftHalf"
-                ></div>
-            </div>
-            <div class="cam-field-half cam-field-half-r">
-                <div
-                    class="cam-field-area"
-                    :style="cameraFOVStyleRightHalf"
-                ></div>
-            </div>
-        </div>
-    </div>
+            </radialGradient>
+        </defs>
+    </svg>
 </div>
 </template>

 <script>
 import { rotate } from './utils';
+import { throttle } from 'lodash';

 export default {
    props: {
-        sizedImageWidth: {
-            type: Number,
+        compassRoseSizingClasses: {
+            type: String,
            required: true
        },
        heading: {
            type: Number,
-            required: true
+            required: true,
+            default() {
+                return 0;
+            }
        },
        sunHeading: {
            type: Number,
@@ -178,58 +229,39 @@ export default {
        },
        cameraPan: {
            type: Number,
-            required: true
+            required: true,
+            default() {
+                return 0;
+            }
        },
-        lockCompass: {
-            type: Boolean,
+        sizedImageDimensions: {
+            type: Object,
            required: true
        }
    },
+    data() {
+        return {
+            lockCompass: true
+        };
+    },
    computed: {
-        compassRoseSizingClasses() {
-            let compassRoseSizingClasses = '';
-            if (this.sizedImageWidth < 300) {
-                compassRoseSizingClasses = '--rose-small --rose-min';
-            } else if (this.sizedImageWidth < 500) {
-                compassRoseSizingClasses = '--rose-small';
-            } else if (this.sizedImageWidth > 1000) {
-                compassRoseSizingClasses = '--rose-max';
-            }
-
-            return compassRoseSizingClasses;
-        },
        compassRoseStyle() {
            return { transform: `rotate(${ this.north }deg)` };
        },
        north() {
            return this.lockCompass ? rotate(-this.cameraPan) : 0;
        },
-        northTextTransform() {
-            return this.cardinalPointsTextTransform.north;
+        cardinalTextRotateN() {
+            return { transform: `translateY(-27%) rotate(${ -this.north }deg)` };
        },
-        eastTextTransform() {
-            return this.cardinalPointsTextTransform.east;
+        cardinalTextRotateS() {
+            return { transform: `translateY(30%) rotate(${ -this.north }deg)` };
        },
-        southTextTransform() {
-            return this.cardinalPointsTextTransform.south;
+        cardinalTextRotateE() {
+            return { transform: `translateX(30%) rotate(${ -this.north }deg)` };
        },
-        westTextTransform() {
-            return this.cardinalPointsTextTransform.west;
-        },
-        cardinalPointsTextTransform() {
-            /**
-             * cardinal points text must be rotated
-             * in the opposite direction that north is rotated
-             * to keep text vertically oriented
-             */
-            const rotation = `rotate(${ -this.north })`;
-
-            return {
-                north: `translate(50,23) ${ rotation }`,
-                east: `translate(82,50) ${ rotation }`,
-                south: `translate(18,50) ${ rotation }`,
-                west: `translate(50,82) ${ rotation }`
-            };
+        cardinalTextRotateW() {
+            return { transform: `translateX(-30%) rotate(${ -this.north }deg)` };
        },
        hasHeading() {
            return this.heading !== undefined;
@@ -238,7 +270,7 @@ export default {
            const rotation = rotate(this.north, this.heading);

            return {
-                transform: `translateX(-50%) rotate(${ rotation }deg)`
+                transform: `rotate(${ rotation }deg)`
            };
        },
        hasSunHeading() {
@@ -262,20 +294,37 @@ export default {
        // rotated counter-clockwise from camera pan angle
        cameraFOVStyleLeftHalf() {
            return {
-                transform: `translateX(50%) rotate(${ -this.cameraAngleOfView / 2 }deg)`
+                transform: `rotate(${ this.cameraAngleOfView / 2 }deg)`
            };
        },
        // right half of camera field of view
        // rotated clockwise from camera pan angle
        cameraFOVStyleRightHalf() {
            return {
-                transform: `translateX(-50%) rotate(${ this.cameraAngleOfView / 2 }deg)`
+                transform: `rotate(${ -this.cameraAngleOfView / 2 }deg)`
            };
        }
    },
+    watch: {
+        sizedImageDimensions() {
+            this.debounceResizeSvg();
+        }
+    },
+    mounted() {
+        this.debounceResizeSvg = throttle(this.resizeSvg, 100);
+
+        this.$nextTick(() => {
+            this.debounceResizeSvg();
+        });
+    },
    methods: {
+        resizeSvg() {
+            const svg = this.$refs.compassRoseSvg;
+            svg.setAttribute('width', this.$refs.compassRoseWrapper.clientWidth);
+            svg.setAttribute('height', this.$refs.compassRoseWrapper.clientHeight);
+        },
        toggleLockCompass() {
-            this.$emit('toggle-lock-compass');
+            this.lockCompass = !this.lockCompass;
        }
    }
 };
--- a/src/plugins/imagery/components/Compass/compass.scss
+++ b/src/plugins/imagery/components/Compass/compass.scss
@@ -12,9 +12,8 @@ $elemBg: rgba(black, 0.7);
 .c-compass {
    pointer-events: none; // This allows the image element to receive a browser-level context click
    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    left: 0;
+    top: 0;
    z-index: 1;
    @include userSelectNone;
 }
@@ -81,114 +80,55 @@ $elemBg: rgba(black, 0.7);
        transform: translateX(-50%);
        z-index: 1;
    }
-
 }

-/***************************** COMPASS DIRECTIONS */
-.c-nsew {
+/***************************** COMPASS SVG */
+.c-compass-rose-svg {
    $color: $interfaceKeyColor;
-    $inset: 5%;
-    $tickHeightPerc: 15%;
-    text-shadow: black 0 0 10px;
-    top: $inset;
-    right: $inset;
-    bottom: $inset;
-    left: $inset;
-    z-index: 3;
+    position: absolute;
+    top: 0; left: 0;

-    &__tick,
-    &__label {
-        fill: $color;
-    }
-
-    &__minor-ticks {
-        opacity: 0.5;
+    g, path, rect {
+        // In an SVG, rotation occurs about the center of the SVG, not the element
        transform-origin: center;
-        transform: rotate(45deg);
    }

-    &__label {
-        dominant-baseline: central;
-        font-size: 1.25em;
-        font-weight: bold;
-    }
-
-    .c-label-n {
-        font-size: 2em;
-    }
-}
-
-/***************************** CAMERA FIELD ANGLE */
-.c-cam-field {
-    $color: white;
-    opacity: 0.3;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 2;
-
-    .cam-field-half {
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-
-        .cam-field-area {
-            background: $color;
-            top: -30%;
-            right: 0;
-            bottom: -30%;
-            left: 0;
+    .c-cr {
+        &__bg {
+            fill: #000;
+            opacity: 0.8;
        }

-        // clip-paths overlap a bit to avoid a gap between halves
-        &-l {
-            clip-path: polygon(0 0, 50.5% 0, 50.5% 100%, 0 100%);
-
-            .cam-field-area {
-                transform-origin: left center;
-            }
+        &__edge {
+            opacity: 0.1;
        }

-        &-r {
-            clip-path: polygon(49.5% 0, 100% 0, 100% 100%, 49.5% 100%);
-
-            .cam-field-area {
-                transform-origin: right center;
-            }
+        &__sun {
+            opacity: 0.7;
        }
-    }
-}

-/***************************** SPACECRAFT BODY */
-.c-spacecraft-body {
-    $color: $interfaceKeyColor;
-    $s: 30%;
-    background: $color;
-    border-radius: 3px;
-    height: $s;
-    width: $s;
-    left: 50%;
-    top: 50%;
-    opacity: 0.4;
-    transform-origin: center top;
-    transform: translateX(-50%); // center by default, overridden by CompassRose.vue / headingStyle()
+        &__cam-fov-l,
+        &__cam-fov-r {
+            // Cam FOV indication
+            opacity: 0.2;
+            fill: #fff;
+        }

-    &:before {
-        // Direction arrow
-        $color: rgba(black, 0.5);
-        $arwPointerY: 60%;
-        $arwBodyOffset: 25%;
-        background: $color;
-        content: '';
-        display: block;
-        position: absolute;
-        top: 10%;
-        right: 20%;
-        bottom: 50%;
-        left: 20%;
-        clip-path: polygon(50% 0, 100% $arwPointerY, 100%-$arwBodyOffset $arwPointerY, 100%-$arwBodyOffset 100%, $arwBodyOffset 100%, $arwBodyOffset $arwPointerY, 0 $arwPointerY);
+        &__nsew-text,
+        &__spacecraft-body,
+        &__ticks-major,
+        &__ticks-minor {
+            fill: $color;
+        }
+
+        &__ticks-minor {
+            opacity: 0.5;
+            transform: rotate(45deg);
+        }
+
+        &__spacecraft-body {
+            opacity: 0.3;
+        }
    }
 }

@@ -196,32 +136,28 @@ $elemBg: rgba(black, 0.7);
 .w-direction-rose {
    $s: 10%;
    $m: 2%;
+    cursor: pointer;
+    pointer-events: all;
    position: absolute;
    bottom: $m;
    left: $m;
    width: $s;
    padding-top: $s;
+    z-index: 2;

    &.--rose-min {
        $s: 30px;
        width: $s;
        padding-top: $s;
+        .--hide-min {
+            display: none;
+        }
    }

    &.--rose-small {
-        .c-nsew__minor-ticks,
-        .c-tick-w,
-        .c-tick-s,
-        .c-tick-e,
-        .c-label-w,
-        .c-label-s,
-        .c-label-e {
+        .--hide-small {
            display: none;
        }
-
-        .c-label-n {
-            font-size: 2.5em;
-        }
    }

    &.--rose-max {
@@ -230,44 +166,3 @@ $elemBg: rgba(black, 0.7);
        padding-top: $s;
    }
 }
-
-.c-direction-rose {
-    $c2: rgba(white, 0.1);
-    background: $elemBg;
-    background-image: radial-gradient(circle closest-side, transparent, transparent 80%, $c2);
-    transform-origin: 0 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    clip-path: circle(50% at 50% 50%);
-    border-radius: 100%;
-    pointer-events: all;
-
-    svg, div {
-        position: absolute;
-    }
-
-    // Sun
-    .c-sun {
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-
-        &:before {
-            $s: 35%;
-            @include sun();
-            content: '';
-            display: block;
-            position: absolute;
-            opacity: 0.7;
-            top: 0;
-            left: 50%;
-            height: $s;
-            width: $s;
-            transform: translate(-50%, -60%);
-        }
-    }
-}
--- a/src/plugins/imagery/components/ImageryViewLayout.vue
+++ b/src/plugins/imagery/components/ImageryViewLayout.vue
@@ -55,28 +55,33 @@
                ></a>
            </span>
        </div>
-        <div class="c-imagery__main-image__bg"
+        <div ref="imageBG"
+             class="c-imagery__main-image__bg"
             :class="{'paused unnsynced': isPaused,'stale':false }"
        >
-            <img
-                ref="focusedImage"
-                class="c-imagery__main-image__image js-imageryView-image"
-                :src="imageUrl"
-                :style="{
-                    'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`
-                }"
-                :data-openmct-image-timestamp="time"
-                :data-openmct-object-keystring="keyString"
+            <div class="image-wrapper"
+                 :style="{
+                     'width': `${sizedImageDimensions.width}px`,
+                     'height': `${sizedImageDimensions.height}px`
+                 }"
            >
-            <Compass
-                v-if="shouldDisplayCompass"
-                :container-width="imageContainerWidth"
-                :container-height="imageContainerHeight"
-                :natural-aspect-ratio="focusedImageNaturalAspectRatio"
-                :image="focusedImage"
-                :lock-compass="lockCompass"
-                @toggle-lock-compass="toggleLockCompass"
-            />
+                <img ref="focusedImage"
+                     class="c-imagery__main-image__image js-imageryView-image"
+                     :src="imageUrl"
+                     :style="{
+                         'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`
+                     }"
+                     :data-openmct-image-timestamp="time"
+                     :data-openmct-object-keystring="keyString"
+                >
+                <Compass
+                    v-if="shouldDisplayCompass"
+                    :compass-rose-sizing-classes="compassRoseSizingClasses"
+                    :image="focusedImage"
+                    :natural-aspect-ratio="focusedImageNaturalAspectRatio"
+                    :sized-image-dimensions="sizedImageDimensions"
+                />
+            </div>
        </div>
        <div class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-buttons">
            <button class="c-nav c-nav--prev"
@@ -224,6 +229,18 @@ export default {
        };
    },
    computed: {
+        compassRoseSizingClasses() {
+            let compassRoseSizingClasses = '';
+            if (this.sizedImageDimensions.width < 300) {
+                compassRoseSizingClasses = '--rose-small --rose-min';
+            } else if (this.sizedImageDimensions.width < 500) {
+                compassRoseSizingClasses = '--rose-small';
+            } else if (this.sizedImageDimensions.width > 1000) {
+                compassRoseSizingClasses = '--rose-max';
+            }
+
+            return compassRoseSizingClasses;
+        },
        time() {
            return this.formatTime(this.focusedImage);
        },
@@ -347,6 +364,20 @@ export default {
            }

            return isFresh;
+        },
+        sizedImageDimensions() {
+            let sizedImageDimensions = {};
+            if ((this.imageContainerWidth / this.imageContainerHeight) > this.focusedImageNaturalAspectRatio) {
+                // container is wider than image
+                sizedImageDimensions.width = this.imageContainerHeight * this.focusedImageNaturalAspectRatio;
+                sizedImageDimensions.height = this.imageContainerHeight;
+            } else {
+                // container is taller than image
+                sizedImageDimensions.width = this.imageContainerWidth;
+                sizedImageDimensions.height = this.imageContainerWidth * this.focusedImageNaturalAspectRatio;
+            }
+
+            return sizedImageDimensions;
        }
    },
    watch: {
@@ -395,7 +426,7 @@ export default {
        _.debounce(this.resizeImageContainer, 400);

        this.imageContainerResizeObserver = new ResizeObserver(this.resizeImageContainer);
-        this.imageContainerResizeObserver.observe(this.$refs.focusedImage);
+        this.imageContainerResizeObserver.observe(this.$refs.imageBG);

        // For adjusting scroll bar size and position when resizing thumbs wrapper
        this.handleScroll = _.debounce(this.handleScroll, SCROLL_LATENCY);
@@ -833,12 +864,12 @@ export default {
            }, { once: true });
        },
        resizeImageContainer() {
-            if (this.$refs.focusedImage.clientWidth !== this.imageContainerWidth) {
-                this.imageContainerWidth = this.$refs.focusedImage.clientWidth;
+            if (this.$refs.imageBG.clientWidth !== this.imageContainerWidth) {
+                this.imageContainerWidth = this.$refs.imageBG.clientWidth;
            }

-            if (this.$refs.focusedImage.clientHeight !== this.imageContainerHeight) {
-                this.imageContainerHeight = this.$refs.focusedImage.clientHeight;
+            if (this.$refs.imageBG.clientHeight !== this.imageContainerHeight) {
+                this.imageContainerHeight = this.$refs.imageBG.clientHeight;
            }
        },
        handleThumbWindowResizeStart() {
@@ -858,9 +889,6 @@ export default {
            this.$nextTick(() => {
                this.resizingWindow = false;
            });
-        },
-        toggleLockCompass() {
-            this.lockCompass = !this.lockCompass;
        }
    }
 };
--- a/src/plugins/imagery/components/imagery-view-layout.scss
+++ b/src/plugins/imagery/components/imagery-view-layout.scss
@@ -22,6 +22,9 @@
        &__bg {
            background-color: $colorPlotBg;
            border: 1px solid transparent;
+            display: flex;
+            align-items: center;
+            justify-content: center;
            flex: 1 1 auto;
            height: 0;

@@ -33,7 +36,6 @@
        &__image {
            height: 100%;
            width: 100%;
-            object-fit: contain;
        }
    }

@@ -192,6 +194,10 @@
                margin-right: $interiorMarginSm;
            }
        }
+
+        .s-status-taking-snapshot & {
+            display: none;
+        }
    }

    &__lc {
@@ -273,6 +279,10 @@
            content: $glyph-icon-play;
        }
    }
+
+    .s-status-taking-snapshot & {
+        display: none;
+    }
 }

 .c-imagery__prev-next-buttons {
@@ -287,6 +297,10 @@
    .c-nav {
        pointer-events: all;
    }
+
+    .s-status-taking-snapshot & {
+        display: none;
+    }
 }

 .c-nav {
--- a/src/plugins/plot/MctPlot.vue
+++ b/src/plugins/plot/MctPlot.vue
@@ -102,7 +102,7 @@
                        >
                        </button>
                    </div>
-                    <div v-if="isRealTime"
+                    <div v-if="isRealTime && !options.compact"
                         class="c-button-set c-button-set--strip-h js-pause"
                    >
                        <button v-if="!isFrozen"
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@@ -65,7 +65,8 @@ define([
    './interceptors/plugin',
    './performanceIndicator/plugin',
    './CouchDBSearchFolder/plugin',
-    './timeline/plugin'
+    './timeline/plugin',
+    '/node_modules/openmct-mmgis/dist/openmct-mmgis'
 ], function (
    _,
    UTCTimeSystem,
@@ -111,7 +112,8 @@ define([
    ObjectInterceptors,
    PerformanceIndicator,
    CouchDBSearchFolder,
-    Timeline
+    Timeline,
+    Mmgis
 ) {
    const bundleMap = {
        LocalStorage: 'platform/persistence/local',
@@ -212,6 +214,7 @@ define([
    plugins.PerformanceIndicator = PerformanceIndicator.default;
    plugins.CouchDBSearchFolder = CouchDBSearchFolder.default;
    plugins.Timeline = Timeline.default;
+    plugins.Mmgis = Mmgis.default;

    return plugins;
 });
--- a/src/ui/inspector/DetailText.vue
+++ b/src/ui/inspector/DetailText.vue
@@ -0,0 +1,43 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+<template>
+<li class="c-inspect-properties__row">
+    <div class="c-inspect-properties__label">
+        {{ detail.name }}
+    </div>
+    <div class="c-inspect-properties__value">
+        {{ detail.value }}
+    </div>
+</li>
+</template>
+
+<script>
+export default {
+    props: {
+        detail: {
+            type: Object,
+            required: true
+        }
+    }
+};
+</script>
--- a/src/ui/inspector/DetailTime.vue
+++ b/src/ui/inspector/DetailTime.vue
@@ -0,0 +1,50 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+<template>
+<li class="c-inspect-properties__row">
+    <div class="c-inspect-properties__label">
+        {{ detail.name }}
+    </div>
+    <div class="c-inspect-properties__value">
+        {{ formattedTime }}
+    </div>
+</li>
+</template>
+
+<script>
+import Moment from 'moment';
+
+export default {
+    props: {
+        detail: {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        formattedTime() {
+            return Moment.utc(this.detail.value).format('YYYY-MM-DD[\n]HH:mm:ss') + ' UTC';
+        }
+    }
+};
+</script>
--- a/src/ui/inspector/ElementItem.vue
+++ b/src/ui/inspector/ElementItem.vue
@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
 <template>
 <li
    draggable="true"
--- a/src/ui/inspector/ElementsPool.vue
+++ b/src/ui/inspector/ElementsPool.vue
@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
 <template>
 <div class="c-elements-pool">
    <Search
--- a/src/ui/inspector/Inspector.vue
+++ b/src/ui/inspector/Inspector.vue
@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
 <template>
 <div class="c-inspector">
    <object-name />
@@ -19,7 +41,9 @@
                   type="vertical"
        >
            <pane class="c-inspector__properties">
-                <properties />
+                <Properties
+                    v-if="!activity"
+                />
                <location />
                <inspector-views />
            </pane>
@@ -98,7 +122,8 @@ export default {
                key: '__styles',
                name: 'Styles'
            }],
-            currentTabbedView: {}
+            currentTabbedView: {},
+            activity: undefined
        };
    },
    mounted() {
@@ -111,9 +136,12 @@ export default {
    methods: {
        updateInspectorViews(selection) {
            this.refreshComposition(selection);
+
            if (this.openmct.types.get('conditionSet')) {
                this.refreshTabs(selection);
            }
+
+            this.setActivity(selection);
        },
        refreshComposition(selection) {
            if (selection.length > 0 && selection[0].length > 0) {
@@ -150,6 +178,12 @@ export default {
        },
        isCurrent(view) {
            return _.isEqual(this.currentTabbedView, view);
+        },
+        setActivity(selection) {
+            this.activity = selection
+                && selection.length
+                && selection[0].length
+                && selection[0][0].activity;
        }
    }
 };
--- a/src/ui/inspector/InspectorStylesSpecMocks.js
+++ b/src/ui/inspector/InspectorStylesSpecMocks.js
@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
 export const mockTelemetryTableSelection = [
    [{
        context: {
--- a/src/ui/inspector/InspectorViews.vue
+++ b/src/ui/inspector/InspectorViews.vue
@@ -1,10 +1,29 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
 <template>
 <div></div>
 </template>

-<style>
-</style>
-
 <script>
 export default {
    inject: ['openmct'],
--- a/src/ui/inspector/Location.vue
+++ b/src/ui/inspector/Location.vue
@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
 <template>
 <div class="c-inspect-properties c-inspect-properties--location">
    <div
--- a/src/ui/inspector/ObjectName.vue
+++ b/src/ui/inspector/ObjectName.vue
@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
 <template>
 <div class="c-inspector__header">
    <div v-if="!multiSelect"
--- a/src/ui/inspector/Properties.vue
+++ b/src/ui/inspector/Properties.vue
@@ -1,105 +1,149 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
 <template>
-<div v-if="!activity"
-     class="c-inspector__properties c-inspect-properties"
->
+<div class="c-inspector__properties c-inspect-properties">
    <div class="c-inspect-properties__header">
        Details
    </div>
    <ul
-        v-if="!multiSelect && !singleSelectNonObject"
+        v-if="hasDetails"
        class="c-inspect-properties__section"
    >
-        <li class="c-inspect-properties__row">
-            <div class="c-inspect-properties__label">
-                Title
-            </div>
-            <div class="c-inspect-properties__value">
-                {{ item.name }}
-            </div>
-        </li>
-        <li class="c-inspect-properties__row">
-            <div class="c-inspect-properties__label">
-                Type
-            </div>
-            <div class="c-inspect-properties__value">
-                {{ typeName }}
-            </div>
-        </li>
-        <li
-            v-if="item.created"
-            class="c-inspect-properties__row"
-        >
-            <div class="c-inspect-properties__label">
-                Created
-            </div>
-            <div class="c-inspect-properties__value">
-                {{ formatTime(item.created) }}
-            </div>
-        </li>
-        <li
-            v-if="item.modified"
-            class="c-inspect-properties__row"
-        >
-            <div class="c-inspect-properties__label">
-                Modified
-            </div>
-            <div class="c-inspect-properties__value">
-                {{ formatTime(item.modified) }}
-            </div>
-        </li>
-        <li
-            v-for="prop in typeProperties"
-            :key="prop.name"
-            class="c-inspect-properties__row"
-        >
-            <div class="c-inspect-properties__label">
-                {{ prop.name }}
-            </div>
-            <div class="c-inspect-properties__value">
-                {{ prop.value }}
-            </div>
-        </li>
+        <Component
+            :is="getComponent(detail)"
+            v-for="detail in details"
+            :key="detail.name"
+            :detail="detail"
+        />
+
    </ul>
    <div
-        v-if="multiSelect"
+        v-else
        class="c-inspect-properties__row--span-all"
    >
-        No properties to display for multiple items
-    </div>
-    <div
-        v-if="singleSelectNonObject"
-        class="c-inspect-properties__row--span-all"
-    >
-        No properties to display for this item
+        {{ noDetailsMessage }}
    </div>
 </div>
 </template>

 <script>
-import Moment from "moment";
+import DetailText from './DetailText.vue';
+import DetailTime from './DetailTime.vue';

 export default {
+    components: {
+        DetailText,
+        DetailTime
+    },
    inject: ['openmct'],
    data() {
        return {
-            domainObject: {},
-            activity: undefined,
-            multiSelect: false
+            selection: undefined
        };
    },
    computed: {
-        item() {
-            return this.domainObject || {};
+        details() {
+            return this.customDetails ? this.customDetails : this.domainObjectDetails;
        },
-        type() {
-            return this.openmct.types.get(this.item.type);
-        },
-        typeName() {
-            if (!this.type) {
-                return `Unknown: ${this.item.type}`;
+        customDetails() {
+            if (this.context === undefined) {
+                return;
            }

-            return this.type.definition.name;
+            return this.context.details;
+        },
+        domainObject() {
+            if (this.context === undefined) {
+                return;
+            }
+
+            return this.context.item;
+        },
+        type() {
+            if (this.domainObject === undefined) {
+                return;
+            }
+
+            return this.openmct.types.get(this.domainObject.type);
+        },
+        domainObjectDetails() {
+            if (this.domainObject === undefined) {
+                return;
+            }
+
+            const title = this.domainObject.name;
+            const typeName = this.type ? this.type.definition.name : `Unknown: ${this.domainObject.type}`;
+            const timestampLabel = this.domainObject.modified ? 'Modified' : 'Created';
+            const timestamp = this.domainObject.modified ? this.domainObject.modified : this.domainObject.created;
+
+            const details = [
+                {
+                    name: 'Title',
+                    value: title
+                },
+                {
+                    name: 'Type',
+                    value: typeName
+                }
+            ];
+
+            if (timestamp !== undefined) {
+                details.push(
+                    {
+                        name: timestampLabel,
+                        value: timestamp,
+                        component: 'time'
+                    }
+                );
+            }
+
+            return [...details, ...this.typeProperties];
+        },
+        context() {
+            if (
+                !this.selection
+                || !this.selection.length
+                || !this.selection[0].length
+            ) {
+                return;
+            }
+
+            return this.selection[0][0].context;
+        },
+        hasDetails() {
+            return Boolean(
+                this.details
+                && this.details.length
+                && !this.multiSelection
+            );
+        },
+        multiSelection() {
+            return this.selection && this.selection.length > 1;
+        },
+        noDetailsMessage() {
+            return this.multiSelection
+                ? 'No properties to display for multiple items'
+                : 'No properties to display for this item';
        },
        typeProperties() {
            if (!this.type) {
@@ -129,12 +173,9 @@ export default {
                        name: field.name,
                        value: field.path.reduce((object, key) => {
                            return object[key];
-                        }, this.item)
+                        }, this.domainObject)
                    };
                });
-        },
-        singleSelectNonObject() {
-            return !this.item.identifier && !this.multiSelect;
        }
    },
    mounted() {
@@ -145,26 +186,13 @@ export default {
        this.openmct.selection.off('change', this.updateSelection);
    },
    methods: {
-        updateSelection(selection) {
-            if (selection.length === 0 || selection[0].length === 0) {
-                this.domainObject = {};
+        getComponent(detail) {
+            const component = detail.component ? detail.component : 'text';

-                return;
-            }
-
-            if (selection.length > 1) {
-                this.multiSelect = true;
-                this.domainObject = {};
-
-                return;
-            } else {
-                this.multiSelect = false;
-                this.domainObject = selection[0][0].context.item;
-                this.activity = selection[0][0].context.activity;
-            }
+            return `detail-${component}`;
        },
-        formatTime(unixTime) {
-            return Moment.utc(unixTime).format('YYYY-MM-DD[\n]HH:mm:ss') + ' UTC';
+        updateSelection(selection) {
+            this.selection = selection;
        }
    }
 };
--- a/src/ui/router/Browse.js
+++ b/src/ui/router/Browse.js
@@ -10,7 +10,6 @@ define([
        let unobserve = undefined;
        let currentObjectPath;
        let isRoutingInProgress = false;
-        let mutable;

        openmct.router.route(/^\/browse\/?$/, navigateToFirstChildOfRoot);
        openmct.router.route(/^\/browse\/(.*)$/, (path, results, params) => {
@@ -37,24 +36,10 @@ define([
        }

        function viewObject(object, viewProvider) {
-            if (mutable) {
-                openmct.objects.destroyMutable(mutable);
-                mutable = undefined;
-            }
-
-            if (openmct.objects.supportsMutation(object.identifier)) {
-                mutable = openmct.objects._toMutable(object);
-            }
-
            currentObjectPath = openmct.router.path;

-            if (mutable !== undefined) {
-                openmct.layout.$refs.browseObject.show(mutable, viewProvider.key, true, currentObjectPath);
-                openmct.layout.$refs.browseBar.domainObject = mutable;
-            } else {
-                openmct.layout.$refs.browseObject.show(object, viewProvider.key, true, currentObjectPath);
-                openmct.layout.$refs.browseBar.domainObject = object;
-            }
+            openmct.layout.$refs.browseObject.show(object, viewProvider.key, true, currentObjectPath);
+            openmct.layout.$refs.browseBar.domainObject = object;

            openmct.layout.$refs.browseBar.viewKey = viewProvider.key;
        }
Author	SHA1	Message	Date
Henry Hsu	2def6dd634	add mmgis dependency	2021-07-19 11:32:24 -07:00
David Tsay	16fe1b55c6	bubble activity logic to parent	2021-07-13 17:06:11 -07:00
David Tsay	8037c372b0	add missing copyrights	2021-07-13 16:33:26 -07:00
David Tsay	216a349282	allow custom details while retaining current domain object details	2021-07-13 16:32:22 -07:00
Charles Hacskaylo	41b860a547	Fixes for Imagery Snapshotting #3963 (#4001 ) * refactored compass structure and code. * resize image wrapper * center image properly * Refactor imagery compass rose as SVG * Suppress prev/next image arrows from Snapshot Co-authored-by: Nikhil Mandlik <nikhil.k.mandlik@nasa.gov>	2021-07-09 18:03:11 -07:00
Nikhil	254b3db966	added mock values to compass for example imagery. (#3999 )	2021-07-09 15:13:54 -07:00
Shefali Joshi	cbb3f32d1e	1.7.4 into master (#3985 ) catching any errors from a user canceling from dialog (#3968) Fix navigation errors (#3970) Only add listeners to observables on creation Do not double destroy mutable objects Disallow pause and play in time strip view for plots. (#3972) Update version Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov> Co-authored-by: Andrew Henry <akhenry@gmail.com>	2021-06-29 09:40:30 -07:00