Fixes resizing handler error - adds null check

* clock and clock indicator installed as a plugin
* { enableIndicator: true } to install indicator
* Vue for views

example/generator/GeneratorMetadataProvider.js

@@ -28,15 +28,6 @@ define([
                         domain: 2
                     }
                 },
-                {
-                    key: "cos",
-                    name: "Cosine",
-                    unit: "deg",
-                    formatString: '%0.2f',
-                    hints: {
-                        domain: 3
-                    }
-                },
                 // Need to enable "LocalTimeSystem" plugin to make use of this
                 // {
                 //     key: "local",
@@ -118,100 +109,6 @@ define([
                     }
                 }
             ]
-        },
-        'example.spectral-generator': {
-            values: [
-                {
-                    key: "name",
-                    name: "Name",
-                    format: "string"
-                },
-                {
-                    key: "utc",
-                    name: "Time",
-                    format: "utc",
-                    hints: {
-                        domain: 1
-                    }
-                },
-                {
-                    key: "wavelength",
-                    name: "Wavelength",
-                    unit: "Hz",
-                    formatString: '%0.2f',
-                    hints: {
-                        domain: 2,
-                        spectralAttribute: true
-                    }
-                },
-                {
-                    key: "cos",
-                    name: "Cosine",
-                    unit: "deg",
-                    formatString: '%0.2f',
-                    hints: {
-                        range: 2,
-                        spectralAttribute: true
-                    }
-                }
-            ]
-        },
-        'example.spectral-aggregate-generator': {
-            values: [
-                {
-                    key: "name",
-                    name: "Name",
-                    format: "string"
-                },
-                {
-                    key: "utc",
-                    name: "Time",
-                    format: "utc",
-                    hints: {
-                        domain: 1
-                    }
-                },
-                {
-                    key: "ch1",
-                    name: "Channel 1",
-                    format: "string",
-                    hints: {
-                        range: 1
-                    }
-                },
-                {
-                    key: "ch2",
-                    name: "Channel 2",
-                    format: "string",
-                    hints: {
-                        range: 2
-                    }
-                },
-                {
-                    key: "ch3",
-                    name: "Channel 3",
-                    format: "string",
-                    hints: {
-                        range: 3
-                    }
-                },
-                {
-                    key: "ch4",
-                    name: "Channel 4",
-                    format: "string",
-                    hints: {
-                        range: 4
-                    }
-                },
-                {
-                    key: "ch5",
-                    name: "Channel 5",
-                    format: "string",
-                    hints: {
-                        range: 5
-                    }
-                }
-            ]
         }
     };
 

example/generator/SpectralAggregateGeneratorProvider.js

@@ -1,86 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-define([
-
-], function (
-
-) {
-
-    function SpectralAggregateGeneratorProvider() {
-
-    }
-
-    function pointForTimestamp(timestamp, count, name) {
-        return {
-            name: name,
-            utc: String(Math.floor(timestamp / count) * count),
-            ch1: String(Math.floor(timestamp / count) % 1),
-            ch2: String(Math.floor(timestamp / count) % 2),
-            ch3: String(Math.floor(timestamp / count) % 3),
-            ch4: String(Math.floor(timestamp / count) % 4),
-            ch5: String(Math.floor(timestamp / count) % 5)
-        };
-    }
-
-    SpectralAggregateGeneratorProvider.prototype.supportsSubscribe = function (domainObject) {
-        return domainObject.type === 'example.spectral-aggregate-generator';
-    };
-
-    SpectralAggregateGeneratorProvider.prototype.subscribe = function (domainObject, callback) {
-        var count = 5000;
-
-        var interval = setInterval(function () {
-            var now = Date.now();
-            var datum = pointForTimestamp(now, count, domainObject.name);
-            callback(datum);
-        }, count);
-
-        return function () {
-            clearInterval(interval);
-        };
-    };
-
-    SpectralAggregateGeneratorProvider.prototype.supportsRequest = function (domainObject, options) {
-        return domainObject.type === 'example.spectral-aggregate-generator';
-    };
-
-    SpectralAggregateGeneratorProvider.prototype.request = function (domainObject, options) {
-        var start = options.start;
-        var end = Math.min(Date.now(), options.end); // no future values
-        var count = 5000;
-        if (options.strategy === 'latest' || options.size === 1) {
-            start = end;
-        }
-
-        var data = [];
-        while (start <= end && data.length < 5000) {
-            data.push(pointForTimestamp(start, count, domainObject.name));
-            start += count;
-        }
-
-        return Promise.resolve(data);
-    };
-
-    return SpectralAggregateGeneratorProvider;
-
-});

example/generator/SpectralGeneratorProvider.js

@@ -1,104 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-define([
-    './WorkerInterface'
-], function (
-    WorkerInterface
-) {
-
-    var REQUEST_DEFAULTS = {
-        amplitude: 1,
-        wavelength: 1,
-        period: 10,
-        offset: 0,
-        dataRateInHz: 1,
-        randomness: 0,
-        phase: 0
-    };
-
-    function SpectralGeneratorProvider() {
-        this.workerInterface = new WorkerInterface();
-    }
-
-    SpectralGeneratorProvider.prototype.canProvideTelemetry = function (domainObject) {
-        return domainObject.type === 'example.spectral-generator';
-    };
-
-    SpectralGeneratorProvider.prototype.supportsRequest =
-        SpectralGeneratorProvider.prototype.supportsSubscribe =
-            SpectralGeneratorProvider.prototype.canProvideTelemetry;
-
-    SpectralGeneratorProvider.prototype.makeWorkerRequest = function (domainObject, request) {
-        var props = [
-            'amplitude',
-            'wavelength',
-            'period',
-            'offset',
-            'dataRateInHz',
-            'phase',
-            'randomness'
-        ];
-
-        request = request || {};
-
-        var workerRequest = {};
-
-        props.forEach(function (prop) {
-            if (domainObject.telemetry && Object.prototype.hasOwnProperty.call(domainObject.telemetry, prop)) {
-                workerRequest[prop] = domainObject.telemetry[prop];
-            }
-
-            if (request && Object.prototype.hasOwnProperty.call(request, prop)) {
-                workerRequest[prop] = request[prop];
-            }
-
-            if (!Object.prototype.hasOwnProperty.call(workerRequest, prop)) {
-                workerRequest[prop] = REQUEST_DEFAULTS[prop];
-            }
-
-            workerRequest[prop] = Number(workerRequest[prop]);
-        });
-
-        workerRequest.name = domainObject.name;
-
-        return workerRequest;
-    };
-
-    SpectralGeneratorProvider.prototype.request = function (domainObject, request) {
-        var workerRequest = this.makeWorkerRequest(domainObject, request);
-        workerRequest.start = request.start;
-        workerRequest.end = request.end;
-        workerRequest.spectra = true;
-
-        return this.workerInterface.request(workerRequest);
-    };
-
-    SpectralGeneratorProvider.prototype.subscribe = function (domainObject, callback) {
-        var workerRequest = this.makeWorkerRequest(domainObject, {});
-        workerRequest.spectra = true;
-
-        return this.workerInterface.subscribe(workerRequest, callback);
-    };
-
-    return SpectralGeneratorProvider;
-});

example/generator/generatorWorker.js

@@ -54,39 +54,23 @@
         var start = Date.now();
         var step = 1000 / data.dataRateInHz;
         var nextStep = start - (start % step) + step;
-        let work;
-        console.log('dataRate', data);
-        if (data.spectra) {
-            work = function (now) {
-                while (nextStep < now) {
-                    const messageCopy = Object.create(message);
-                    message.data.start = nextStep - (60 * 1000);
-                    message.data.end = nextStep;
-                    onRequest(messageCopy);
-                    nextStep += step;
-                }
 
-                return nextStep;
-            };
-        } else {
-            work = function (now) {
-                while (nextStep < now) {
-                    self.postMessage({
-                        id: message.id,
-                        data: {
-                            name: data.name,
-                            utc: nextStep,
-                            yesterday: nextStep - 60 * 60 * 24 * 1000,
-                            sin: sin(nextStep, data.period, data.amplitude, data.offset, data.phase, data.randomness),
-                            wavelength: wavelength(start, nextStep),
-                            cos: cos(nextStep, data.period, data.amplitude, data.offset, data.phase, data.randomness)
-                        }
-                    });
-                    nextStep += step;
-                }
+        function work(now) {
+            while (nextStep < now) {
+                self.postMessage({
+                    id: message.id,
+                    data: {
+                        name: data.name,
+                        utc: nextStep,
+                        yesterday: nextStep - 60 * 60 * 24 * 1000,
+                        sin: sin(nextStep, data.period, data.amplitude, data.offset, data.phase, data.randomness),
+                        cos: cos(nextStep, data.period, data.amplitude, data.offset, data.phase, data.randomness)
+                    }
+                });
+                nextStep += step;
+            }
 
-                return nextStep;
-            };
+            return nextStep;
         }
 
         subscriptions[message.id] = work;
@@ -127,21 +111,13 @@
                 utc: nextStep,
                 yesterday: nextStep - 60 * 60 * 24 * 1000,
                 sin: sin(nextStep, period, amplitude, offset, phase, randomness),
-                wavelength: wavelength(start, nextStep),
                 cos: cos(nextStep, period, amplitude, offset, phase, randomness)
             });
         }
 
         self.postMessage({
             id: message.id,
-            data: request.spectra ? {
-                wavelength: data.map((item) => {
-                    return item.wavelength;
-                }),
-                cos: data.map((item) => {
-                    return item.cos;
-                })
-            } : data
+            data: data
         });
     }
 
@@ -155,10 +131,6 @@
             * Math.sin(phase + (timestamp / period / 1000 * Math.PI * 2)) + (amplitude * Math.random() * randomness) + offset;
     }
 
-    function wavelength(start, nextStep) {
-        return (nextStep - start) / 10;
-    }
-
     function sendError(error, message) {
         self.postMessage({
             error: error.name + ': ' + error.message,

example/generator/plugin.js

@@ -24,15 +24,11 @@ define([
     "./GeneratorProvider",
     "./SinewaveLimitProvider",
     "./StateGeneratorProvider",
-    "./SpectralGeneratorProvider",
-    "./SpectralAggregateGeneratorProvider",
     "./GeneratorMetadataProvider"
 ], function (
     GeneratorProvider,
     SinewaveLimitProvider,
     StateGeneratorProvider,
-    SpectralGeneratorProvider,
-    SpectralAggregateGeneratorProvider,
     GeneratorMetadataProvider
 ) {
 
@@ -65,37 +61,6 @@ define([
 
         openmct.telemetry.addProvider(new StateGeneratorProvider());
 
-        openmct.types.addType("example.spectral-generator", {
-            name: "Spectral Generator",
-            description: "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",
-            cssClass: "icon-generator-telemetry",
-            creatable: true,
-            initialize: function (object) {
-                object.telemetry = {
-                    period: 10,
-                    amplitude: 1,
-                    wavelength: 1,
-                    frequency: 1,
-                    offset: 0,
-                    dataRateInHz: 1,
-                    phase: 0,
-                    randomness: 0
-                };
-            }
-        });
-        openmct.telemetry.addProvider(new SpectralGeneratorProvider());
-
-        openmct.types.addType("example.spectral-aggregate-generator", {
-            name: "Spectral Aggregate Generator",
-            description: "For development use. Generates example streaming telemetry data using a simple state algorithm.",
-            cssClass: "icon-generator-telemetry",
-            creatable: true,
-            initialize: function (object) {
-                object.telemetry = {};
-            }
-        });
-        openmct.telemetry.addProvider(new SpectralAggregateGeneratorProvider());
-
         openmct.types.addType("generator", {
             name: "Sine Wave Generator",
             description: "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",

index.html

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

package.json

@@ -2,6 +2,7 @@
   "name": "openmct",
   "version": "1.7.8-SNAPSHOT",
   "description": "The Open MCT core platform",
+  "dependencies": {},
   "devDependencies": {
     "angular": ">=1.8.0",
     "angular-route": "1.4.14",
@@ -40,13 +41,13 @@
     "jsdoc": "^3.3.2",
     "karma": "6.3.4",
     "karma-chrome-launcher": "3.1.0",
+    "karma-firefox-launcher": "2.1.1",
     "karma-cli": "2.0.0",
     "karma-coverage": "2.0.3",
     "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-firefox-launcher": "2.1.1",
+    "karma-junit-reporter": "2.0.1",
     "karma-html-reporter": "0.2.7",
     "karma-jasmine": "4.0.1",
-    "karma-junit-reporter": "2.0.1",
     "karma-sourcemap-loader": "0.3.8",
     "karma-webpack": "4.0.2",
     "location-bar": "^3.0.1",
@@ -61,7 +62,6 @@
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.14.1",
     "painterro": "^1.2.56",
-    "plotly.js": "^2.5.0",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",

platform/features/clock/bundle.js

@@ -21,32 +21,24 @@
  *****************************************************************************/
 
 define([
-    "moment-timezone",
-    "./src/indicators/ClockIndicator",
     "./src/services/TickerService",
     "./src/services/TimerService",
-    "./src/controllers/ClockController",
     "./src/controllers/TimerController",
     "./src/controllers/RefreshingController",
     "./src/actions/StartTimerAction",
     "./src/actions/RestartTimerAction",
     "./src/actions/StopTimerAction",
     "./src/actions/PauseTimerAction",
-    "./res/templates/clock.html",
     "./res/templates/timer.html"
 ], function (
-    MomentTimezone,
-    ClockIndicator,
     TickerService,
     TimerService,
-    ClockController,
     TimerController,
     RefreshingController,
     StartTimerAction,
     RestartTimerAction,
     StopTimerAction,
     PauseTimerAction,
-    clockTemplate,
     timerTemplate
 ) {
     return {
@@ -73,16 +65,6 @@ define([
                         "value": "YYYY/MM/DD HH:mm:ss"
                     }
                 ],
-                "indicators": [
-                    {
-                        "implementation": ClockIndicator,
-                        "depends": [
-                            "tickerService",
-                            "CLOCK_INDICATOR_FORMAT"
-                        ],
-                        "priority": "preferred"
-                    }
-                ],
                 "services": [
                     {
                         "key": "tickerService",
@@ -99,14 +81,6 @@ define([
                     }
                 ],
                 "controllers": [
-                    {
-                        "key": "ClockController",
-                        "implementation": ClockController,
-                        "depends": [
-                            "$scope",
-                            "tickerService"
-                        ]
-                    },
                     {
                         "key": "TimerController",
                         "implementation": TimerController,
@@ -126,12 +100,6 @@ define([
                     }
                 ],
                 "views": [
-                    {
-                        "key": "clock",
-                        "type": "clock",
-                        "editable": false,
-                        "template": clockTemplate
-                    },
                     {
                         "key": "timer",
                         "type": "timer",
@@ -186,70 +154,6 @@ define([
                     }
                 ],
                 "types": [
-                    {
-                        "key": "clock",
-                        "name": "Clock",
-                        "cssClass": "icon-clock",
-                        "description": "A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts.",
-                        "priority": 101,
-                        "features": [
-                            "creation"
-                        ],
-                        "properties": [
-                            {
-                                "key": "clockFormat",
-                                "name": "Display Format",
-                                "control": "composite",
-                                "items": [
-                                    {
-                                        "control": "select",
-                                        "options": [
-                                            {
-                                                "value": "YYYY/MM/DD hh:mm:ss",
-                                                "name": "YYYY/MM/DD hh:mm:ss"
-                                            },
-                                            {
-                                                "value": "YYYY/DDD hh:mm:ss",
-                                                "name": "YYYY/DDD hh:mm:ss"
-                                            },
-                                            {
-                                                "value": "hh:mm:ss",
-                                                "name": "hh:mm:ss"
-                                            }
-                                        ],
-                                        "cssClass": "l-inline"
-                                    },
-                                    {
-                                        "control": "select",
-                                        "options": [
-                                            {
-                                                "value": "clock12",
-                                                "name": "12hr"
-                                            },
-                                            {
-                                                "value": "clock24",
-                                                "name": "24hr"
-                                            }
-                                        ],
-                                        "cssClass": "l-inline"
-                                    }
-                                ]
-                            },
-                            {
-                                "key": "timezone",
-                                "name": "Timezone",
-                                "control": "autocomplete",
-                                "options": MomentTimezone.tz.names()
-                            }
-                        ],
-                        "model": {
-                            "clockFormat": [
-                                "YYYY/MM/DD hh:mm:ss",
-                                "clock12"
-                            ],
-                            "timezone": "UTC"
-                        }
-                    },
                     {
                         "key": "timer",
                         "name": "Timer",

platform/features/clock/res/templates/clock.html

@@ -1,32 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2009-2016, 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.
--->
-<div class="c-clock l-time-display u-style-receiver js-style-receiver" ng-controller="ClockController as clock">
-	<div class="c-clock__timezone">
-		{{clock.zone()}}
-	</div>
-	<div class="c-clock__value">
-		{{clock.text()}}
-	</div>
-	<div class="c-clock__ampm">
-		{{clock.ampm()}}
-	</div>
-</div>

platform/features/clock/src/controllers/ClockController.js

@@ -1,110 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, 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.
- *****************************************************************************/
-
-define([
-    'moment',
-    'moment-timezone'
-],
-function (
-    moment,
-    momentTimezone
-) {
-
-    /**
-         * Controller for views of a Clock domain object.
-         *
-         * @constructor
-         * @memberof platform/features/clock
-         * @param {angular.Scope} $scope the Angular scope
-         * @param {platform/features/clock.TickerService} tickerService
-         *        a service used to align behavior with clock ticks
-         */
-    function ClockController($scope, tickerService) {
-        var lastTimestamp,
-            unlisten,
-            timeFormat,
-            zoneName,
-            self = this;
-
-        function update() {
-            var m = zoneName
-                ? moment.utc(lastTimestamp).tz(zoneName) : moment.utc(lastTimestamp);
-            self.zoneAbbr = m.zoneAbbr();
-            self.textValue = timeFormat && m.format(timeFormat);
-            self.ampmValue = m.format("A"); // Just the AM or PM part
-        }
-
-        function tick(timestamp) {
-            lastTimestamp = timestamp;
-            update();
-        }
-
-        function updateModel(model) {
-            var baseFormat;
-            if (model !== undefined) {
-                baseFormat = model.clockFormat[0];
-
-                self.use24 = model.clockFormat[1] === 'clock24';
-                timeFormat = self.use24
-                    ? baseFormat.replace('hh', "HH") : baseFormat;
-                // If wrong timezone is provided, the UTC will be used
-                zoneName = momentTimezone.tz.names().includes(model.timezone)
-                    ? model.timezone : "UTC";
-                update();
-            }
-        }
-
-        // Pull in the model (clockFormat and timezone) from the domain object model
-        $scope.$watch('model', updateModel);
-
-        // Listen for clock ticks ... and stop listening on destroy
-        unlisten = tickerService.listen(tick);
-        $scope.$on('$destroy', unlisten);
-    }
-
-    /**
-         * Get the clock's time zone, as displayable text.
-         * @returns {string}
-         */
-    ClockController.prototype.zone = function () {
-        return this.zoneAbbr;
-    };
-
-    /**
-         * Get the current time, as displayable text.
-         * @returns {string}
-         */
-    ClockController.prototype.text = function () {
-        return this.textValue;
-    };
-
-    /**
-         * Get the text to display to qualify a time as AM or PM.
-         * @returns {string}
-         */
-    ClockController.prototype.ampm = function () {
-        return this.use24 ? '' : this.ampmValue;
-    };
-
-    return ClockController;
-}
-);

platform/features/clock/src/indicators/ClockIndicator.js

@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, 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.
- *****************************************************************************/
-
-define(
-    ['moment'],
-    function (moment) {
-
-        /**
-         * Indicator that displays the current UTC time in the status area.
-         * @implements {Indicator}
-         * @memberof platform/features/clock
-         * @param {platform/features/clock.TickerService} tickerService
-         *        a service used to align behavior with clock ticks
-         * @param {string} indicatorFormat format string for timestamps
-         *        shown in this indicator
-         */
-        function ClockIndicator(tickerService, indicatorFormat) {
-            var self = this;
-
-            this.text = "";
-
-            tickerService.listen(function (timestamp) {
-                self.text = moment.utc(timestamp)
-                    .format(indicatorFormat) + " UTC";
-            });
-        }
-
-        ClockIndicator.prototype.getGlyphClass = function () {
-            return "";
-        };
-
-        ClockIndicator.prototype.getCssClass = function () {
-            return "t-indicator-clock icon-clock no-minify c-indicator--not-clickable";
-        };
-
-        ClockIndicator.prototype.getText = function () {
-            return this.text;
-        };
-
-        ClockIndicator.prototype.getDescription = function () {
-            return "";
-        };
-
-        return ClockIndicator;
-    }
-);

platform/features/clock/test/controllers/ClockControllerSpec.js

@@ -1,107 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2017, 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.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/ClockController"],
-    function (ClockController) {
-
-        // Wed, 03 Jun 2015 17:56:14 GMT
-        var TEST_TIMESTAMP = 1433354174000;
-
-        describe("A clock view's controller", function () {
-            var mockScope,
-                mockTicker,
-                mockUnticker,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj('$scope', ['$watch', '$on']);
-                mockTicker = jasmine.createSpyObj('ticker', ['listen']);
-                mockUnticker = jasmine.createSpy('unticker');
-
-                mockTicker.listen.and.returnValue(mockUnticker);
-
-                controller = new ClockController(mockScope, mockTicker);
-            });
-
-            it("watches for model (clockFormat and timezone) from the domain object model", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "model",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("subscribes to clock ticks", function () {
-                expect(mockTicker.listen)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
-            });
-
-            it("unsubscribes to ticks when destroyed", function () {
-                // Make sure $destroy is being listened for...
-                expect(mockScope.$on.calls.mostRecent().args[0]).toEqual('$destroy');
-                expect(mockUnticker).not.toHaveBeenCalled();
-
-                // ...and makes sure that its listener unsubscribes from ticker
-                mockScope.$on.calls.mostRecent().args[1]();
-                expect(mockUnticker).toHaveBeenCalled();
-            });
-
-            it("formats using the format string from the model", function () {
-                mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
-                mockScope.$watch.calls.mostRecent().args[1]({
-                    "clockFormat": [
-                        "YYYY-DDD hh:mm:ss",
-                        "clock24"
-                    ],
-                    "timezone": "Canada/Eastern"
-                });
-
-                expect(controller.zone()).toEqual("EDT");
-                expect(controller.text()).toEqual("2015-154 13:56:14");
-                expect(controller.ampm()).toEqual("");
-            });
-
-            it("formats 12-hour time", function () {
-                mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
-                mockScope.$watch.calls.mostRecent().args[1]({
-                    "clockFormat": [
-                        "YYYY-DDD hh:mm:ss",
-                        "clock12"
-                    ],
-                    "timezone": ""
-                });
-
-                expect(controller.zone()).toEqual("UTC");
-                expect(controller.text()).toEqual("2015-154 05:56:14");
-                expect(controller.ampm()).toEqual("PM");
-            });
-
-            it("does not throw exceptions when model is undefined", function () {
-                mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
-                expect(function () {
-                    mockScope.$watch.calls.mostRecent().args[1](undefined);
-                }).not.toThrow();
-            });
-
-        });
-    }
-);

platform/features/clock/test/indicators/ClockIndicatorSpec.js

@@ -1,58 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, 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.
- *****************************************************************************/
-
-define(
-    ["../../src/indicators/ClockIndicator"],
-    function (ClockIndicator) {
-
-        // Wed, 03 Jun 2015 17:56:14 GMT
-        var TEST_TIMESTAMP = 1433354174000,
-            TEST_FORMAT = "YYYY-DDD HH:mm:ss";
-
-        describe("The clock indicator", function () {
-            var mockTicker,
-                mockUnticker,
-                indicator;
-
-            beforeEach(function () {
-                mockTicker = jasmine.createSpyObj('ticker', ['listen']);
-                mockUnticker = jasmine.createSpy('unticker');
-
-                mockTicker.listen.and.returnValue(mockUnticker);
-
-                indicator = new ClockIndicator(mockTicker, TEST_FORMAT);
-            });
-
-            it("displays the current time", function () {
-                mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
-                expect(indicator.getText()).toEqual("2015-154 17:56:14 UTC");
-            });
-
-            it("implements the Indicator interface", function () {
-                expect(indicator.getCssClass()).toEqual(jasmine.any(String));
-                expect(indicator.getText()).toEqual(jasmine.any(String));
-                expect(indicator.getDescription()).toEqual(jasmine.any(String));
-            });
-
-        });
-    }
-);

src/api/objects/ObjectAPI.js

@@ -358,6 +358,20 @@ ObjectAPI.prototype.applyGetInterceptors = function (identifier, domainObject) {
     return domainObject;
 };
 
+/**
+ * Return relative url path from a given object path
+ * eg: #/browse/mine/cb56f6bf-c900-43b7-b923-2e3b64b412db/6e89e858-77ce-46e4-a1ad-749240286497/....
+ * @param {Array} objectPath
+ * @returns {string} relative url for object
+ */
+ObjectAPI.prototype.getRelativePath = function (objectPath) {
+    return objectPath
+        .map(p => this.makeKeyString(p.identifier))
+        .reverse()
+        .join('/')
+    ;
+};
+
 /**
  * Modify a domain object.
  * @param {module:openmct.DomainObject} object the object to mutate

src/api/overlays/Overlay.js

@@ -10,28 +10,37 @@ const cssClasses = {
 };
 
 class Overlay extends EventEmitter {
-    constructor(options) {
+    constructor({
+        buttons,
+        autoHide = true,
+        dismissable = true,
+        element,
+        onDestroy,
+        size
+    } = {}) {
         super();
 
-        this.dismissable = options.dismissable !== false;
         this.container = document.createElement('div');
-        this.container.classList.add('l-overlay-wrapper', cssClasses[options.size]);
+        this.container.classList.add('l-overlay-wrapper', cssClasses[size]);
+
+        this.autoHide = autoHide;
+        this.dismissable = dismissable !== false;
 
         this.component = new Vue({
-            provide: {
-                dismiss: this.dismiss.bind(this),
-                element: options.element,
-                buttons: options.buttons,
-                dismissable: this.dismissable
-            },
             components: {
                 OverlayComponent: OverlayComponent
             },
+            provide: {
+                dismiss: this.dismiss.bind(this),
+                element,
+                buttons,
+                dismissable: this.dismissable
+            },
             template: '<overlay-component></overlay-component>'
         });
 
-        if (options.onDestroy) {
-            this.once('destroy', options.onDestroy);
+        if (onDestroy) {
+            this.once('destroy', onDestroy);
         }
     }
 

src/api/overlays/OverlayAPI.js

@@ -30,7 +30,10 @@ class OverlayAPI {
      */
     showOverlay(overlay) {
         if (this.activeOverlays.length) {
-            this.activeOverlays[this.activeOverlays.length - 1].container.classList.add('invisible');
+            const previousOverlay = this.activeOverlays[this.activeOverlays.length - 1];
+            if (previousOverlay.autoHide) {
+                previousOverlay.container.classList.add('invisible');
+            }
         }
 
         this.activeOverlays.push(overlay);

src/api/telemetry/TelemetryCollection.js

@@ -342,6 +342,8 @@ export class TelemetryCollection extends EventEmitter {
         this.boundedTelemetry = [];
         this.futureBuffer = [];
 
+        this.emit('clear');
+
         this._requestHistoricalTelemetry();
     }
 

src/exporters/ImageExporter.js

@@ -90,7 +90,7 @@ class ImageExporter {
                 element.id = oldId;
             },
             removeContainer: true // Set to false to debug what html2canvas renders
-        }).then(function (canvas) {
+        }).then(canvas => {
             dialog.dismiss();
 
             return new Promise(function (resolve, reject) {
@@ -105,9 +105,10 @@ class ImageExporter {
 
                 return canvas.toBlob(blob => resolve({ blob }), mimeType);
             });
-        }, function (error) {
-            console.log('error capturing image', error);
+        }).catch(error => {
             dialog.dismiss();
+
+            console.error('error capturing image', error);
             const errorDialog = overlays.dialog({
                 iconClass: 'error',
                 message: 'Image was not captured successfully!',

src/plugins/clearData/ClearDataAction.js

@@ -20,6 +20,18 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+function inSelectionPath(openmct, domainObject) {
+    const domainObjectIdentifier = domainObject.identifier;
+
+    return openmct.selection.get().some(selectionPath => {
+        return selectionPath.some(objectInPath => {
+            const objectInPathIdentifier = objectInPath.context.item.identifier;
+
+            return openmct.objects.areIdsEqual(objectInPathIdentifier, domainObjectIdentifier);
+        });
+    });
+}
+
 export default class ClearDataAction {
     constructor(openmct, appliesToObjects) {
         this.name = 'Clear Data for Object';
@@ -31,11 +43,36 @@ export default class ClearDataAction {
         this._appliesToObjects = appliesToObjects;
     }
     invoke(objectPath) {
-        this._openmct.objectViews.emit('clearData', objectPath[0]);
+        let domainObject = null;
+        if (objectPath) {
+            domainObject = objectPath[0];
+        }
+
+        this._openmct.objectViews.emit('clearData', domainObject);
     }
     appliesTo(objectPath) {
-        let contextualDomainObject = objectPath[0];
+        if (!objectPath) {
+            return false;
+        }
 
-        return this._appliesToObjects.filter(type => contextualDomainObject.type === type).length;
+        const contextualDomainObject = objectPath[0];
+        // first check to see if this action applies to this sort of object at all
+        const appliesToThisObject = this._appliesToObjects.some(type => {
+            return contextualDomainObject.type === type;
+        });
+        if (!appliesToThisObject) {
+            // we've selected something not applicable
+            return false;
+        }
+
+        const objectInSelectionPath = inSelectionPath(this._openmct, contextualDomainObject);
+        if (objectInSelectionPath) {
+            return true;
+        } else {
+            // if this it doesn't match up, check to see if we're in a composition (i.e., layout)
+            const routerPath = this._openmct.router.path[0];
+
+            return routerPath.type === 'layout';
+        }
     }
 }

src/plugins/clearData/plugin.js

@@ -22,7 +22,7 @@
 
 define([
     './components/globalClearIndicator.vue',
-    './clearDataAction',
+    './ClearDataAction',
     'vue'
 ], function (
     GlobaClearIndicator,

src/plugins/clearData/test/ClearDataActionSpec.js

@@ -0,0 +1,140 @@
+/*****************************************************************************
+ * 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 ClearDataActionPlugin from '../plugin.js';
+import ClearDataAction from '../ClearDataAction.js';
+
+describe('When the Clear Data Plugin is installed,', () => {
+    const mockObjectViews = jasmine.createSpyObj('objectViews', ['emit']);
+    const mockIndicatorProvider = jasmine.createSpyObj('indicators', ['add']);
+    const mockActionsProvider = jasmine.createSpyObj('actions', ['register']);
+    const goodMockSelectionPath = [[{
+        context: {
+            item: {
+                identifier: {
+                    key: 'apple',
+                    namespace: ''
+                }
+            }
+        }
+    }]];
+
+    const openmct = {
+        objectViews: mockObjectViews,
+        indicators: mockIndicatorProvider,
+        actions: mockActionsProvider,
+        install: function (plugin) {
+            plugin(this);
+        },
+        selection: {
+            get: function () {
+                return goodMockSelectionPath;
+            }
+        },
+        objects: {
+            areIdsEqual: function (obj1, obj2) {
+                return true;
+            }
+        }
+    };
+
+    const mockObjectPath = [
+        {
+            name: 'mockObject1',
+            type: 'apple'
+        },
+        {
+            name: 'mockObject2',
+            type: 'banana'
+        }
+    ];
+
+    it('Global Clear Indicator is installed', () => {
+        openmct.install(ClearDataActionPlugin([]));
+
+        expect(mockIndicatorProvider.add).toHaveBeenCalled();
+    });
+
+    it('Clear Data context menu action is installed', () => {
+        openmct.install(ClearDataActionPlugin([]));
+
+        expect(mockActionsProvider.register).toHaveBeenCalled();
+    });
+
+    it('clear data action emits a clearData event when invoked', () => {
+        const action = new ClearDataAction(openmct);
+
+        action.invoke(mockObjectPath);
+
+        expect(mockObjectViews.emit).toHaveBeenCalledWith('clearData', mockObjectPath[0]);
+    });
+
+    it('clears data on applicable objects', () => {
+        let action = new ClearDataAction(openmct, ['apple']);
+
+        const actionApplies = action.appliesTo(mockObjectPath);
+
+        expect(actionApplies).toBe(true);
+    });
+
+    it('does not clear data on inapplicable objects', () => {
+        let action = new ClearDataAction(openmct, ['pineapple']);
+
+        const actionApplies = action.appliesTo(mockObjectPath);
+
+        expect(actionApplies).toBe(false);
+    });
+
+    it('does not clear data if not in the selection path and not a layout', () => {
+        openmct.objects = {
+            areIdsEqual: function (obj1, obj2) {
+                return false;
+            }
+        };
+        openmct.router = {
+            path: [{type: 'not-a-layout'}]
+        };
+
+        let action = new ClearDataAction(openmct, ['apple']);
+
+        const actionApplies = action.appliesTo(mockObjectPath);
+
+        expect(actionApplies).toBe(false);
+    });
+
+    it('does clear data if not in the selection path and is a layout', () => {
+        openmct.objects = {
+            areIdsEqual: function (obj1, obj2) {
+                return false;
+            }
+        };
+        openmct.router = {
+            path: [{type: 'layout'}]
+        };
+
+        let action = new ClearDataAction(openmct, ['apple']);
+
+        const actionApplies = action.appliesTo(mockObjectPath);
+
+        expect(actionApplies).toBe(true);
+    });
+});

src/plugins/clearData/test/clearDataActionSpec.js

@@ -1,64 +0,0 @@
-/*****************************************************************************
- * 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 ClearDataActionPlugin from '../plugin.js';
-import ClearDataAction from '../clearDataAction.js';
-
-describe('When the Clear Data Plugin is installed,', function () {
-    const mockObjectViews = jasmine.createSpyObj('objectViews', ['emit']);
-    const mockIndicatorProvider = jasmine.createSpyObj('indicators', ['add']);
-    const mockActionsProvider = jasmine.createSpyObj('actions', ['register']);
-
-    const openmct = {
-        objectViews: mockObjectViews,
-        indicators: mockIndicatorProvider,
-        actions: mockActionsProvider,
-        install: function (plugin) {
-            plugin(this);
-        }
-    };
-
-    const mockObjectPath = [
-        {name: 'mockObject1'},
-        {name: 'mockObject2'}
-    ];
-
-    it('Global Clear Indicator is installed', function () {
-        openmct.install(ClearDataActionPlugin([]));
-
-        expect(mockIndicatorProvider.add).toHaveBeenCalled();
-    });
-
-    it('Clear Data context menu action is installed', function () {
-        openmct.install(ClearDataActionPlugin([]));
-
-        expect(mockActionsProvider.register).toHaveBeenCalled();
-    });
-
-    it('clear data action emits a clearData event when invoked', function () {
-        let action = new ClearDataAction(openmct);
-
-        action.invoke(mockObjectPath);
-
-        expect(mockObjectViews.emit).toHaveBeenCalledWith('clearData', mockObjectPath[0]);
-    });
-});

src/plugins/clock/ClockViewProvider.js

@@ -20,49 +20,33 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import SpectralView from './SpectralView.vue';
+import Clock from './components/Clock.vue';
 import Vue from 'vue';
 
-export default function SpectralPlotViewProvider(openmct) {
-    function isCompactView(objectPath) {
-        return objectPath.find(object => object.type === 'time-strip');
-    }
-
+export default function ClockViewProvider(openmct) {
     return {
-        key: 'plot-spectral',
-        name: 'Spectral Plot',
-        cssClass: 'icon-telemetry',
-        canView(domainObject, objectPath) {
-            return domainObject && domainObject.type === 'telemetry.plot.spectral';
+        key: 'clock.view',
+        name: 'Clock',
+        cssClass: 'icon-clock',
+        canView(domainObject) {
+            return domainObject.type === 'clock';
         },
 
-        canEdit(domainObject, objectPath) {
-            return domainObject && domainObject.type === 'telemetry.plot.spectral';
-        },
-
-        view: function (domainObject, objectPath) {
+        view: function (domainObject) {
             let component;
 
             return {
                 show: function (element) {
-                    let isCompact = isCompactView(objectPath);
                     component = new Vue({
                         el: element,
                         components: {
-                            SpectralView
+                            Clock
                         },
                         provide: {
                             openmct,
                             domainObject
                         },
-                        data() {
-                            return {
-                                options: {
-                                    compact: isCompact
-                                }
-                            };
-                        },
-                        template: '<spectral-view :options="options"></spectral-view>'
+                        template: '<clock />'
                     });
                 },
                 destroy: function () {

src/plugins/clock/components/Clock.vue

@@ -0,0 +1,99 @@
+<!--
+ 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="l-angular-ov-wrapper">
+    <div class="u-contents">
+        <div class="c-clock l-time-display u-style-receiver js-style-receiver">
+            <div class="c-clock__timezone">
+                {{ timeZoneAbbr }}
+            </div>
+            <div class="c-clock__value">
+                {{ timeTextValue }}
+            </div>
+            <div class="c-clock__ampm">
+                {{ timeAmPm }}
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import moment from 'moment';
+import momentTimezone from 'moment-timezone';
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    data() {
+        return {
+            lastTimestamp: null
+        };
+    },
+    computed: {
+        configuration() {
+            return this.domainObject.configuration;
+        },
+        baseFormat() {
+            return this.configuration.baseFormat;
+        },
+        use24() {
+            return this.configuration.use24 === 'clock24';
+        },
+        timezone() {
+            return this.configuration.timezone;
+        },
+        timeFormat() {
+            return this.use24 ? this.baseFormat.replace('hh', "HH") : this.baseFormat;
+        },
+        zoneName() {
+            return momentTimezone.tz.names().includes(this.timezone) ? this.timezone : "UTC";
+        },
+        momentTime() {
+            return this.zoneName ? moment.utc(this.lastTimestamp).tz(this.zoneName) : moment.utc(this.lastTimestamp);
+        },
+        timeZoneAbbr() {
+            return this.momentTime.zoneAbbr();
+        },
+        timeTextValue() {
+            return this.timeFormat && this.momentTime.format(this.timeFormat);
+        },
+        timeAmPm() {
+            return this.use24 ? '' : this.momentTime.format("A");
+        }
+    },
+    mounted() {
+        const TickerService = this.openmct.$injector.get('tickerService');
+        this.unlisten = TickerService.listen(this.tick);
+    },
+    beforeDestroy() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+    },
+    methods: {
+        tick(timestamp) {
+            this.lastTimestamp = timestamp;
+        }
+    }
+};
+</script>

src/plugins/clock/components/ClockIndicator.vue

@@ -0,0 +1,64 @@
+<!--
+ 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-indicator t-indicator-clock icon-clock no-minify c-indicator--not-clickable">
+    <span class="label c-indicator__label">
+        {{ timeTextValue }}
+    </span>
+</div>
+</template>
+
+<script>
+import moment from 'moment';
+
+export default {
+    inject: ['openmct'],
+    props: {
+        indicatorFormat: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            timeTextValue: null
+        };
+    },
+    mounted() {
+        this.openmct.on('start', () => {
+            const TickerService = this.openmct.$injector.get('tickerService');
+            this.unlisten = TickerService.listen(this.tick);
+        });
+    },
+    beforeDestroy() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+    },
+    methods: {
+        tick(timestamp) {
+            this.timeTextValue = `${moment.utc(timestamp).format(this.indicatorFormat)} UTC`;
+        }
+    }
+};
+</script>

src/plugins/clock/plugin.js

@@ -0,0 +1,154 @@
+
+/*****************************************************************************
+ * 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 ClockViewProvider from './ClockViewProvider';
+import ClockIndicator from './components/ClockIndicator.vue';
+
+import momentTimezone from 'moment-timezone';
+import Vue from 'vue';
+
+export default function ClockPlugin(options) {
+    return function install(openmct) {
+        const CLOCK_INDICATOR_FORMAT = 'YYYY/MM/DD HH:mm:ss';
+        openmct.types.addType('clock', {
+            name: 'Clock',
+            description: 'A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts.',
+            creatable: true,
+            cssClass: 'icon-clock',
+            initialize: function (domainObject) {
+                domainObject.configuration = {
+                    baseFormat: 'YYYY/MM/DD hh:mm:ss',
+                    use24: 'clock12',
+                    timezone: 'UTC'
+                };
+            },
+            "form": [
+                {
+                    "key": "displayFormat",
+                    "name": "Display Format",
+                    control: 'select',
+                    options: [
+                        {
+                            value: 'YYYY/MM/DD hh:mm:ss',
+                            name: 'YYYY/MM/DD hh:mm:ss'
+                        },
+                        {
+                            value: 'YYYY/DDD hh:mm:ss',
+                            name: 'YYYY/DDD hh:mm:ss'
+                        },
+                        {
+                            value: 'hh:mm:ss',
+                            name: 'hh:mm:ss'
+                        }
+                    ],
+                    cssClass: 'l-inline',
+                    property: [
+                        'configuration',
+                        'baseFormat'
+                    ]
+                },
+                {
+                    control: 'select',
+                    options: [
+                        {
+                            value: 'clock12',
+                            name: '12hr'
+                        },
+                        {
+                            value: 'clock24',
+                            name: '24hr'
+                        }
+                    ],
+                    cssClass: 'l-inline',
+                    property: [
+                        'configuration',
+                        'use24'
+                    ]
+                },
+                {
+                    "key": "timezone",
+                    "name": "Timezone",
+                    "control": "autocomplete",
+                    "options": momentTimezone.tz.names(),
+                    property: [
+                        'configuration',
+                        'timezone'
+                    ]
+                }
+            ]
+        });
+        openmct.objectViews.addProvider(new ClockViewProvider(openmct));
+
+        if (options && options.enableClockIndicator === true) {
+            const clockIndicator = new Vue ({
+                components: {
+                    ClockIndicator
+                },
+                provide: {
+                    openmct
+                },
+                data() {
+                    return {
+                        indicatorFormat: CLOCK_INDICATOR_FORMAT
+                    };
+                },
+                template: '<ClockIndicator :indicator-format="indicatorFormat" />'
+            });
+            const indicator = {
+                element: clockIndicator.$mount().$el,
+                key: 'clock-indicator'
+            };
+
+            openmct.indicators.add(indicator);
+        }
+
+        openmct.objects.addGetInterceptor({
+            appliesTo: (identifier, domainObject) => {
+                return domainObject && domainObject.type === 'clock';
+            },
+            invoke: (identifier, domainObject) => {
+                if (domainObject.configuration) {
+                    return domainObject;
+                }
+
+                if (domainObject.clockFormat
+                    && domainObject.timezone) {
+                    const baseFormat = domainObject.clockFormat[0];
+                    const use24 = domainObject.clockFormat[1];
+                    const timezone = domainObject.timezone;
+
+                    domainObject.configuration = {
+                        baseFormat,
+                        use24,
+                        timezone
+                    };
+
+                    openmct.objects.mutate(domainObject, 'configuration', domainObject.configuration);
+                }
+
+                return domainObject;
+            }
+        });
+
+    };
+}

src/plugins/clock/pluginSpec.js

@@ -0,0 +1,231 @@
+/*****************************************************************************
+ * 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 { createOpenMct, resetApplicationState } from 'utils/testing';
+import clockPlugin from './plugin';
+
+import Vue from 'vue';
+
+describe("Clock plugin:", () => {
+    let openmct;
+    let clockDefinition;
+    let element;
+    let child;
+    let appHolder;
+
+    let clockDomainObject;
+
+    function setupClock(enableClockIndicator) {
+        return new Promise((resolve, reject) => {
+            clockDomainObject = {
+                identifier: {
+                    key: 'clock',
+                    namespace: 'test-namespace'
+                },
+                type: 'clock'
+            };
+
+            appHolder = document.createElement('div');
+            appHolder.style.width = '640px';
+            appHolder.style.height = '480px';
+            document.body.appendChild(appHolder);
+
+            openmct = createOpenMct();
+
+            element = document.createElement('div');
+            child = document.createElement('div');
+            element.appendChild(child);
+
+            openmct.install(clockPlugin({ enableClockIndicator }));
+
+            clockDefinition = openmct.types.get('clock').definition;
+            clockDefinition.initialize(clockDomainObject);
+
+            openmct.on('start', resolve);
+            openmct.start(appHolder);
+        });
+    }
+
+    describe("Clock view:", () => {
+        let clockViewProvider;
+        let clockView;
+        let clockViewObject;
+        let mutableClockObject;
+
+        beforeEach(async () => {
+            await setupClock(true);
+
+            clockViewObject = {
+                ...clockDomainObject,
+                id: "test-object",
+                name: 'Clock',
+                configuration: {
+                    baseFormat: 'YYYY/MM/DD hh:mm:ss',
+                    use24: 'clock12',
+                    timezone: 'UTC'
+                }
+            };
+
+            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve(clockViewObject));
+            spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
+
+            const applicableViews = openmct.objectViews.get(clockViewObject, [clockViewObject]);
+            clockViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'clock.view');
+
+            mutableClockObject = await openmct.objects.getMutable(clockViewObject.identifier);
+
+            clockView = clockViewProvider.view(mutableClockObject);
+            clockView.show(child);
+
+            await Vue.nextTick();
+        });
+
+        afterEach(() => {
+            clockView.destroy();
+            openmct.objects.destroyMutable(mutableClockObject);
+            if (appHolder) {
+                appHolder.remove();
+            }
+
+            return resetApplicationState(openmct);
+        });
+
+        it("has name as Clock", () => {
+            expect(clockDefinition.name).toEqual('Clock');
+        });
+
+        it("is creatable", () => {
+            expect(clockDefinition.creatable).toEqual(true);
+        });
+
+        it("provides clock view", () => {
+            expect(clockViewProvider).toBeDefined();
+        });
+
+        it("renders clock element", () => {
+            const clockElement = element.querySelectorAll('.c-clock');
+            expect(clockElement.length).toBe(1);
+        });
+
+        it("renders major elements", () => {
+            const clockElement = element.querySelector('.c-clock');
+            const timezone = clockElement.querySelector('.c-clock__timezone');
+            const time = clockElement.querySelector('.c-clock__value');
+            const amPm = clockElement.querySelector('.c-clock__ampm');
+            const hasMajorElements = Boolean(timezone && time && amPm);
+
+            expect(hasMajorElements).toBe(true);
+        });
+
+        it("renders time in UTC", () => {
+            const clockElement = element.querySelector('.c-clock');
+            const timezone = clockElement.querySelector('.c-clock__timezone').textContent.trim();
+
+            expect(timezone).toBe('UTC');
+        });
+
+        it("updates the 24 hour option in the configuration", (done) => {
+            expect(clockDomainObject.configuration.use24).toBe('clock12');
+            const new24Option = 'clock24';
+
+            openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
+                expect(changedDomainObject.use24).toBe(new24Option);
+                done();
+            });
+
+            openmct.objects.mutate(clockViewObject, 'configuration.use24', new24Option);
+        });
+
+        it("updates the timezone option in the configuration", (done) => {
+            expect(clockDomainObject.configuration.timezone).toBe('UTC');
+            const newZone = 'CST6CDT';
+
+            openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
+                expect(changedDomainObject.timezone).toBe(newZone);
+                done();
+            });
+
+            openmct.objects.mutate(clockViewObject, 'configuration.timezone', newZone);
+        });
+
+        it("updates the time format option in the configuration", (done) => {
+            expect(clockDomainObject.configuration.baseFormat).toBe('YYYY/MM/DD hh:mm:ss');
+            const newFormat = 'hh:mm:ss';
+
+            openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
+                expect(changedDomainObject.baseFormat).toBe(newFormat);
+                done();
+            });
+
+            openmct.objects.mutate(clockViewObject, 'configuration.baseFormat', newFormat);
+        });
+    });
+
+    describe("Clock Indicator view:", () => {
+        let clockIndicator;
+
+        afterEach(() => {
+            if (clockIndicator) {
+                clockIndicator.remove();
+            }
+
+            clockIndicator = undefined;
+            if (appHolder) {
+                appHolder.remove();
+            }
+
+            return resetApplicationState(openmct);
+        });
+
+        it("doesn't exist", async () => {
+            await setupClock(false);
+
+            clockIndicator = openmct.indicators.indicatorObjects
+                .find(indicator => indicator.key === 'clock-indicator');
+
+            const clockIndicatorMissing = clockIndicator === null || clockIndicator === undefined;
+            expect(clockIndicatorMissing).toBe(true);
+        });
+
+        it("exists", async () => {
+            await setupClock(true);
+
+            clockIndicator = openmct.indicators.indicatorObjects
+                .find(indicator => indicator.key === 'clock-indicator').element;
+
+            const hasClockIndicator = clockIndicator !== null && clockIndicator !== undefined;
+            expect(hasClockIndicator).toBe(true);
+        });
+
+        it("contains text", async () => {
+            await setupClock(true);
+
+            clockIndicator = openmct.indicators.indicatorObjects
+                .find(indicator => indicator.key === 'clock-indicator').element;
+
+            const clockIndicatorText = clockIndicator.textContent.trim();
+            const textIncludesUTC = clockIndicatorText.includes('UTC');
+
+            expect(textIncludesUTC).toBe(true);
+        });
+    });
+});

src/plugins/condition/components/inspector/ConditionalStylesView.vue

@@ -273,10 +273,7 @@ export default {
             this.openmct.objects.getOriginalPath(this.conditionSetDomainObject.identifier).then(
                 (objectPath) => {
                     this.objectPath = objectPath;
-                    this.navigateToPath = '#/browse/' + this.objectPath
-                        .map(o => o && this.openmct.objects.makeKeyString(o.identifier))
-                        .reverse()
-                        .join('/');
+                    this.navigateToPath = '#/browse/' + this.openmct.objects.getRelativePath(this.objectPath);
                 }
             );
         },

src/plugins/condition/components/inspector/StylesView.vue

@@ -297,10 +297,7 @@ export default {
             this.openmct.objects.getOriginalPath(this.conditionSetDomainObject.identifier).then(
                 (objectPath) => {
                     this.objectPath = objectPath;
-                    this.navigateToPath = '#/browse/' + this.objectPath
-                        .map(o => o && this.openmct.objects.makeKeyString(o.identifier))
-                        .reverse()
-                        .join('/');
+                    this.navigateToPath = '#/browse/' + this.openmct.objects.getRelativePath(this.objectPath);
                 }
             );
         },

src/plugins/notebook/components/Notebook.vue

@@ -140,6 +140,7 @@ import SearchResults from './SearchResults.vue';
 import Sidebar from './Sidebar.vue';
 import { clearDefaultNotebook, getDefaultNotebook, setDefaultNotebook, setDefaultNotebookSectionId, setDefaultNotebookPageId } from '../utils/notebook-storage';
 import { addNotebookEntry, createNewEmbed, getEntryPosById, getNotebookEntries, mutateObject } from '../utils/notebook-entries';
+import { saveNotebookImageDomainObject, updateNamespaceOfDomainObject } from '../utils/notebook-image';
 import { NOTEBOOK_VIEW_TYPE } from '../notebook-constants';
 import objectUtils from 'objectUtils';
 
@@ -385,9 +386,13 @@ export default {
             const snapshotId = event.dataTransfer.getData('openmct/snapshot/id');
             if (snapshotId.length) {
                 const snapshot = this.snapshotContainer.getSnapshot(snapshotId);
-                this.newEntry(snapshot);
+                this.newEntry(snapshot.embedObject);
                 this.snapshotContainer.removeSnapshot(snapshotId);
 
+                const namespace = this.domainObject.identifier.namespace;
+                const notebookImageDomainObject = updateNamespaceOfDomainObject(snapshot.notebookImageDomainObject, namespace);
+                saveNotebookImageDomainObject(this.openmct, notebookImageDomainObject);
+
                 return;
             }
 
@@ -451,12 +456,9 @@ export default {
                 : undefined;
         },
         getDefaultNotebookObject() {
-            const oldNotebookStorage = getDefaultNotebook();
-            if (!oldNotebookStorage) {
-                return null;
-            }
+            const defaultNotebook = getDefaultNotebook();
 
-            return this.openmct.objects.get(oldNotebookStorage.identifier);
+            return defaultNotebook && this.openmct.objects.get(defaultNotebook.identifier);
         },
         getLinktoNotebook() {
             const objectPath = this.openmct.router.path;

src/plugins/notebook/components/NotebookEmbed.vue

@@ -40,7 +40,7 @@ export default {
     components: {
         PopupMenu
     },
-    inject: ['openmct'],
+    inject: ['openmct', 'snapshotContainer'],
     props: {
         embed: {
             type: Object,
@@ -48,6 +48,12 @@ export default {
                 return {};
             }
         },
+        isSnapshotContainer: {
+            type: Boolean,
+            default() {
+                return false;
+            }
+        },
         removeActionString: {
             type: String,
             default() {
@@ -135,6 +141,14 @@ export default {
                 return;
             }
 
+            if (this.isSnapshotContainer) {
+                const snapshot = this.snapshotContainer.getSnapshot(this.embed.id);
+                const fullSizeImageURL = snapshot.notebookImageDomainObject.configuration.fullSizeImageURL;
+                painterroInstance.show(fullSizeImageURL);
+
+                return;
+            }
+
             this.openmct.objects.get(fullSizeImageObjectIdentifier)
                 .then(object => {
                     painterroInstance.show(object.configuration.fullSizeImageURL);
@@ -190,6 +204,14 @@ export default {
                 return;
             }
 
+            if (this.isSnapshotContainer) {
+                const snapshot = this.snapshotContainer.getSnapshot(this.embed.id);
+                const fullSizeImageURL = snapshot.notebookImageDomainObject.configuration.fullSizeImageURL;
+                this.openSnapshotOverlay(fullSizeImageURL);
+
+                return;
+            }
+
             this.openmct.objects.get(fullSizeImageObjectIdentifier)
                 .then(object => {
                     this.openSnapshotOverlay(object.configuration.fullSizeImageURL);
@@ -259,8 +281,20 @@ export default {
         updateSnapshot(snapshotObject) {
             this.embed.snapshot.thumbnailImage = snapshotObject.thumbnailImage;
 
-            updateNotebookImageDomainObject(this.openmct, this.embed.snapshot.fullSizeImageObjectIdentifier, snapshotObject.fullSizeImage);
+            this.updateNotebookImageDomainObjectSnapshot(snapshotObject);
             this.updateEmbed(this.embed);
+        },
+        updateNotebookImageDomainObjectSnapshot(snapshotObject) {
+            if (this.isSnapshotContainer) {
+                const snapshot = this.snapshotContainer.getSnapshot(this.embed.id);
+
+                snapshot.embedObject.snapshot.thumbnailImage = snapshotObject.thumbnailImage;
+                snapshot.notebookImageDomainObject.configuration.fullSizeImageURL = snapshotObject.fullSizeImage.src;
+
+                this.snapshotContainer.updateSnapshot(snapshot);
+            } else {
+                updateNotebookImageDomainObject(this.openmct, this.embed.snapshot.fullSizeImageObjectIdentifier, snapshotObject.fullSizeImage);
+            }
         }
     }
 };

src/plugins/notebook/components/NotebookEntry.vue

@@ -102,9 +102,11 @@
 
 <script>
 import NotebookEmbed from './NotebookEmbed.vue';
-import { createNewEmbed } from '../utils/notebook-entries';
-import Moment from 'moment';
 import TextHighlight from '../../../utils/textHighlight/TextHighlight.vue';
+import { createNewEmbed } from '../utils/notebook-entries';
+import { saveNotebookImageDomainObject, updateNamespaceOfDomainObject } from '../utils/notebook-image';
+
+import Moment from 'moment';
 
 export default {
     components: {
@@ -210,8 +212,12 @@ export default {
             const snapshotId = $event.dataTransfer.getData('openmct/snapshot/id');
             if (snapshotId.length) {
                 const snapshot = this.snapshotContainer.getSnapshot(snapshotId);
+                this.entry.embeds.push(snapshot.embedObject);
                 this.snapshotContainer.removeSnapshot(snapshotId);
-                this.entry.embeds.push(snapshot);
+
+                const namespace = this.domainObject.identifier.namespace;
+                const notebookImageDomainObject = updateNamespaceOfDomainObject(snapshot.notebookImageDomainObject, namespace);
+                saveNotebookImageDomainObject(this.openmct, notebookImageDomainObject);
             } else {
                 const data = $event.dataTransfer.getData('openmct/domain-object-path');
                 const objectPath = JSON.parse(data);

src/plugins/notebook/components/NotebookMenuSwitcher.vue

@@ -17,19 +17,26 @@
 
 <script>
 import Snapshot from '../snapshot';
-import { getDefaultNotebook, getNotebookSectionAndPage, validateNotebookStorageObject } from '../utils/notebook-storage';
+import { getDefaultNotebook, validateNotebookStorageObject } from '../utils/notebook-storage';
 import { NOTEBOOK_DEFAULT, NOTEBOOK_SNAPSHOT } from '../notebook-constants';
+import { getMenuItems } from '../utils/notebook-snapshot-menu';
 
 export default {
     inject: ['openmct'],
     props: {
+        currentView: {
+            type: Object,
+            default() {
+                return {};
+            }
+        },
         domainObject: {
             type: Object,
             default() {
                 return {};
             }
         },
-        ignoreLink: {
+        isPreview: {
             type: Boolean,
             default() {
                 return false;
@@ -50,51 +57,40 @@ export default {
     },
     mounted() {
         validateNotebookStorageObject();
-        this.getDefaultNotebookObject();
 
         this.notebookSnapshot = new Snapshot(this.openmct);
         this.setDefaultNotebookStatus();
     },
     methods: {
-        getDefaultNotebookObject() {
-            const defaultNotebook = getDefaultNotebook();
+        getPreviewObjectLink() {
+            const relativePath = this.openmct.objects.getRelativePath(this.objectPath);
+            const urlParams = this.openmct.router.getParams();
+            urlParams.view = this.currentView.key;
 
-            return defaultNotebook && this.openmct.objects.get(defaultNotebook.identifier);
+            const urlParamsString = Object.entries(urlParams)
+                .map(([key, value]) => `${key}=${value}`)
+                .join('&');
+
+            return `#/browse/${relativePath}?${urlParamsString}`;
         },
         async showMenu(event) {
-            const notebookTypes = [];
+            const menuItemOptions = {
+                default: {
+                    cssClass: 'icon-notebook',
+                    name: `Save to Notebook`,
+                    onItemClicked: () => this.snapshot(NOTEBOOK_DEFAULT, event.target)
+                },
+                snapshot: {
+                    cssClass: 'icon-camera',
+                    name: 'Save to Notebook Snapshots',
+                    onItemClicked: () => this.snapshot(NOTEBOOK_SNAPSHOT, event.target)
+                }
+            };
+
+            const notebookTypes = await getMenuItems(this.openmct, menuItemOptions);
             const elementBoundingClientRect = this.$el.getBoundingClientRect();
             const x = elementBoundingClientRect.x;
             const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
-
-            const defaultNotebookObject = await this.getDefaultNotebookObject();
-            if (defaultNotebookObject) {
-                const defaultNotebook = getDefaultNotebook();
-                const { section, page } = getNotebookSectionAndPage(defaultNotebookObject, defaultNotebook.defaultSectionId, defaultNotebook.defaultPageId);
-                if (section && page) {
-                    const name = defaultNotebookObject.name;
-                    const sectionName = section.name;
-                    const pageName = page.name;
-                    const defaultPath = `${name} - ${sectionName} - ${pageName}`;
-
-                    notebookTypes.push({
-                        cssClass: 'icon-notebook',
-                        name: `Save to Notebook ${defaultPath}`,
-                        onItemClicked: () => {
-                            return this.snapshot(NOTEBOOK_DEFAULT, event.target);
-                        }
-                    });
-                }
-            }
-
-            notebookTypes.push({
-                cssClass: 'icon-camera',
-                name: 'Save to Notebook Snapshots',
-                onItemClicked: () => {
-                    return this.snapshot(NOTEBOOK_SNAPSHOT, event.target);
-                }
-            });
-
             this.openmct.menus.showMenu(x, y, notebookTypes);
         },
         snapshot(notebookType, target) {
@@ -102,15 +98,12 @@ export default {
                 const wrapper = target && target.closest('.js-notebook-snapshot-item-wrapper')
                     || document;
                 const element = wrapper.querySelector('.js-notebook-snapshot-item');
-
-                const bounds = this.openmct.time.bounds();
-                const link = !this.ignoreLink
-                    ? window.location.hash
-                    : null;
-
                 const objectPath = this.objectPath || this.openmct.router.path;
+                const link = this.isPreview
+                    ? this.getPreviewObjectLink()
+                    : window.location.hash;
                 const snapshotMeta = {
-                    bounds,
+                    bounds: this.openmct.time.bounds(),
                     link,
                     objectPath,
                     openmct: this.openmct

src/plugins/notebook/components/NotebookSnapshotContainer.vue

@@ -27,15 +27,15 @@
     </div><!-- closes l-browse-bar -->
     <div class="c-snapshots">
         <span v-for="snapshot in snapshots"
-              :key="snapshot.id"
+              :key="snapshot.embedObject.id"
               draggable="true"
               @dragstart="startEmbedDrag(snapshot, $event)"
         >
             <NotebookEmbed ref="notebookEmbed"
-                           :key="snapshot.id"
-                           :embed="snapshot"
+                           :key="snapshot.embedObject.id"
+                           :embed="snapshot.embedObject"
+                           :is-snapshot-container="true"
                            :remove-action-string="'Delete Snapshot'"
-                           @updateEmbed="updateSnapshot"
                            @removeEmbed="removeSnapshot"
             />
         </span>
@@ -119,11 +119,8 @@ export default {
             this.snapshots = this.snapshotContainer.getSnapshots();
         },
         startEmbedDrag(snapshot, event) {
-            event.dataTransfer.setData('text/plain', snapshot.id);
-            event.dataTransfer.setData('openmct/snapshot/id', snapshot.id);
-        },
-        updateSnapshot(snapshot) {
-            this.snapshotContainer.updateSnapshot(snapshot);
+            event.dataTransfer.setData('text/plain', snapshot.embedObject.id);
+            event.dataTransfer.setData('openmct/snapshot/id', snapshot.embedObject.id);
         }
     }
 };

src/plugins/notebook/snapshot-container.js

@@ -18,13 +18,18 @@ export default class SnapshotContainer extends EventEmitter {
         return SnapshotContainer.instance;
     }
 
-    addSnapshot(embedObject) {
+    addSnapshot(notebookImageDomainObject, embedObject) {
         const snapshots = this.getSnapshots();
         if (snapshots.length >= NOTEBOOK_SNAPSHOT_MAX_COUNT) {
             snapshots.pop();
         }
 
-        snapshots.unshift(embedObject);
+        const snapshotObject = {
+            notebookImageDomainObject,
+            embedObject
+        };
+
+        snapshots.unshift(snapshotObject);
 
         return this.saveSnapshots(snapshots);
     }
@@ -32,7 +37,7 @@ export default class SnapshotContainer extends EventEmitter {
     getSnapshot(id) {
         const snapshots = this.getSnapshots();
 
-        return snapshots.find(s => s.id === id);
+        return snapshots.find(s => s.embedObject.id === id);
     }
 
     getSnapshots() {
@@ -47,7 +52,7 @@ export default class SnapshotContainer extends EventEmitter {
         }
 
         const snapshots = this.getSnapshots();
-        const filteredsnapshots = snapshots.filter(snapshot => snapshot.id !== id);
+        const filteredsnapshots = snapshots.filter(snapshot => snapshot.embedObject.id !== id);
 
         return this.saveSnapshots(filteredsnapshots);
     }
@@ -73,7 +78,7 @@ export default class SnapshotContainer extends EventEmitter {
     updateSnapshot(snapshot) {
         const snapshots = this.getSnapshots();
         const updatedSnapshots = snapshots.map(s => {
-            return s.id === snapshot.id
+            return s.embedObject.id === snapshot.embedObject.id
                 ? snapshot
                 : s;
         });

src/plugins/notebook/snapshot.js

@@ -1,7 +1,7 @@
 import { addNotebookEntry, createNewEmbed } from './utils/notebook-entries';
 import { getDefaultNotebook, getNotebookSectionAndPage, getDefaultNotebookLink, setDefaultNotebook } from './utils/notebook-storage';
 import { NOTEBOOK_DEFAULT } from '@/plugins/notebook/notebook-constants';
-import { createNotebookImageDomainObject, DEFAULT_SIZE } from './utils/notebook-image';
+import { createNotebookImageDomainObject, saveNotebookImageDomainObject, updateNamespaceOfDomainObject, DEFAULT_SIZE } from './utils/notebook-image';
 
 import SnapshotContainer from './snapshot-container';
 import ImageExporter from '../../exporters/ImageExporter';
@@ -35,29 +35,28 @@ export default class Snapshot {
      * @private
      */
     _saveSnapShot(notebookType, fullSizeImageURL, thumbnailImageURL, snapshotMeta) {
-        createNotebookImageDomainObject(this.openmct, fullSizeImageURL)
-            .then(object => {
-                const thumbnailImage = { src: thumbnailImageURL || '' };
-                const snapshot = {
-                    fullSizeImageObjectIdentifier: object.identifier,
-                    thumbnailImage
-                };
-                const embed = createNewEmbed(snapshotMeta, snapshot);
-                if (notebookType === NOTEBOOK_DEFAULT) {
-                    this._saveToDefaultNoteBook(embed);
+        const object = createNotebookImageDomainObject(fullSizeImageURL);
+        const thumbnailImage = { src: thumbnailImageURL || '' };
+        const snapshot = {
+            fullSizeImageObjectIdentifier: object.identifier,
+            thumbnailImage
+        };
+        const embed = createNewEmbed(snapshotMeta, snapshot);
+        if (notebookType === NOTEBOOK_DEFAULT) {
+            const notebookStorage = getDefaultNotebook();
 
-                    return;
-                }
-
-                this._saveToNotebookSnapshots(embed);
-            });
+            this._saveToDefaultNoteBook(notebookStorage, embed);
+            const notebookImageDomainObject = updateNamespaceOfDomainObject(object, notebookStorage.identifier.namespace);
+            saveNotebookImageDomainObject(this.openmct, notebookImageDomainObject);
+        } else {
+            this._saveToNotebookSnapshots(object, embed);
+        }
     }
 
     /**
      * @private
      */
-    _saveToDefaultNoteBook(embed) {
-        const notebookStorage = getDefaultNotebook();
+    _saveToDefaultNoteBook(notebookStorage, embed) {
         this.openmct.objects.get(notebookStorage.identifier)
             .then(async (domainObject) => {
                 addNotebookEntry(this.openmct, domainObject, notebookStorage, embed);
@@ -85,19 +84,22 @@ export default class Snapshot {
     /**
      * @private
      */
-    _saveToNotebookSnapshots(embed) {
-        this.snapshotContainer.addSnapshot(embed);
+    _saveToNotebookSnapshots(notebookImageDomainObject, embed) {
+        this.snapshotContainer.addSnapshot(notebookImageDomainObject, embed);
     }
 
     _showNotification(msg, url) {
         const options = {
-            autoDismissTimeout: 30000,
-            link: {
+            autoDismissTimeout: 30000
+        };
+
+        if (!this.openmct.editor.isEditing()) {
+            options.link = {
                 cssClass: '',
                 text: 'click to view',
                 onClick: this._navigateToNotebook(url)
-            }
-        };
+            };
+        }
 
         this.openmct.notifications.info(msg, options);
     }
@@ -108,7 +110,8 @@ export default class Snapshot {
         }
 
         return () => {
-            window.location.href = window.location.origin + url;
+            const path = window.location.href.split('#');
+            window.location.href = path[0] + url;
         };
     }
 }

src/plugins/notebook/utils/notebook-image.js

@@ -5,14 +5,14 @@ export const DEFAULT_SIZE = {
     height: 30
 };
 
-export function createNotebookImageDomainObject(openmct, fullSizeImageURL) {
+export function createNotebookImageDomainObject(fullSizeImageURL) {
     const identifier = {
         key: uuid(),
         namespace: ''
     };
     const viewType = 'notebookSnapshotImage';
 
-    const object = {
+    return {
         name: 'Notebook Snapshot Image',
         type: viewType,
         identifier,
@@ -20,21 +20,6 @@ export function createNotebookImageDomainObject(openmct, fullSizeImageURL) {
             fullSizeImageURL
         }
     };
-
-    return new Promise((resolve, reject) => {
-        openmct.objects.save(object)
-            .then(result => {
-                if (result) {
-                    resolve(object);
-                }
-
-                reject();
-            })
-            .catch(e => {
-                console.error(e);
-                reject();
-            });
-    });
 }
 
 export function getThumbnailURLFromCanvas(canvas, size = DEFAULT_SIZE) {
@@ -67,6 +52,23 @@ export function getThumbnailURLFromimageUrl(imageUrl, size = DEFAULT_SIZE) {
     });
 }
 
+export function saveNotebookImageDomainObject(openmct, object) {
+    return new Promise((resolve, reject) => {
+        openmct.objects.save(object)
+            .then(result => {
+                if (result) {
+                    resolve(object);
+                } else {
+                    reject();
+                }
+            })
+            .catch(e => {
+                console.error(e);
+                reject();
+            });
+    });
+}
+
 export function updateNotebookImageDomainObject(openmct, identifier, fullSizeImage) {
     openmct.objects.get(identifier)
         .then(domainObject => {
@@ -76,3 +78,9 @@ export function updateNotebookImageDomainObject(openmct, identifier, fullSizeIma
             openmct.objects.mutate(domainObject, 'configuration', configuration);
         });
 }
+
+export function updateNamespaceOfDomainObject(object, namespace) {
+    object.identifier.namespace = namespace;
+
+    return object;
+}

src/plugins/notebook/utils/notebook-migration.js

@@ -1,16 +1,18 @@
-import { createNotebookImageDomainObject, getThumbnailURLFromimageUrl } from './notebook-image';
+import { createNotebookImageDomainObject, getThumbnailURLFromimageUrl, saveNotebookImageDomainObject, updateNamespaceOfDomainObject } from './notebook-image';
 import { mutateObject } from './notebook-entries';
 
+const IMAGE_MIGRATION_VER = "v1";
+
 export function notebookImageMigration(openmct, domainObject) {
     const configuration = domainObject.configuration;
     const notebookEntries = configuration.entries;
 
     const imageMigrationVer = configuration.imageMigrationVer;
-    if (imageMigrationVer && imageMigrationVer === 'v1') {
+    if (imageMigrationVer && imageMigrationVer === IMAGE_MIGRATION_VER) {
         return;
     }
 
-    configuration.imageMigrationVer = 'v1';
+    configuration.imageMigrationVer = IMAGE_MIGRATION_VER;
 
     // to avoid muliple notebookImageMigration calls updating images.
     mutateObject(openmct, domainObject, 'configuration', configuration);
@@ -27,14 +29,16 @@ export function notebookImageMigration(openmct, domainObject) {
                     const fullSizeImageURL = snapshot.src;
                     if (fullSizeImageURL) {
                         const thumbnailImageURL = await getThumbnailURLFromimageUrl(fullSizeImageURL);
-                        const notebookImageDomainObject = await createNotebookImageDomainObject(openmct, fullSizeImageURL);
-
+                        const object = createNotebookImageDomainObject(fullSizeImageURL);
+                        const notebookImageDomainObject = updateNamespaceOfDomainObject(object, domainObject.identifier.namespace);
                         embed.snapshot = {
                             fullSizeImageObjectIdentifier: notebookImageDomainObject.identifier,
                             thumbnailImage: { src: thumbnailImageURL || '' }
                         };
 
                         mutateObject(openmct, domainObject, 'configuration.entries', notebookEntries);
+
+                        saveNotebookImageDomainObject(openmct, notebookImageDomainObject);
                     }
                 });
             });

src/plugins/notebook/utils/notebook-snapshot-menu.js

@@ -0,0 +1,31 @@
+import { getDefaultNotebook, getNotebookSectionAndPage } from './notebook-storage';
+
+export async function getMenuItems(openmct, menuItemOptions) {
+    const notebookTypes = [];
+
+    const defaultNotebook = getDefaultNotebook();
+    const defaultNotebookObject = defaultNotebook && await openmct.objects.get(defaultNotebook.identifier);
+    if (defaultNotebookObject) {
+        const { section, page } = getNotebookSectionAndPage(defaultNotebookObject, defaultNotebook.defaultSectionId, defaultNotebook.defaultPageId);
+        if (section && page) {
+            const name = defaultNotebookObject.name;
+            const sectionName = section.name;
+            const pageName = page.name;
+            const defaultPath = `${name} - ${sectionName} - ${pageName}`;
+
+            notebookTypes.push({
+                cssClass: menuItemOptions.default.cssClass,
+                name: `${menuItemOptions.default.name} ${defaultPath}`,
+                onItemClicked: menuItemOptions.default.onItemClicked
+            });
+        }
+    }
+
+    notebookTypes.push({
+        cssClass: menuItemOptions.snapshot.cssClass,
+        name: menuItemOptions.snapshot.name,
+        onItemClicked: menuItemOptions.snapshot.onItemClicked
+    });
+
+    return notebookTypes;
+}

src/plugins/notebook/utils/notebook-storage.js

@@ -71,11 +71,7 @@ export async function getDefaultNotebookLink(openmct, domainObject = null) {
     }
 
     const path = await openmct.objects.getOriginalPath(domainObject.identifier)
-        .then(objectPath => objectPath
-            .map(o => o && openmct.objects.makeKeyString(o.identifier))
-            .reverse()
-            .join('/')
-        );
+        .then(openmct.objects.getRelativePath);
     const { defaultPageId, defaultSectionId } = getDefaultNotebook();
 
     return `#/browse/${path}?sectionId=${defaultSectionId}&pageId=${defaultPageId}`;

src/plugins/plot/MctPlot.vue

@@ -393,12 +393,31 @@ export default {
             });
         },
 
-        clearData() {
+        clearSeries() {
             this.config.series.forEach(function (series) {
                 series.reset();
             });
         },
 
+        compositionPathContainsId(domainObjectToClear) {
+            return domainObjectToClear.composition.some((compositionIdentifier) => {
+                return this.openmct.objects.areIdsEqual(compositionIdentifier, this.domainObject.identifier);
+            });
+        },
+
+        clearData(domainObjectToClear) {
+            // If we don't have an object to clear (global), or the IDs are equal, just clear the data.
+            // If we have an object to clear, but the IDs don't match, we need to check the composition
+            // of the object we've been asked to clear to see if it contains the id we're looking for.
+            // This happens with stacked plots for example.
+            // If we find the ID, clear the plot.
+            if (!domainObjectToClear
+            || this.openmct.objects.areIdsEqual(domainObjectToClear.identifier, this.domainObject.identifier)
+            || this.compositionPathContainsId(domainObjectToClear)) {
+                this.clearSeries();
+            }
+        },
+
         setDisplayRange(series, xKey) {
             if (this.config.series.length !== 1) {
                 return;
@@ -1010,7 +1029,8 @@ export default {
             this.$emit('statusUpdated', status);
         },
         handleWindowResize() {
-            if (this.offsetWidth !== this.$parent.$refs.plotWrapper.offsetWidth) {
+            if (this.$parent.$refs.plotWrapper
+                && (this.offsetWidth !== this.$parent.$refs.plotWrapper.offsetWidth)) {
                 this.offsetWidth = this.$parent.$refs.plotWrapper.offsetWidth;
                 this.config.series.models.forEach(this.loadSeriesData, this);
             }

src/plugins/plot/lib/ColorPalette.js

@@ -89,4 +89,13 @@ ColorPalette.prototype.getNextColor = function () {
     return this.availableColors.shift();
 };
 
+/**
+ * @param {number} index the index of the color to return.  An index
+ * value larger than the size of the index will wrap around.
+ * @returns {Color}
+ */
+ColorPalette.prototype.getColor = function (index) {
+    return this.colors[index % this.colors.length];
+};
+
 export default ColorPalette;

src/plugins/plot/plugin.js

@@ -19,17 +19,13 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import { SPECTRAL_AGGREGATE_KEY } from './spectralAggregatePlot/SpectralAggregateConstants';
+
 import PlotViewProvider from './PlotViewProvider';
-import SpectralPlotViewProvider from './spectralPlot/SpectralPlotViewProvider';
-import SpectralAggregatePlotViewProvider from './spectralAggregatePlot/SpectralAggregatePlotViewProvider';
 import OverlayPlotViewProvider from './overlayPlot/OverlayPlotViewProvider';
 import StackedPlotViewProvider from './stackedPlot/StackedPlotViewProvider';
 import PlotsInspectorViewProvider from './inspector/PlotsInspectorViewProvider';
 import OverlayPlotCompositionPolicy from './overlayPlot/OverlayPlotCompositionPolicy';
 import StackedPlotCompositionPolicy from './stackedPlot/StackedPlotCompositionPolicy';
-import SpectralPlotCompositionPolicy from './spectralPlot/SpectralPlotCompositionPolicy';
-import SpectralAggregatePlotCompositionPolicy from './spectralAggregatePlot/SpectralAggregatePlotCompositionPolicy';
 
 export default function () {
     return function install(openmct) {
@@ -63,46 +59,13 @@ export default function () {
             },
             priority: 890
         });
-        openmct.types.addType('telemetry.plot.spectral', {
-            key: "telemetry.plot.spectral",
-            name: "Spectral Plot",
-            cssClass: "icon-plot-stacked",
-            description: "View Spectra on Y Axes with non-time domain on the X axis. Can be added to Display Layouts.",
-            creatable: true,
-            initialize: function (domainObject) {
-                domainObject.composition = [];
-                domainObject.configuration = {};
-            },
-            priority: 890
-        });
-
-        openmct.types.addType(SPECTRAL_AGGREGATE_KEY, {
-            key: SPECTRAL_AGGREGATE_KEY,
-            name: "Spectral Aggregate Plot",
-            cssClass: "icon-plot-stacked",
-            description: "View Spectra on Y Axes with non-time domain on the X axis. Can be added to Display Layouts.",
-            creatable: true,
-            initialize: function (domainObject) {
-                domainObject.composition = [];
-                domainObject.configuration = {
-                    plotType: 'bar'
-                };
-            },
-            priority: 891
-        });
 
         openmct.objectViews.addProvider(new StackedPlotViewProvider(openmct));
         openmct.objectViews.addProvider(new OverlayPlotViewProvider(openmct));
         openmct.objectViews.addProvider(new PlotViewProvider(openmct));
-        openmct.objectViews.addProvider(new SpectralPlotViewProvider(openmct));
-        openmct.objectViews.addProvider(new SpectralAggregatePlotViewProvider(openmct));
-
         openmct.inspectorViews.addProvider(new PlotsInspectorViewProvider(openmct));
-
         openmct.composition.addPolicy(new OverlayPlotCompositionPolicy(openmct).allow);
         openmct.composition.addPolicy(new StackedPlotCompositionPolicy(openmct).allow);
-        openmct.composition.addPolicy(new SpectralPlotCompositionPolicy(openmct).allow);
-        openmct.composition.addPolicy(new SpectralAggregatePlotCompositionPolicy(openmct).allow);
     };
 }
 

src/plugins/plot/pluginSpec.js

@@ -24,12 +24,10 @@ import {createMouseEvent, createOpenMct, resetApplicationState, spyOnBuiltins} f
 import PlotVuePlugin from "./plugin";
 import Vue from "vue";
 import StackedPlot from "./stackedPlot/StackedPlot.vue";
-// import SpectralPlot from "./spectralPlot/SpectralPlot.vue";
 import configStore from "./configuration/configStore";
 import EventEmitter from "EventEmitter";
 import PlotOptions from "./inspector/PlotOptions.vue";
 import PlotConfigurationModel from "./configuration/PlotConfigurationModel";
-import { SPECTRAL_AGGREGATE_VIEW, SPECTRAL_AGGREGATE_KEY } from './spectralAggregatePlot/SpectralAggregateConstants';
 
 describe("the plugin", function () {
     let element;
@@ -314,38 +312,6 @@ describe("the plugin", function () {
             let plotView = applicableViews.find((viewProvider) => viewProvider.key === "plot-stacked");
             expect(plotView).toBeDefined();
         });
-
-        it("provides a spectral plot view for objects with telemetry", () => {
-            const testTelemetryObject = {
-                id: "test-object",
-                type: "telemetry.plot.spectral",
-                telemetry: {
-                    values: [{
-                        key: "a-very-fine-key"
-                    }]
-                }
-            };
-
-            const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
-            let plotView = applicableViews.find((viewProvider) => viewProvider.key === "plot-spectral");
-            expect(plotView).toBeDefined();
-        });
-
-        it("provides a spectral aggregate plot view for objects with telemetry", () => {
-            const testTelemetryObject = {
-                id: "test-object",
-                type: SPECTRAL_AGGREGATE_KEY,
-                telemetry: {
-                    values: [{
-                        key: "lots-of-aggregate-telemetry"
-                    }]
-                }
-            };
-
-            const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
-            let plotView = applicableViews.find((viewProvider) => viewProvider.key === SPECTRAL_AGGREGATE_VIEW);
-            expect(plotView).toBeDefined();
-        });
     });
 
     describe("The single plot view", () => {
@@ -496,146 +462,6 @@ describe("the plugin", function () {
         });
     });
 
-    /*
-    * disabling this until we develop the plot view
-    describe("The spectral plot view", () => {
-        let testTelemetryObject;
-        // eslint-disable-next-line no-unused-vars
-        let testTelemetryObject2;
-        // eslint-disable-next-line no-unused-vars
-        let config;
-        let spectralPlotObject;
-        let component;
-        let mockComposition;
-        // eslint-disable-next-line no-unused-vars
-        let plotViewComponentObject;
-
-        beforeEach(() => {
-            const getFunc = openmct.$injector.get;
-            spyOn(openmct.$injector, "get")
-                .withArgs("exportImageService").and.returnValue({
-                    exportPNG: () => {},
-                    exportJPG: () => {}
-                })
-                .and.callFake(getFunc);
-
-            spectralPlotObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-spectral-plot"
-                },
-                type: "telemetry.plot.spectral",
-                name: "Test Spectral Plot"
-            };
-
-            testTelemetryObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
-                },
-                type: "test-object",
-                name: "Test Object",
-                telemetry: {
-                    values: [{
-                        key: "utc",
-                        format: "utc",
-                        name: "Time",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-key",
-                        name: "Some attribute",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        key: "some-other-key",
-                        name: "Another attribute",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                }
-            };
-
-            testTelemetryObject2 = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object2"
-                },
-                type: "test-object",
-                name: "Test Object2",
-                telemetry: {
-                    values: [{
-                        key: "utc",
-                        format: "utc",
-                        name: "Time",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "wavelength",
-                        name: "Wavelength",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        key: "some-other-key2",
-                        name: "Another attribute2",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                }
-            };
-
-            mockComposition = new EventEmitter();
-            mockComposition.load = () => {
-                mockComposition.emit('add', testTelemetryObject);
-
-                return [testTelemetryObject];
-            };
-
-            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
-
-            let viewContainer = document.createElement("div");
-            child.append(viewContainer);
-            component = new Vue({
-                el: viewContainer,
-                components: {
-                    SpectralPlot
-                },
-                provide: {
-                    openmct: openmct,
-                    domainObject: spectralPlotObject,
-                    composition: openmct.composition.get(spectralPlotObject)
-                },
-                template: "<spectral-plot></spectral-plot>"
-            });
-
-            cleanupFirst.push(() => {
-                component.$destroy();
-                component = undefined;
-            });
-
-            return telemetryPromise
-                .then(Vue.nextTick())
-                .then(() => {
-                    plotViewComponentObject = component.$root.$children[0];
-                    const configId = openmct.objects.makeKeyString(testTelemetryObject.identifier);
-                    config = configStore.get(configId);
-                });
-        });
-
-        it("Renders a collapsed legend for every telemetry", () => {
-            let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
-            expect(legend.length).toBe(1);
-            expect(legend[0].innerHTML).toEqual("Test Object");
-        });
-
-    }); */
-
     describe("The stacked plot view", () => {
         let testTelemetryObject;
         let testTelemetryObject2;
@@ -1164,39 +990,4 @@ describe("the plugin", function () {
         });
     });
 
-    describe("the spectral plot", () => {
-        const mockObject = {
-            name: 'A Very Nice Spectral Plot',
-            key: 'telemetry.plot.spectral',
-            creatable: true
-        };
-
-        it('defines a spectral plot object type with the correct key', () => {
-            const objectDef = openmct.types.get('telemetry.plot.spectral').definition;
-            expect(objectDef.key).toEqual(mockObject.key);
-        });
-
-        it('is creatable', () => {
-            const objectDef = openmct.types.get('telemetry.plot.spectral').definition;
-            expect(objectDef.creatable).toEqual(mockObject.creatable);
-        });
-    });
-
-    describe("the aggregate spectral plot", () => {
-        const mockObject = {
-            name: 'An Even Nicer Aggregate Spectral Plot',
-            key: SPECTRAL_AGGREGATE_KEY,
-            creatable: true
-        };
-
-        it('defines a spectral plot object type with the correct key', () => {
-            const objectDef = openmct.types.get(SPECTRAL_AGGREGATE_KEY).definition;
-            expect(objectDef.key).toEqual(mockObject.key);
-        });
-
-        it('is creatable', () => {
-            const objectDef = openmct.types.get(SPECTRAL_AGGREGATE_KEY).definition;
-            expect(objectDef.creatable).toEqual(mockObject.creatable);
-        });
-    });
 });

src/plugins/plot/spectralAggregatePlot/SpectralAggregateConstants.js

@@ -1,10 +0,0 @@
-export const CONFIGURATION_CHANGED = 'configurationChanged';
-export const HOVER_VALUES_CHANGED = 'hoverValuesChanged';
-export const HOVER_VALUES_CLEARED = 'hoverValuesCleared';
-export const LEGEND_EXPANDED = 'plot-legends-expanded';
-export const REALTIME_POLL_INTERVAL_IN_MS = 5000;
-
-export const SPECTRAL_AGGREGATE_VIEW = 'plot.spectral.aggregate.view';
-export const SPECTRAL_AGGREGATE_KEY = 'telemetry.plot.spectral.aggregate';
-export const SUBSCRIBE = 'subscribe';
-export const UNSUBSCRIBE = 'unsubscribe';

src/plugins/plot/spectralAggregatePlot/SpectralAggregatePlot.vue

@@ -1,289 +0,0 @@
-<template>
-<div ref="plotWrapper"
-     class="has-local-controls"
-     :class="{ 's-unsynced' : isZoomed }"
->
-    <div v-if="isZoomed"
-         class="l-state-indicators"
-    >
-        <span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
-              title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."
-        ></span>
-    </div>
-    <div ref="plot"
-         class="c-spectral-aggregate-plot__plot"
-    ></div>
-    <div ref="localControl"
-         class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover"
-    >
-        <button v-if="data.length"
-                class="c-button icon-reset"
-                :disabled="!isZoomed"
-                title="Reset pan/zoom"
-                @click="reset()"
-        >
-        </button>
-    </div>
-</div>
-</template>
-<script>
-import Plotly from 'plotly.js/dist/plotly';
-import { HOVER_VALUES_CLEARED, HOVER_VALUES_CHANGED, SUBSCRIBE, UNSUBSCRIBE } from './SpectralAggregateConstants';
-
-const PLOT_PADDING_IN_PERCENT = 1;
-const MULTI_AXES_X_PADDING_PERCENT = {
-    LEFT: 8,
-    RIGHT: 94
-};
-
-export default {
-    inject: ['openmct', 'domainObject'],
-    props: [
-        'data',
-        'legendExpanded',
-        'plotAxisTitle'
-    ],
-    data() {
-        return {
-            isZoomed: false,
-            primaryYAxisRange: {
-                min: '',
-                max: ''
-            },
-            xAxisRange: {
-                min: '',
-                max: ''
-            }
-        };
-    },
-    watch: {
-        data: {
-            immediate: false,
-            handler: 'updateData'
-        },
-        legendExpanded: {
-            immediate: false,
-            handler: 'updatePlot'
-        }
-    },
-    mounted() {
-        Plotly.newPlot(this.$refs.plot, Array.from(this.data), this.getLayout(), {
-            responsive: true,
-            displayModeBar: false
-        });
-        this.registerListeners();
-    },
-    beforeDestroy() {
-        this.$refs.plot.removeAllListeners();
-
-        if (this.plotResizeObserver) {
-            this.plotResizeObserver.unobserve(this.$refs.plotWrapper);
-            clearTimeout(this.resizeTimer);
-        }
-    },
-    methods: {
-        getAxisMinMax(axis) {
-            const min = axis.autoSize
-                ? ''
-                : axis.min;
-            const max = axis.autoSize
-                ? ''
-                : axis.max;
-
-            return {
-                min,
-                max
-            };
-        },
-        getAxisPadding(min, max) {
-            return (Math.abs(max - min) * PLOT_PADDING_IN_PERCENT / 100) || 0;
-        },
-        getLayout() {
-            const yAxesMeta = this.getYAxisMeta();
-            const primaryYaxis = this.getYaxisLayout(yAxesMeta['1']);
-            const xAxisDomain = this.getXAxisDomain(yAxesMeta);
-
-            return {
-                // hovermode: 'closest',
-                // hoverdistance: -1,
-                autosize: true,
-                showlegend: false,
-                font: {
-                    family: 'Helvetica Neue, Helvetica, Arial, sans-serif',
-                    size: '12px',
-                    color: '#666'
-                },
-                xaxis: {
-                    domain: xAxisDomain,
-                    // hoverformat: '.2r',
-                    range: [this.xAxisRange.min, this.xAxisRange.max],
-                    title: this.plotAxisTitle.xAxisTitle
-                    // zeroline: false
-                },
-                yaxis: primaryYaxis,
-                margin: {
-                    l: 40,
-                    r: 10,
-                    b: 40,
-                    t: 20
-                },
-                paper_bgcolor: 'transparent',
-                plot_bgcolor: 'transparent'
-            };
-        },
-        getYAxisMeta() {
-            const yAxisMeta = {};
-
-            this.data.forEach(d => {
-                const yAxisMetadata = d.yAxisMetadata;
-                const range = '1';
-                const side = 'left';
-                const name = '';
-                const unit = yAxisMetadata.units;
-
-                yAxisMeta[range] = {
-                    range,
-                    side,
-                    name,
-                    unit
-                };
-            });
-
-            return yAxisMeta;
-        },
-        getXAxisDomain(yAxisMeta) {
-            let leftPaddingPerc = 0;
-            let rightPaddingPerc = 100;
-            let rightSide = yAxisMeta && Object.values(yAxisMeta).filter((axisMeta => axisMeta.side === 'right'));
-            let leftSide = yAxisMeta && Object.values(yAxisMeta).filter((axisMeta => axisMeta.side === 'left'));
-            if (yAxisMeta && rightSide.length > 1) {
-                rightPaddingPerc = MULTI_AXES_X_PADDING_PERCENT.RIGHT;
-            }
-
-            if (yAxisMeta && leftSide.length > 1) {
-                leftPaddingPerc = MULTI_AXES_X_PADDING_PERCENT.LEFT;
-            }
-
-            return [leftPaddingPerc / 100, rightPaddingPerc / 100];
-        },
-        getYaxisLayout(yAxisMeta) {
-            if (!yAxisMeta) {
-                return {};
-            }
-
-            const { name, range, side = 'left', unit } = yAxisMeta;
-            const title = `${name} ${unit ? '(' + unit + ')' : ''}`;
-            const yaxis = {
-                // hoverformat: '.2r',
-                // showgrid: true,
-                title
-                // zeroline: false
-            };
-
-            let yAxistype = this.primaryYAxisRange;
-            if (range === '1') {
-                yaxis.range = [yAxistype.min, yAxistype.max];
-
-                return yaxis;
-            }
-
-            yaxis.range = [yAxistype.min, yAxistype.max];
-            yaxis.anchor = side.toLowerCase() === 'left'
-                ? 'free'
-                : 'x';
-            yaxis.showline = side.toLowerCase() === 'left';
-            yaxis.side = side.toLowerCase();
-            yaxis.overlaying = 'y';
-            yaxis.position = 0.01;
-
-            return yaxis;
-        },
-        handleHover(isHovered, itemValues) {
-            return () => {
-                this.updateLocalControlPosition(isHovered);
-
-                const eventName = isHovered ? HOVER_VALUES_CHANGED : HOVER_VALUES_CLEARED;
-                this.$emit(eventName, { itemValues });
-            };
-        },
-        registerListeners() {
-            this.$refs.plot.on('plotly_hover', this.handleHover.bind(this, true));
-            this.$refs.plot.on('plotly_unhover', this.handleHover.bind(this, false));
-            this.$refs.plot.on('plotly_relayout', this.zoom);
-            this.resizeTimer = false;
-            if (window.ResizeObserver) {
-                this.plotResizeObserver = new ResizeObserver(() => {
-                    // debounce and trigger window resize so that plotly can resize the plot
-                    clearTimeout(this.resizeTimer);
-                    this.resizeTimer = setTimeout(() => {
-                        window.dispatchEvent(new Event('resize'));
-                    }, 250);
-                });
-                this.plotResizeObserver.observe(this.$refs.plotWrapper);
-            }
-        },
-        reset() {
-            this.updatePlot();
-
-            this.isZoomed = false;
-            this.$emit(SUBSCRIBE);
-        },
-        updateData() {
-            this.updatePlot();
-        },
-        updateLocalControlPosition() {
-            const localControl = this.$refs.localControl;
-            localControl.style.display = 'none';
-
-            const plot = this.$refs.plot;
-            const bgLayer = this.$el.querySelector('.bglayer');
-
-            const plotBoundingRect = plot.getBoundingClientRect();
-            const bgLayerBoundingRect = bgLayer.getBoundingClientRect();
-
-            const top = bgLayerBoundingRect.top - plotBoundingRect.top + 5;
-            const left = bgLayerBoundingRect.left - plotBoundingRect.left + 5;
-
-            localControl.style.top = `${top}px`;
-            localControl.style.left = `${left}px`;
-            localControl.style.display = 'block';
-        },
-        updatePlot() {
-            if (!this.$refs || !this.$refs.plot) {
-                return;
-            }
-
-            Plotly.react(this.$refs.plot, Array.from(this.data), this.getLayout());
-        },
-        zoom(eventData) {
-            const autorange = eventData['xaxis.autorange'];
-            const { autosize } = eventData;
-
-            if (autosize || autorange) {
-                this.isZoomed = false;
-                this.reset();
-
-                return;
-            }
-
-            this.isZoomed = true;
-            this.$emit(UNSUBSCRIBE);
-        }
-    }
-};
-</script>
-
-<style lang="scss">
-    .c-spectral-aggregate-plot__plot {
-        height: 100%;
-    }
-
-    .c-spectral-aggregate-plot-view .gl-plot__local-controls {
-        top: 25px;
-    }
-
-    .has-local-controls {
-        border: 1px solid transparent;
-    }
-</style>
-

src/plugins/plot/spectralAggregatePlot/SpectralAggregatePlotCompositionPolicy.js

@@ -1,58 +0,0 @@
-/*****************************************************************************
- * 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 { SPECTRAL_AGGREGATE_KEY } from './SpectralAggregateConstants';
-export default function SpectralAggregatePlotCompositionPolicy(openmct) {
-    function hasAggregateDomainAndRange(metadata) {
-        const rangeValues = metadata.valuesForHints(['domain']);
-        const domainValues = metadata.valuesForHints(['range']);
-
-        return rangeValues.length > 0
-        || domainValues.length > 0;
-    }
-
-    function hasSpectralAggregateTelemetry(domainObject) {
-        if (!Object.prototype.hasOwnProperty.call(domainObject, 'telemetry')) {
-            return false;
-        }
-
-        let metadata = openmct.telemetry.getMetadata(domainObject);
-
-        return metadata.values().length > 0 && hasAggregateDomainAndRange(metadata);
-    }
-
-    function hasNoChildren(parentObject) {
-        return parentObject.composition && parentObject.composition.length < 1;
-    }
-
-    return {
-        allow: function (parent, child) {
-            if ((parent.type === SPECTRAL_AGGREGATE_KEY)
-                && ((child.type !== 'telemetry.plot.overlay') && (hasSpectralAggregateTelemetry(child) === false) || (hasNoChildren(parent) === false))
-            ) {
-                return false;
-            }
-
-            return true;
-        }
-    };
-}

src/plugins/plot/spectralAggregatePlot/SpectralAggregatePlotCompositionPolicySpec.js

@@ -1,376 +0,0 @@
-/*****************************************************************************
- * 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 SpectralAggregatePlotCompositionPolicy from "./SpectralAggregatePlotCompositionPolicy";
-import { createOpenMct } from "utils/testing";
-
-describe("The spectral aggregation plot composition policy", () => {
-    let openmct;
-    const mockNonSpectralMetaData = {
-        "period": 10,
-        "amplitude": 1,
-        "offset": 0,
-        "dataRateInHz": 1,
-        "phase": 0,
-        "randomness": 0,
-        valuesForHints: () => {
-            return [
-                {
-                    "key": "sin",
-                    "name": "Sine",
-                    "unit": "Hz",
-                    "formatString": "%0.2f",
-                    "hints": {
-                        "range": 1,
-                        "priority": 4
-                    },
-                    "source": "sin"
-                },
-                {
-                    "key": "cos",
-                    "name": "Cosine",
-                    "unit": "deg",
-                    "formatString": "%0.2f",
-                    "hints": {
-                        "range": 2,
-                        "priority": 5
-                    },
-                    "source": "cos"
-                }
-            ];
-        },
-        values: [
-            {
-                "key": "name",
-                "name": "Name",
-                "format": "string",
-                "source": "name",
-                "hints": {
-                    "priority": 0
-                }
-            },
-            {
-                "key": "utc",
-                "name": "Time",
-                "format": "utc",
-                "hints": {
-                    "domain": 1,
-                    "priority": 1
-                },
-                "source": "utc"
-            },
-            {
-                "key": "yesterday",
-                "name": "Yesterday",
-                "format": "utc",
-                "hints": {
-                    "domain": 2,
-                    "priority": 2
-                },
-                "source": "yesterday"
-            },
-            {
-                "key": "cos",
-                "name": "Cosine",
-                "unit": "deg",
-                "formatString": "%0.2f",
-                "hints": {
-                    "domain": 3,
-                    "priority": 3
-                },
-                "source": "cos"
-            },
-            {
-                "key": "sin",
-                "name": "Sine",
-                "unit": "Hz",
-                "formatString": "%0.2f",
-                "hints": {
-                    "range": 1,
-                    "priority": 4
-                },
-                "source": "sin"
-            },
-            {
-                "key": "cos",
-                "name": "Cosine",
-                "unit": "deg",
-                "formatString": "%0.2f",
-                "hints": {
-                    "range": 2,
-                    "priority": 5
-                },
-                "source": "cos"
-            }
-        ]
-    };
-    const mockGoodSpectralMetaData = {
-        "period": 10,
-        "amplitude": 1,
-        "offset": 0,
-        "dataRateInHz": 1,
-        "phase": 0,
-        "randomness": 0,
-        "wavelength": 0,
-        valuesForHints: () => {
-            return [
-                {
-                    "key": "sin",
-                    "name": "Sine",
-                    "unit": "Hz",
-                    "formatString": "%0.2f",
-                    "hints": {
-                        "range": 1,
-                        "priority": 4
-                    },
-                    "source": "sin"
-                },
-                {
-                    "key": "cos",
-                    "name": "Cosine",
-                    "unit": "deg",
-                    "formatString": "%0.2f",
-                    "hints": {
-                        "range": 2,
-                        "priority": 5
-                    },
-                    "source": "cos"
-                }
-            ];
-        },
-        values: [
-            {
-                "key": "name",
-                "name": "Name",
-                "format": "string",
-                "source": "name",
-                "hints": {
-                    "priority": 0
-                }
-            },
-            {
-                "key": "utc",
-                "name": "Time",
-                "format": "utc",
-                "hints": {
-                    "domain": 1,
-                    "priority": 1
-                },
-                "source": "utc"
-            },
-            {
-                "key": "yesterday",
-                "name": "Yesterday",
-                "format": "utc",
-                "hints": {
-                    "domain": 2,
-                    "priority": 2
-                },
-                "source": "yesterday"
-            },
-            {
-                "key": "cos",
-                "name": "Cosine",
-                "unit": "deg",
-                "formatString": "%0.2f",
-                "hints": {
-                    "domain": 3,
-                    "priority": 3
-                },
-                "source": "cos"
-            },
-            {
-                "key": "sin",
-                "name": "Sine",
-                "unit": "Hz",
-                "formatString": "%0.2f",
-                "hints": {
-                    "range": 1,
-                    "spectralAttribute": true
-                },
-                "source": "sin"
-            },
-            {
-                "key": "cos",
-                "name": "Cosine",
-                "unit": "deg",
-                "formatString": "%0.2f",
-                "hints": {
-                    "range": 2,
-                    "priority": 5
-                },
-                "source": "cos"
-            }
-        ]
-    };
-
-    beforeEach(() => {
-        openmct = createOpenMct();
-        const mockTypeDef = {
-            telemetry: mockGoodSpectralMetaData
-        };
-        const mockTypeService = {
-            getType: () => {
-                return {
-                    typeDef: mockTypeDef
-                };
-            }
-        };
-        openmct.$injector = {
-            get: () => {
-                return mockTypeService;
-            }
-        };
-
-        openmct.telemetry.isTelemetryObject = function (domainObject) {
-            return true;
-        };
-    });
-
-    it("exists", () => {
-        expect(SpectralAggregatePlotCompositionPolicy(openmct).allow).toBeDefined();
-    });
-
-    it("allow composition only for telemetry that provides/supports spectral data", () => {
-        const parent = {
-            "composition": [],
-            "configuration": {},
-            "name": "Some Spectral Aggregate Plot",
-            "type": "telemetry.plot.spectral.aggregate",
-            "location": "mine",
-            "modified": 1631005183584,
-            "persisted": 1631005183502,
-            "identifier": {
-                "namespace": "",
-                "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
-            }
-        };
-        const child = {
-            "telemetry": {
-                "period": 10,
-                "amplitude": 1,
-                "offset": 0,
-                "dataRateInHz": 1,
-                "phase": 0,
-                "randomness": 0
-            },
-            "name": "Unnamed Sine Wave Generator",
-            "type": "generator",
-            "location": "mine",
-            "modified": 1630399715531,
-            "persisted": 1630399715531,
-            "identifier": {
-                "namespace": "",
-                "key": "21d61f2d-6d2d-4bea-8b0a-7f59fd504c6c"
-            }
-        };
-        expect(SpectralAggregatePlotCompositionPolicy(openmct).allow(parent, child)).toEqual(true);
-    });
-
-    it("disallows composition for telemetry that contain anything else", () => {
-        const mockTypeDef = {
-            telemetry: mockNonSpectralMetaData
-        };
-        const mockTypeService = {
-            getType: () => {
-                return {
-                    typeDef: mockTypeDef
-                };
-            }
-        };
-        openmct.$injector = {
-            get: () => {
-                return mockTypeService;
-            }
-        };
-        const parent = {
-            "composition": [],
-            "configuration": {},
-            "name": "Some Spectral Aggregate Plot",
-            "type": "telemetry.plot.spectral.aggregate",
-            "location": "mine",
-            "modified": 1631005183584,
-            "persisted": 1631005183502,
-            "identifier": {
-                "namespace": "",
-                "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
-            }
-        };
-        const child = {
-            "telemetry": {
-                "period": 10,
-                "amplitude": 1,
-                "offset": 0,
-                "dataRateInHz": 1,
-                "phase": 0,
-                "randomness": 0
-            },
-            "name": "Unnamed Sine Wave Generator",
-            "type": "generator",
-            "location": "mine",
-            "modified": 1630399715531,
-            "persisted": 1630399715531,
-            "identifier": {
-                "namespace": "",
-                "key": "21d61f2d-6d2d-4bea-8b0a-7f59fd504c6c"
-            }
-        };
-        expect(SpectralAggregatePlotCompositionPolicy(openmct).allow(parent, child)).toEqual(false);
-    });
-
-    it("passthrough for composition for non spectral aggregate plots", () => {
-        const parent = {
-            "composition": [],
-            "configuration": {},
-            "name": "Some Stacked Plot",
-            "type": "telemetry.plot.stacked",
-            "location": "mine",
-            "modified": 1631005183584,
-            "persisted": 1631005183502,
-            "identifier": {
-                "namespace": "",
-                "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
-            }
-        };
-        const child = {
-            "telemetry": {
-                "period": 10,
-                "amplitude": 1,
-                "offset": 0,
-                "dataRateInHz": 1,
-                "phase": 0,
-                "randomness": 0
-            },
-            "name": "Unnamed Sine Wave Generator",
-            "type": "generator",
-            "location": "mine",
-            "modified": 1630399715531,
-            "persisted": 1630399715531,
-            "identifier": {
-                "namespace": "",
-                "key": "21d61f2d-6d2d-4bea-8b0a-7f59fd504c6c"
-            }
-        };
-        expect(SpectralAggregatePlotCompositionPolicy(openmct).allow(parent, child)).toEqual(true);
-    });
-});
-

src/plugins/plot/spectralAggregatePlot/SpectralAggregatePlotViewProvider.js

@@ -1,76 +0,0 @@
-/*****************************************************************************
- * 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 SpectralAggregateView from './SpectralAggregateView.vue';
-import { SPECTRAL_AGGREGATE_KEY, SPECTRAL_AGGREGATE_VIEW } from './SpectralAggregateConstants';
-import Vue from 'vue';
-
-export default function SpectralAggregatePlotViewProvider(openmct) {
-    function isCompactView(objectPath) {
-        return objectPath.find(object => object.type === 'time-strip');
-    }
-
-    return {
-        key: SPECTRAL_AGGREGATE_VIEW,
-        name: 'Spectral Aggregate Plot',
-        cssClass: 'icon-telemetry',
-        canView(domainObject, objectPath) {
-            return domainObject && domainObject.type === SPECTRAL_AGGREGATE_KEY;
-        },
-
-        canEdit(domainObject, objectPath) {
-            return domainObject && domainObject.type === SPECTRAL_AGGREGATE_KEY;
-        },
-
-        view: function (domainObject, objectPath) {
-            let component;
-
-            return {
-                show: function (element) {
-                    let isCompact = isCompactView(objectPath);
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            SpectralAggregateView
-                        },
-                        provide: {
-                            openmct,
-                            domainObject
-                        },
-                        data() {
-                            return {
-                                options: {
-                                    compact: isCompact
-                                }
-                            };
-                        },
-                        template: '<spectral-aggregate-view :options="options"></spectral-aggregate-view>'
-                    });
-                },
-                destroy: function () {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
-        }
-    };
-}

src/plugins/plot/spectralAggregatePlot/SpectralAggregateView.vue

@@ -1,332 +0,0 @@
-<!--
- 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-spectral-aggregate-plot-view gl-plot plot-legend-bottom"
-     :class="{'plot-legend-expanded': legendExpanded, 'plot-legend-collapsed': !legendExpanded }"
->
-    <SpectralAggregatePlot ref="spectralAggregatePlot"
-                           class="c-spectral-aggregate-plot__plot-wrapper"
-                           :data="visibleData"
-                           :plot-axis-title="plotAxisTitle"
-                           :legend-expanded="legendExpanded"
-    />
-</div>
-</template>
-
-<script>
-import * as SPECTRAL_AGGREGATE from './SpectralAggregateConstants';
-import ColorPalette from '../lib/ColorPalette';
-import objectUtils from 'objectUtils';
-import SpectralAggregatePlot from './SpectralAggregatePlot.vue';
-
-export default {
-    components: {
-        SpectralAggregatePlot
-    },
-    inject: ['openmct', 'domainObject'],
-    data() {
-        return {
-            colorMapping: {},
-            composition: {},
-            currentDomainObject: this.domainObject,
-            isRealTime: (this.openmct.time.clock() !== undefined),
-            spectralAggregateTypes: {},
-            subscriptions: [],
-            telemetryObjects: {},
-            trace: [],
-            legendExpanded: false
-        };
-    },
-    computed: {
-        activeClock() {
-            return this.openmct.time.activeClock;
-        },
-        plotAxisTitle() {
-            const { xAxisMetadata = {}, yAxisMetadata = {} } = this.trace[0] || {};
-            const xAxisUnit = xAxisMetadata.units ? `(${xAxisMetadata.units})` : '';
-            const yAxisUnit = yAxisMetadata.units ? `(${yAxisMetadata.units})` : '';
-
-            return {
-                xAxisTitle: `${xAxisMetadata.name || ''} ${xAxisUnit}`,
-                yAxisTitle: `${yAxisMetadata.name || ''} ${yAxisUnit}`
-            };
-        },
-        visibleData() {
-            return this.trace.filter((trace) => trace.hidden !== true);
-        }
-    },
-    mounted() {
-        this.colorPalette = new ColorPalette();
-        this.loadComposition();
-
-        this.openmct.time.on('bounds', this.refreshData);
-        this.openmct.time.on('clock', this.clockChanged);
-
-        this.$refs.spectralAggregatePlot.$on(SPECTRAL_AGGREGATE.SUBSCRIBE, this.subscribeToAll);
-        this.$refs.spectralAggregatePlot.$on(SPECTRAL_AGGREGATE.UNSUBSCRIBE, this.removeAllSubscriptions);
-
-        this.unobserve = this.openmct.objects.observe(this.currentDomainObject, '*', this.updateDomainObject);
-    },
-    beforeDestroy() {
-        this.$refs.spectralAggregatePlot.$off();
-        this.openmct.time.off('bounds', this.refreshData);
-        this.openmct.time.off('clock', this.clockChanged);
-
-        this.removeAllSubscriptions();
-        this.unobserve();
-
-        if (!this.composition) {
-            return;
-        }
-
-        this.composition.off('add', this.addTelemetryObject);
-        this.composition.off('remove', this.removeTelemetryObject);
-    },
-    methods: {
-        addColorForTelemetry(key) {
-            const color = this.colorPalette.getNextColor().asHexString();
-            this.colorMapping[key] = color;
-
-            return color;
-        },
-        addSpectralAggregateType(key, name, timestamp, color) {
-            this.$set(this.spectralAggregateTypes, key, {
-                name,
-                timestamp,
-                color
-            });
-        },
-        addTelemetryObject(telemetryObject) {
-            const key = objectUtils.makeKeyString(telemetryObject.identifier);
-
-            if (!this.colorMapping[key]) {
-                this.addColorForTelemetry(key);
-            }
-
-            this.telemetryObjects[key] = telemetryObject;
-
-            this.requestDataFor(telemetryObject);
-            this.subscribeToObject(telemetryObject);
-        },
-        addTrace(trace, key) {
-            if (!this.trace.length) {
-                this.trace = this.trace.concat([trace]);
-
-                return;
-            }
-
-            let isInTrace = false;
-            const newTrace = this.trace.map((currentTrace, index) => {
-                if (currentTrace.key !== key) {
-                    return currentTrace;
-                }
-
-                isInTrace = true;
-
-                return trace;
-            });
-
-            this.trace = isInTrace ? newTrace : newTrace.concat([trace]);
-            this.updateTraceVisibility();
-        },
-        clockChanged() {
-            this.isRealTime = this.openmct.time.clock() !== undefined;
-
-            this.removeAllSubscriptions();
-            this.subscribeToAll();
-        },
-        getAxisMetadata(telemetryObject) {
-            const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
-            const yAxisMetadata = metadata.valuesForHints(['range'])[0];
-            const xAxisMetadata = metadata.valueMetadatas.filter((valueMetadata => {
-                return valueMetadata.key !== 'name' && !this.openmct.time.getAllTimeSystems().find((timeSystem) => timeSystem.key === valueMetadata.key);
-            }));
-
-            return {
-                xAxisMetadata,
-                yAxisMetadata
-            };
-        },
-        getOptions(telemetryObject) {
-            const { start, end } = this.openmct.time.bounds();
-
-            return {
-                averages: 0,
-                end,
-                start,
-                startTime: null,
-                spectra: true
-            };
-        },
-        loadComposition() {
-            this.composition = this.openmct.composition.get(this.currentDomainObject);
-
-            if (!this.composition) {
-                this.addTelemetryObject(this.currentDomainObject);
-
-                return;
-            }
-
-            this.composition.on('add', this.addTelemetryObject);
-            this.composition.on('remove', this.removeTelemetryObject);
-            this.composition.load();
-        },
-        refreshData(bounds, isTick) {
-            if (!isTick) {
-                this.colorPalette.reset();
-                const telemetryObjects = Object.values(this.telemetryObjects);
-                telemetryObjects.forEach(this.requestDataFor);
-            }
-        },
-        removeAllSubscriptions() {
-            this.subscriptions.forEach(subscription => subscription.unsubscribe());
-            this.subscriptions = [];
-        },
-        removeTelemetryObject(identifier) {
-            const key = objectUtils.makeKeyString(identifier);
-            delete this.telemetryObjects[key];
-            this.$delete(this.spectralAggregateTypes, key);
-
-            this.subscriptions.forEach(subscription => {
-                if (subscription.key !== key) {
-                    return;
-                }
-
-                subscription.unsubscribe();
-                delete this.subscriptions[key];
-            });
-
-            this.trace = this.trace.filter(t => t.key !== key);
-        },
-        processData(telemetryObject, data, axisMetadata) {
-            const key = objectUtils.makeKeyString(telemetryObject.identifier);
-
-            const formattedTimestamp = 'N/A';
-
-            const color = this.colorMapping[key];
-            const spectralAggregateValue = this.spectralAggregateTypes[key];
-            if (!spectralAggregateValue) {
-                this.addSpectralAggregateType(key, telemetryObject.name, formattedTimestamp, color);
-            }
-
-            if (data.message) {
-                this.openmct.notifications.alert(data.message);
-            }
-
-            let xValues = [];
-            let yValues = [];
-            axisMetadata.xAxisMetadata.forEach((metadata) => {
-                xValues.push(metadata.name);
-                if (data[metadata.key]) {
-                    yValues.push(data[metadata.key]);
-                } else {
-                    yValues.push('');
-                }
-            });
-
-            const trace = {
-                key,
-                name: telemetryObject.name,
-                x: xValues,
-                y: yValues,
-                xAxisMetadata: axisMetadata.xAxisMetadata,
-                yAxisMetadata: axisMetadata.yAxisMetadata,
-                type: 'bar'
-            };
-
-            this.addTrace(trace, key);
-        },
-        requestDataFor(telemetryObject) {
-            const axisMetadata = this.getAxisMetadata(telemetryObject);
-            this.openmct.telemetry.request(telemetryObject, this.getOptions(telemetryObject))
-                .then(data => {
-                    data.forEach((datum) => {
-                        this.processData(telemetryObject, datum, axisMetadata);
-                    });
-                });
-        },
-        subscribeToObject(telemetryObject) {
-            const key = objectUtils.makeKeyString(telemetryObject.identifier);
-            const found = Object.values(this.subscriptions).findIndex(objectKey => objectKey === key);
-            if (found > -1) {
-                this.subscriptions[found].unsubscribe();
-                delete this.subscriptions[found];
-            }
-
-            const options = this.getOptions(telemetryObject);
-            const axisMetadata = this.getAxisMetadata(telemetryObject);
-            const unsubscribe = this.openmct.telemetry.subscribe(telemetryObject,
-                data => this.processData(telemetryObject, data, axisMetadata)
-                , options);
-
-            this.subscriptions.push({
-                key,
-                unsubscribe
-            });
-        },
-        subscribeToAll() {
-            this.colorPalette.reset();
-            const telemetryObjects = Object.values(this.telemetryObjects);
-            telemetryObjects.forEach(this.subscribeToObject);
-        },
-        updateDomainObject(newDomainObject) {
-            this.currentDomainObject = newDomainObject;
-        },
-        updateTraceVisibility() {
-            // We create a copy here to improve performance since visibleData - a computed property - is dependent on this.trace.
-            this.trace = this.trace.map((currentTrace, index) => {
-                currentTrace.hidden = this.spectralAggregateTypes[currentTrace.key].hidden === true;
-
-                return currentTrace;
-            });
-        }
-    }
-};
-
-</script>
-
-<style lang="scss">
-    .c-spectral-aggregate-plot {
-        > * + * {
-            margin-top: 5px;
-        }
-
-        &-view {
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-
-        &__plot-wrapper {
-            flex: 1 1 auto;
-            min-height: 300px;
-            min-width: 300px;
-        }
-
-        &__legend-wrapper {
-            flex: 0 1 auto;
-            overflow: auto;
-            padding-right: 5px;
-        }
-    }
-</style>

src/plugins/plot/spectralPlot/SpectralPlotCompositionPolicy.js

@@ -1,36 +0,0 @@
-export default function SpectralPlotCompositionPolicy(openmct) {
-    function hasSpectralDomainAndRange(metadata) {
-        const rangeValues = metadata.valuesForHints(['range']);
-        const domainValues = metadata.valuesForHints(['domain']);
-        const containsSomeSpectralData = domainValues.some(value => {
-            return ((value.key === 'wavelength') || (value.key === 'frequency'));
-        });
-
-        return rangeValues.length > 0
-        && domainValues.length > 0
-        && containsSomeSpectralData;
-    }
-
-    function hasSpectralTelemetry(domainObject) {
-        if (!Object.prototype.hasOwnProperty.call(domainObject, 'telemetry')) {
-            return false;
-        }
-
-        let metadata = openmct.telemetry.getMetadata(domainObject);
-
-        return metadata.values().length > 0 && hasSpectralDomainAndRange(metadata);
-    }
-
-    return {
-        allow: function (parent, child) {
-
-            if ((parent.type === 'telemetry.plot.spectral')
-                && ((child.type !== 'telemetry.plot.overlay') && (hasSpectralTelemetry(child) === false))
-            ) {
-                return false;
-            }
-
-            return true;
-        }
-    };
-}

src/plugins/plot/spectralPlot/SpectralView.vue

@@ -1,13 +0,0 @@
-<template>
-<div>
-
-</div>
-</template>
-
-<script>
-
-export default {
-    inject: ['openmct', 'domainObject']
-};
-
-</script>

src/plugins/plugins.js

@@ -69,6 +69,7 @@ define([
     './CouchDBSearchFolder/plugin',
     './timeline/plugin',
     './hyperlink/plugin',
+    './clock/plugin',
     './DeviceClassifier/plugin'
 ], function (
     _,
@@ -119,6 +120,7 @@ define([
     CouchDBSearchFolder,
     Timeline,
     Hyperlink,
+    Clock,
     DeviceClassifier
 ) {
     const bundleMap = {
@@ -223,6 +225,7 @@ define([
     plugins.CouchDBSearchFolder = CouchDBSearchFolder.default;
     plugins.Timeline = Timeline.default;
     plugins.Hyperlink = Hyperlink.default;
+    plugins.Clock = Clock.default;
     plugins.DeviceClassifier = DeviceClassifier.default;
 
     return plugins;

src/plugins/telemetryTable/TelemetryTable.js

@@ -153,6 +153,7 @@ define([
 
             this.telemetryCollections[keyString].on('remove', telemetryRemover);
             this.telemetryCollections[keyString].on('add', telemetryProcessor);
+            this.telemetryCollections[keyString].on('clear', this.tableRows.clear);
             this.telemetryCollections[keyString].load();
 
             this.decrementOutstandingRequests();

src/plugins/viewLargeAction/viewLargeAction.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import PreviewHeader from '@/ui/preview/preview-header.vue';
+import Preview from '@/ui/preview/Preview.vue';
 
 import Vue from 'vue';
 
@@ -46,7 +46,7 @@ export default class ViewLargeAction {
             throw new Error(message);
         }
 
-        this._expand(objectPath, childElement, view);
+        this._expand(objectPath, childElement);
     }
 
     appliesTo(objectPath, view = {}) {
@@ -58,49 +58,29 @@ export default class ViewLargeAction {
         return viewLargeAction;
     }
 
-    _expand(objectPath, childElement, view) {
+    _expand(objectPath, childElement) {
         const parentElement = childElement.parentElement;
 
         this.overlay = this.openmct.overlays.overlay({
-            element: this._getOverlayElement(objectPath, childElement, view),
+            element: this._getPreview(objectPath),
             size: 'large',
+            autoHide: false,
             onDestroy() {
                 parentElement.append(childElement);
             }
         });
     }
 
-    _getOverlayElement(objectPath, childElement, view) {
-        const fragment = new DocumentFragment();
-        const header = this._getPreviewHeader(objectPath, view);
-        fragment.append(header);
-
-        const wrapper = document.createElement('div');
-        wrapper.classList.add('l-preview-window__object-view');
-        wrapper.append(childElement);
-        fragment.append(wrapper);
-
-        return fragment;
-    }
-
-    _getPreviewHeader(objectPath, view) {
-        const domainObject = objectPath[0];
-        const actionCollection = this.openmct.actions.getActionsCollection(objectPath, view);
+    _getPreview(objectPath) {
         const preview = new Vue({
             components: {
-                PreviewHeader
+                Preview
             },
             provide: {
                 openmct: this.openmct,
-                objectPath: this.objectPath
+                objectPath
             },
-            data() {
-                return {
-                    domainObject,
-                    actionCollection
-                };
-            },
-            template: '<PreviewHeader :actionCollection="actionCollection" :domainObject="domainObject" :hideViewSwitcher="true" :showNotebookMenuSwitcher="true"></PreviewHeader>'
+            template: '<Preview></Preview>'
         });
 
         return preview.$mount().$el;

src/tools/url.js

@@ -39,13 +39,7 @@ export function paramsToArray(openmct) {
 }
 
 export function identifierToString(openmct, objectPath) {
-    let identifier = '#/browse/' + objectPath.map(function (o) {
-        return o && openmct.objects.makeKeyString(o.identifier);
-    })
-        .reverse()
-        .join('/');
-
-    return identifier;
+    return '#/browse/' + openmct.objects.getRelativePath(objectPath);
 }
 
 export default function objectPathToUrl(openmct, objectPath) {

src/ui/preview/Preview.vue

@@ -59,12 +59,13 @@ export default {
     },
     mounted() {
         this.views = this.openmct.objectViews.get(this.domainObject, this.objectPath).map((view) => {
-            view.callBack = () => {
+            view.onItemClicked = () => {
                 return this.setView(view);
             };
 
             return view;
         });
+
         this.setView(this.views[0]);
     },
     beforeDestroy() {

src/ui/preview/PreviewAction.js

@@ -60,6 +60,7 @@ export default class PreviewAction {
         let overlay = this._openmct.overlays.overlay({
             element: preview.$el,
             size: 'large',
+            autoHide: false,
             buttons: [
                 {
                     label: 'Done',

src/ui/preview/preview-header.vue

@@ -18,6 +18,12 @@
             :views="views"
             :current-view="currentView"
         />
+        <NotebookMenuSwitcher :domain-object="domainObject"
+                              :object-path="objectPath"
+                              :is-preview="true"
+                              :current-view="currentView"
+                              class="c-notebook-snapshot-menubutton"
+        />
         <div class="l-browse-bar__actions">
             <button
                 v-for="(item, index) in statusBarItems"
@@ -38,7 +44,9 @@
 </template>
 
 <script>
+import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
 import ViewSwitcher from '../../ui/layout/ViewSwitcher.vue';
+
 const HIDDEN_ACTIONS = [
     'remove',
     'move',
@@ -48,10 +56,12 @@ const HIDDEN_ACTIONS = [
 
 export default {
     components: {
+        NotebookMenuSwitcher,
         ViewSwitcher
     },
     inject: [
-        'openmct'
+        'openmct',
+        'objectPath'
     ],
     props: {
         currentView: {
@@ -143,6 +153,7 @@ export default {
         showMenuItems(event) {
             let sortedActions = this.openmct.actions._groupAndSortActions(this.menuActionItems);
             const menuItems = this.openmct.menus.actionsToMenuItems(sortedActions, this.actionCollection.objectPath, this.actionCollection.view);
+
             const visibleMenuItems = this.filterHiddenItems(menuItems);
             this.openmct.menus.showMenu(event.x, event.y, visibleMenuItems);
         }