Merge branch 'plotly-test' of https://github.com/nasa/openmct into plotly-test

* added bounds listener, moved history request to function, checking for race conditions

Co-authored-by: Andrew Henry <akhenry@gmail.com>

.gitignore

@@ -38,3 +38,4 @@ protractor/logs
 npm-debug.log
 
 package-lock.json
+report.*.json

CONTRIBUTING.md

@@ -226,9 +226,9 @@ typically from the author of the change and its reviewer.
 Automated testing shall occur whenever changes are merged into the main
 development branch and must be confirmed alongside any pull request.
 
-Automated tests are typically unit tests which exercise individual software
-components. Tests are subject to code review along with the actual
-implementation, to ensure that tests are applicable and useful.
+Automated tests are tests which exercise plugins, API, and utility classes. 
+Tests are subject to code review along with the actual implementation, to 
+ensure that tests are applicable and useful.
 
 Examples of useful tests:
 * Tests which replicate bugs (or their root causes) to verify their
@@ -238,8 +238,26 @@ Examples of useful tests:
 * Tests which verify expected interactions with other components in the
   system.
 
-During automated testing, code coverage metrics will be reported. Line
-coverage must remain at or above 80%.
+#### Guidelines
+* 100% statement coverage is achievable and desirable.
+* Do blackbox testing. Test external behaviors, not internal details. Write tests that describe what your plugin is supposed to do. How it does this doesn't matter, so don't test it.
+* Unit test specs for plugins should be defined at the plugin level. Start with one test spec per plugin named pluginSpec.js, and as this test spec grows too big, break it up into multiple test specs that logically group related tests.
+* Unit tests for API or for utility functions and classes may be defined at a per-source file level.
+* Wherever possible only use and mock public API, builtin functions, and UI in your test specs. Do not directly invoke any private functions. ie. only call or mock functions and objects exposed by openmct.* (eg. openmct.telemetry, openmct.objectView, etc.), and builtin browser functions (fetch, requestAnimationFrame, setTimeout, etc.).
+* Where builtin functions have been mocked, be sure to clear them between tests.
+* Test at an appropriate level of isolation. Eg. 
+    * If you’re testing a view, you do not need to test the whole application UI, you can just fetch the view provider using the public API and render the view into an element that you have created. 
+    * You do not need to test that the view switcher works, there should be separate tests for that. 
+    * You do not need to test that telemetry providers work, you can mock openmct.telemetry.request() to feed test data to the view.
+    * Use your best judgement when deciding on appropriate scope.
+* Automated tests for plugins should start by actually installing the plugin being tested, and then test that installing the plugin adds the desired features and behavior to Open MCT, observing the above rules.
+* All variables used in a test spec, including any instances of the Open MCT API should be declared inside of an appropriate block scope (not at the root level of the source file), and should be initialized in the relevant beforeEach block. `beforeEach` is preferable to `beforeAll` to avoid leaking of state between tests.
+* A `afterEach` or `afterAll` should be used to do any clean up necessary to prevent leakage of state between test specs. This can happen when functions on `window` are wrapped, or when the URL is changed. [A convenience function](https://github.com/nasa/openmct/blob/master/src/utils/testing.js#L59) is provided for resetting the URL and clearing builtin spies between tests.
+* If writing unit tests for legacy Angular code be sure to follow [best practices in order to avoid memory leaks](https://www.thecodecampus.de/blog/avoid-memory-leaks-angularjs-unit-tests/).
+
+#### Examples
+* [Example of an automated test spec for an object view plugin](https://github.com/nasa/openmct/blob/master/src/plugins/telemetryTable/pluginSpec.js)
+* [Example of an automated test spec for API](https://github.com/nasa/openmct/blob/master/src/api/time/TimeAPISpec.js)
 
 ### Commit Message Standards
 

LICENSE.md

@@ -1,6 +1,6 @@
 # Open MCT License
 
-Open MCT, Copyright (c) 2014-2019, United States Government as represented by the Administrator of the National Aeronautics and Space Administration. All rights reserved.
+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.
 

example/generator/GeneratorMetadataProvider.js

@@ -28,6 +28,16 @@ define([
                         domain: 2
                     }
                 },
+                // Need to enable "LocalTimeSystem" plugin to make use of this
+                // {
+                //     key: "local",
+                //     name: "Time",
+                //     format: "local-format",
+                //     source: "utc",
+                //     hints: {
+                //         domain: 3
+                //     }
+                // },
                 {
                     key: "sin",
                     name: "Sine",
@@ -61,6 +71,15 @@ define([
                         domain: 1
                     }
                 },
+                {
+                    key: "local",
+                    name: "Time",
+                    format: "utc",
+                    source: "utc",
+                    hints: {
+                        domain: 2
+                    }
+                },
                 {
                     key: "state",
                     source: "value",

index.html

@@ -34,8 +34,8 @@
     <body>
     </body>
     <script>
-        const FIVE_MINUTES = 5 * 60 * 1000;
-        const THIRTY_MINUTES = 30 * 60 * 1000;
+        const THIRTY_SECONDS = 30 * 1000;
+        const THIRTY_MINUTES = THIRTY_SECONDS * 60;
 
         [
             'example/eventGenerator'
@@ -63,7 +63,39 @@
                     bounds: {
                         start: Date.now() - THIRTY_MINUTES,
                         end: Date.now()
-                    }
+                    },
+                    // commonly used bounds can be stored in history
+                    // bounds (start and end) can accept either a milliseconds number
+                    // or a callback function returning a milliseconds number
+                    // a function is useful for invoking Date.now() at exact moment of preset selection
+                    presets: [
+                        {
+                            label: 'Last Day',
+                            bounds: {
+                                start: () => Date.now() - 1000 * 60 * 60 * 24,
+                                end: () => Date.now()
+                            }
+                        },
+                        {
+                            label: 'Last 2 hours',
+                            bounds: {
+                                start: () => Date.now() - 1000 * 60 * 60 * 2,
+                                end: () => Date.now()
+                            }
+                        },
+                        {
+                            label: 'Last hour',
+                            bounds: {
+                                start: () => Date.now() - 1000 * 60 * 60,
+                                end: () => Date.now()
+                            }
+                        }
+                    ],
+                    // maximum recent bounds to retain in conductor history
+                    records: 10,
+                    // maximum duration between start and end bounds
+                    // for utc-based time systems this is in milliseconds
+                    limit: 1000 * 60 * 60 * 24
                 },
                 {
                     name: "Realtime",
@@ -71,7 +103,7 @@
                     clock: 'local',
                     clockOffsets: {
                         start: - THIRTY_MINUTES,
-                        end: FIVE_MINUTES
+                        end: THIRTY_SECONDS
                     }
                 }
             ]

package.json

@@ -2,7 +2,6 @@
   "name": "openmct",
   "version": "1.0.0-snapshot",
   "description": "The Open MCT core platform",
-  "dependencies": {},
   "devDependencies": {
     "angular": ">=1.8.0",
     "angular-route": "1.4.14",
@@ -39,13 +38,13 @@
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-core": "^3.1.0",
     "jsdoc": "^3.3.2",
-    "karma": "^2.0.3",
-    "karma-chrome-launcher": "^2.2.0",
+    "karma": "5.0.9",
+    "karma-chrome-launcher": "3.1.0",
     "karma-cli": "^1.0.1",
     "karma-coverage": "^1.1.2",
     "karma-coverage-istanbul-reporter": "^2.1.1",
     "karma-html-reporter": "^0.2.7",
-    "karma-jasmine": "^1.1.2",
+    "karma-jasmine": "^2.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.0",
     "location-bar": "^3.0.1",
@@ -60,6 +59,8 @@
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.9.2",
     "painterro": "^0.2.65",
+    "plotly.js-basic-dist-min": "^1.54.6",
+    "plotly.js-gl2d-dist-min": "^1.54.5",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",

platform/commonUI/edit/src/actions/PropertiesAction.js

@@ -81,10 +81,15 @@ define(
          * context.
          */
         PropertiesAction.appliesTo = function (context) {
+
             var domainObject = (context || {}).domainObject,
                 type = domainObject && domainObject.getCapability('type'),
                 creatable = type && type.hasFeature('creation');
 
+            if (domainObject && domainObject.model && domainObject.model.locked) {
+                return false;
+            }
+
             // Only allow creatable types to be edited
             return domainObject && creatable;
         };

platform/entanglement/src/actions/MoveAction.js

@@ -40,7 +40,18 @@ define(
         }
 
         MoveAction.prototype = Object.create(AbstractComposeAction.prototype);
-        MoveAction.appliesTo = AbstractComposeAction.appliesTo;
+
+        MoveAction.appliesTo = function (context) {
+            var applicableObject =
+                context.selectedObject || context.domainObject;
+
+            if (applicableObject && applicableObject.model.locked) {
+                return false;
+            }
+
+            return Boolean(applicableObject &&
+                applicableObject.hasCapability('context'));
+        };
 
         return MoveAction;
     }

platform/import-export/src/actions/ImportAsJSONAction.js

@@ -216,8 +216,14 @@ define(['zepto', 'objectUtils'], function ($, objectUtils) {
     };
 
     ImportAsJSONAction.appliesTo = function (context) {
-        return context.domainObject !== undefined &&
-            context.domainObject.hasCapability("composition");
+        let domainObject = context.domainObject;
+
+        if (domainObject && domainObject.model.locked) {
+            return false;
+        }
+
+        return domainObject !== undefined &&
+            domainObject.hasCapability("composition");
     };
 
     return ImportAsJSONAction;

report.20200527.134750.93992.001.json

@@ -1,621 +0,0 @@
-
-{
-  "header": {
-    "event": "Allocation failed - JavaScript heap out of memory",
-    "location": "OnFatalError",
-    "filename": "report.20200527.134750.93992.001.json",
-    "dumpEventTime": "2020-05-27T13:47:50Z",
-    "dumpEventTimeStamp": "1590612470877",
-    "processId": 93992,
-    "commandLine": [
-      "node",
-      "/Users/dtailor/Desktop/openmct/node_modules/.bin/karma",
-      "start",
-      "--single-run"
-    ],
-    "nodejsVersion": "v11.9.0",
-    "wordSize": 64,
-    "componentVersions": {
-      "node": "11.9.0",
-      "v8": "7.0.276.38-node.16",
-      "uv": "1.25.0",
-      "zlib": "1.2.11",
-      "brotli": "1.0.7",
-      "ares": "1.15.0",
-      "modules": "67",
-      "nghttp2": "1.34.0",
-      "napi": "4",
-      "llhttp": "1.0.1",
-      "http_parser": "2.8.0",
-      "openssl": "1.1.1a",
-      "cldr": "34.0",
-      "icu": "63.1",
-      "tz": "2018e",
-      "unicode": "11.0",
-      "arch": "x64",
-      "platform": "darwin",
-      "release": "node"
-    },
-    "osVersion": "Darwin 18.7.0 Darwin Kernel Version 18.7.0: Thu Jan 23 06:52:12 PST 2020; root:xnu-4903.278.25~1/RELEASE_X86_64",
-    "machine": "Darwin 18.7.0 Darwin Kernel Version 18.7.0: Thu Jan 23 06:52:12 PST 2020; root:xnu-4903.278.25~1/RELEASE_X86_64tailor x86_64"
-  },
-  "javascriptStack": {
-    "message": "No stack.",
-    "stack": [
-      "Unavailable."
-    ]
-  },
-  "nativeStack": [
-    " [pc=0x10013090e] report::TriggerNodeReport(v8::Isolate*, node::Environment*, char const*, char const*, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >, v8::Local<v8::String>) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x100063744] node::OnFatalError(char const*, char const*) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x1001a8c47] v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x1001a8be4] v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x1005add42] v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x1005b0273] v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x1005ac7a8] v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x1005aa965] v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x1005b720c] v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x1005b728f] v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x100586484] v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x1008389a4] v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node]",
-    " [pc=0x14acfddcfc7d] "
-  ],
-  "javascriptHeap": {
-    "totalMemory": 1479229440,
-    "totalCommittedMemory": 1477309024,
-    "usedMemory": 1445511032,
-    "availableMemory": 50296592,
-    "memoryLimit": 1526909922,
-    "heapSpaces": {
-      "read_only_space": {
-        "memorySize": 524288,
-        "committedMemory": 42224,
-        "capacity": 515584,
-        "used": 33520,
-        "available": 482064
-      },
-      "new_space": {
-        "memorySize": 4194304,
-        "committedMemory": 4194288,
-        "capacity": 2062336,
-        "used": 59016,
-        "available": 2003320
-      },
-      "old_space": {
-        "memorySize": 305860608,
-        "committedMemory": 305138544,
-        "capacity": 283264904,
-        "used": 282942208,
-        "available": 322696
-      },
-      "code_space": {
-        "memorySize": 6291456,
-        "committedMemory": 5687328,
-        "capacity": 5237152,
-        "used": 5237152,
-        "available": 0
-      },
-      "map_space": {
-        "memorySize": 5255168,
-        "committedMemory": 5143024,
-        "capacity": 2523280,
-        "used": 2523280,
-        "available": 0
-      },
-      "large_object_space": {
-        "memorySize": 1157103616,
-        "committedMemory": 1157103616,
-        "capacity": 1202204368,
-        "used": 1154715856,
-        "available": 47488512
-      },
-      "new_large_object_space": {
-        "memorySize": 0,
-        "committedMemory": 0,
-        "capacity": 0,
-        "used": 0,
-        "available": 0
-      }
-    }
-  },
-  "resourceUsage": {
-    "userCpuSeconds": 43.1616,
-    "kernelCpuSeconds": 43.1616,
-    "cpuConsumptionPercent": 5.42705e-06,
-    "maxRss": 1966080000000,
-    "pageFaults": {
-      "IORequired": 245,
-      "IONotRequired": 832598
-    },
-    "fsActivity": {
-      "reads": 0,
-      "writes": 0
-    }
-  },
-  "libuv": [
-  ],
-  "environmentVariables": {
-    "npm_config_save_dev": "",
-    "npm_config_legacy_bundling": "",
-    "npm_config_dry_run": "",
-    "npm_package_devDependencies_markdown_toc": "^0.11.7",
-    "npm_config_only": "",
-    "npm_config_browser": "",
-    "npm_config_viewer": "man",
-    "npm_config_commit_hooks": "true",
-    "npm_package_gitHead": "7126abe7ec1d66d3252f3598fbd6bd27217018bc",
-    "npm_config_also": "",
-    "npm_package_scripts_otherdoc": "node docs/gendocs.js --in docs/src --out dist/docs --suppress-toc 'docs/src/index.md|docs/src/process/index.md'",
-    "npm_package_devDependencies_minimist": "^1.1.1",
-    "npm_config_sign_git_commit": "",
-    "npm_config_rollback": "true",
-    "npm_package_devDependencies_fast_sass_loader": "1.4.6",
-    "TERM_PROGRAM": "Apple_Terminal",
-    "npm_config_usage": "",
-    "npm_config_audit": "true",
-    "npm_package_devDependencies_git_rev_sync": "^1.4.0",
-    "npm_package_devDependencies_file_loader": "^1.1.11",
-    "npm_package_devDependencies_d3_selection": "1.3.x",
-    "NODE": "/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node",
-    "npm_package_homepage": "https://github.com/nasa/openmct#readme",
-    "INIT_CWD": "/Users/dtailor/Desktop/openmct",
-    "NVM_CD_FLAGS": "",
-    "npm_config_globalignorefile": "/Users/dtailor/.nvm/versions/node/v11.9.0/etc/npmignore",
-    "npm_package_devDependencies_comma_separated_values": "^3.6.4",
-    "SHELL": "/bin/bash",
-    "TERM": "xterm-256color",
-    "npm_config_init_author_url": "",
-    "npm_config_shell": "/bin/bash",
-    "npm_config_maxsockets": "50",
-    "npm_package_devDependencies_vue_template_compiler": "2.5.6",
-    "npm_package_devDependencies_style_loader": "^1.0.1",
-    "npm_package_devDependencies_moment_duration_format": "^2.2.2",
-    "npm_config_parseable": "",
-    "npm_config_shrinkwrap": "true",
-    "npm_config_metrics_registry": "https://registry.npmjs.org/",
-    "TMPDIR": "/var/folders/ks/ytghmh9x4lj3cchr5km5lhkcb7v9y2/T/",
-    "npm_config_timing": "",
-    "npm_config_init_license": "ISC",
-    "npm_package_scripts_lint": "eslint platform example src --ext .js,.vue openmct.js",
-    "npm_package_devDependencies_d3_array": "1.2.x",
-    "Apple_PubSub_Socket_Render": "/private/tmp/com.apple.launchd.PsV6Dfq4Tm/Render",
-    "npm_config_if_present": "",
-    "npm_package_devDependencies_concurrently": "^3.6.1",
-    "TERM_PROGRAM_VERSION": "421.2",
-    "npm_package_scripts_jsdoc": "jsdoc -c jsdoc.json -R API.md -r -d dist/docs/api",
-    "npm_config_sign_git_tag": "",
-    "npm_config_init_author_email": "",
-    "npm_config_cache_max": "Infinity",
-    "npm_config_preid": "",
-    "npm_config_long": "",
-    "npm_config_local_address": "",
-    "npm_config_cert": "",
-    "npm_config_git_tag_version": "true",
-    "npm_package_devDependencies_exports_loader": "^0.7.0",
-    "TERM_SESSION_ID": "0630D2FA-BAC2-48D3-A21D-9AB58A79FB14",
-    "npm_config_noproxy": "",
-    "npm_config_registry": "https://registry.npmjs.org/",
-    "npm_config_fetch_retries": "2",
-    "npm_package_private": "true",
-    "npm_package_devDependencies_karma_jasmine": "^1.1.2",
-    "npm_package_repository_url": "git+https://github.com/nasa/openmct.git",
-    "npm_config_versions": "",
-    "npm_config_key": "",
-    "npm_config_message": "%s",
-    "npm_package_readmeFilename": "README.md",
-    "npm_package_devDependencies_painterro": "^0.2.65",
-    "npm_package_scripts_verify": "concurrently 'npm:test' 'npm:lint'",
-    "npm_package_devDependencies_webpack": "^4.16.2",
-    "npm_package_devDependencies_eventemitter3": "^1.2.0",
-    "npm_package_description": "The Open MCT core platform",
-    "USER": "dtailor",
-    "NVM_DIR": "/Users/dtailor/.nvm",
-    "npm_package_license": "Apache-2.0",
-    "npm_package_scripts_build_dev": "webpack",
-    "npm_package_devDependencies_webpack_cli": "^3.1.0",
-    "npm_package_devDependencies_location_bar": "^3.0.1",
-    "npm_package_devDependencies_jasmine_core": "^3.1.0",
-    "npm_config_globalconfig": "/Users/dtailor/.nvm/versions/node/v11.9.0/etc/npmrc",
-    "npm_package_devDependencies_karma": "^2.0.3",
-    "npm_config_prefer_online": "",
-    "npm_config_always_auth": "",
-    "npm_config_logs_max": "10",
-    "npm_package_devDependencies_angular": "1.7.9",
-    "SSH_AUTH_SOCK": "/private/tmp/com.apple.launchd.JH8E4KgH06/Listeners",
-    "npm_package_devDependencies_request": "^2.69.0",
-    "npm_package_devDependencies_eslint": "5.2.0",
-    "__CF_USER_TEXT_ENCODING": "0x167DA7C2:0x0:0x0",
-    "npm_execpath": "/Users/dtailor/.nvm/versions/node/v11.9.0/lib/node_modules/npm/bin/npm-cli.js",
-    "npm_config_global_style": "",
-    "npm_config_cache_lock_retries": "10",
-    "npm_config_cafile": "",
-    "npm_config_update_notifier": "true",
-    "npm_package_scripts_test_debug": "cross-env NODE_ENV=debug karma start --no-single-run",
-    "npm_package_devDependencies_glob": ">= 3.0.0",
-    "npm_config_heading": "npm",
-    "npm_config_audit_level": "low",
-    "npm_package_devDependencies_mini_css_extract_plugin": "^0.4.1",
-    "npm_package_devDependencies_copy_webpack_plugin": "^4.5.2",
-    "npm_config_read_only": "",
-    "npm_config_offline": "",
-    "npm_config_searchlimit": "20",
-    "npm_config_fetch_retry_mintimeout": "10000",
-    "npm_package_devDependencies_webpack_dev_middleware": "^3.1.3",
-    "npm_config_json": "",
-    "npm_config_access": "",
-    "npm_config_argv": "{\"remain\":[],\"cooked\":[\"run\",\"test\"],\"original\":[\"run\",\"test\"]}",
-    "npm_package_scripts_lint_fix": "eslint platform example src --ext .js,.vue openmct.js --fix",
-    "npm_package_devDependencies_uuid": "^3.3.3",
-    "npm_package_devDependencies_karma_coverage": "^1.1.2",
-    "PATH": "/Users/dtailor/.nvm/versions/node/v11.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/dtailor/Desktop/openmct/node_modules/.bin:/Users/dtailor/.nvm/versions/node/v11.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/dtailor/Desktop/openmct/node_modules/.bin:/Users/dtailor/.nvm/versions/node/v11.9.0/bin:/Users/dtailor/.homebrew/bin:/Users/dtailor/local/bin:/Users/dtailor/.homebrew/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Users/dtailor/Applications/Visual Studio Code.app/Contents/Resources/app/bin:/opt/local/bin:/Users/dtailor/.homebrew/bin:/Users/dtailor/.homebrew/bin:/Users/dtailor/.homebrew/bin:/Users/dtailor/local/bin:/Users/dtailor/.homebrew/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin",
-    "npm_config_allow_same_version": "",
-    "npm_config_https_proxy": "",
-    "npm_config_engine_strict": "",
-    "npm_config_description": "true",
-    "npm_package_devDependencies_html2canvas": "^1.0.0-alpha.12",
-    "_": "/Users/dtailor/Desktop/openmct/node_modules/.bin/karma",
-    "npm_config_userconfig": "/Users/dtailor/.npmrc",
-    "npm_config_init_module": "/Users/dtailor/.npm-init.js",
-    "npm_package_author": "",
-    "npm_package_devDependencies_karma_chrome_launcher": "^2.2.0",
-    "npm_package_devDependencies_d3_scale": "1.0.x",
-    "npm_config_cidr": "",
-    "npm_package_devDependencies_printj": "^1.2.1",
-    "PWD": "/Users/dtailor/Desktop/openmct",
-    "npm_config_user": "377333698",
-    "npm_config_node_version": "11.9.0",
-    "npm_package_bugs_url": "https://github.com/nasa/openmct/issues",
-    "npm_package_scripts_test_watch": "karma start --no-single-run",
-    "npm_lifecycle_event": "test",
-    "npm_package_devDependencies_v8_compile_cache": "^1.1.0",
-    "npm_config_ignore_prepublish": "",
-    "npm_config_save": "true",
-    "npm_config_editor": "vi",
-    "npm_config_auth_type": "legacy",
-    "npm_package_repository_type": "git",
-    "npm_package_devDependencies_vue": "2.5.6",
-    "npm_package_devDependencies_marked": "^0.3.5",
-    "npm_package_devDependencies_angular_route": "1.4.14",
-    "npm_package_name": "openmct",
-    "LANG": "en_US.UTF-8",
-    "npm_config_script_shell": "",
-    "npm_config_tag": "latest",
-    "npm_config_global": "",
-    "npm_config_progress": "true",
-    "npm_package_scripts_start": "node app.js",
-    "npm_package_devDependencies_karma_coverage_istanbul_reporter": "^2.1.1",
-    "npm_config_ham_it_up": "",
-    "npm_config_searchstaleness": "900",
-    "npm_config_optional": "true",
-    "npm_package_scripts_docs": "npm run jsdoc ; npm run otherdoc",
-    "npm_package_devDependencies_istanbul_instrumenter_loader": "^3.0.1",
-    "XPC_FLAGS": "0x0",
-    "npm_config_save_prod": "",
-    "npm_config_force": "",
-    "npm_config_bin_links": "true",
-    "npm_package_devDependencies_moment": "2.25.3",
-    "npm_package_devDependencies_karma_webpack": "^3.0.0",
-    "npm_package_devDependencies_express": "^4.13.1",
-    "npm_config_searchopts": "",
-    "npm_package_devDependencies_d3_time": "1.0.x",
-    "FORCE_COLOR": "2",
-    "npm_config_node_gyp": "/Users/dtailor/.nvm/versions/node/v11.9.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js",
-    "npm_config_depth": "Infinity",
-    "npm_package_scripts_build_prod": "cross-env NODE_ENV=production webpack",
-    "npm_config_sso_poll_frequency": "500",
-    "npm_config_rebuild_bundle": "true",
-    "npm_package_version": "1.0.0-snapshot",
-    "XPC_SERVICE_NAME": "0",
-    "npm_config_unicode": "true",
-    "npm_package_devDependencies_jsdoc": "^3.3.2",
-    "SHLVL": "4",
-    "HOME": "/Users/dtailor",
-    "npm_config_fetch_retry_maxtimeout": "60000",
-    "npm_package_scripts_test": "karma start --single-run",
-    "npm_package_devDependencies_zepto": "^1.2.0",
-    "npm_package_devDependencies_eslint_plugin_vue": "^6.0.0",
-    "npm_config_ca": "",
-    "npm_config_tag_version_prefix": "v",
-    "npm_config_strict_ssl": "true",
-    "npm_config_sso_type": "oauth",
-    "npm_config_scripts_prepend_node_path": "warn-only",
-    "npm_config_save_prefix": "^",
-    "npm_config_loglevel": "notice",
-    "npm_package_devDependencies_lodash": "^3.10.1",
-    "npm_package_devDependencies_karma_cli": "^1.0.1",
-    "npm_package_devDependencies_d3_color": "1.0.x",
-    "npm_config_save_exact": "",
-    "npm_config_dev": "",
-    "npm_config_group": "1286109195",
-    "npm_config_fetch_retry_factor": "10",
-    "npm_package_devDependencies_webpack_hot_middleware": "^2.22.3",
-    "npm_package_devDependencies_cross_env": "^6.0.3",
-    "npm_package_devDependencies_babel_eslint": "8.2.6",
-    "HOMEBREW_PREFIX": "/Users/dtailor/.homebrew",
-    "npm_config_version": "",
-    "npm_config_prefer_offline": "",
-    "npm_config_cache_lock_stale": "60000",
-    "npm_config_otp": "",
-    "npm_config_cache_min": "10",
-    "npm_package_devDependencies_vue_loader": "^15.2.6",
-    "npm_config_searchexclude": "",
-    "npm_config_cache": "/Users/dtailor/.npm",
-    "npm_package_scripts_test_coverage": "./scripts/test-coverage.sh",
-    "npm_package_devDependencies_d3_interpolate": "1.1.x",
-    "npm_package_devDependencies_d3_format": "1.2.x",
-    "LOGNAME": "dtailor",
-    "npm_lifecycle_script": "karma start --single-run",
-    "npm_config_color": "true",
-    "npm_package_devDependencies_node_bourbon": "^4.2.3",
-    "npm_package_devDependencies_karma_sourcemap_loader": "^0.3.7",
-    "npm_package_devDependencies_karma_html_reporter": "^0.2.7",
-    "npm_config_proxy": "",
-    "npm_config_package_lock": "true",
-    "npm_package_devDependencies_d3_time_format": "2.1.x",
-    "npm_package_devDependencies_d3_axis": "1.0.x",
-    "npm_config_package_lock_only": "",
-    "npm_package_devDependencies_moment_timezone": "0.5.28",
-    "npm_config_save_optional": "",
-    "NVM_BIN": "/Users/dtailor/.nvm/versions/node/v11.9.0/bin",
-    "npm_config_ignore_scripts": "",
-    "npm_config_user_agent": "npm/6.5.0 node/v11.9.0 darwin x64",
-    "npm_package_devDependencies_imports_loader": "^0.8.0",
-    "npm_package_devDependencies_file_saver": "^1.3.8",
-    "npm_config_cache_lock_wait": "10000",
-    "npm_config_production": "",
-    "npm_package_scripts_build_watch": "webpack --watch",
-    "DISPLAY": "/private/tmp/com.apple.launchd.E3N8oC6RMf/org.macosforge.xquartz:0",
-    "npm_config_send_metrics": "",
-    "npm_config_save_bundle": "",
-    "npm_package_scripts_prepare": "npm run build:prod",
-    "npm_config_node_options": "",
-    "npm_config_umask": "0022",
-    "npm_config_init_version": "1.0.0",
-    "npm_package_devDependencies_split": "^1.0.0",
-    "npm_package_devDependencies_raw_loader": "^0.5.1",
-    "npm_config_init_author_name": "",
-    "npm_config_git": "git",
-    "npm_config_scope": "",
-    "npm_package_scripts_clean": "rm -rf ./dist",
-    "npm_package_devDependencies_node_sass": "^4.9.2",
-    "npm_package_devDependencies_css_loader": "^1.0.0",
-    "DISABLE_UPDATE_CHECK": "1",
-    "npm_config_onload_script": "",
-    "npm_config_unsafe_perm": "true",
-    "npm_config_tmp": "/var/folders/ks/ytghmh9x4lj3cchr5km5lhkcb7v9y2/T",
-    "npm_package_devDependencies_d3_collection": "1.0.x",
-    "npm_node_execpath": "/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node",
-    "npm_config_link": "",
-    "npm_config_prefix": "/Users/dtailor/.nvm/versions/node/v11.9.0",
-    "npm_package_devDependencies_html_loader": "^0.5.5"
-  },
-  "userLimits": {
-    "core_file_size_blocks": {
-      "soft": 0,
-      "hard": "unlimited"
-    },
-    "data_seg_size_kbytes": {
-      "soft": "unlimited",
-      "hard": "unlimited"
-    },
-    "file_size_blocks": {
-      "soft": "unlimited",
-      "hard": "unlimited"
-    },
-    "max_locked_memory_bytes": {
-      "soft": "unlimited",
-      "hard": "unlimited"
-    },
-    "max_memory_size_kbytes": {
-      "soft": "unlimited",
-      "hard": "unlimited"
-    },
-    "open_files": {
-      "soft": 24576,
-      "hard": "unlimited"
-    },
-    "stack_size_bytes": {
-      "soft": 8388608,
-      "hard": 67104768
-    },
-    "cpu_time_seconds": {
-      "soft": "unlimited",
-      "hard": "unlimited"
-    },
-    "max_user_processes": {
-      "soft": 1418,
-      "hard": 2128
-    },
-    "virtual_memory_kbytes": {
-      "soft": "unlimited",
-      "hard": "unlimited"
-    }
-  },
-  "sharedObjects": [
-    "/Users/dtailor/.nvm/versions/node/v11.9.0/bin/node",
-    "/System/Library/Frameworks/CoreFoundation.framework/Versions/A/CoreFoundation",
-    "/usr/lib/libSystem.B.dylib",
-    "/usr/lib/libc++.1.dylib",
-    "/usr/lib/libobjc.A.dylib",
-    "/usr/lib/libDiagnosticMessagesClient.dylib",
-    "/usr/lib/libicucore.A.dylib",
-    "/usr/lib/libz.1.dylib",
-    "/usr/lib/libc++abi.dylib",
-    "/usr/lib/system/libcache.dylib",
-    "/usr/lib/system/libcommonCrypto.dylib",
-    "/usr/lib/system/libcompiler_rt.dylib",
-    "/usr/lib/system/libcopyfile.dylib",
-    "/usr/lib/system/libcorecrypto.dylib",
-    "/usr/lib/system/libdispatch.dylib",
-    "/usr/lib/system/libdyld.dylib",
-    "/usr/lib/system/libkeymgr.dylib",
-    "/usr/lib/system/liblaunch.dylib",
-    "/usr/lib/system/libmacho.dylib",
-    "/usr/lib/system/libquarantine.dylib",
-    "/usr/lib/system/libremovefile.dylib",
-    "/usr/lib/system/libsystem_asl.dylib",
-    "/usr/lib/system/libsystem_blocks.dylib",
-    "/usr/lib/system/libsystem_c.dylib",
-    "/usr/lib/system/libsystem_configuration.dylib",
-    "/usr/lib/system/libsystem_coreservices.dylib",
-    "/usr/lib/system/libsystem_darwin.dylib",
-    "/usr/lib/system/libsystem_dnssd.dylib",
-    "/usr/lib/system/libsystem_info.dylib",
-    "/usr/lib/system/libsystem_m.dylib",
-    "/usr/lib/system/libsystem_malloc.dylib",
-    "/usr/lib/system/libsystem_networkextension.dylib",
-    "/usr/lib/system/libsystem_notify.dylib",
-    "/usr/lib/system/libsystem_sandbox.dylib",
-    "/usr/lib/system/libsystem_secinit.dylib",
-    "/usr/lib/system/libsystem_kernel.dylib",
-    "/usr/lib/system/libsystem_platform.dylib",
-    "/usr/lib/system/libsystem_pthread.dylib",
-    "/usr/lib/system/libsystem_symptoms.dylib",
-    "/usr/lib/system/libsystem_trace.dylib",
-    "/usr/lib/system/libunwind.dylib",
-    "/usr/lib/system/libxpc.dylib",
-    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/ApplicationServices",
-    "/System/Library/Frameworks/CoreGraphics.framework/Versions/A/CoreGraphics",
-    "/System/Library/Frameworks/CoreText.framework/Versions/A/CoreText",
-    "/System/Library/Frameworks/ImageIO.framework/Versions/A/ImageIO",
-    "/System/Library/Frameworks/ColorSync.framework/Versions/A/ColorSync",
-    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/ATS.framework/Versions/A/ATS",
-    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/ColorSyncLegacy.framework/Versions/A/ColorSyncLegacy",
-    "/System/Library/Frameworks/CoreServices.framework/Versions/A/CoreServices",
-    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/HIServices.framework/Versions/A/HIServices",
-    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/LangAnalysis.framework/Versions/A/LangAnalysis",
-    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/PrintCore.framework/Versions/A/PrintCore",
-    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/QD.framework/Versions/A/QD",
-    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/SpeechSynthesis.framework/Versions/A/SpeechSynthesis",
-    "/System/Library/PrivateFrameworks/SkyLight.framework/Versions/A/SkyLight",
-    "/System/Library/Frameworks/IOSurface.framework/Versions/A/IOSurface",
-    "/usr/lib/libxml2.2.dylib",
-    "/System/Library/Frameworks/CFNetwork.framework/Versions/A/CFNetwork",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Accelerate",
-    "/System/Library/Frameworks/Foundation.framework/Versions/C/Foundation",
-    "/usr/lib/libcompression.dylib",
-    "/System/Library/Frameworks/SystemConfiguration.framework/Versions/A/SystemConfiguration",
-    "/System/Library/Frameworks/CoreDisplay.framework/Versions/A/CoreDisplay",
-    "/System/Library/Frameworks/IOKit.framework/Versions/A/IOKit",
-    "/System/Library/Frameworks/Metal.framework/Versions/A/Metal",
-    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Versions/A/MetalPerformanceShaders",
-    "/System/Library/PrivateFrameworks/MultitouchSupport.framework/Versions/A/MultitouchSupport",
-    "/System/Library/Frameworks/Security.framework/Versions/A/Security",
-    "/System/Library/Frameworks/QuartzCore.framework/Versions/A/QuartzCore",
-    "/usr/lib/libbsm.0.dylib",
-    "/usr/lib/liblzma.5.dylib",
-    "/usr/lib/libauto.dylib",
-    "/System/Library/Frameworks/DiskArbitration.framework/Versions/A/DiskArbitration",
-    "/usr/lib/libarchive.2.dylib",
-    "/usr/lib/liblangid.dylib",
-    "/usr/lib/libCRFSuite.dylib",
-    "/usr/lib/libenergytrace.dylib",
-    "/usr/lib/system/libkxld.dylib",
-    "/System/Library/PrivateFrameworks/AppleFSCompression.framework/Versions/A/AppleFSCompression",
-    "/usr/lib/libOpenScriptingUtil.dylib",
-    "/usr/lib/libcoretls.dylib",
-    "/usr/lib/libcoretls_cfhelpers.dylib",
-    "/usr/lib/libpam.2.dylib",
-    "/usr/lib/libsqlite3.dylib",
-    "/usr/lib/libxar.1.dylib",
-    "/usr/lib/libbz2.1.0.dylib",
-    "/usr/lib/libnetwork.dylib",
-    "/usr/lib/libapple_nghttp2.dylib",
-    "/usr/lib/libpcap.A.dylib",
-    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/FSEvents.framework/Versions/A/FSEvents",
-    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/CarbonCore.framework/Versions/A/CarbonCore",
-    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/Metadata.framework/Versions/A/Metadata",
-    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/OSServices.framework/Versions/A/OSServices",
-    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SearchKit.framework/Versions/A/SearchKit",
-    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/AE.framework/Versions/A/AE",
-    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/LaunchServices",
-    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/DictionaryServices.framework/Versions/A/DictionaryServices",
-    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SharedFileList.framework/Versions/A/SharedFileList",
-    "/System/Library/Frameworks/NetFS.framework/Versions/A/NetFS",
-    "/System/Library/PrivateFrameworks/NetAuth.framework/Versions/A/NetAuth",
-    "/System/Library/PrivateFrameworks/login.framework/Versions/A/Frameworks/loginsupport.framework/Versions/A/loginsupport",
-    "/System/Library/PrivateFrameworks/TCC.framework/Versions/A/TCC",
-    "/System/Library/PrivateFrameworks/CoreNLP.framework/Versions/A/CoreNLP",
-    "/System/Library/PrivateFrameworks/MetadataUtilities.framework/Versions/A/MetadataUtilities",
-    "/usr/lib/libmecabra.dylib",
-    "/usr/lib/libmecab.1.0.0.dylib",
-    "/usr/lib/libgermantok.dylib",
-    "/usr/lib/libThaiTokenizer.dylib",
-    "/usr/lib/libChineseTokenizer.dylib",
-    "/usr/lib/libiconv.2.dylib",
-    "/usr/lib/libcharset.1.dylib",
-    "/System/Library/PrivateFrameworks/LanguageModeling.framework/Versions/A/LanguageModeling",
-    "/System/Library/PrivateFrameworks/CoreEmoji.framework/Versions/A/CoreEmoji",
-    "/System/Library/PrivateFrameworks/Lexicon.framework/Versions/A/Lexicon",
-    "/System/Library/PrivateFrameworks/LinguisticData.framework/Versions/A/LinguisticData",
-    "/usr/lib/libcmph.dylib",
-    "/System/Library/Frameworks/CoreData.framework/Versions/A/CoreData",
-    "/System/Library/Frameworks/OpenDirectory.framework/Versions/A/Frameworks/CFOpenDirectory.framework/Versions/A/CFOpenDirectory",
-    "/System/Library/PrivateFrameworks/APFS.framework/Versions/A/APFS",
-    "/usr/lib/libutil.dylib",
-    "/System/Library/Frameworks/ServiceManagement.framework/Versions/A/ServiceManagement",
-    "/System/Library/PrivateFrameworks/BackgroundTaskManagement.framework/Versions/A/BackgroundTaskManagement",
-    "/usr/lib/libxslt.1.dylib",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vImage.framework/Versions/A/vImage",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/vecLib",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libvMisc.dylib",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libvDSP.dylib",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libLAPACK.dylib",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libLinearAlgebra.dylib",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libSparseBLAS.dylib",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libQuadrature.dylib",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBNNS.dylib",
-    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libSparse.dylib",
-    "/System/Library/PrivateFrameworks/GPUWrangler.framework/Versions/A/GPUWrangler",
-    "/System/Library/PrivateFrameworks/IOAccelerator.framework/Versions/A/IOAccelerator",
-    "/System/Library/PrivateFrameworks/IOPresentment.framework/Versions/A/IOPresentment",
-    "/System/Library/PrivateFrameworks/DSExternalDisplay.framework/Versions/A/DSExternalDisplay",
-    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libCoreFSCache.dylib",
-    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Frameworks/MPSCore.framework/Versions/A/MPSCore",
-    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Frameworks/MPSImage.framework/Versions/A/MPSImage",
-    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Frameworks/MPSNeuralNetwork.framework/Versions/A/MPSNeuralNetwork",
-    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Frameworks/MPSMatrix.framework/Versions/A/MPSMatrix",
-    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Frameworks/MPSRayIntersector.framework/Versions/A/MPSRayIntersector",
-    "/System/Library/PrivateFrameworks/MetalTools.framework/Versions/A/MetalTools",
-    "/System/Library/PrivateFrameworks/AggregateDictionary.framework/Versions/A/AggregateDictionary",
-    "/usr/lib/libMobileGestalt.dylib",
-    "/System/Library/Frameworks/CoreImage.framework/Versions/A/CoreImage",
-    "/System/Library/Frameworks/CoreVideo.framework/Versions/A/CoreVideo",
-    "/System/Library/Frameworks/OpenGL.framework/Versions/A/OpenGL",
-    "/System/Library/PrivateFrameworks/GraphVisualizer.framework/Versions/A/GraphVisualizer",
-    "/System/Library/PrivateFrameworks/FaceCore.framework/Versions/A/FaceCore",
-    "/System/Library/Frameworks/OpenCL.framework/Versions/A/OpenCL",
-    "/usr/lib/libFosl_dynamic.dylib",
-    "/System/Library/PrivateFrameworks/OTSVG.framework/Versions/A/OTSVG",
-    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/ATS.framework/Versions/A/Resources/libFontParser.dylib",
-    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/ATS.framework/Versions/A/Resources/libFontRegistry.dylib",
-    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libJPEG.dylib",
-    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libTIFF.dylib",
-    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libPng.dylib",
-    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libGIF.dylib",
-    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libJP2.dylib",
-    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libRadiance.dylib",
-    "/System/Library/PrivateFrameworks/AppleJPEG.framework/Versions/A/AppleJPEG",
-    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libGFXShared.dylib",
-    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libGLU.dylib",
-    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libGL.dylib",
-    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libGLImage.dylib",
-    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libCVMSPluginSupport.dylib",
-    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libCoreVMClient.dylib",
-    "/usr/lib/libcups.2.dylib",
-    "/System/Library/Frameworks/Kerberos.framework/Versions/A/Kerberos",
-    "/System/Library/Frameworks/GSS.framework/Versions/A/GSS",
-    "/usr/lib/libresolv.9.dylib",
-    "/System/Library/PrivateFrameworks/Heimdal.framework/Versions/A/Heimdal",
-    "/usr/lib/libheimdal-asn1.dylib",
-    "/System/Library/Frameworks/OpenDirectory.framework/Versions/A/OpenDirectory",
-    "/System/Library/PrivateFrameworks/CommonAuth.framework/Versions/A/CommonAuth",
-    "/System/Library/Frameworks/SecurityFoundation.framework/Versions/A/SecurityFoundation",
-    "/System/Library/Frameworks/CoreAudio.framework/Versions/A/CoreAudio",
-    "/System/Library/Frameworks/AudioToolbox.framework/Versions/A/AudioToolbox",
-    "/System/Library/PrivateFrameworks/AppleSauce.framework/Versions/A/AppleSauce",
-    "/System/Library/PrivateFrameworks/AssertionServices.framework/Versions/A/AssertionServices",
-    "/System/Library/PrivateFrameworks/BaseBoard.framework/Versions/A/BaseBoard"
-  ]
-}

src/MCT.js

@@ -252,6 +252,7 @@ define([
         // Plugins that are installed by default
 
         this.install(this.plugins.Plot());
+        this.install(this.plugins.PlotlyPlot());
         this.install(this.plugins.TelemetryTable());
         this.install(PreviewPlugin.default());
         this.install(LegacyIndicatorsPlugin());
@@ -268,6 +269,7 @@ define([
         this.install(this.plugins.ConditionWidget());
         this.install(this.plugins.URLTimeSettingsSynchronizer());
         this.install(this.plugins.NotificationIndicator());
+        this.install(this.plugins.NewFolderAction());
     }
 
     MCT.prototype = Object.create(EventEmitter.prototype);

src/plugins/LADTable/LADTableCompositionPolicy.js

@@ -20,20 +20,13 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-export default class LADTableCompositionPolicy {
-
-    constructor(openmct) {
-        this.openmct = openmct;
-        return this.allow.bind(this);
-    }
-
-    allow(parent, child) {
+export default function ladTableCompositionPolicy(openmct) {
+    return function (parent, child) {
         if(parent.type === 'LadTable') {
-            return this.openmct.telemetry.isTelemetryObject(child);
+            return openmct.telemetry.isTelemetryObject(child);
         } else if(parent.type === 'LadTableSet') {
             return child.type === 'LadTable';
         }
-
         return true;
     }
 }

src/plugins/LADTable/components/LADRow.vue

@@ -64,7 +64,7 @@ export default {
     },
     computed: {
         formattedTimestamp() {
-            return this.timestamp !== undefined ? this.formats[this.timestampKey].format(this.timestamp) : '---';
+            return this.timestamp !== undefined ? this.getFormattedTimestamp(this.timestamp) : '---';
         }
     },
     mounted() {
@@ -110,11 +110,11 @@ export default {
     },
     methods: {
         updateValues(datum) {
-            let newTimestamp = this.formats[this.timestampKey].parse(datum),
+            let newTimestamp = this.getParsedTimestamp(datum),
                 limit;
 
             if(this.shouldUpdate(newTimestamp)) {
-                this.timestamp = this.formats[this.timestampKey].parse(datum);
+                this.timestamp = newTimestamp;
                 this.value = this.formats[this.valueKey].format(datum);
                 limit = this.limitEvaluator.evaluate(datum, this.valueMetadata);
                 if (limit) {
@@ -125,9 +125,12 @@ export default {
             }
         },
         shouldUpdate(newTimestamp) {
-            return (this.timestamp === undefined) ||
-                (this.inBounds(newTimestamp) &&
-                newTimestamp > this.timestamp);
+            let newTimestampInBounds = this.inBounds(newTimestamp),
+                noExistingTimestamp = this.timestamp === undefined,
+                newTimestampIsLatest = newTimestamp > this.timestamp;
+
+            return newTimestampInBounds &&
+                (noExistingTimestamp || newTimestampIsLatest);
         },
         requestHistory() {
             this.openmct
@@ -146,6 +149,7 @@ export default {
         updateBounds(bounds, isTick) {
             this.bounds = bounds;
             if(!isTick) {
+                this.resetValues();
                 this.requestHistory();
             }
         },
@@ -153,13 +157,34 @@ export default {
             return timestamp >= this.bounds.start && timestamp <= this.bounds.end;
         },
         updateTimeSystem(timeSystem) {
-            this.value = '---';
-            this.timestamp = '---';
-            this.valueClass = '';
+            this.resetValues();
             this.timestampKey = timeSystem.key;
         },
         showContextMenu(event) {
             this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
+        },
+        resetValues() {
+            this.value = '---';
+            this.timestamp = undefined;
+            this.valueClass = '';
+        },
+        getParsedTimestamp(timestamp) {
+            if(this.timeSystemFormat()) {
+                return this.formats[this.timestampKey].parse(timestamp);
+            }
+        },
+        getFormattedTimestamp(timestamp) {
+            if(this.timeSystemFormat()) {
+                return this.formats[this.timestampKey].format(timestamp);
+            }
+        },
+        timeSystemFormat() {
+            if(this.formats[this.timestampKey]) {
+                return true;
+            } else {
+                console.warn(`No formatter for ${this.timestampKey} time system for ${this.domainObject.name}.`);
+                return false;
+            }
         }
     }
 }

src/plugins/LADTable/plugin.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 import LADTableViewProvider from './LADTableViewProvider';
 import LADTableSetViewProvider from './LADTableSetViewProvider';
-import LADTableCompositionPolicy from './LADTableCompositionPolicy';
+import ladTableCompositionPolicy from './LADTableCompositionPolicy';
 
 export default function plugin() {
     return function install(openmct) {
@@ -49,6 +49,6 @@ export default function plugin() {
             }
         });
 
-        openmct.composition.addPolicy(new LADTableCompositionPolicy(openmct));
+        openmct.composition.addPolicy(ladTableCompositionPolicy(openmct));
     };
 }

src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js

@@ -24,7 +24,7 @@ import {
     setAllSearchParams
 } from 'utils/openmctLocation';
 
-const TIME_EVENTS = ['bounds', 'timeSystem', 'clock', 'clockOffsets'];
+const TIME_EVENTS = ['timeSystem', 'clock', 'clockOffsets'];
 const SEARCH_MODE = 'tc.mode';
 const SEARCH_TIME_SYSTEM = 'tc.timeSystem';
 const SEARCH_START_BOUND = 'tc.startBound';
@@ -42,6 +42,7 @@ export default class URLTimeSettingsSynchronizer {
         this.destroy = this.destroy.bind(this);
         this.updateTimeSettings = this.updateTimeSettings.bind(this);
         this.setUrlFromTimeApi = this.setUrlFromTimeApi.bind(this);
+        this.updateBounds = this.updateBounds.bind(this);
 
         openmct.on('start', this.initialize);
         openmct.on('destroy', this.destroy);
@@ -54,7 +55,7 @@ export default class URLTimeSettingsSynchronizer {
         TIME_EVENTS.forEach(event => {
             this.openmct.time.on(event, this.setUrlFromTimeApi);
         });
-
+        this.openmct.time.on('bounds', this.updateBounds);
     }
 
     destroy() {
@@ -65,6 +66,7 @@ export default class URLTimeSettingsSynchronizer {
         TIME_EVENTS.forEach(event => {
             this.openmct.time.off(event, this.setUrlFromTimeApi);
         });
+        this.openmct.time.on('bounds', this.updateBounds);
     }
 
     updateTimeSettings() {
@@ -72,7 +74,6 @@ export default class URLTimeSettingsSynchronizer {
         if (!this.isUrlUpdateInProgress) {
             let timeParameters = this.parseParametersFromUrl();
 
-
             if (this.areTimeParametersValid(timeParameters)) {
                 this.setTimeApiFromUrl(timeParameters);
             } else {
@@ -138,6 +139,12 @@ export default class URLTimeSettingsSynchronizer {
         }
     }
 
+    updateBounds(bounds, isTick) {
+        if (!isTick) {
+            this.setUrlFromTimeApi();
+        }
+    }
+
     setUrlFromTimeApi() {
         let searchParams = getAllSearchParams();
         let clock = this.openmct.time.clock();

src/plugins/condition/Condition.js

@@ -150,6 +150,7 @@ export default class Condition extends EventEmitter {
             criterion = new TelemetryCriterion(criterionConfigurationWithId, this.openmct);
         }
         criterion.on('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
+        criterion.on('telemetryIsStale', (obj) => this.handleStaleCriterion(obj));
         if (!this.criteria) {
             this.criteria = [];
         }
@@ -178,10 +179,12 @@ export default class Condition extends EventEmitter {
             const newCriterionConfiguration = this.generateCriterion(criterionConfiguration);
             let newCriterion = new TelemetryCriterion(newCriterionConfiguration, this.openmct);
             newCriterion.on('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
+            newCriterion.on('telemetryIsStale', (obj) => this.handleStaleCriterion(obj));
 
             let criterion = found.item;
             criterion.unsubscribe();
             criterion.off('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
+            criterion.off('telemetryIsStale', (obj) => this.handleStaleCriterion(obj));
             this.criteria.splice(found.index, 1, newCriterion);
             this.updateDescription();
         }
@@ -194,6 +197,9 @@ export default class Condition extends EventEmitter {
             criterion.off('criterionUpdated', (obj) => {
                 this.handleCriterionUpdated(obj);
             });
+            criterion.off('telemetryIsStale', (obj) => {
+                this.handleStaleCriterion(obj);
+            });
             criterion.destroy();
             this.criteria.splice(found.index, 1);
             this.updateDescription();
@@ -211,6 +217,18 @@ export default class Condition extends EventEmitter {
         }
     }
 
+    handleStaleCriterion(updatedCriterion) {
+        this.result = evaluateResults(this.criteria.map(criterion => criterion.result), this.trigger);
+        let latestTimestamp = {};
+        latestTimestamp = getLatestTimestamp(
+            latestTimestamp,
+            updatedCriterion.data,
+            this.timeSystems,
+            this.openmct.time.timeSystem()
+        );
+        this.conditionManager.updateCurrentCondition(latestTimestamp);
+    }
+
     updateDescription() {
         const triggerDescription = this.getTriggerDescription();
         let description = '';

src/plugins/condition/ConditionManager.js

@@ -315,6 +315,10 @@ export default class ConditionManager extends EventEmitter {
             condition.getResult(normalizedDatum);
         });
 
+        this.updateCurrentCondition(timestamp);
+    }
+
+    updateCurrentCondition(timestamp) {
         const currentCondition = this.getCurrentCondition();
 
         this.emit('conditionSetResultUpdated',

src/plugins/condition/components/ConditionDescription.vue

@@ -27,13 +27,13 @@
     >
         {{ condition.configuration.name }}
     </span>
-    <span class="c-style__condition-desc__text"
-          v-if="!condition.isDefault"
+    <span v-if="!condition.isDefault"
+          class="c-style__condition-desc__text"
     >
         {{ description }}
     </span>
-    <span class="c-style__condition-desc__text"
-          v-else
+    <span v-else
+          class="c-style__condition-desc__text"
     >
         Match if no other condition is matched
     </span>

src/plugins/condition/components/Criterion.vue

@@ -55,6 +55,7 @@
                 >
                     {{ option.name }}
                 </option>
+                <option value="dataReceived">any data received</option>
             </select>
         </span>
         <span v-if="criterion.telemetry && criterion.metadata"
@@ -83,6 +84,7 @@
                     >
                     <span v-if="inputIndex < inputCount-1">and</span>
                 </span>
+                <span v-if="criterion.metadata === 'dataReceived'">seconds</span>
             </template>
             <span v-else>
                 <span v-if="inputCount && criterion.operation"
@@ -148,7 +150,11 @@ export default {
             return (this.index !== 0 ? operator : '') + ' when';
         },
         filteredOps: function () {
-            return this.operations.filter(op => op.appliesTo.indexOf(this.operationFormat) !== -1);
+            if (this.criterion.metadata === 'dataReceived') {
+                return this.operations.filter(op => op.name === 'isStale');
+            } else {
+                return this.operations.filter(op => op.appliesTo.indexOf(this.operationFormat) !== -1);
+            }
         },
         setInputType: function () {
             let type = '';
@@ -214,6 +220,8 @@ export default {
                 } else {
                     this.operationFormat = 'number';
                 }
+            } else if (this.criterion.metadata === 'dataReceived') {
+                this.operationFormat = 'number';
             }
             this.updateInputVisibilityAndValues();
         },

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

@@ -37,12 +37,13 @@
             >
                 <style-editor class="c-inspect-styles__editor"
                               :style-item="staticStyle"
-                              :is-editing="isEditing"
+                              :is-editing="allowEditing"
                               :mixed-styles="mixedStyles"
                               @persist="updateStaticStyle"
                 />
             </div>
             <button
+                v-if="allowEditing"
                 id="addConditionSet"
                 class="c-button c-button--major c-toggle-styling-button labeled"
                 @click="addConditionSet"
@@ -63,7 +64,7 @@
             >
                 <span class="c-object-label__name">{{ conditionSetDomainObject.name }}</span>
             </a>
-            <template v-if="isEditing">
+            <template v-if="allowEditing">
                 <button
                     id="changeConditionSet"
                     class="c-button labeled"
@@ -96,7 +97,7 @@
                 />
                 <style-editor class="c-inspect-styles__editor"
                               :style-item="conditionStyle"
-                              :is-editing="isEditing"
+                              :is-editing="allowEditing"
                               @persist="updateConditionalStyle"
                 />
             </div>
@@ -137,7 +138,13 @@ export default {
             conditions: undefined,
             conditionsLoaded: false,
             navigateToPath: '',
-            selectedConditionId: ''
+            selectedConditionId: '',
+            locked: false
+        }
+    },
+    computed: {
+        allowEditing() {
+            return this.isEditing && !this.locked;
         }
     },
     destroyed() {
@@ -224,7 +231,13 @@ export default {
             this.selection.forEach((selectionItem) => {
                 const item = selectionItem[0].context.item;
                 const layoutItem = selectionItem[0].context.layoutItem;
+                const layoutDomainObject = selectionItem[0].context.item;
                 const isChildItem = selectionItem.length > 1;
+
+                if (layoutDomainObject && layoutDomainObject.locked) {
+                    this.locked = true;
+                }
+
                 if (!isChildItem) {
                     domainObject = item;
                     itemStyle = getApplicableStylesForItem(item);

src/plugins/condition/criterion/AllTelemetryCriterion.js

@@ -22,7 +22,7 @@
 
 import TelemetryCriterion from './TelemetryCriterion';
 import { evaluateResults } from "../utils/evaluator";
-import { getLatestTimestamp } from '../utils/time';
+import {getLatestTimestamp, subscribeForStaleness} from '../utils/time';
 import { getOperatorText } from "@/plugins/condition/utils/operations";
 
 export default class AllTelemetryCriterion extends TelemetryCriterion {
@@ -41,6 +41,32 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
     initialize() {
         this.telemetryObjects = { ...this.telemetryDomainObjectDefinition.telemetryObjects };
         this.telemetryDataCache = {};
+        if (this.isValid() && this.isStalenessCheck() && this.isValidInput()) {
+            this.subscribeForStaleData(this.telemetryObjects || {});
+        }
+    }
+
+    subscribeForStaleData(telemetryObjects) {
+
+        if (!this.stalenessSubscription) {
+            this.stalenessSubscription = {};
+        }
+        Object.values(telemetryObjects).forEach((telemetryObject) => {
+            const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+            if (!this.stalenessSubscription[id]) {
+                this.stalenessSubscription[id] = subscribeForStaleness((data) => {
+                    this.handleStaleTelemetry(id, data);
+                }, this.input[0]*1000);
+            }
+        })
+    }
+
+    handleStaleTelemetry(id, data) {
+        if (this.telemetryDataCache) {
+            this.telemetryDataCache[id] = true;
+            this.result = evaluateResults(Object.values(this.telemetryDataCache), this.telemetry);
+        }
+        this.emitEvent('telemetryIsStale', data);
     }
 
     isValid() {
@@ -50,6 +76,9 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
     updateTelemetryObjects(telemetryObjects) {
         this.telemetryObjects = { ...telemetryObjects };
         this.removeTelemetryDataCache();
+        if (this.isValid() && this.isStalenessCheck() && this.isValidInput()) {
+            this.subscribeForStaleData(this.telemetryObjects || {});
+        }
     }
 
     removeTelemetryDataCache() {
@@ -63,6 +92,7 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
         });
         telemetryCacheIds.forEach(id => {
             delete (this.telemetryDataCache[id]);
+            delete (this.stalenessSubscription[id]);
         });
     }
 
@@ -96,7 +126,14 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
         const validatedData = this.isValid() ? data : {};
 
         if (validatedData) {
-            this.telemetryDataCache[validatedData.id] = this.computeResult(validatedData);
+            if (this.isStalenessCheck()) {
+                if (this.stalenessSubscription[validatedData.id]) {
+                    this.stalenessSubscription[validatedData.id].update(validatedData);
+                }
+                this.telemetryDataCache[validatedData.id] = false;
+            } else {
+                this.telemetryDataCache[validatedData.id] = this.computeResult(validatedData);
+            }
         }
 
         Object.values(telemetryObjects).forEach(telemetryObject => {
@@ -162,7 +199,7 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
 
     getDescription() {
         const telemetryDescription = this.telemetry === 'all' ? 'all telemetry' : 'any telemetry';
-        let metadataValue = this.metadata;
+        let metadataValue = (this.metadata === 'dataReceived' ? '' : this.metadata);
         let inputValue = this.input;
         if (this.metadata) {
             const telemetryObjects = Object.values(this.telemetryObjects);
@@ -182,5 +219,9 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
     destroy() {
         delete this.telemetryObjects;
         delete this.telemetryDataCache;
+        if (this.stalenessSubscription) {
+            Object.values(this.stalenessSubscription).forEach((subscription) => subscription.clear);
+            delete this.stalenessSubscription;
+        }
     }
 }

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -22,6 +22,7 @@
 
 import EventEmitter from 'EventEmitter';
 import { OPERATIONS, getOperatorText } from '../utils/operations';
+import { subscribeForStaleness } from "../utils/time";
 
 export default class TelemetryCriterion extends EventEmitter {
 
@@ -43,6 +44,7 @@ export default class TelemetryCriterion extends EventEmitter {
         this.input = telemetryDomainObjectDefinition.input;
         this.metadata = telemetryDomainObjectDefinition.metadata;
         this.result = undefined;
+        this.stalenessSubscription = undefined;
 
         this.initialize();
         this.emitEvent('criterionUpdated', this);
@@ -51,14 +53,40 @@ export default class TelemetryCriterion extends EventEmitter {
     initialize() {
         this.telemetryObjectIdAsString = this.openmct.objects.makeKeyString(this.telemetryDomainObjectDefinition.telemetry);
         this.updateTelemetryObjects(this.telemetryDomainObjectDefinition.telemetryObjects);
+        if (this.isValid() && this.isStalenessCheck() && this.isValidInput()) {
+            this.subscribeForStaleData()
+        }
+    }
+
+    subscribeForStaleData() {
+        if (this.stalenessSubscription) {
+            this.stalenessSubscription.clear();
+        }
+        this.stalenessSubscription = subscribeForStaleness(this.handleStaleTelemetry.bind(this), this.input[0]*1000);
+    }
+
+    handleStaleTelemetry(data) {
+        this.result = true;
+        this.emitEvent('telemetryIsStale', data);
     }
 
     isValid() {
         return this.telemetryObject && this.metadata && this.operation;
     }
 
+    isStalenessCheck() {
+        return this.metadata && this.metadata === 'dataReceived';
+    }
+
+    isValidInput() {
+        return this.input instanceof Array && this.input.length;
+    }
+
     updateTelemetryObjects(telemetryObjects) {
         this.telemetryObject = telemetryObjects[this.telemetryObjectIdAsString];
+        if (this.isValid() && this.isStalenessCheck() && this.isValidInput()) {
+            this.subscribeForStaleData()
+        }
     }
 
     createNormalizedDatum(telemetryDatum, endpoint) {
@@ -91,7 +119,14 @@ export default class TelemetryCriterion extends EventEmitter {
 
     getResult(data) {
         const validatedData = this.isValid() ? data : {};
-        this.result = this.computeResult(validatedData);
+        if (this.isStalenessCheck()) {
+            if (this.stalenessSubscription) {
+                this.stalenessSubscription.update(validatedData);
+            }
+            this.result = false;
+        } else {
+            this.result = this.computeResult(validatedData);
+        }
     }
 
     requestLAD() {
@@ -136,7 +171,7 @@ export default class TelemetryCriterion extends EventEmitter {
             let comparator = this.findOperation(this.operation);
             let params = [];
             params.push(data[this.metadata]);
-            if (this.input instanceof Array && this.input.length) {
+            if (this.isValidInput()) {
                 this.input.forEach(input => params.push(input));
             }
             if (typeof comparator === 'function') {
@@ -191,7 +226,7 @@ export default class TelemetryCriterion extends EventEmitter {
             description = `Unknown ${this.metadata} ${getOperatorText(this.operation, this.input)}`;
         } else {
             const metadataObject = this.getMetaDataObject(this.telemetryObject, this.metadata);
-            const metadataValue = this.getMetadataValueFromMetaData(metadataObject) || this.metadata;
+            const metadataValue = this.getMetadataValueFromMetaData(metadataObject) || (this.metadata === 'dataReceived' ? '' : this.metadata);
             const inputValue = this.getInputValueFromMetaData(metadataObject, this.input) || this.input;
             description = `${this.telemetryObject.name} ${metadataValue} ${getOperatorText(this.operation, inputValue)}`;
         }
@@ -202,5 +237,8 @@ export default class TelemetryCriterion extends EventEmitter {
     destroy() {
         delete this.telemetryObject;
         delete this.telemetryObjectIdAsString;
+        if (this.stalenessSubscription) {
+            delete this.stalenessSubscription;
+        }
     }
 }

src/plugins/condition/pluginSpec.js

@@ -25,19 +25,50 @@ import ConditionPlugin from "./plugin";
 import StylesView from "./components/inspector/StylesView.vue";
 import Vue from 'vue';
 import {getApplicableStylesForItem} from "./utils/styleUtils";
+import ConditionManager from "@/plugins/condition/ConditionManager";
 
 describe('the plugin', function () {
     let conditionSetDefinition;
     let mockConditionSetDomainObject;
+    let mockListener;
     let element;
     let child;
     let openmct;
+    let testTelemetryObject;
 
     beforeAll(() => {
         resetApplicationState(openmct);
     });
 
     beforeEach((done) => {
+        testTelemetryObject = {
+            identifier:{ namespace: "", key: "test-object"},
+            type: "test-object",
+            name: "Test Object",
+            telemetry: {
+                valueMetadatas: [{
+                    key: "some-key",
+                    name: "Some attribute",
+                    hints: {
+                        range: 2
+                    }
+                },
+                {
+                    key: "utc",
+                    name: "Time",
+                    format: "utc",
+                    hints: {
+                        domain: 1
+                    }
+                }, {
+                    key: "testSource",
+                    source: "value",
+                    name: "Test",
+                    format: "string"
+                }]
+            }
+        };
+
         openmct = createOpenMct();
         openmct.install(new ConditionPlugin());
 
@@ -55,6 +86,8 @@ describe('the plugin', function () {
             type: 'conditionSet'
         };
 
+        mockListener = jasmine.createSpy('mockListener');
+
         conditionSetDefinition.initialize(mockConditionSetDomainObject);
 
         openmct.on('start', done);
@@ -356,4 +389,113 @@ describe('the plugin', function () {
         });
 
     });
+
+    describe('the condition check for staleness', () => {
+        let conditionSetDomainObject;
+
+        beforeEach(()=>{
+            conditionSetDomainObject = {
+                "configuration":{
+                    "conditionTestData":[
+                        {
+                            "telemetry":"",
+                            "metadata":"",
+                            "input":""
+                        }
+                    ],
+                    "conditionCollection":[
+                        {
+                            "id":"39584410-cbf9-499e-96dc-76f27e69885d",
+                            "configuration":{
+                                "name":"Unnamed Condition",
+                                "output":"Any stale telemetry",
+                                "trigger":"all",
+                                "criteria":[
+                                    {
+                                        "id":"35400132-63b0-425c-ac30-8197df7d5862",
+                                        "telemetry":"any",
+                                        "operation":"isStale",
+                                        "input":[
+                                            "1"
+                                        ],
+                                        "metadata":"dataReceived"
+                                    }
+                                ]
+                            },
+                            "summary":"Match if all criteria are met: Any telemetry is stale after 5 seconds"
+                        },
+                        {
+                            "isDefault":true,
+                            "id":"2532d90a-e0d6-4935-b546-3123522da2de",
+                            "configuration":{
+                                "name":"Default",
+                                "output":"Default",
+                                "trigger":"all",
+                                "criteria":[
+                                ]
+                            },
+                            "summary":""
+                        }
+                    ]
+                },
+                "composition":[
+                    {
+                        "namespace":"",
+                        "key":"test-object"
+                    }
+                ],
+                "telemetry":{
+                },
+                "name":"Condition Set",
+                "type":"conditionSet",
+                "identifier":{
+                    "namespace":"",
+                    "key":"cf4456a9-296a-4e6b-b182-62ed29cd15b9"
+                }
+
+            };
+        });
+
+        it('should evaluate as stale when telemetry is not received in the allotted time', (done) => {
+
+            let conditionMgr = new ConditionManager(conditionSetDomainObject, openmct);
+            conditionMgr.on('conditionSetResultUpdated', mockListener);
+            conditionMgr.telemetryObjects = {
+                "test-object": testTelemetryObject
+            };
+            conditionMgr.updateConditionTelemetryObjects();
+            setTimeout(() => {
+                expect(mockListener).toHaveBeenCalledWith({
+                    output: 'Any stale telemetry',
+                    id: { namespace: '', key: 'cf4456a9-296a-4e6b-b182-62ed29cd15b9' },
+                    conditionId: '39584410-cbf9-499e-96dc-76f27e69885d',
+                    utc: undefined
+                });
+                done();
+            }, 1500);
+        });
+
+        it('should not evaluate as stale when telemetry is received in the allotted time', (done) => {
+            const date = Date.now();
+            conditionSetDomainObject.configuration.conditionCollection[0].configuration.criteria[0].input = ["2"];
+            let conditionMgr = new ConditionManager(conditionSetDomainObject, openmct);
+            conditionMgr.on('conditionSetResultUpdated', mockListener);
+            conditionMgr.telemetryObjects = {
+                "test-object": testTelemetryObject
+            };
+            conditionMgr.updateConditionTelemetryObjects();
+            conditionMgr.telemetryReceived(testTelemetryObject, {
+                utc: date
+            });
+            setTimeout(() => {
+                expect(mockListener).toHaveBeenCalledWith({
+                    output: 'Default',
+                    id: { namespace: '', key: 'cf4456a9-296a-4e6b-b182-62ed29cd15b9' },
+                    conditionId: '2532d90a-e0d6-4935-b546-3123522da2de',
+                    utc: undefined
+                });
+                done();
+            }, 1500);
+        });
+    });
 });

src/plugins/condition/utils/operations.js

@@ -283,6 +283,18 @@ export const OPERATIONS = [
         getDescription: function (values) {
             return ' is not one of ' + values[0];
         }
+    },
+    {
+        name: 'isStale',
+        operation: function () {
+            return false;
+        },
+        text: 'is older than',
+        appliesTo: ["number"],
+        inputCount: 1,
+        getDescription: function (values) {
+            return ` is older than ${values[0] || ''} seconds`;
+        }
     }
 ];
 

src/plugins/condition/utils/time.js

@@ -50,3 +50,26 @@ function updateLatestTimeStamp(timestamp, timeSystems) {
 
     return latest;
 }
+
+export const subscribeForStaleness = (callback, timeout) => {
+    let stalenessTimer = setTimeout(() => {
+        clearTimeout(stalenessTimer);
+        callback();
+    }, timeout);
+    return {
+        update: (data) => {
+            if (stalenessTimer) {
+                clearTimeout(stalenessTimer);
+            }
+            stalenessTimer = setTimeout(() => {
+                clearTimeout(stalenessTimer);
+                callback(data);
+            }, timeout);
+        },
+        clear: () => {
+            if (stalenessTimer) {
+                clearTimeout(stalenessTimer);
+            }
+        }
+    }
+};

src/plugins/condition/utils/timeSpec.js

@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { subscribeForStaleness } from "./time";
+
+describe('time related utils', () => {
+    let subscription;
+    let mockListener;
+
+    beforeEach(() => {
+        mockListener = jasmine.createSpy('listener');
+        subscription = subscribeForStaleness(mockListener, 100);
+    });
+
+    describe('subscribe for staleness', () => {
+        it('should call listeners when stale', (done) => {
+            setTimeout(() => {
+                expect(mockListener).toHaveBeenCalled();
+                done();
+            }, 200);
+        });
+
+        it('should update the subscription', (done) => {
+            function updated() {
+                setTimeout(() => {
+                    expect(mockListener).not.toHaveBeenCalled();
+                    done();
+                }, 50);
+            }
+            setTimeout(() => {
+                subscription.update();
+                updated();
+            }, 50);
+        });
+
+        it('should clear the subscription', (done) => {
+            subscription.clear();
+
+            setTimeout(() => {
+                expect(mockListener).not.toHaveBeenCalled();
+                done();
+            }, 200);
+        });
+    });
+
+});

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -73,7 +73,7 @@ define(['lodash'], function (_) {
                             ]
                         }
                     },
-                    viewTypes = {
+                    VIEW_TYPES = {
                         'telemetry-view': {
                             value: 'telemetry-view',
                             name: 'Alphanumeric',
@@ -95,28 +95,34 @@ define(['lodash'], function (_) {
                             class: 'icon-tabular-realtime'
                         }
                     },
-                    applicableViews = {
+                    APPLICABLE_VIEWS = {
                         'telemetry-view': [
-                            viewTypes['telemetry.plot.overlay'],
-                            viewTypes.table
+                            VIEW_TYPES['telemetry.plot.overlay'],
+                            VIEW_TYPES['telemetry.plot.stacked'],
+                            VIEW_TYPES.table
                         ],
                         'telemetry.plot.overlay': [
-                            viewTypes['telemetry.plot.stacked'],
-                            viewTypes.table,
-                            viewTypes['telemetry-view']
+                            VIEW_TYPES['telemetry.plot.stacked'],
+                            VIEW_TYPES.table,
+                            VIEW_TYPES['telemetry-view']
+                        ],
+                        'telemetry.plot.stacked': [
+                            VIEW_TYPES['telemetry.plot.overlay'],
+                            VIEW_TYPES.table,
+                            VIEW_TYPES['telemetry-view']
                         ],
                         'table': [
-                            viewTypes['telemetry.plot.overlay'],
-                            viewTypes['telemetry.plot.stacked'],
-                            viewTypes['telemetry-view']
+                            VIEW_TYPES['telemetry.plot.overlay'],
+                            VIEW_TYPES['telemetry.plot.stacked'],
+                            VIEW_TYPES['telemetry-view']
                         ],
                         'telemetry-view-multi': [
-                            viewTypes['telemetry.plot.overlay'],
-                            viewTypes['telemetry.plot.stacked'],
-                            viewTypes.table
+                            VIEW_TYPES['telemetry.plot.overlay'],
+                            VIEW_TYPES['telemetry.plot.stacked'],
+                            VIEW_TYPES.table
                         ],
                         'telemetry.plot.overlay-multi': [
-                            viewTypes['telemetry.plot.stacked']
+                            VIEW_TYPES['telemetry.plot.stacked']
                         ]
                     };
 
@@ -510,7 +516,7 @@ define(['lodash'], function (_) {
                             selectedItemType = 'telemetry-view';
                         }
 
-                        let viewOptions = applicableViews[selectedItemType];
+                        let viewOptions = APPLICABLE_VIEWS[selectedItemType];
 
                         if (viewOptions) {
                             return {
@@ -533,7 +539,7 @@ define(['lodash'], function (_) {
                                 domainObject: selectedParent,
                                 icon: "icon-object",
                                 title: "Merge into a telemetry table or plot",
-                                options: applicableViews['telemetry-view-multi'],
+                                options: APPLICABLE_VIEWS['telemetry-view-multi'],
                                 method: function (option) {
                                     displayLayoutContext.mergeMultipleTelemetryViews(selection, option.value);
                                 }
@@ -546,7 +552,7 @@ define(['lodash'], function (_) {
                                 domainObject: selectedParent,
                                 icon: "icon-object",
                                 title: "Merge into a stacked plot",
-                                options: applicableViews['telemetry.plot.overlay-multi'],
+                                options: APPLICABLE_VIEWS['telemetry.plot.overlay-multi'],
                                 method: function (option) {
                                     displayLayoutContext.mergeMultipleOverlayPlots(selection, option.value);
                                 }
@@ -590,7 +596,7 @@ define(['lodash'], function (_) {
                     let selectedParent = selectionPath[1].context.item;
                     let layoutItem = selectionPath[0].context.layoutItem;
 
-                    if (!layoutItem) {
+                    if (!layoutItem || selectedParent.locked) {
                         return;
                     }
 

src/plugins/displayLayout/components/BoxView.vue

@@ -24,6 +24,7 @@
 <layout-frame
     :item="item"
     :grid-size="gridSize"
+    :is-editing="isEditing"
     @move="(gridDelta) => $emit('move', gridDelta)"
     @endMove="() => $emit('endMove')"
 >
@@ -70,7 +71,11 @@ export default {
             type: Number,
             required: true
         },
-        initSelect: Boolean
+        initSelect: Boolean,
+        isEditing: {
+            type: Boolean,
+            required: true
+        }
     },
     computed: {
         style() {

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -24,14 +24,18 @@
 <div
     class="l-layout"
     :class="{
-        'is-multi-selected': selectedLayoutItems.length > 1
+        'is-multi-selected': selectedLayoutItems.length > 1,
+        'allow-editing': isEditing
     }"
     @dragover="handleDragOver"
     @click.capture="bypassSelection"
     @drop="handleDrop"
 >
     <!-- Background grid -->
-    <div class="l-layout__grid-holder c-grid">
+    <div
+        v-if="isEditing"
+        class="l-layout__grid-holder c-grid"
+    >
         <div
             v-if="gridSize[0] >= 3"
             class="c-grid__x l-grid l-grid-x"
@@ -53,6 +57,7 @@
         :init-select="initSelectIndex === index"
         :index="index"
         :multi-select="selectedLayoutItems.length > 1"
+        :is-editing="isEditing"
         @move="move"
         @endMove="endMove"
         @endLineResize="endLineResize"
@@ -78,6 +83,30 @@ import ImageView from './ImageView.vue'
 import EditMarquee from './EditMarquee.vue'
 import _ from 'lodash'
 
+const TELEMETRY_IDENTIFIER_FUNCTIONS = {
+    'table': (domainObject) => {
+        return Promise.resolve(domainObject.composition);
+    },
+    'telemetry.plot.overlay': (domainObject) => {
+        return Promise.resolve(domainObject.composition);
+    },
+    'telemetry.plot.stacked': (domainObject, openmct) => {
+        let composition = openmct.composition.get(domainObject);
+
+        return composition.load().then((objects) => {
+            let identifiers = [];
+            objects.forEach(object => {
+                if (object.type === 'telemetry.plot.overlay') {
+                    identifiers.push(...object.composition);
+                } else {
+                    identifiers.push(object.identifier);
+                }
+            });
+            return Promise.resolve(identifiers);
+        });
+    }
+}
+
 const ITEM_TYPE_VIEW_MAP = {
     'subobject-view': SubobjectView,
     'telemetry-view': TelemetryView,
@@ -114,6 +143,10 @@ export default {
         domainObject: {
             type: Object,
             required: true
+        },
+        isEditing: {
+            type: Boolean,
+            required: true
         }
     },
     data() {
@@ -140,7 +173,7 @@ export default {
             let selectionPath = this.selection[0];
             let singleSelectedLine = this.selection.length === 1 &&
                     selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.type === 'line-view';
-            return selectionPath && selectionPath.length > 1 && !singleSelectedLine;
+            return this.isEditing && selectionPath && selectionPath.length > 1 && !singleSelectedLine;
         }
     },
     inject: ['openmct', 'options', 'objectPath'],
@@ -328,6 +361,9 @@ export default {
                 .some(childId => this.openmct.objects.areIdsEqual(childId, identifier));
         },
         handleDragOver($event) {
+            if (this.internalDomainObject.locked) {
+                return;
+            }
             // Get the ID of the dragged object
             let draggedKeyString = $event.dataTransfer.types
                 .filter(type => type.startsWith(DRAG_OBJECT_TRANSFER_PREFIX))
@@ -549,7 +585,7 @@ export default {
             object.identifier = identifier;
             object.location = parentKeyString;
 
-            this.openmct.objects.mutate(object, 'persisted', Date.now());
+            this.openmct.objects.mutate(object, 'created', Date.now());
 
             return object;
         },
@@ -671,31 +707,42 @@ export default {
             this.removeItem(selection);
             this.initSelectIndex = this.layoutItems.length - 1;
         },
+        getTelemetryIdentifiers(domainObject) {
+            let method = TELEMETRY_IDENTIFIER_FUNCTIONS[domainObject.type];
+
+            if (method) {
+                return method(domainObject, this.openmct);
+            } else {
+                throw 'No method identified for domainObject type';
+            }
+        },
         switchViewType(context, viewType, selection) {
             let domainObject = context.item,
                 layoutItem = context.layoutItem,
                 position = [layoutItem.x, layoutItem.y],
-                newDomainObject,
                 layoutType = 'subobject-view';
 
             if (layoutItem.type === 'telemetry-view') {
-                newDomainObject = this.createNewDomainObject(domainObject, [domainObject.identifier], viewType);
-            } else {
-                if (viewType !== 'telemetry-view') {
-                    newDomainObject = this.createNewDomainObject(domainObject, domainObject.composition, viewType);
-                } else {
-                    domainObject.composition.forEach((identifier , index) => {
-                        let positionX = position[0] + (index * DUPLICATE_OFFSET),
-                            positionY = position[1] + (index * DUPLICATE_OFFSET);
+                let newDomainObject = this.createNewDomainObject(domainObject, [domainObject.identifier], viewType);
 
-                        this.convertToTelemetryView(identifier, [positionX, positionY]);
-                    });
-                }
-            }
-
-            if (newDomainObject) {
                 this.composition.add(newDomainObject);
                 this.addItem(layoutType, newDomainObject, position);
+            } else {
+                this.getTelemetryIdentifiers(domainObject).then((identifiers) => {
+                    if (viewType === 'telemetry-view') {
+                        identifiers.forEach((identifier, index) => {
+                            let positionX = position[0] + (index * DUPLICATE_OFFSET),
+                                positionY = position[1] + (index * DUPLICATE_OFFSET);
+
+                            this.convertToTelemetryView(identifier, [positionX, positionY]);
+                        });
+                    } else {
+                        let newDomainObject = this.createNewDomainObject(domainObject, identifiers, viewType);
+
+                        this.composition.add(newDomainObject);
+                        this.addItem(layoutType, newDomainObject, position);
+                    }
+                });
             }
 
             this.removeItem(selection);

src/plugins/displayLayout/components/ImageView.vue

@@ -24,6 +24,7 @@
 <layout-frame
     :item="item"
     :grid-size="gridSize"
+    :is-editing="isEditing"
     @move="(gridDelta) => $emit('move', gridDelta)"
     @endMove="() => $emit('endMove')"
 >
@@ -70,7 +71,11 @@ export default {
             type: Number,
             required: true
         },
-        initSelect: Boolean
+        initSelect: Boolean,
+        isEditing: {
+            type: Boolean,
+            required: true
+        }
     },
     computed: {
         style() {

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -33,7 +33,7 @@
 
     <div
         class="c-frame-edit__move"
-        @mousedown="startMove([1,1], [0,0], $event)"
+        @mousedown="isEditing ? startMove([1,1], [0,0], $event) : null"
     ></div>
 </div>
 </template>
@@ -54,6 +54,10 @@ export default {
             required: true,
             validator: (arr) => arr && arr.length === 2
                 && arr.every(el => typeof el === 'number')
+        },
+        isEditing: {
+            type: Boolean,
+            required: true
         }
     },
     computed: {

src/plugins/displayLayout/components/SubobjectView.vue

@@ -24,6 +24,7 @@
     :item="item"
     :grid-size="gridSize"
     :title="domainObject && domainObject.name"
+    :is-editing="isEditing"
     @move="(gridDelta) => $emit('move', gridDelta)"
     @endMove="() => $emit('endMove')"
 >
@@ -95,6 +96,10 @@ export default {
         index: {
             type: Number,
             required: true
+        },
+        isEditing: {
+            type: Boolean,
+            required: true
         }
     },
     data() {

src/plugins/displayLayout/components/TelemetryView.vue

@@ -24,6 +24,7 @@
 <layout-frame
     :item="item"
     :grid-size="gridSize"
+    :is-editing="isEditing"
     @move="(gridDelta) => $emit('move', gridDelta)"
     @endMove="() => $emit('endMove')"
 >
@@ -105,6 +106,10 @@ export default {
         index: {
             type: Number,
             required: true
+        },
+        isEditing: {
+            type: Boolean,
+            required: true
         }
     },
     data() {

src/plugins/displayLayout/components/TextView.vue

@@ -24,6 +24,7 @@
 <layout-frame
     :item="item"
     :grid-size="gridSize"
+    :is-editing="isEditing"
     @move="(gridDelta) => $emit('move', gridDelta)"
     @endMove="() => $emit('endMove')"
 >
@@ -75,7 +76,11 @@ export default {
             type: Number,
             required: true
         },
-        initSelect: Boolean
+        initSelect: Boolean,
+        isEditing: {
+            type: Boolean,
+            required: true
+        }
     },
     computed: {
         style() {

src/plugins/displayLayout/components/display-layout.scss

@@ -45,8 +45,7 @@
         &[s-selected],
         &[s-selected-parent] {
             // Display grid and allow edit marquee to display in nested layouts when editing
-            > * > * > .l-layout {
-                background: $editUIGridColorBg;
+            > * > * > .l-layout + .allow-editing {
                 box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
 
                 > [class*='grid-holder'] {

src/plugins/displayLayout/plugin.js

@@ -54,10 +54,11 @@ export default function DisplayLayoutPlugin(options) {
                             },
                             data() {
                                 return {
-                                    domainObject: domainObject
+                                    domainObject: domainObject,
+                                    isEditing: openmct.editor.isEditing()
                                 };
                             },
-                            template: '<layout ref="displayLayout" :domain-object="domainObject"></layout>'
+                            template: '<layout ref="displayLayout" :domain-object="domainObject" :is-editing="isEditing"></layout>'
                         });
                     },
                     getSelectionContext() {
@@ -73,6 +74,9 @@ export default function DisplayLayoutPlugin(options) {
                             mergeMultipleOverlayPlots: component && component.$refs.displayLayout.mergeMultipleOverlayPlots
                         };
                     },
+                    onEditModeChange: function (isEditing) {
+                        component.isEditing = isEditing;
+                    },
                     destroy() {
                         component.$destroy();
                     }

src/plugins/flexibleLayout/components/container.vue

@@ -53,6 +53,7 @@
                 :index="i"
                 :container-index="index"
                 :is-editing="isEditing"
+                :object-path="objectPath"
             />
 
             <drop-hint
@@ -105,6 +106,14 @@ export default {
         isEditing: {
             type: Boolean,
             default: false
+        },
+        locked: {
+            type: Boolean,
+            default: false
+        },
+        objectPath: {
+            type: Array,
+            required: true
         }
     },
     computed: {
@@ -130,6 +139,10 @@ export default {
     },
     methods: {
         allowDrop(event, index) {
+            if (this.locked) {
+                return false;
+            }
+
             if (event.dataTransfer.types.includes('openmct/domain-object-path')) {
                 return true;
             }

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -57,6 +57,8 @@
                 :container="container"
                 :rows-layout="rowsLayout"
                 :is-editing="isEditing"
+                :locked="domainObject.locked"
+                :object-path="objectPath"
                 @move-frame="moveFrame"
                 @new-frame="setFrameLocation"
                 @persist="persist"
@@ -136,7 +138,7 @@ function sizeToFill(items) {
 }
 
 export default {
-    inject: ['openmct', 'layoutObject'],
+    inject: ['openmct', 'objectPath', 'layoutObject'],
     components: {
         ContainerComponent,
         ResizeHandle,

src/plugins/flexibleLayout/components/frame.vue

@@ -37,7 +37,7 @@
             v-if="domainObject"
             ref="objectFrame"
             :domain-object="domainObject"
-            :object-path="objectPath"
+            :object-path="currentObjectPath"
             :has-frame="hasFrame"
             :show-edit-view="false"
         />
@@ -77,12 +77,16 @@ export default {
         isEditing: {
             type: Boolean,
             default: false
+        },
+        objectPath: {
+            type: Array,
+            required: true
         }
     },
     data() {
         return {
             domainObject: undefined,
-            objectPath: undefined
+            currentObjectPath: undefined
         }
     },
     computed: {
@@ -107,7 +111,7 @@ export default {
     methods: {
         setDomainObject(object) {
             this.domainObject = object;
-            this.objectPath = [object];
+            this.currentObjectPath = [object].concat(this.objectPath);
             this.setSelection();
         },
         setSelection() {

src/plugins/flexibleLayout/flexibleLayoutViewProvider.js

@@ -38,7 +38,7 @@ define([
             canEdit: function (domainObject) {
                 return domainObject.type === 'flexible-layout';
             },
-            view: function (domainObject) {
+            view: function (domainObject, objectPath) {
                 let component;
 
                 return {
@@ -46,6 +46,7 @@ define([
                         component =  new Vue({
                             provide: {
                                 openmct,
+                                objectPath,
                                 layoutObject: domainObject
                             },
                             el: element,

src/plugins/flexibleLayout/toolbarProvider.js

@@ -70,6 +70,10 @@ function ToolbarProvider(openmct) {
             }
 
             if (primary.context.type === 'frame') {
+                if (secondary.context.item.locked) {
+                    return [];
+                }
+
                 let frameId = primary.context.frameId;
                 let layoutObject = tertiary.context.item;
                 let containers = layoutObject
@@ -143,6 +147,9 @@ function ToolbarProvider(openmct) {
                 toggleContainer.domainObject = secondary.context.item;
 
             } else if (primary.context.type === 'container') {
+                if (primary.context.item.locked) {
+                    return [];
+                }
 
                 deleteContainer = {
                     control: "button",
@@ -187,6 +194,9 @@ function ToolbarProvider(openmct) {
                 };
 
             } else if (primary.context.type === 'flexible-layout') {
+                if (primary.context.item.locked) {
+                    return [];
+                }
 
                 addContainer = {
                     control: "button",

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -24,16 +24,17 @@
         </div>
         <div class="main-image s-image-main c-imagery__main-image"
              :class="{'paused unnsynced': paused(),'stale':false }"
-             :style="{'background-image': `url(${getImageUrl()})`,
+             :style="{'background-image': getImageUrl() ? `url(${getImageUrl()})` : 'none',
                       'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`}"
         >
         </div>
         <div class="c-imagery__control-bar">
             <div class="c-imagery__timestamp">{{ getTime() }}</div>
             <div class="h-local-controls flex-elem">
-                <a class="c-button icon-pause pause-play"
-                   :class="{'is-paused': paused()}"
-                   @click="paused(!paused())"
+                <a
+                    class="c-button icon-pause pause-play"
+                    :class="{'is-paused': paused()}"
+                    @click="paused(!paused())"
                 ></a>
             </div>
         </div>
@@ -185,6 +186,10 @@ export default {
         setSelectedImage(image) {
             // If we are paused and the current image IS selected, unpause
             // Otherwise, set current image and pause
+            if (!image) {
+                return;
+            }
+
             if (this.isPaused && image.selected) {
                 this.paused(false);
                 this.unselectAllImages();
@@ -197,7 +202,7 @@ export default {
             }
         },
         boundsChange(bounds, isTick) {
-            if(!isTick) {
+            if (!isTick) {
                 this.requestHistory();
             }
         },

src/plugins/localTimeSystem/LocalTimeSystem.js

@@ -41,7 +41,7 @@ define([], function () {
         this.timeFormat = 'local-format';
         this.durationFormat = 'duration';
 
-        this.isUTCBased = false;
+        this.isUTCBased = true;
     }
 
     return LocalTimeSystem;

src/plugins/newFolderAction/newFolderAction.js

@@ -0,0 +1,80 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import uuid from 'uuid';
+
+export default class NewFolderAction {
+    constructor(openmct) {
+        this.name = 'New Folder';
+        this.key = 'newFolder';
+        this.description = 'Create a new folder';
+        this.cssClass = 'icon-folder';
+
+        this._openmct = openmct;
+        this._dialogForm = {
+            name: "New Folder Name",
+            sections: [
+                {
+                    rows: [
+                        {
+                            key: "name",
+                            control: "textfield",
+                            name: "Folder Name",
+                            required: false
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+    invoke(objectPath) {
+        let domainObject = objectPath[0],
+            parentKeystring = this._openmct.objects.makeKeyString(domainObject.identifier),
+            composition = this._openmct.composition.get(domainObject),
+            dialogService = this._openmct.$injector.get('dialogService'),
+            folderType = this._openmct.types.get('folder');
+
+        dialogService.getUserInput(this._dialogForm, {}).then((userInput) => {
+            let name = userInput.name,
+                identifier = {
+                    key: uuid(),
+                    namespace: domainObject.identifier.namespace
+                },
+                objectModel = {
+                    identifier,
+                    type: 'folder',
+                    location: parentKeystring
+                };
+
+            folderType.definition.initialize(objectModel);
+            objectModel.name = name || 'New Folder';
+
+            this._openmct.objects.mutate(objectModel, 'created', Date.now());
+            composition.add(objectModel);
+        });
+    }
+    appliesTo(objectPath) {
+        let domainObject = objectPath[0];
+
+        return domainObject.type === 'folder';
+    }
+}

src/plugins/newFolderAction/plugin.js

@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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 NewFolderAction from './newFolderAction';
+
+export default function () {
+    return function (openmct) {
+        openmct.contextMenu.registerAction(new NewFolderAction(openmct));
+    };
+}

src/plugins/newFolderAction/pluginSpec.js

@@ -0,0 +1,99 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import {
+    createOpenMct,
+    resetApplicationState
+} from 'utils/testing';
+
+describe("the plugin", () => {
+    let openmct,
+        compositionAPI,
+        newFolderAction,
+        mockObjectPath,
+        mockDialogService,
+        mockComposition,
+        mockPromise,
+        newFolderName = 'New Folder';
+
+    beforeEach((done) => {
+        openmct = createOpenMct();
+
+        openmct.on('start', done);
+        openmct.startHeadless();
+
+        newFolderAction = openmct.contextMenu._allActions.filter(action => {
+            return action.key === 'newFolder';
+        })[0];
+    });
+
+    afterEach(() => {
+        resetApplicationState(openmct);
+    });
+
+    it('installs the new folder action', () => {
+        expect(newFolderAction).toBeDefined();
+    });
+
+    describe('when invoked', () => {
+
+        beforeEach((done) => {
+            compositionAPI = openmct.composition;
+            mockObjectPath = [{
+                name: 'mock folder',
+                type: 'folder',
+                identifier: {
+                    key: 'mock-folder',
+                    namespace: ''
+                }
+            }];
+            mockPromise = {
+                then: (callback) => {
+                    callback({name: newFolderName});
+                    done();
+                }
+            };
+
+            mockDialogService = jasmine.createSpyObj('dialogService', ['getUserInput']);
+            mockComposition = jasmine.createSpyObj('composition', ['add']);
+
+            mockDialogService.getUserInput.and.returnValue(mockPromise);
+
+            spyOn(openmct.$injector, 'get').and.returnValue(mockDialogService);
+            spyOn(compositionAPI, 'get').and.returnValue(mockComposition);
+            spyOn(openmct.objects, 'mutate');
+
+            newFolderAction.invoke(mockObjectPath);
+        });
+
+        it('gets user input for folder name', () => {
+            expect(mockDialogService.getUserInput).toHaveBeenCalled();
+        });
+
+        it('creates a new folder object', () => {
+            expect(openmct.objects.mutate).toHaveBeenCalled();
+        });
+
+        it('adds new folder object to parent composition', () => {
+            expect(mockComposition.add).toHaveBeenCalled();
+        });
+    });
+});

src/plugins/notebook/components/notebook-embed.vue

@@ -60,6 +60,7 @@ export default {
     },
     mounted() {
         this.addPopupMenuItems();
+        this.exportImageService = this.openmct.$injector.get('exportImageService');
     },
     methods: {
         addPopupMenuItems() {
@@ -205,7 +206,7 @@ export default {
         },
         openSnapshot() {
             const self = this;
-            const snapshot = new Vue({
+            this.snapshot = new Vue({
                 data: () => {
                     return {
                         embed: self.embed
@@ -213,14 +214,15 @@ export default {
                 },
                 methods: {
                     formatTime: self.formatTime,
-                    annotateSnapshot: self.annotateSnapshot
+                    annotateSnapshot: self.annotateSnapshot,
+                    exportImage: self.exportImage
                 },
                 template: SnapshotTemplate
             });
 
             const snapshotOverlay = this.openmct.overlays.overlay({
-                element: snapshot.$mount().$el,
-                onDestroy: () => { snapshot.$destroy(true) },
+                element: this.snapshot.$mount().$el,
+                onDestroy: () => { this.snapshot.$destroy(true) },
                 size: 'large',
                 dismissable: true,
                 buttons: [
@@ -234,6 +236,15 @@ export default {
                 ]
             });
         },
+        exportImage(type) {
+            let element = this.snapshot.$refs['snapshot-image'];
+
+            if (type === 'png') {
+                this.exportImageService.exportPNG(element, this.embed.name);
+            } else {
+                this.exportImageService.exportJPG(element, this.embed.name);
+            }
+        },
         previewEmbed() {
             const self = this;
             const previewAction = new PreviewAction(self.openmct);

src/plugins/notebook/components/snapshot-template.html

@@ -15,14 +15,32 @@
             <div class="l-browse-bar__snapshot-datetime">
                 SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
             </div>
+            <span class="c-button-set c-button-set--strip-h">
+                <button 
+                    class="c-button icon-download"
+                    title="Export This View's Data as PNG"
+                    @click="exportImage('png')"
+                >
+                    <span class="c-button__label">PNG</span>
+                </button>
+                <button 
+                    class="c-button"
+                    title="Export This View's Data as JPG"
+                    @click="exportImage('jpg')"
+                >
+                    <span class="c-button__label">JPG</span>
+                </button>
+            </span>
             <a class="l-browse-bar__annotate-button c-button icon-pencil" title="Annotate" @click="annotateSnapshot">
                 <span class="title-label">Annotate</span>
             </a>
         </div>
     </div>
 
-    <div class="c-notebook-snapshot__image"
-         :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }"
+    <div
+        ref="snapshot-image"
+        class="c-notebook-snapshot__image"
+        :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }"
     >
     </div>
 </div>

src/plugins/plot/res/templates/plot-options.html

@@ -19,12 +19,12 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div ng-if="domainObject.getCapability('editor').inEditContext()">
+<div ng-if="!domainObject.model.locked && domainObject.getCapability('editor').inEditContext()">
     <mct-representation key="'plot-options-edit'"
         mct-object="domainObject">
     </mct-representation>
 </div>
-<div ng-if="!domainObject.getCapability('editor').inEditContext()">
+<div ng-if="domainObject.model.locked || !domainObject.getCapability('editor').inEditContext()">
     <mct-representation key="'plot-options-browse'"
         mct-object="domainObject">
     </mct-representation>

src/plugins/plot/src/chart/MCTChartController.js

@@ -30,8 +30,7 @@ define([
     './MCTChartPointSet',
     './MCTChartAlarmPointSet',
     '../draw/DrawLoader',
-    '../lib/eventHelpers',
-    'lodash'
+    '../lib/eventHelpers'
 ],
 function (
     MCTChartLineLinear,
@@ -39,8 +38,7 @@ function (
     MCTChartPointSet,
     MCTChartAlarmPointSet,
     DrawLoader,
-    eventHelpers,
-    _
+    eventHelpers
 ) {
 
     var MARKER_SIZE = 6.0,

src/plugins/plot/src/configuration/Collection.js

@@ -22,13 +22,11 @@
 /*global define*/
 
 define([
-    'lodash',
     'EventEmitter',
     './Model',
     '../lib/extend',
     '../lib/eventHelpers'
 ], function (
-    _,
     EventEmitter,
     Model,
     extend,

src/plugins/plot/src/draw/Draw2D.js

@@ -22,11 +22,9 @@
 
 
 define([
-    'lodash',
     'EventEmitter',
     '../lib/eventHelpers'
 ], function (
-    _,
     EventEmitter,
     eventHelpers
 ) {

src/plugins/plot/src/draw/DrawWebGL.js

@@ -22,11 +22,9 @@
 
 
 define([
-    'lodash',
     'EventEmitter',
     '../lib/eventHelpers'
 ], function (
-    _,
     EventEmitter,
     eventHelpers
 ) {

src/plugins/plot/src/inspector/PlotOptionsController.js

@@ -23,13 +23,11 @@
 define([
     '../configuration/configStore',
     '../lib/eventHelpers',
-    'objectUtils',
-    'lodash'
+    'objectUtils'
 ], function (
     configStore,
     eventHelpers,
-    objectUtils,
-    _
+    objectUtils
 ) {
 
     function PlotOptionsController($scope, openmct, $timeout) {

src/plugins/plot/src/inspector/PlotYAxisFormController.js

@@ -21,11 +21,9 @@
  *****************************************************************************/
 
 define([
-    './PlotModelFormController',
-    'lodash'
+    './PlotModelFormController'
 ], function (
-    PlotModelFormController,
-    _
+    PlotModelFormController
 ) {
 
     var PlotYAxisFormController = PlotModelFormController.extend({

src/plugins/plot/src/telemetry/StackedPlotController.js

@@ -20,12 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'lodash'
-], function (
-    _
-) {
-
+define([], function () {
     function StackedPlotController($scope, openmct, objectService, $element, exportImageService) {
         var tickWidth = 0,
             composition,
@@ -125,12 +120,13 @@ define([
         $scope.$watch('domainObject.getModel().composition', onCompositionChange);
 
         $scope.$on('plot:tickWidth', function ($e, width) {
-            var plotId = $e.targetScope.domainObject.getId();
+            const plotId = $e.targetScope.domainObject.getId();
             if (!tickWidthMap.hasOwnProperty(plotId)) {
                 return;
             }
+
             tickWidthMap[plotId] = Math.max(width, tickWidthMap[plotId]);
-            var newTickWidth = _.max(tickWidthMap);
+            const newTickWidth = Math.max(...Object.values(tickWidthMap));
             if (newTickWidth !== tickWidth || width !== tickWidth) {
                 tickWidth = newTickWidth;
                 $scope.$broadcast('plot:tickWidth', tickWidth);

src/plugins/plotlyPlot/PlotlyViewProvider.js

@@ -0,0 +1,72 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, 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 PlotlyViewLayout from './components/PlotlyViewLayout.vue';
+import Vue from 'vue';
+
+export default function PlotlyViewProvider(openmct) {
+    return {
+        key: 'plotlyPlot',
+        name: 'Plotly Plot',
+        cssClass: 'icon-plot-overlay',
+        canView: function (domainObject) {
+            return domainObject.type === 'plotlyPlot';
+        },
+        canEdit: function (domainObject) {
+            return domainObject.type === 'plotlyPlot';
+        },
+        view: function (domainObject) {
+            let component;
+
+            return {
+                show: function (element, isEditing) {
+                    component =  new Vue({
+                        provide: {
+                            openmct,
+                            domainObject
+                        },
+                        el: element,
+                        components: {
+                            PlotlyViewLayout
+                        },
+                        data() {
+                            return {
+                                isEditing
+                            }
+                        },
+                        template: '<plotly-view-layout :isEditing="isEditing"></plotly-view-layout>'
+                    });
+                },
+                onEditModeChange: function (isEditing) {
+                    component.isEditing = isEditing;
+                },
+                destroy: function (element) {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}

src/plugins/plotlyPlot/components/PlotlyViewLayout.vue

@@ -0,0 +1,317 @@
+<template>
+<div :id="plotId"
+     class="l-view-section">
+</div>
+</template>
+
+<script>
+// import Plotly from 'plotly.js-gl2d-dist-min';
+import Plotly from 'plotly.js-basic-dist-min';
+import BoundedTableRowCollection from '../../telemetryTable/collections/BoundedTableRowCollection';
+import TelemetryTableRow from '../../telemetryTable/TelemetryTableRow';
+import TelemetryTableColumn from '../../telemetryTable/TelemetryTableColumn';
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    data: function () {
+        return {
+            bounds: this.openmct.time.bounds(),
+            plotData: {},
+            outstandingRequests: 0,
+            subscriptions: {},
+            plotComposition: undefined,
+            timestampKey: this.openmct.time.timeSystem().key,
+            yAxisLabel: '',
+            plotId: this.openmct.objects.makeKeyString(this.domainObject.identifier)
+        }
+    },
+    computed: {
+        getContainerHeight: function () {
+            return this.plotElement.parentNode.offsetHeight - 5;
+        },
+        getContainerWidth: function () {
+            return this.plotElement.parentNode.offsetWidth - 5;
+        }
+    },
+    mounted() {
+        this.plotElement = document.getElementById(this.plotId);
+        this.openmct.time.on('bounds', this.updateDomain);
+        this.openmct.time.on('bounds', this.updateData);
+
+        this.loadComposition();
+        this.createPlot();
+
+        this.boundedRows = {};
+        this.limitEvaluators = {};
+        this.columnMaps = {};
+        this.drawBuffers = {};
+        this.telemetryObjects = [];
+        this.subscriptions = {};
+        this.boundedRowsUnlisteners = {};
+        this.traceIndices = {};
+    },
+
+    destroyed() {
+        Object.values(this.subscriptions)
+            .forEach(subscription => subscription());
+
+        this.openmct.time.off('bounds', this.updateDomain);
+        this.openmct.time.off('bounds', this.updateData);
+
+        Object.values(this.boundedRowsUnlisteners).forEach((unlisteners) => {
+            unlisteners.forEach(unlistener => unlistener());
+        });
+
+        this.plotComposition.off('add', this.addTelemetryObject);
+        this.plotComposition.off('remove', this.removeTelemetryObject);
+    },
+    methods: {
+        loadComposition() {
+            this.plotComposition = this.openmct.composition.get(this.domainObject);
+            this.plotComposition.on('add', this.addTelemetryObject);
+            this.plotComposition.on('remove', this.removeTelemetryObject);
+            this.plotComposition.load()
+        },
+        addTelemetryObject(telemetryObject) {
+            this.telemetryObjects.push(telemetryObject);
+            let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+            this.addTraceForObject(telemetryObject);
+
+            this.requestData(telemetryObject);
+            let subscription = this.subscribe(telemetryObject);
+            this.subscriptions[keyString] = subscription;
+        },
+        removeTelemetryObject(identifier) {
+            const keyString = this.openmct.objects.makeKeyString(identifier);
+            const index = this.telemetryObjects.findIndex(object => identifier.key === object.identifier.key);
+            this.unsubscribe(keyString);
+            this.removeTraceForObject(this.telemetryObjects[index]);
+            this.telemetryObjects = this.telemetryObjects.filter(object => !(identifier.key === object.identifier.key));
+            if (!this.telemetryObjects.length) {
+                Plotly.purge(this.plotElement);
+                this.createPlot();
+            }
+        },
+        updateDomain(bounds, isTick) {
+            let newDomain = {
+                'xaxis.range': [
+                    bounds.start,
+                    bounds.end
+                ]
+            };
+            Plotly.relayout(this.plotElement, newDomain);
+        },
+        updateData(bounds, isTick) {
+            if (!isTick) {
+                this.clearData();
+                this.telemetryObjects.forEach(telemetryObject => this.requestData(telemetryObject));
+            }
+        },
+        clearData() {
+            this.telemetryObjects.forEach(telemetryObject => this.resetTraceForObject(telemetryObject));
+        },
+        requestData(telemetryObject) {
+            return this.openmct.telemetry.request(telemetryObject)
+                .then(telemetryData => {
+                    const keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+                    let columnMap = this.columnMaps[keyString];
+                    let limitEvaluator = this.limitEvaluators[keyString];
+                    const telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
+                    this.boundedRows[keyString].add(telemetryRows);
+                });
+        },
+        subscribe(telemetryObject) {
+            const keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+            let columnMap = this.columnMaps[keyString];
+            let limitEvaluator = this.limitEvaluators[keyString];
+
+            return this.openmct.telemetry.subscribe(telemetryObject, (datum) => {
+                let newRow = new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator);
+                this.boundedRows[keyString].add(newRow);
+            });
+        },
+        unsubscribe(keyString) {
+            this.subscriptions[keyString]();
+            delete this.subscriptions[keyString];
+        },
+        createPlot() {
+            let timeSystem = this.openmct.time.timeSystem();
+            let bounds = this.openmct.time.bounds();
+            let formatMetadata = {
+                key: timeSystem.key,
+                name: timeSystem.name,
+                format: timeSystem.timeFormat
+            }
+            this.timeFormatter = this.openmct.telemetry.getValueFormatter(formatMetadata);
+            let xRange = [
+                bounds.start,
+                bounds.end
+            ];
+
+            let layout = {
+                hovermode: 'compare',
+                hoverdistance: -1,
+                autosize: true,
+                showlegend: true,
+                legend: {
+                    y: 1.07,
+                    "orientation": "h"
+                },
+                height: this.getContainerHeight,
+                font: {
+                    family: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+                    size: "12px",
+                    color: "#aaa"
+                },
+                xaxis: {
+                    title: timeSystem.name,
+                    type: 'date',
+                    zeroline: false,
+                    showgrid: false,
+                    range: xRange
+                },
+                yaxis: {
+                    zeroline: false,
+                    showgrid: false,
+                    tickwidth: 3,
+                    tickcolor: 'transparent',
+                    autorange: true,
+                    visible: false
+                },
+                margin: {
+                    l: 40,
+                    r: 5,
+                    b: 40,
+                    t: 0
+                },
+                paper_bgcolor: 'transparent',
+                plot_bgcolor: 'transparent'
+            };
+            Plotly.newPlot(
+                this.plotElement,
+                [],
+                layout,
+                {
+                    displayModeBar: true, // turns off hover-activated toolbar
+                    staticPlot: false // turns off hover effects on datapoints
+                }
+            );
+
+        },
+        resetTraceForObject(telemetryObject) {
+            this.removeTraceForObject(telemetryObject);
+            this.addTraceForObject(telemetryObject);
+        },
+        removeTraceForObject(telemetryObject) {
+            let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+            let index = this.traceIndices[keyString];
+            Plotly.deleteTraces(this.plotElement, index);
+
+            delete this.traceIndices[keyString];
+            this.recalculateTraceIndices();
+
+            this.boundedRowsUnlisteners[keyString].forEach((unlistener) => unlistener());
+        },
+        addTraceForObject(telemetryObject) {
+            let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+            let boundedRows = new BoundedTableRowCollection(this.openmct);
+            this.boundedRows[keyString] = boundedRows;
+
+            this.traceIndices[keyString] = Object.keys(this.traceIndices).length;
+            this.recalculateTraceIndices();
+
+            Plotly.addTraces(this.plotElement, {
+                x: [],
+                y: [],
+                name: telemetryObject.name,
+                type: "scattergl",
+                mode: 'lines+markers',
+                marker: {
+                    size: 5
+                },
+                line: {
+                    shape: 'linear',
+                    width: 1.5
+                }
+            });
+
+            const metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
+
+            let columnMap = metadataValues.reduce((map, metadatum) => {
+                let column = new TelemetryTableColumn(this.openmct, metadatum);
+                map[metadatum.key] = column;
+                return map;
+            }, {});
+            const limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
+            const valueFormatter = this.openmct.telemetry.getValueFormatter(this.openmct.telemetry.getMetadata(telemetryObject).valuesForHints(['range'])[0]);
+            let layout_update = {
+                yaxis: {title: valueFormatter.valueMetadata.name, visible: true}
+            };
+            Plotly.update(this.plotElement, {}, layout_update)
+            this.columnMaps[keyString] = columnMap;
+            this.limitEvaluators[keyString] = limitEvaluator;
+
+            let timeSystemKey = this.openmct.time.timeSystem().key;
+            let drawBuffer = {
+                keyString,
+                x: [],
+                y: []
+            };
+
+            this.drawBuffers[keyString] = drawBuffer;
+
+            const addRow = (rows) => {
+                if (rows instanceof Array) {
+                    rows.forEach(row => {
+                        drawBuffer.x.push(row.datum[timeSystemKey]);
+                        drawBuffer.y.push(valueFormatter.format(row.datum));
+                    })
+                } else {
+                    drawBuffer.x.push(rows.datum[timeSystemKey]);
+                    drawBuffer.y.push(valueFormatter.format(rows.datum));
+                }
+                this.scheduleDraw();
+            }
+
+            boundedRows.on('add', addRow);
+            this.boundedRowsUnlisteners[keyString] = [];
+
+            this.boundedRowsUnlisteners[keyString].push(() => {
+                boundedRows.off('add', addRow);
+            })
+        },
+        recalculateTraceIndices() {
+            Object.keys(this.traceIndices).forEach((key, indexOfKey) => {
+                this.traceIndices[key] = indexOfKey;
+            });
+        },
+        scheduleDraw() {
+            if (!this.drawing) {
+                this.drawing = true;
+                requestAnimationFrame(() => {
+                    let dataForXAxes = [];
+                    let dataForYAxes = [];
+                    let traceIndices = [];
+                    Object.values(this.drawBuffers).forEach((drawBuffer) => {
+                        dataForXAxes.push(drawBuffer.x);
+                        dataForYAxes.push(drawBuffer.y);
+                        traceIndices.push(this.traceIndices[drawBuffer.keyString]);
+                        drawBuffer.x = [];
+                        drawBuffer.y = [];
+                    });
+                    Plotly.extendTraces(
+                        this.plotElement,
+                        {
+                            x: dataForXAxes,
+                            y: dataForYAxes
+                        },
+                        traceIndices
+                    );
+
+                    this.drawing = false;
+                });
+            }
+        }
+    }
+}
+</script>

src/plugins/plotlyPlot/components/plotly.scss

@@ -0,0 +1,3 @@
+.plot svg {
+}
+

src/plugins/plotlyPlot/plugin.js

@@ -0,0 +1,17 @@
+import PlotlyViewProvider from './PlotlyViewProvider';
+
+export default function plugin() {
+    return function install(openmct) {
+        openmct.objectViews.addProvider(new PlotlyViewProvider(openmct));
+
+        openmct.types.addType('plotlyPlot', {
+            name: "Plotly Plot",
+            description: "Simple plot rendered by plotly.js",
+            creatable: true,
+            cssClass: 'icon-plot-overlay',
+            initialize: function (domainObject) {
+                domainObject.composition = [];
+            }
+        });
+    };
+}

src/plugins/plugins.js

@@ -34,6 +34,7 @@ define([
     './URLIndicatorPlugin/URLIndicatorPlugin',
     './telemetryMean/plugin',
     './plot/plugin',
+    './plotlyPlot/plugin',
     './telemetryTable/plugin',
     './staticRootPlugin/plugin',
     './notebook/plugin',
@@ -53,7 +54,8 @@ define([
     './themes/maelstrom',
     './themes/snow',
     './URLTimeSettingsSynchronizer/plugin',
-    './notificationIndicator/plugin'
+    './notificationIndicator/plugin',
+    './newFolderAction/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -68,6 +70,7 @@ define([
     URLIndicatorPlugin,
     TelemetryMean,
     PlotPlugin,
+    PlotlyPlotPlugin,
     TelemetryTablePlugin,
     StaticRootPlugin,
     Notebook,
@@ -87,7 +90,8 @@ define([
     Maelstrom,
     Snow,
     URLTimeSettingsSynchronizer,
-    NotificationIndicator
+    NotificationIndicator,
+    NewFolderAction
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -175,8 +179,8 @@ define([
     plugins.ExampleImagery = ExampleImagery;
     plugins.ImageryPlugin = ImageryPlugin;
     plugins.Plot = PlotPlugin;
+    plugins.PlotlyPlot = PlotlyPlotPlugin.default;
     plugins.TelemetryTable = TelemetryTablePlugin;
-
     plugins.SummaryWidget = SummaryWidget;
     plugins.TelemetryMean = TelemetryMean;
     plugins.URLIndicator = URLIndicatorPlugin;
@@ -198,6 +202,7 @@ define([
     plugins.ConditionWidget = ConditionWidgetPlugin.default;
     plugins.URLTimeSettingsSynchronizer = URLTimeSettingsSynchronizer.default;
     plugins.NotificationIndicator = NotificationIndicator.default;
+    plugins.NewFolderAction = NewFolderAction.default;
 
     return plugins;
 });

src/plugins/remove/RemoveAction.js

@@ -101,6 +101,12 @@ export default class RemoveAction {
     appliesTo(objectPath) {
         let parent = objectPath[1];
         let parentType = parent && this.openmct.types.get(parent.type);
+        let child = objectPath[0];
+        let locked = child.locked ? child.locked : parent && parent.locked;
+
+        if (locked) {
+            return false;
+        }
 
         return parentType &&
             parentType.definition.creatable &&

src/plugins/telemetryTable/collections/SortedTableRowCollection.js

@@ -73,6 +73,7 @@ define(
              * @private
              */
             addOne(row) {
+                // console.log('SortedTableRowCollection addOne', row);
                 if (this.sortOptions === undefined) {
                     throw 'Please specify sort options';
                 }

src/plugins/timeConductor/Conductor.vue

@@ -22,7 +22,12 @@
 <template>
 <div
     class="c-conductor"
-    :class="[isFixed ? 'is-fixed-mode' : 'is-realtime-mode']"
+    :class="[
+        { 'is-zooming': isZooming },
+        { 'is-panning': isPanning },
+        { 'alt-pressed': altPressed },
+        isFixed ? 'is-fixed-mode' : 'is-realtime-mode'
+    ]"
 >
     <form
         ref="conductorForm"
@@ -52,7 +57,7 @@
                     type="text"
                     autocorrect="off"
                     spellcheck="false"
-                    @change="validateAllBounds(); submitForm()"
+                    @change="validateAllBounds('startDate'); submitForm()"
                 >
                 <date-picker
                     v-if="isFixed && isUTCBased"
@@ -92,7 +97,7 @@
                     autocorrect="off"
                     spellcheck="false"
                     :disabled="!isFixed"
-                    @change="validateAllBounds(); submitForm()"
+                    @change="validateAllBounds('endDate'); submitForm()"
                 >
                 <date-picker
                     v-if="isFixed && isUTCBased"
@@ -122,14 +127,25 @@
 
             <conductor-axis
                 class="c-conductor__ticks"
-                :bounds="rawBounds"
-                @panAxis="setViewFromBounds"
+                :view-bounds="viewBounds"
+                :is-fixed="isFixed"
+                :alt-pressed="altPressed"
+                @endPan="endPan"
+                @endZoom="endZoom"
+                @panAxis="pan"
+                @zoomAxis="zoom"
             />
+
         </div>
         <div class="c-conductor__controls">
-            <!-- Mode, time system menu buttons and duration slider -->
             <ConductorMode class="c-conductor__mode-select" />
             <ConductorTimeSystem class="c-conductor__time-system-select" />
+            <ConductorHistory
+                v-if="isFixed"
+                class="c-conductor__history-select"
+                :bounds="openmct.time.bounds()"
+                :time-system="timeSystem"
+            />
         </div>
         <input
             type="submit"
@@ -145,6 +161,7 @@ import ConductorTimeSystem from './ConductorTimeSystem.vue';
 import DatePicker from './DatePicker.vue';
 import ConductorAxis from './ConductorAxis.vue';
 import ConductorModeIcon from './ConductorModeIcon.vue';
+import ConductorHistory from './ConductorHistory.vue'
 
 const DEFAULT_DURATION_FORMATTER = 'duration';
 
@@ -155,7 +172,8 @@ export default {
         ConductorTimeSystem,
         DatePicker,
         ConductorAxis,
-        ConductorModeIcon
+        ConductorModeIcon,
+        ConductorHistory
     },
     data() {
         let bounds = this.openmct.time.bounds();
@@ -165,6 +183,7 @@ export default {
         let durationFormatter = this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
 
         return {
+            timeSystem: timeSystem,
             timeFormatter: timeFormatter,
             durationFormatter: durationFormatter,
             offsets: {
@@ -175,29 +194,68 @@ export default {
                 start: timeFormatter.format(bounds.start),
                 end: timeFormatter.format(bounds.end)
             },
-            rawBounds: {
+            viewBounds: {
                 start: bounds.start,
                 end: bounds.end
             },
             isFixed: this.openmct.time.clock() === undefined,
             isUTCBased: timeSystem.isUTCBased,
-            showDatePicker: false
+            showDatePicker: false,
+            altPressed: false,
+            isPanning: false,
+            isZooming: false
         }
     },
     mounted() {
+        document.addEventListener('keydown', this.handleKeyDown);
+        document.addEventListener('keyup', this.handleKeyUp);
         this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.timeSystem())));
-
         this.openmct.time.on('bounds', this.setViewFromBounds);
         this.openmct.time.on('timeSystem', this.setTimeSystem);
         this.openmct.time.on('clock', this.setViewFromClock);
         this.openmct.time.on('clockOffsets', this.setViewFromOffsets)
     },
+    beforeDestroy() {
+        document.removeEventListener('keydown', this.handleKeyDown);
+        document.removeEventListener('keyup', this.handleKeyUp);
+    },
     methods: {
+        handleKeyDown(event) {
+            if (event.key === 'Alt') {
+                this.altPressed = true;
+            }
+        },
+        handleKeyUp(event) {
+            if (event.key === 'Alt') {
+                this.altPressed = false;
+            }
+        },
+        pan(bounds) {
+            this.isPanning = true;
+            this.setViewFromBounds(bounds);
+        },
+        endPan(bounds) {
+            this.isPanning = false;
+            if (bounds) {
+                this.openmct.time.bounds(bounds);
+            }
+        },
+        zoom(bounds) {
+            this.isZooming = true;
+            this.formattedBounds.start = this.timeFormatter.format(bounds.start);
+            this.formattedBounds.end = this.timeFormatter.format(bounds.end);
+        },
+        endZoom(bounds) {
+            const _bounds = bounds ? bounds : this.openmct.time.bounds();
+            this.isZooming = false;
+
+            this.openmct.time.bounds(_bounds);
+        },
         setTimeSystem(timeSystem) {
+            this.timeSystem = timeSystem
             this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
             this.durationFormatter = this.getFormatter(
                 timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
-
             this.isUTCBased = timeSystem.isUTCBased;
         },
         setOffsetsFromView($event) {
@@ -237,8 +295,8 @@ export default {
         setViewFromBounds(bounds) {
             this.formattedBounds.start = this.timeFormatter.format(bounds.start);
             this.formattedBounds.end = this.timeFormatter.format(bounds.end);
-            this.rawBounds.start = bounds.start;
-            this.rawBounds.end = bounds.end;
+            this.viewBounds.start = bounds.start;
+            this.viewBounds.end = bounds.end;
         },
         setViewFromOffsets(offsets) {
             this.offsets.start = this.durationFormatter.format(Math.abs(offsets.start));
@@ -251,6 +309,15 @@ export default {
                 this.setOffsetsFromView();
             }
         },
+        getBoundsLimit() {
+            const configuration = this.configuration.menuOptions
+                .filter(option => option.timeSystem ===  this.timeSystem.key)
+                .find(option => option.limit);
+
+            const limit = configuration ? configuration.limit : undefined;
+
+            return limit;
+        },
         clearAllValidation() {
             if (this.isFixed) {
                 [this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
@@ -262,36 +329,52 @@ export default {
             input.setCustomValidity('');
             input.title = '';
         },
-        validateAllBounds() {
-            return [this.$refs.startDate, this.$refs.endDate].every((input) => {
-                let validationResult = true;
-                let formattedDate;
+        validateAllBounds(ref) {
+            if (!this.areBoundsFormatsValid()) {
+                return false;
+            }
 
-                if (input === this.$refs.startDate) {
-                    formattedDate = this.formattedBounds.start;
+            let validationResult = true;
+            const currentInput = this.$refs[ref];
+
+            return [this.$refs.startDate, this.$refs.endDate].every((input) => {
+                let boundsValues = {
+                    start: this.timeFormatter.parse(this.formattedBounds.start),
+                    end: this.timeFormatter.parse(this.formattedBounds.end)
+                };
+                const limit = this.getBoundsLimit();
+
+                if (
+                    this.timeSystem.isUTCBased
+                    && limit
+                    && boundsValues.end - boundsValues.start > limit
+                ) {
+                    if (input === currentInput) {
+                        validationResult = "Start and end difference exceeds allowable limit";
+                    }
                 } else {
-                    formattedDate = this.formattedBounds.end;
+                    if (input === currentInput) {
+                        validationResult = this.openmct.time.validateBounds(boundsValues);
+                    }
                 }
 
+                return this.handleValidationResults(input, validationResult);
+            });
+        },
+        areBoundsFormatsValid() {
+            let validationResult = true;
+
+            return [this.$refs.startDate, this.$refs.endDate].every((input) => {
+                const formattedDate = input === this.$refs.startDate
+                    ? this.formattedBounds.start
+                    : this.formattedBounds.end
+                ;
+
                 if (!this.timeFormatter.validate(formattedDate)) {
                     validationResult = 'Invalid date';
-                } else {
-                    let boundsValues = {
-                        start: this.timeFormatter.parse(this.formattedBounds.start),
-                        end: this.timeFormatter.parse(this.formattedBounds.end)
-                    };
-                    validationResult = this.openmct.time.validateBounds(boundsValues);
                 }
 
-                if (validationResult !== true) {
-                    input.setCustomValidity(validationResult);
-                    input.title = validationResult;
-                    return false;
-                } else {
-                    input.setCustomValidity('');
-                    input.title = '';
-                    return true;
-                }
+                return this.handleValidationResults(input, validationResult);
             });
         },
         validateAllOffsets(event) {
@@ -315,17 +398,20 @@ export default {
                     validationResult = this.openmct.time.validateOffsets(offsetValues);
                 }
 
-                if (validationResult !== true) {
-                    input.setCustomValidity(validationResult);
-                    input.title = validationResult;
-                    return false;
-                } else {
-                    input.setCustomValidity('');
-                    input.title = '';
-                    return true;
-                }
+                return this.handleValidationResults(input, validationResult);
             });
         },
+        handleValidationResults(input, validationResult) {
+            if (validationResult !== true) {
+                input.setCustomValidity(validationResult);
+                input.title = validationResult;
+                return false;
+            } else {
+                input.setCustomValidity('');
+                input.title = '';
+                return true;
+            }
+        },
         submitForm() {
             // Allow Vue model to catch up to user input.
             // Submitting form will cause validation messages to display (but only if triggered by button click)
@@ -338,12 +424,12 @@ export default {
         },
         startDateSelected(date) {
             this.formattedBounds.start = this.timeFormatter.format(date);
-            this.validateAllBounds();
+            this.validateAllBounds('startDate');
             this.submitForm();
         },
         endDateSelected(date) {
             this.formattedBounds.end = this.timeFormatter.format(date);
-            this.validateAllBounds();
+            this.validateAllBounds('endDate');
             this.submitForm();
         }
     }

src/plugins/timeConductor/ConductorAxis.vue

@@ -24,7 +24,12 @@
     ref="axisHolder"
     class="c-conductor-axis"
     @mousedown="dragStart($event)"
-></div>
+>
+    <div
+        class="c-conductor-axis__zoom-indicator"
+        :style="zoomStyle"
+    ></div>
+</div>
 </template>
 
 <script>
@@ -43,52 +48,81 @@ const PIXELS_PER_TICK_WIDE = 200;
 export default {
     inject: ['openmct'],
     props: {
-        bounds: {
+        viewBounds: {
             type: Object,
             required: true
+        },
+        isFixed: {
+            type: Boolean,
+            required: true
+        },
+        altPressed: {
+            type: Boolean,
+            required: true
+        }
+    },
+    data() {
+        return {
+            inPanMode: false,
+            dragStartX: undefined,
+            dragX: undefined,
+            zoomStyle: {}
+        }
+    },
+    computed: {
+        inZoomMode() {
+            return !this.inPanMode;
         }
     },
     watch: {
-        bounds: {
-            handler(bounds) {
+        viewBounds: {
+            handler() {
                 this.setScale();
             },
             deep: true
         }
     },
     mounted() {
-        let axisHolder = this.$refs.axisHolder;
-        let height = axisHolder.offsetHeight;
-        let vis = d3Selection.select(axisHolder)
-            .append("svg:svg")
-            .attr("width", "100%")
-            .attr("height", height);
+        let vis = d3Selection.select(this.$refs.axisHolder).append("svg:svg");
 
-        this.width = this.$refs.axisHolder.clientWidth;
         this.xAxis = d3Axis.axisTop();
         this.dragging = false;
 
         // draw x axis with labels. CSS is used to position them.
-        this.axisElement = vis.append("g");
+        this.axisElement = vis.append("g")
+            .attr("class", "axis");
 
         this.setViewFromTimeSystem(this.openmct.time.timeSystem());
+        this.setAxisDimensions();
         this.setScale();
 
         //Respond to changes in conductor
         this.openmct.time.on("timeSystem", this.setViewFromTimeSystem);
         setInterval(this.resize, RESIZE_POLL_INTERVAL);
     },
-    destroyed() {
-    },
     methods: {
+        setAxisDimensions() {
+            const axisHolder = this.$refs.axisHolder;
+            const rect = axisHolder.getBoundingClientRect();
+
+            this.left = Math.round(rect.left);
+            this.width = axisHolder.clientWidth;
+        },
         setScale() {
+            if (!this.width) {
+                return;
+            }
+
             let timeSystem = this.openmct.time.timeSystem();
-            let bounds = this.bounds;
 
             if (timeSystem.isUTCBased) {
-                this.xScale.domain([new Date(bounds.start), new Date(bounds.end)]);
+                this.xScale.domain(
+                    [new Date(this.viewBounds.start), new Date(this.viewBounds.end)]
+                );
             } else {
-                this.xScale.domain([bounds.start, bounds.end]);
+                this.xScale.domain(
+                    [this.viewBounds.start, this.viewBounds.end]
+                );
             }
 
             this.xAxis.scale(this.xScale);
@@ -102,7 +136,7 @@ export default {
                 this.xAxis.ticks(this.width / PIXELS_PER_TICK);
             }
 
-            this.msPerPixel = (bounds.end - bounds.start) / this.width;
+            this.msPerPixel = (this.viewBounds.end - this.viewBounds.start) / this.width;
         },
         setViewFromTimeSystem(timeSystem) {
             //The D3 scale used depends on the type of time system as d3
@@ -120,9 +154,8 @@ export default {
         },
         getActiveFormatter() {
             let timeSystem = this.openmct.time.timeSystem();
-            let isFixed = this.openmct.time.clock() === undefined;
 
-            if (isFixed) {
+            if (this.isFixed) {
                 return this.getFormatter(timeSystem.timeFormat);
             } else {
                 return this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
@@ -134,45 +167,131 @@ export default {
             }).formatter;
         },
         dragStart($event) {
-            let isFixed = this.openmct.time.clock() === undefined;
-            if (isFixed) {
+            if (this.isFixed) {
                 this.dragStartX = $event.clientX;
 
+                if (this.altPressed) {
+                    this.inPanMode = true;
+                }
+
                 document.addEventListener('mousemove', this.drag);
                 document.addEventListener('mouseup', this.dragEnd, {
                     once: true
                 });
+
+                if (this.inZoomMode) {
+                    this.startZoom();
+                }
             }
         },
         drag($event) {
             if (!this.dragging) {
                 this.dragging = true;
-                requestAnimationFrame(()=>{
-                    let deltaX = $event.clientX - this.dragStartX;
-                    let percX = deltaX / this.width;
-                    let bounds = this.openmct.time.bounds();
-                    let deltaTime = bounds.end - bounds.start;
-                    let newStart = bounds.start - percX * deltaTime;
-                    this.$emit('panAxis',{
-                        start: newStart,
-                        end: newStart + deltaTime
-                    });
+
+                requestAnimationFrame(() => {
+                    this.dragX = $event.clientX;
+                    this.inPanMode ? this.pan() : this.zoom();
                     this.dragging = false;
-                })
-            } else {
-                console.log('Rejected drag due to RAF cap');
+                });
             }
         },
         dragEnd() {
+            this.inPanMode ? this.endPan() : this.endZoom();
+
             document.removeEventListener('mousemove', this.drag);
-            this.openmct.time.bounds({
-                start: this.bounds.start,
-                end: this.bounds.end
+            this.dragStartX = undefined;
+            this.dragX = undefined;
+        },
+        pan() {
+            const panBounds = this.getPanBounds();
+            this.$emit('panAxis', panBounds);
+        },
+        endPan() {
+            const panBounds = this.dragStartX && this.dragX && this.dragStartX !== this.dragX
+                ? this.getPanBounds()
+                : undefined;
+            this.$emit('endPan', panBounds);
+            this.inPanMode = false;
+        },
+        getPanBounds() {
+            const bounds = this.openmct.time.bounds();
+            const deltaTime = bounds.end - bounds.start;
+            const deltaX = this.dragX - this.dragStartX;
+            const percX = deltaX / this.width;
+            const panStart = bounds.start - percX * deltaTime;
+
+            return {
+                start: panStart,
+                end: panStart + deltaTime
+            };
+        },
+        startZoom() {
+            const x = this.scaleToBounds(this.dragStartX);
+
+            this.zoomStyle = {
+                left: `${this.dragStartX - this.left}px`
+            };
+
+            this.$emit('zoomAxis', {
+                start: x,
+                end: x
             });
         },
+        zoom() {
+            const zoomRange = this.getZoomRange();
+
+            this.zoomStyle = {
+                left: `${zoomRange.start - this.left}px`,
+                width: `${zoomRange.end - zoomRange.start}px`
+            };
+
+            this.$emit('zoomAxis', {
+                start: this.scaleToBounds(zoomRange.start),
+                end: this.scaleToBounds(zoomRange.end)
+            });
+        },
+        endZoom() {
+            const zoomRange = this.dragStartX && this.dragX && this.dragStartX !== this.dragX
+                ? this.getZoomRange()
+                : undefined;
+
+            const zoomBounds = zoomRange
+                ? {
+                    start: this.scaleToBounds(zoomRange.start),
+                    end: this.scaleToBounds(zoomRange.end)
+                }
+                : this.openmct.time.bounds();
+
+            this.zoomStyle = {};
+            this.$emit('endZoom', zoomBounds);
+        },
+        getZoomRange() {
+            const leftBound = this.left;
+            const rightBound = this.left + this.width;
+
+            const zoomStart = this.dragX < leftBound
+                ? leftBound
+                : Math.min(this.dragX, this.dragStartX);
+
+            const zoomEnd = this.dragX > rightBound
+                ? rightBound
+                : Math.max(this.dragX, this.dragStartX);
+
+            return {
+                start: zoomStart,
+                end: zoomEnd
+            };
+        },
+        scaleToBounds(value) {
+            const bounds = this.openmct.time.bounds();
+            const timeDelta = bounds.end - bounds.start;
+            const valueDelta = value - this.left;
+            const offset = valueDelta / this.width * timeDelta;
+            return bounds.start + offset;
+        },
         resize() {
             if (this.$refs.axisHolder.clientWidth !== this.width) {
-                this.width = this.$refs.axisHolder.clientWidth;
+                this.setAxisDimensions();
                 this.setScale();
             }
         }

src/plugins/timeConductor/ConductorHistory.vue

@@ -0,0 +1,200 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web 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 Web 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-ctrl-wrapper c-ctrl-wrapper--menus-up">
+    <button class="c-button--menu c-history-button icon-history"
+            @click.prevent="toggle"
+    >
+        <span class="c-button__label">History</span>
+    </button>
+    <div v-if="open"
+         class="c-menu c-conductor__history-menu"
+    >
+        <ul v-if="hasHistoryPresets">
+            <li
+                v-for="preset in presets"
+                :key="preset.label"
+                class="icon-clock"
+                @click="selectPresetBounds(preset.bounds)"
+            >
+                {{ preset.label }}
+            </li>
+        </ul>
+
+        <div
+            v-if="hasHistoryPresets"
+            class="c-menu__section-separator"
+        ></div>
+
+        <div class="c-menu__section-hint">
+            Past timeframes, ordered by latest first
+        </div>
+
+        <ul>
+            <li
+                v-for="(timespan, index) in historyForCurrentTimeSystem"
+                :key="index"
+                class="icon-history"
+                @click="selectTimespan(timespan)"
+            >
+                {{ formatTime(timespan.start) }} - {{ formatTime(timespan.end) }}
+            </li>
+        </ul>
+    </div>
+</div>
+</template>
+
+<script>
+import toggleMixin from '../../ui/mixins/toggle-mixin';
+
+const LOCAL_STORAGE_HISTORY_KEY = 'tcHistory';
+const DEFAULT_RECORDS = 10;
+
+export default {
+    inject: ['openmct', 'configuration'],
+    mixins: [toggleMixin],
+    props: {
+        bounds: {
+            type: Object,
+            required: true
+        },
+        timeSystem: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            history: {}, // contains arrays of timespans {start, end}, array key is time system key
+            presets: []
+        }
+    },
+    computed: {
+        hasHistoryPresets() {
+            return this.timeSystem.isUTCBased && this.presets.length;
+        },
+        historyForCurrentTimeSystem() {
+            const history = this.history[this.timeSystem.key];
+
+            return history;
+        }
+    },
+    watch: {
+        bounds: {
+            handler() {
+                this.addTimespan();
+            },
+            deep: true
+        },
+        timeSystem: {
+            handler() {
+                this.loadConfiguration();
+                this.addTimespan();
+            },
+            deep: true
+        },
+        history: {
+            handler() {
+                this.persistHistoryToLocalStorage();
+            },
+            deep: true
+        }
+    },
+    mounted() {
+        this.getHistoryFromLocalStorage();
+    },
+    methods: {
+        getHistoryFromLocalStorage() {
+            if (localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY)) {
+                this.history = JSON.parse(localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY))
+            } else {
+                this.history = {};
+                this.persistHistoryToLocalStorage();
+            }
+        },
+        persistHistoryToLocalStorage() {
+            localStorage.setItem(LOCAL_STORAGE_HISTORY_KEY, JSON.stringify(this.history));
+        },
+        addTimespan() {
+            const key = this.timeSystem.key;
+            let [...currentHistory] = this.history[key] || [];
+            const timespan = {
+                start: this.bounds.start,
+                end: this.bounds.end
+            };
+
+            const isNotEqual = function (entry) {
+                const start = entry.start !== this.start;
+                const end = entry.end !== this.end;
+
+                return start || end;
+            };
+            currentHistory = currentHistory.filter(isNotEqual, timespan);
+
+            while (currentHistory.length >= this.records) {
+                currentHistory.pop();
+            }
+
+            currentHistory.unshift(timespan);
+            this.history[key] = currentHistory;
+        },
+        selectTimespan(timespan) {
+            this.openmct.time.bounds(timespan);
+        },
+        selectPresetBounds(bounds) {
+            const start = typeof bounds.start === 'function' ? bounds.start() : bounds.start;
+            const end = typeof bounds.end === 'function' ? bounds.end() : bounds.end;
+
+            this.selectTimespan({
+                start: start,
+                end: end
+            });
+        },
+        loadConfiguration() {
+            const configurations = this.configuration.menuOptions
+                .filter(option => option.timeSystem ===  this.timeSystem.key);
+
+            this.presets = this.loadPresets(configurations);
+            this.records = this.loadRecords(configurations);
+        },
+        loadPresets(configurations) {
+            const configuration = configurations.find(option => option.presets);
+            const presets = configuration ? configuration.presets : [];
+
+            return presets;
+        },
+        loadRecords(configurations) {
+            const configuration = configurations.find(option => option.records);
+            const records = configuration ? configuration.records : DEFAULT_RECORDS;
+
+            return records;
+        },
+        formatTime(time) {
+            const formatter = this.openmct.telemetry.getValueFormatter({
+                format: this.timeSystem.timeFormat
+            }).formatter;
+
+            return formatter.format(time);
+        }
+    }
+}
+</script>

src/plugins/timeConductor/ConductorMode.vue

@@ -110,7 +110,7 @@ export default {
             if (clock === undefined) {
                 return {
                     key: 'fixed',
-                    name: 'Fixed Timespan Mode',
+                    name: 'Fixed Timespan',
                     description: 'Query and explore data that falls between two fixed datetimes.',
                     cssClass: 'icon-tabular'
                 }

src/plugins/timeConductor/conductor-axis.scss

@@ -13,7 +13,7 @@
         text-rendering: geometricPrecision;
         width: 100%;
         height: 100%;
-        > g {
+        > g.axis {
             // Overall Tick holder
             transform: translateY($tickYPos);
             path {
@@ -44,7 +44,6 @@
     }
 
     body.desktop .is-fixed-mode & {
-        @include cursorGrab();
         background-size: 3px 30%;
         background-color: $colorBodyBgSubtle;
         box-shadow: inset rgba(black, 0.4) 0 1px 1px;
@@ -55,17 +54,6 @@
             stroke: $colorBodyBgSubtle;
             transition: $transOut;
         }
-
-        &:hover,
-        &:active {
-            $c: $colorKeySubtle;
-            background-color: $c;
-            transition: $transIn;
-            svg text {
-                stroke: $c;
-                transition: $transIn;
-            }
-        }
     }
 
     .is-realtime-mode & {

src/plugins/timeConductor/conductor.scss

@@ -57,6 +57,65 @@
         }
     }
 
+    &.is-fixed-mode {
+        .c-conductor-axis {
+            &__zoom-indicator {
+                border: 1px solid transparent;
+                display: none; // Hidden by default
+            }
+        }
+
+        &:not(.is-panning),
+        &:not(.is-zooming) {
+            .c-conductor-axis {
+                &:hover,
+                &:active {
+                    cursor: col-resize;
+                    filter: $timeConductorAxisHoverFilter;
+                }
+            }
+        }
+
+        &.is-panning,
+        &.is-zooming {
+            .c-conductor-input input {
+                // Styles for inputs while zooming or panning
+                background: rgba($timeConductorActiveBg, 0.4);
+            }
+        }
+
+        &.alt-pressed {
+            .c-conductor-axis:hover {
+                // When alt is being pressed and user is hovering over the axis, set the cursor
+                @include cursorGrab();
+            }
+        }
+
+        &.is-panning {
+            .c-conductor-axis {
+                @include cursorGrab();
+                background-color: $timeConductorActivePanBg;
+                transition: $transIn;
+
+                svg text {
+                    stroke: $timeConductorActivePanBg;
+                    transition: $transIn;
+                }
+            }
+        }
+
+        &.is-zooming {
+            .c-conductor-axis__zoom-indicator {
+                display: block;
+                position: absolute;
+                background: rgba($timeConductorActiveBg, 0.4);
+                border-left-color: $timeConductorActiveBg;
+                border-right-color: $timeConductorActiveBg;
+                top: 0; bottom: 0;
+            }
+        }
+    }
+
     &.is-realtime-mode {
         .c-conductor__time-bounds {
             grid-template-columns: 20px auto 1fr auto auto;

src/styles/_animations.scss

@@ -3,8 +3,8 @@
 }
 
 @keyframes rotation-centered {
-    0%   { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0%   { transform: translate(-50%, -50%) rotate(0deg); }
+    100% { transform: translate(-50%, -50%) rotate(360deg); }
 }
 
 @keyframes clock-hands {

src/styles/_constants-espresso.scss

@@ -142,6 +142,9 @@ $colorTimeHov: pullForward($colorTime, 10%);
 $colorTimeSubtle: pushBack($colorTime, 20%);
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
 $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$timeConductorAxisHoverFilter: brightness(1.2);
+$timeConductorActiveBg: $colorKey;
+$timeConductorActivePanBg: #226074;
 
 /************************************************** BROWSING */
 $browseFrameColor: pullForward($colorBodyBg, 10%);
@@ -391,7 +394,7 @@ $splitterBtnColorBg: $colorBtnBg;
 $splitterBtnColorFg: #999;
 $splitterBtnLabelColorFg: #666;
 $splitterCollapsedBtnColorBg: #222;
-$splitterCollapsedBtnColorFg: #555;
+$splitterCollapsedBtnColorFg: #666;
 $splitterCollapsedBtnColorBgHov: $colorKey;
 $splitterCollapsedBtnColorFgHov: $colorKeyFg;
 

src/styles/_constants-maelstrom.scss

@@ -146,6 +146,9 @@ $colorTimeHov: pullForward($colorTime, 10%);
 $colorTimeSubtle: pushBack($colorTime, 20%);
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
 $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$timeConductorAxisHoverFilter: brightness(1.2);
+$timeConductorActiveBg: $colorKey;
+$timeConductorActivePanBg: #226074;
 
 /************************************************** BROWSING */
 $browseFrameColor: pullForward($colorBodyBg, 10%);

src/styles/_constants-snow.scss

@@ -132,7 +132,7 @@ $colorPausedFg: #fff;
 // Base variations
 $colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
 $colorBodyBgSubtleHov: pushBack($colorKey, 50%);
-$colorKeySubtle: pushBack($colorKey, 10%);
+$colorKeySubtle: pushBack($colorKey, 20%);
 
 // Time Colors
 $colorTime: #618cff;
@@ -142,6 +142,9 @@ $colorTimeHov: pushBack($colorTime, 5%);
 $colorTimeSubtle: pushBack($colorTime, 20%);
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
 $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$timeConductorAxisHoverFilter: brightness(0.8);
+$timeConductorActiveBg: $colorKey;
+$timeConductorActivePanBg: #A0CDE1;
 
 /************************************************** BROWSING */
 $browseFrameColor: pullForward($colorBodyBg, 10%);

src/styles/_constants.scss

@@ -45,7 +45,6 @@ $overlayOuterMarginFullscreen: 0%;
 $overlayOuterMarginDialog: 20%;
 $overlayInnerMargin: 25px;
 $mainViewPad: 2px;
-$treeNavArrowD: 20px;
 /*************** Items */
 $itemPadLR: 5px;
 $gridItemDesk: 175px;
@@ -83,8 +82,8 @@ $formLabelMinW: 120px;
 $formLabelW: 30%;
 /*************** Wait Spinner */
 $waitSpinnerD: 32px;
-$waitSpinnerBorderW: 5px;
 $waitSpinnerTreeD: 20px;
+$waitSpinnerBorderW: 5px;
 $waitSpinnerTreeBorderW: 3px;
 /*************** Messages */
 $messageIconD: 80px;
@@ -149,6 +148,7 @@ $glyph-icon-cursor-lock: '\e929';
 $glyph-icon-flag: '\e92a';
 $glyph-icon-eye-disabled: '\e92b';
 $glyph-icon-notebook-page: '\e92c';
+$glyph-icon-unlocked: '\e92d';
 $glyph-icon-arrows-right-left: '\ea00';
 $glyph-icon-arrows-up-down: '\ea01';
 $glyph-icon-bullet: '\ea02';
@@ -201,6 +201,9 @@ $glyph-icon-clear-data: '\ea30';
 $glyph-icon-history: '\ea31';
 $glyph-icon-arrow-nav-to-parent: '\ea32';
 $glyph-icon-crosshair-in-circle: '\ea33';
+$glyph-icon-target: '\ea34';
+$glyph-icon-items-collapse: '\ea35';
+$glyph-icon-items-expand: '\ea36';
 $glyph-icon-activity: '\eb00';
 $glyph-icon-activity-mode: '\eb01';
 $glyph-icon-autoflow-tabular: '\eb02';

src/styles/_controls.scss

@@ -102,8 +102,7 @@ button {
     }
 }
 
-.c-click-link,
-.c-icon-link {
+.c-click-link {
     // A clickable element, typically inline, with an icon and label
     @include cControl();
     cursor: pointer;
@@ -118,15 +117,8 @@ button {
     }
 }
 
-.c-icon-link {
-    &:before {
-        // Icon
-        //color: $colorBtnMajorBg;
-    }
-}
-
 .c-icon-button {
-    &__label {
+    .c-icon-button__label {
         margin-left: $interiorMargin;
     }
 
@@ -470,9 +462,17 @@ select {
     text-shadow: $shdwMenuText;
     padding: $interiorMarginSm;
     box-shadow: $shdwMenu;
-    display: block;
+    display: flex;
+    flex-direction: column;
     position: absolute;
     z-index: 100;
+
+    > * {
+        flex: 0 0 auto;
+        //+ * {
+        //    margin-top: $interiorMarginSm;
+        //}
+    }
 }
 
 @mixin menuInner() {
@@ -510,6 +510,23 @@ select {
 .c-menu {
     @include menuOuter();
     @include menuInner();
+
+    &__section-hint {
+        $m: $interiorMargin;
+        margin: $m 0;
+        padding: $m nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
+
+        opacity: 0.6;
+        font-size: 0.9em;
+        font-style: italic;
+    }
+
+    &__section-separator {
+        $m: $interiorMargin;
+        border-top: 1px solid $colorInteriorBorder;
+        margin: $m 0;
+        padding: $m nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
+    }
 }
 
 .c-super-menu {

src/styles/_global.scss

@@ -284,23 +284,19 @@ body.desktop .has-local-controls {
 
         display: flex;
         align-items: center;
-        margin-left: $treeNavArrowD + $interiorMargin;
+        padding-left: $spinnerL + $d/2 + $interiorMargin;
+        background: $colorLoadingBg;
         min-height: 5px + $d;
 
         .c-tree__item__label {
             font-style: italic;
-            margin-left: $interiorMargin;
             opacity: 0.6;
         }
         &:before {
-            left: auto;
-            top: auto;
-            transform: translate(0);
             height: $d;
             width: $d;
-            border-width: 3px;
-            //left: $spinnerL;
-            position: relative;
+            border-width: 4px;
+            left: $spinnerL;
         }
         &:after {
             display: none;

src/styles/_glyphs.scss

@@ -84,6 +84,7 @@
 .icon-flag {  @include glyphBefore($glyph-icon-flag); }
 .icon-eye-disabled {  @include glyphBefore($glyph-icon-eye-disabled); }
 .icon-notebook-page {  @include glyphBefore($glyph-icon-notebook-page); }
+.icon-unlocked {  @include glyphBefore($glyph-icon-unlocked); }
 .icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
 .icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
 .icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
@@ -136,6 +137,9 @@
 .icon-history {  @include glyphBefore($glyph-icon-history); }
 .icon-arrow-nav-to-parent {  @include glyphBefore($glyph-icon-arrow-nav-to-parent); }
 .icon-crosshair-in-circle {  @include glyphBefore($glyph-icon-crosshair-in-circle); }
+.icon-target {  @include glyphBefore($glyph-icon-target); }
+.icon-items-collapse {  @include glyphBefore($glyph-icon-items-collapse); }
+.icon-items-expand {  @include glyphBefore($glyph-icon-items-expand); }
 .icon-activity {  @include glyphBefore($glyph-icon-activity); }
 .icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }

src/styles/_legacy-plots.scss

@@ -114,25 +114,6 @@ mct-plot {
     .plot-wrapper-axis-and-display-area {
         position: relative;
         flex: 1 1 auto;
-
-        .l-state-indicators {
-            color: $colorPausedBg;
-            position: absolute;
-            display: block;
-            font-size: 1.5em;
-            pointer-events: none;
-            top: $interiorMarginSm;
-            left: $interiorMarginSm;
-            z-index: 2;
-
-            > * + * {
-                margin-left: $interiorMarginSm;
-            }
-
-            .t-alert-unsynced {
-                display: none;
-            }
-        }
     }
 
     .gl-plot-wrapper-display-area-and-x-axis {
@@ -294,6 +275,25 @@ mct-plot {
             right: $m;
         }
     }
+
+    .l-state-indicators {
+        color: $colorPausedBg;
+        position: absolute;
+        display: block;
+        font-size: 1.5em;
+        pointer-events: none;
+        top: $interiorMarginSm;
+        left: $interiorMarginSm;
+        z-index: 2;
+
+        > * + * {
+            margin-left: $interiorMarginSm;
+        }
+
+        .t-alert-unsynced {
+            display: none;
+        }
+    }
 }
 
 .gl-plot-display-area,
@@ -432,6 +432,7 @@ mct-plot {
     &__wrapper {
         // Holds view-control and both collapsed and expanded legends
         flex: 1 1 auto;
+        overflow: auto; // Prevents collapsed legend from forcing scrollbars on higher parent containers
     }
 
     &__view-control {

src/styles/_legacy.scss

@@ -893,7 +893,7 @@ body.desktop {
 .grid-row {
     .grid-cell {
         padding: 3px $interiorMarginLg 3px 0;
-        &[title] {
+        &[title]:not([title=""]) {
             // When a cell has a title, assume it's helpful text
             cursor: help;
         }

src/styles/fonts/Open-MCT-Symbols-16px.svg

@@ -30,7 +30,7 @@
 <glyph unicode="&#xe914;" glyph-name="icon-hourglass" d="M1024 832h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 448c-102.6 0-199 40-271.6 112.4-41.2 41.2-72 90.2-90.8 143.6h724.6c-18.8-53.4-49.6-102.4-90.8-143.6-72.4-72.4-168.8-112.4-271.4-112.4zM512 320c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
 <glyph unicode="&#xe915;" glyph-name="icon-info" d="M512 832c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 704c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 0h-384v128h64v256h256v-256h64v-128z" />
 <glyph unicode="&#xe916;" glyph-name="icon-link" d="M1024 320l-512 512v-307.2l-512-204.8v-256h512v-256z" />
-<glyph unicode="&#xe917;" glyph-name="icon-lock" d="M832 448h-32v96c0 158.8-129.2 288-288 288s-288-129.2-288-288v-96h-32c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h640c70.4 0 128 57.6 128 128v384c0 70.4-57.6 128-128 128zM416 544c0 53 43 96 96 96s96-43 96-96v-96h-192v96z" />
+<glyph unicode="&#xe917;" glyph-name="icon-lock" horiz-adv-x="768" d="M702 448h-62v128c0 141.385-114.615 256-256 256s-256-114.615-256-256v0-128h-64c-35.301-0.113-63.887-28.699-64-63.989v-512.011c0.113-35.301 28.699-63.887 63.989-64h638.011c35.301 0.113 63.887 28.699 64 63.989v512.011c-0.113 35.301-28.699 63.887-63.989 64h-0.011zM256 448v128c0 70.692 57.308 128 128 128s128-57.308 128-128v0-128z" />
 <glyph unicode="&#xe918;" glyph-name="icon-minus" d="M960 192c35.2 0 64 28.8 64 64v128c0 35.2-28.8 64-64 64h-896c-35.2 0-64-28.8-64-64v-128c0-35.2 28.8-64 64-64h896z" />
 <glyph unicode="&#xe919;" glyph-name="icon-people" d="M704 512h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM256 512h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM832 448h-192c-34.908 0-67.716-9.448-96-25.904 57.278-33.324 96-95.404 96-166.096v-448h384v448c0 105.6-86.4 192-192 192zM384 448h-192c-105.6 0-192-86.4-192-192v-448h576v448c0 105.6-86.4 192-192 192z" />
 <glyph unicode="&#xe91a;" glyph-name="icon-person" d="M768 576c0-105.6-86.4-192-192-192h-128c-105.6 0-192 86.4-192 192v64c0 105.6 86.4 192 192 192h128c105.6 0 192-86.4 192-192v-64zM64-192v192c0 140.8 115.2 256 256 256h384c140.8 0 256-115.2 256-256v-192z" />
@@ -52,6 +52,7 @@
 <glyph unicode="&#xe92a;" glyph-name="icon-flag" d="M192 192h832l-192 320 192 320h-896c-70.606-0.215-127.785-57.394-128-127.979v-896.021h192z" />
 <glyph unicode="&#xe92b;" glyph-name="icon-eye-disabled" d="M209.46 223.32q-7.46 9.86-14.26 20.28c-14.737 21.984-27.741 47.184-37.759 73.847l-0.841 2.553c11.078 29.259 24.068 54.443 39.51 77.869l-0.91-1.469c23.221 34.963 50.705 64.8 82.207 89.793l0.793 0.607c57.663 45.719 130.179 75.053 209.311 79.947l1.069 0.053 114.48 140.88c-27.366 5.017-58.869 7.898-91.041 7.92h-0.019c-245.8 0-452.2-168-510.8-395.6 21.856-82.93 60.906-154.847 113.325-214.773l-0.525 0.613zM814.76 416.92q7.52-10 14.44-20.52c14.737-21.984 27.741-47.184 37.759-73.847l0.841-2.553c-10.859-29.216-23.863-54.416-39.447-77.748l0.847 1.348c-23.221-34.963-50.705-64.8-82.207-89.793l-0.793-0.607c-57.762-45.834-130.437-75.216-209.743-80.049l-1.057-0.051-114.46-140.86c27.346-4.988 58.817-7.84 90.955-7.84 0.037 0 0.074 0 0.111 0h-0.005c245.8 0 452.2 168 510.8 395.6-21.856 82.93-60.906 154.847-113.325 214.773l0.525-0.613zM832 832l-832-1024h192l832 1024h-192z" />
 <glyph unicode="&#xe92c;" glyph-name="icon-notebook-page" d="M830 770h-830l-4-702c0-106.6 87.4-194 194-194h640c106.6 0 194 87.4 194 194v508c0 106.8-87.4 194-194 194zM832 386l-384-384-192 192v256l192-192 384 384v-256z" />
+<glyph unicode="&#xe92d;" glyph-name="icon-unlocked" d="M768 832c-141.339-0.114-255.886-114.661-256-255.989v-128.011h-448c-35.301-0.113-63.887-28.699-64-63.989v-512.011c0.113-35.301 28.699-63.887 63.989-64h638.011c35.301 0.113 63.887 28.699 64 63.989v512.011c-0.113 35.301-28.699 63.887-63.989 64h-62.011v128c0 70.692 57.308 128 128 128s128-57.308 128-128v0-128h128v128c-0.114 141.339-114.661 255.886-255.989 256h-0.011z" />
 <glyph unicode="&#xea00;" glyph-name="icon-arrows-right-left" d="M1024 320l-448-512v1024zM448 832l-448-512 448-512z" />
 <glyph unicode="&#xea01;" glyph-name="icon-arrows-up-down" d="M512 832l512-448h-1024zM0 256l512-448 512 448z" />
 <glyph unicode="&#xea02;" glyph-name="icon-bullet" d="M832 80c0-44-36-80-80-80h-480c-44 0-80 36-80 80v480c0 44 36 80 80 80h480c44 0 80-36 80-80v-480z" />
@@ -104,6 +105,9 @@
 <glyph unicode="&#xea31;" glyph-name="icon-history" d="M576 768c-247.4 0-448-200.6-448-448h-128l192-192 192 192h-128c0 85.4 33.2 165.8 93.8 226.2 60.4 60.6 140.8 93.8 226.2 93.8s165.8-33.2 226.2-93.8c60.6-60.4 93.8-140.8 93.8-226.2s-33.2-165.8-93.8-226.2c-60.4-60.6-140.8-93.8-226.2-93.8s-165.8 33.2-226.2 93.8l-90.6-90.6c81-81 193-131.2 316.8-131.2 247.4 0 448 200.6 448 448s-200.6 448-448 448zM576 560c-26.6 0-48-21.4-48-48v-211.8l142-142c9.4-9.4 21.6-14 34-14s24.6 4.6 34 14c18.8 18.8 18.8 49.2 0 67.8l-114 114v172c0 26.6-21.4 48-48 48z" />
 <glyph unicode="&#xea32;" glyph-name="icon-arrow-up-to-parent" horiz-adv-x="1056" d="M643.427 6.739c-81.955 0.697-148.179 67.065-148.642 149.010v395.872l296.871-247.393v197.914l-395.828 329.857-395.828-328.62v-197.502l296.871 246.156v-396.241c0-190.905 155.239-346.556 346.144-346.968l412.321-0.825 0.412 197.914z" />
 <glyph unicode="&#xea33;" glyph-name="icon-crosshair-in-circle" d="M512 832c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM783.6 48.4c-54.634-54.8-125.77-93.12-205.322-106.874l-2.278-0.326v250.8h-128v-250.8c-161.302 28.062-286.738 153.497-314.468 312.5l-0.332 2.3h250.8v128h-250.8c28.062 161.302 153.497 286.738 312.5 314.468l2.3 0.332v-250.8h128v250.8c161.302-28.062 286.738-153.497 314.468-312.5l0.332-2.3h-250.8v-128h250.8c-14.080-81.83-52.4-152.966-107.191-207.591l-0.009-0.009z" />
+<glyph unicode="&#xea34;" glyph-name="icon-target" d="M512 448c70.692 0 128-57.308 128-128s-57.308-128-128-128c-70.692 0-128 57.308-128 128v0c0.114 70.647 57.353 127.886 127.989 128h0.011zM512 576c-141.385 0-256-114.615-256-256s114.615-256 256-256c141.385 0 256 114.615 256 256v0c-0.114 141.339-114.661 255.886-255.989 256h-0.011zM512 704c211.87-0.128 383.575-171.912 383.575-383.8 0-211.967-171.833-383.8-383.8-383.8s-383.8 171.833-383.8 383.8c0 105.99 42.963 201.945 112.425 271.4v0c69.21 69.437 164.944 112.401 270.713 112.401 0.312 0 0.624 0 0.936-0.001h-0.048zM512 832c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512z" />
+<glyph unicode="&#xea35;" glyph-name="icon-items-collapse" d="M45.2 173.2h229.6l-274.8-274.6 90.6-90.6 274.6 274.8v-229.6h128v448h-448v-128zM1024 741.4l-90.6 90.6-274.6-274.8v229.6h-128v-448h448v128h-229.6l274.8 274.6z" />
+<glyph unicode="&#xea36;" glyph-name="icon-items-expand" d="M448-64h-229.4l274.6 274.8-90.4 90.4-274.8-274.6v229.4h-128v-448h448v128zM530.8 429.2l90.4-90.4 274.8 274.6v-229.4h128v448h-448v-128h229.4l-274.6-274.8z" />
 <glyph unicode="&#xeb00;" glyph-name="icon-activity" d="M576 768h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xeb01;" glyph-name="icon-activity-mode" d="M512 832c-214.8 0-398.8-132.4-474.8-320h90.8c56.8 0 108-24.8 143-64h241l-192 192h256l320-320-320-320h-256l192 192h-241c-35-39.2-86.2-64-143-64h-90.8c76-187.6 259.8-320 474.8-320 282.8 0 512 229.2 512 512s-229.2 512-512 512z" />
 <glyph unicode="&#xeb02;" glyph-name="icon-autoflow-tabular" d="M192 832c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 832h256v-1024h-256v1024zM832 832h-64v-704h256v512c0 105.6-86.4 192-192 192z" />

src/styles/vue-styles.scss

@@ -18,6 +18,7 @@
 @import "../plugins/folderView/components/list-item.scss";
 @import "../plugins/folderView/components/list-view.scss";
 @import "../plugins/imagery/components/imagery-view-layout.scss";
+@import "../plugins/plotlyPlot/components/plotly.scss";
 @import "../plugins/telemetryTable/components/table-row.scss";
 @import "../plugins/telemetryTable/components/telemetry-filter-indicator.scss";
 @import "../plugins/tabs/components/tabs.scss";

src/ui/components/ObjectView.vue

@@ -90,7 +90,15 @@ export default {
             this.openmct.objectViews.off('clearData', this.clearData);
         },
         invokeEditModeHandler(editMode) {
-            this.currentView.onEditModeChange(editMode);
+            let edit;
+
+            if (this.currentObject.locked) {
+                edit = false;
+            } else {
+                edit = editMode;
+            }
+
+            this.currentView.onEditModeChange(edit);
         },
         toggleEditView(editMode) {
             this.clear();
@@ -227,7 +235,11 @@ export default {
         },
         onDragOver(event) {
             if (this.hasComposableDomainObject(event)) {
-                event.preventDefault();
+                if (this.isEditingAllowed()) {
+                    event.preventDefault();
+                } else {
+                    event.stopPropagation();
+                }
             }
         },
         addObjectToParent(event) {
@@ -283,6 +295,13 @@ export default {
                     this.currentView.onClearData();
                 }
             }
+        },
+        isEditingAllowed() {
+            let browseObject = this.openmct.layout.$refs.browseObject.currentObject,
+                objectPath= this.currentObjectPath || this.objectPath,
+                parentObject = objectPath[1];
+
+            return [browseObject, parentObject, this.currentObject].every(object => !object.locked);
         }
     }
 }

src/ui/components/toggle-switch.scss

@@ -58,7 +58,6 @@
 
     &__label {
         margin-left: $interiorMarginSm;
-        margin-right: $interiorMargin;
         white-space: nowrap;
     }
 }

src/ui/components/viewControl.vue

@@ -1,10 +1,10 @@
 <template>
 <span
-    :class="[
-        controlClass,
-        { 'c-disclosure-triangle--expanded' : value },
-        {'is-enabled' : enabled }
-    ]"
+    class="c-disclosure-triangle"
+    :class="{
+        'c-disclosure-triangle--expanded' : value,
+        'is-enabled' : enabled
+    }"
     @click="handleClick"
 ></span>
 </template>
@@ -25,10 +25,6 @@ export default {
         propagate: {
             type: Boolean,
             default: true
-        },
-        controlClass: {
-            type: String,
-            default: 'c-disclosure-triangle'
         }
     },
     methods: {

src/ui/inspector/Inspector.vue

@@ -54,7 +54,6 @@ export default {
     inject: ['openmct'],
     components: {
         StylesInspectorView,
-        // StylesInspectorView,
         multipane,
         pane,
         Elements,

src/ui/inspector/inspector.scss

@@ -143,7 +143,7 @@
     &__label {
         color: $colorInspectorPropName;
 
-        &[title] {
+        &[title]:not([title=""]) {
             // When a cell has a title, assume it's helpful text
             cursor: help;
         }

src/ui/layout/BrowseBar.vue

@@ -3,8 +3,7 @@
     <div class="l-browse-bar__start">
         <button
             v-if="hasParent"
-            class="l-browse-bar__nav-to-parent-button c-icon-button c-icon-button--major icon-arrow-nav-to-parent"
-            title="Navigate up to parent"
+            class="l-browse-bar__nav-to-parent-button c-icon-button c-icon-button--major icon-pointer-left"
             @click="goToParent"
         ></button>
         <div
@@ -42,7 +41,17 @@
         />
         <div class="l-browse-bar__actions">
             <button
-                v-if="isViewEditable & !isEditing"
+                v-if="isViewEditable && !isEditing"
+                :title="lockedOrUnlocked"
+                class="c-button"
+                :class="{
+                    'icon-lock': domainObject.locked,
+                    'icon-unlocked': !domainObject.locked
+                }"
+                @click="toggleLock(!domainObject.locked)"
+            ></button>
+            <button
+                v-if="isViewEditable && !isEditing && !domainObject.locked"
                 class="l-browse-bar__actions__edit c-button c-button--major icon-pencil"
                 title="Edit"
                 @click="edit()"
@@ -162,6 +171,13 @@ export default {
                 return currentViewProvider.canEdit && currentViewProvider.canEdit(this.domainObject);
             }
             return false;
+        },
+        lockedOrUnlocked() {
+            if (this.domainObject.locked) {
+                return 'Locked for editing - click to unlock.';
+            } else {
+                return 'Unlocked for editing - click to lock.';
+            }
         }
     },
     watch: {
@@ -272,6 +288,9 @@ export default {
         },
         goToParent() {
             window.location.hash = this.parentUrl;
+        },
+        toggleLock(flag) {
+            this.openmct.objects.mutate(this.domainObject, 'locked', flag);
         }
     }
 }

src/ui/layout/Layout.vue

@@ -47,23 +47,12 @@
             label="Browse"
             collapsable
         >
-            <button
-                    slot="controls"
-                    class="c-icon-button icon-crosshair-in-circle"
-                    title="Show selected item in tree"
-                    @click="handleSyncTreeNavigation"
-            >
-            </button>
-            <mct-tree
-                :sync-tree-navigation="triggerSync"
-                class="l-shell__tree"
-            />
+            <mct-tree class="l-shell__tree" />
         </pane>
         <pane class="l-shell__pane-main">
             <browse-bar
                 ref="browseBar"
                 class="l-shell__main-view-browse-bar"
-                @sync-tree-navigation="handleSyncTreeNavigation"
             />
             <toolbar
                 v-if="toolbar"
@@ -165,8 +154,7 @@ export default {
             conductorComponent: undefined,
             isEditing: false,
             hasToolbar: false,
-            headExpanded,
-            triggerSync: false
+            headExpanded
         }
     },
     computed: {
@@ -216,9 +204,6 @@ export default {
             }
 
             this.hasToolbar = structure.length > 0;
-        },
-        handleSyncTreeNavigation() {
-            this.triggerSync = !this.triggerSync;
         }
     }
 }

src/ui/layout/layout.scss

@@ -304,10 +304,6 @@
         display: inline-flex;
     }
 
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
-
     &__start,
     &__end,
     &__actions {
@@ -318,18 +314,14 @@
     &__actions,
     &__end {
         > * + * {
-            margin-left: $interiorMarginSm;
+            margin-left: $interiorMargin;
         }
     }
 
     &__start {
         flex: 1 1 auto;
-        //margin-right: $interiorMargin;
+        margin-right: $interiorMargin;
         min-width: 0; // Forces interior to compress when pushed on
-
-        [class*='button'] {
-            flex: 0 0 auto;
-        }
     }
 
     &__end {
@@ -338,15 +330,15 @@
 
     &__nav-to-parent-button,
     &__disclosure-button {
-        //flex: 0 0 auto;
+        flex: 0 0 auto;
     }
 
     &__nav-to-parent-button {
         // This is an icon-button
-        //$p: $interiorMargin;
-        //margin-right: $interiorMargin;
-        //padding-left: $p;
-        //padding-right: $p;
+        $p: $interiorMargin;
+        margin-right: $interiorMargin;
+        padding-left: $p;
+        padding-right: $p;
 
         .is-editing & {
             display: none;
@@ -359,8 +351,7 @@
     }
 
     &__object-name--w {
-        @include headerFont(1.5em);
-        margin-left: $interiorMarginLg;
+        @include headerFont(1.4em);
         min-width: 0;
 
         &:before {

src/ui/layout/layoutSpec.js

@@ -1,69 +0,0 @@
-import {
-    createOpenMct,
-    spyOnBuiltins,
-    resetApplicationState,
-    generatePromises,
-    getMockObjects
-} from 'utils/testing';
-
-fdescribe("the tree navigation", () => {
-    let openmct,
-        element,
-        child;
-
-    beforeAll(() => {
-        this.removeAllSpies();
-        resetApplicationState(openmct);
-    })
-
-    beforeEach((done) => {
-        openmct = createOpenMct();
-
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
-
-        spyOnBuiltins(['requestAnimationFrame']);
-        window.requestAnimationFrame.and.callFake((callBack) => {
-            callBack();
-        });
-
-        let promises = generatePromises(['root']),
-            root = getMockObjects({
-                objectKeyStrings: ['root'],
-                overwrite: {
-                    root: {
-                        composition: [{ namespace: '', key: 'mine' }]
-                    }
-                }
-            }).root;
-
-        spyOn(openmct.objects, 'get').and.callFake((id) => {
-            console.log('object get', id);
-            if (id === 'ROOT' || id.key === 'ROOT') {
-                promises.rootPromiseResolve(root);
-                return promises.rootPromise;
-            } else {
-                console.log('get other');
-            }
-        });
-
-        spyOn(openmct.composition, 'get').and.callFake((domainObject) => {
-            console.log('comp get', domainObject);
-        });
-
-        openmct.on('start', done);
-        openmct.start();
-    });
-
-    afterEach(() => {
-        this.removeAllSpies();
-        resetApplicationState(openmct);
-    });
-
-    it("should be true", () => {
-        let tree = document.querySelector('.c-tree-and-search');
-        console.log('tree', tree);
-        expect(true).toBe(false);
-    });
-});

src/ui/layout/mct-tree.scss

@@ -1,13 +1,9 @@
 .c-tree-and-search {
-    $hoverBg: rgba(#000, 0.1);
-    $hoverFg: #ccc;
-    $selected: #fff;
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
     //TODO: Do we need this???
     //padding-right: $interiorMarginSm;
-    width: 100%;
     overflow: auto;
 
     > * + * { margin-top: $interiorMargin; }
@@ -16,6 +12,10 @@
         flex: 0 0 auto;
     }
 
+    &__loading {
+        flex: 1 1 auto;
+    }
+
     &__no-results {
         font-style: italic;
         opacity: 0.6;
@@ -26,115 +26,6 @@
         height: 0; // Chrome 73 overflow bug fix
         padding-right: $interiorMarginSm;
     }
-
-    // new tree refactor
-    .c-tree,
-    .c-list {
-        &__item {
-            border-radius: 0;
-
-            &:hover {
-                background: $hoverBg;
-
-                [class*="__name"] {
-                    color: darken($colorKeyFg, 10%);
-                }
-            }
-
-            &.is-navigated-object,
-            &.is-selected {
-                background: none;
-
-                [class*="__name"] {
-                    color: $selected;
-                }
-            }
-        }
-    }
-    // new tree refactor
-    .c-tree {
-        flex: 1 1 auto;
-        overflow-x: hidden;
-        overflow-y: auto;
-        transition: all;
-
-        .scrollable-children {
-            .c-tree__item-h {
-                width: 100%;
-                &.empty {
-                    font-style: italic;
-                    color: #666;
-                    display: inline;
-                    vertical-align: middle;
-                }
-            }
-        }
-
-        .c-tree {
-            padding-left: 0;
-        }
-
-        &__item {
-            //border-bottom: 1px solid $colorInteriorBorder;
-
-            &.is-navigated-object,
-            &.is-selected {
-                .c-tree__item__type-icon:before {
-                    color: $selected;
-                }
-            }
-
-            .c-nav {
-                $dimension: 20px;
-
-                &__up, &__down {
-                    color: #fff;
-                    flex: 0 0 auto;
-                    height: $dimension;
-                    width: $dimension;
-                    visibility: hidden;
-                    position: relative;
-                    text-align: center;
-
-                    &.is-enabled {
-                        visibility: visible;
-                    }
-
-                    &:hover {
-                        color: darken($colorKeyFg, 10%);
-                    }
-
-                    &:before {
-                        // Nav arrow
-                        $color: rgba(#999, 0.5); // TODO: must make this theme-compliant
-                        $dimension: 9px;
-                        $width: 3px;
-                        border: solid $color;
-                        //border-width: $width;
-                        border-width: 0 $width $width 0;
-                        content: '';
-                        display: block;
-                        position: absolute;
-                        left: 50%; top: 50%;
-                        height: $dimension;
-                        width: $dimension;
-                    }
-
-                    &:hover:before {
-                        border-color: $colorItemTreeHoverFg;
-                    }
-                }
-
-                &__up:before {
-                    transform: translate(-30%, -50%) rotate(135deg);
-                }
-
-                &__down:before {
-                    transform: translate(-70%, -50%) rotate(-45deg);
-                }
-            }
-        }
-    }
 }
 
 .c-tree,
@@ -266,32 +157,3 @@
         padding: $interiorMargin;
     }
 }
-
-// TRANSITIONS
-.slide-left,
-.slide-right {
-  animation-duration: 500ms;
-  animation-iteration-count: 1;
-  transition: all;
-  transition-timing-function: ease-in-out;
-}
-
-.slide-left {
-  animation-name: animSlideLeft;
-}
-
-.slide-right {
-  animation-name: animSlideRight;
-}
-
-@keyframes animSlideLeft {
-  0% {opactiy: 0; transform: translateX(100%);}
-  10% {opacity: 1;}
-  100% {transform: translateX(0);}
-}
-
-@keyframes animSlideRight {
-  0% {opactiy: 0; transform: translateX(-100%);}
-  10% {opacity: 1;}
-  100% {transform: translateX(0);}
-}

src/ui/layout/mct-tree.vue

@@ -1,7 +1,5 @@
 <template>
-<div
-    class="c-tree-and-search"
->
+<div class="c-tree-and-search">
     <div class="c-tree-and-search__search">
         <search
             ref="shell-search"
@@ -12,8 +10,15 @@
         />
     </div>
 
+    <!-- loading -->
     <div
-        v-if="(searchValue && allTreeItems.length === 0 && !isLoading) || (searchValue && searchResultItems.length === 0)"
+        v-if="isLoading"
+        class="c-tree-and-search__loading loading"
+    ></div>
+    <!-- end loading -->
+
+    <div
+        v-if="(allTreeItems.length === 0) || (searchValue && filteredTreeItems.length === 0)"
         class="c-tree-and-search__no-results"
     >
         No results found
@@ -21,70 +26,30 @@
 
     <!-- main tree -->
     <ul
-        ref="mainTree"
+        v-if="!isLoading"
+        v-show="!searchValue"
         class="c-tree-and-search__tree c-tree"
     >
-        <!-- ancestors -->
-        <div v-if="!activeSearch">
-            <tree-item
-                v-for="(ancestor, index) in ancestors"
-                :key="ancestor.id"
-                :node="ancestor"
-                :show-up="index < ancestors.length - 1"
-                :show-down="false"
-                :left-offset="index * 10 + 'px'"
-                @resetTree="handleReset"
-            />
-            <!-- loading -->
-            <li
-                v-if="isLoading"
-                class="c-tree__item c-tree-and-search__loading loading"
-            >
-                <span class="c-tree__item__label">Loading...</span>
-            </li>
-            <!-- end loading -->
-        </div>
-        <!-- currently viewed children -->
-        <transition
-            @enter="childrenIn"
-        >
-            <li
-                v-if="!isLoading"
-                :class="childrenSlideClass"
-                style="{ position: relative }"
-            >
-                <ul
-                    ref="scrollable"
-                    class="scrollable-children"
-                    :style="scrollableStyles()"
-                    @scroll="scrollItems"
-                >
-                    <div :style="{ height: childrenHeight + 'px'}">
-                        <tree-item
-                            v-for="(treeItem, index) in visibleItems"
-                            :key="treeItem.id"
-                            :node="treeItem"
-                            :left-offset="itemLeftOffset"
-                            :item-offset="itemOffset"
-                            :item-index="index"
-                            :item-height="itemHeight"
-                            :virtual-scroll="!noScroll"
-                            :show-down="activeSearch ? false : true"
-                            @expanded="handleExpanded"
-                        />
-                        <li
-                            v-if="visibleItems.length === 0"
-                            :style="emptyStyles()"
-                            class="c-tree__item-h empty"
-                        >
-                            Empty
-                        </li>
-                    </div>
-                </ul>
-            </li>
-        </transition>
+        <tree-item
+            v-for="treeItem in allTreeItems"
+            :key="treeItem.id"
+            :node="treeItem"
+        />
     </ul>
     <!-- end main tree -->
+
+    <!-- search tree -->
+    <ul
+        v-if="searchValue"
+        class="c-tree-and-search__tree c-tree"
+    >
+        <tree-item
+            v-for="treeItem in filteredTreeItems"
+            :key="treeItem.id"
+            :node="treeItem"
+        />
+    </ul>
+    <!-- end search tree -->
 </div>
 </template>
 
@@ -92,14 +57,6 @@
 import treeItem from './tree-item.vue'
 import search from '../components/search.vue';
 
-const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
-const ROOT_PATH = '/browse/';
-const ITEM_BUFFER = 5;
-const MAIN_TREE_RECHECK_DELAY = 100;
-const RESIZE_FIRE_DELAY_MS = 500;
-let windowResizeId = undefined,
-    windowResizing = false;
-
 export default {
     inject: ['openmct'],
     name: 'MctTree',
@@ -107,290 +64,40 @@ export default {
         search,
         treeItem
     },
-    props: {
-        syncTreeNavigation: {
-            type: Boolean,
-            required: true
-        }
-    },
     data() {
         return {
-            isLoading: false,
             searchValue: '',
             allTreeItems: [],
-            searchResultItems: [],
-            visibleItems: [],
-            ancestors: [],
-            childrenSlideClass: 'slide-left',
-            availableContainerHeight: 0,
-            noScroll: true,
-            updatingView: false,
-            itemHeight: 28,
-            itemOffset: 0,
-            childrenHeight: 0,
-            scrollable: undefined,
-            pageThreshold: 50,
-            activeSearch: false
-        }
-    },
-    computed: {
-        currentNavigatedPath() {
-            return this.ancestors
-                .map((ancestor) => ancestor.id)
-                .join('/');
-        },
-        currentObjectPath() {
-            let ancestorsCopy = [...this.ancestors];
-            return ancestorsCopy
-                .reverse()
-                .map((ancestor) => ancestor.object);
-        },
-        focusedItems() {
-            return this.activeSearch ? this.searchResultItems : this.allTreeItems;
-        },
-        itemLeftOffset() {
-            return this.activeSearch ? '0px' : this.ancestors.length * 10 + 'px';
-        }
-    },
-    watch: {
-        syncTreeNavigation() {
-            const AND_SAVE_PATH = true;
-            let currentLocationPath = this.openmct.router.currentLocation.path,
-                jumpAndScroll = currentLocationPath &&
-                    this.currentlyViewedObjectParentPath() &&
-                    !this.currentPathIsActivePath(),
-                justScroll = this.currentPathIsActivePath() && !this.noScroll;
-
-            if(this.searchValue) {
-                this.searchValue = '';
-            }
-
-            if(jumpAndScroll) {
-                this.scrollTo = this.currentlyViewedObjectId();
-                this.allChildren = [];
-                this.ancestors = [];
-                this.jumpPath = this.currentlyViewedObjectParentPath();
-                this.jumpToPath(AND_SAVE_PATH);
-            } else if(justScroll) {
-                this.scrollTo = this.currentlyViewedObjectId();
-                this.autoScroll();
-            }
-        },
-        searchValue() {
-            if(this.searchValue !== '' && !this.activeSearch) {
-                this.searchActivated();
-            } else if(this.searchValue === '') {
-                this.searchDeactivated();
-            }
-        },
-        searchResultItems() {
-            this.setContainerHeight();
-            this.setChildrenHeight();
+            filteredTreeItems: [],
+            isLoading: false
         }
     },
     mounted() {
-        let savedPath = this.getSavedNavigatedPath();
-        if(savedPath) {
-            let scrollIfApplicable = () => {
-                if(this.currentPathIsActivePath()) {
-                    this.scrollTo = this.currentlyViewedObjectId();
-                }
-            };
-            this.jumpPath = savedPath;
-            this.afterJump = scrollIfApplicable;
-        }
         this.searchService = this.openmct.$injector.get('searchService');
-        window.addEventListener('resize',  this.handleWindowResize);
-        this.openmct.objects.get('ROOT').then(root => {
-            let rootNode = this.buildTreeItem(root);
-            this.getAllChildren(rootNode);
-        });
-    },
-    destroyed() {
-        window.removeEventListener('resize', this.handleWindowResize);
+        this.getAllChildren();
     },
     methods: {
-        updatevisibleItems() {
-            if (!this.updatingView) {
-                this.updatingView = true;
-                requestAnimationFrame(()=> {
-                    let start = 0,
-                        end = this.pageThreshold,
-                        allItemsCount = this.focusedItems.length;
-
-                    if (allItemsCount < this.pageThreshold) {
-                        end = allItemsCount;
-                    } else {
-                        let firstVisible = this.calculateFirstVisibleItem(),
-                            lastVisible = this.calculateLastVisibleItem(),
-                            totalVisible = lastVisible - firstVisible,
-                            numberOffscreen = this.pageThreshold - totalVisible;
-
-                        start = firstVisible - Math.floor(numberOffscreen / 2);
-                        end = lastVisible + Math.ceil(numberOffscreen / 2);
-
-                        if (start < 0) {
-                            start = 0;
-                            end = Math.min(this.pageThreshold, allItemsCount);
-                        } else if (end >= allItemsCount) {
-                            end = allItemsCount;
-                            start = end - this.pageThreshold + 1;
-                        }
-                    }
-                    this.itemOffset = start;
-                    this.visibleItems = this.focusedItems.slice(start, end);
-
-                    this.updatingView = false;
-                });
-            }
-        },
-        setContainerHeight() {
-            this.$nextTick(() => {
-                let mainTree = this.$refs.mainTree,
-                    mainTreeHeight = mainTree.clientHeight;
-
-                if(mainTreeHeight !== 0) {
-                    let ancestorsHeight = this.calculateAncestorHeight(),
-                        allChildrenHeight = this.calculateChildrenHeight();
-
-                    if(this.activeSearch) {
-                        ancestorsHeight = 0;
-                    }
-                    this.availableContainerHeight = mainTreeHeight - ancestorsHeight;
-
-                    if(allChildrenHeight > this.availableContainerHeight) {
-                        this.setPageThreshold();
-                        this.noScroll = false;
-                    } else {
-                        this.noScroll = true;
-                    }
-                    this.updatevisibleItems();
-                } else {
-                    setTimeout(this.setContainerHeight, MAIN_TREE_RECHECK_DELAY);
-                }
-            });
-        },
-        calculateFirstVisibleItem() {
-            let scrollTop = this.$refs.scrollable.scrollTop;
-            return Math.floor(scrollTop / this.itemHeight);
-        },
-        calculateLastVisibleItem() {
-            let scrollBottom = this.$refs.scrollable.scrollTop + this.$refs.scrollable.offsetHeight;
-            return Math.ceil(scrollBottom / this.itemHeight);
-        },
-        calculateChildrenHeight() {
-            let childrenCount = this.focusedItems.length;
-            return this.itemHeight * childrenCount;
-        },
-        setChildrenHeight() {
-            this.childrenHeight = this.calculateChildrenHeight();
-        },
-        calculateAncestorHeight() {
-            let ancestorCount = this.ancestors.length;
-            return this.itemHeight * ancestorCount;
-        },
-        setPageThreshold() {
-            let threshold = Math.ceil(this.availableContainerHeight / this.itemHeight) + ITEM_BUFFER;
-            // all items haven't loaded yet (nextTick not working for this)
-            if(threshold === ITEM_BUFFER) {
-                setTimeout(this.setPageThreshold, 100);
-            } else {
-                this.pageThreshold = threshold;
-            }
-        },
-        handleWindowResize() {
-            if(!windowResizing) {
-                windowResizing = true;
-                window.clearTimeout(windowResizeId);
-                windowResizeId = window.setTimeout(() => {
-                    this.setContainerHeight();
-                    windowResizing = false;
-                }, RESIZE_FIRE_DELAY_MS);
-            }
-        },
-        getAllChildren(node) {
+        getAllChildren() {
             this.isLoading = true;
-            if (this.composition) {
-                this.composition.off('add', this.addChild);
-                this.composition.off('remove', this.removeChild);
-                delete this.composition;
-            }
-            this.allTreeItems = [];
-            this.composition = this.openmct.composition.get(node.object);
-            this.composition.on('add', this.addChild);
-            this.composition.on('remove', this.removeChild);
-            this.composition.load().then(this.finishLoading);
-        },
-        buildTreeItem(domainObject) {
-            let navToParent = ROOT_PATH + this.currentNavigatedPath;
-            if(navToParent === ROOT_PATH) {
-                navToParent = navToParent.slice(0, -1);
-            }
-            return {
-                id: this.openmct.objects.makeKeyString(domainObject.identifier),
-                object: domainObject,
-                objectPath: [domainObject].concat(this.currentObjectPath),
-                navigateToParent: navToParent
-            };
-        },
-        addChild(child) {
-            this.allTreeItems.push(this.buildTreeItem(child));
-        },
-        removeChild(identifier) {
-            let removeId = this.openmct.objects.makeKeyString(identifier);
-            this.allChildren = this.children
-                .filter(c => c.id !== removeId);
-        },
-        finishLoading() {
-            this.isLoading = false;
-            if(this.jumpPath) {
-                this.jumpToPath();
-            }
-            this.autoScroll();
-        },
-        async jumpToPath(saveExpandedPath = false) {
-            let nodes = this.jumpPath.split('/'),
-                currentNode,
-                newParent;
-
-            for(let i = 0; i < nodes.length; i++) {
-                currentNode = await this.openmct.objects.get(nodes[i]);
-                newParent = this.buildTreeItem(currentNode);
-                this.ancestors.push(newParent);
-                if(i === nodes.length - 1) {
-                    this.jumpPath = '';
-                    this.getAllChildren(newParent);
-                    if(this.afterJump) {
-                        this.$nextTick(() => {
-                            this.afterJump();
-                            delete this.afterJump;
-                        });
-                    }
-                    if(saveExpandedPath) {
-                        this.setCurrentNavigatedPath();
-                    }
-                }
-            }
-        },
-        autoScroll() {
-            if(this.scrollTo) {
-                let indexOfScroll = this.indexOfItemById(this.scrollTo);
-                this.$nextTick(() => {
-                    this.$refs.scrollable.scrollTop = indexOfScroll * this.itemHeight;
+            this.openmct.objects.get('ROOT')
+                .then(root => {
+                    return this.openmct.composition.get(root).load()
+                })
+                .then(children => {
+                    this.isLoading = false;
+                    this.allTreeItems = children.map(c => {
+                        return {
+                            id: this.openmct.objects.makeKeyString(c.identifier),
+                            object: c,
+                            objectPath: [c],
+                            navigateToParent: '/browse'
+                        };
+                    });
                 });
-                this.scrollTo = undefined;
-            }
         },
-        indexOfItemById(id) {
-            for(let i = 0; i < this.allTreeItems.length; i++) {
-                if(this.allTreeItems[i].id === id) {
-                    return i;
-                }
-            }
-        },
-        getSearchResults() {
+        getFilteredChildren() {
             this.searchService.query(this.searchValue).then(children => {
-                this.searchResultItems = children.hits.map(child => {
+                this.filteredTreeItems = children.hits.map(child => {
 
                     let context = child.object.getCapability('context'),
                         object = child.object.useCapability('adapter'),
@@ -401,9 +108,9 @@ export default {
                         objectPath = context.getPath().slice(1)
                             .map(oldObject => oldObject.useCapability('adapter'))
                             .reverse();
-                        navigateToParent = objectPath.slice(1)
-                            .map((parent) => this.openmct.objects.makeKeyString(parent.identifier));
-                        navigateToParent = ROOT_PATH + navigateToParent.reverse().join('/');
+                        navigateToParent = '/browse/' + objectPath.slice(1)
+                            .map((parent) => this.openmct.objects.makeKeyString(parent.identifier))
+                            .join('/');
                     }
 
                     return {
@@ -419,88 +126,8 @@ export default {
             this.searchValue = value;
 
             if (this.searchValue !== '') {
-                this.getSearchResults();
+                this.getFilteredChildren();
             }
-        },
-        searchActivated() {
-            this.activeSearch = true;
-            this.$refs.scrollable.scrollTop = 0;
-        },
-        searchDeactivated() {
-            this.activeSearch = false;
-            this.$refs.scrollable.scrollTop = 0;
-            this.setContainerHeight();
-            this.setChildrenHeight();
-        },
-        handleReset(node) {
-            this.childrenSlideClass = 'slide-right';
-            this.ancestors.splice(this.ancestors.indexOf(node) + 1);
-            this.getAllChildren(node);
-            this.setCurrentNavigatedPath();
-        },
-        handleExpanded(node) {
-            if(!this.activeSearch) {
-                this.childrenSlideClass = 'slide-left';
-                let newParent = this.buildTreeItem(node);
-                this.ancestors.push(newParent);
-                this.getAllChildren(newParent);
-                this.setCurrentNavigatedPath();
-            }
-        },
-        getSavedNavigatedPath() {
-            return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED));
-        },
-        setCurrentNavigatedPath() {
-            if(!this.searchValue) {
-                localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(this.currentNavigatedPath));
-            }
-        },
-        currentPathIsActivePath() {
-            return this.getSavedNavigatedPath() === this.currentlyViewedObjectParentPath();
-        },
-        currentlyViewedObjectId() {
-            let currentPath = this.openmct.router.currentLocation.path,
-                id;
-            if(currentPath) {
-                currentPath = currentPath.split(ROOT_PATH)[1];
-                id = currentPath.split('/').pop();
-            }
-            return id;
-        },
-        currentlyViewedObjectParentPath() {
-            let currentPath = this.openmct.router.currentLocation.path,
-                path;
-            if(currentPath) {
-                currentPath = currentPath.split(ROOT_PATH)[1];
-                currentPath = currentPath.split('/');
-                currentPath.pop();
-                path = currentPath.join('/');
-            }
-            return path;
-        },
-        scrollItems(event) {
-            if(!windowResizing) {
-                this.updatevisibleItems();
-            }
-        },
-        scrollableStyles() {
-            return {
-                height: this.availableContainerHeight + 'px',
-                overflow: this.noScroll ? 'hidden' : 'scroll'
-            }
-        },
-        emptyStyles() {
-            let offset = ((this.ancestors.length + 1) * 10) + 20; // extra 20 accounts for up arrow nav space
-            return {
-                paddingLeft: offset + 'px',
-                height: this.itemHeight + 'px'
-            };
-        },
-        childrenIn(el, done) {
-            // more reliable way then nextTick
-            this.setContainerHeight();
-            this.setChildrenHeight();
-            done();
         }
     }
 }

src/ui/layout/pane.scss

@@ -40,10 +40,6 @@
         display: flex;
         align-items: center;
         @include desktop() { margin-bottom: $interiorMargin; }
-
-        [class*="button"] {
-            color: $colorBtnMajorBg;
-        }
     }
 
     &--reacts {
@@ -132,23 +128,12 @@
             @include userSelectNone();
             color: $splitterBtnLabelColorFg;
             display: block;
+            pointer-events: none;
             text-transform: uppercase;
+            transform-origin: top left;
             flex: 1 1 auto;
         }
 
-        [class*="expand-button"] {
-            display: none; // Hidden by default
-            background: $splitterCollapsedBtnColorBg;
-            color: $splitterCollapsedBtnColorFg;
-            font-size: 0.9em;
-
-            &:hover {
-                background: $splitterCollapsedBtnColorBgHov;
-                color: inherit;
-                transition: $transIn;
-            }
-        }
-
         &--resizing {
             // User is dragging the handle and resizing a pane
             @include userSelectNone();
@@ -175,12 +160,23 @@
                 display: none;
             }
 
-            [class*="collapse-button"] {
-                display: none;
+            .l-pane__header {
+                &:hover {
+                    color: $splitterCollapsedBtnColorFgHov;
+                    .l-pane__label {
+                        color: inherit;
+                    }
+                    .l-pane__collapse-button {
+                        background: $splitterCollapsedBtnColorBgHov;
+                        color: inherit;
+                        transition: $transIn;
+                    }
+                }
             }
 
-            [class*="expand-button"] {
-                display: block;
+            .l-pane__collapse-button {
+                background: $splitterCollapsedBtnColorBg;
+                color: $splitterCollapsedBtnColorFg;
             }
         }
 
@@ -202,26 +198,36 @@
 
             .l-pane__collapse-button {
                 &:before {
-                    content: $glyph-icon-line-horz;
+                    content: $glyph-icon-arrow-right-equilateral;
                 }
             }
 
             &[class*="--collapsed"] {
                 /************************ COLLAPSED HORIZONTAL SPLITTER, EITHER DIRECTION */
                 [class*="__header"] {
-                    display: none;
+                    @include abs();
+                    margin: 0;
                 }
 
-                [class*="expand-button"] {
+                [class*="label"] {
+                    position: absolute;
+                    transform: translate($interiorMarginLg + 1, 18px) rotate(90deg);
+                    left: 3px;
+                    top: 0;
+                    z-index: 1;
+                }
+
+                .l-pane__collapse-button {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0; // Only have to do this once, because of scaleX(-1) below.
                     position: absolute;
                     top: 0; right: 0; bottom: 0; left: 0;
                     height: auto; width: 100%;
-                    padding: $interiorMargin 2px;
+                    padding: 0;
 
-                    [class*="label"] {
-                        text-orientation: mixed;
-                        text-transform: uppercase;
-                        writing-mode: vertical-lr;
+                    &:before {
+                        position: absolute;
+                        top: 5px;
                     }
                 }
             }
@@ -237,9 +243,10 @@
                     transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
                 }
 
-                [class*="expand-button"] {
-                    border-top-left-radius: $controlCr;
-                    border-bottom-left-radius: $controlCr;
+                &[class*="--collapsed"] {
+                    .l-pane__collapse-button {
+                        transform: scaleX(-1);
+                    }
                 }
             }
 
@@ -254,9 +261,10 @@
                     transform: translateX(floor($splitterHandleD / 2));
                 }
 
-                [class*="expand-button"] {
-                    border-top-right-radius: $controlCr;
-                    border-bottom-right-radius: $controlCr;
+                &:not([class*="--collapsed"]) {
+                    .l-pane__collapse-button {
+                        transform: scaleX(-1);
+                    }
                 }
             }
         }

src/ui/layout/pane.vue

@@ -20,19 +20,12 @@
         <span v-if="label"
               class="l-pane__label"
         >{{ label }}</span>
-        <slot name="controls"></slot>
         <button
             v-if="collapsable"
-            class="l-pane__collapse-button c-icon-button"
+            class="l-pane__collapse-button c-button"
             @click="toggleCollapse"
         ></button>
     </div>
-    <button
-        class="l-pane__expand-button"
-        @click="toggleCollapse"
-    >
-        <span class="l-pane__expand-button__label">{{ label }}</span>
-    </button>
     <div class="l-pane__contents">
         <slot></slot>
     </div>

src/ui/layout/tree-item.vue

@@ -1,38 +1,38 @@
 <template>
-<li
-    :style="{
-        'top': virtualScroll ? itemTop : 'auto',
-        'position': virtualScroll ? 'absolute' : 'relative'
-    }"
-    class="c-tree__item-h"
->
+<li class="c-tree__item-h">
     <div
         class="c-tree__item"
-        :class="{
-            'is-alias': isAlias,
-            'is-navigated-object': navigated
-        }"
-        :style="{ paddingLeft: leftOffset }"
+        :class="{ 'is-alias': isAlias, 'is-navigated-object': navigated }"
     >
         <view-control
             v-model="expanded"
             class="c-tree__item__view-control"
-            :control-class="'c-nav__up'"
-            :enabled="showUp"
-            @input="resetTreeHere"
+            :enabled="hasChildren"
         />
         <object-label
             :domain-object="node.object"
             :object-path="node.objectPath"
             :navigate-to-path="navigateToPath"
         />
-        <view-control
-            v-model="expanded"
-            class="c-tree__item__view-control"
-            :control-class="'c-nav__down'"
-            :enabled="hasComposition && showDown"
-        />
     </div>
+    <ul
+        v-if="expanded"
+        class="c-tree"
+    >
+        <li
+            v-if="isLoading && !loaded"
+            class="c-tree__item-h"
+        >
+            <div class="c-tree__item loading">
+                <span class="c-tree__item__label">Loading...</span>
+            </div>
+        </li>
+        <tree-item
+            v-for="child in children"
+            :key="child.id"
+            :node="child"
+        />
+    </ul>
 </li>
 </template>
 
@@ -40,6 +40,8 @@
 import viewControl from '../components/viewControl.vue';
 import ObjectLabel from '../components/ObjectLabel.vue';
 
+const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
+
 export default {
     name: 'TreeItem',
     inject: ['openmct'],
@@ -51,44 +53,16 @@ export default {
         node: {
             type: Object,
             required: true
-        },
-        leftOffset: {
-            type: String,
-            default: '0px'
-        },
-        showUp: {
-            type: Boolean,
-            default: false
-        },
-        showDown: {
-            type: Boolean,
-            default: true
-        },
-        itemIndex: {
-            type: Number,
-            required: false,
-            default: undefined
-        },
-        itemOffset: {
-            type: Number,
-            required: false,
-            default: undefined
-        },
-        itemHeight: {
-            type: Number,
-            required: false,
-            default: 0
-        },
-        virtualScroll: {
-            type: Boolean,
-            default: false
         }
     },
     data() {
         this.navigateToPath = this.buildPathString(this.node.navigateToParent);
         return {
-            hasComposition: false,
+            hasChildren: false,
+            isLoading: false,
+            loaded: false,
             navigated: this.navigateToPath === this.openmct.router.currentLocation.path,
+            children: [],
             expanded: false
         }
     },
@@ -100,18 +74,30 @@ export default {
             }
             let parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
             return parentKeyString !== this.node.object.location;
-        },
-        itemTop() {
-            return (this.itemOffset + this.itemIndex) * this.itemHeight + 'px';
         }
     },
     watch: {
         expanded() {
-            this.$emit('expanded', this.domainObject);
+            if (!this.hasChildren) {
+                return;
+            }
+            if (!this.loaded && !this.isLoading) {
+                this.composition = this.openmct.composition.get(this.domainObject);
+                this.composition.on('add', this.addChild);
+                this.composition.on('remove', this.removeChild);
+                this.composition.load().then(this.finishLoading);
+                this.isLoading = true;
+            }
+            this.setLocalStorageExpanded(this.navigateToPath);
         }
     },
     mounted() {
-        let objectComposition = this.openmct.composition.get(this.node.object);
+        // TODO: should update on mutation.
+        // TODO: click navigation should not fubar hash quite so much.
+        // TODO: should highlight if navigated to.
+        // TODO: should have context menu.
+        // TODO: should support drag/drop composition
+        // TODO: set isAlias per tree-item
 
         this.domainObject = this.node.object;
         let removeListener = this.openmct.objects.observe(this.domainObject, '*', (newObject) => {
@@ -119,17 +105,49 @@ export default {
         });
 
         this.$once('hook:destroyed', removeListener);
-        if (objectComposition) {
-            this.hasComposition = true;
+        if (this.openmct.composition.get(this.node.object)) {
+            this.hasChildren = true;
         }
 
         this.openmct.router.on('change:path', this.highlightIfNavigated);
-        console.log(this.navigateToPath, this.openmct.router.currentLocation.path);
+
+        this.getLocalStorageExpanded();
+    },
+    beforeDestroy() {
+        /****
+            * calling this.setLocalStorageExpanded explicitly here because for whatever reason,
+            * the watcher on this.expanded is not triggering this.setLocalStorageExpanded(),
+            * even though Vue documentation states, "At this stage the instance is still fully functional."
+        *****/
+        this.expanded = false;
+        this.setLocalStorageExpanded();
     },
     destroyed() {
         this.openmct.router.off('change:path', this.highlightIfNavigated);
+        if (this.composition) {
+            this.composition.off('add', this.addChild);
+            this.composition.off('remove', this.removeChild);
+            delete this.composition;
+        }
     },
     methods: {
+        addChild(child) {
+            this.children.push({
+                id: this.openmct.objects.makeKeyString(child.identifier),
+                object: child,
+                objectPath: [child].concat(this.node.objectPath),
+                navigateToParent: this.navigateToPath
+            });
+        },
+        removeChild(identifier) {
+            let removeId = this.openmct.objects.makeKeyString(identifier);
+            this.children = this.children
+                .filter(c => c.id !== removeId);
+        },
+        finishLoading() {
+            this.isLoading = false;
+            this.loaded = true;
+        },
         buildPathString(parentPath) {
             return [parentPath, this.openmct.objects.makeKeyString(this.node.object.identifier)].join('/');
         },
@@ -140,8 +158,35 @@ export default {
                 this.navigated = false;
             }
         },
-        resetTreeHere() {
-            this.$emit('resetTree', this.node);
+        getLocalStorageExpanded() {
+            let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
+
+            if (expandedPaths) {
+                expandedPaths = JSON.parse(expandedPaths);
+                this.expanded = expandedPaths.includes(this.navigateToPath);
+            }
+        },
+        // expanded nodes/paths are stored in local storage as an array
+        setLocalStorageExpanded() {
+            let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
+            expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : [];
+
+            if (this.expanded) {
+                if (!expandedPaths.includes(this.navigateToPath)) {
+                    expandedPaths.push(this.navigateToPath);
+                }
+            } else {
+                // remove this node path and all children paths from stored expanded paths
+                expandedPaths = expandedPaths.filter(path => !path.startsWith(this.navigateToPath));
+            }
+
+            localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths));
+        },
+        removeLocalStorageExpanded() {
+            let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
+            expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : [];
+            expandedPaths = expandedPaths.filter(path => !path.startsWith(this.navigateToPath));
+            localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths));
         }
     }
 }

src/utils/testing.js

@@ -70,24 +70,6 @@ function clearBuiltinSpy(funcDefinition) {
     funcDefinition.object[funcDefinition.functionName] = funcDefinition.nativeFunction;
 }
 
-// for each name in the array passed in a promise and promiseResolve will be created
-// ex. names = ['test']
-// return {
-//   testPromise: ...,
-//   testPromiseResolve: ...
-// }
-export function generatePromises(names = []) {
-    let promises = {};
-
-    names.forEach((name) => {
-        promises[name + 'Promise'] = new Promise((resolve) => {
-            promises[name + 'PromiseResolve'] = resolve;
-        });
-    });
-
-    return promises;
-}
-
 export function getLatestTelemetry(telemetry = [], opts = {}) {
     let latest = [],
         timeFormat = opts.timeFormat || 'utc';
@@ -101,6 +83,22 @@ export function getLatestTelemetry(telemetry = [], opts = {}) {
     return latest;
 }
 
+// EXAMPLE:
+// getMockObjects({
+//     name: 'Jamie Telemetry',
+//     keys: ['test','other','yeah','sup'],
+//     format: 'local',
+//     telemetryConfig: {
+//          hints: {
+//              test: {
+//                  domain: 1
+//              },
+//              other: {
+//                  range: 2
+//              }
+//          }
+//      }
+// })
 export function getMockObjects(opts = {}) {
     opts.type = opts.type || 'default';
     if(opts.objectKeyStrings && !Array.isArray(opts.objectKeyStrings)) {
@@ -229,12 +227,6 @@ function copyObj(obj) {
 function setMockObjects() {
     return {
         default: {
-            root: {
-                identifier: { key: "ROOT", namespace: "" },
-                name: "The root object",
-                type: "root",
-                composition: [{ namespace: "", key: "mine"}]
-            },
             ladTable: {
                 identifier: { namespace: "", key: "lad-object"},
                 type: 'LadTable',