Prepare for sprint 1.7.7

.circleci/config.yml

@@ -56,38 +56,14 @@ workflows:
           browser: ChromeHeadless
           always-pass: false
       - test:
-          name: node12-firefoxESR-build-only
+          name: node12-firefoxESR
           node-version: lts/erbium
           browser: FirefoxESR
           always-pass: true
       - test:
-          name: node14-chrome-build-only
+          name: node14-chrome
           node-version: lts/fermium
           browser: ChromeHeadless
           always-pass: true
-  nightly:
-    jobs:
-      - test:
-          name: node10-chrome-nightly
-          node-version: lts/dubnium
-          browser: ChromeHeadless
-          always-pass: false
-      - test:
-          name: node12-firefoxESR-nightly
-          node-version: lts/erbium
-          browser: FirefoxESR
-          always-pass: false
-      - test:
-          name: node14-chrome-nightly
-          node-version: lts/fermium
-          browser: ChromeHeadless
-          always-pass: false
-    triggers:
-      - schedule:
-          cron: "0 0 * * *"
-          filters:
-            branches:
-              only:
-                - master      
 
 

.github/workflows/codeql-analysis.yml

@@ -1,33 +0,0 @@
-
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ master ]
-  schedule:
-    - cron: '28 21 * * 3'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: javascript
-
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

.npmrc

@@ -1 +0,0 @@
-loglevel=warn

API.md

@@ -996,7 +996,7 @@ reveal additional information when the mouse cursor is hovered over it.
 A common use case for indicators is to convey the state of some external system such as a 
 persistence backend or HTTP server. So long as this system is accessible via HTTP request, 
 Open MCT provides a general purpose indicator to show whether the server is available and 
-returning a 2xx status code. The URL Status Indicator is made available as a default plugin. See
+returing a 2xx status code. The URL Status Indicator is made available as a default plugin. See
 the [documentation](./src/plugins/URLIndicatorPlugin) for details on how to install and configure the 
 URL Status Indicator.
 

docs/src/design/proposals/APIRedesign.md

@@ -423,7 +423,7 @@ which can help with this, however.
   instead of separate approaches for static and substitutable
   dependencies.
 * Removes need to understand Angular's DI mechanism.
-* Improves usability of documentation (`typeService` is an
+* Improves useability of documentation (`typeService` is an
   instance of `CompositeService` and implements `TypeService`
   so you can easily traverse links in the JSDoc.)
 * Can be used more easily from Web Workers, allowing services

docs/src/index.md

@@ -25,7 +25,7 @@
 ## Legacy Documentation
 
 As we transition to a new API, the following documentation for the old API
-(which is supported during the transition) may be useful as well:
+(which is supported during the transtion) may be useful as well:
 
  * The [Architecture Overview](architecture/) describes the concepts used
  throughout Open MCT, and gives a high level overview of the platform's design.

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",

example/generator/generatorWorker.js

@@ -54,38 +54,23 @@
         var start = Date.now();
         var step = 1000 / data.dataRateInHz;
         var nextStep = start - (start % step) + step;
-        let work;
-        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;
@@ -126,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
         });
     }
 
@@ -154,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/styleguide/res/templates/glyphs.html

@@ -152,7 +152,7 @@
         <h2>How to Use Glyphs</h2>
         <div class="cols cols1-1">
             <div class="col">
-                <p>The easiest way to use a glyph is to include its CSS class in an element. The CSS adds a pseudo <code>:before</code> HTML element to whatever element it's attached to that makes proper use of the symbols font.</p>
+                <p>The easiest way to use a glyph is to include its CSS class in an element. The CSS adds a psuedo <code>:before</code> HTML element to whatever element it's attached to that makes proper use of the symbols font.</p>
                 <p>Alternately, you can use the <code>.ui-symbol</code> class in an object that contains encoded HTML entities. This method is only recommended if you cannot use the aforementioned CSS class approach.</p>
             </div>
             <mct-example><a class="s-button icon-gear" title="Settings"></a>

index.html

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

package.json

@@ -1,9 +1,9 @@
 {
   "name": "openmct",
-  "version": "1.7.8",
+  "version": "1.7.7-SNAPSHOT",
   "description": "The Open MCT core platform",
+  "dependencies": {},
   "devDependencies": {
-    "@braintree/sanitize-url": "^5.0.2",
     "angular": ">=1.8.0",
     "angular-route": "1.4.14",
     "babel-eslint": "10.0.3",
@@ -12,9 +12,16 @@
     "copy-webpack-plugin": "^4.5.2",
     "cross-env": "^6.0.3",
     "css-loader": "^1.0.0",
+    "d3-array": "1.2.x",
     "d3-axis": "1.0.x",
+    "d3-collection": "1.0.x",
+    "d3-color": "1.0.x",
+    "d3-format": "1.2.x",
+    "d3-interpolate": "1.1.x",
     "d3-scale": "1.0.x",
     "d3-selection": "1.3.x",
+    "d3-time": "1.0.x",
+    "d3-time-format": "2.1.x",
     "eslint": "7.0.0",
     "eslint-plugin-vue": "^7.5.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "^6.10.0",
@@ -34,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",
@@ -55,8 +62,6 @@
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.14.1",
     "painterro": "^1.2.56",
-    "plotly.js-basic-dist": "^2.5.0",
-    "plotly.js-gl2d-dist": "^2.5.0",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",

platform/commonUI/browse/src/navigation/NavigationService.js

@@ -64,7 +64,7 @@ define(
          *
          * @param {DomainObject} domainObject the domain object to navigate to
          * @param {Boolean} force if true, force navigation to occur.
-         * @returns {Boolean} true if navigation occurred, otherwise false.
+         * @returns {Boolean} true if navigation occured, otherwise false.
          */
         NavigationService.prototype.setNavigation = function (domainObject, force) {
             if (force) {

platform/core/bundle.js

@@ -379,7 +379,7 @@ define([
                     {
                         "name": "Math.uuid.js",
                         "version": "1.4.7",
-                        "description": "Unique identifier generation (code adapted.)",
+                        "description": "Unique identifer generation (code adapted.)",
                         "author": "Robert Kieffer",
                         "website": "https://github.com/broofa/node-uuid",
                         "copyright": "Copyright (c) 2010-2012 Robert Kieffer",

platform/features/clock/bundle.js

@@ -21,24 +21,32 @@
  *****************************************************************************/
 
 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 {
@@ -65,6 +73,16 @@ define([
                         "value": "YYYY/MM/DD HH:mm:ss"
                     }
                 ],
+                "indicators": [
+                    {
+                        "implementation": ClockIndicator,
+                        "depends": [
+                            "tickerService",
+                            "CLOCK_INDICATOR_FORMAT"
+                        ],
+                        "priority": "preferred"
+                    }
+                ],
                 "services": [
                     {
                         "key": "tickerService",
@@ -81,6 +99,14 @@ define([
                     }
                 ],
                 "controllers": [
+                    {
+                        "key": "ClockController",
+                        "implementation": ClockController,
+                        "depends": [
+                            "$scope",
+                            "tickerService"
+                        ]
+                    },
                     {
                         "key": "TimerController",
                         "implementation": TimerController,
@@ -100,6 +126,12 @@ define([
                     }
                 ],
                 "views": [
+                    {
+                        "key": "clock",
+                        "type": "clock",
+                        "editable": false,
+                        "template": clockTemplate
+                    },
                     {
                         "key": "timer",
                         "type": "timer",
@@ -154,6 +186,70 @@ 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

@@ -0,0 +1,32 @@
+<!--
+ 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

@@ -0,0 +1,110 @@
+/*****************************************************************************
+ * 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

@@ -0,0 +1,65 @@
+/*****************************************************************************
+ * 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

@@ -0,0 +1,107 @@
+/*****************************************************************************
+ * 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

@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * 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));
+            });
+
+        });
+    }
+);

platform/forms/src/MCTFileInput.js

@@ -44,11 +44,9 @@ define(
                         setText(result.name);
                         scope.ngModel[scope.field] = result;
                         control.$setValidity("file-input", true);
-                        scope.$digest();
                     }, function () {
                         setText('Select File');
                         control.$setValidity("file-input", false);
-                        scope.$digest();
                     });
                 }
 

platform/import-export/bundle.js

@@ -30,8 +30,8 @@ define([
 
     return function ImportExportPlugin() {
         return function (openmct) {
-            ExportAsJSONAction.prototype.appliesTo = function (context) {
-                return this.openmct.$injector.get('policyService')
+            ExportAsJSONAction.appliesTo = function (context) {
+                return openmct.$injector.get('policyService')
                     .allow("creation", context.domainObject.getCapability("type")
                     );
             };

platform/import-export/test/actions/ExportAsJSONActionSpec.js

@@ -29,7 +29,7 @@ define(
     ],
     function (ExportAsJSONAction, domainObjectFactory, MCT, AdapterCapability) {
 
-        describe("The export JSON action", function () {
+        xdescribe("The export JSON action", function () {
 
             var context,
                 action,
@@ -102,7 +102,7 @@ define(
                 expect(action).toBeDefined();
             });
 
-            xit("doesn't export non-creatable objects in tree", function () {
+            it("doesn't export non-creatable objects in tree", function () {
                 var nonCreatableType = {
                     hasFeature:
                         function (feature) {
@@ -149,7 +149,7 @@ define(
                 });
             });
 
-            xit("can export self-containing objects", function () {
+            it("can export self-containing objects", function () {
                 var parent = domainObjectFactory({
                     name: 'parent',
                     model: {
@@ -191,7 +191,7 @@ define(
                 });
             });
 
-            xit("exports links to external objects as new objects", function () {
+            it("exports links to external objects as new objects", function () {
                 var parent = domainObjectFactory({
                     name: 'parent',
                     model: {

platform/import-export/test/actions/ImportAsJSONActionSpec.js

@@ -27,7 +27,7 @@ define(
     ],
     function (ImportAsJSONAction, domainObjectFactory) {
 
-        describe("The import JSON action", function () {
+        xdescribe("The import JSON action", function () {
 
             var context = {};
             var action,
@@ -146,7 +146,7 @@ define(
                 });
             });
 
-            xit("can import self-containing objects", function () {
+            it("can import self-containing objects", function () {
                 var compDomainObject = domainObjectFactory({
                     name: 'compObject',
                     model: { name: 'compObject'},
@@ -198,7 +198,7 @@ define(
                 });
             });
 
-            xit("assigns new ids to each imported object", function () {
+            it("assigns new ids to each imported object", function () {
                 dialogService.getUserInput.and.returnValue(Promise.resolve(
                     {
                         selectFile: {

platform/persistence/elastic/src/ElasticPersistenceProvider.js

@@ -47,7 +47,7 @@ define(
          * @param $interval Angular's $interval service
          * @param {string} space the name of the persistence space being served
          * @param {string} root the root of the path to ElasticSearch
-         * @param {string} path the path to domain objects within ElasticSearch
+         * @param {stirng} path the path to domain objects within ElasticSearch
          */
         function ElasticPersistenceProvider($http, $q, space, root, path) {
             this.spaces = [space];

src/MCT.js

@@ -136,7 +136,7 @@ define([
          * @memberof module:openmct.MCT#
          * @name conductor
          */
-        this.time = new api.TimeAPI(this);
+        this.time = new api.TimeAPI();
 
         /**
          * An interface for interacting with the composition of domain objects.
@@ -263,7 +263,6 @@ define([
         // Plugins that are installed by default
 
         this.install(this.plugins.Plot());
-        this.install(this.plugins.Chart());
         this.install(this.plugins.TelemetryTable.default());
         this.install(PreviewPlugin.default());
         this.install(LegacyIndicatorsPlugin());

src/adapter/services/MissingModelCompatibilityDecorator.js

@@ -81,8 +81,14 @@ define([
                     return models;
                 }
 
-                //Temporary fix for missing models - don't retry using this.apiFetch
-                return models;
+                return this.apiFetch(missingIds)
+                    .then(function (apiResults) {
+                        Object.keys(apiResults).forEach(function (k) {
+                            models[k] = apiResults[k];
+                        });
+
+                        return models;
+                    });
             }.bind(this));
     };
 

src/api/actions/ActionsAPI.js

@@ -60,7 +60,9 @@ class ActionsAPI extends EventEmitter {
     }
 
     _getCachedActionCollection(objectPath, view) {
-        return this._actionCollections.get(view);
+        let cachedActionCollection = this._actionCollections.get(view);
+
+        return cachedActionCollection;
     }
 
     _newActionCollection(objectPath, view, skipEnvironmentObservers) {
@@ -110,7 +112,7 @@ class ActionsAPI extends EventEmitter {
         return actionsObject;
     }
 
-    _groupAndSortActions(actionsArray = []) {
+    _groupAndSortActions(actionsArray) {
         if (!Array.isArray(actionsArray) && typeof actionsArray === 'object') {
             actionsArray = Object.keys(actionsArray).map(key => actionsArray[key]);
         }

src/api/api.js

@@ -46,7 +46,7 @@ define([
     StatusAPI
 ) {
     return {
-        TimeAPI: TimeAPI.default,
+        TimeAPI: TimeAPI,
         ObjectAPI: ObjectAPI,
         CompositionAPI: CompositionAPI,
         TypeRegistry: TypeRegistry,

src/api/notifications/NotificationAPI.js

@@ -42,7 +42,7 @@ import EventEmitter from 'EventEmitter';
  *
  * @typedef {object} NotificationModel
  * @property {string} message The message to be displayed by the notification
- * @property {number | 'unknown'} [progress] The progress of some ongoing task. Should be a number between 0 and 100, or
+ * @property {number | 'unknown'} [progress] The progres of some ongoing task. Should be a number between 0 and 100, or
  * with the string literal 'unknown'.
  * @property {string} [progressText] A message conveying progress of some ongoing task.
 
@@ -98,7 +98,7 @@ export default class NotificationAPI extends EventEmitter {
      * Present an alert to the user.
      * @param {string} message The message to display to the user.
      * @param {Object} [options] object with following properties
-     *      autoDismissTimeout: {number} in milliseconds to automatically dismisses notification
+     *      autoDismissTimeout: {number} in miliseconds to automatically dismisses notification
      *      link: {Object} Add a link to notifications for navigation
      *              onClick: callback function
      *              cssClass: css class name to add style on link
@@ -119,7 +119,7 @@ export default class NotificationAPI extends EventEmitter {
      * Present an error message to the user
      * @param {string} message
      * @param {Object} [options] object with following properties
-     *      autoDismissTimeout: {number} in milliseconds to automatically dismisses notification
+     *      autoDismissTimeout: {number} in miliseconds to automatically dismisses notification
      *      link: {Object} Add a link to notifications for navigation
      *              onClick: callback function
      *              cssClass: css class name to add style on link

src/api/objects/ConflictError.js

@@ -1,2 +0,0 @@
-export default class ConflictError extends Error {
-}

src/api/objects/ObjectAPI.js

@@ -26,7 +26,6 @@ import RootRegistry from './RootRegistry';
 import RootObjectProvider from './RootObjectProvider';
 import EventEmitter from 'EventEmitter';
 import InterceptorRegistry from './InterceptorRegistry';
-import ConflictError from './ConflictError';
 
 /**
  * Utilities for loading, saving, and manipulating domain objects.
@@ -35,7 +34,6 @@ import ConflictError from './ConflictError';
  */
 
 function ObjectAPI(typeRegistry, openmct) {
-    this.openmct = openmct;
     this.typeRegistry = typeRegistry;
     this.eventEmitter = new EventEmitter();
     this.providers = {};
@@ -49,10 +47,6 @@ function ObjectAPI(typeRegistry, openmct) {
     this.interceptorRegistry = new InterceptorRegistry();
 
     this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'plan'];
-
-    this.errors = {
-        Conflict: ConflictError
-    };
 }
 
 /**
@@ -187,17 +181,8 @@ ObjectAPI.prototype.get = function (identifier, abortSignal) {
 
     let objectPromise = provider.get(identifier, abortSignal).then(result => {
         delete this.cache[keystring];
-
         result = this.applyGetInterceptors(identifier, result);
 
-        return result;
-    }).catch((result) => {
-        console.warn(`Failed to retrieve ${keystring}:`, result);
-
-        delete this.cache[keystring];
-
-        result = this.applyGetInterceptors(identifier);
-
         return result;
     });
 
@@ -300,7 +285,6 @@ ObjectAPI.prototype.isPersistable = function (idOrKeyString) {
 ObjectAPI.prototype.save = function (domainObject) {
     let provider = this.getProvider(domainObject.identifier);
     let savedResolve;
-    let savedReject;
     let result;
 
     if (!this.isPersistable(domainObject.identifier)) {
@@ -310,18 +294,14 @@ ObjectAPI.prototype.save = function (domainObject) {
     } else {
         const persistedTime = Date.now();
         if (domainObject.persisted === undefined) {
-            result = new Promise((resolve, reject) => {
+            result = new Promise((resolve) => {
                 savedResolve = resolve;
-                savedReject = reject;
             });
             domainObject.persisted = persistedTime;
-            provider.create(domainObject)
-                .then((response) => {
-                    this.mutate(domainObject, 'persisted', persistedTime);
-                    savedResolve(response);
-                }).catch((error) => {
-                    savedReject(error);
-                });
+            provider.create(domainObject).then((response) => {
+                this.mutate(domainObject, 'persisted', persistedTime);
+                savedResolve(response);
+            });
         } else {
             domainObject.persisted = persistedTime;
             this.mutate(domainObject, 'persisted', persistedTime);
@@ -378,20 +358,6 @@ 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,37 +10,28 @@ const cssClasses = {
 };
 
 class Overlay extends EventEmitter {
-    constructor({
-        buttons,
-        autoHide = true,
-        dismissable = true,
-        element,
-        onDestroy,
-        size
-    } = {}) {
+    constructor(options) {
         super();
 
+        this.dismissable = options.dismissable !== false;
         this.container = document.createElement('div');
-        this.container.classList.add('l-overlay-wrapper', cssClasses[size]);
-
-        this.autoHide = autoHide;
-        this.dismissable = dismissable !== false;
+        this.container.classList.add('l-overlay-wrapper', cssClasses[options.size]);
 
         this.component = new Vue({
-            components: {
-                OverlayComponent: OverlayComponent
-            },
             provide: {
                 dismiss: this.dismiss.bind(this),
-                element,
-                buttons,
+                element: options.element,
+                buttons: options.buttons,
                 dismissable: this.dismissable
             },
+            components: {
+                OverlayComponent: OverlayComponent
+            },
             template: '<overlay-component></overlay-component>'
         });
 
-        if (onDestroy) {
-            this.once('destroy', onDestroy);
+        if (options.onDestroy) {
+            this.once('destroy', options.onDestroy);
         }
     }
 

src/api/overlays/OverlayAPI.js

@@ -30,10 +30,7 @@ class OverlayAPI {
      */
     showOverlay(overlay) {
         if (this.activeOverlays.length) {
-            const previousOverlay = this.activeOverlays[this.activeOverlays.length - 1];
-            if (previousOverlay.autoHide) {
-                previousOverlay.container.classList.add('invisible');
-            }
+            this.activeOverlays[this.activeOverlays.length - 1].container.classList.add('invisible');
         }
 
         this.activeOverlays.push(overlay);
@@ -63,7 +60,7 @@ class OverlayAPI {
      * A description of option properties that can be passed into the overlay
      * @typedef options
         * @property {object} element DOMElement that is to be inserted/shown on the overlay
-        * @property {string} size preferred size of the overlay (large, small, fit)
+        * @property {string} size prefered size of the overlay (large, small, fit)
         * @property {array} buttons optional button objects with label and callback properties
         * @property {function} onDestroy callback to be called when overlay is destroyed
         * @property {boolean} dismissable allow user to dismiss overlay by using esc, and clicking away

src/api/overlays/components/OverlayComponent.vue

@@ -12,7 +12,7 @@
         ></button>
         <div
             ref="element"
-            class="c-overlay__contents js-notebook-snapshot-item-wrapper"
+            class="c-overlay__contents"
             tabindex="0"
         ></div>
         <div

src/api/telemetry/TelemetryAPI.js

@@ -281,7 +281,7 @@ define([
      * (start, end, etc.), sort order, and strategies for retrieving
      * telemetry (aggregation, latest available, etc.).
      *
-     * @method requestCollection
+     * @method requestTelemetryCollection
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      * @param {module:openmct.DomainObject} domainObject the object
      *        which has associated telemetry
@@ -289,7 +289,7 @@ define([
      *        options for this telemetry collection request
      * @returns {TelemetryCollection} a TelemetryCollection instance
      */
-    TelemetryAPI.prototype.requestCollection = function (domainObject, options = {}) {
+    TelemetryAPI.prototype.requestTelemetryCollection = function (domainObject, options = {}) {
         return new TelemetryCollection(
             this.openmct,
             domainObject,
@@ -483,10 +483,6 @@ define([
      * @returns {Object<String, {TelemetryValueFormatter}>}
      */
     TelemetryAPI.prototype.getFormatMap = function (metadata) {
-        if (!metadata) {
-            return {};
-        }
-
         if (!this.formatMapCache.has(metadata)) {
             const formatMap = metadata.values().reduce(function (map, valueMetadata) {
                 map[valueMetadata.key] = this.getValueFormatter(valueMetadata);

src/api/telemetry/TelemetryAPISpec.js

@@ -603,7 +603,7 @@ describe('Telemetry API', function () {
         });
 
         it('when requested, returns an instance of telemetry collection', () => {
-            const telemetryCollection = telemetryAPI.requestCollection(domainObject);
+            const telemetryCollection = telemetryAPI.requestTelemetryCollection(domainObject);
 
             expect(telemetryCollection).toBeInstanceOf(TelemetryCollection);
         });

src/api/telemetry/TelemetryCollection.js

@@ -23,11 +23,6 @@
 import _ from 'lodash';
 import EventEmitter from 'EventEmitter';
 
-const ERRORS = {
-    TIMESYSTEM_KEY: 'All telemetry metadata must have a telemetry value with a key that matches the key of the active time system.',
-    LOADED: 'Telemetry Collection has already been loaded.'
-};
-
 /** Class representing a Telemetry Collection. */
 
 export class TelemetryCollection extends EventEmitter {
@@ -49,6 +44,7 @@ export class TelemetryCollection extends EventEmitter {
         this.parseTime = undefined;
         this.metadata = this.openmct.telemetry.getMetadata(domainObject);
         this.unsubscribe = undefined;
+        this.historicalProvider = undefined;
         this.options = options;
         this.pageState = undefined;
         this.lastBounds = undefined;
@@ -61,16 +57,16 @@ export class TelemetryCollection extends EventEmitter {
      */
     load() {
         if (this.loaded) {
-            this._error(ERRORS.LOADED);
+            throw new Error('Telemetry Collection has already been loaded.');
         }
 
-        this._setTimeSystem(this.openmct.time.timeSystem());
+        this._timeSystem(this.openmct.time.timeSystem());
         this.lastBounds = this.openmct.time.bounds();
 
         this._watchBounds();
         this._watchTimeSystem();
 
-        this._requestHistoricalTelemetry();
+        this._initiateHistoricalRequests();
         this._initiateSubscriptionTelemetry();
 
         this.loaded = true;
@@ -102,49 +98,43 @@ export class TelemetryCollection extends EventEmitter {
         return this.boundedTelemetry;
     }
 
+    /**
+     * Sets up  the telemetry collection for historical requests,
+     * this uses the "standardizeRequestOptions" from Telemetry API
+     * @private
+     */
+    _initiateHistoricalRequests() {
+        this.openmct.telemetry.standardizeRequestOptions(this.options);
+        this.historicalProvider = this.openmct.telemetry.
+            findRequestProvider(this.domainObject, this.options);
+
+        this._requestHistoricalTelemetry();
+    }
     /**
      * If a historical provider exists, then historical requests will be made
      * @private
      */
     async _requestHistoricalTelemetry() {
-        let options = { ...this.options };
-        let historicalProvider;
-
-        this.openmct.telemetry.standardizeRequestOptions(options);
-        historicalProvider = this.openmct.telemetry.
-            findRequestProvider(this.domainObject, options);
-
-        if (!historicalProvider) {
+        if (!this.historicalProvider) {
             return;
         }
 
         let historicalData;
 
-        options.onPartialResponse = this._processNewTelemetry.bind(this);
-
         try {
-            if (this.requestAbort) {
-                this.requestAbort.abort();
-            }
-
             this.requestAbort = new AbortController();
-            options.signal = this.requestAbort.signal;
-            this.emit('requestStarted');
-            historicalData = await historicalProvider.request(this.domainObject, options);
+            this.options.abortSignal = this.requestAbort.signal;
+            historicalData = await this.historicalProvider.request(this.domainObject, this.options);
+            this.requestAbort = undefined;
         } catch (error) {
-            if (error.name !== 'AbortError') {
-                console.error('Error requesting telemetry data...');
-                this._error(error);
-            }
+            console.error('Error requesting telemetry data...');
+            this.requestAbort = undefined;
+            throw new Error(error);
         }
 
-        this.emit('requestEnded');
-        this.requestAbort = undefined;
-
         this._processNewTelemetry(historicalData);
 
     }
-
     /**
      * This uses the built in subscription function from Telemetry API
      * @private
@@ -172,10 +162,6 @@ export class TelemetryCollection extends EventEmitter {
      * @private
      */
     _processNewTelemetry(telemetryData) {
-        if (telemetryData === undefined) {
-            return;
-        }
-
         let data = Array.isArray(telemetryData) ? telemetryData : [telemetryData];
         let parsedValue;
         let beforeStartOfBounds;
@@ -202,10 +188,9 @@ export class TelemetryCollection extends EventEmitter {
 
                     if (endIndex > startIndex) {
                         let potentialDupes = this.boundedTelemetry.slice(startIndex, endIndex);
-                        isDuplicate = potentialDupes.some(_.isEqual.bind(undefined, datum));
+
+                        isDuplicate = potentialDupes.some(_.isEqual(undefined, datum));
                     }
-                } else if (startIndex === this.boundedTelemetry.length) {
-                    isDuplicate = _.isEqual(datum, this.boundedTelemetry[this.boundedTelemetry.length - 1]);
                 }
 
                 if (!isDuplicate) {
@@ -321,26 +306,15 @@ export class TelemetryCollection extends EventEmitter {
      * Time System
      * @private
      */
-    _setTimeSystem(timeSystem) {
-        let domains = this.metadata.valuesForHints(['domain']);
-        let domain = domains.find((d) => d.key === timeSystem.key);
-
-        if (domain === undefined) {
-            this._error(ERRORS.TIMESYSTEM_KEY);
-        }
-
-        // timeKey is used to create a dummy datum used for sorting
-        this.timeKey = domain.source; // this defaults to key if no source is set
-        let metadataValue = this.metadata.value(timeSystem.key) || { format: timeSystem.key };
+    _timeSystem(timeSystem) {
+        this.timeKey = timeSystem.key;
+        let metadataValue = this.metadata.value(this.timeKey) || { format: this.timeKey };
         let valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
 
         this.parseTime = (datum) => {
             return valueFormatter.parse(datum);
         };
-    }
 
-    _setTimeSystemAndFetchData(timeSystem) {
-        this._setTimeSystem(timeSystem);
         this._reset();
     }
 
@@ -355,8 +329,6 @@ export class TelemetryCollection extends EventEmitter {
         this.boundedTelemetry = [];
         this.futureBuffer = [];
 
-        this.emit('clear');
-
         this._requestHistoricalTelemetry();
     }
 
@@ -377,27 +349,18 @@ export class TelemetryCollection extends EventEmitter {
     }
 
     /**
-     * adds the _setTimeSystemAndFetchData callback to the 'timeSystem' timeAPI listener
+     * adds the _timeSystem callback to the 'timeSystem' timeAPI listener
      * @private
      */
     _watchTimeSystem() {
-        this.openmct.time.on('timeSystem', this._setTimeSystemAndFetchData, this);
+        this.openmct.time.on('timeSystem', this._timeSystem, this);
     }
 
     /**
-     * removes the _setTimeSystemAndFetchData callback from the 'timeSystem' timeAPI listener
+     * removes the _timeSystem callback from the 'timeSystem' timeAPI listener
      * @private
      */
     _unwatchTimeSystem() {
-        this.openmct.time.off('timeSystem', this._setTimeSystemAndFetchData, this);
-    }
-
-    /**
-     * will throw a new Error, for passed in message
-     * @param  {string} message Message describing the error
-     * @private
-     */
-    _error(message) {
-        throw new Error(message);
+        this.openmct.time.off('timeSystem', this._timeSystem, this);
     }
 }

src/api/time/GlobalTimeContext.js

@@ -1,106 +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 TimeContext from "./TimeContext";
-
-/**
- * The GlobalContext handles getting and setting time of the openmct application in general.
- * Views will use this context unless they specify an alternate/independent time context
- */
-class GlobalTimeContext extends TimeContext {
-    constructor() {
-        super();
-
-        //The Time Of Interest
-        this.toi = undefined;
-    }
-
-    /**
-     * Get or set the start and end time of the time conductor. Basic validation
-     * of bounds is performed.
-     *
-     * @param {module:openmct.TimeAPI~TimeConductorBounds} newBounds
-     * @throws {Error} Validation error
-     * @fires module:openmct.TimeAPI~bounds
-     * @returns {module:openmct.TimeAPI~TimeConductorBounds}
-     * @memberof module:openmct.TimeAPI#
-     * @method bounds
-     */
-    bounds(newBounds) {
-        if (arguments.length > 0) {
-            super.bounds.call(this, ...arguments);
-            // If a bounds change results in a TOI outside of the current
-            // bounds, unset it
-            if (this.toi < newBounds.start || this.toi > newBounds.end) {
-                this.timeOfInterest(undefined);
-            }
-        }
-
-        //Return a copy to prevent direct mutation of time conductor bounds.
-        return JSON.parse(JSON.stringify(this.boundsVal));
-    }
-
-    /**
-     * Update bounds based on provided time and current offsets
-     * @private
-     * @param {number} timestamp A time from which bounds will be calculated
-     * using current offsets.
-     */
-    tick(timestamp) {
-        super.tick.call(this, ...arguments);
-
-        // If a bounds change results in a TOI outside of the current
-        // bounds, unset it
-        if (this.toi < this.boundsVal.start || this.toi > this.boundsVal.end) {
-            this.timeOfInterest(undefined);
-        }
-    }
-
-    /**
-     * Get or set the Time of Interest. The Time of Interest is a single point
-     * in time, and constitutes the temporal focus of application views. It can
-     * be manipulated by the user from the time conductor or from other views.
-     * The time of interest can effectively be unset by assigning a value of
-     * 'undefined'.
-     * @fires module:openmct.TimeAPI~timeOfInterest
-     * @param newTOI
-     * @returns {number} the current time of interest
-     * @memberof module:openmct.TimeAPI#
-     * @method timeOfInterest
-     */
-    timeOfInterest(newTOI) {
-        if (arguments.length > 0) {
-            this.toi = newTOI;
-            /**
-             * The Time of Interest has moved.
-             * @event timeOfInterest
-             * @memberof module:openmct.TimeAPI~
-             * @property {number} Current time of interest
-             */
-            this.emit('timeOfInterest', this.toi);
-        }
-
-        return this.toi;
-    }
-}
-
-export default GlobalTimeContext;

src/api/time/IndependentTimeContext.js

@@ -1,94 +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 TimeContext from "./TimeContext";
-
-/**
- * The IndependentTimeContext handles getting and setting time of the openmct application in general.
- * Views will use the GlobalTimeContext unless they specify an alternate/independent time context here.
- */
-class IndependentTimeContext extends TimeContext {
-    constructor(globalTimeContext, key) {
-        super();
-        this.key = key;
-
-        this.globalTimeContext = globalTimeContext;
-    }
-
-    /**
-     * Set the active clock. Tick source will be immediately subscribed to
-     * and ticking will begin. Offsets from 'now' must also be provided. A clock
-     * can be unset by calling {@link stopClock}.
-     *
-     * @param {Clock || string} keyOrClock The clock to activate, or its key
-     * @param {ClockOffsets} offsets on each tick these will be used to calculate
-     * the start and end bounds. This maintains a sliding time window of a fixed
-     * width that automatically updates.
-     * @fires module:openmct.TimeAPI~clock
-     * @return {Clock} the currently active clock;
-     */
-    clock(keyOrClock, offsets) {
-        if (arguments.length === 2) {
-            let clock;
-
-            if (typeof keyOrClock === 'string') {
-                clock = this.globalTimeContext.clocks.get(keyOrClock);
-                if (clock === undefined) {
-                    throw "Unknown clock '" + keyOrClock + "'. Has it been registered with 'addClock'?";
-                }
-            } else if (typeof keyOrClock === 'object') {
-                clock = keyOrClock;
-                if (!this.globalTimeContext.clocks.has(clock.key)) {
-                    throw "Unknown clock '" + keyOrClock.key + "'. Has it been registered with 'addClock'?";
-                }
-            }
-
-            const previousClock = this.activeClock;
-            if (previousClock !== undefined) {
-                previousClock.off("tick", this.tick);
-            }
-
-            this.activeClock = clock;
-
-            /**
-             * The active clock has changed. Clock can be unset by calling {@link stopClock}
-             * @event clock
-             * @memberof module:openmct.TimeAPI~
-             * @property {Clock} clock The newly activated clock, or undefined
-             * if the system is no longer following a clock source
-             */
-            this.emit("clock", this.activeClock);
-
-            if (this.activeClock !== undefined) {
-                this.clockOffsets(offsets);
-                this.activeClock.on("tick", this.tick);
-            }
-
-        } else if (arguments.length === 1) {
-            throw "When setting the clock, clock offsets must also be provided";
-        }
-
-        return this.activeClock;
-    }
-}
-
-export default IndependentTimeContext;

src/api/time/TimeAPI.js

@@ -20,35 +20,51 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import GlobalTimeContext from "./GlobalTimeContext";
-import IndependentTimeContext from "@/api/time/IndependentTimeContext";
+define(['EventEmitter'], function (EventEmitter) {
+
+    /**
+     * The public API for setting and querying the temporal state of the
+     * application. The concept of time is integral to Open MCT, and at least
+     * one {@link TimeSystem}, as well as some default time bounds must be
+     * registered and enabled via {@link TimeAPI.addTimeSystem} and
+     * {@link TimeAPI.timeSystem} respectively for Open MCT to work.
+     *
+     * Time-sensitive views will typically respond to changes to bounds or other
+     * properties of the time conductor and update the data displayed based on
+     * the temporal state of the application. The current time bounds are also
+     * used in queries for historical data.
+     *
+     * The TimeAPI extends the EventEmitter class. A number of events are
+     * fired when properties of the time conductor change, which are documented
+     * below.
+     *
+     * @interface
+     * @memberof module:openmct
+     */
+    function TimeAPI() {
+        EventEmitter.call(this);
+
+        //The Time System
+        this.system = undefined;
+        //The Time Of Interest
+        this.toi = undefined;
+
+        this.boundsVal = {
+            start: undefined,
+            end: undefined
+        };
+
+        this.timeSystems = new Map();
+        this.clocks = new Map();
+        this.activeClock = undefined;
+        this.offsets = undefined;
+
+        this.tick = this.tick.bind(this);
 
-/**
-* The public API for setting and querying the temporal state of the
-* application. The concept of time is integral to Open MCT, and at least
-* one {@link TimeSystem}, as well as some default time bounds must be
-* registered and enabled via {@link TimeAPI.addTimeSystem} and
-* {@link TimeAPI.timeSystem} respectively for Open MCT to work.
-*
-* Time-sensitive views will typically respond to changes to bounds or other
-* properties of the time conductor and update the data displayed based on
-* the temporal state of the application. The current time bounds are also
-* used in queries for historical data.
-*
-* The TimeAPI extends the GlobalTimeContext which in turn extends the TimeContext/EventEmitter class. A number of events are
-* fired when properties of the time conductor change, which are documented
-* below.
-*
-* @interface
-* @memberof module:openmct
-*/
-class TimeAPI extends GlobalTimeContext {
-    constructor(openmct) {
-        super();
-        this.openmct = openmct;
-        this.independentContexts = new Map();
     }
 
+    TimeAPI.prototype = Object.create(EventEmitter.prototype);
+
     /**
      * A TimeSystem provides meaning to the values returned by the TimeAPI. Open
      * MCT supports multiple different types of time values, although all are
@@ -78,16 +94,16 @@ class TimeAPI extends GlobalTimeContext {
      * @memberof module:openmct.TimeAPI#
      * @param {TimeSystem} timeSystem A time system object.
      */
-    addTimeSystem(timeSystem) {
+    TimeAPI.prototype.addTimeSystem = function (timeSystem) {
         this.timeSystems.set(timeSystem.key, timeSystem);
-    }
+    };
 
     /**
      * @returns {TimeSystem[]}
      */
-    getAllTimeSystems() {
+    TimeAPI.prototype.getAllTimeSystems = function () {
         return Array.from(this.timeSystems.values());
-    }
+    };
 
     /**
      * Clocks provide a timing source that is used to
@@ -110,81 +126,340 @@ class TimeAPI extends GlobalTimeContext {
      * @memberof module:openmct.TimeAPI#
      * @param {Clock} clock
      */
-    addClock(clock) {
+    TimeAPI.prototype.addClock = function (clock) {
         this.clocks.set(clock.key, clock);
-    }
+    };
 
     /**
      * @memberof module:openmct.TimeAPI#
      * @returns {Clock[]}
      * @memberof module:openmct.TimeAPI#
      */
-    getAllClocks() {
+    TimeAPI.prototype.getAllClocks = function () {
         return Array.from(this.clocks.values());
-    }
+    };
 
     /**
-     * Get or set an independent time context which follows the TimeAPI timeSystem,
-     * but with different offsets for a given domain object
-     * @param {key | string} key The identifier key of the domain object these offsets are set for
-     * @param {ClockOffsets | TimeBounds} value This maintains a sliding time window of a fixed width that automatically updates
-     * @param {key | string} clockKey the real time clock key currently in use
+     * Validate the given bounds. This can be used for pre-validation of bounds,
+     * for example by views validating user inputs.
+     * @param {TimeBounds} bounds The start and end time of the conductor.
+     * @returns {string | true} A validation error, or true if valid
      * @memberof module:openmct.TimeAPI#
-     * @method addIndependentTimeContext
+     * @method validateBounds
      */
-    addIndependentContext(key, value, clockKey) {
-        let timeContext = this.independentContexts.get(key);
-        if (!timeContext) {
-            timeContext = new IndependentTimeContext(this, key);
-            this.independentContexts.set(key, timeContext);
+    TimeAPI.prototype.validateBounds = function (bounds) {
+        if ((bounds.start === undefined)
+            || (bounds.end === undefined)
+            || isNaN(bounds.start)
+            || isNaN(bounds.end)
+        ) {
+            return "Start and end must be specified as integer values";
+        } else if (bounds.start > bounds.end) {
+            return "Specified start date exceeds end bound";
         }
 
-        if (clockKey) {
-            timeContext.clock(clockKey, value);
-        } else {
-            timeContext.stopClock();
-            timeContext.bounds(value);
+        return true;
+    };
+
+    /**
+     * Validate the given offsets. This can be used for pre-validation of
+     * offsets, for example by views validating user inputs.
+     * @param {ClockOffsets} offsets The start and end offsets from a 'now' value.
+     * @returns {string | true} A validation error, or true if valid
+     * @memberof module:openmct.TimeAPI#
+     * @method validateBounds
+     */
+    TimeAPI.prototype.validateOffsets = function (offsets) {
+        if ((offsets.start === undefined)
+            || (offsets.end === undefined)
+            || isNaN(offsets.start)
+            || isNaN(offsets.end)
+        ) {
+            return "Start and end offsets must be specified as integer values";
+        } else if (offsets.start >= offsets.end) {
+            return "Specified start offset must be < end offset";
         }
 
-        this.emit('timeContext', key);
-
-        return () => {
-            this.independentContexts.delete(key);
-            timeContext.emit('timeContext', key);
-        };
-    }
+        return true;
+    };
 
     /**
-     * Get the independent time context which follows the TimeAPI timeSystem,
-     * but with different offsets.
-     * @param {key | string} key The identifier key of the domain object these offsets
-     * @memberof module:openmct.TimeAPI#
-     * @method getIndependentTimeContext
+     * @typedef {Object} TimeBounds
+     * @property {number} start The start time displayed by the time conductor
+     * in ms since epoch. Epoch determined by currently active time system
+     * @property {number} end The end time displayed by the time conductor in ms
+     * since epoch.
+     * @memberof module:openmct.TimeAPI~
      */
-    getIndependentContext(key) {
-        return this.independentContexts.get(key);
-    }
 
     /**
-     * Get the a timeContext for a view based on it's objectPath. If there is any object in the objectPath with an independent time context, it will be returned.
-     * Otherwise, the global time context will be returned.
-     * @param { Array } objectPath The view's objectPath
+     * Get or set the start and end time of the time conductor. Basic validation
+     * of bounds is performed.
+     *
+     * @param {module:openmct.TimeAPI~TimeConductorBounds} newBounds
+     * @throws {Error} Validation error
+     * @fires module:openmct.TimeAPI~bounds
+     * @returns {module:openmct.TimeAPI~TimeConductorBounds}
      * @memberof module:openmct.TimeAPI#
-     * @method getContextForView
+     * @method bounds
      */
-    getContextForView(objectPath = []) {
-        let timeContext = this;
-
-        objectPath.forEach(item => {
-            const key = this.openmct.objects.makeKeyString(item.identifier);
-            if (this.independentContexts.get(key)) {
-                timeContext = this.independentContexts.get(key);
+    TimeAPI.prototype.bounds = function (newBounds) {
+        if (arguments.length > 0) {
+            const validationResult = this.validateBounds(newBounds);
+            if (validationResult !== true) {
+                throw new Error(validationResult);
             }
-        });
 
-        return timeContext;
-    }
+            //Create a copy to avoid direct mutation of conductor bounds
+            this.boundsVal = JSON.parse(JSON.stringify(newBounds));
+            /**
+             * The start time, end time, or both have been updated.
+             * @event bounds
+             * @memberof module:openmct.TimeAPI~
+             * @property {TimeConductorBounds} bounds The newly updated bounds
+             * @property {boolean} [tick] `true` if the bounds update was due to
+             * a "tick" event (ie. was an automatic update), false otherwise.
+             */
+            this.emit('bounds', this.boundsVal, false);
 
-}
+            // If a bounds change results in a TOI outside of the current
+            // bounds, unset it
+            if (this.toi < newBounds.start || this.toi > newBounds.end) {
+                this.timeOfInterest(undefined);
+            }
+        }
 
-export default TimeAPI;
+        //Return a copy to prevent direct mutation of time conductor bounds.
+        return JSON.parse(JSON.stringify(this.boundsVal));
+    };
+
+    /**
+     * Get or set the time system of the TimeAPI.
+     * @param {TimeSystem | string} timeSystem
+     * @param {module:openmct.TimeAPI~TimeConductorBounds} bounds
+     * @fires module:openmct.TimeAPI~timeSystem
+     * @returns {TimeSystem} The currently applied time system
+     * @memberof module:openmct.TimeAPI#
+     * @method timeSystem
+     */
+    TimeAPI.prototype.timeSystem = function (timeSystemOrKey, bounds) {
+        if (arguments.length >= 1) {
+            if (arguments.length === 1 && !this.activeClock) {
+                throw new Error(
+                    "Must specify bounds when changing time system without "
+                    + "an active clock."
+                );
+            }
+
+            let timeSystem;
+
+            if (timeSystemOrKey === undefined) {
+                throw "Please provide a time system";
+            }
+
+            if (typeof timeSystemOrKey === 'string') {
+                timeSystem = this.timeSystems.get(timeSystemOrKey);
+
+                if (timeSystem === undefined) {
+                    throw "Unknown time system " + timeSystemOrKey + ". Has it been registered with 'addTimeSystem'?";
+                }
+            } else if (typeof timeSystemOrKey === 'object') {
+                timeSystem = timeSystemOrKey;
+
+                if (!this.timeSystems.has(timeSystem.key)) {
+                    throw "Unknown time system " + timeSystem.key + ". Has it been registered with 'addTimeSystem'?";
+                }
+            } else {
+                throw "Attempt to set invalid time system in Time API. Please provide a previously registered time system object or key";
+            }
+
+            this.system = timeSystem;
+
+            /**
+             * The time system used by the time
+             * conductor has changed. A change in Time System will always be
+             * followed by a bounds event specifying new query bounds.
+             *
+             * @event module:openmct.TimeAPI~timeSystem
+             * @property {TimeSystem} The value of the currently applied
+             * Time System
+             * */
+            this.emit('timeSystem', this.system);
+            if (bounds) {
+                this.bounds(bounds);
+            }
+
+        }
+
+        return this.system;
+    };
+
+    /**
+     * Get or set the Time of Interest. The Time of Interest is a single point
+     * in time, and constitutes the temporal focus of application views. It can
+     * be manipulated by the user from the time conductor or from other views.
+     * The time of interest can effectively be unset by assigning a value of
+     * 'undefined'.
+     * @fires module:openmct.TimeAPI~timeOfInterest
+     * @param newTOI
+     * @returns {number} the current time of interest
+     * @memberof module:openmct.TimeAPI#
+     * @method timeOfInterest
+     */
+    TimeAPI.prototype.timeOfInterest = function (newTOI) {
+        if (arguments.length > 0) {
+            this.toi = newTOI;
+            /**
+             * The Time of Interest has moved.
+             * @event timeOfInterest
+             * @memberof module:openmct.TimeAPI~
+             * @property {number} Current time of interest
+             */
+            this.emit('timeOfInterest', this.toi);
+        }
+
+        return this.toi;
+    };
+
+    /**
+     * Update bounds based on provided time and current offsets
+     * @private
+     * @param {number} timestamp A time from which boudns will be calculated
+     * using current offsets.
+     */
+    TimeAPI.prototype.tick = function (timestamp) {
+        const newBounds = {
+            start: timestamp + this.offsets.start,
+            end: timestamp + this.offsets.end
+        };
+
+        this.boundsVal = newBounds;
+        this.emit('bounds', this.boundsVal, true);
+
+        // If a bounds change results in a TOI outside of the current
+        // bounds, unset it
+        if (this.toi < newBounds.start || this.toi > newBounds.end) {
+            this.timeOfInterest(undefined);
+        }
+    };
+
+    /**
+     * Set the active clock. Tick source will be immediately subscribed to
+     * and ticking will begin. Offsets from 'now' must also be provided. A clock
+     * can be unset by calling {@link stopClock}.
+     *
+     * @param {Clock || string} The clock to activate, or its key
+     * @param {ClockOffsets} offsets on each tick these will be used to calculate
+     * the start and end bounds. This maintains a sliding time window of a fixed
+     * width that automatically updates.
+     * @fires module:openmct.TimeAPI~clock
+     * @return {Clock} the currently active clock;
+     */
+    TimeAPI.prototype.clock = function (keyOrClock, offsets) {
+        if (arguments.length === 2) {
+            let clock;
+
+            if (typeof keyOrClock === 'string') {
+                clock = this.clocks.get(keyOrClock);
+                if (clock === undefined) {
+                    throw "Unknown clock '" + keyOrClock + "'. Has it been registered with 'addClock'?";
+                }
+            } else if (typeof keyOrClock === 'object') {
+                clock = keyOrClock;
+                if (!this.clocks.has(clock.key)) {
+                    throw "Unknown clock '" + keyOrClock.key + "'. Has it been registered with 'addClock'?";
+                }
+            }
+
+            const previousClock = this.activeClock;
+            if (previousClock !== undefined) {
+                previousClock.off("tick", this.tick);
+            }
+
+            this.activeClock = clock;
+
+            /**
+             * The active clock has changed. Clock can be unset by calling {@link stopClock}
+             * @event clock
+             * @memberof module:openmct.TimeAPI~
+             * @property {Clock} clock The newly activated clock, or undefined
+             * if the system is no longer following a clock source
+             */
+            this.emit("clock", this.activeClock);
+
+            if (this.activeClock !== undefined) {
+                this.clockOffsets(offsets);
+                this.activeClock.on("tick", this.tick);
+            }
+
+        } else if (arguments.length === 1) {
+            throw "When setting the clock, clock offsets must also be provided";
+        }
+
+        return this.activeClock;
+    };
+
+    /**
+     * Clock offsets are used to calculate temporal bounds when the system is
+     * ticking on a clock source.
+     *
+     * @typedef {object} ClockOffsets
+     * @property {number} start A time span relative to the current value of the
+     * ticking clock, from which start bounds will be calculated. This value must
+     * be < 0. When a clock is active, bounds will be calculated automatically
+     * based on the value provided by the clock, and the defined clock offsets.
+     * @property {number} end A time span relative to the current value of the
+     * ticking clock, from which end bounds will be calculated. This value must
+     * be >= 0.
+     */
+    /**
+     * Get or set the currently applied clock offsets. If no parameter is provided,
+     * the current value will be returned. If provided, the new value will be
+     * used as the new clock offsets.
+     * @param {ClockOffsets} offsets
+     * @returns {ClockOffsets}
+     */
+    TimeAPI.prototype.clockOffsets = function (offsets) {
+        if (arguments.length > 0) {
+
+            const validationResult = this.validateOffsets(offsets);
+            if (validationResult !== true) {
+                throw new Error(validationResult);
+            }
+
+            this.offsets = offsets;
+
+            const currentValue = this.activeClock.currentValue();
+            const newBounds = {
+                start: currentValue + offsets.start,
+                end: currentValue + offsets.end
+            };
+
+            this.bounds(newBounds);
+
+            /**
+             * Event that is triggered when clock offsets change.
+             * @event clockOffsets
+             * @memberof module:openmct.TimeAPI~
+             * @property {ClockOffsets} clockOffsets The newly activated clock
+             * offsets.
+             */
+            this.emit("clockOffsets", offsets);
+        }
+
+        return this.offsets;
+    };
+
+    /**
+     * Stop the currently active clock from ticking, and unset it. This will
+     * revert all views to showing a static time frame defined by the current
+     * bounds.
+     */
+    TimeAPI.prototype.stopClock = function () {
+        if (this.activeClock) {
+            this.clock(undefined, undefined);
+        }
+    };
+
+    return TimeAPI;
+});

src/api/time/TimeAPISpec.js

@@ -19,243 +19,241 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import TimeAPI from "./TimeAPI";
-import {createOpenMct} from "utils/testing";
 
-describe("The Time API", function () {
-    let api;
-    let timeSystemKey;
-    let timeSystem;
-    let clockKey;
-    let clock;
-    let bounds;
-    let eventListener;
-    let toi;
-    let openmct;
-
-    beforeEach(function () {
-        openmct = createOpenMct();
-        api = new TimeAPI(openmct);
-        timeSystemKey = "timeSystemKey";
-        timeSystem = {key: timeSystemKey};
-        clockKey = "someClockKey";
-        clock = jasmine.createSpyObj("clock", [
-            "on",
-            "off",
-            "currentValue"
-        ]);
-        clock.currentValue.and.returnValue(100);
-        clock.key = clockKey;
-        bounds = {
-            start: 0,
-            end: 1
-        };
-        eventListener = jasmine.createSpy("eventListener");
-        toi = 111;
-    });
-
-    it("Supports setting and querying of time of interest", function () {
-        expect(api.timeOfInterest()).not.toBe(toi);
-        api.timeOfInterest(toi);
-        expect(api.timeOfInterest()).toBe(toi);
-    });
-
-    it("Allows setting of valid bounds", function () {
-        bounds = {
-            start: 0,
-            end: 1
-        };
-        expect(api.bounds()).not.toBe(bounds);
-        expect(api.bounds.bind(api, bounds)).not.toThrow();
-        expect(api.bounds()).toEqual(bounds);
-    });
-
-    it("Disallows setting of invalid bounds", function () {
-        bounds = {
-            start: 1,
-            end: 0
-        };
-        expect(api.bounds()).not.toEqual(bounds);
-        expect(api.bounds.bind(api, bounds)).toThrow();
-        expect(api.bounds()).not.toEqual(bounds);
-
-        bounds = {start: 1};
-        expect(api.bounds()).not.toEqual(bounds);
-        expect(api.bounds.bind(api, bounds)).toThrow();
-        expect(api.bounds()).not.toEqual(bounds);
-    });
-
-    it("Allows setting of previously registered time system with bounds", function () {
-        api.addTimeSystem(timeSystem);
-        expect(api.timeSystem()).not.toBe(timeSystem);
-        expect(function () {
-            api.timeSystem(timeSystem, bounds);
-        }).not.toThrow();
-        expect(api.timeSystem()).toBe(timeSystem);
-    });
-
-    it("Disallows setting of time system without bounds", function () {
-        api.addTimeSystem(timeSystem);
-        expect(api.timeSystem()).not.toBe(timeSystem);
-        expect(function () {
-            api.timeSystem(timeSystemKey);
-        }).toThrow();
-        expect(api.timeSystem()).not.toBe(timeSystem);
-    });
-
-    it("allows setting of timesystem without bounds with clock", function () {
-        api.addTimeSystem(timeSystem);
-        api.addClock(clock);
-        api.clock(clockKey, {
-            start: 0,
-            end: 1
-        });
-        expect(api.timeSystem()).not.toBe(timeSystem);
-        expect(function () {
-            api.timeSystem(timeSystemKey);
-        }).not.toThrow();
-        expect(api.timeSystem()).toBe(timeSystem);
-
-    });
-
-    it("Emits an event when time system changes", function () {
-        api.addTimeSystem(timeSystem);
-        expect(eventListener).not.toHaveBeenCalled();
-        api.on("timeSystem", eventListener);
-        api.timeSystem(timeSystemKey, bounds);
-        expect(eventListener).toHaveBeenCalledWith(timeSystem);
-    });
-
-    it("Emits an event when time of interest changes", function () {
-        expect(eventListener).not.toHaveBeenCalled();
-        api.on("timeOfInterest", eventListener);
-        api.timeOfInterest(toi);
-        expect(eventListener).toHaveBeenCalledWith(toi);
-    });
-
-    it("Emits an event when bounds change", function () {
-        expect(eventListener).not.toHaveBeenCalled();
-        api.on("bounds", eventListener);
-        api.bounds(bounds);
-        expect(eventListener).toHaveBeenCalledWith(bounds, false);
-    });
-
-    it("If bounds are set and TOI lies inside them, do not change TOI", function () {
-        api.timeOfInterest(6);
-        api.bounds({
-            start: 1,
-            end: 10
-        });
-        expect(api.timeOfInterest()).toEqual(6);
-    });
-
-    it("If bounds are set and TOI lies outside them, reset TOI", function () {
-        api.timeOfInterest(11);
-        api.bounds({
-            start: 1,
-            end: 10
-        });
-        expect(api.timeOfInterest()).toBeUndefined();
-    });
-
-    it("Maintains delta during tick", function () {
-    });
-
-    it("Allows registered time system to be activated", function () {
-    });
-
-    it("Allows a registered tick source to be activated", function () {
-        const mockTickSource = jasmine.createSpyObj("mockTickSource", [
-            "on",
-            "off",
-            "currentValue"
-        ]);
-        mockTickSource.key = 'mockTickSource';
-    });
-
-    describe(" when enabling a tick source", function () {
-        let mockTickSource;
-        let anotherMockTickSource;
-        const mockOffsets = {
-            start: 0,
-            end: 1
-        };
+define(['./TimeAPI'], function (TimeAPI) {
+    describe("The Time API", function () {
+        let api;
+        let timeSystemKey;
+        let timeSystem;
+        let clockKey;
+        let clock;
+        let bounds;
+        let eventListener;
+        let toi;
 
         beforeEach(function () {
-            mockTickSource = jasmine.createSpyObj("clock", [
+            api = new TimeAPI();
+            timeSystemKey = "timeSystemKey";
+            timeSystem = {key: timeSystemKey};
+            clockKey = "someClockKey";
+            clock = jasmine.createSpyObj("clock", [
                 "on",
                 "off",
                 "currentValue"
             ]);
-            mockTickSource.currentValue.and.returnValue(10);
+            clock.currentValue.and.returnValue(100);
+            clock.key = clockKey;
+            bounds = {
+                start: 0,
+                end: 1
+            };
+            eventListener = jasmine.createSpy("eventListener");
+            toi = 111;
+        });
+
+        it("Supports setting and querying of time of interest", function () {
+            expect(api.timeOfInterest()).not.toBe(toi);
+            api.timeOfInterest(toi);
+            expect(api.timeOfInterest()).toBe(toi);
+        });
+
+        it("Allows setting of valid bounds", function () {
+            bounds = {
+                start: 0,
+                end: 1
+            };
+            expect(api.bounds()).not.toBe(bounds);
+            expect(api.bounds.bind(api, bounds)).not.toThrow();
+            expect(api.bounds()).toEqual(bounds);
+        });
+
+        it("Disallows setting of invalid bounds", function () {
+            bounds = {
+                start: 1,
+                end: 0
+            };
+            expect(api.bounds()).not.toEqual(bounds);
+            expect(api.bounds.bind(api, bounds)).toThrow();
+            expect(api.bounds()).not.toEqual(bounds);
+
+            bounds = {start: 1};
+            expect(api.bounds()).not.toEqual(bounds);
+            expect(api.bounds.bind(api, bounds)).toThrow();
+            expect(api.bounds()).not.toEqual(bounds);
+        });
+
+        it("Allows setting of previously registered time system with bounds", function () {
+            api.addTimeSystem(timeSystem);
+            expect(api.timeSystem()).not.toBe(timeSystem);
+            expect(function () {
+                api.timeSystem(timeSystem, bounds);
+            }).not.toThrow();
+            expect(api.timeSystem()).toBe(timeSystem);
+        });
+
+        it("Disallows setting of time system without bounds", function () {
+            api.addTimeSystem(timeSystem);
+            expect(api.timeSystem()).not.toBe(timeSystem);
+            expect(function () {
+                api.timeSystem(timeSystemKey);
+            }).toThrow();
+            expect(api.timeSystem()).not.toBe(timeSystem);
+        });
+
+        it("allows setting of timesystem without bounds with clock", function () {
+            api.addTimeSystem(timeSystem);
+            api.addClock(clock);
+            api.clock(clockKey, {
+                start: 0,
+                end: 1
+            });
+            expect(api.timeSystem()).not.toBe(timeSystem);
+            expect(function () {
+                api.timeSystem(timeSystemKey);
+            }).not.toThrow();
+            expect(api.timeSystem()).toBe(timeSystem);
+
+        });
+
+        it("Emits an event when time system changes", function () {
+            api.addTimeSystem(timeSystem);
+            expect(eventListener).not.toHaveBeenCalled();
+            api.on("timeSystem", eventListener);
+            api.timeSystem(timeSystemKey, bounds);
+            expect(eventListener).toHaveBeenCalledWith(timeSystem);
+        });
+
+        it("Emits an event when time of interest changes", function () {
+            expect(eventListener).not.toHaveBeenCalled();
+            api.on("timeOfInterest", eventListener);
+            api.timeOfInterest(toi);
+            expect(eventListener).toHaveBeenCalledWith(toi);
+        });
+
+        it("Emits an event when bounds change", function () {
+            expect(eventListener).not.toHaveBeenCalled();
+            api.on("bounds", eventListener);
+            api.bounds(bounds);
+            expect(eventListener).toHaveBeenCalledWith(bounds, false);
+        });
+
+        it("If bounds are set and TOI lies inside them, do not change TOI", function () {
+            api.timeOfInterest(6);
+            api.bounds({
+                start: 1,
+                end: 10
+            });
+            expect(api.timeOfInterest()).toEqual(6);
+        });
+
+        it("If bounds are set and TOI lies outside them, reset TOI", function () {
+            api.timeOfInterest(11);
+            api.bounds({
+                start: 1,
+                end: 10
+            });
+            expect(api.timeOfInterest()).toBeUndefined();
+        });
+
+        it("Maintains delta during tick", function () {
+        });
+
+        it("Allows registered time system to be activated", function () {
+        });
+
+        it("Allows a registered tick source to be activated", function () {
+            const mockTickSource = jasmine.createSpyObj("mockTickSource", [
+                "on",
+                "off",
+                "currentValue"
+            ]);
+            mockTickSource.key = 'mockTickSource';
+        });
+
+        describe(" when enabling a tick source", function () {
+            let mockTickSource;
+            let anotherMockTickSource;
+            const mockOffsets = {
+                start: 0,
+                end: 1
+            };
+
+            beforeEach(function () {
+                mockTickSource = jasmine.createSpyObj("clock", [
+                    "on",
+                    "off",
+                    "currentValue"
+                ]);
+                mockTickSource.currentValue.and.returnValue(10);
+                mockTickSource.key = "mts";
+
+                anotherMockTickSource = jasmine.createSpyObj("clock", [
+                    "on",
+                    "off",
+                    "currentValue"
+                ]);
+                anotherMockTickSource.key = "amts";
+                anotherMockTickSource.currentValue.and.returnValue(10);
+
+                api.addClock(mockTickSource);
+                api.addClock(anotherMockTickSource);
+            });
+
+            it("sets bounds based on current value", function () {
+                api.clock("mts", mockOffsets);
+                expect(api.bounds()).toEqual({
+                    start: 10,
+                    end: 11
+                });
+            });
+
+            it("a new tick listener is registered", function () {
+                api.clock("mts", mockOffsets);
+                expect(mockTickSource.on).toHaveBeenCalledWith("tick", jasmine.any(Function));
+            });
+
+            it("listener of existing tick source is reregistered", function () {
+                api.clock("mts", mockOffsets);
+                api.clock("amts", mockOffsets);
+                expect(mockTickSource.off).toHaveBeenCalledWith("tick", jasmine.any(Function));
+            });
+
+            it("Allows the active clock to be set and unset", function () {
+                expect(api.clock()).toBeUndefined();
+                api.clock("mts", mockOffsets);
+                expect(api.clock()).toBeDefined();
+                api.stopClock();
+                expect(api.clock()).toBeUndefined();
+            });
+
+        });
+
+        it("on tick, observes offsets, and indicates tick in bounds callback", function () {
+            const mockTickSource = jasmine.createSpyObj("clock", [
+                "on",
+                "off",
+                "currentValue"
+            ]);
+            mockTickSource.currentValue.and.returnValue(100);
+            let tickCallback;
+            const boundsCallback = jasmine.createSpy("boundsCallback");
+            const clockOffsets = {
+                start: -100,
+                end: 100
+            };
             mockTickSource.key = "mts";
 
-            anotherMockTickSource = jasmine.createSpyObj("clock", [
-                "on",
-                "off",
-                "currentValue"
-            ]);
-            anotherMockTickSource.key = "amts";
-            anotherMockTickSource.currentValue.and.returnValue(10);
-
             api.addClock(mockTickSource);
-            api.addClock(anotherMockTickSource);
+            api.clock("mts", clockOffsets);
+
+            api.on("bounds", boundsCallback);
+
+            tickCallback = mockTickSource.on.calls.mostRecent().args[1];
+            tickCallback(1000);
+            expect(boundsCallback).toHaveBeenCalledWith({
+                start: 900,
+                end: 1100
+            }, true);
         });
-
-        it("sets bounds based on current value", function () {
-            api.clock("mts", mockOffsets);
-            expect(api.bounds()).toEqual({
-                start: 10,
-                end: 11
-            });
-        });
-
-        it("a new tick listener is registered", function () {
-            api.clock("mts", mockOffsets);
-            expect(mockTickSource.on).toHaveBeenCalledWith("tick", jasmine.any(Function));
-        });
-
-        it("listener of existing tick source is reregistered", function () {
-            api.clock("mts", mockOffsets);
-            api.clock("amts", mockOffsets);
-            expect(mockTickSource.off).toHaveBeenCalledWith("tick", jasmine.any(Function));
-        });
-
-        it("Allows the active clock to be set and unset", function () {
-            expect(api.clock()).toBeUndefined();
-            api.clock("mts", mockOffsets);
-            expect(api.clock()).toBeDefined();
-            api.stopClock();
-            expect(api.clock()).toBeUndefined();
-        });
-
-    });
-
-    it("on tick, observes offsets, and indicates tick in bounds callback", function () {
-        const mockTickSource = jasmine.createSpyObj("clock", [
-            "on",
-            "off",
-            "currentValue"
-        ]);
-        mockTickSource.currentValue.and.returnValue(100);
-        let tickCallback;
-        const boundsCallback = jasmine.createSpy("boundsCallback");
-        const clockOffsets = {
-            start: -100,
-            end: 100
-        };
-        mockTickSource.key = "mts";
-
-        api.addClock(mockTickSource);
-        api.clock("mts", clockOffsets);
-
-        api.on("bounds", boundsCallback);
-
-        tickCallback = mockTickSource.on.calls.mostRecent().args[1];
-        tickCallback(1000);
-        expect(boundsCallback).toHaveBeenCalledWith({
-            start: 900,
-            end: 1100
-        }, true);
     });
 });

src/api/time/TimeContext.js

@@ -1,360 +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 EventEmitter from 'EventEmitter';
-
-class TimeContext extends EventEmitter {
-    constructor() {
-        super();
-
-        //The Time System
-        this.timeSystems = new Map();
-
-        this.system = undefined;
-
-        this.clocks = new Map();
-
-        this.boundsVal = {
-            start: undefined,
-            end: undefined
-        };
-
-        this.activeClock = undefined;
-        this.offsets = undefined;
-
-        this.tick = this.tick.bind(this);
-    }
-
-    /**
-     * Get or set the time system of the TimeAPI.
-     * @param {TimeSystem | string} timeSystem
-     * @param {module:openmct.TimeAPI~TimeConductorBounds} bounds
-     * @fires module:openmct.TimeAPI~timeSystem
-     * @returns {TimeSystem} The currently applied time system
-     * @memberof module:openmct.TimeAPI#
-     * @method timeSystem
-     */
-    timeSystem(timeSystemOrKey, bounds) {
-        if (arguments.length >= 1) {
-            if (arguments.length === 1 && !this.activeClock) {
-                throw new Error(
-                    "Must specify bounds when changing time system without "
-                    + "an active clock."
-                );
-            }
-
-            let timeSystem;
-
-            if (timeSystemOrKey === undefined) {
-                throw "Please provide a time system";
-            }
-
-            if (typeof timeSystemOrKey === 'string') {
-                timeSystem = this.timeSystems.get(timeSystemOrKey);
-
-                if (timeSystem === undefined) {
-                    throw "Unknown time system " + timeSystemOrKey + ". Has it been registered with 'addTimeSystem'?";
-                }
-            } else if (typeof timeSystemOrKey === 'object') {
-                timeSystem = timeSystemOrKey;
-
-                if (!this.timeSystems.has(timeSystem.key)) {
-                    throw "Unknown time system " + timeSystem.key + ". Has it been registered with 'addTimeSystem'?";
-                }
-            } else {
-                throw "Attempt to set invalid time system in Time API. Please provide a previously registered time system object or key";
-            }
-
-            this.system = timeSystem;
-
-            /**
-             * The time system used by the time
-             * conductor has changed. A change in Time System will always be
-             * followed by a bounds event specifying new query bounds.
-             *
-             * @event module:openmct.TimeAPI~timeSystem
-             * @property {TimeSystem} The value of the currently applied
-             * Time System
-             * */
-            this.emit('timeSystem', this.system);
-            if (bounds) {
-                this.bounds(bounds);
-            }
-
-        }
-
-        return this.system;
-    }
-
-    /**
-     * Clock offsets are used to calculate temporal bounds when the system is
-     * ticking on a clock source.
-     *
-     * @typedef {object} ValidationResult
-     * @property {boolean} valid Result of the validation - true or false.
-     * @property {string} message An error message if valid is false.
-     */
-    /**
-     * Validate the given bounds. This can be used for pre-validation of bounds,
-     * for example by views validating user inputs.
-     * @param {TimeBounds} bounds The start and end time of the conductor.
-     * @returns {ValidationResult} A validation error, or true if valid
-     * @memberof module:openmct.TimeAPI#
-     * @method validateBounds
-     */
-    validateBounds(bounds) {
-        if ((bounds.start === undefined)
-            || (bounds.end === undefined)
-            || isNaN(bounds.start)
-            || isNaN(bounds.end)
-        ) {
-            return {
-                valid: false,
-                message: "Start and end must be specified as integer values"
-            };
-        } else if (bounds.start > bounds.end) {
-            return {
-                valid: false,
-                message: "Specified start date exceeds end bound"
-            };
-        }
-
-        return {
-            valid: true,
-            message: ''
-        };
-    }
-
-    /**
-     * Get or set the start and end time of the time conductor. Basic validation
-     * of bounds is performed.
-     *
-     * @param {module:openmct.TimeAPI~TimeConductorBounds} newBounds
-     * @throws {Error} Validation error
-     * @fires module:openmct.TimeAPI~bounds
-     * @returns {module:openmct.TimeAPI~TimeConductorBounds}
-     * @memberof module:openmct.TimeAPI#
-     * @method bounds
-     */
-    bounds(newBounds) {
-        if (arguments.length > 0) {
-            const validationResult = this.validateBounds(newBounds);
-            if (validationResult.valid !== true) {
-                throw new Error(validationResult.message);
-            }
-
-            //Create a copy to avoid direct mutation of conductor bounds
-            this.boundsVal = JSON.parse(JSON.stringify(newBounds));
-            /**
-             * The start time, end time, or both have been updated.
-             * @event bounds
-             * @memberof module:openmct.TimeAPI~
-             * @property {TimeConductorBounds} bounds The newly updated bounds
-             * @property {boolean} [tick] `true` if the bounds update was due to
-             * a "tick" event (ie. was an automatic update), false otherwise.
-             */
-            this.emit('bounds', this.boundsVal, false);
-        }
-
-        //Return a copy to prevent direct mutation of time conductor bounds.
-        return JSON.parse(JSON.stringify(this.boundsVal));
-    }
-
-    /**
-     * Validate the given offsets. This can be used for pre-validation of
-     * offsets, for example by views validating user inputs.
-     * @param {ClockOffsets} offsets The start and end offsets from a 'now' value.
-     * @returns { ValidationResult } A validation error, and true/false if valid or not
-     * @memberof module:openmct.TimeAPI#
-     * @method validateOffsets
-     */
-    validateOffsets(offsets) {
-        if ((offsets.start === undefined)
-            || (offsets.end === undefined)
-            || isNaN(offsets.start)
-            || isNaN(offsets.end)
-        ) {
-            return {
-                valid: false,
-                message: "Start and end offsets must be specified as integer values"
-            };
-        } else if (offsets.start >= offsets.end) {
-            return {
-                valid: false,
-                message: "Specified start offset must be < end offset"
-            };
-        }
-
-        return {
-            valid: true,
-            message: ''
-        };
-    }
-
-    /**
-     * @typedef {Object} TimeBounds
-     * @property {number} start The start time displayed by the time conductor
-     * in ms since epoch. Epoch determined by currently active time system
-     * @property {number} end The end time displayed by the time conductor in ms
-     * since epoch.
-     * @memberof module:openmct.TimeAPI~
-     */
-
-    /**
-     * Clock offsets are used to calculate temporal bounds when the system is
-     * ticking on a clock source.
-     *
-     * @typedef {object} ClockOffsets
-     * @property {number} start A time span relative to the current value of the
-     * ticking clock, from which start bounds will be calculated. This value must
-     * be < 0. When a clock is active, bounds will be calculated automatically
-     * based on the value provided by the clock, and the defined clock offsets.
-     * @property {number} end A time span relative to the current value of the
-     * ticking clock, from which end bounds will be calculated. This value must
-     * be >= 0.
-     */
-    /**
-     * Get or set the currently applied clock offsets. If no parameter is provided,
-     * the current value will be returned. If provided, the new value will be
-     * used as the new clock offsets.
-     * @param {ClockOffsets} offsets
-     * @returns {ClockOffsets}
-     */
-    clockOffsets(offsets) {
-        if (arguments.length > 0) {
-
-            const validationResult = this.validateOffsets(offsets);
-            if (validationResult.valid !== true) {
-                throw new Error(validationResult.message);
-            }
-
-            this.offsets = offsets;
-
-            const currentValue = this.activeClock.currentValue();
-            const newBounds = {
-                start: currentValue + offsets.start,
-                end: currentValue + offsets.end
-            };
-
-            this.bounds(newBounds);
-
-            /**
-             * Event that is triggered when clock offsets change.
-             * @event clockOffsets
-             * @memberof module:openmct.TimeAPI~
-             * @property {ClockOffsets} clockOffsets The newly activated clock
-             * offsets.
-             */
-            this.emit("clockOffsets", offsets);
-        }
-
-        return this.offsets;
-    }
-
-    /**
-     * Stop the currently active clock from ticking, and unset it. This will
-     * revert all views to showing a static time frame defined by the current
-     * bounds.
-     */
-    stopClock() {
-        if (this.activeClock) {
-            this.clock(undefined, undefined);
-        }
-    }
-
-    /**
-     * Set the active clock. Tick source will be immediately subscribed to
-     * and ticking will begin. Offsets from 'now' must also be provided. A clock
-     * can be unset by calling {@link stopClock}.
-     *
-     * @param {Clock || string} keyOrClock The clock to activate, or its key
-     * @param {ClockOffsets} offsets on each tick these will be used to calculate
-     * the start and end bounds. This maintains a sliding time window of a fixed
-     * width that automatically updates.
-     * @fires module:openmct.TimeAPI~clock
-     * @return {Clock} the currently active clock;
-     */
-    clock(keyOrClock, offsets) {
-        if (arguments.length === 2) {
-            let clock;
-
-            if (typeof keyOrClock === 'string') {
-                clock = this.clocks.get(keyOrClock);
-                if (clock === undefined) {
-                    throw "Unknown clock '" + keyOrClock + "'. Has it been registered with 'addClock'?";
-                }
-            } else if (typeof keyOrClock === 'object') {
-                clock = keyOrClock;
-                if (!this.clocks.has(clock.key)) {
-                    throw "Unknown clock '" + keyOrClock.key + "'. Has it been registered with 'addClock'?";
-                }
-            }
-
-            const previousClock = this.activeClock;
-            if (previousClock !== undefined) {
-                previousClock.off("tick", this.tick);
-            }
-
-            this.activeClock = clock;
-
-            /**
-             * The active clock has changed. Clock can be unset by calling {@link stopClock}
-             * @event clock
-             * @memberof module:openmct.TimeAPI~
-             * @property {Clock} clock The newly activated clock, or undefined
-             * if the system is no longer following a clock source
-             */
-            this.emit("clock", this.activeClock);
-
-            if (this.activeClock !== undefined) {
-                this.clockOffsets(offsets);
-                this.activeClock.on("tick", this.tick);
-            }
-
-        } else if (arguments.length === 1) {
-            throw "When setting the clock, clock offsets must also be provided";
-        }
-
-        return this.activeClock;
-    }
-
-    /**
-     * Update bounds based on provided time and current offsets
-     * @param {number} timestamp A time from which bounds will be calculated
-     * using current offsets.
-     */
-    tick(timestamp) {
-        if (!this.activeClock) {
-            return;
-        }
-
-        const newBounds = {
-            start: timestamp + this.offsets.start,
-            end: timestamp + this.offsets.end
-        };
-
-        this.boundsVal = newBounds;
-        this.emit('bounds', this.boundsVal, true);
-    }
-}
-
-export default TimeContext;

src/api/time/independentTimeAPISpec.js

@@ -1,155 +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 TimeAPI from "./TimeAPI";
-import {createOpenMct} from "utils/testing";
-describe("The Independent Time API", function () {
-    let api;
-    let domainObjectKey;
-    let clockKey;
-    let clock;
-    let bounds;
-    let independentBounds;
-    let eventListener;
-    let openmct;
-
-    beforeEach(function () {
-        openmct = createOpenMct();
-        api = new TimeAPI(openmct);
-        clockKey = "someClockKey";
-        clock = jasmine.createSpyObj("clock", [
-            "on",
-            "off",
-            "currentValue"
-        ]);
-        clock.currentValue.and.returnValue(100);
-        clock.key = clockKey;
-        api.addClock(clock);
-        domainObjectKey = 'test-key';
-        bounds = {
-            start: 0,
-            end: 1
-        };
-        api.bounds(bounds);
-        independentBounds = {
-            start: 10,
-            end: 11
-        };
-        eventListener = jasmine.createSpy("eventListener");
-    });
-
-    it("Creates an independent time context", () => {
-        let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
-        let timeContext = api.getIndependentContext(domainObjectKey);
-        expect(timeContext.bounds()).toEqual(independentBounds);
-        destroyTimeContext();
-    });
-
-    it("Gets an independent time context given the objectPath", () => {
-        let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
-        let timeContext = api.getContextForView([{
-            identifier: {
-                namespace: '',
-                key: 'blah'
-            }
-        }, { identifier: domainObjectKey }]);
-        expect(timeContext.bounds()).toEqual(independentBounds);
-        destroyTimeContext();
-    });
-
-    it("defaults to the global time context given the objectPath", () => {
-        let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
-        let timeContext = api.getContextForView([{
-            identifier: {
-                namespace: '',
-                key: 'blah'
-            }
-        }]);
-        expect(timeContext.bounds()).toEqual(bounds);
-        destroyTimeContext();
-    });
-
-    it("Allows setting of valid bounds", function () {
-        bounds = {
-            start: 0,
-            end: 1
-        };
-        let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
-        let timeContext = api.getContextForView([{identifier: domainObjectKey}]);
-        expect(timeContext.bounds()).not.toEqual(bounds);
-        timeContext.bounds(bounds);
-        expect(timeContext.bounds()).toEqual(bounds);
-        destroyTimeContext();
-    });
-
-    it("Disallows setting of invalid bounds", function () {
-        bounds = {
-            start: 1,
-            end: 0
-        };
-
-        let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
-        let timeContext = api.getContextForView([{identifier: domainObjectKey}]);
-        expect(timeContext.bounds()).not.toBe(bounds);
-
-        expect(timeContext.bounds.bind(timeContext, bounds)).toThrow();
-        expect(timeContext.bounds()).not.toEqual(bounds);
-
-        bounds = {start: 1};
-        expect(timeContext.bounds()).not.toEqual(bounds);
-        expect(timeContext.bounds.bind(timeContext, bounds)).toThrow();
-        expect(timeContext.bounds()).not.toEqual(bounds);
-        destroyTimeContext();
-    });
-
-    it("Emits an event when bounds change", function () {
-        let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
-        let timeContext = api.getContextForView([{identifier: domainObjectKey}]);
-        expect(eventListener).not.toHaveBeenCalled();
-        timeContext.on('bounds', eventListener);
-        timeContext.bounds(bounds);
-        expect(eventListener).toHaveBeenCalledWith(bounds, false);
-        destroyTimeContext();
-    });
-
-    describe(" when using real time clock", function () {
-        const mockOffsets = {
-            start: 10,
-            end: 11
-        };
-
-        it("Emits an event when bounds change based on current value", function () {
-            let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
-            let timeContext = api.getContextForView([{identifier: domainObjectKey}]);
-            expect(eventListener).not.toHaveBeenCalled();
-            timeContext.clock('someClockKey', mockOffsets);
-            timeContext.on('bounds', eventListener);
-            timeContext.tick(10);
-            expect(eventListener).toHaveBeenCalledWith({
-                start: 20,
-                end: 21
-            }, true);
-            destroyTimeContext();
-        });
-
-    });
-});

src/exporters/ImageExporter.js

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

src/installDefaultBundles.js

@@ -41,6 +41,7 @@ const DEFAULTS = [
     'platform/forms',
     'platform/identity',
     'platform/persistence/aggregator',
+    'platform/persistence/queue',
     'platform/policy',
     'platform/entanglement',
     'platform/search',

src/plugins/CouchDBSearchFolder/pluginSpec.js

@@ -32,7 +32,7 @@ describe('the plugin', function () {
     let openmct;
     let composition;
 
-    beforeEach(() => {
+    beforeEach((done) => {
 
         openmct = createOpenMct();
 
@@ -47,6 +47,11 @@ describe('the plugin', function () {
             }
         }));
 
+        openmct.on('start', done);
+        openmct.startHeadless();
+
+        composition = openmct.composition.get({identifier});
+
         spyOn(couchPlugin.couchProvider, 'getObjectsByFilter').and.returnValue(Promise.resolve([
             {
                 identifier: {
@@ -61,19 +66,6 @@ describe('the plugin', function () {
                 }
             }
         ]));
-
-        spyOn(couchPlugin.couchProvider, "get").and.callFake((id) => {
-            return Promise.resolve({
-                identifier: id
-            });
-        });
-
-        return new Promise((resolve) => {
-            openmct.once('start', resolve);
-            openmct.startHeadless();
-        }).then(() => {
-            composition = openmct.composition.get({identifier});
-        });
     });
 
     afterEach(() => {

src/plugins/LADTable/components/LADRow.vue

@@ -96,11 +96,11 @@ export default {
 
         this.timestampKey = this.openmct.time.timeSystem().key;
 
-        this.valueMetadata = this.metadata ? this
+        this.valueMetadata = this
             .metadata
-            .valuesForHints(['range'])[0] : undefined;
+            .valuesForHints(['range'])[0];
 
-        this.valueKey = this.valueMetadata ? this.valueMetadata.key : undefined;
+        this.valueKey = this.valueMetadata.key;
 
         this.unsubscribe = this.openmct
             .telemetry
@@ -151,10 +151,7 @@ export default {
                     size: 1,
                     strategy: 'latest'
                 })
-                .then((array) => this.updateValues(array[array.length - 1]))
-                .catch((error) => {
-                    console.warn('Error fetching data', error);
-                });
+                .then((array) => this.updateValues(array[array.length - 1]));
         },
         updateBounds(bounds, isTick) {
             this.bounds = bounds;

src/plugins/LADTable/components/LADTable.vue

@@ -73,9 +73,8 @@ export default {
         hasUnits() {
             let itemsWithUnits = this.items.filter((item) => {
                 let metadata = this.openmct.telemetry.getMetadata(item.domainObject);
-                const valueMetadatas = metadata ? metadata.valueMetadatas : [];
 
-                return this.metadataHasUnits(valueMetadatas);
+                return this.metadataHasUnits(metadata.valueMetadatas);
 
             });
 

src/plugins/charts/BarGraphCompositionPolicy.js

@@ -1,53 +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 { BAR_GRAPH_KEY } from './BarGraphConstants';
-
-export default function BarGraphCompositionPolicy(openmct) {
-    function hasRange(metadata) {
-        const rangeValues = metadata.valuesForHints(['range']);
-
-        return rangeValues.length > 0;
-    }
-
-    function hasBarGraphTelemetry(domainObject) {
-        if (!openmct.telemetry.isTelemetryObject(domainObject)) {
-            return false;
-        }
-
-        let metadata = openmct.telemetry.getMetadata(domainObject);
-
-        return metadata.values().length > 0 && hasRange(metadata);
-    }
-
-    return {
-        allow: function (parent, child) {
-            if ((parent.type === BAR_GRAPH_KEY)
-                && (hasBarGraphTelemetry(child) === false)
-            ) {
-                return false;
-            }
-
-            return true;
-        }
-    };
-}

src/plugins/charts/BarGraphConstants.js

@@ -1,3 +0,0 @@
-export const BAR_GRAPH_VIEW = 'bar-graph.view';
-export const BAR_GRAPH_KEY = 'telemetry.plot.bar-graph';
-export const BAR_GRAPH_INSPECTOR_KEY = 'telemetry.plot.bar-graph.inspector';

src/plugins/charts/BarGraphPlot.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-bar-chart"
-         @plotly_relayout="zoom"
-    ></div>
-    <div v-if="false"
-         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-basic';
-
-const MULTI_AXES_X_PADDING_PERCENT = {
-    LEFT: 8,
-    RIGHT: 94
-};
-
-export default {
-    inject: ['openmct', 'domainObject'],
-    props: {
-        data: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
-        plotAxisTitle: {
-            type: Object,
-            default() {
-                return {};
-            }
-        }
-    },
-    data() {
-        return {
-            isZoomed: false,
-            primaryYAxisRange: {
-                min: '',
-                max: ''
-            },
-            xAxisRange: {
-                min: '',
-                max: ''
-            }
-        };
-    },
-    watch: {
-        data: {
-            immediate: false,
-            handler: 'updateData'
-        }
-    },
-    mounted() {
-        Plotly.newPlot(this.$refs.plot, Array.from(this.data), this.getLayout(), {
-            responsive: true,
-            displayModeBar: false
-        });
-        this.registerListeners();
-    },
-    beforeDestroy() {
-        if (this.plotResizeObserver) {
-            this.plotResizeObserver.unobserve(this.$refs.plotWrapper);
-            clearTimeout(this.resizeTimer);
-        }
-
-        if (this.removeBarColorListener) {
-            this.removeBarColorListener();
-        }
-    },
-    methods: {
-        getAxisMinMax(axis) {
-            const min = axis.autoSize
-                ? ''
-                : axis.min;
-            const max = axis.autoSize
-                ? ''
-                : axis.max;
-
-            return {
-                min,
-                max
-            };
-        },
-        getLayout() {
-            const yAxesMeta = this.getYAxisMeta();
-            const primaryYaxis = this.getYaxisLayout(yAxesMeta['1']);
-            const xAxisDomain = this.getXAxisDomain(yAxesMeta);
-
-            return {
-                autosize: true,
-                showlegend: false,
-                textposition: 'auto',
-                font: {
-                    family: 'Helvetica Neue, Helvetica, Arial, sans-serif',
-                    size: '12px',
-                    color: '#666'
-                },
-                xaxis: {
-                    domain: xAxisDomain,
-                    range: [this.xAxisRange.min, this.xAxisRange.max],
-                    title: this.plotAxisTitle.xAxisTitle,
-                    automargin: true,
-                    fixedrange: true
-                },
-                yaxis: primaryYaxis,
-                margin: {
-                    l: 5,
-                    r: 5,
-                    t: 5,
-                    b: 0
-                },
-                paper_bgcolor: 'transparent',
-                plot_bgcolor: 'transparent'
-            };
-        },
-        getYAxisMeta() {
-            const yAxisMeta = {};
-
-            this.data.forEach(datum => {
-                const yAxisMetadata = datum.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 = {
-                automargin: true,
-                fixedrange: true,
-                title
-            };
-
-            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;
-        },
-        registerListeners() {
-            this.removeBarColorListener = this.openmct.objects.observe(
-                this.domainObject,
-                'configuration.barStyles',
-                this.barColorChanged
-            );
-            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');
-        },
-        barColorChanged() {
-            const colors = [];
-            const indices = [];
-            this.data.forEach((item, index) => {
-                const key = item.key;
-                const colorExists = this.domainObject.configuration.barStyles.series[key] && this.domainObject.configuration.barStyles.series[key].color;
-                indices.push(index);
-                if (colorExists) {
-                    colors.push(this.domainObject.configuration.barStyles.series[key].color);
-                } else {
-                    colors.push(item.marker.color);
-                }
-            });
-            const plotUpdate = {
-                'marker.color': colors
-            };
-            Plotly.restyle(this.$refs.plot, plotUpdate, indices);
-        },
-        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>
-

src/plugins/charts/BarGraphView.vue

@@ -1,304 +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>
-<BarGraph ref="barGraph"
-          class="c-plot c-bar-chart-view"
-          :data="trace"
-          :plot-axis-title="plotAxisTitle"
-          @subscribe="subscribeToAll"
-          @unsubscribe="removeAllSubscriptions"
-/>
-</template>
-
-<script>
-import BarGraph from './BarGraphPlot.vue';
-import _ from 'lodash';
-
-export default {
-    components: {
-        BarGraph
-    },
-    inject: ['openmct', 'domainObject', 'path'],
-    data() {
-        this.telemetryObjects = {};
-        this.telemetryObjectFormats = {};
-        this.subscriptions = [];
-        this.composition = {};
-
-        return {
-            trace: []
-        };
-    },
-    computed: {
-        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}`
-            };
-        }
-    },
-    mounted() {
-        this.loadComposition();
-
-        this.openmct.time.on('bounds', this.refreshData);
-    },
-    beforeDestroy() {
-        this.openmct.time.off('bounds', this.refreshData);
-
-        this.removeAllSubscriptions();
-
-        if (!this.composition) {
-            return;
-        }
-
-        this.composition.off('add', this.addTelemetryObject);
-        this.composition.off('remove', this.removeTelemetryObject);
-    },
-    methods: {
-        addTelemetryObject(telemetryObject) {
-            // grab information we need from the added telmetry object
-            const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            this.telemetryObjects[key] = telemetryObject;
-            const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
-            this.telemetryObjectFormats[key] = this.openmct.telemetry.getFormatMap(metadata);
-            const telemetryObjectPath = [telemetryObject, ...this.path];
-            const telemetryIsAlias = this.openmct.objects.isObjectPathToALink(telemetryObject, telemetryObjectPath);
-
-            // make an update object that's a clone of the existing styles object so we preserve existing choices
-            let stylesUpdate = {};
-            if (this.domainObject.configuration.barStyles.series[key]) {
-                stylesUpdate = _.clone(this.domainObject.configuration.barStyles.series[key]);
-            }
-
-            stylesUpdate.name = telemetryObject.name;
-            stylesUpdate.type = telemetryObject.type;
-            stylesUpdate.isAlias = telemetryIsAlias;
-
-            // if something has changed, mutate and notify listeners
-            if (!_.isEqual(stylesUpdate, this.domainObject.configuration.barStyles.series[key])) {
-                this.openmct.objects.mutate(
-                    this.domainObject,
-                    `configuration.barStyles.series["${key}"]`,
-                    stylesUpdate
-                );
-            }
-
-            // ask for the current telemetry data, then subcribe for changes
-            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]);
-        },
-        getAxisMetadata(telemetryObject) {
-            const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
-            if (!metadata) {
-                return {};
-            }
-
-            const yAxisMetadata = metadata.valuesForHints(['range'])[0];
-            //Exclude 'name' and 'time' based metadata specifically, from the x-Axis values by using range hints only
-            const xAxisMetadata = metadata.valuesForHints(['range']);
-
-            return {
-                xAxisMetadata,
-                yAxisMetadata
-            };
-        },
-        getOptions() {
-            const { start, end } = this.openmct.time.bounds();
-
-            return {
-                end,
-                start
-            };
-        },
-        loadComposition() {
-            this.composition = this.openmct.composition.get(this.domainObject);
-
-            if (!this.composition) {
-                this.addTelemetryObject(this.domainObject);
-
-                return;
-            }
-
-            this.composition.on('add', this.addTelemetryObject);
-            this.composition.on('remove', this.removeTelemetryObject);
-            this.composition.load();
-        },
-        refreshData(bounds, isTick) {
-            if (!isTick) {
-                const telemetryObjects = Object.values(this.telemetryObjects);
-                telemetryObjects.forEach(this.requestDataFor);
-            }
-        },
-        removeAllSubscriptions() {
-            this.subscriptions.forEach(subscription => subscription.unsubscribe());
-            this.subscriptions = [];
-        },
-        removeSubscription(key) {
-            const found = this.subscriptions.findIndex(subscription => subscription.key === key);
-            if (found > -1) {
-                this.subscriptions[found].unsubscribe();
-                this.subscriptions.splice(found, 1);
-            }
-        },
-        removeTelemetryObject(identifier) {
-            const key = this.openmct.objects.makeKeyString(identifier);
-            delete this.telemetryObjects[key];
-            if (this.telemetryObjectFormats && this.telemetryObjectFormats[key]) {
-                delete this.telemetryObjectFormats[key];
-            }
-
-            if (this.domainObject.configuration.barStyles.series[key]) {
-                delete this.domainObject.configuration.barStyles.series[key];
-                this.openmct.objects.mutate(
-                    this.domainObject,
-                    `configuration.barStyles.series["${key}"]`,
-                    undefined
-                );
-            }
-
-            this.removeSubscription(key);
-
-            this.trace = this.trace.filter(t => t.key !== key);
-        },
-        addDataToGraph(telemetryObject, data, axisMetadata) {
-            const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-
-            if (data.message) {
-                this.openmct.notifications.alert(data.message);
-            }
-
-            if (!this.isDataInTimeRange(data, key)) {
-                return;
-            }
-
-            let xValues = [];
-            let yValues = [];
-
-            //populate X and Y values for plotly
-            axisMetadata.xAxisMetadata.forEach((metadata) => {
-                xValues.push(metadata.name);
-                if (data[metadata.key]) {
-                    const formattedValue = this.format(key, metadata.key, data);
-                    yValues.push(formattedValue);
-                } else {
-                    yValues.push(null);
-                }
-            });
-
-            const trace = {
-                key,
-                name: telemetryObject.name,
-                x: xValues,
-                y: yValues,
-                text: yValues.map(String),
-                xAxisMetadata: axisMetadata.xAxisMetadata,
-                yAxisMetadata: axisMetadata.yAxisMetadata,
-                type: 'bar',
-                marker: {
-                    color: this.domainObject.configuration.barStyles.series[key].color
-                },
-                hoverinfo: 'skip'
-            };
-
-            this.addTrace(trace, key);
-        },
-        isDataInTimeRange(datum, key) {
-            const timeSystemKey = this.openmct.time.timeSystem().key;
-            let currentTimestamp = this.parse(key, timeSystemKey, datum);
-
-            return currentTimestamp && this.openmct.time.bounds().end >= currentTimestamp;
-        },
-        format(telemetryObjectKey, metadataKey, data) {
-            const formats = this.telemetryObjectFormats[telemetryObjectKey];
-
-            return formats[metadataKey].format(data);
-        },
-        parse(telemetryObjectKey, metadataKey, datum) {
-            if (!datum) {
-                return;
-            }
-
-            const formats = this.telemetryObjectFormats[telemetryObjectKey];
-
-            return formats[metadataKey].parse(datum);
-        },
-        requestDataFor(telemetryObject) {
-            const axisMetadata = this.getAxisMetadata(telemetryObject);
-            this.openmct.telemetry.request(telemetryObject)
-                .then(data => {
-                    data.forEach((datum) => {
-                        this.addDataToGraph(telemetryObject, datum, axisMetadata);
-                    });
-                })
-                .catch((error) => {
-                    console.warn(`Error fetching data`, error);
-                });
-        },
-        subscribeToObject(telemetryObject) {
-            const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-
-            this.removeSubscription(key);
-
-            const options = this.getOptions();
-            const axisMetadata = this.getAxisMetadata(telemetryObject);
-            const unsubscribe = this.openmct.telemetry.subscribe(telemetryObject,
-                data => this.addDataToGraph(telemetryObject, data, axisMetadata)
-                , options);
-
-            this.subscriptions.push({
-                key,
-                unsubscribe
-            });
-        },
-        subscribeToAll() {
-            const telemetryObjects = Object.values(this.telemetryObjects);
-            telemetryObjects.forEach(this.subscribeToObject);
-        }
-    }
-};
-
-</script>

src/plugins/charts/BarGraphViewProvider.js

@@ -1,79 +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 BarGraphView from './BarGraphView.vue';
-import { BAR_GRAPH_KEY, BAR_GRAPH_VIEW } from './BarGraphConstants';
-import Vue from 'vue';
-
-export default function BarGraphViewProvider(openmct) {
-    function isCompactView(objectPath) {
-        let isChildOfTimeStrip = objectPath.find(object => object.type === 'time-strip');
-
-        return isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
-    }
-
-    return {
-        key: BAR_GRAPH_VIEW,
-        name: 'Bar Graph',
-        cssClass: 'icon-telemetry',
-        canView(domainObject, objectPath) {
-            return domainObject && domainObject.type === BAR_GRAPH_KEY;
-        },
-
-        canEdit(domainObject, objectPath) {
-            return domainObject && domainObject.type === BAR_GRAPH_KEY;
-        },
-
-        view: function (domainObject, objectPath) {
-            let component;
-
-            return {
-                show: function (element) {
-                    let isCompact = isCompactView(objectPath);
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            BarGraphView
-                        },
-                        provide: {
-                            openmct,
-                            domainObject,
-                            path: objectPath
-                        },
-                        data() {
-                            return {
-                                options: {
-                                    compact: isCompact
-                                }
-                            };
-                        },
-                        template: '<bar-graph-view :options="options"></bar-graph-view>'
-                    });
-                },
-                destroy: function () {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
-        }
-    };
-}

src/plugins/charts/inspector/BarGraphInspectorViewProvider.js

@@ -1,48 +0,0 @@
-import { BAR_GRAPH_INSPECTOR_KEY, BAR_GRAPH_KEY } from '../BarGraphConstants';
-import Vue from 'vue';
-import BarGraphOptions from "./BarGraphOptions.vue";
-
-export default function BarGraphInspectorViewProvider(openmct) {
-    return {
-        key: BAR_GRAPH_INSPECTOR_KEY,
-        name: 'Bar Graph Inspector View',
-        canView: function (selection) {
-            if (selection.length === 0 || selection[0].length === 0) {
-                return false;
-            }
-
-            let object = selection[0][0].context.item;
-
-            return object
-                && object.type === BAR_GRAPH_KEY;
-        },
-        view: function (selection) {
-            let component;
-
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            BarGraphOptions
-                        },
-                        provide: {
-                            openmct,
-                            domainObject: selection[0][0].context.item
-                        },
-                        template: '<bar-graph-options></bar-graph-options>'
-                    });
-                },
-                destroy: function () {
-                    if (component) {
-                        component.$destroy();
-                        component = undefined;
-                    }
-                }
-            };
-        },
-        priority: function () {
-            return 1;
-        }
-    };
-}

src/plugins/charts/inspector/BarGraphOptions.vue

@@ -1,70 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2020, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<template>
-<ul class="c-tree c-bar-graph-options">
-    <h2 title="Display properties for this object">Bar Graph Series</h2>
-    <li v-for="series in domainObject.composition"
-        :key="series.key"
-    >
-        <series-options :item="series"
-                        :color-palette="colorPalette"
-        />
-    </li>
-</ul>
-</template>
-
-<script>
-import SeriesOptions from "./SeriesOptions.vue";
-import ColorPalette from '@/ui/color/ColorPalette';
-
-export default {
-    components: {
-        SeriesOptions
-    },
-    inject: ['openmct', 'domainObject'],
-    data() {
-        return {
-            isEditing: this.openmct.editor.isEditing(),
-            colorPalette: this.colorPalette
-        };
-    },
-    computed: {
-        canEdit() {
-            return this.isEditing && !this.domainObject.locked;
-        }
-    },
-    beforeMount() {
-        this.colorPalette = new ColorPalette();
-    },
-    mounted() {
-        this.openmct.editor.on('isEditing', this.setEditState);
-    },
-    beforeDestroy() {
-        this.openmct.editor.off('isEditing', this.setEditState);
-    },
-    methods: {
-        setEditState(isEditing) {
-            this.isEditing = isEditing;
-        }
-    }
-};
-</script>

src/plugins/charts/inspector/SeriesOptions.vue

@@ -1,153 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2020, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<template>
-<ul>
-    <li class="c-tree__item menus-to-left"
-        :class="aliasCss"
-    >
-        <span class="c-disclosure-triangle is-enabled flex-elem"
-              :class="expandedCssClass"
-              @click="expanded = !expanded"
-        >
-        </span>
-
-        <div class="c-object-label">
-            <div :class="[seriesCss]">
-            </div>
-            <div class="c-object-label__name">{{ name }}</div>
-        </div>
-    </li>
-    <ColorSwatch v-if="expanded"
-                 :current-color="currentColor"
-                 title="Manually set the color for this bar graph series."
-                 edit-title="Manually set the color for this bar graph series"
-                 view-title="The color for this bar graph series."
-                 short-label="Color"
-                 class="grid-properties"
-                 @colorSet="setColor"
-    />
-</ul>
-</template>
-
-<script>
-import ColorSwatch from '@/ui/color/ColorSwatch.vue';
-import Color from "@/ui/color/Color";
-
-export default {
-    components: {
-        ColorSwatch
-    },
-    inject: ['openmct', 'domainObject'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        },
-        colorPalette: {
-            type: Object,
-            required: true
-        }
-    },
-    data() {
-        return {
-            currentColor: undefined,
-            name: '',
-            type: '',
-            isAlias: false,
-            expanded: false
-        };
-    },
-    computed: {
-        expandedCssClass() {
-            return this.expanded ? 'c-disclosure-triangle--expanded' : '';
-        },
-        seriesCss() {
-            const type = this.openmct.types.get(this.type);
-            if (type && type.definition && type.definition.cssClass) {
-                return `c-object-label__type-icon ${type.definition.cssClass}`;
-            }
-
-            return 'c-object-label__type-icon';
-        },
-        aliasCss() {
-            let cssClass = '';
-            if (this.isAlias) {
-                cssClass = 'is-alias';
-            }
-
-            return cssClass;
-        }
-    },
-    watch: {
-        item: {
-            handler() {
-                this.initColorAndName();
-            },
-            deep: true
-        }
-    },
-    mounted() {
-        this.key = this.openmct.objects.makeKeyString(this.item);
-        this.initColorAndName();
-        this.removeBarStylesListener = this.openmct.objects.observe(this.domainObject, `configuration.barStyles.series["${this.key}"]`, this.initColorAndName);
-    },
-    beforeDestroy() {
-        if (this.removeBarStylesListener) {
-            this.removeBarStylesListener();
-        }
-    },
-    methods: {
-        initColorAndName() {
-            // this is called before the plot is initialized
-            if (!this.domainObject.configuration.barStyles.series[this.key]) {
-                const color = this.colorPalette.getNextColor().asHexString();
-                this.domainObject.configuration.barStyles.series[this.key] = {
-                    color,
-                    type: '',
-                    name: '',
-                    isAlias: false
-                };
-            } else if (!this.domainObject.configuration.barStyles.series[this.key].color) {
-                this.domainObject.configuration.barStyles.series[this.key].color = this.colorPalette.getNextColor().asHexString();
-            }
-
-            this.currentColor = this.domainObject.configuration.barStyles.series[this.key].color;
-            this.name = this.domainObject.configuration.barStyles.series[this.key].name;
-            this.type = this.domainObject.configuration.barStyles.series[this.key].type;
-            this.isAlias = this.domainObject.configuration.barStyles.series[this.key].isAlias;
-
-            let colorHexString = this.currentColor;
-            const colorObject = Color.fromHexString(colorHexString);
-
-            this.colorPalette.remove(colorObject);
-        },
-        setColor(chosenColor) {
-            this.currentColor = chosenColor.asHexString();
-            this.openmct.objects.mutate(
-                this.domainObject,
-                `configuration.barStyles.series["${this.key}"].color`,
-                this.currentColor
-            );
-        }
-    }
-};
-</script>

src/plugins/charts/plugin.js

@@ -1,51 +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 { BAR_GRAPH_KEY } from './BarGraphConstants';
-import BarGraphViewProvider from './BarGraphViewProvider';
-import BarGraphInspectorViewProvider from './inspector/BarGraphInspectorViewProvider';
-import BarGraphCompositionPolicy from './BarGraphCompositionPolicy';
-
-export default function () {
-    return function install(openmct) {
-        openmct.types.addType(BAR_GRAPH_KEY, {
-            key: BAR_GRAPH_KEY,
-            name: "Bar Graph",
-            cssClass: "icon-bar-chart",
-            description: "View data as a bar graph. Can be added to Display Layouts.",
-            creatable: true,
-            initialize: function (domainObject) {
-                domainObject.composition = [];
-                domainObject.configuration = {
-                    barStyles: { series: {} }
-                };
-            },
-            priority: 891
-        });
-
-        openmct.objectViews.addProvider(new BarGraphViewProvider(openmct));
-
-        openmct.inspectorViews.addProvider(new BarGraphInspectorViewProvider(openmct));
-
-        openmct.composition.addPolicy(new BarGraphCompositionPolicy(openmct).allow);
-    };
-}
-

src/plugins/charts/pluginSpec.js

@@ -1,486 +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 {createOpenMct, resetApplicationState, createMouseEvent} from "utils/testing";
-import Vue from "vue";
-import BarGraphPlugin from "./plugin";
-import BarGraph from './BarGraphPlot.vue';
-import EventEmitter from "EventEmitter";
-import { BAR_GRAPH_VIEW, BAR_GRAPH_KEY, BAR_GRAPH_INSPECTOR_KEY } from './BarGraphConstants';
-import BarGraphOptions from "./inspector/BarGraphOptions.vue";
-
-describe("the plugin", function () {
-    let element;
-    let child;
-    let openmct;
-    let telemetryPromise;
-    let telemetryPromiseResolve;
-    let mockObjectPath;
-
-    beforeEach((done) => {
-        mockObjectPath = [
-            {
-                name: 'mock folder',
-                type: 'fake-folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
-            },
-            {
-                name: 'mock parent folder',
-                type: 'time-strip',
-                identifier: {
-                    key: 'mock-parent-folder',
-                    namespace: ''
-                }
-            }
-        ];
-        const testTelemetry = [
-            {
-                'utc': 1,
-                'some-key': 'some-value 1',
-                'some-other-key': 'some-other-value 1'
-            },
-            {
-                'utc': 2,
-                'some-key': 'some-value 2',
-                'some-other-key': 'some-other-value 2'
-            },
-            {
-                'utc': 3,
-                'some-key': 'some-value 3',
-                'some-other-key': 'some-other-value 3'
-            }
-        ];
-
-        openmct = createOpenMct();
-
-        telemetryPromise = new Promise((resolve) => {
-            telemetryPromiseResolve = resolve;
-        });
-
-        spyOn(openmct.telemetry, 'request').and.callFake(() => {
-            telemetryPromiseResolve(testTelemetry);
-
-            return telemetryPromise;
-        });
-
-        openmct.install(new BarGraphPlugin());
-
-        element = document.createElement("div");
-        element.style.width = "640px";
-        element.style.height = "480px";
-        child = document.createElement("div");
-        child.style.width = "640px";
-        child.style.height = "480px";
-        element.appendChild(child);
-        document.body.appendChild(element);
-
-        spyOn(window, 'ResizeObserver').and.returnValue({
-            observe() {},
-            unobserve() {},
-            disconnect() {}
-        });
-
-        openmct.time.timeSystem("utc", {
-            start: 0,
-            end: 4
-        });
-
-        openmct.types.addType("test-object", {
-            creatable: true
-        });
-
-        openmct.on("start", done);
-        openmct.startHeadless();
-    });
-
-    afterEach((done) => {
-        openmct.time.timeSystem('utc', {
-            start: 0,
-            end: 1
-        });
-        resetApplicationState(openmct).then(done).catch(done);
-    });
-
-    describe("The bar graph view", () => {
-        let testDomainObject;
-        let barGraphObject;
-        // eslint-disable-next-line no-unused-vars
-        let component;
-        let mockComposition;
-
-        beforeEach(async () => {
-            const getFunc = openmct.$injector.get;
-            spyOn(openmct.$injector, "get")
-                .withArgs("exportImageService").and.returnValue({
-                    exportPNG: () => {},
-                    exportJPG: () => {}
-                })
-                .and.callFake(getFunc);
-
-            barGraphObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-plot"
-                },
-                type: "telemetry.plot.bar-graph",
-                name: "Test Bar Graph"
-            };
-
-            testDomainObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
-                },
-                configuration: {
-                    barStyles: {
-                        series: {}
-                    }
-                },
-                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
-                        }
-                    }]
-                }
-            };
-
-            mockComposition = new EventEmitter();
-            mockComposition.load = () => {
-                mockComposition.emit('add', testDomainObject);
-
-                return [testDomainObject];
-            };
-
-            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
-
-            let viewContainer = document.createElement("div");
-            child.append(viewContainer);
-            component = new Vue({
-                el: viewContainer,
-                components: {
-                    BarGraph
-                },
-                provide: {
-                    openmct: openmct,
-                    domainObject: barGraphObject,
-                    composition: openmct.composition.get(barGraphObject)
-                },
-                template: "<BarGraph></BarGraph>"
-            });
-
-            await Vue.nextTick();
-        });
-
-        it("provides a bar graph view", () => {
-            const applicableViews = openmct.objectViews.get(barGraphObject, mockObjectPath);
-            const plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === BAR_GRAPH_VIEW);
-            expect(plotViewProvider).toBeDefined();
-        });
-
-        it("Renders plotly bar graph", () => {
-            let barChartElement = element.querySelectorAll(".plotly");
-            expect(barChartElement.length).toBe(1);
-        });
-
-        it("Handles dots in telemetry id", () => {
-            const dotFullTelemetryObject = {
-                identifier: {
-                    namespace: "someNamespace",
-                    key: "~OpenMCT~outer.test-object.foo.bar"
-                },
-                type: "test-dotful-object",
-                name: "A Dotful Object",
-                telemetry: {
-                    values: [{
-                        key: "utc",
-                        format: "utc",
-                        name: "Time",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-key.foo.name.45",
-                        name: "Some dotful attribute",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        key: "some-other-key.bar.344.rad",
-                        name: "Another dotful attribute",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                }
-            };
-
-            const applicableViews = openmct.objectViews.get(barGraphObject, mockObjectPath);
-            const plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === BAR_GRAPH_VIEW);
-            const barGraphView = plotViewProvider.view(testDomainObject, [testDomainObject]);
-            barGraphView.show(child, true);
-            expect(testDomainObject.configuration.barStyles.series["test-object"].name).toEqual("Test Object");
-            mockComposition.emit('add', dotFullTelemetryObject);
-            expect(testDomainObject.configuration.barStyles.series["someNamespace:~OpenMCT~outer.test-object.foo.bar"].name).toEqual("A Dotful Object");
-            barGraphView.destroy();
-        });
-    });
-
-    describe("the bar graph objects", () => {
-        const mockObject = {
-            name: 'A very nice bar graph',
-            key: BAR_GRAPH_KEY,
-            creatable: true
-        };
-
-        it('defines a bar graph object type with the correct key', () => {
-            const objectDef = openmct.types.get(BAR_GRAPH_KEY).definition;
-            expect(objectDef.key).toEqual(mockObject.key);
-        });
-
-        it('is creatable', () => {
-            const objectDef = openmct.types.get(BAR_GRAPH_KEY).definition;
-            expect(objectDef.creatable).toEqual(mockObject.creatable);
-        });
-    });
-
-    describe("The bar graph composition policy", () => {
-
-        it("allows composition for telemetry that contain at least one range", () => {
-            const parent = {
-                "composition": [],
-                "configuration": {},
-                "name": "Some Bar Graph",
-                "type": "telemetry.plot.bar-graph",
-                "location": "mine",
-                "modified": 1631005183584,
-                "persisted": 1631005183502,
-                "identifier": {
-                    "namespace": "",
-                    "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
-                }
-            };
-            const testTelemetryObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
-                },
-                type: "test-object",
-                name: "Test Object",
-                telemetry: {
-                    values: [{
-                        key: "some-key",
-                        name: "Some attribute",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-other-key",
-                        name: "Another attribute",
-                        hints: {
-                            range: 1
-                        }
-                    }]
-                }
-            };
-            const composition = openmct.composition.get(parent);
-            expect(() => {
-                composition.add(testTelemetryObject);
-            }).not.toThrow();
-            expect(parent.composition.length).toBe(1);
-        });
-
-        it("disallows composition for telemetry that don't contain any range hints", () => {
-            const parent = {
-                "composition": [],
-                "configuration": {},
-                "name": "Some Bar Graph",
-                "type": "telemetry.plot.bar-graph",
-                "location": "mine",
-                "modified": 1631005183584,
-                "persisted": 1631005183502,
-                "identifier": {
-                    "namespace": "",
-                    "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
-                }
-            };
-            const testTelemetryObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
-                },
-                type: "test-object",
-                name: "Test Object",
-                telemetry: {
-                    values: [{
-                        key: "some-key",
-                        name: "Some attribute"
-                    }, {
-                        key: "some-other-key",
-                        name: "Another attribute"
-                    }]
-                }
-            };
-            const composition = openmct.composition.get(parent);
-            expect(() => {
-                composition.add(testTelemetryObject);
-            }).toThrow();
-            expect(parent.composition.length).toBe(0);
-        });
-    });
-    describe('the inspector view', () => {
-        let mockComposition;
-        let testDomainObject;
-        let selection;
-        let plotInspectorView;
-        let viewContainer;
-        let optionsElement;
-        beforeEach(async () => {
-            testDomainObject = {
-                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
-                        }
-                    }]
-                }
-            };
-
-            selection = [
-                [
-                    {
-                        context: {
-                            item: {
-                                id: "test-object",
-                                identifier: {
-                                    key: "test-object",
-                                    namespace: ''
-                                },
-                                type: "telemetry.plot.bar-graph",
-                                configuration: {
-                                    barStyles: {
-                                        series: {
-                                            '~Some~foo.bar': {
-                                                name: 'A telemetry object',
-                                                type: 'some-type',
-                                                isAlias: true
-                                            }
-                                        }
-                                    }
-                                },
-                                composition: [
-                                    {
-                                        key: '~Some~foo.bar'
-                                    }
-                                ]
-                            }
-                        }
-                    },
-                    {
-                        context: {
-                            item: {
-                                type: 'time-strip',
-                                identifier: {
-                                    key: 'some-other-key',
-                                    namespace: ''
-                                }
-                            }
-                        }
-                    }
-                ]
-            ];
-
-            mockComposition = new EventEmitter();
-            mockComposition.load = () => {
-                mockComposition.emit('add', testDomainObject);
-
-                return [testDomainObject];
-            };
-
-            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
-
-            viewContainer = document.createElement('div');
-            child.append(viewContainer);
-
-            const applicableViews = openmct.inspectorViews.get(selection);
-            plotInspectorView = applicableViews[0];
-            plotInspectorView.show(viewContainer);
-
-            await Vue.nextTick();
-            optionsElement = element.querySelector('.c-bar-graph-options');
-        });
-
-        afterEach(() => {
-            plotInspectorView.destroy();
-        });
-
-        it('it renders the options', () => {
-            expect(optionsElement).toBeDefined();
-        });
-
-        it('shows the name', () => {
-            const seriesEl = optionsElement.querySelector('.c-object-label__name');
-            expect(seriesEl.innerHTML).toEqual('A telemetry object');
-        });
-    });
-});

src/plugins/clearData/ClearDataAction.js

@@ -1,78 +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.
- *****************************************************************************/
-
-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';
-        this.key = 'clear-data-action';
-        this.description = 'Clears current data for object, unsubscribes and resubscribes to data';
-        this.cssClass = 'icon-clear-data';
-
-        this._openmct = openmct;
-        this._appliesToObjects = appliesToObjects;
-    }
-    invoke(objectPath) {
-        let domainObject = null;
-        if (objectPath) {
-            domainObject = objectPath[0];
-        }
-
-        this._openmct.objectViews.emit('clearData', domainObject);
-    }
-    appliesTo(objectPath) {
-        if (!objectPath) {
-            return false;
-        }
-
-        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/clearDataAction.js

@@ -20,24 +20,22 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-<template>
-<li class="c-inspect-properties__row">
-    <div class="c-inspect-properties__label">
-        {{ detail.name }}
-    </div>
-    <div class="c-inspect-properties__value">
-        {{ detail.value }}
-    </div>
-</li>
-</template>
+export default class ClearDataAction {
+    constructor(openmct, appliesToObjects) {
+        this.name = 'Clear Data for Object';
+        this.key = 'clear-data-action';
+        this.description = 'Clears current data for object, unsubscribes and resubscribes to data';
+        this.cssClass = 'icon-clear-data';
 
-<script>
-export default {
-    props: {
-        detail: {
-            type: Object,
-            required: true
-        }
+        this._openmct = openmct;
+        this._appliesToObjects = appliesToObjects;
     }
-};
-</script>
+    invoke(objectPath) {
+        this._openmct.objectViews.emit('clearData', objectPath[0]);
+    }
+    appliesTo(objectPath) {
+        let contextualDomainObject = objectPath[0];
+
+        return this._appliesToObjects.filter(type => contextualDomainObject.type === type).length;
+    }
+}

src/plugins/clearData/plugin.js

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

src/plugins/clearData/test/ClearDataActionSpec.js

@@ -1,140 +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,', () => {
-    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

@@ -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.
+ *****************************************************************************/
+
+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

@@ -1,59 +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 Clock from './components/Clock.vue';
-import Vue from 'vue';
-
-export default function ClockViewProvider(openmct) {
-    return {
-        key: 'clock.view',
-        name: 'Clock',
-        cssClass: 'icon-clock',
-        canView(domainObject) {
-            return domainObject.type === 'clock';
-        },
-
-        view: function (domainObject) {
-            let component;
-
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            Clock
-                        },
-                        provide: {
-                            openmct,
-                            domainObject
-                        },
-                        template: '<clock />'
-                    });
-                },
-                destroy: function () {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
-        }
-    };
-}

src/plugins/clock/components/Clock.vue

@@ -1,99 +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="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

@@ -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.
--->
-
-<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

@@ -1,154 +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 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

@@ -1,231 +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 { 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/Condition.js

@@ -65,7 +65,7 @@ export default class Condition extends EventEmitter {
         }
 
         this.trigger = conditionConfiguration.configuration.trigger;
-        this.summary = '';
+        this.description = '';
     }
 
     updateResult(datum) {
@@ -134,6 +134,7 @@ export default class Condition extends EventEmitter {
         criterionConfigurations.forEach((criterionConfiguration) => {
             this.addCriterion(criterionConfiguration);
         });
+        this.updateDescription();
     }
 
     updateCriteria(criterionConfigurations) {
@@ -145,6 +146,7 @@ export default class Condition extends EventEmitter {
         this.criteria.forEach((criterion) => {
             criterion.updateTelemetryObjects(this.conditionManager.telemetryObjects);
         });
+        this.updateDescription();
     }
 
     /**
@@ -198,6 +200,7 @@ export default class Condition extends EventEmitter {
             criterion.off('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
             criterion.off('telemetryIsStale', (obj) => this.handleStaleCriterion(obj));
             this.criteria.splice(found.index, 1, newCriterion);
+            this.updateDescription();
         }
     }
 
@@ -213,6 +216,7 @@ export default class Condition extends EventEmitter {
             });
             criterion.destroy();
             this.criteria.splice(found.index, 1);
+            this.updateDescription();
 
             return true;
         }
@@ -224,6 +228,7 @@ export default class Condition extends EventEmitter {
         let found = this.findCriterion(criterion.id);
         if (found) {
             this.criteria[found.index] = criterion.data;
+            this.updateDescription();
         }
     }
 
@@ -249,7 +254,8 @@ export default class Condition extends EventEmitter {
 
             description = `${description} ${criterion.getDescription()} ${(index < this.criteria.length - 1) ? triggerDescription.conjunction : ''}`;
         });
-        this.summary = description;
+        this.description = description;
+        this.conditionManager.updateConditionDescription(this);
     }
 
     getTriggerDescription() {

src/plugins/condition/ConditionManager.js

@@ -105,14 +105,7 @@ export default class ConditionManager extends EventEmitter {
     }
 
     updateConditionTelemetryObjects() {
-        this.conditions.forEach((condition) => {
-            condition.updateTelemetryObjects();
-            let index = this.conditionSetDomainObject.configuration.conditionCollection.findIndex(item => item.id === condition.id);
-            if (index > -1) {
-                //Only assign the summary, don't mutate the domain object
-                this.conditionSetDomainObject.configuration.conditionCollection[index].summary = this.updateConditionDescription(condition);
-            }
-        });
+        this.conditions.forEach((condition) => condition.updateTelemetryObjects());
     }
 
     removeConditionTelemetryObjects() {
@@ -146,17 +139,10 @@ export default class ConditionManager extends EventEmitter {
         }
     }
 
-    updateConditionDescription(condition) {
-        condition.updateDescription();
-
-        return condition.summary;
-    }
-
     updateCondition(conditionConfiguration) {
         let condition = this.findConditionById(conditionConfiguration.id);
         if (condition) {
             condition.update(conditionConfiguration);
-            conditionConfiguration.summary = this.updateConditionDescription(condition);
         }
 
         let index = this.conditionSetDomainObject.configuration.conditionCollection.findIndex(item => item.id === conditionConfiguration.id);
@@ -166,10 +152,16 @@ export default class ConditionManager extends EventEmitter {
         }
     }
 
+    updateConditionDescription(condition) {
+        const found = this.conditionSetDomainObject.configuration.conditionCollection.find(conditionConfiguration => (conditionConfiguration.id === condition.id));
+        if (found.summary !== condition.description) {
+            found.summary = condition.description;
+            this.persistConditions();
+        }
+    }
+
     initCondition(conditionConfiguration, index) {
         let condition = new Condition(conditionConfiguration, this.openmct, this);
-        conditionConfiguration.summary = this.updateConditionDescription(condition);
-
         if (index !== undefined) {
             this.conditions.splice(index + 1, 0, condition);
         } else {

src/plugins/condition/ConditionSetViewProvider.js

@@ -33,10 +33,8 @@ export default class ConditionSetViewProvider {
         this.cssClass = 'icon-conditional';
     }
 
-    canView(domainObject, objectPath) {
-        const isConditionSet = domainObject.type === 'conditionSet';
-
-        return isConditionSet && this.openmct.router.isNavigatedObject(objectPath);
+    canView(domainObject) {
+        return domainObject.type === 'conditionSet';
     }
 
     canEdit(domainObject) {

src/plugins/condition/components/Criterion.vue

@@ -244,7 +244,7 @@ export default {
                 this.telemetryMetadataOptions = [];
                 telemetryObjects.forEach(telemetryObject => {
                     let telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
-                    this.addMetaDataOptions(telemetryMetadata ? telemetryMetadata.values() : []);
+                    this.addMetaDataOptions(telemetryMetadata.values());
                 });
                 this.updateOperations();
             }

src/plugins/condition/components/TestData.vue

@@ -192,11 +192,7 @@ export default {
             this.telemetry.forEach((telemetryObject) => {
                 const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
                 let telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
-                if (telemetryMetadata) {
-                    this.telemetryMetadataOptions[id] = telemetryMetadata.values().slice();
-                } else {
-                    this.telemetryMetadataOptions[id] = [];
-                }
+                this.telemetryMetadataOptions[id] = telemetryMetadata.values().slice();
             });
         },
         addTestInput(testInput) {

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

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

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

@@ -141,7 +141,6 @@ const NON_STYLEABLE_CONTAINER_TYPES = [
 const NON_STYLEABLE_LAYOUT_ITEM_TYPES = [
     'line-view',
     'box-view',
-    'ellipse-view',
     'image-view'
 ];
 
@@ -297,7 +296,10 @@ export default {
             this.openmct.objects.getOriginalPath(this.conditionSetDomainObject.identifier).then(
                 (objectPath) => {
                     this.objectPath = objectPath;
-                    this.navigateToPath = '#/browse/' + this.openmct.objects.getRelativePath(this.objectPath);
+                    this.navigateToPath = '#/browse/' + this.objectPath
+                        .map(o => o && this.openmct.objects.makeKeyString(o.identifier))
+                        .reverse()
+                        .join('/');
                 }
             );
         },
@@ -319,7 +321,7 @@ export default {
             if (item) {
                 const type = this.openmct.types.get(item.type);
                 if (type && type.definition) {
-                    creatable = (type.definition.creatable !== undefined && (type.definition.creatable === 'true' || type.definition.creatable === true));
+                    creatable = (type.definition.creatable === true);
                 }
             }
 

src/plugins/condition/criterion/AllTelemetryCriterion.js

@@ -177,7 +177,7 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
                 const timeSystem = this.openmct.time.timeSystem();
 
                 telemetryRequestsResults.forEach((results, index) => {
-                    const latestDatum = (Array.isArray(results) && results.length) ? results[results.length - 1] : {};
+                    const latestDatum = results.length ? results[results.length - 1] : {};
                     const datumId = keys[index];
                     const normalizedDatum = this.createNormalizedDatum(latestDatum, telemetryObjects[datumId]);
 

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -167,11 +167,6 @@ export default class TelemetryCriterion extends EventEmitter {
                 id: this.id,
                 data: this.formatData(normalizedDatum)
             };
-        }).catch((error) => {
-            return {
-                id: this.id,
-                data: this.formatData()
-            };
         });
     }
 

src/plugins/condition/pluginSpec.js

@@ -27,7 +27,6 @@ import StylesView from "./components/inspector/StylesView.vue";
 import Vue from 'vue';
 import {getApplicableStylesForItem} from "./utils/styleUtils";
 import ConditionManager from "@/plugins/condition/ConditionManager";
-import StyleRuleManager from "./StyleRuleManager";
 
 describe('the plugin', function () {
     let conditionSetDefinition;
@@ -97,12 +96,8 @@ describe('the plugin', function () {
 
         mockListener = jasmine.createSpy('mockListener');
 
-        openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(true);
-
         conditionSetDefinition.initialize(mockConditionSetDomainObject);
 
-        spyOn(openmct.objects, "save").and.returnValue(Promise.resolve(true));
-
         openmct.on('start', done);
         openmct.startHeadless();
     });
@@ -131,6 +126,21 @@ describe('the plugin', function () {
             expect(mockConditionSetDomainObject.composition instanceof Array).toBeTrue();
             expect(mockConditionSetDomainObject.composition.length).toEqual(0);
         });
+
+        it('provides a view', () => {
+            const testViewObject = {
+                id: "test-object",
+                type: "conditionSet",
+                configuration: {
+                    conditionCollection: []
+                }
+            };
+
+            const applicableViews = openmct.objectViews.get(testViewObject, []);
+            let conditionSetView = applicableViews.find((viewProvider) => viewProvider.key === 'conditionSet.view');
+            expect(conditionSetView).toBeDefined();
+        });
+
     });
 
     describe('the condition set usage for multiple display layout items', () => {
@@ -220,7 +230,7 @@ describe('the plugin', function () {
         };
         const staticStyle = {
             "style": {
-                "backgroundColor": "#666666",
+                "backgroundColor": "#717171",
                 "border": "1px solid #00ffff"
             }
         };
@@ -228,7 +238,7 @@ describe('the plugin', function () {
             "conditionId": "39584410-cbf9-499e-96dc-76f27e69885d",
             "style": {
                 "isStyleInvisible": "",
-                "backgroundColor": "#666666",
+                "backgroundColor": "#717171",
                 "border": "1px solid #ffff00"
             }
         };
@@ -240,7 +250,7 @@ describe('the plugin', function () {
                 "configuration": {
                     "items": [
                         {
-                            "fill": "#666666",
+                            "fill": "#717171",
                             "stroke": "",
                             "x": 1,
                             "y": 1,
@@ -249,22 +259,12 @@ describe('the plugin', function () {
                             "type": "box-view",
                             "id": "89b88746-d325-487b-aec4-11b79afff9e8"
                         },
-                        {
-                            "fill": "#666666",
-                            "stroke": "",
-                            "x": 1,
-                            "y": 1,
-                            "width": 10,
-                            "height": 5,
-                            "type": "ellipse-view",
-                            "id": "19b88746-d325-487b-aec4-11b79afff9z8"
-                        },
                         {
                             "x": 18,
                             "y": 9,
                             "x2": 23,
                             "y2": 4,
-                            "stroke": "#666666",
+                            "stroke": "#717171",
                             "type": "line-view",
                             "id": "57d49a28-7863-43bd-9593-6570758916f0"
                         },
@@ -299,12 +299,12 @@ describe('the plugin', function () {
                 "y": 9,
                 "x2": 23,
                 "y2": 4,
-                "stroke": "#666666",
+                "stroke": "#717171",
                 "type": "line-view",
                 "id": "57d49a28-7863-43bd-9593-6570758916f0"
             };
             boxLayoutItem = {
-                "fill": "#666666",
+                "fill": "#717171",
                 "stroke": "",
                 "x": 1,
                 "y": 1,
@@ -712,123 +712,4 @@ describe('the plugin', function () {
             expect(result[2]).toBeUndefined();
         });
     });
-
-    describe('canView of ConditionSetViewProvider', () => {
-        let conditionSetView;
-        const testViewObject = {
-            id: "test-object",
-            type: "conditionSet",
-            configuration: {
-                conditionCollection: []
-            }
-        };
-
-        beforeEach(() => {
-            const applicableViews = openmct.objectViews.get(testViewObject, []);
-            conditionSetView = applicableViews.find((viewProvider) => viewProvider.key === 'conditionSet.view');
-        });
-
-        it('provides a view', () => {
-            expect(conditionSetView).toBeDefined();
-        });
-
-        it('returns true for type `conditionSet` and is a navigated Object', () => {
-            openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(true);
-
-            const isCanView = conditionSetView.canView(testViewObject, []);
-
-            expect(isCanView).toBe(true);
-        });
-
-        it('returns false for type `conditionSet` and is not a navigated Object', () => {
-            openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(false);
-
-            const isCanView = conditionSetView.canView(testViewObject, []);
-
-            expect(isCanView).toBe(false);
-        });
-
-        it('returns false for type `notConditionSet` and is a navigated Object', () => {
-            openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(true);
-            testViewObject.type = 'notConditionSet';
-            const isCanView = conditionSetView.canView(testViewObject, []);
-
-            expect(isCanView).toBe(false);
-        });
-    });
-
-    describe('The Style Rule Manager', () => {
-        it('should subscribe to the conditionSet after the editor saves', async () => {
-            const stylesObject = {
-                "styles": [
-                    {
-                        "conditionId": "a8bf7d1a-c1bb-4fc7-936a-62056a51b5cd",
-                        "style": {
-                            "backgroundColor": "#38761d",
-                            "border": "",
-                            "color": "#073763",
-                            "isStyleInvisible": ""
-                        }
-                    },
-                    {
-                        "conditionId": "0558fa77-9bdc-4142-9f9a-7a28fe95182e",
-                        "style": {
-                            "backgroundColor": "#980000",
-                            "border": "",
-                            "color": "#ff9900",
-                            "isStyleInvisible": ""
-                        }
-                    }
-                ],
-                "staticStyle": {
-                    "style": {
-                        "backgroundColor": "",
-                        "border": "",
-                        "color": ""
-                    }
-                },
-                "selectedConditionId": "0558fa77-9bdc-4142-9f9a-7a28fe95182e",
-                "defaultConditionId": "0558fa77-9bdc-4142-9f9a-7a28fe95182e",
-                "conditionSetIdentifier": {
-                    "namespace": "",
-                    "key": "035c589c-d98f-429e-8b89-d76bd8d22b29"
-                }
-            };
-            openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
-            const mockTransactionService = jasmine.createSpyObj(
-                'transactionService',
-                ['commit']
-            );
-            openmct.telemetry = jasmine.createSpyObj('telemetry', ['isTelemetryObject', "subscribe", "getMetadata", "getValueFormatter", "request"]);
-            openmct.telemetry.isTelemetryObject.and.returnValue(true);
-            openmct.telemetry.subscribe.and.returnValue(function () {});
-            openmct.telemetry.getValueFormatter.and.returnValue({
-                parse: function (value) {
-                    return value;
-                }
-            });
-            openmct.telemetry.getMetadata.and.returnValue(testTelemetryObject.telemetry);
-            openmct.telemetry.request.and.returnValue(Promise.resolve([]));
-
-            mockTransactionService.commit = async () => {};
-            const mockIdentifierService = jasmine.createSpyObj(
-                'identifierService',
-                ['parse']
-            );
-            mockIdentifierService.parse.and.returnValue({
-                getSpace: () => {
-                    return '';
-                }
-            });
-
-            openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
-            openmct.$injector.get.withArgs('identifierService').and.returnValue(mockIdentifierService)
-                .withArgs('transactionService').and.returnValue(mockTransactionService);
-
-            const styleRuleManger = new StyleRuleManager(stylesObject, openmct, null, true);
-            spyOn(styleRuleManger, 'subscribeToConditionSet');
-            await openmct.editor.save();
-            expect(styleRuleManger.subscribeToConditionSet).toHaveBeenCalledTimes(1);
-        });
-    });
 });

src/plugins/condition/utils/styleUtils.js

@@ -29,10 +29,9 @@ const styleProps = {
         noneValue: NONE_VALUE,
         applicableForType: type => {
             return !type ? true : (type === 'text-view'
-                                            || type === 'telemetry-view'
-                                            || type === 'box-view'
-                                            || type === 'ellipse-view'
-                                            || type === 'subobject-view');
+                                      || type === 'telemetry-view'
+                                      || type === 'box-view'
+                                      || type === 'subobject-view');
         }
     },
     border: {
@@ -42,7 +41,6 @@ const styleProps = {
             return !type ? true : (type === 'text-view'
                                             || type === 'telemetry-view'
                                             || type === 'box-view'
-                                            || type === 'ellipse-view'
                                             || type === 'image-view'
                                             || type === 'line-view'
                                             || type === 'subobject-view');

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -23,7 +23,7 @@
 <template>
 <component :is="urlDefined ? 'a' : 'span'"
            class="c-condition-widget u-style-receiver js-style-receiver"
-           :href="url"
+           :href="urlDefined ? internalDomainObject.url : null"
 >
     <div class="c-condition-widget__label">
         {{ internalDomainObject.label }}
@@ -32,8 +32,6 @@
 </template>
 
 <script>
-const sanitizeUrl = require("@braintree/sanitize-url").sanitizeUrl;
-
 export default {
     inject: ['openmct', 'domainObject'],
     data: function () {
@@ -44,9 +42,6 @@ export default {
     computed: {
         urlDefined() {
             return this.internalDomainObject.url && this.internalDomainObject.url.length > 0;
-        },
-        url() {
-            return this.urlDefined ? sanitizeUrl(this.internalDomainObject.url) : null;
         }
     },
     mounted() {

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -149,7 +149,6 @@ define(['lodash'], function (_) {
                         return type === 'text-view'
                             || type === 'telemetry-view'
                             || type === 'box-view'
-                            || type === 'ellipse-view'
                             || type === 'image-view'
                             || type === 'line-view'
                             || type === 'subobject-view';
@@ -181,10 +180,6 @@ define(['lodash'], function (_) {
                                     "name": "Box",
                                     "class": "icon-box-round-corners"
                                 },
-                                {
-                                    "name": "Ellipse",
-                                    "class": "icon-circle"
-                                },
                                 {
                                     "name": "Line",
                                     "class": "icon-line-horz"
@@ -750,7 +745,7 @@ define(['lodash'], function (_) {
                         if (toolbar.remove.length === 0) {
                             toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
                         }
-                    } else if (layoutItem.type === 'box-view' || layoutItem.type === 'ellipse-view') {
+                    } else if (layoutItem.type === 'box-view') {
                         if (toolbar.position.length === 0) {
                             toolbar.position = [
                                 getStackOrder(selectedParent, selectionPath),

src/plugins/displayLayout/components/BoxView.vue

@@ -43,7 +43,7 @@ import conditionalStylesMixin from '../mixins/objectStyles-mixin';
 export default {
     makeDefinition() {
         return {
-            fill: '#666666',
+            fill: '#717171',
             stroke: '',
             x: 1,
             y: 1,

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -76,7 +76,6 @@ import uuid from 'uuid';
 import SubobjectView from './SubobjectView.vue';
 import TelemetryView from './TelemetryView.vue';
 import BoxView from './BoxView.vue';
-import EllipseView from './EllipseView.vue';
 import TextView from './TextView.vue';
 import LineView from './LineView.vue';
 import ImageView from './ImageView.vue';
@@ -113,7 +112,6 @@ const ITEM_TYPE_VIEW_MAP = {
     'subobject-view': SubobjectView,
     'telemetry-view': TelemetryView,
     'box-view': BoxView,
-    'ellipse-view': EllipseView,
     'line-view': LineView,
     'text-view': TextView,
     'image-view': ImageView

src/plugins/displayLayout/components/EditMarquee.vue

@@ -28,19 +28,19 @@
 >
     <div
         class="c-frame-edit__handle c-frame-edit__handle--nw"
-        @mousedown.left="startResize([1,1], [-1,-1], $event)"
+        @mousedown="startResize([1,1], [-1,-1], $event)"
     ></div>
     <div
         class="c-frame-edit__handle c-frame-edit__handle--ne"
-        @mousedown.left="startResize([0,1], [1,-1], $event)"
+        @mousedown="startResize([0,1], [1,-1], $event)"
     ></div>
     <div
         class="c-frame-edit__handle c-frame-edit__handle--sw"
-        @mousedown.left="startResize([1,0], [-1,1], $event)"
+        @mousedown="startResize([1,0], [-1,1], $event)"
     ></div>
     <div
         class="c-frame-edit__handle c-frame-edit__handle--se"
-        @mousedown.left="startResize([0,0], [1,1], $event)"
+        @mousedown="startResize([0,0], [1,1], $event)"
     ></div>
 </div>
 </template>

src/plugins/displayLayout/components/EllipseView.vue

@@ -1,122 +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>
-<layout-frame
-    :item="item"
-    :grid-size="gridSize"
-    :is-editing="isEditing"
-    @move="(gridDelta) => $emit('move', gridDelta)"
-    @endMove="() => $emit('endMove')"
->
-    <div
-        class="c-ellipse-view u-style-receiver js-style-receiver"
-        :class="[styleClass]"
-        :style="style"
-    ></div>
-</layout-frame>
-</template>
-
-<script>
-import LayoutFrame from './LayoutFrame.vue';
-import conditionalStylesMixin from '../mixins/objectStyles-mixin';
-
-export default {
-    makeDefinition() {
-        return {
-            fill: '#666666',
-            stroke: '',
-            x: 1,
-            y: 1,
-            width: 10,
-            height: 10
-        };
-    },
-    components: {
-        LayoutFrame
-    },
-    mixins: [conditionalStylesMixin],
-    inject: ['openmct'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        },
-        gridSize: {
-            type: Array,
-            required: true,
-            validator: (arr) => arr && arr.length === 2
-                    && arr.every(el => typeof el === 'number')
-        },
-        index: {
-            type: Number,
-            required: true
-        },
-        initSelect: Boolean,
-        isEditing: {
-            type: Boolean,
-            required: true
-        }
-    },
-    computed: {
-        style() {
-            if (this.itemStyle) {
-                return this.itemStyle;
-            } else {
-                return {
-                    backgroundColor: this.item.fill,
-                    border: this.item.stroke ? '1px solid ' + this.item.stroke : ''
-                };
-            }
-        }
-    },
-    watch: {
-        index(newIndex) {
-            if (!this.context) {
-                return;
-            }
-
-            this.context.index = newIndex;
-        },
-        item(newItem) {
-            if (!this.context) {
-                return;
-            }
-
-            this.context.layoutItem = newItem;
-        }
-    },
-    mounted() {
-        this.context = {
-            layoutItem: this.item,
-            index: this.index
-        };
-        this.removeSelectable = this.openmct.selection.selectable(
-            this.$el, this.context, this.initSelect);
-    },
-    destroyed() {
-        if (this.removeSelectable) {
-            this.removeSelectable();
-        }
-    }
-};
-</script>

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -33,7 +33,7 @@
     <slot></slot>
     <div
         class="c-frame__move-bar"
-        @mousedown.left="startMove($event)"
+        @mousedown="isEditing ? startMove([1,1], [0,0], $event) : null"
     ></div>
 </div>
 </template>
@@ -93,11 +93,7 @@ export default {
                 return value - this.initialPosition[index];
             }.bind(this));
         },
-        startMove(event, posFactor = [1, 1], dimFactor = [0, 0]) {
-            if (!this.isEditing) {
-                return;
-            }
-
+        startMove(posFactor, dimFactor, event) {
             document.body.addEventListener('mousemove', this.continueMove);
             document.body.addEventListener('mouseup', this.endMove);
             this.dragPosition = {

src/plugins/displayLayout/components/LineView.vue

@@ -45,7 +45,7 @@
 
     <div
         class="c-frame__move-bar"
-        @mousedown.left="startDrag($event)"
+        @mousedown="startDrag($event)"
     ></div>
     <div
         v-if="showFrameEdit"
@@ -96,7 +96,7 @@ export default {
             y: 10,
             x2: 10,
             y2: 5,
-            stroke: '#666666'
+            stroke: '#717171'
         };
     },
     mixins: [conditionalStylesMixin],

src/plugins/displayLayout/components/box-and-line-views.scss

@@ -1,5 +1,4 @@
-.c-box-view,
-.c-ellipse-view {
+.c-box-view {
     border-width: $drawingObjBorderW !important;
     display: flex;
     align-items: stretch;
@@ -9,10 +8,6 @@
     }
 }
 
-.c-ellipse-view {
-    border-radius: 50%;
-}
-
 .c-line-view {
     &.c-frame {
         box-shadow: none !important;

src/plugins/displayLayout/pluginSpec.js

@@ -186,7 +186,7 @@ describe('the plugin', function () {
                 'configuration': {
                     'items': [
                         {
-                            'fill': '#666666',
+                            'fill': '#717171',
                             'stroke': '',
                             'x': 1,
                             'y': 1,
@@ -195,22 +195,12 @@ describe('the plugin', function () {
                             'type': 'box-view',
                             'id': '89b88746-d325-487b-aec4-11b79afff9e8'
                         },
-                        {
-                            'fill': '#666666',
-                            'stroke': '',
-                            'x': 1,
-                            'y': 1,
-                            'width': 10,
-                            'height': 10,
-                            'type': 'ellipse-view',
-                            'id': '19b88746-d325-487b-aec4-11b79afff9z8'
-                        },
                         {
                             'x': 18,
                             'y': 9,
                             'x2': 23,
                             'y2': 4,
-                            'stroke': '#666666',
+                            'stroke': '#717171',
                             'type': 'line-view',
                             'id': '57d49a28-7863-43bd-9593-6570758916f0'
                         },
@@ -351,7 +341,7 @@ describe('the plugin', function () {
         it('provides controls including separators', () => {
             const displayLayoutToolbar = openmct.toolbars.get(selection);
 
-            expect(displayLayoutToolbar.length).toBe(7);
+            expect(displayLayoutToolbar.length).toBe(9);
         });
     });
 });

src/plugins/filters/components/FiltersView.vue

@@ -101,7 +101,7 @@ export default {
         addChildren(domainObject) {
             let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
             let metadata = this.openmct.telemetry.getMetadata(domainObject);
-            let metadataWithFilters = metadata ? metadata.valueMetadatas.filter(value => value.filters) : [];
+            let metadataWithFilters = metadata.valueMetadatas.filter(value => value.filters);
             let hasFiltersWithKeyString = this.persistedFilters[keyString] !== undefined;
             let mutateFilters = false;
             let childObject = {

src/plugins/hyperlink/HyperlinkLayout.vue

@@ -27,7 +27,7 @@
        'c-hyperlink--button' : isButton
    }"
    :target="domainObject.linkTarget"
-   :href="url"
+   :href="domainObject.url"
 >
     <span class="c-hyperlink__label">{{ domainObject.displayText }}</span>
 </a>
@@ -35,7 +35,6 @@
 </template>
 
 <script>
-const sanitizeUrl = require("@braintree/sanitize-url").sanitizeUrl;
 
 export default {
     inject: ['domainObject'],
@@ -46,9 +45,6 @@ export default {
             }
 
             return true;
-        },
-        url() {
-            return sanitizeUrl(this.domainObject.url);
         }
     }
 };

src/plugins/imagery/ImageryTimestripViewProvider.js

@@ -1,77 +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 ImageryTimeView from './components/ImageryTimeView.vue';
-import Vue from "vue";
-
-export default function ImageryTimestripViewProvider(openmct) {
-    const type = 'example.imagery.time-strip.view';
-
-    function hasImageTelemetry(domainObject) {
-        const metadata = openmct.telemetry.getMetadata(domainObject);
-        if (!metadata) {
-            return false;
-        }
-
-        return metadata.valuesForHints(['image']).length > 0;
-    }
-
-    return {
-        key: type,
-        name: 'Imagery Timestrip View',
-        cssClass: 'icon-image',
-        canView: function (domainObject, objectPath) {
-            let isChildOfTimeStrip = objectPath.find(object => object.type === 'time-strip');
-
-            return hasImageTelemetry(domainObject) && isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
-        },
-        view: function (domainObject, objectPath) {
-            let component;
-
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            ImageryTimeView
-                        },
-                        provide: {
-                            openmct: openmct,
-                            domainObject: domainObject,
-                            objectPath: objectPath
-                        },
-                        template: '<imagery-time-view></imagery-time-view>'
-
-                    });
-                },
-
-                destroy: function () {
-                    component.$destroy();
-                    component = undefined;
-                },
-
-                getComponent() {
-                    return component;
-                }
-            };
-        }
-    };
-}

src/plugins/imagery/ImageryView.js

@@ -1,4 +1,4 @@
-import ImageryViewComponent from './components/ImageryView.vue';
+import ImageryViewLayout from './components/ImageryViewLayout.vue';
 
 import Vue from 'vue';
 
@@ -10,32 +10,19 @@ export default class ImageryView {
         this.component = undefined;
     }
 
-    show(element, isEditing, viewOptions) {
-        let alternateObjectPath;
-        let indexForFocusedImage;
-        if (viewOptions) {
-            indexForFocusedImage = viewOptions.indexForFocusedImage;
-            alternateObjectPath = viewOptions.objectPath;
-        }
-
+    show(element) {
         this.component = new Vue({
             el: element,
             components: {
-                'imagery-view': ImageryViewComponent
+                ImageryViewLayout
             },
             provide: {
                 openmct: this.openmct,
                 domainObject: this.domainObject,
-                objectPath: alternateObjectPath || this.objectPath,
+                objectPath: this.objectPath,
                 currentView: this
             },
-            data() {
-                return {
-                    indexForFocusedImage
-                };
-            },
-            template: '<imagery-view :index-for-focused-image="indexForFocusedImage" ref="ImageryContainer"></imagery-view>'
-
+            template: '<imagery-view-layout ref="ImageryLayout"></imagery-view-layout>'
         });
     }
 

src/plugins/imagery/ImageryViewProvider.js

@@ -37,10 +37,8 @@ export default function ImageryViewProvider(openmct) {
         key: type,
         name: 'Imagery Layout',
         cssClass: 'icon-image',
-        canView: function (domainObject, objectPath) {
-            let isChildOfTimeStrip = objectPath.find(object => object.type === 'time-strip');
-
-            return hasImageTelemetry(domainObject) && (!isChildOfTimeStrip || openmct.router.isNavigatedObject(objectPath));
+        canView: function (domainObject) {
+            return hasImageTelemetry(domainObject);
         },
         view: function (domainObject, objectPath) {
             return new ImageryView(openmct, domainObject, objectPath);

src/plugins/imagery/components/ImageryTimeView.vue

@@ -1,411 +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 ref="imagery"
-     class="c-imagery-tsv c-timeline-holder"
->
-    <div ref="imageryHolder"
-         class="c-imagery-tsv__contents u-contents"
-    >
-    </div>
-</div>
-</template>
-
-<script>
-import * as d3Scale from 'd3-scale';
-import SwimLane from "@/ui/components/swim-lane/SwimLane.vue";
-import Vue from "vue";
-import imageryData from "../../imagery/mixins/imageryData";
-import PreviewAction from "@/ui/preview/PreviewAction";
-import _ from "lodash";
-
-const PADDING = 1;
-const ROW_HEIGHT = 100;
-const IMAGE_SIZE = 85;
-const IMAGE_WIDTH_THRESHOLD = 25;
-const CONTAINER_CLASS = 'c-imagery-tsv-container';
-const NO_ITEMS_CLASS = 'c-imagery-tsv__no-items';
-const IMAGE_WRAPPER_CLASS = 'c-imagery-tsv__image-wrapper';
-const ID_PREFIX = 'wrapper-';
-const IMAGE_ID_PREFIX = 'image-';
-
-export default {
-    mixins: [imageryData],
-    inject: ['openmct', 'domainObject', 'objectPath'],
-    data() {
-        let timeSystem = this.openmct.time.timeSystem();
-        this.metadata = {};
-        this.requestCount = 0;
-
-        return {
-            viewBounds: undefined,
-            height: 0,
-            durationFormatter: undefined,
-            imageHistory: [],
-            timeSystem: timeSystem,
-            keyString: undefined
-        };
-    },
-    computed: {
-        imageHistorySize() {
-            return this.imageHistory.length;
-        }
-    },
-    watch: {
-        imageHistorySize(newSize, oldSize) {
-            this.updatePlotImagery();
-        }
-    },
-    mounted() {
-        this.previewAction = new PreviewAction(this.openmct);
-
-        this.canvas = this.$refs.imagery.appendChild(document.createElement('canvas'));
-        this.canvas.height = 0;
-        this.canvasContext = this.canvas.getContext('2d');
-        this.setDimensions();
-
-        this.setScaleAndPlotImagery = this.setScaleAndPlotImagery.bind(this);
-        this.updateViewBounds = this.updateViewBounds.bind(this);
-        this.setTimeContext = this.setTimeContext.bind(this);
-        this.setTimeContext();
-
-        this.updateViewBounds();
-
-        this.resize = _.debounce(this.resize, 400);
-        this.imageryStripResizeObserver = new ResizeObserver(this.resize);
-        this.imageryStripResizeObserver.observe(this.$refs.imagery);
-
-        this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.observeForChanges);
-    },
-    beforeDestroy() {
-        if (this.imageryStripResizeObserver) {
-            this.imageryStripResizeObserver.disconnect();
-        }
-
-        this.stopFollowingTimeContext();
-        if (this.unlisten) {
-            this.unlisten();
-        }
-    },
-    methods: {
-        setTimeContext() {
-            this.stopFollowingTimeContext();
-            this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-            this.timeContext.on("timeSystem", this.setScaleAndPlotImagery);
-            this.timeContext.on("bounds", this.updateViewBounds);
-            this.timeContext.on("timeContext", this.setTimeContext);
-        },
-        stopFollowingTimeContext() {
-            if (this.timeContext) {
-                this.timeContext.off("timeSystem", this.setScaleAndPlotImagery);
-                this.timeContext.off("bounds", this.updateViewBounds);
-                this.timeContext.off("timeContext", this.setTimeContext);
-            }
-        },
-        expand(index) {
-            const path = this.objectPath[0];
-            this.previewAction.invoke([path], {
-                indexForFocusedImage: index,
-                objectPath: this.objectPath
-            });
-        },
-        observeForChanges(mutatedObject) {
-            this.updateViewBounds();
-        },
-        resize() {
-            let clientWidth = this.getClientWidth();
-            if (clientWidth !== this.width) {
-                this.setDimensions();
-                this.updateViewBounds();
-            }
-        },
-        getClientWidth() {
-            let clientWidth = this.$refs.imagery.clientWidth;
-
-            if (!clientWidth) {
-                //this is a hack - need a better way to find the parent of this component
-                let parent = this.openmct.layout.$refs.browseObject.$el;
-                if (parent) {
-                    clientWidth = parent.getBoundingClientRect().width;
-                }
-            }
-
-            return clientWidth;
-        },
-        updateViewBounds(bounds, isTick) {
-            this.viewBounds = this.timeContext.bounds();
-
-            if (this.timeSystem === undefined) {
-                this.timeSystem = this.timeContext.timeSystem();
-            }
-
-            this.setScaleAndPlotImagery(this.timeSystem, !isTick);
-
-        },
-        setScaleAndPlotImagery(timeSystem, clearAllImagery) {
-            if (timeSystem !== undefined) {
-                this.timeSystem = timeSystem;
-                this.timeFormatter = this.getFormatter(this.timeSystem.key);
-            }
-
-            this.setScale(this.timeSystem);
-            this.updatePlotImagery(clearAllImagery);
-        },
-        getFormatter(key) {
-            const metadata = this.openmct.telemetry.getMetadata(this.domainObject);
-
-            let metadataValue = metadata.value(key) || { format: key };
-            let valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
-
-            return valueFormatter;
-        },
-        updatePlotImagery(clearAllImagery) {
-            this.clearPreviousImagery(clearAllImagery);
-            if (this.xScale) {
-                this.drawImagery();
-            }
-        },
-        clearPreviousImagery(clearAllImagery) {
-            //TODO: Only clear items that are out of bounds
-            let noItemsEl = this.$el.querySelectorAll(`.${NO_ITEMS_CLASS}`);
-            noItemsEl.forEach(item => {
-                item.remove();
-            });
-            let imagery = this.$el.querySelectorAll(`.${IMAGE_WRAPPER_CLASS}`);
-            imagery.forEach(item => {
-                if (clearAllImagery) {
-                    item.remove();
-                } else {
-                    const id = item.getAttributeNS(null, 'id');
-                    if (id) {
-                        const timestamp = id.replace(ID_PREFIX, '');
-                        if (!this.isImageryInBounds({
-                            time: timestamp
-                        })) {
-                            item.remove();
-                        }
-                    }
-                }
-            });
-        },
-        setDimensions() {
-            const imageryHolder = this.$refs.imagery;
-            this.width = this.getClientWidth();
-
-            this.height = Math.round(imageryHolder.getBoundingClientRect().height);
-        },
-        setScale(timeSystem) {
-            if (!this.width) {
-                return;
-            }
-
-            if (timeSystem === undefined) {
-                timeSystem = this.timeContext.timeSystem();
-            }
-
-            if (timeSystem.isUTCBased) {
-                this.xScale = d3Scale.scaleUtc();
-                this.xScale.domain(
-                    [new Date(this.viewBounds.start), new Date(this.viewBounds.end)]
-                );
-            } else {
-                this.xScale = d3Scale.scaleLinear();
-                this.xScale.domain(
-                    [this.viewBounds.start, this.viewBounds.end]
-                );
-            }
-
-            this.xScale.range([PADDING, this.width - PADDING * 2]);
-        },
-        isImageryInBounds(imageObj) {
-            return (imageObj.time <= this.viewBounds.end) && (imageObj.time >= this.viewBounds.start);
-        },
-        getImageryContainer() {
-            let containerHeight = 100;
-            let containerWidth = this.imageHistory.length ? this.width : 200;
-            let imageryContainer;
-
-            let existingContainer = this.$el.querySelector(`.${CONTAINER_CLASS}`);
-            if (existingContainer) {
-                imageryContainer = existingContainer;
-                imageryContainer.style.maxWidth = `${containerWidth}px`;
-            } else {
-                let component = new Vue({
-                    components: {
-                        SwimLane
-                    },
-                    provide: {
-                        openmct: this.openmct
-                    },
-                    data() {
-                        return {
-                            isNested: true
-                        };
-                    },
-                    template: `<swim-lane :is-nested="isNested" :hide-label="true"><template slot="object"><div class="c-imagery-tsv-container"></div></template></swim-lane>`
-                });
-
-                this.$refs.imageryHolder.appendChild(component.$mount().$el);
-
-                imageryContainer = component.$el.querySelector(`.${CONTAINER_CLASS}`);
-                imageryContainer.style.maxWidth = `${containerWidth}px`;
-                imageryContainer.style.height = `${containerHeight}px`;
-            }
-
-            return imageryContainer;
-        },
-        isImageryWidthAcceptable() {
-            // We're calculating if there is enough space between images to show the thumbnails.
-            // This algorithm could probably be enhanced to check the x co-ordinate distance between 2 consecutive images, but
-            // we will go with this for now assuming imagery is not sorted by asc time so it's difficult to calculate.
-            // TODO: Use telemetry.requestCollection to get sorted telemetry
-            const currentStart = this.viewBounds.start;
-            const currentEnd = this.viewBounds.end;
-            const rectX = this.xScale(currentStart);
-            const rectY = this.xScale(currentEnd);
-            const imageContainerWidth = this.imageHistory.length ? (rectY - rectX) / this.imageHistory.length : 0;
-
-            return imageContainerWidth < IMAGE_WIDTH_THRESHOLD;
-        },
-        drawImagery() {
-            let imageryContainer = this.getImageryContainer();
-            const showImagePlaceholders = this.isImageryWidthAcceptable();
-            let index = 0;
-            if (this.imageHistory.length) {
-                this.imageHistory.forEach((currentImageObject) => {
-                    if (this.isImageryInBounds(currentImageObject)) {
-                        this.plotImagery(currentImageObject, showImagePlaceholders, imageryContainer, index);
-                        index = index + 1;
-                    }
-                });
-            } else {
-                this.plotNoItems(imageryContainer);
-            }
-        },
-        plotNoItems(containerElement) {
-            let textElement = document.createElement('text');
-            textElement.classList.add(NO_ITEMS_CLASS);
-            textElement.innerHTML = 'No images within timeframe';
-
-            containerElement.appendChild(textElement);
-        },
-        setNSAttributesForElement(element, attributes) {
-            if (!element) {
-                return;
-            }
-
-            Object.keys(attributes).forEach((key) => {
-                element.setAttributeNS(null, key, attributes[key]);
-            });
-        },
-        setStyles(element, styles) {
-            if (!element) {
-                return;
-            }
-
-            Object.keys(styles).forEach((key) => {
-                element.style[key] = styles[key];
-            });
-        },
-        getImageWrapper(item) {
-            const id = `${ID_PREFIX}${item.time}`;
-
-            return this.$el.querySelector(`.c-imagery-tsv__contents div[id=${id}]`);
-        },
-        plotImagery(item, showImagePlaceholders, containerElement, index) {
-            let existingImageWrapper = this.getImageWrapper(item);
-            //imageWrapper wraps the vertical tick and the image
-            if (existingImageWrapper) {
-                this.updateExistingImageWrapper(existingImageWrapper, item, showImagePlaceholders);
-            } else {
-                let imageWrapper = this.createImageWrapper(index, item, showImagePlaceholders);
-                containerElement.appendChild(imageWrapper);
-            }
-        },
-        setImageDisplay(imageElement, showImagePlaceholders) {
-            if (showImagePlaceholders) {
-                imageElement.style.display = 'none';
-            } else {
-                imageElement.style.display = 'block';
-            }
-        },
-        updateExistingImageWrapper(existingImageWrapper, item, showImagePlaceholders) {
-            //Update the x co-ordinates of the image wrapper and the url of image
-            //this is to avoid tearing down all elements completely and re-drawing them
-            this.setNSAttributesForElement(existingImageWrapper, {
-                'data-show-image-placeholders': showImagePlaceholders
-            });
-            existingImageWrapper.style.left = `${this.xScale(item.time)}px`;
-
-            let imageElement = existingImageWrapper.querySelector('img');
-            this.setNSAttributesForElement(imageElement, {
-                src: item.url
-            });
-            this.setImageDisplay(imageElement, showImagePlaceholders);
-        },
-        createImageWrapper(index, item, showImagePlaceholders) {
-            const id = `${ID_PREFIX}${item.time}`;
-            let imageWrapper = document.createElement('div');
-            imageWrapper.classList.add(IMAGE_WRAPPER_CLASS);
-            imageWrapper.style.left = `${this.xScale(item.time)}px`;
-            this.setNSAttributesForElement(imageWrapper, {
-                id,
-                'data-show-image-placeholders': showImagePlaceholders
-            });
-            //create image vertical tick indicator
-            let imageTickElement = document.createElement('div');
-            imageTickElement.classList.add('c-imagery-tsv__image-handle');
-            imageTickElement.style.width = '2px';
-            imageTickElement.style.height = `${String(ROW_HEIGHT - 10)}px`;
-            imageWrapper.appendChild(imageTickElement);
-
-            //create placeholder - this will also hold the actual image
-            let imagePlaceholder = document.createElement('div');
-            imagePlaceholder.classList.add('c-imagery-tsv__image-placeholder');
-            imagePlaceholder.style.width = `${IMAGE_SIZE}px`;
-            imagePlaceholder.style.height = `${IMAGE_SIZE}px`;
-            imageWrapper.appendChild(imagePlaceholder);
-
-            //create image element
-            let imageElement = document.createElement('img');
-            this.setNSAttributesForElement(imageElement, {
-                src: item.url
-            });
-            imageElement.style.width = `${IMAGE_SIZE}px`;
-            imageElement.style.height = `${IMAGE_SIZE}px`;
-            this.setImageDisplay(imageElement, showImagePlaceholders);
-
-            //handle mousedown event to show the image in a large view
-            imageWrapper.addEventListener('mousedown', (e) => {
-                if (e.button === 0) {
-                    this.expand(index);
-                }
-            });
-
-            imagePlaceholder.appendChild(imageElement);
-
-            return imageWrapper;
-        }
-    }
-};
-</script>

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -57,7 +57,7 @@
         </div>
         <div ref="imageBG"
              class="c-imagery__main-image__bg"
-             :class="{'paused unnsynced': isPaused && !isFixed,'stale':false }"
+             :class="{'paused unnsynced': isPaused,'stale':false }"
              @click="expand"
         >
             <div class="image-wrapper"
@@ -122,7 +122,6 @@
             </div>
             <div class="h-local-controls">
                 <button
-                    v-if="!isFixed"
                     class="c-button icon-pause pause-play"
                     :class="{'is-paused': isPaused}"
                     @click="paused(!isPaused, 'button')"
@@ -130,11 +129,12 @@
             </div>
         </div>
     </div>
-    <div class="c-imagery__thumbs-wrapper"
-         :class="[
-             { 'is-paused': isPaused && !isFixed },
-             { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused }
-         ]"
+    <div
+        class="c-imagery__thumbs-wrapper"
+        :class="[
+            { 'is-paused': isPaused },
+            { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused }
+        ]"
     >
         <div
             ref="thumbsWrapper"
@@ -175,8 +175,7 @@ import moment from 'moment';
 import RelatedTelemetry from './RelatedTelemetry/RelatedTelemetry';
 import Compass from './Compass/Compass.vue';
 
-import imageryData from "../../imagery/mixins/imageryData";
-
+const DEFAULT_DURATION_FORMATTER = 'duration';
 const REFRESH_CSS_MS = 500;
 const DURATION_TRACK_MS = 1000;
 const ARROW_DOWN_DELAY_CHECK_MS = 400;
@@ -198,51 +197,40 @@ export default {
     components: {
         Compass
     },
-    mixins: [imageryData],
     inject: ['openmct', 'domainObject', 'objectPath', 'currentView'],
-    props: {
-        indexForFocusedImage: {
-            type: Number,
-            default() {
-                return undefined;
-            }
-        }
-    },
     data() {
         let timeSystem = this.openmct.time.timeSystem();
-        this.metadata = {};
-        this.requestCount = 0;
 
         return {
-            durationFormatter: undefined,
-            imageHistory: [],
-            timeSystem: timeSystem,
-            keyString: undefined,
             autoScroll: true,
+            durationFormatter: undefined,
             filters: {
                 brightness: 100,
                 contrast: 100
             },
+            imageHistory: [],
             thumbnailClick: THUMBNAIL_CLICKED,
             isPaused: false,
+            metadata: {},
+            requestCount: 0,
+            timeSystem: timeSystem,
+            timeFormatter: undefined,
             refreshCSS: false,
+            keyString: undefined,
             focusedImageIndex: undefined,
             focusedImageRelatedTelemetry: {},
             numericDuration: undefined,
+            metadataEndpoints: {},
             relatedTelemetry: {},
             latestRelatedTelemetry: {},
             focusedImageNaturalAspectRatio: undefined,
             imageContainerWidth: undefined,
             imageContainerHeight: undefined,
             lockCompass: true,
-            resizingWindow: false,
-            timeContext: undefined
+            resizingWindow: false
         };
     },
     computed: {
-        imageHistorySize() {
-            return this.imageHistory.length;
-        },
         compassRoseSizingClasses() {
             let compassRoseSizingClasses = '';
             if (this.sizedImageDimensions.width < 300) {
@@ -268,14 +256,10 @@ export default {
             return age < cutoff && !this.refreshCSS;
         },
         canTrackDuration() {
-            let hasClock;
-            if (this.timeContext) {
-                hasClock = this.timeContext.clock();
-            } else {
-                hasClock = this.openmct.time.clock();
-            }
-
-            return hasClock && this.timeSystem.isUTCBased;
+            return this.openmct.time.clock() && this.timeSystem.isUTCBased;
+        },
+        focusedImageDownloadName() {
+            return this.getImageDownloadName(this.focusedImage);
         },
         isNextDisabled() {
             let disabled = false;
@@ -396,30 +380,9 @@ export default {
             }
 
             return sizedImageDimensions;
-        },
-        isFixed() {
-            let clock;
-            if (this.timeContext) {
-                clock = this.timeContext.clock();
-            } else {
-                clock = this.openmct.time.clock();
-            }
-
-            return clock === undefined;
         }
     },
     watch: {
-        imageHistorySize(newSize, oldSize) {
-            let imageIndex;
-            if (this.indexForFocusedImage !== undefined) {
-                imageIndex = this.initFocusedImageIndex;
-            } else {
-                imageIndex = newSize - 1;
-            }
-
-            this.setFocusedImage(imageIndex, false);
-            this.scrollToRight();
-        },
         focusedImageIndex() {
             this.trackDuration();
             this.resetAgeCSS();
@@ -428,14 +391,18 @@ export default {
         }
     },
     async mounted() {
-        //We only need to use this till the user focuses an image manually
-        if (this.indexForFocusedImage !== undefined) {
-            this.initFocusedImageIndex = this.indexForFocusedImage;
-            this.isPaused = true;
-        }
+        // listen
+        this.openmct.time.on('bounds', this.boundsChange);
+        this.openmct.time.on('timeSystem', this.timeSystemChange);
+        this.openmct.time.on('clock', this.clockChange);
 
-        this.setTimeContext = this.setTimeContext.bind(this);
-        this.setTimeContext();
+        // set
+        this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+        this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
+        this.imageHints = { ...this.metadata.valuesForHints(['image'])[0] };
+        this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
+        this.imageFormatter = this.openmct.telemetry.getValueFormatter(this.imageHints);
+        this.imageDownloadNameHints = { ...this.metadata.valuesForHints(['imageDownloadName'])[0]};
 
         // related telemetry keys
         this.spacecraftPositionKeys = ['positionX', 'positionY', 'positionZ'];
@@ -443,48 +410,56 @@ export default {
         this.cameraKeys = ['cameraPan', 'cameraTilt'];
         this.sunKeys = ['sunOrientation'];
 
+        // initialize
+        this.timeKey = this.timeSystem.key;
+        this.timeFormatter = this.getFormatter(this.timeKey);
+
+        // kickoff
+        this.subscribe();
+        this.requestHistory();
+
         // related telemetry
         await this.initializeRelatedTelemetry();
-        await this.updateRelatedTelemetryForFocusedImage();
+        this.updateRelatedTelemetryForFocusedImage();
         this.trackLatestRelatedTelemetry();
 
         // for scrolling through images quickly and resizing the object view
-        this.updateRelatedTelemetryForFocusedImage = _.debounce(this.updateRelatedTelemetryForFocusedImage, 400);
+        _.debounce(this.updateRelatedTelemetryForFocusedImage, 400);
+        _.debounce(this.resizeImageContainer, 400);
 
-        // for resizing the object view
-        this.resizeImageContainer = _.debounce(this.resizeImageContainer, 400);
-
-        if (this.$refs.imageBG) {
-            this.imageContainerResizeObserver = new ResizeObserver(this.resizeImageContainer);
-            this.imageContainerResizeObserver.observe(this.$refs.imageBG);
-        }
+        this.imageContainerResizeObserver = new ResizeObserver(this.resizeImageContainer);
+        this.imageContainerResizeObserver.observe(this.$refs.imageBG);
 
         // For adjusting scroll bar size and position when resizing thumbs wrapper
         this.handleScroll = _.debounce(this.handleScroll, SCROLL_LATENCY);
         this.handleThumbWindowResizeEnded = _.debounce(this.handleThumbWindowResizeEnded, SCROLL_LATENCY);
-        this.handleThumbWindowResizeStart = _.debounce(this.handleThumbWindowResizeStart, SCROLL_LATENCY);
-
-        if (this.$refs.thumbsWrapper) {
-            this.thumbWrapperResizeObserver = new ResizeObserver(this.handleThumbWindowResizeStart);
-            this.thumbWrapperResizeObserver.observe(this.$refs.thumbsWrapper);
-        }
 
+        this.thumbWrapperResizeObserver = new ResizeObserver(this.handleThumbWindowResizeStart);
+        this.thumbWrapperResizeObserver.observe(this.$refs.thumbsWrapper);
     },
     beforeDestroy() {
-        this.stopFollowingTimeContext();
-
-        if (this.thumbWrapperResizeObserver) {
-            this.thumbWrapperResizeObserver.disconnect();
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            delete this.unsubscribe;
         }
 
         if (this.imageContainerResizeObserver) {
             this.imageContainerResizeObserver.disconnect();
         }
 
+        if (this.thumbWrapperResizeObserver) {
+            this.thumbWrapperResizeObserver.disconnect();
+        }
+
         if (this.relatedTelemetry.hasRelatedTelemetry) {
             this.relatedTelemetry.destroy();
         }
 
+        this.stopDurationTracking();
+        this.openmct.time.off('bounds', this.boundsChange);
+        this.openmct.time.off('timeSystem', this.timeSystemChange);
+        this.openmct.time.off('clock', this.clockChange);
+
         // unsubscribe from related telemetry
         if (this.relatedTelemetry.hasRelatedTelemetry) {
             for (let key of this.relatedTelemetry.keys) {
@@ -495,21 +470,6 @@ export default {
         }
     },
     methods: {
-        setTimeContext() {
-            this.stopFollowingTimeContext();
-            this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-            //listen
-            this.timeContext.on('timeSystem', this.trackDuration);
-            this.timeContext.on('clock', this.trackDuration);
-            this.timeContext.on("timeContext", this.setTimeContext);
-        },
-        stopFollowingTimeContext() {
-            if (this.timeContext) {
-                this.timeContext.off("timeSystem", this.trackDuration);
-                this.timeContext.off("clock", this.trackDuration);
-                this.timeContext.off("timeContext", this.setTimeContext);
-            }
-        },
         expand() {
             const actionCollection = this.openmct.actions.getActionsCollection(this.objectPath, this.currentView);
             const visibleActions = actionCollection.getVisibleActions();
@@ -616,6 +576,56 @@ export default {
         focusElement() {
             this.$el.focus();
         },
+        datumIsNotValid(datum) {
+            if (this.imageHistory.length === 0) {
+                return false;
+            }
+
+            const datumURL = this.formatImageUrl(datum);
+            const lastHistoryURL = this.formatImageUrl(this.imageHistory.slice(-1)[0]);
+
+            // datum is not valid if it matches the last datum in history,
+            // or it is before the last datum in the history
+            const datumTimeCheck = this.parseTime(datum);
+            const historyTimeCheck = this.parseTime(this.imageHistory.slice(-1)[0]);
+            const matchesLast = (datumTimeCheck === historyTimeCheck) && (datumURL === lastHistoryURL);
+            const isStale = datumTimeCheck < historyTimeCheck;
+
+            return matchesLast || isStale;
+        },
+        formatImageUrl(datum) {
+            if (!datum) {
+                return;
+            }
+
+            return this.imageFormatter.format(datum);
+        },
+        formatTime(datum) {
+            if (!datum) {
+                return;
+            }
+
+            let dateTimeStr = this.timeFormatter.format(datum);
+
+            // Replace ISO "T" with a space to allow wrapping
+            return dateTimeStr.replace("T", " ");
+        },
+        getImageDownloadName(datum) {
+            let imageDownloadName = '';
+            if (datum) {
+                const key = this.imageDownloadNameHints.key;
+                imageDownloadName = datum[key];
+            }
+
+            return imageDownloadName;
+        },
+        parseTime(datum) {
+            if (!datum) {
+                return;
+            }
+
+            return this.timeFormatter.parse(datum);
+        },
         handleScroll() {
             const thumbsWrapper = this.$refs.thumbsWrapper;
             if (!thumbsWrapper || this.resizingWindow) {
@@ -671,17 +681,8 @@ export default {
             });
         },
         setFocusedImage(index, thumbnailClick = false) {
-            if (thumbnailClick) {
-                //We use the props till the user changes what they want to see
-                this.initFocusedImageIndex = undefined;
-            }
-
-            if (this.isPaused && !thumbnailClick && this.initFocusedImageIndex === undefined) {
+            if (this.isPaused && !thumbnailClick) {
                 this.nextImageIndex = index;
-                //this could happen if bounds changes
-                if (this.focusedImageIndex > this.imageHistory.length - 1) {
-                    this.focusedImageIndex = index;
-                }
 
                 return;
             }
@@ -692,6 +693,70 @@ export default {
                 this.paused(true);
             }
         },
+        boundsChange(bounds, isTick) {
+            if (!isTick) {
+                this.requestHistory();
+            }
+        },
+        async requestHistory() {
+            let bounds = this.openmct.time.bounds();
+            this.requestCount++;
+            const requestId = this.requestCount;
+            this.imageHistory = [];
+
+            let data = await this.openmct.telemetry
+                .request(this.domainObject, bounds) || [];
+
+            if (this.requestCount === requestId) {
+                data.forEach((datum, index) => {
+                    this.updateHistory(datum, index === data.length - 1);
+                });
+            }
+        },
+        timeSystemChange(system) {
+            this.timeSystem = this.openmct.time.timeSystem();
+            this.timeKey = this.timeSystem.key;
+            this.timeFormatter = this.getFormatter(this.timeKey);
+            this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
+            this.trackDuration();
+        },
+        clockChange(clock) {
+            this.trackDuration();
+        },
+        subscribe() {
+            this.unsubscribe = this.openmct.telemetry
+                .subscribe(this.domainObject, (datum) => {
+                    let parsedTimestamp = this.parseTime(datum);
+                    let bounds = this.openmct.time.bounds();
+
+                    if (parsedTimestamp >= bounds.start && parsedTimestamp <= bounds.end) {
+                        this.updateHistory(datum);
+                    }
+                });
+        },
+        updateHistory(datum, setFocused = true) {
+            if (this.datumIsNotValid(datum)) {
+                return;
+            }
+
+            let image = { ...datum };
+            image.formattedTime = this.formatTime(datum);
+            image.url = this.formatImageUrl(datum);
+            image.time = datum[this.timeKey];
+            image.imageDownloadName = this.getImageDownloadName(datum);
+
+            this.imageHistory.push(image);
+            if (setFocused) {
+                this.setFocusedImage(this.imageHistory.length - 1);
+                this.scrollToRight();
+            }
+        },
+        getFormatter(key) {
+            let metadataValue = this.metadata.value(key) || { format: key };
+            let valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
+
+            return valueFormatter;
+        },
         trackDuration() {
             if (this.canTrackDuration) {
                 this.stopDurationTracking();
@@ -707,12 +772,8 @@ export default {
             window.clearInterval(this.durationTracker);
         },
         updateDuration() {
-            let currentTime = this.timeContext.clock() && this.timeContext.clock().currentValue();
-            if (currentTime === undefined) {
-                this.numericDuration = currentTime;
-            } else {
-                this.numericDuration = currentTime - this.parsedSelectedTime;
-            }
+            let currentTime = this.openmct.time.clock() && this.openmct.time.clock().currentValue();
+            this.numericDuration = currentTime - this.parsedSelectedTime;
         },
         resetAgeCSS() {
             this.refreshCSS = true;
@@ -815,10 +876,6 @@ export default {
             }, { once: true });
         },
         resizeImageContainer() {
-            if (!this.$refs.imageBG) {
-                return;
-            }
-
             if (this.$refs.imageBG.clientWidth !== this.imageContainerWidth) {
                 this.imageContainerWidth = this.$refs.imageBG.clientWidth;
             }

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

@@ -312,54 +312,3 @@
         @include cArrowButtonSizing($dimOuter: 32px);
     }
 }
-
-/*************************************** IMAGERY IN TIMESTRIP VIEWS */
-.c-imagery-tsv {
-    div.c-imagery-tsv__image-wrapper {
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        display: flex;
-        z-index: 1;
-        margin-top: 5px;
-
-        img {
-            align-self: flex-end;
-        }
-        &:hover {
-            z-index: 2;
-
-            filter: brightness(1) contrast(1) !important;
-            [class*='__image-handle'] {
-                background-color: $colorBodyFg;
-            }
-
-            //[class*='__image-placeholder'] {
-            //    display: none;
-            //}
-
-            img {
-                display: block !important;
-            }
-        }
-    }
-
-    &__no-items {
-        fill: $colorBodyFg !important;
-    }
-
-    &__image-handle {
-        background-color: rgba($colorBodyFg, 0.5);
-    }
-
-    &__image-placeholder {
-        background-color: pushBack($colorBodyBg, 0.3);
-        display: block;
-        align-self: flex-end;
-    }
-
-    &:hover div.c-imagery-tsv__image-wrapper {
-        // TODO CH: convert to theme constants
-        filter: brightness(0.5) contrast(0.7);
-    }
-}

src/plugins/imagery/mixins/imageryData.js

@@ -1,190 +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.
- *****************************************************************************/
-
-const DEFAULT_DURATION_FORMATTER = 'duration';
-
-export default {
-    inject: ['openmct', 'domainObject', 'objectPath'],
-    mounted() {
-        // listen
-        this.boundsChange = this.boundsChange.bind(this);
-        this.timeSystemChange = this.timeSystemChange.bind(this);
-        this.setDataTimeContext = this.setDataTimeContext.bind(this);
-        this.setDataTimeContext();
-
-        // set
-        this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-        this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
-        this.imageHints = { ...this.metadata.valuesForHints(['image'])[0] };
-        this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
-        this.imageFormatter = this.openmct.telemetry.getValueFormatter(this.imageHints);
-        this.imageDownloadNameHints = { ...this.metadata.valuesForHints(['imageDownloadName'])[0]};
-
-        // initialize
-        this.timeKey = this.timeSystem.key;
-        this.timeFormatter = this.getFormatter(this.timeKey);
-
-        // kickoff
-        this.subscribe();
-        this.requestHistory();
-    },
-    beforeDestroy() {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-            delete this.unsubscribe;
-        }
-
-        this.stopFollowingDataTimeContext();
-    },
-    methods: {
-        setDataTimeContext() {
-            this.stopFollowingDataTimeContext();
-            this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-            this.timeContext.on('bounds', this.boundsChange);
-            this.boundsChange(this.timeContext.bounds());
-            this.timeContext.on('timeSystem', this.timeSystemChange);
-            this.timeContext.on("timeContext", this.setDataTimeContext);
-        },
-        stopFollowingDataTimeContext() {
-            if (this.timeContext) {
-                this.timeContext.off('bounds', this.boundsChange);
-                this.timeContext.off('timeSystem', this.timeSystemChange);
-                this.timeContext.off("timeContext", this.setDataTimeContext);
-            }
-        },
-        datumIsNotValid(datum) {
-            if (this.imageHistory.length === 0) {
-                return false;
-            }
-
-            const datumURL = this.formatImageUrl(datum);
-            const lastHistoryURL = this.formatImageUrl(this.imageHistory.slice(-1)[0]);
-
-            // datum is not valid if it matches the last datum in history,
-            // or it is before the last datum in the history
-            const datumTimeCheck = this.parseTime(datum);
-            const historyTimeCheck = this.parseTime(this.imageHistory.slice(-1)[0]);
-            const matchesLast = (datumTimeCheck === historyTimeCheck) && (datumURL === lastHistoryURL);
-            const isStale = datumTimeCheck < historyTimeCheck;
-
-            return matchesLast || isStale;
-        },
-        formatImageUrl(datum) {
-            if (!datum) {
-                return;
-            }
-
-            return this.imageFormatter.format(datum);
-        },
-        formatTime(datum) {
-            if (!datum) {
-                return;
-            }
-
-            let dateTimeStr = this.timeFormatter.format(datum);
-
-            // Replace ISO "T" with a space to allow wrapping
-            return dateTimeStr.replace("T", " ");
-        },
-        getImageDownloadName(datum) {
-            let imageDownloadName = '';
-            if (datum) {
-                const key = this.imageDownloadNameHints.key;
-                imageDownloadName = datum[key];
-            }
-
-            return imageDownloadName;
-        },
-        parseTime(datum) {
-            if (!datum) {
-                return;
-            }
-
-            return this.timeFormatter.parse(datum);
-        },
-        boundsChange(bounds, isTick) {
-            if (!isTick) {
-                this.requestHistory();
-            }
-        },
-        async requestHistory() {
-            let bounds = this.timeContext.bounds();
-            this.requestCount++;
-            const requestId = this.requestCount;
-            this.imageHistory = [];
-
-            let data = await this.openmct.telemetry
-                .request(this.domainObject, bounds) || [];
-
-            if (this.requestCount === requestId) {
-                let imagery = [];
-                data.forEach((datum) => {
-                    let image = this.normalizeDatum(datum);
-                    if (image) {
-                        imagery.push(image);
-                    }
-                });
-                //this is to optimize anything that reacts to imageHistory length
-                this.imageHistory = imagery;
-            }
-        },
-        timeSystemChange() {
-            this.timeSystem = this.timeContext.timeSystem();
-            this.timeKey = this.timeSystem.key;
-            this.timeFormatter = this.getFormatter(this.timeKey);
-            this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
-        },
-        subscribe() {
-            this.unsubscribe = this.openmct.telemetry
-                .subscribe(this.domainObject, (datum) => {
-                    let parsedTimestamp = this.parseTime(datum);
-                    let bounds = this.timeContext.bounds();
-
-                    if (parsedTimestamp >= bounds.start && parsedTimestamp <= bounds.end) {
-                        let image = this.normalizeDatum(datum);
-                        if (image) {
-                            this.imageHistory.push(image);
-                        }
-                    }
-                });
-        },
-        normalizeDatum(datum) {
-            if (this.datumIsNotValid(datum)) {
-                return;
-            }
-
-            let image = { ...datum };
-            image.formattedTime = this.formatTime(datum);
-            image.url = this.formatImageUrl(datum);
-            image.time = this.parseTime(image.formattedTime);
-            image.imageDownloadName = this.getImageDownloadName(datum);
-
-            return image;
-        },
-        getFormatter(key) {
-            let metadataValue = this.metadata.value(key) || { format: key };
-            let valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
-
-            return valueFormatter;
-        }
-    }
-};

src/plugins/imagery/plugin.js

@@ -21,12 +21,10 @@
  *****************************************************************************/
 
 import ImageryViewProvider from './ImageryViewProvider';
-import ImageryTimestripViewProvider from './ImageryTimestripViewProvider';
 
 export default function () {
     return function install(openmct) {
         openmct.objectViews.addProvider(new ImageryViewProvider(openmct));
-        openmct.objectViews.addProvider(new ImageryTimestripViewProvider(openmct));
     };
 }
 

src/plugins/imagery/pluginSpec.js

@@ -22,7 +22,6 @@
 
 import Vue from 'vue';
 import {
-    createMouseEvent,
     createOpenMct,
     resetApplicationState,
     simulateKeyEvent
@@ -33,6 +32,19 @@ const TEN_MINUTES = ONE_MINUTE * 10;
 const MAIN_IMAGE_CLASS = '.js-imageryView-image';
 const NEW_IMAGE_CLASS = '.c-imagery__age.c-imagery--new';
 const REFRESH_CSS_MS = 500;
+const TOLERANCE = 0.50;
+
+function comparisonFunction(valueOne, valueTwo) {
+    let larger = valueOne;
+    let smaller = valueTwo;
+
+    if (larger < smaller) {
+        larger = valueTwo;
+        smaller = valueOne;
+    }
+
+    return (larger - smaller) < TOLERANCE;
+}
 
 function getImageInfo(doc) {
     let imageElement = doc.querySelectorAll(MAIN_IMAGE_CLASS)[0];
@@ -72,19 +84,15 @@ function generateTelemetry(start, count) {
     return telemetry;
 }
 
-describe("The Imagery View Layouts", () => {
+describe("The Imagery View Layout", () => {
     const imageryKey = 'example.imagery';
-    const imageryForTimeStripKey = 'example.imagery.time-strip.view';
     const START = Date.now();
     const COUNT = 10;
 
-    // let resolveFunction;
-    let originalRouterPath;
-    let telemetryPromise;
-    let telemetryPromiseResolve;
-    let cleanupFirst;
+    let resolveFunction;
 
     let openmct;
+    let appHolder;
     let parent;
     let child;
     let imageTelemetry = generateTelemetry(START - TEN_MINUTES, COUNT);
@@ -108,51 +116,51 @@ describe("The Imagery View Layouts", () => {
                         "image": 1,
                         "priority": 3
                     },
-                    "source": "url"
-                    // "relatedTelemetry": {
-                    //     "heading": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "heading",
-                    //             "valueKey": "value"
-                    //         }
-                    //     },
-                    //     "roll": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "roll",
-                    //             "valueKey": "value"
-                    //         }
-                    //     },
-                    //     "pitch": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "pitch",
-                    //             "valueKey": "value"
-                    //         }
-                    //     },
-                    //     "cameraPan": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "cameraPan",
-                    //             "valueKey": "value"
-                    //         }
-                    //     },
-                    //     "cameraTilt": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "cameraTilt",
-                    //             "valueKey": "value"
-                    //         }
-                    //     },
-                    //     "sunOrientation": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "sunOrientation",
-                    //             "valueKey": "value"
-                    //         }
-                    //     }
-                    // }
+                    "source": "url",
+                    "relatedTelemetry": {
+                        "heading": {
+                            "comparisonFunction": comparisonFunction,
+                            "historical": {
+                                "telemetryObjectId": "heading",
+                                "valueKey": "value"
+                            }
+                        },
+                        "roll": {
+                            "comparisonFunction": comparisonFunction,
+                            "historical": {
+                                "telemetryObjectId": "roll",
+                                "valueKey": "value"
+                            }
+                        },
+                        "pitch": {
+                            "comparisonFunction": comparisonFunction,
+                            "historical": {
+                                "telemetryObjectId": "pitch",
+                                "valueKey": "value"
+                            }
+                        },
+                        "cameraPan": {
+                            "comparisonFunction": comparisonFunction,
+                            "historical": {
+                                "telemetryObjectId": "cameraPan",
+                                "valueKey": "value"
+                            }
+                        },
+                        "cameraTilt": {
+                            "comparisonFunction": comparisonFunction,
+                            "historical": {
+                                "telemetryObjectId": "cameraTilt",
+                                "valueKey": "value"
+                            }
+                        },
+                        "sunOrientation": {
+                            "comparisonFunction": comparisonFunction,
+                            "historical": {
+                                "telemetryObjectId": "sunOrientation",
+                                "valueKey": "value"
+                            }
+                        }
+                    }
                 },
                 {
                     "name": "Name",
@@ -188,130 +196,45 @@ describe("The Imagery View Layouts", () => {
 
     // this setups up the app
     beforeEach((done) => {
-        cleanupFirst = [];
+        appHolder = document.createElement('div');
+        appHolder.style.width = '640px';
+        appHolder.style.height = '480px';
 
         openmct = createOpenMct();
-        openmct.time.timeSystem('utc', {
-            start: START - (5 * ONE_MINUTE),
-            end: START + (5 * ONE_MINUTE)
-        });
 
-        telemetryPromise = new Promise((resolve) => {
-            telemetryPromiseResolve = resolve;
-        });
-
-        spyOn(openmct.telemetry, 'request').and.callFake(() => {
-            telemetryPromiseResolve(imageTelemetry);
-
-            return telemetryPromise;
-        });
+        openmct.install(openmct.plugins.MyItems());
+        openmct.install(openmct.plugins.LocalTimeSystem());
+        openmct.install(openmct.plugins.UTCTimeSystem());
 
         parent = document.createElement('div');
-        parent.style.width = '640px';
-        parent.style.height = '480px';
-
         child = document.createElement('div');
-        child.style.width = '640px';
-        child.style.height = '480px';
-
         parent.appendChild(child);
-        document.body.appendChild(parent);
+
+        // document.querySelector('body').append(parent);
 
         spyOn(window, 'ResizeObserver').and.returnValue({
             observe() {},
             disconnect() {}
         });
 
-        // spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
+        spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
         spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
 
-        originalRouterPath = openmct.router.path;
-
         openmct.on('start', done);
-        openmct.startHeadless();
+        openmct.start(appHolder);
     });
 
-    afterEach((done) => {
-        openmct.router.path = originalRouterPath;
-
-        // Needs to be in a timeout because plots use a bunch of setTimeouts, some of which can resolve during or after
-        // teardown, which causes problems
-        // This is hacky, we should find a better approach here.
-        setTimeout(() => {
-            //Cleanup code that needs to happen before dom elements start being destroyed
-            cleanupFirst.forEach(cleanup => cleanup());
-            cleanupFirst = [];
-            document.body.removeChild(parent);
-
-            resetApplicationState(openmct).then(done).catch(done);
+    afterEach(() => {
+        openmct.time.timeSystem('utc', {
+            start: 0,
+            end: 1
         });
-    });
 
-    it("should provide an imagery time strip view when in a time strip", () => {
-        openmct.router.path = [{
-            identifier: {
-                key: 'test-timestrip',
-                namespace: ''
-            },
-            type: 'time-strip'
-        }];
-
-        let applicableViews = openmct.objectViews.get(imageryObject, [imageryObject, {
-            identifier: {
-                key: 'test-timestrip',
-                namespace: ''
-            },
-            type: 'time-strip'
-        }]);
-        let imageryView = applicableViews.find(
-            viewProvider => viewProvider.key === imageryForTimeStripKey
-        );
-
-        expect(imageryView).toBeDefined();
+        return resetApplicationState(openmct);
     });
 
     it("should provide an imagery view only for imagery producing objects", () => {
-        let applicableViews = openmct.objectViews.get(imageryObject, [imageryObject]);
-        let imageryView = applicableViews.find(
-            viewProvider => viewProvider.key === imageryKey
-        );
-
-        expect(imageryView).toBeDefined();
-    });
-
-    it("should not provide an imagery view when in a time strip", () => {
-        openmct.router.path = [{
-            identifier: {
-                key: 'test-timestrip',
-                namespace: ''
-            },
-            type: 'time-strip'
-        }];
-
-        let applicableViews = openmct.objectViews.get(imageryObject, [imageryObject, {
-            identifier: {
-                key: 'test-timestrip',
-                namespace: ''
-            },
-            type: 'time-strip'
-        }]);
-        let imageryView = applicableViews.find(
-            viewProvider => viewProvider.key === imageryKey
-        );
-
-        expect(imageryView).toBeUndefined();
-    });
-
-    it("should provide an imagery view when navigated to in the composition of a time strip", () => {
-        openmct.router.path = [imageryObject];
-
-        let applicableViews = openmct.objectViews.get(imageryObject, [imageryObject, {
-            identifier: {
-                key: 'test-timestrip',
-                namespace: ''
-            },
-            type: 'time-strip'
-        }]);
+        let applicableViews = openmct.objectViews.get(imageryObject, []);
         let imageryView = applicableViews.find(
             viewProvider => viewProvider.key === imageryKey
         );
@@ -324,53 +247,51 @@ describe("The Imagery View Layouts", () => {
         let imageryViewProvider;
         let imageryView;
 
-        beforeEach(() => {
+        beforeEach(async () => {
+            let telemetryRequestResolve;
+            let telemetryRequestPromise = new Promise((resolve) => {
+                telemetryRequestResolve = resolve;
+            });
 
-            applicableViews = openmct.objectViews.get(imageryObject, [imageryObject]);
+            openmct.telemetry.request.and.callFake(() => {
+                telemetryRequestResolve(imageTelemetry);
+
+                return telemetryRequestPromise;
+            });
+
+            applicableViews = openmct.objectViews.get(imageryObject, []);
             imageryViewProvider = applicableViews.find(viewProvider => viewProvider.key === imageryKey);
-            imageryView = imageryViewProvider.view(imageryObject, [imageryObject]);
+            imageryView = imageryViewProvider.view(imageryObject);
             imageryView.show(child);
 
-            return Vue.nextTick();
+            await telemetryRequestPromise;
         });
 
-        // afterEach(() => {
-        //     openmct.time.stopClock();
-        //     openmct.router.removeListener('change:hash', resolveFunction);
-        //
-        //     imageryView.destroy();
-        // });
+        afterEach(() => {
+            openmct.time.stopClock();
+            openmct.router.removeListener('change:hash', resolveFunction);
 
-        it("on mount should show the the most recent image", (done) => {
-            //Looks like we need Vue.nextTick here so that computed properties settle down
+            imageryView.destroy();
+        });
+
+        it("on mount should show the the most recent image", () => {
+            const imageInfo = getImageInfo(parent);
+
+            expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 1].timeId)).not.toEqual(-1);
+        });
+
+        xit("should show the clicked thumbnail as the main image", (done) => {
+            const target = imageTelemetry[5].url;
+            parent.querySelectorAll(`img[src='${target}']`)[0].click();
             Vue.nextTick(() => {
                 const imageInfo = getImageInfo(parent);
 
-                expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 1].timeId)).not.toEqual(-1);
+                expect(imageInfo.url.indexOf(imageTelemetry[5].timeId)).not.toEqual(-1);
                 done();
             });
         });
 
-        it("should show the clicked thumbnail as the main image", (done) => {
-            //Looks like we need Vue.nextTick here so that computed properties settle down
-            Vue.nextTick(() => {
-                const target = imageTelemetry[5].url;
-                parent.querySelectorAll(`img[src='${target}']`)[0].click();
-                Vue.nextTick(() => {
-                    const imageInfo = getImageInfo(parent);
-
-                    expect(imageInfo.url.indexOf(imageTelemetry[5].timeId)).not.toEqual(-1);
-                    done();
-                });
-            });
-        });
-
         xit("should show that an image is new", (done) => {
-            openmct.time.clock('local', {
-                start: -1000,
-                end: 1000
-            });
-
             Vue.nextTick(() => {
                 // used in code, need to wait to the 500ms here too
                 setTimeout(() => {
@@ -396,148 +317,69 @@ describe("The Imagery View Layouts", () => {
             });
         });
 
-        it("should navigate via arrow keys", (done) => {
+        xit("should navigate via arrow keys", (done) => {
+            let keyOpts = {
+                element: parent.querySelector('.c-imagery'),
+                key: 'ArrowLeft',
+                keyCode: 37,
+                type: 'keyup'
+            };
+
+            simulateKeyEvent(keyOpts);
+
             Vue.nextTick(() => {
-                let keyOpts = {
-                    element: parent.querySelector('.c-imagery'),
-                    key: 'ArrowLeft',
-                    keyCode: 37,
-                    type: 'keyup'
-                };
+                const imageInfo = getImageInfo(parent);
 
-                simulateKeyEvent(keyOpts);
-
-                Vue.nextTick(() => {
-                    const imageInfo = getImageInfo(parent);
-
-                    expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 2].timeId)).not.toEqual(-1);
-                    done();
-                });
-            });
-        });
-
-        it("should navigate via numerous arrow keys", (done) => {
-            Vue.nextTick(() => {
-                let element = parent.querySelector('.c-imagery');
-                let type = 'keyup';
-                let leftKeyOpts = {
-                    element,
-                    type,
-                    key: 'ArrowLeft',
-                    keyCode: 37
-                };
-                let rightKeyOpts = {
-                    element,
-                    type,
-                    key: 'ArrowRight',
-                    keyCode: 39
-                };
-
-                // left thrice
-                simulateKeyEvent(leftKeyOpts);
-                simulateKeyEvent(leftKeyOpts);
-                simulateKeyEvent(leftKeyOpts);
-                // right once
-                simulateKeyEvent(rightKeyOpts);
-
-                Vue.nextTick(() => {
-                    const imageInfo = getImageInfo(parent);
-
-                    expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 3].timeId)).not.toEqual(-1);
-                    done();
-                });
-            });
-        });
-        it ('shows an auto scroll button when scroll to left', (done) => {
-            Vue.nextTick(() => {
-                // to mock what a scroll would do
-                imageryView._getInstance().$refs.ImageryContainer.autoScroll = false;
-                Vue.nextTick(() => {
-                    let autoScrollButton = parent.querySelector('.c-imagery__auto-scroll-resume-button');
-                    expect(autoScrollButton).toBeTruthy();
-                    done();
-                });
-            });
-        });
-        it ('scrollToRight is called when clicking on auto scroll button', (done) => {
-            Vue.nextTick(() => {
-                // use spyon to spy the scroll function
-                spyOn(imageryView._getInstance().$refs.ImageryContainer, 'scrollToRight');
-                imageryView._getInstance().$refs.ImageryContainer.autoScroll = false;
-                Vue.nextTick(() => {
-                    parent.querySelector('.c-imagery__auto-scroll-resume-button').click();
-                    expect(imageryView._getInstance().$refs.ImageryContainer.scrollToRight).toHaveBeenCalledWith('reset');
-                    done();
-                });
-            });
-        });
-    });
-
-    describe("imagery time strip view", () => {
-        let applicableViews;
-        let imageryViewProvider;
-        let imageryView;
-        let componentView;
-
-        beforeEach(() => {
-            openmct.time.timeSystem('utc', {
-                start: START - (5 * ONE_MINUTE),
-                end: START + (5 * ONE_MINUTE)
-            });
-
-            openmct.router.path = [{
-                identifier: {
-                    key: 'test-timestrip',
-                    namespace: ''
-                },
-                type: 'time-strip'
-            }];
-
-            applicableViews = openmct.objectViews.get(imageryObject, [imageryObject, {
-                identifier: {
-                    key: 'test-timestrip',
-                    namespace: ''
-                },
-                type: 'time-strip'
-            }]);
-            imageryViewProvider = applicableViews.find(viewProvider => viewProvider.key === imageryForTimeStripKey);
-            imageryView = imageryViewProvider.view(imageryObject, [imageryObject, {
-                identifier: {
-                    key: 'test-timestrip',
-                    namespace: ''
-                },
-                type: 'time-strip'
-            }]);
-            imageryView.show(child);
-
-            componentView = imageryView.getComponent().$children[0];
-            spyOn(componentView.previewAction, 'invoke').and.callThrough();
-
-            return Vue.nextTick();
-        });
-
-        it("on mount should show imagery within the given bounds", (done) => {
-            Vue.nextTick(() => {
-                const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
-                expect(imageElements.length).toEqual(6);
+                expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 2].timeId)).not.toEqual(-1);
                 done();
             });
         });
 
-        it("should show the clicked thumbnail as the preview image", (done) => {
-            Vue.nextTick(() => {
-                const mouseDownEvent = createMouseEvent("mousedown");
-                let imageWrapper = parent.querySelectorAll(`.c-imagery-tsv__image-wrapper`);
-                imageWrapper[2].dispatchEvent(mouseDownEvent);
+        it("should navigate via numerous arrow keys", (done) => {
+            let element = parent.querySelector('.c-imagery');
+            let type = 'keyup';
+            let leftKeyOpts = {
+                element,
+                type,
+                key: 'ArrowLeft',
+                keyCode: 37
+            };
+            let rightKeyOpts = {
+                element,
+                type,
+                key: 'ArrowRight',
+                keyCode: 39
+            };
 
-                Vue.nextTick(() => {
-                    expect(componentView.previewAction.invoke).toHaveBeenCalledWith([componentView.objectPath[0]], {
-                        indexForFocusedImage: 2,
-                        objectPath: componentView.objectPath
-                    });
-                    done();
-                });
+            // left thrice
+            simulateKeyEvent(leftKeyOpts);
+            simulateKeyEvent(leftKeyOpts);
+            simulateKeyEvent(leftKeyOpts);
+            // right once
+            simulateKeyEvent(rightKeyOpts);
+
+            Vue.nextTick(() => {
+                const imageInfo = getImageInfo(parent);
+
+                expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 3].timeId)).not.toEqual(-1);
+                done();
             });
         });
+        it ('shows an auto scroll button when scroll to left', async () => {
+            // to mock what a scroll would do
+            imageryView._getInstance().$refs.ImageryLayout.autoScroll = false;
+            await Vue.nextTick();
+            let autoScrollButton = parent.querySelector('.c-imagery__auto-scroll-resume-button');
+            expect(autoScrollButton).toBeTruthy();
+        });
+        it ('scrollToRight is called when clicking on auto scroll button', async () => {
+            // use spyon to spy the scroll function
+            spyOn(imageryView._getInstance().$refs.ImageryLayout, 'scrollToRight');
+            imageryView._getInstance().$refs.ImageryLayout.autoScroll = false;
+            await Vue.nextTick();
+            parent.querySelector('.c-imagery__auto-scroll-resume-button').click();
+            expect(imageryView._getInstance().$refs.ImageryLayout.scrollToRight).toHaveBeenCalledWith('reset');
+
+        });
     });
 });