Finish code walkthrough

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>

README.md

@@ -1,9 +1,11 @@
-# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0)
+# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/nasa/openmct.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/nasa/openmct/context:javascript)
 
 Open MCT (Open Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research Center, and is being used by NASA for data analysis of spacecraft missions, as well as planning and operation of experimental rover systems. As a generalizable and open source framework, Open MCT could be used as the basis for building applications for planning, operation, and analysis of any systems producing telemetry data.
 
 Please visit our [Official Site](https://nasa.github.io/openmct/) and [Getting Started Guide](https://nasa.github.io/openmct/getting-started/)
 
+Once you've created something amazing with Open MCT, showcase your work in our GitHub Discussions [Show and Tell](https://github.com/nasa/openmct/discussions/categories/show-and-tell) section. We love seeing unique and wonderful implementations of Open MCT!
+
 ## See Open MCT in Action
 
 Try Open MCT now with our [live demo](https://openmct-demo.herokuapp.com/).

index.html

@@ -194,6 +194,7 @@
             ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
             {indicator: true}
         ));
+        //openmct.install(openmct.plugins.CodeWalkthrough);
         openmct.start();
     </script>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "1.7.4-SNAPSHOT",
+  "version": "1.7.4",
   "description": "The Open MCT core platform",
   "dependencies": {},
   "devDependencies": {

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;

src/api/overlays/components/overlay-component.scss

@@ -21,8 +21,7 @@
 
     &__outer {
         @include abs();
-        background: $overlayColorBg;
-        color: $overlayColorFg;
+        background: $colorBodyBg;
         display: flex;
         flex-direction: column;
         padding: $overlayInnerMargin;
@@ -30,7 +29,6 @@
 
     &__close-button {
         $p: $interiorMargin + 2px;
-        color: $overlayColorFg;
         font-size: 1.5em;
         position: absolute;
         top: $p; right: $p;
@@ -82,11 +80,6 @@
         }
     }
 
-    .c-button,
-    .c-click-icon {
-        filter: $overlayBrightnessAdjust;
-    }
-
     .c-object-label__name {
         filter: $objectLabelNameFilter;
     }
@@ -103,6 +96,7 @@ body.desktop {
     }
 
     // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
+    .l-overlay-large,
     .l-overlay-small,
     .l-overlay-fit {
         .c-overlay__outer {
@@ -124,12 +118,8 @@ body.desktop {
         $tbPad: floor($pad * 0.8);
         $lrPad: $pad;
         .c-overlay {
-            &__blocker {
-                display: none;
-            }
-
             &__outer {
-                @include overlaySizing($overlayOuterMarginFullscreen);
+                @include overlaySizing($overlayOuterMarginLarge);
                 padding: $tbPad $lrPad;
             }
 

src/plugins/LADTable/plugin.js

@@ -30,7 +30,7 @@ export default function plugin() {
         openmct.objectViews.addProvider(new LADTableSetViewProvider(openmct));
 
         openmct.types.addType('LadTable', {
-            name: "LAD Table",
+            name: "Latest Data Table",
             creatable: true,
             description: "A Latest Available Data tabular view in which each row displays the values for one or more contained telemetry objects.",
             cssClass: 'icon-tabular-lad',

src/plugins/codeWalkthrough/plugin.js

@@ -0,0 +1,63 @@
+export default function install(openmct) {
+    openmct.objectViews.addProvider({
+        name: "Data Table",
+        key: "data-table",
+        cssClass: "icon-packet",
+        description: "Tabular view of telemetry",
+        canView(domainObject) {
+            return true;
+        },
+        view(domainObject) {
+            return {
+                async show(element) {
+                    let telemetryMetadata = openmct.telemetry.getMetadata(domainObject).values();
+                    let table = document.createElement('table');
+                    let tableHead = document.createElement('thead');
+                    let tableBody = document.createElement('tbody');
+                    let tableHeadRow = document.createElement('tr');
+
+                    tableHead.appendChild(tableHeadRow);
+                    table.appendChild(tableHead);
+                    table.appendChild(tableBody);
+                    element.appendChild(table);
+
+                    telemetryMetadata.forEach(metadatum => {
+                        let tableHeadCell = document.createElement('td');
+                        tableHeadRow.appendChild(tableHeadCell);
+
+                        tableHeadCell.innerText = metadatum.name;
+                    });
+
+                    async function requestTelemetry() {
+                        let telemetry = await openmct.telemetry.request(domainObject);
+                        telemetry.forEach((datum) => {
+                            let dataRow = document.createElement('tr');
+                            telemetryMetadata.forEach(metadatum => {
+                                let dataCell = document.createElement('td');
+                                let formatter = openmct.telemetry.getValueFormatter(metadatum);
+
+                                let telemetryValue = formatter.format(datum[metadatum.key]);
+                                dataCell.innerText = telemetryValue;
+                                dataRow.appendChild(dataCell);
+                            });
+                            tableBody.appendChild(dataRow);
+                        });
+                    }
+
+                    openmct.time.on('bounds', () => {
+                        tableBody.innerHTML = '';
+                        requestTelemetry();
+                    });
+
+                    requestTelemetry();
+
+                    // openmct.telemetry.subscribe(domainObject, (datum) => {
+                    //     element.innerText = JSON.stringify(datum);
+                    // });
+                },
+                destroy() {
+                }
+            };
+        }
+    });
+}

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);
 

src/plugins/folderView/components/grid-view.scss

@@ -23,6 +23,11 @@
     body.mobile & {
         flex: 1 0 auto;
     }
+
+    [class*='l-overlay'] & {
+        // When this view is in an overlay, prevent navigation
+        pointer-events: none;
+    }
 }
 
 /******************************* GRID ITEMS */

src/plugins/folderView/components/list-item.scss

@@ -22,4 +22,9 @@
             @include isAlias();
         }
     }
+
+    [class*='l-overlay'] & {
+        // When this view is in an overlay, prevent navigation
+        pointer-events: none;
+    }
 }

src/plugins/imagery/ImageryViewProvider.js

@@ -62,6 +62,9 @@ export default function ImageryViewProvider(openmct) {
                 destroy: function () {
                     component.$destroy();
                     component = undefined;
+                },
+                _getInstance: function () {
+                    return component;
                 }
             };
         }

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -124,27 +124,40 @@
         </div>
     </div>
     <div
-        ref="thumbsWrapper"
         class="c-imagery__thumbs-wrapper"
-        :class="{'is-paused': isPaused}"
-        @scroll="handleScroll"
+        :class="[
+            { 'is-paused': isPaused },
+            { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused }
+        ]"
     >
-        <div v-for="(image, index) in imageHistory"
-             :key="image.url + image.time"
-             class="c-imagery__thumb c-thumb"
-             :class="{ selected: focusedImageIndex === index && isPaused }"
-             @click="setFocusedImage(index, thumbnailClick)"
+        <div
+            ref="thumbsWrapper"
+            class="c-imagery__thumbs-scroll-area"
+            @scroll="handleScroll"
         >
-            <a href=""
-               :download="image.imageDownloadName"
-               @click.prevent
+            <div v-for="(image, index) in imageHistory"
+                 :key="image.url + image.time"
+                 class="c-imagery__thumb c-thumb"
+                 :class="{ selected: focusedImageIndex === index && isPaused }"
+                 @click="setFocusedImage(index, thumbnailClick)"
             >
-                <img class="c-thumb__image"
-                     :src="image.url"
+                <a href=""
+                   :download="image.imageDownloadName"
+                   @click.prevent
                 >
-            </a>
-            <div class="c-thumb__timestamp">{{ image.formattedTime }}</div>
+                    <img class="c-thumb__image"
+                         :src="image.url"
+                    >
+                </a>
+                <div class="c-thumb__timestamp">{{ image.formattedTime }}</div>
+            </div>
         </div>
+
+        <button
+            class="c-imagery__auto-scroll-resume-button c-icon-button icon-play"
+            title="Resume automatic scrolling of image thumbnails"
+            @click="scrollToRight('reset')"
+        ></button>
     </div>
 </div>
 </template>
@@ -171,6 +184,8 @@ const TWENTYFOUR_HOURS = EIGHT_HOURS * 3;
 const ARROW_RIGHT = 39;
 const ARROW_LEFT = 37;
 
+const SCROLL_LATENCY = 250;
+
 export default {
     components: {
         Compass
@@ -204,7 +219,8 @@ export default {
             focusedImageNaturalAspectRatio: undefined,
             imageContainerWidth: undefined,
             imageContainerHeight: undefined,
-            lockCompass: true
+            lockCompass: true,
+            resizingWindow: false
         };
     },
     computed: {
@@ -380,9 +396,13 @@ export default {
 
         this.imageContainerResizeObserver = new ResizeObserver(this.resizeImageContainer);
         this.imageContainerResizeObserver.observe(this.$refs.focusedImage);
-    },
-    updated() {
-        this.scrollToRight();
+
+        // For adjusting scroll bar size and position when resizing thumbs wrapper
+        this.handleScroll = _.debounce(this.handleScroll, SCROLL_LATENCY);
+        this.handleThumbWindowResizeEnded = _.debounce(this.handleThumbWindowResizeEnded, SCROLL_LATENCY);
+
+        this.thumbWrapperResizeObserver = new ResizeObserver(this.handleThumbWindowResizeStart);
+        this.thumbWrapperResizeObserver.observe(this.$refs.thumbsWrapper);
     },
     beforeDestroy() {
         if (this.unsubscribe) {
@@ -394,6 +414,10 @@ export default {
             this.imageContainerResizeObserver.disconnect();
         }
 
+        if (this.thumbWrapperResizeObserver) {
+            this.thumbWrapperResizeObserver.disconnect();
+        }
+
         if (this.relatedTelemetry.hasRelatedTelemetry) {
             this.relatedTelemetry.destroy();
         }
@@ -561,17 +585,15 @@ export default {
         },
         handleScroll() {
             const thumbsWrapper = this.$refs.thumbsWrapper;
-            if (!thumbsWrapper) {
+            if (!thumbsWrapper || this.resizingWindow) {
                 return;
             }
 
-            const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = thumbsWrapper;
-            const disableScroll = (scrollWidth - scrollLeft) > 2 * clientWidth
-                    || (scrollHeight - scrollTop) > 2 * clientHeight;
+            const { scrollLeft, scrollWidth, clientWidth } = thumbsWrapper;
+            const disableScroll = scrollWidth > Math.ceil(scrollLeft + clientWidth);
             this.autoScroll = !disableScroll;
         },
         paused(state, type) {
-
             this.isPaused = state;
 
             if (type === 'button') {
@@ -584,6 +606,7 @@ export default {
             }
 
             this.autoScroll = true;
+            this.scrollToRight();
         },
         scrollToFocused() {
             const thumbsWrapper = this.$refs.thumbsWrapper;
@@ -600,8 +623,8 @@ export default {
                 });
             }
         },
-        scrollToRight() {
-            if (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll) {
+        scrollToRight(type) {
+            if (type !== 'reset' && (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll)) {
                 return;
             }
 
@@ -610,7 +633,9 @@ export default {
                 return;
             }
 
-            setTimeout(() => this.$refs.thumbsWrapper.scrollLeft = scrollWidth, 0);
+            this.$nextTick(() => {
+                this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
+            });
         },
         setFocusedImage(index, thumbnailClick = false) {
             if (this.isPaused && !thumbnailClick) {
@@ -678,9 +703,9 @@ export default {
             image.imageDownloadName = this.getImageDownloadName(datum);
 
             this.imageHistory.push(image);
-
             if (setFocused) {
                 this.setFocusedImage(this.imageHistory.length - 1);
+                this.scrollToRight();
             }
         },
         getFormatter(key) {
@@ -816,6 +841,24 @@ export default {
                 this.imageContainerHeight = this.$refs.focusedImage.clientHeight;
             }
         },
+        handleThumbWindowResizeStart() {
+            if (!this.autoScroll) {
+                return;
+            }
+
+            // To hide resume button while scrolling
+            this.resizingWindow = true;
+            this.handleThumbWindowResizeEnded();
+        },
+        handleThumbWindowResizeEnded() {
+            if (!this.isPaused) {
+                this.scrollToRight('reset');
+            }
+
+            this.$nextTick(() => {
+                this.resizingWindow = false;
+            });
+        },
         toggleLockCompass() {
             this.lockCompass = !this.lockCompass;
         }

src/plugins/imagery/components/imagery-view-layout.scss

@@ -93,24 +93,43 @@
     }
 
     &__thumbs-wrapper {
-        flex: 0 0 auto;
+        display: flex; // Uses row layout
+
+        &.is-autoscroll-off {
+            background: $colorInteriorBorder;
+            [class*='__auto-scroll-resume-button'] {
+                display: block;
+            }
+        }
+
+        &.is-paused {
+            background: rgba($colorPausedBg, 0.4);
+        }
+    }
+
+    &__thumbs-scroll-area {
+        flex: 0 1 auto;
         display: flex;
         flex-direction: row;
         height: 135px;
         overflow-x: auto;
         overflow-y: hidden;
+        margin-bottom: 1px;
         padding-bottom: $interiorMarginSm;
 
-        &.is-paused {
-            background: rgba($colorPausedBg, 0.4);
-        }
-
         .c-thumb:last-child {
             // Hilite the lastest thumb
             background: $colorBodyFg;
             color: $colorBodyBg;
         }
     }
+
+    &__auto-scroll-resume-button {
+        display: none; // Set to block when __thumbs-wrapper has .is-autoscroll-off
+        flex: 0 0 auto;
+        font-size: 0.8em;
+        margin: $interiorMarginSm;
+    }
 }
 
 /*************************************** THUMBS */
@@ -142,7 +161,7 @@
 
 .l-layout,
 .c-fl {
-    .c-imagery__thumbs-wrapper {
+    .c-imagery__thumbs-scroll-area {
         //  When Imagery is in a layout, hide the thumbs area
         display: none;
     }

src/plugins/imagery/pluginSpec.js

@@ -92,6 +92,7 @@ describe("The Imagery View Layout", () => {
     let resolveFunction;
 
     let openmct;
+    let appHolder;
     let parent;
     let child;
     let imageTelemetry = generateTelemetry(START - TEN_MINUTES, COUNT);
@@ -195,7 +196,7 @@ describe("The Imagery View Layout", () => {
 
     // this setups up the app
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
+        appHolder = document.createElement('div');
         appHolder.style.width = '640px';
         appHolder.style.height = '480px';
 
@@ -209,6 +210,8 @@ describe("The Imagery View Layout", () => {
         child = document.createElement('div');
         parent.appendChild(child);
 
+        // document.querySelector('body').append(parent);
+
         spyOn(window, 'ResizeObserver').and.returnValue({
             observe() {},
             disconnect() {}
@@ -362,5 +365,21 @@ describe("The Imagery View Layout", () => {
                 done();
             });
         });
+        it ('shows an auto scroll button when scroll to left', async () => {
+            // to mock what a scroll would do
+            imageryView._getInstance().$refs.ImageryLayout.autoScroll = false;
+            await Vue.nextTick();
+            let autoScrollButton = parent.querySelector('.c-imagery__auto-scroll-resume-button');
+            expect(autoScrollButton).toBeTruthy();
+        });
+        it ('scrollToRight is called when clicking on auto scroll button', async () => {
+            // use spyon to spy the scroll function
+            spyOn(imageryView._getInstance().$refs.ImageryLayout, 'scrollToRight');
+            imageryView._getInstance().$refs.ImageryLayout.autoScroll = false;
+            await Vue.nextTick();
+            parent.querySelector('.c-imagery__auto-scroll-resume-button').click();
+            expect(imageryView._getInstance().$refs.ImageryLayout.scrollToRight).toHaveBeenCalledWith('reset');
+
+        });
     });
 });

src/plugins/plan/Plan.vue

@@ -1,3 +1,25 @@
+<!--
+ Open MCT, Copyright (c) 2014-2020, 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 ref="plan"
      class="c-plan c-timeline-holder"
@@ -28,7 +50,6 @@ import SwimLane from "@/ui/components/swim-lane/SwimLane.vue";
 import { getValidatedPlan } from "./util";
 import Vue from "vue";
 
-//TODO: UI direction needed for the following property values
 const PADDING = 1;
 const OUTER_TEXT_PADDING = 12;
 const INNER_TEXT_PADDING = 17;
@@ -281,7 +302,9 @@ export default {
                                 exceeds: {
                                     start: this.xScale(this.viewBounds.start) > this.xScale(activity.start),
                                     end: this.xScale(this.viewBounds.end) < this.xScale(activity.end)
-                                }
+                                },
+                                start: activity.start,
+                                end: activity.end
                             },
                             textLines: textLines,
                             textStart: textStart,
@@ -339,6 +362,9 @@ export default {
                 components: {
                     SwimLane
                 },
+                provide: {
+                    openmct: this.openmct
+                },
                 data() {
                     return {
                         heading,
@@ -376,7 +402,6 @@ export default {
                 activityRows.forEach((row) => {
                     const items = activitiesByRow[row];
                     items.forEach(item => {
-                    //TODO: Don't draw the left-border of the rectangle if the activity started before viewBounds.start
                         this.plotActivity(item, parseInt(row, 10), groupSVG);
                     });
                 });
@@ -399,6 +424,9 @@ export default {
                 element.setAttributeNS(null, key, attributes[key]);
             });
         },
+        getNSAttributesForElement(element, attribute) {
+            return element.getAttributeNS(null, attribute);
+        },
         // Experimental for now - unused
         addForeignElement(svgElement, label, x, y) {
             let foreign = document.createElementNS('http://www.w3.org/2000/svg', "foreignObject");
@@ -443,6 +471,10 @@ export default {
                 fill: activity.color
             });
 
+            rectElement.addEventListener('click', (event) => {
+                this.setSelectionForActivity(event.currentTarget, activity, event.metaKey);
+            });
+
             svgElement.appendChild(rectElement);
 
             item.textLines.forEach((line, index) => {
@@ -456,6 +488,9 @@ export default {
 
                 const textNode = document.createTextNode(line);
                 textElement.appendChild(textNode);
+                textElement.addEventListener('click', (event) => {
+                    this.setSelectionForActivity(event.currentTarget, activity, event.metaKey);
+                });
                 svgElement.appendChild(textElement);
             });
             // this.addForeignElement(svgElement, activity.name, item.textStart, item.textY - LINE_HEIGHT);
@@ -482,6 +517,22 @@ export default {
             const cBrightness = ((hR * 299) + (hG * 587) + (hB * 114)) / 1000;
 
             return cBrightness > cThreshold ? "#000000" : "#ffffff";
+        },
+        setSelectionForActivity(element, activity, multiSelect) {
+            this.openmct.selection.select([{
+                element: element,
+                context: {
+                    type: 'activity',
+                    activity: activity
+                }
+            }, {
+                element: this.openmct.layout.$refs.browseObject.$el,
+                context: {
+                    item: this.domainObject,
+                    supportsMultiSelect: true
+                }
+            }], multiSelect);
+            event.stopPropagation();
         }
     }
 };

src/plugins/plan/inspector/ActivityProperty.vue

@@ -0,0 +1,52 @@
+<!--
+ Open MCT, Copyright (c) 2014-2020, 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">
+        {{ label }}
+    </div>
+    <div class="c-inspect-properties__value">
+        {{ value }}
+    </div>
+</li>
+</template>
+
+<script>
+
+export default {
+    props: {
+        label: {
+            type: String,
+            default() {
+                return '';
+            }
+        },
+        value: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    }
+};
+</script>

src/plugins/plan/inspector/PlanActivitiesView.vue

@@ -0,0 +1,206 @@
+<!--
+ 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__properties c-inspect-properties">
+    <plan-activity-view v-for="activity in activities"
+                        :key="activity.id"
+                        :activity="activity"
+                        :heading="heading"
+    />
+</div>
+</template>
+
+<script>
+import PlanActivityView from "./PlanActivityView.vue";
+import { getPreciseDuration } from "utils/duration";
+import uuid from 'uuid';
+
+const propertyLabels = {
+    'start': 'Start DateTime',
+    'end': 'End DateTime',
+    'duration': 'Duration',
+    'earliestStart': 'Earliest Start',
+    'latestEnd': 'Latest End',
+    'gap': 'Gap',
+    'overlap': 'Overlap',
+    'totalTime': 'Total Time'
+};
+
+export default {
+    components: {
+        PlanActivityView
+    },
+    inject: ['openmct', 'selection'],
+    data() {
+        return {
+            name: '',
+            activities: [],
+            heading: ''
+        };
+    },
+    mounted() {
+        this.setFormatters();
+        this.getPlanData(this.selection);
+        this.getActivities();
+        this.openmct.selection.on('change', this.updateSelection);
+        this.openmct.time.on('timeSystem', this.setFormatters);
+    },
+    beforeDestroy() {
+        this.openmct.selection.off('change', this.updateSelection);
+        this.openmct.time.off('timeSystem', this.setFormatters);
+    },
+    methods: {
+        setFormatters() {
+            let timeSystem = this.openmct.time.timeSystem();
+            this.timeFormatter = this.openmct.telemetry.getValueFormatter({
+                format: timeSystem.timeFormat
+            }).formatter;
+        },
+        updateSelection(newSelection) {
+            this.getPlanData(newSelection);
+            this.getActivities();
+        },
+        getPlanData(selection) {
+            this.selectedActivities = [];
+            selection.forEach((selectionItem) => {
+                if (selectionItem[0].context.type === 'activity') {
+                    const activity = selectionItem[0].context.activity;
+                    if (activity) {
+                        this.selectedActivities.push(activity);
+                    }
+                }
+            });
+        },
+        getActivities() {
+            if (this.selectedActivities.length <= 1) {
+                this.heading = 'Time';
+                this.setSingleActivityProperties();
+            } else {
+                this.heading = 'Convex Hull';
+                this.setMultipleActivityProperties();
+            }
+        },
+        setSingleActivityProperties() {
+            this.activities.splice(0);
+            this.selectedActivities.forEach((selectedActivity, index) => {
+                const activity = {
+                    id: uuid(),
+                    start: {
+                        label: propertyLabels.start,
+                        value: this.formatTime(selectedActivity.start)
+                    },
+                    end: {
+                        label: propertyLabels.end,
+                        value: this.formatTime(selectedActivity.end)
+                    },
+                    duration: {
+                        label: propertyLabels.duration,
+                        value: this.formatDuration(selectedActivity.end - selectedActivity.start)
+                    }
+                };
+                this.$set(this.activities, index, activity);
+            });
+        },
+        sortFn(a, b) {
+            const numA = parseInt(a.start, 10);
+            const numB = parseInt(b.start, 10);
+            if (numA > numB) {
+                return 1;
+            }
+
+            if (numA < numB) {
+                return -1;
+            }
+
+            return 0;
+        },
+        setMultipleActivityProperties() {
+            this.activities.splice(0);
+
+            let earliestStart;
+            let latestEnd;
+            let gap;
+            let overlap;
+
+            //Sort by start time
+            let selectedActivities = this.selectedActivities.sort(this.sortFn);
+            selectedActivities.forEach((selectedActivity, index) => {
+                if (selectedActivities.length === 2 && index > 0) {
+                    const previous = selectedActivities[index - 1];
+                    //they're on different rows so there must be overlap
+                    if (previous.end > selectedActivity.start) {
+                        overlap = previous.end - selectedActivity.start;
+                    } else if (previous.end < selectedActivity.start) {
+                        gap = selectedActivity.start - previous.end;
+                    }
+                }
+
+                if (index > 0) {
+                    earliestStart = Math.min(earliestStart, selectedActivity.start);
+                    latestEnd = Math.max(latestEnd, selectedActivity.end);
+                } else {
+                    earliestStart = selectedActivity.start;
+                    latestEnd = selectedActivity.end;
+                }
+            });
+            let totalTime = latestEnd - earliestStart;
+
+            const activity = {
+                id: uuid(),
+                'earliestStart': {
+                    label: propertyLabels.earliestStart,
+                    value: this.formatTime(earliestStart)
+                },
+                'latestEnd': {
+                    label: propertyLabels.latestEnd,
+                    value: this.formatTime(latestEnd)
+                }
+            };
+
+            if (gap) {
+                activity.gap = {
+                    label: propertyLabels.gap,
+                    value: this.formatDuration(gap)
+                };
+            } else if (overlap) {
+                activity.overlap = {
+                    label: propertyLabels.overlap,
+                    value: this.formatDuration(overlap)
+                };
+            }
+
+            activity.totalTime = {
+                label: propertyLabels.totalTime,
+                value: this.formatDuration(totalTime)
+            };
+
+            this.$set(this.activities, 0, activity);
+        },
+        formatDuration(duration) {
+            return getPreciseDuration(duration);
+        },
+        formatTime(time) {
+            return this.timeFormatter.format(time);
+        }
+    }
+};
+</script>

src/plugins/plan/inspector/PlanActivityView.vue

@@ -0,0 +1,84 @@
+<!--
+ Open MCT, Copyright (c) 2014-2020, 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="timeProperties.length"
+     class="u-contents"
+>
+    <div class="c-inspect-properties__header">
+        {{ heading }}
+    </div>
+    <ul v-for="timeProperty in timeProperties"
+        :key="timeProperty.id"
+        class="c-inspect-properties__section"
+    >
+        <activity-property :label="timeProperty.label"
+                           :value="timeProperty.value"
+        />
+    </ul>
+</div>
+</template>
+
+<script>
+import ActivityProperty from './ActivityProperty.vue';
+import uuid from 'uuid';
+
+export default {
+    components: {
+        ActivityProperty
+    },
+    props: {
+        activity: {
+            type: Object,
+            required: true
+        },
+        heading: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            timeProperties: []
+        };
+    },
+    mounted() {
+        this.setProperties();
+    },
+    methods: {
+        setProperties() {
+            Object.keys(this.activity).forEach((key) => {
+                if (this.activity[key].label) {
+                    const label = this.activity[key].label;
+                    const value = String(this.activity[key].value);
+
+                    this.$set(this.timeProperties, this.timeProperties.length, {
+                        id: uuid(),
+                        label,
+                        value
+                    });
+                }
+            });
+        }
+    }
+};
+</script>

src/plugins/plan/inspector/PlanInspectorViewProvider.js

@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+import PlanActivitiesView from "./PlanActivitiesView.vue";
+import Vue from 'vue';
+
+export default function PlanInspectorViewProvider(openmct) {
+    return {
+        key: 'plan-inspector',
+        name: 'Plan Inspector View',
+        canView: function (selection) {
+            if (selection.length === 0 || selection[0].length === 0) {
+                return false;
+            }
+
+            let context = selection[0][0].context;
+
+            return context
+                && context.type === 'activity';
+        },
+        view: function (selection) {
+            let component;
+
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            PlanActivitiesView: PlanActivitiesView
+                        },
+                        provide: {
+                            openmct,
+                            selection: selection
+                        },
+                        template: '<plan-activities-view></plan-activities-view>'
+                    });
+                },
+                destroy: function () {
+                    if (component) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}

src/plugins/plan/plan.scss

@@ -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.
+ *****************************************************************************/
+
 .c-plan {
   svg {
     text-rendering: geometricPrecision;

src/plugins/plan/plugin.js

@@ -21,6 +21,7 @@
  *****************************************************************************/
 
 import PlanViewProvider from './PlanViewProvider';
+import PlanInspectorViewProvider from "./inspector/PlanInspectorViewProvider";
 
 export default function () {
     return function install(openmct) {
@@ -44,6 +45,7 @@ export default function () {
             }
         });
         openmct.objectViews.addProvider(new PlanViewProvider(openmct));
+        openmct.inspectorViews.addProvider(new PlanInspectorViewProvider(openmct));
     };
 }
 

src/plugins/plan/util.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 function getValidatedPlan(domainObject) {
     let body = domainObject.selectFile.body;
     let json = {};

src/plugins/plot/MctPlot.vue

@@ -74,7 +74,9 @@
                 </div>
 
                 <div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover">
-                    <div class="c-button-set c-button-set--strip-h">
+                    <div v-if="!options.compact"
+                         class="c-button-set c-button-set--strip-h js-zoom"
+                    >
                         <button class="c-button icon-minus"
                                 title="Zoom out"
                                 @click="zoom('out', 0.2)"
@@ -86,8 +88,8 @@
                         >
                         </button>
                     </div>
-                    <div v-if="plotHistory.length"
-                         class="c-button-set c-button-set--strip-h"
+                    <div v-if="plotHistory.length && !options.compact"
+                         class="c-button-set c-button-set--strip-h js-pan"
                     >
                         <button class="c-button icon-arrow-left"
                                 title="Restore previous pan/zoom"
@@ -100,8 +102,8 @@
                         >
                         </button>
                     </div>
-                    <div v-if="isRealTime"
-                         class="c-button-set c-button-set--strip-h"
+                    <div v-if="isRealTime && !options.compact"
+                         class="c-button-set c-button-set--strip-h js-pause"
                     >
                         <button v-if="!isFrozen"
                                 class="c-button icon-pause"
@@ -493,10 +495,12 @@ export default {
 
             this.canvas = this.$refs.chartContainer.querySelectorAll('canvas')[1];
 
-            this.listenTo(this.canvas, 'mousemove', this.trackMousePosition, this);
-            this.listenTo(this.canvas, 'mouseleave', this.untrackMousePosition, this);
-            this.listenTo(this.canvas, 'mousedown', this.onMouseDown, this);
-            this.listenTo(this.canvas, 'wheel', this.wheelZoom, this);
+            if (!this.options.compact) {
+                this.listenTo(this.canvas, 'mousemove', this.trackMousePosition, this);
+                this.listenTo(this.canvas, 'mouseleave', this.untrackMousePosition, this);
+                this.listenTo(this.canvas, 'mousedown', this.onMouseDown, this);
+                this.listenTo(this.canvas, 'wheel', this.wheelZoom, this);
+            }
         },
 
         initialize() {
@@ -514,12 +518,7 @@ export default {
             this.chartElementBounds = undefined;
             this.tickUpdate = false;
 
-            this.canvas = this.$refs.chartContainer.querySelectorAll('canvas')[1];
-
-            this.listenTo(this.canvas, 'mousemove', this.trackMousePosition, this);
-            this.listenTo(this.canvas, 'mouseleave', this.untrackMousePosition, this);
-            this.listenTo(this.canvas, 'mousedown', this.onMouseDown, this);
-            this.listenTo(this.canvas, 'wheel', this.wheelZoom, this);
+            this.initCanvas();
 
             this.config.yAxisLabel = this.config.yAxis.get('label');
 

src/plugins/plot/pluginSpec.js

@@ -403,6 +403,25 @@ describe("the plugin", function () {
 
             });
         });
+
+        describe('controls in time strip view', () => {
+
+            it('zoom controls are hidden', () => {
+                let pauseEl = element.querySelectorAll(".c-button-set .js-zoom");
+                expect(pauseEl.length).toBe(0);
+            });
+
+            it('pan controls are hidden', () => {
+                let pauseEl = element.querySelectorAll(".c-button-set .js-pan");
+                expect(pauseEl.length).toBe(0);
+            });
+
+            it('pause/play controls are hidden', () => {
+                let pauseEl = element.querySelectorAll(".c-button-set .js-pause");
+                expect(pauseEl.length).toBe(0);
+            });
+
+        });
     });
 
     describe("The stacked plot view", () => {

src/plugins/plugins.js

@@ -65,7 +65,8 @@ define([
     './interceptors/plugin',
     './performanceIndicator/plugin',
     './CouchDBSearchFolder/plugin',
-    './timeline/plugin'
+    './timeline/plugin',
+    './codeWalkthrough/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -111,7 +112,8 @@ define([
     ObjectInterceptors,
     PerformanceIndicator,
     CouchDBSearchFolder,
-    Timeline
+    Timeline,
+    CodeWalkthrough
 ) {
     const bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -212,6 +214,7 @@ define([
     plugins.PerformanceIndicator = PerformanceIndicator.default;
     plugins.CouchDBSearchFolder = CouchDBSearchFolder.default;
     plugins.Timeline = Timeline.default;
+    plugins.CodeWalkthrough = CodeWalkthrough.default;
 
     return plugins;
 });

src/plugins/timeConductor/ConductorHistory.vue

@@ -39,9 +39,8 @@ const DEFAULT_DURATION_FORMATTER = 'duration';
 const LOCAL_STORAGE_HISTORY_KEY_FIXED = 'tcHistory';
 const LOCAL_STORAGE_HISTORY_KEY_REALTIME = 'tcHistoryRealtime';
 const DEFAULT_RECORDS = 10;
-const ONE_MINUTE = 60 * 1000;
-const ONE_HOUR = ONE_MINUTE * 60;
-const ONE_DAY = ONE_HOUR * 24;
+
+import { getDuration } from "utils/duration";
 
 export default {
     inject: ['openmct', 'configuration'],
@@ -143,7 +142,7 @@ export default {
                 let description = `${startTime} - ${this.formatTime(timespan.end)}`;
 
                 if (this.timeSystem.isUTCBased && !this.openmct.time.clock()) {
-                    name = `${startTime} ${this.getDuration(timespan.end - timespan.start)}`;
+                    name = `${startTime} ${getDuration(timespan.end - timespan.start)}`;
                 } else {
                     name = description;
                 }
@@ -176,41 +175,6 @@ export default {
                 };
             });
         },
-        getDuration(numericDuration) {
-            let result;
-            let age;
-
-            if (numericDuration > ONE_DAY - 1) {
-                age = this.normalizeAge((numericDuration / ONE_DAY).toFixed(2));
-                result = `+ ${age} day`;
-
-                if (age !== 1) {
-                    result += 's';
-                }
-            } else if (numericDuration > ONE_HOUR - 1) {
-                age = this.normalizeAge((numericDuration / ONE_HOUR).toFixed(2));
-                result = `+ ${age} hour`;
-
-                if (age !== 1) {
-                    result += 's';
-                }
-            } else {
-                age = this.normalizeAge((numericDuration / ONE_MINUTE).toFixed(2));
-                result = `+ ${age} min`;
-
-                if (age !== 1) {
-                    result += 's';
-                }
-            }
-
-            return result;
-        },
-        normalizeAge(num) {
-            const hundredtized = num * 100;
-            const isWhole = hundredtized % 100 === 0;
-
-            return isWhole ? hundredtized / 100 : num;
-        },
         getHistoryFromLocalStorage() {
             const localStorageHistory = localStorage.getItem(this.storageKey);
             const history = localStorageHistory ? JSON.parse(localStorageHistory) : undefined;

src/plugins/timeConductor/timePopup.vue

@@ -3,6 +3,8 @@
     class="pr-tc-input-menu"
     @keydown.enter.prevent
     @keyup.enter.prevent="submit"
+    @keydown.esc.prevent
+    @keyup.esc.prevent="hide"
     @click.stop
 >
     <div class="pr-time-label__hrs">Hrs</div>

src/styles/_about.scss

@@ -26,6 +26,7 @@
     background-repeat: no-repeat;
     background-size: cover;
     background-image: url('../ui/layout/assets/images/bg-splash.jpg');
+    margin-top: 30px; // Don't overlap with close "X" button
 
     &:before,
     &:after {
@@ -95,10 +96,6 @@
     &--licenses {
         padding: 0 10%;
         .c-license {
-            &__text {
-                color: pushBack($overlayColorFg, 20%);
-            }
-
             + .c-license {
                 border-top: 1px solid $colorInteriorBorder;
                 margin-top: 2em;
@@ -111,7 +108,7 @@
     }
 
     em {
-        color: pushBack($overlayColorFg, 20%);
+        color: pushBack($colorBodyFg, 20%);
     }
 
     h1, h2, h3 {

src/styles/_constants-espresso.scss

@@ -290,12 +290,7 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
-$overlayColorBg: $colorMenuBg;
-$overlayColorFg: $colorMenuFg;
-$colorOvrBtnBg: pullForward($overlayColorBg, 20%);
-$colorOvrBtnFg: #fff;
-$overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property
+$overlayCr: $interiorMargin;
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;

src/styles/_constants-maelstrom.scss

@@ -294,12 +294,7 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
-$overlayColorBg: $colorMenuBg;
-$overlayColorFg: $colorMenuFg;
-$colorOvrBtnBg: pullForward($overlayColorBg, 20%);
-$colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;

src/styles/_constants-snow.scss

@@ -290,12 +290,7 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
-$overlayColorBg: $colorMenuBg;
-$overlayColorFg: $colorMenuFg;
-$colorOvrBtnBg: pullForward($overlayColorBg, 40%);
-$colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1); // Applied in a filter: property
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;

src/styles/_constants.scss

@@ -40,7 +40,8 @@ $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
 $menuLineH: 1.5rem;
 $treeItemIndent: 16px;
 $treeTypeIconW: 18px;
-$overlayOuterMarginFullscreen: 0%;
+$overlayOuterMarginFullscreen: 0;
+$overlayOuterMarginLarge: 10px;
 $overlayOuterMarginDialog: 20%;
 $overlayInnerMargin: 25px;
 $mainViewPad: 0px;

src/ui/inspector/InspectorStylesSpec.js

@@ -0,0 +1,218 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, 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.
+ *****************************************************************************/
+
+import {
+    createOpenMct,
+    resetApplicationState
+} from 'utils/testing';
+import {
+    mockLocalStorage
+} from 'utils/testing/mockLocalStorage';
+import {
+    mockTelemetryTableSelection,
+    mockMultiSelectionSameStyles,
+    mockMultiSelectionMixedStyles,
+    mockMultiSelectionNonSpecificStyles,
+    mockStyle
+} from './InspectorStylesSpecMocks';
+import Vue from 'vue';
+import StylesView from '@/plugins/condition/components/inspector/StylesView.vue';
+import SavedStylesView from '@/ui/inspector/styles/SavedStylesView.vue';
+import stylesManager from '@/ui/inspector/styles/StylesManager';
+
+describe("the inspector", () => {
+    let openmct;
+    let selection;
+    let stylesViewComponent;
+    let savedStylesViewComponent;
+
+    mockLocalStorage();
+
+    beforeEach((done) => {
+        openmct = createOpenMct();
+        openmct.on('start', done);
+        openmct.startHeadless();
+    });
+
+    afterEach(() => {
+        return resetApplicationState(openmct);
+    });
+
+    it("should allow a style to be saved", () => {
+        selection = mockTelemetryTableSelection;
+        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+
+        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(0);
+
+        stylesViewComponent.$children[0].saveStyle(mockStyle);
+
+        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(1);
+    });
+
+    it("should display all saved styles", () => {
+        selection = mockTelemetryTableSelection;
+        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+
+        expect(savedStylesViewComponent.$children[0].$children.length).toBe(0);
+        stylesViewComponent.$children[0].saveStyle(mockStyle);
+
+        stylesViewComponent.$nextTick().then(() => {
+            expect(savedStylesViewComponent.$children[0].$children.length).toBe(1);
+        });
+    });
+
+    it("should allow a saved style to be applied", () => {
+        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
+
+        selection = mockTelemetryTableSelection;
+        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+
+        stylesViewComponent.$children[0].saveStyle(mockStyle);
+
+        stylesViewComponent.$nextTick().then(() => {
+            const styleSelectorComponent = savedStylesViewComponent.$children[0].$children[0];
+
+            styleSelectorComponent.selectStyle();
+
+            savedStylesViewComponent.$nextTick().then(() => {
+                const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
+                const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
+                const styles = styleEditorComponent.$children.filter(component => component.options.value === mockStyle.color);
+
+                expect(styles.length).toBe(3);
+            });
+        });
+    });
+
+    it("should allow a saved style to be deleted", () => {
+        selection = mockTelemetryTableSelection;
+        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+
+        stylesViewComponent.$children[0].saveStyle(mockStyle);
+
+        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(1);
+
+        savedStylesViewComponent.$children[0].deleteStyle(0);
+
+        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(0);
+    });
+
+    it("should prevent a style from being saved when the number of saved styles is at the limit", () => {
+        spyOn(SavedStylesView.methods, 'showLimitReachedDialog').and.callThrough();
+
+        selection = mockTelemetryTableSelection;
+        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+
+        for (let i = 1; i <= 20; i++) {
+            stylesViewComponent.$children[0].saveStyle(mockStyle);
+        }
+
+        expect(SavedStylesView.methods.showLimitReachedDialog).not.toHaveBeenCalled();
+        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(20);
+
+        stylesViewComponent.$children[0].saveStyle(mockStyle);
+
+        expect(SavedStylesView.methods.showLimitReachedDialog).toHaveBeenCalled();
+        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(20);
+    });
+
+    it("should allow styles from multi-selections to be saved", () => {
+        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
+
+        selection = mockMultiSelectionSameStyles;
+        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+
+        stylesViewComponent.$nextTick().then(() => {
+            const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
+            const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
+            const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;
+            const saveStyleButton = styleEditorComponent.$children[saveStyleButtonIndex];
+
+            expect(saveStyleButton.$listeners.click).not.toBe(undefined);
+
+            saveStyleButton.$listeners.click();
+
+            expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(1);
+        });
+    });
+
+    it("should prevent mixed styles from being saved", () => {
+        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
+
+        selection = mockMultiSelectionMixedStyles;
+        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+
+        stylesViewComponent.$nextTick().then(() => {
+            const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
+            const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
+            const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;
+            const saveStyleButton = styleEditorComponent.$children[saveStyleButtonIndex];
+
+            expect(saveStyleButton.$listeners.click).toBe(undefined);
+        });
+    });
+
+    it("should prevent non-specific styles from being saved", () => {
+        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
+
+        selection = mockMultiSelectionNonSpecificStyles;
+        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+
+        stylesViewComponent.$nextTick().then(() => {
+            const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
+            const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
+            const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;
+            const saveStyleButton = styleEditorComponent.$children[saveStyleButtonIndex];
+
+            expect(saveStyleButton.$listeners.click).toBe(undefined);
+        });
+    });
+
+    function createViewComponent(component) {
+        const element = document.createElement('div');
+        const child = document.createElement('div');
+        element.appendChild(child);
+
+        const config = {
+            provide: {
+                openmct,
+                selection,
+                stylesManager
+            },
+            el: element,
+            components: {},
+            template: `<${component.name} />`
+        };
+
+        config.components[component.name] = component;
+
+        return new Vue(config).$mount();
+    }
+});

src/ui/inspector/InspectorStylesSpecMocks.js

@@ -0,0 +1,204 @@
+export const mockTelemetryTableSelection = [
+    [{
+        context: {
+            item: {
+                configuration: {},
+                type: 'table',
+                identifier: {
+                    key: 'mock-telemetry-table-1',
+                    namespace: ''
+                }
+            }
+        }
+    }]
+];
+
+export const mockStyle = {
+    backgroundColor: '#ff0000',
+    border: '#ff0000',
+    color: '#ff0000'
+};
+
+const mockDisplayLayoutPath = {
+    context: {
+        item: {
+            identifier: {
+                key: "6af3200d-928b-4ff0-8ed0-b94a0e6752d1",
+                namespace: ""
+            },
+            type: "layout",
+            configuration: {
+                items: [
+                    {
+                        id: "dd3202e5-40d0-4112-8951-00f0f1ed6a29",
+                        type: "text-view",
+                        fontSize: "default",
+                        font: "default"
+                    },
+                    {
+                        id: "b522d636-90b2-4f5f-9588-2a0345c30f87",
+                        type: "text-view",
+                        fontSize: "default",
+                        font: "default"
+                    },
+                    {
+                        id: "537b7596-b442-44fe-b464-07f56bdc67c8",
+                        type: "text-view",
+                        fontSize: "default",
+                        font: "default"
+                    },
+                    {
+                        id: "3f17162f-a822-4e39-8332-6aa39b79d022",
+                        type: "text-view",
+                        fontSize: "default",
+                        font: "default"
+                    },
+                    {
+                        id: "c1c5acd8-a14b-450c-8c94-ce0075dd9912",
+                        type: "text-view",
+                        fontSize: "8",
+                        font: "monospace-bold"
+                    }
+                ],
+                objectStyles: {
+                    "dd3202e5-40d0-4112-8951-00f0f1ed6a29": {
+                        staticStyle: {
+                            style: {
+                                backgroundColor: "#0000ff",
+                                border: "1px solid #0000ff"
+                            }
+                        }
+                    },
+                    "b522d636-90b2-4f5f-9588-2a0345c30f87": {
+                        staticStyle: {
+                            style: {
+                                backgroundColor: "#ff0000",
+                                border: "1px solid #ff0000"
+                            }
+                        }
+                    },
+                    "537b7596-b442-44fe-b464-07f56bdc67c8": {
+                        staticStyle: {
+                            style: {
+                                backgroundColor: "#ff0000",
+                                border: "1px solid #ff0000"
+                            }
+                        }
+                    },
+                    "3f17162f-a822-4e39-8332-6aa39b79d022": {
+                        staticStyle: {
+                            style: {
+                                backgroundColor: "#0000ff",
+                                border: "1px solid #0000ff",
+                                color: "#0000ff"
+                            }
+                        }
+                    },
+                    "c1c5acd8-a14b-450c-8c94-ce0075dd9912": {
+                        staticStyle: {
+                            style: {
+                                backgroundColor: "#0000ff",
+                                border: "1px solid #0000ff",
+                                color: "#0000ff"
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        supportsMultiSelect: true
+    }
+};
+
+const mockTextBox1Path = {
+    context: {
+        index: 0,
+        layoutItem: {
+            id: "dd3202e5-40d0-4112-8951-00f0f1ed6a29",
+            type: "text-view",
+            fontSize: "default",
+            font: "default"
+        }
+    }
+};
+
+const mockTextBox2Path = {
+    context: {
+        index: 1,
+        layoutItem: {
+            id: "b522d636-90b2-4f5f-9588-2a0345c30f87",
+            type: "text-view",
+            fontSize: "default",
+            font: "default"
+        }
+    }
+};
+
+const mockTextBox3Path = {
+    context: {
+        index: 2,
+        layoutItem: {
+            id: "537b7596-b442-44fe-b464-07f56bdc67c8",
+            type: "text-view",
+            fontSize: "default",
+            font: "default"
+        }
+    }
+};
+
+const mockTextBox4Path = {
+    context: {
+        index: 3,
+        layoutItem: {
+            id: "3f17162f-a822-4e39-8332-6aa39b79d022",
+            type: "text-view",
+            fontSize: "default",
+            font: "default"
+        }
+    }
+};
+
+const mockTextBox5Path = {
+    context: {
+        index: 4,
+        layoutItem: {
+            id: "c1c5acd8-a14b-450c-8c94-ce0075dd9912",
+            type: "text-view",
+            fontSize: "8",
+            font: "default-bold"
+        }
+    }
+};
+
+export const mockMultiSelectionSameStyles = [
+    [
+        mockTextBox2Path,
+        mockDisplayLayoutPath
+    ],
+    [
+        mockTextBox3Path,
+        mockDisplayLayoutPath
+    ]
+];
+
+export const mockMultiSelectionMixedStyles = [
+    [
+        mockTextBox1Path,
+        mockDisplayLayoutPath
+    ],
+    [
+        mockTextBox2Path,
+        mockDisplayLayoutPath
+    ]
+];
+
+export const mockMultiSelectionNonSpecificStyles = [
+    [
+        mockTextBox4Path,
+        mockDisplayLayoutPath
+    ],
+    [
+        mockTextBox5Path,
+        mockDisplayLayoutPath
+    ]
+];

src/ui/inspector/ObjectName.vue

@@ -20,7 +20,12 @@
             <span class="c-object-label__type-icon"
                   :class="typeCssClass"
             ></span>
-            <span class="c-object-label__name">Layout Object</span>
+            <span v-if="!activity"
+                  class="c-object-label__name"
+            >Layout Object</span>
+            <span v-else
+                  class="c-object-label__name"
+            >{{ activity.name }}</span>
         </div>
     </div>
     <div v-if="multiSelect"
@@ -37,6 +42,7 @@ export default {
     data() {
         return {
             domainObject: {},
+            activity: undefined,
             keyString: undefined,
             multiSelect: false,
             itemsSelected: 0,
@@ -51,6 +57,10 @@ export default {
             return this.openmct.types.get(this.item.type);
         },
         typeCssClass() {
+            if (this.activity) {
+                return 'icon-activity';
+            }
+
             if (this.type.definition.cssClass === undefined) {
                 return 'icon-object';
             }
@@ -97,7 +107,7 @@ export default {
             } else {
                 this.multiSelect = false;
                 this.domainObject = selection[0][0].context.item;
-
+                this.activity = selection[0][0].context.activity;
                 if (this.domainObject) {
                     this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
                     this.status = this.openmct.status.get(this.keyString);

src/ui/inspector/Properties.vue

@@ -1,5 +1,7 @@
 <template>
-<div class="c-inspector__properties c-inspect-properties">
+<div v-if="!activity"
+     class="c-inspector__properties c-inspect-properties"
+>
     <div class="c-inspect-properties__header">
         Details
     </div>
@@ -81,6 +83,7 @@ export default {
     data() {
         return {
             domainObject: {},
+            activity: undefined,
             multiSelect: false
         };
     },
@@ -157,6 +160,7 @@ export default {
             } else {
                 this.multiSelect = false;
                 this.domainObject = selection[0][0].context.item;
+                this.activity = selection[0][0].context.activity;
             }
         },
         formatTime(unixTime) {

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;
         }

src/utils/duration.js

@@ -0,0 +1,85 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+const ONE_MINUTE = 60 * 1000;
+const ONE_HOUR = ONE_MINUTE * 60;
+const ONE_DAY = ONE_HOUR * 24;
+
+function normalizeAge(num) {
+    const hundredtized = num * 100;
+    const isWhole = hundredtized % 100 === 0;
+
+    return isWhole ? hundredtized / 100 : num;
+}
+
+function toDoubleDigits(num) {
+    if (num >= 10) {
+        return num;
+    } else {
+        return `0${num}`;
+    }
+}
+
+export function getDuration(numericDuration) {
+    let result;
+    let age;
+
+    if (numericDuration > ONE_DAY - 1) {
+        age = normalizeAge((numericDuration / ONE_DAY)).toFixed(2);
+        result = `+ ${age} day`;
+
+        if (age !== 1) {
+            result += 's';
+        }
+    } else if (numericDuration > ONE_HOUR - 1) {
+        age = normalizeAge((numericDuration / ONE_HOUR).toFixed(2));
+        result = `+ ${age} hour`;
+
+        if (age !== 1) {
+            result += 's';
+        }
+    } else {
+        age = normalizeAge((numericDuration / ONE_MINUTE).toFixed(2));
+        result = `+ ${age} min`;
+
+        if (age !== 1) {
+            result += 's';
+        }
+    }
+
+    return result;
+}
+
+export function getPreciseDuration(numericDuration) {
+    let result;
+
+    const days = toDoubleDigits(Math.floor((numericDuration) / (24 * 60 * 60 * 1000)));
+    let remaining = (numericDuration) % (24 * 60 * 60 * 1000);
+    const hours = toDoubleDigits(Math.floor((remaining) / (60 * 60 * 1000)));
+    remaining = (remaining) % (60 * 60 * 1000);
+    const minutes = toDoubleDigits(Math.floor((remaining) / (60 * 1000)));
+    remaining = (remaining) % (60 * 1000);
+    const seconds = toDoubleDigits(Math.floor((remaining) / (1000)));
+    result = `${days}:${hours}:${minutes}:${seconds}`;
+
+    return result;
+}

src/utils/testing.js

@@ -21,6 +21,7 @@
  *****************************************************************************/
 
 import MCT from 'MCT';
+
 let nativeFunctions = [];
 let mockObjects = setMockObjects();
 

src/utils/testing/mockLocalStorage.js

@@ -0,0 +1,33 @@
+export function mockLocalStorage() {
+    let store;
+
+    beforeEach(() => {
+        spyOn(Storage.prototype, 'getItem').and.callFake(getItem);
+        spyOn(Storage.prototype, 'setItem').and.callFake(setItem);
+        spyOn(Storage.prototype, 'removeItem').and.callFake(removeItem);
+        spyOn(Storage.prototype, 'clear').and.callFake(clear);
+
+        store = {};
+
+        function getItem(key) {
+            return store[key];
+        }
+
+        function setItem(key, value) {
+            store[key] = typeof value === 'string' ? value : JSON.stringify(value);
+        }
+
+        function removeItem(key) {
+            store[key] = undefined;
+            delete store[key];
+        }
+
+        function clear() {
+            store = {};
+        }
+    });
+
+    afterEach(() => {
+        store = undefined;
+    });
+}