-Make reviewer requested changes

-Clarify prop for marking
-Include alternateControlBar in the marking prop
- - since it only makes sense for making

API.md

@@ -52,7 +52,6 @@
     - [The URL Status Indicator](#the-url-status-indicator)
     - [Creating a Simple Indicator](#creating-a-simple-indicator)
     - [Custom Indicators](#custom-indicators)
-  - [Included Plugins](#included-plugins)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -232,7 +231,7 @@ attributes
     of this object. This is used for specifying an icon to appear next to each 
     object of this type.
 
-The [Open MCT Tutorials](https://github.com/openmct/openmct-tutorial) provide a 
+The [Open MCT Tutorials](https://github.com/nasa/openmct-tutorial) provide a 
 step-by-step examples of writing code for Open MCT that includes a [section on 
 defining a new object type](https://github.com/nasa/openmct-tutorial#step-3---providing-objects).
 
@@ -424,7 +423,7 @@ attribute      | type   | flags    | notes
 
 ###### Value Hints
 
-Each telemetry value description has an object defining hints.  Keys in this this object represent the hint itself, and the value represents the weight of that hint.  A lower weight means the hint has a higher priority.  For example, multiple values could be hinted for use as the y axis of a plot (raw, engineering), but the highest priority would be the default choice.  Likewise, a table will use hints to determine the default order of columns.
+Each telemetry value description has an object defining hints.  Keys in this this object represent the hint itself, and the value represents the weight of that hint.  A lower weight means the hint has a higher priority.  For example, multiple values could be hinted for use as the y-axis of a plot (raw, engineering), but the highest priority would be the default choice.  Likewise, a table will use hints to determine the default order of columns.
 
 Known hints:
 
@@ -506,7 +505,7 @@ example:
 }
 ```
 
-This strategy says "I want the lastest data point in this time range".  A provider which recognizes this request should return only one value-- the latest-- in the requested time range.  Depending on your back-end implementation, performing these queries in bulk can be a large performance increase.  These are generally issued by views that are only capable of displaying a single value and only need to show the latest value.
+This strategy says "I want the latest data point in this time range".  A provider which recognizes this request should return only one value-- the latest-- in the requested time range.  Depending on your back-end implementation, performing these queries in bulk can be a large performance increase.  These are generally issued by views that are only capable of displaying a single value and only need to show the latest value.
 
 ##### `minmax` request strategy
 
@@ -601,7 +600,7 @@ evaluator, take a look at `examples/generator/SinewaveLimitProvider.js`.
 
 ### Telemetry Consumer APIs **draft**
 
-The APIs for requesting telemetry from Open MCT -- e.g. for use in custom views -- are currently in draft state and are being revised.  If you'd like to experiement with them before they are finalized, please contact the team via the contact-us link on our website.
+The APIs for requesting telemetry from Open MCT -- e.g. for use in custom views -- are currently in draft state and are being revised.  If you'd like to experiment with them before they are finalized, please contact the team via the contact-us link on our website.
 
 
 ## Time API
@@ -989,7 +988,7 @@ A common use case for indicators is to convey the state of some external system
 persistence backend or HTTP server. So long as this system is accessible via HTTP request, 
 Open MCT provides a general purpose indicator to show whether the server is available and 
 returing a 2xx status code. The URL Status Indicator is made available as a default plugin. See
-[Included Plugins](#included-plugins) below for details on how to install and configure the 
+the [documentation](./src/plugins/URLIndicatorPlugin) for details on how to install and configure the 
 URL Status Indicator.
 
 ### Creating a Simple Indicator
@@ -1028,7 +1027,7 @@ different colors to indicate status.
 
 ### Custom Indicators
 
-A completely custom indicator can be added by simple providing a DOM element to place alongside other indicators.
+A completely custom indicator can be added by simply providing a DOM element to place alongside other indicators.
 
 ``` javascript
     var domNode = document.createElement('div');
@@ -1041,59 +1040,3 @@ A completely custom indicator can be added by simple providing a DOM element to
         element: domNode
     });
 ```
-
-## Included Plugins
-
-Open MCT is packaged along with a few general-purpose plugins:
-
-* `openmct.plugins.Conductor` provides a user interface for working with time
-within the application. If activated, configuration must be provided. This is 
-detailed in the section on [Time Conductor Configuration](#time-conductor-configuration).
-* `openmct.plugins.CouchDB` is an adapter for using CouchDB for persistence
-  of user-created objects. This is a constructor that takes the URL for the
-  CouchDB database as a parameter, e.g.
-```javascript
-openmct.install(openmct.plugins.CouchDB('http://localhost:5984/openmct'))
-```
-* `openmct.plugins.Elasticsearch` is an adapter for using Elasticsearch for
-  persistence of user-created objects. This is a
-  constructor that takes the URL for the Elasticsearch instance as a
-  parameter. eg.
-```javascript
-openmct.install(openmct.plugins.CouchDB('http://localhost:9200'))
-```
-* `openmct.plugins.Espresso` and `openmct.plugins.Snow` are two different
-  themes (dark and light) available for Open MCT. Note that at least one
-  of these themes must be installed for Open MCT to appear correctly.
-* `openmct.plugins.URLIndicator` adds an indicator which shows the
-availability of a URL with the following options: 
-  - `url` : URL to indicate the status of
-  - `iconClass`: Icon to show in the status bar, defaults to `icon-database`, [list of all icons](https://nasa.github.io/openmct/style-guide/#/browse/styleguide:home?view=items)
-  - `interval`: Interval between checking the connection, defaults to `10000`
-  - `label` Name showing up as text in the status bar, defaults to url
-```javascript
-openmct.install(openmct.plugins.URLIndicator({
-  url: 'http://localhost:8080',
-    iconClass: 'check',
-    interval: 10000,
-    label: 'Localhost'
- })
-);
-```
-* `openmct.plugins.LocalStorage` provides persistence of user-created
-  objects in browser-local storage. This is particularly useful in
-  development environments.
-* `openmct.plugins.MyItems` adds a top-level folder named "My Items"
-  when the application is first started, providing a place for a
-  user to store created items.
-* `openmct.plugins.UTCTimeSystem` provides a default time system for Open MCT.
-
-Generally, you will want to either install these plugins, or install
-different plugins that provide persistence and an initial folder
-hierarchy.
-
-eg.
-```javascript
-openmct.install(openmct.plugins.LocalStorage());
-openmct.install(openmct.plugins.MyItems());
-```

LICENSE.md

@@ -0,0 +1,7 @@
+# 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 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.

LICENSES.md

@@ -1,691 +0,0 @@
-# Open MCT Licenses
-
-Open MCT, Copyright (c) 2014-2017, United States Government as represented by the Administrator of the National Aeronautics and Space Administration. All rights reserved.
-
-Open MCT is licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.  You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
-
-Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
-
-Open MCT includes source code licensed under additional open source licenses as follows.
-
-## Software Components Licenses
-
-This software includes components released under the following licenses:
-
----
-
-### SuperSocket
-
-#### Info
-
-* Link: https://supersocket.codeplex.com/
-
-* Version: 0.9.0.2
-
-* Author: Kerry Jiang
-
-* Description: Supports SuperWebSocket
-
-#### License
-
-Copyright 2012 Kerry Jiang (kerry-jiang@hotmail.com)
-
-SuperSocket 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.
-
----
-
-### SuperWebSocket
-
-#### Info
-
-* Link: https://superswebocket.codeplex.com/
-
-* Version: 0.9.0.2
-
-* Author: Kerry Jiang
-
-* Description: WebSocket implementation for client-server communication
-
-#### License
-
-Copyright 2010-2013 Kerry Jiang (kerry-jiang@hotmail.com)
-
-SuperWebSocket 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.
-
-
----
-
-### log4net
-
-#### Info
-
-* Link: http://logging.apache.org/log4net/
-
-* Version: 1.2.13
-
-* Author: Apache Software Foundation
-
-* Description: Logging.
-
-#### License
-
-Copyright © 2004-2015 Apache Software Foundation.
-
-log4net 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.
-
----
-
-### Blanket.js
-
-#### Info
-
-* Link: http://blanketjs.org/
-
-* Version: 1.1.5
-
-* Author: Alex Seville
-
-* Description: Code coverage measurement and reporting
-
-#### License
-
-Copyright (c) 2013 Alex Seville
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### Jasmine
-
-#### Info
-
-* Link: http://jasmine.github.io/
-
-* Version: 1.3.1
-
-* Author: Pivotal Labs
-
-* Description: Unit testing
-
-#### License
-
-Copyright (c) 2008-2011 Pivotal Labs
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### RequireJS
-
-#### Info
-
-* Link: http://requirejs.org/
-
-* Version: 2.1.22
-
-* Author: The Dojo Foundation
-
-* Description: Script loader
-
-#### License
-
-Copyright (c) 2010-2015, The Dojo Foundation
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### requirejs-text
-
-#### Info
-
-* Link: https://github.com/requirejs/text
-
-* Version: 2.0.14
-
-* Author: The Dojo Foundation
-
-* Description: Text loading plugin for RequireJS
-
-#### License
-
-Copyright (c) 2010-2014, The Dojo Foundation
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
----
-
-### AngularJS
-
-#### Info
-
-* Link: http://angularjs.org/
-
-* Version: 1.4.4
-
-* Author: Google
-
-* Description: Client-side web application framework
-
-#### License
-
-Copyright (c) 2010-2015 Google, Inc. http://angularjs.org
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### Angular-Route
-
-#### Info
-
-* Link: http://angularjs.org/
-
-* Version: 1.4.4
-
-* Author: Google
-
-* Description: Client-side view routing
-
-#### License
-
-Copyright (c) 2010-2015 Google, Inc. http://angularjs.org
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### ES6-Promise
-
-#### Info
-
-* Link: https://github.com/jakearchibald/es6-promise
-
-* Version: 3.0.2
-
-* Authors: Yehuda Katz, Tom Dale, Stefan Penner and contributors
-
-* Description: Promise polyfill for pre-ECMAScript 6 browsers
-
-#### License
-
-Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### screenfull.js
-
-#### Info
-
-* Link: https://github.com/sindresorhus/screenfull.js/
-
-* Version: 3.0.0
-
-* Author: Sindre Sorhus
-
-* Description: Wrapper for cross-browser usage of fullscreen API
-
-#### License
-
-Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### Math.uuid.js
-
-#### Info
-
-* Link: https://github.com/broofa/node-uuid
-
-* Version: 1.4.7
-
-* Author: Robert Kieffer
-
-* Description: Unique identifer generation.
-
-#### License
-
-Copyright (c) 2010-2012 Robert Kieffer
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### Normalize.css
-
-#### Info
-
-* Link: https://github.com/necolas/normalize.css
-
-* Version: 1.1.2
-
-* Authors: Nicolas Gallagher, Jonathan Neal
-
-* Description: Browser style normalization
-
-#### License
-
-Copyright (c) Nicolas Gallagher and Jonathan Neal
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### Moment.js
-
-#### Info
-
-* Link: http://momentjs.com
-
-* Version: 2.11.1
-
-* Authors: Tim Wood, Iskren Chernev, Moment.js contributors
-
-* Description: Time/date parsing/formatting
-
-#### License
-
-Copyright (c) 2011-2014 Tim Wood, Iskren Chernev, Moment.js contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### moment-duration-format
-
-#### Info
-
-* Link: https://github.com/jsmreese/moment-duration-format
-
-* Version: 1.3.0
-
-* Authors: John Madhavan-Reese
-
-* Description: Duration parsing/formatting
-
-#### License
-
-Copyright 2014 John Madhavan-Reese
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### CSV.js
-
-#### Info
-
-* Link: https://github.com/knrz/CSV.js
-
-* Version: 3.6.4
-
-* Authors: Kash Nouroozi
-
-* Description: Encoder for CSV (comma separated values) export
-
-#### License
-
-Copyright (c) 2014 Kash Nouroozi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
----
-
-### FileSaver.js
-
-#### Info
-
-* Link: https://github.com/eligrey/FileSaver.js/
-
-* Version: 0.0.2
-
-* Authors: Eli Grey
-
-* Description: File download initiator (for file exports)
-
-#### License
-
-Copyright © 2015 Eli Grey.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### Zepto
-
-#### Info
-
-* Link: http://zeptojs.com/
-
-* Version: 1.1.6
-
-* Authors: Thomas Fuchs
-
-* Description: DOM manipulation
-
-#### License
-
-Copyright (c) 2010-2016 Thomas Fuchs
-http://zeptojs.com/
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### Json.NET
-
-#### Info
-
-* Link: http://www.newtonsoft.com/json
-
-* Version: 6.0.8
-
-* Author: Newtonsoft
-
-* Description: JSON serialization/deserialization
-
-#### License
-
-Copyright (c) 2007 James Newton-King
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### Nancy
-
-#### Info
-
-* Link: http://nancyfx.org
-
-* Version: 0.23.2
-
-* Author: Andreas Håkansson, Steven Robbins and contributors
-
-* Description: Embedded web server
-
-#### License
-
-Copyright © 2010 Andreas Håkansson, Steven Robbins and contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### Nancy.Hosting.Self
-
-#### Info
-
-* Link: http://nancyfx.org
-
-* Version: 0.23.2
-
-* Author: Andreas Håkansson, Steven Robbins and contributors
-
-* Description: Embedded web server
-
-#### License
-
-Copyright © 2010 Andreas Håkansson, Steven Robbins and contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
----
-
-### Almond
-
-* Link: https://github.com/requirejs/almond
-
-* Version: 0.3.3
-
-* Author: jQuery Foundation
-
-* Description: Lightweight RequireJS replacement for builds
-
-#### License
-
-Copyright jQuery Foundation and other contributors, https://jquery.org/
-
-This software consists of voluntary contributions made by many
-individuals. For exact contribution history, see the revision history
-available at https://github.com/requirejs/almond
-
-The following license applies to all parts of this software except as
-documented below:
-
-====
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-====
-
-Copyright and related rights for sample code are waived via CC0. Sample
-code is defined as all source code displayed within the prose of the
-documentation.
-
-CC0: http://creativecommons.org/publicdomain/zero/1.0/
-
-====
-
-Files located in the node_modules directory, and certain utilities used
-to build or test the software in the test and dist directories, are
-externally maintained libraries used by this software which have their own
-licenses; we recommend you read them, as their terms may differ from the
-terms above.
-
-
-### Lodash
-
-* Link: https://lodash.com
-
-* Version: 3.10.1
-
-* Author: Dojo Foundation
-
-* Description: Utility functions
-
-#### License
-
-Copyright 2012-2015 The Dojo Foundation <http://dojofoundation.org/>
-Based on Underscore.js, copyright 2009-2015 Jeremy Ashkenas,
-DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-### EventEmitter3
-
-* Link: https://github.com/primus/eventemitter3
-
-* Version: 1.2.0
-
-* Author: Arnout Kazemier
-
-* Description: Event-driven programming support
-
-#### License
-
-The MIT License (MIT)
-
-Copyright (c) 2014 Arnout Kazemier
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -29,7 +29,7 @@ Building and running Open MCT in your local dev environment is very easy. Be sur
 Open MCT is now running, and can be accessed by pointing a web browser at [http://localhost:8080/](http://localhost:8080/)
 
 ## Open MCT v1.0.0
-This represents a major overhaul of Open MCT with significant changes under the hood. We aim to maintain backward compatibility but if you do find compatibility issues, please let us know by filing an issue in this repository. If you are having major issues with v1.0.0 please check-out the v0.15.0 tag until we can resolve them for you.
+This represents a major overhaul of Open MCT with significant changes under the hood. We aim to maintain backward compatibility but if you do find compatibility issues, please let us know by filing an issue in this repository. If you are having major issues with v1.0.0 please check-out the v0.14.0 tag until we can resolve them for you.
 
 If you are migrating an application built with Open MCT as a dependency to v1.0.0 from an earlier version, please refer to [our migration guide](https://nasa.github.io/openmct/documentation/migration-guide).
 

app.js

@@ -16,7 +16,7 @@ const request = require('request');
 
 // Defaults
 options.port = options.port || options.p || 8080;
-options.host = options.host || options.h || 'localhost';
+options.host = options.host || 'localhost';
 options.directory = options.directory || options.D || '.';
 
 // Show command line options

docs/src/index.md

@@ -33,5 +33,5 @@ As we transition to a new API, the following documentation for the old API
  * The [Developer's Guide](guide/) goes into more detail about how to use the
  platform and the functionality that it provides.
 
- * The [Tutorials](tutorials/) give examples of extending the platform to add
+ * The [Tutorials](https://github.com/nasa/openmct-tutorial) give examples of extending the platform to add
  functionality, and integrate with data sources.

index.html

@@ -38,11 +38,12 @@
         const THIRTY_MINUTES = 30 * 60 * 1000;
 
         [
-            'example/eventGenerator',
-            'example/styleguide'
+            'example/eventGenerator'
         ].forEach(
             openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
         );
+
+        openmct.install(openmct.plugins.Espresso());
         openmct.install(openmct.plugins.MyItems());
         openmct.install(openmct.plugins.LocalStorage());
         openmct.install(openmct.plugins.Generator());

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-snapshot",
   "description": "The Open MCT core platform",
   "dependencies": {},
   "devDependencies": {
@@ -11,8 +11,8 @@
     "comma-separated-values": "^3.6.4",
     "concurrently": "^3.6.1",
     "copy-webpack-plugin": "^4.5.2",
-    "css-loader": "^1.0.0",
     "cross-env": "^6.0.3",
+    "css-loader": "^1.0.0",
     "d3-array": "1.2.x",
     "d3-axis": "1.0.x",
     "d3-collection": "1.0.x",
@@ -63,7 +63,7 @@
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
     "split": "^1.0.0",
-    "style-loader": "^0.21.0",
+    "style-loader": "^1.0.1",
     "v8-compile-cache": "^1.1.0",
     "vue": "2.5.6",
     "vue-loader": "^15.2.6",

platform/core/src/actions/ActionCapability.js

@@ -102,14 +102,14 @@ define(
          * @returns {Action[]} an array of matching actions
          * @memberof platform/core.ActionCapability#
          */
-        ActionCapability.prototype.perform = function (context) {
+        ActionCapability.prototype.perform = function (context, flag) {
             // Alias to getActions(context)[0].perform, with a
             // check for empty arrays.
             var actions = this.getActions(context);
 
             return this.$q.when(
                 (actions && actions.length > 0) ?
-                    actions[0].perform() :
+                    actions[0].perform(flag) :
                     undefined
             );
         };

platform/entanglement/src/services/MoveService.js

@@ -91,7 +91,7 @@ define(
                 .then(function () {
                     return object
                         .getCapability('action')
-                        .perform('remove');
+                        .perform('remove', true);
                 });
         };
 

platform/entanglement/test/services/MoveServiceSpec.js

@@ -227,10 +227,11 @@ define(
                             locationPromise.resolve();
                         });
 
-                        it("removes object from parent", function () {
+                        it("removes object from parent without user warning dialog", function () {
                             expect(actionCapability.perform)
-                                .toHaveBeenCalledWith('remove');
+                                .toHaveBeenCalledWith('remove', true);
                         });
+
                     });
 
                 });
@@ -247,9 +248,9 @@ define(
                             .toHaveBeenCalled();
                     });
 
-                    it("removes object from parent", function () {
+                    it("removes object from parent without user warning dialog", function () {
                         expect(actionCapability.perform)
-                            .toHaveBeenCalledWith('remove');
+                            .toHaveBeenCalledWith('remove', true);
                     });
                 });
 

platform/features/imagery/bundle.js

@@ -1,86 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-define([
-    "./src/policies/ImageryViewPolicy",
-    "./src/controllers/ImageryController",
-    "./src/directives/MCTBackgroundImage",
-    "./res/templates/imagery.html"
-], function (
-    ImageryViewPolicy,
-    ImageryController,
-    MCTBackgroundImage,
-    imageryTemplate
-) {
-
-    return {
-        name:"platform/features/imagery",
-        definition: {
-            "name": "Plot view for telemetry",
-            "extensions": {
-                "views": [
-                    {
-                        "name": "Imagery",
-                        "key": "imagery",
-                        "cssClass": "icon-image",
-                        "template": imageryTemplate,
-                        "priority": "preferred",
-                        "needs": [
-                            "telemetry"
-                        ],
-                        "editable": false
-                    }
-                ],
-                "policies": [
-                    {
-                        "category": "view",
-                        "implementation": ImageryViewPolicy,
-                        "depends": [
-                            "openmct"
-                        ]
-                    }
-                ],
-                "controllers": [
-                    {
-                        "key": "ImageryController",
-                        "implementation": ImageryController,
-                        "depends": [
-                            "$scope",
-                            "$window",
-                            "$element",
-                            "openmct"
-                        ]
-                    }
-                ],
-                "directives": [
-                    {
-                        "key": "mctBackgroundImage",
-                        "implementation": MCTBackgroundImage,
-                        "depends": [
-                            "$document"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});

platform/features/imagery/res/templates/imagery.html

@@ -1,58 +0,0 @@
-<div class="t-imagery c-imagery" ng-controller="ImageryController as imagery">
-    <mct-split-pane class='abs' anchor="bottom" alias="imagery">
-    <div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col">
-        <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
-            <span class="holder flex-elem grows c-imagery__lc__sliders">
-                <input class="icon-brightness" type="range"
-                       min="0"
-                       max="500"
-                       ng-model="filters.brightness" />
-                <input class="icon-contrast" type="range"
-                       min="0"
-                       max="500"
-                       ng-model="filters.contrast" />
-            </span>
-            <span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
-                <a class="s-icon-button icon-reset t-btn-reset"
-                   ng-click="filters = { brightness: 100, contrast: 100 }"></a>
-            </span>
-        </div>
-
-        <div class="l-image-main s-image-main flex-elem grows"
-             ng-class="{ paused: imagery.paused(), stale:false }">
-            <div class="image-main"
-
-            mct-background-image="imagery.getImageUrl()"
-            filters="filters">
-            </div>
-        </div>
-
-        <div class="l-image-main-controlbar flex-elem l-flex-row">
-            <div class="l-datetime-w flex-elem grows">
-                <a class="c-button show-thumbs sm hidden icon-thumbs-strip"
-                    ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
-                <span class="l-time">{{imagery.getTime()}}</span>
-            </div>
-            <div class="h-local-controls flex-elem">
-                <a class="c-button icon-pause pause-play"
-                    ng-click="imagery.paused(!imagery.paused())"
-                    ng-class="{ 'is-paused': imagery.paused() }"></a>
-                <a href=""
-                    class="s-button l-mag s-mag vsm icon-reset"
-                    ng-click="clipped = false"
-                    ng-show="clipped === true"
-                    title="Not all of image is visible; click to reset."></a>
-            </div>
-        </div>
-    </div>
-    <mct-splitter></mct-splitter>
-    <div class="split-pane-component l-image-thumbs-wrapper">
-        <div class="l-image-thumb-item" ng-class="{selected: image.selected}" ng-repeat="image in imageHistory track by $index" 
-            ng-click="imagery.setSelectedImage(image)"  ng-init="imagery.scrollToBottom()">
-            <img class="l-thumb" 
-                ng-src={{imagery.getImageUrl(image)}}>
-            <div class="l-time">{{imagery.getTime(image)}}</div>
-        </div>
-    </div>
-    </mct-split-pane>
-</div>

platform/features/imagery/src/controllers/ImageryController.js

@@ -1,284 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-/**
- * This bundle implements views of image telemetry.
- * @namespace platform/features/imagery
- */
-
-define(
-    [
-        'zepto',
-        'lodash'
-    ],
-    function ($, _) {
-
-        /**
-         * Controller for the "Imagery" view of a domain object which
-         * provides image telemetry.
-         * @constructor
-         * @memberof platform/features/imagery
-         */
-
-        function ImageryController($scope, $window, element, openmct) {
-            this.$scope = $scope;
-            this.$window = $window;
-            this.openmct = openmct;
-            this.date = "";
-            this.time = "";
-            this.zone = "";
-            this.imageUrl = "";
-            this.requestCount = 0;
-            this.scrollable = $(".l-image-thumbs-wrapper");
-            this.autoScroll = openmct.time.clock() ? true : false;
-            this.$scope.imageHistory = [];
-            this.$scope.filters = {
-                brightness: 100,
-                contrast: 100
-            };
-
-            this.subscribe = this.subscribe.bind(this);
-            this.stopListening = this.stopListening.bind(this);
-            this.updateValues = this.updateValues.bind(this);
-            this.updateHistory = this.updateHistory.bind(this);
-            this.onBoundsChange = this.onBoundsChange.bind(this);
-            this.onScroll = this.onScroll.bind(this);
-            this.setSelectedImage = this.setSelectedImage.bind(this);
-
-            this.subscribe(this.$scope.domainObject);
-
-            this.$scope.$on('$destroy', this.stopListening);
-            this.openmct.time.on('bounds', this.onBoundsChange);
-            this.scrollable.on('scroll', this.onScroll);
-        }
-
-        ImageryController.prototype.subscribe = function (domainObject) {
-            this.date = "";
-            this.imageUrl = "";
-            this.openmct.objects.get(domainObject.getId())
-                .then(function (object) {
-                    this.domainObject = object;
-                    var metadata = this.openmct
-                        .telemetry
-                        .getMetadata(this.domainObject);
-                    this.timeKey = this.openmct.time.timeSystem().key;
-                    this.timeFormat = this.openmct
-                        .telemetry
-                        .getValueFormatter(metadata.value(this.timeKey));
-                    this.imageFormat = this.openmct
-                        .telemetry
-                        .getValueFormatter(metadata.valuesForHints(['image'])[0]);
-                    this.unsubscribe = this.openmct.telemetry
-                        .subscribe(this.domainObject, function (datum) {
-                            this.updateHistory(datum);
-                            this.updateValues(datum);
-                        }.bind(this));
-
-                    this.requestHistory(this.openmct.time.bounds());
-                }.bind(this));
-        };
-
-        ImageryController.prototype.requestHistory = function (bounds) {
-            this.requestCount++;
-            this.$scope.imageHistory = [];
-            var requestId = this.requestCount;
-            this.openmct.telemetry
-                .request(this.domainObject, bounds)
-                .then(function (values) {
-                    if (this.requestCount > requestId) {
-                        return Promise.resolve('Stale request');
-                    }
-
-                    values.forEach(function (datum) {
-                        this.updateHistory(datum);
-                    }, this);
-
-                    this.updateValues(values[values.length - 1]);
-                }.bind(this));
-        };
-
-        ImageryController.prototype.stopListening = function () {
-            this.openmct.time.off('bounds', this.onBoundsChange);
-            this.scrollable.off('scroll', this.onScroll);
-            if (this.unsubscribe) {
-                this.unsubscribe();
-                delete this.unsubscribe;
-            }
-        };
-
-        /**
-         * Responds to bound change event be requesting new
-         * historical data if the bound change was manual.
-         * @private
-         * @param {object} [newBounds] new bounds object
-         * @param {boolean} [tick] true when change is automatic
-         */
-        ImageryController.prototype.onBoundsChange = function (newBounds, tick) {
-            if (this.domainObject && !tick) {
-                this.requestHistory(newBounds);
-            }
-        };
-
-        /**
-         * Updates displayable values to match those of the most
-         * recently received datum.
-         * @param {object} [datum] the datum
-         * @private
-         */
-        ImageryController.prototype.updateValues = function (datum) {
-            if (this.isPaused) {
-                this.nextDatum = datum;
-                return;
-            }
-            this.time = this.timeFormat.format(datum);
-            this.imageUrl = this.imageFormat.format(datum);
-
-        };
-
-        /**
-         * Appends given imagery datum to running history.
-         * @private
-         * @param {object} [datum] target telemetry datum
-         * @returns {boolean} falsy when a duplicate datum is given
-         */
-        ImageryController.prototype.updateHistory = function (datum) {
-            if (!this.datumMatchesMostRecent(datum)) {
-                var index = _.sortedIndex(this.$scope.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat));
-                this.$scope.imageHistory.splice(index, 0, datum);
-                return true;
-            } else {
-                return false;
-            }
-        };
-
-        /**
-         * Checks to see if the given datum is the same as the most recent in history.
-         * @private
-         * @param {object} [datum] target telemetry datum
-         * @returns {boolean} true if datum is most recent in history, false otherwise
-         */
-        ImageryController.prototype.datumMatchesMostRecent = function (datum) {
-            if (this.$scope.imageHistory.length !== 0) {
-                var datumTime = this.timeFormat.format(datum);
-                var datumURL = this.imageFormat.format(datum);
-                var lastHistoryTime = this.timeFormat.format(this.$scope.imageHistory.slice(-1)[0]);
-                var lastHistoryURL = this.imageFormat.format(this.$scope.imageHistory.slice(-1)[0]);
-
-                return datumTime === lastHistoryTime && datumURL === lastHistoryURL;
-            }
-            return false;
-        };
-
-        ImageryController.prototype.onScroll = function (event) {
-            this.$window.requestAnimationFrame(function () {
-                var thumbnailWrapperHeight = this.scrollable[0].offsetHeight;
-                var thumbnailWrapperWidth = this.scrollable[0].offsetWidth;
-                if (this.scrollable[0].scrollLeft <
-                    (this.scrollable[0].scrollWidth - this.scrollable[0].clientWidth) - (thumbnailWrapperWidth) ||
-                    this.scrollable[0].scrollTop <
-                    (this.scrollable[0].scrollHeight - this.scrollable[0].clientHeight) - (thumbnailWrapperHeight)) {
-                    this.autoScroll = false;
-                } else {
-                    this.autoScroll = true;
-                }
-            }.bind(this));
-        };
-
-        /**
-         *  Force history imagery div to scroll to bottom.
-         */
-        ImageryController.prototype.scrollToBottom = function () {
-            if (this.autoScroll) {
-                this.scrollable[0].scrollTop = this.scrollable[0].scrollHeight;
-            }
-        };
-
-
-        /**
-         * Get the time portion (hours, minutes, seconds) of the
-         * timestamp associated with the incoming image telemetry
-         * if no parameter is given, or of a provided datum.
-         * @param {object} [datum] target telemetry datum
-         * @returns {string} the time
-         */
-        ImageryController.prototype.getTime = function (datum) {
-            return datum ?
-                this.timeFormat.format(datum) :
-                this.time;
-        };
-
-        /**
-         * Get the URL of the most recent image telemetry if no
-         * parameter is given, or of a provided datum.
-         * @param {object} [datum] target telemetry datum
-         * @returns {string} URL for telemetry image
-         */
-        ImageryController.prototype.getImageUrl = function (datum) {
-            return datum ?
-                this.imageFormat.format(datum) :
-                this.imageUrl;
-        };
-
-        /**
-         * Getter-setter for paused state of the view (true means
-         * paused, false means not.)
-         * @param {boolean} [state] the state to set
-         * @returns {boolean} the current state
-         */
-        ImageryController.prototype.paused = function (state) {
-            if (arguments.length > 0 && state !== this.isPaused) {
-                this.unselectAllImages();
-                this.isPaused = state;
-                if (this.nextDatum) {
-                    this.updateValues(this.nextDatum);
-                    delete this.nextDatum;
-                } else {
-                    this.updateValues(this.$scope.imageHistory[this.$scope.imageHistory.length - 1]);
-                }
-                this.autoScroll = true;
-            }
-            return this.isPaused;
-        };
-
-        /**
-         * Set the selected image on the state for the large imagery div to use.
-         * @param {object} [image] the image object to get url from.
-         */
-        ImageryController.prototype.setSelectedImage = function (image) {
-            this.imageUrl = this.getImageUrl(image);
-            this.time = this.getTime(image);
-            this.paused(true);
-            this.unselectAllImages();
-            image.selected = true;
-        };
-
-        /**
-         * Loop through the history imagery data to set all images to unselected.
-         */
-        ImageryController.prototype.unselectAllImages = function () {
-            for (var i = 0; i < this.$scope.imageHistory.length; i++) {
-                this.$scope.imageHistory[i].selected = false;
-            }
-        };
-        return ImageryController;
-    }
-);

platform/features/imagery/src/directives/MCTBackgroundImage.js

@@ -1,110 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * Defines the `mct-background-image` directive.
-         *
-         * Used as an attribute, this will set the `background-image`
-         * property to the URL given in its value, but only after that
-         * image has loaded; this avoids "flashing" as images change.
-         *
-         * If the value of `mct-background-image`is falsy, no image
-         * will be displayed (immediately.)
-         *
-         * Optionally, a `filters` attribute may be specified as an
-         * object with `brightness` and/or `contrast` properties,
-         * whose values are percentages. A value of 100 will make
-         * no changes to the image's brightness or contrast.
-         *
-         * @constructor
-         * @memberof platform/features/imagery
-         */
-        function MCTBackgroundImage($document) {
-            function link(scope, element) {
-                // General strategy here:
-                // - Keep count of how many images have been requested; this
-                //   counter will be used as an internal identifier or sorts
-                //   for each image that loads.
-                // - As the src attribute changes, begin loading those images.
-                // - When images do load, update the background-image property
-                //   of the element, but only if a more recently
-                //   requested image has not already been loaded.
-                // The order in which URLs are passed in and the order
-                // in which images are actually loaded may be different, so
-                // some strategy like this is necessary to ensure that images
-                // do not display out-of-order.
-                var requested = 0, loaded = 0;
-
-                function updateFilters(filters) {
-                    var styleValue = filters ?
-                        Object.keys(filters).map(function (k) {
-                            return k + "(" + filters[k] + "%)";
-                        }).join(' ') :
-                        "";
-                    element.css('filter', styleValue);
-                    element.css('webkitFilter', styleValue);
-                }
-
-                function nextImage(url) {
-                    var myCounter = requested,
-                        image;
-
-                    function useImage() {
-                        if (loaded <= myCounter) {
-                            loaded = myCounter;
-                            element.css('background-image', "url('" + url + "')");
-                        }
-                    }
-
-                    if (!url) {
-                        loaded = myCounter;
-                        element.css('background-image', 'none');
-                    } else {
-                        image = $document[0].createElement('img');
-                        image.src = url;
-                        image.onload = useImage;
-                    }
-
-                    requested += 1;
-                }
-
-                scope.$watch('mctBackgroundImage', nextImage);
-                scope.$watchCollection('filters', updateFilters);
-            }
-
-            return {
-                restrict: "A",
-                scope: {
-                    mctBackgroundImage: "=",
-                    filters: "="
-                },
-                link: link
-            };
-        }
-
-        return MCTBackgroundImage;
-    }
-);
-

platform/features/imagery/src/policies/ImageryViewPolicy.js

@@ -1,59 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-define([
-    '../../../../../src/api/objects/object-utils'
-], function (
-    objectUtils
-) {
-    /**
-     * Policy preventing the Imagery view from being made available for
-     * domain objects which do not have associated image telemetry.
-     * @implements {Policy.<View, DomainObject>}
-     * @constructor
-     */
-    function ImageryViewPolicy(openmct) {
-        this.openmct = openmct;
-    }
-
-    ImageryViewPolicy.prototype.hasImageTelemetry = function (domainObject) {
-        var newDO = objectUtils.toNewFormat(
-            domainObject.getModel(),
-            domainObject.getId()
-        );
-
-        var metadata = this.openmct.telemetry.getMetadata(newDO);
-        var values = metadata.valuesForHints(['image']);
-        return values.length >= 1;
-    };
-
-    ImageryViewPolicy.prototype.allow = function (view, domainObject) {
-        if (view.key === 'imagery' || view.key === 'historical-imagery') {
-            return this.hasImageTelemetry(domainObject);
-        }
-
-        return true;
-    };
-
-    return ImageryViewPolicy;
-});
-

platform/features/imagery/test/controllers/ImageryControllerSpec.js

@@ -1,271 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-define(
-    [
-        "zepto",
-        "../../src/controllers/ImageryController"
-    ],
-    function ($, ImageryController) {
-
-        var MOCK_ELEMENT_TEMPLATE =
-            '<div class="l-image-thumbs-wrapper"></div>';
-
-        xdescribe("The Imagery controller", function () {
-            var $scope,
-                openmct,
-                oldDomainObject,
-                newDomainObject,
-                unsubscribe,
-                metadata,
-                prefix,
-                controller,
-                requestPromise,
-                mockWindow,
-                mockElement;
-
-            beforeEach(function () {
-                $scope = jasmine.createSpyObj('$scope', ['$on', '$watch']);
-                oldDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId']
-                );
-                newDomainObject = { name: 'foo' };
-                oldDomainObject.getId.and.returnValue('testID');
-                openmct = {
-                    objects: jasmine.createSpyObj('objectAPI', [
-                        'get'
-                    ]),
-                    time: jasmine.createSpyObj('timeAPI', [
-                        'timeSystem',
-                        'clock',
-                        'on',
-                        'off',
-                        'bounds'
-                    ]),
-                    telemetry: jasmine.createSpyObj('telemetryAPI', [
-                        'subscribe',
-                        'request',
-                        'getValueFormatter',
-                        'getMetadata'
-                    ])
-                };
-                metadata = jasmine.createSpyObj('metadata', [
-                    'value',
-                    'valuesForHints'
-                ]);
-                metadata.value.and.returnValue("timestamp");
-                metadata.valuesForHints.and.returnValue(["value"]);
-
-                prefix = "formatted ";
-                unsubscribe = jasmine.createSpy('unsubscribe');
-                openmct.telemetry.subscribe.and.returnValue(unsubscribe);
-                openmct.time.timeSystem.and.returnValue({
-                    key: 'testKey'
-                });
-                $scope.domainObject = oldDomainObject;
-                openmct.objects.get.and.returnValue(Promise.resolve(newDomainObject));
-                openmct.telemetry.getMetadata.and.returnValue(metadata);
-                openmct.telemetry.getValueFormatter.and.callFake(function (property) {
-                    var formatter =
-                        jasmine.createSpyObj("formatter-" + property, ['format']);
-                    var isTime = (property === "timestamp");
-                    formatter.format.and.callFake(function (datum) {
-                        return (isTime ? prefix : "") + datum[property];
-                    });
-                    return formatter;
-                });
-
-                requestPromise = new Promise(function (resolve) {
-                    setTimeout(function () {
-                        resolve([{
-                            timestamp: 1434600258123,
-                            value: 'some/url'
-                        }]);
-                    }, 10);
-                });
-
-                openmct.telemetry.request.and.returnValue(requestPromise);
-                mockElement = $(MOCK_ELEMENT_TEMPLATE);
-                mockWindow = jasmine.createSpyObj('$window', ['requestAnimationFrame']);
-                mockWindow.requestAnimationFrame.and.callFake(function (f) {
-                    return f();
-                });
-
-                controller = new ImageryController(
-                    $scope,
-                    mockWindow,
-                    mockElement,
-                    openmct
-                );
-            });
-
-            describe("when loaded", function () {
-                var callback,
-                    boundsListener,
-                    bounds;
-
-                beforeEach(function () {
-                    return requestPromise.then(function () {
-                        openmct.time.on.calls.all().forEach(function (call) {
-                            if (call.args[0] === "bounds") {
-                                boundsListener = call.args[1];
-                            }
-                        });
-                        callback =
-                            openmct.telemetry.subscribe.calls.mostRecent().args[1];
-                    });
-                });
-
-                it("requests history", function () {
-                    expect(openmct.telemetry.request).toHaveBeenCalledWith(
-                        newDomainObject, bounds
-                    );
-                    expect(controller.getTime()).toEqual(prefix + 1434600258123);
-                    expect(controller.getImageUrl()).toEqual('some/url');
-                });
-
-
-                it("exposes the latest telemetry values", function () {
-                    callback({
-                        timestamp: 1434600259456,
-                        value: "some/other/url"
-                    });
-
-                    expect(controller.getTime()).toEqual(prefix + 1434600259456);
-                    expect(controller.getImageUrl()).toEqual("some/other/url");
-                });
-
-                it("allows updates to be paused and unpaused", function () {
-                    var newTimestamp = 1434600259456,
-                        newUrl = "some/other/url",
-                        initialTimestamp = controller.getTime(),
-                        initialUrl = controller.getImageUrl();
-
-                    expect(initialTimestamp).not.toBe(prefix + newTimestamp);
-                    expect(initialUrl).not.toBe(newUrl);
-                    expect(controller.paused()).toBeFalsy();
-
-                    controller.paused(true);
-                    expect(controller.paused()).toBeTruthy();
-                    callback({ timestamp: newTimestamp, value: newUrl });
-
-                    expect(controller.getTime()).toEqual(initialTimestamp);
-                    expect(controller.getImageUrl()).toEqual(initialUrl);
-
-                    controller.paused(false);
-                    expect(controller.paused()).toBeFalsy();
-                    expect(controller.getTime()).toEqual(prefix + newTimestamp);
-                    expect(controller.getImageUrl()).toEqual(newUrl);
-                });
-
-                it("forwards large image view to latest image in history on un-pause", function () {
-                    $scope.imageHistory = [
-                        { utc: 1434600258122, url: 'some/url1', selected: false},
-                        { utc: 1434600258123, url: 'some/url2', selected: false}
-                    ];
-                    controller.paused(true);
-                    controller.paused(false);
-
-                    expect(controller.getImageUrl()).toEqual(controller.getImageUrl($scope.imageHistory[1]));
-                });
-
-                it("subscribes to telemetry", function () {
-                    expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(
-                        newDomainObject,
-                        jasmine.any(Function)
-                    );
-                });
-
-                it("requests telemetry", function () {
-                    expect(openmct.telemetry.request).toHaveBeenCalledWith(
-                        newDomainObject,
-                        bounds
-                    );
-                });
-
-                it("unsubscribes and unlistens when scope is destroyed", function () {
-                    expect(unsubscribe).not.toHaveBeenCalled();
-
-                    $scope.$on.calls.all().forEach(function (call) {
-                        if (call.args[0] === '$destroy') {
-                            call.args[1]();
-                        }
-                    });
-                    expect(unsubscribe).toHaveBeenCalled();
-                    expect(openmct.time.off)
-                        .toHaveBeenCalledWith('bounds', jasmine.any(Function));
-                });
-
-                it("listens for bounds event and responds to tick and manual change", function () {
-                    var mockBounds = {start: 1434600000000, end: 1434600500000};
-                    expect(openmct.time.on).toHaveBeenCalled();
-                    openmct.telemetry.request.calls.reset();
-                    boundsListener(mockBounds, true);
-                    expect(openmct.telemetry.request).not.toHaveBeenCalled();
-                    boundsListener(mockBounds, false);
-                    expect(openmct.telemetry.request).toHaveBeenCalledWith(newDomainObject, mockBounds);
-                });
-
-                it ("doesnt append duplicate datum", function () {
-                    var mockDatum  = {value: 'image/url', timestamp: 1434700000000};
-                    var mockDatum2 = {value: 'image/url', timestamp: 1434700000000};
-                    var mockDatum3 = {value: 'image/url', url: 'someval', timestamp: 1434700000000};
-                    expect(controller.updateHistory(mockDatum)).toBe(true);
-                    expect(controller.updateHistory(mockDatum)).toBe(false);
-                    expect(controller.updateHistory(mockDatum)).toBe(false);
-                    expect(controller.updateHistory(mockDatum2)).toBe(false);
-                    expect(controller.updateHistory(mockDatum3)).toBe(false);
-                });
-
-                describe("when user clicks on imagery thumbnail", function () {
-                    var mockDatum = { utc: 1434600258123, url: 'some/url', selected: false};
-
-                    it("pauses and adds selected class to imagery thumbnail", function () {
-                        controller.setSelectedImage(mockDatum);
-                        expect(controller.paused()).toBeTruthy();
-                        expect(mockDatum.selected).toBeTruthy();
-                    });
-
-                    it("unselects previously selected image", function () {
-                        $scope.imageHistory = [{ utc: 1434600258123, url: 'some/url', selected: true}];
-                        controller.unselectAllImages();
-                        expect($scope.imageHistory[0].selected).toBeFalsy();
-                    });
-
-                    it("updates larger image url and time", function () {
-                        controller.setSelectedImage(mockDatum);
-                        expect(controller.getImageUrl()).toEqual(controller.getImageUrl(mockDatum));
-                        expect(controller.getTime()).toEqual(controller.timeFormat.format(mockDatum.utc));
-                    });
-                });
-
-            });
-
-            it("initially shows an empty string for date/time", function () {
-                expect(controller.getTime()).toEqual("");
-                expect(controller.getImageUrl()).toEqual("");
-            });
-        });
-    }
-);
-

platform/features/imagery/test/directives/MCTBackgroundImageSpec.js

@@ -1,126 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-define(
-    ["../../src/directives/MCTBackgroundImage"],
-    function (MCTBackgroundImage) {
-
-        describe("The mct-background-image directive", function () {
-            var mockDocument,
-                mockScope,
-                mockElement,
-                testImage,
-                directive;
-
-            beforeEach(function () {
-                mockDocument = [
-                    jasmine.createSpyObj('document', ['createElement'])
-                ];
-                mockScope = jasmine.createSpyObj('scope', [
-                    '$watch',
-                    '$watchCollection'
-                ]);
-                mockElement = jasmine.createSpyObj('element', ['css']);
-                testImage = {};
-
-                mockDocument[0].createElement.and.returnValue(testImage);
-
-                directive = new MCTBackgroundImage(mockDocument);
-            });
-
-            it("is applicable as an attribute", function () {
-                expect(directive.restrict).toEqual("A");
-            });
-
-            it("two-way-binds its own value", function () {
-                expect(directive.scope.mctBackgroundImage).toEqual("=");
-            });
-
-            describe("once linked", function () {
-                beforeEach(function () {
-                    directive.link(mockScope, mockElement, {});
-                });
-
-                it("watches for changes to the URL", function () {
-                    expect(mockScope.$watch).toHaveBeenCalledWith(
-                        'mctBackgroundImage',
-                        jasmine.any(Function)
-                    );
-                });
-
-                it("updates images in-order, even when they load out-of-order", function () {
-                    var firstOnload;
-
-                    mockScope.$watch.calls.mostRecent().args[1]("some/url/0");
-                    firstOnload = testImage.onload;
-
-                    mockScope.$watch.calls.mostRecent().args[1]("some/url/1");
-
-                    // Resolve in a different order
-                    testImage.onload();
-                    firstOnload();
-
-                    // Should still have taken the more recent value
-                    expect(mockElement.css.calls.mostRecent().args).toEqual([
-                        "background-image",
-                        "url('some/url/1')"
-                    ]);
-                });
-
-                it("clears the background image when undefined is passed in", function () {
-                    mockScope.$watch.calls.mostRecent().args[1]("some/url/0");
-                    testImage.onload();
-                    mockScope.$watch.calls.mostRecent().args[1](undefined);
-
-                    expect(mockElement.css.calls.mostRecent().args).toEqual([
-                        "background-image",
-                        "none"
-                    ]);
-                });
-
-                it("updates filters on change", function () {
-                    var filters = { brightness: 123, contrast: 21 };
-                    mockScope.$watchCollection.calls.all().forEach(function (call) {
-                        if (call.args[0] === 'filters') {
-                            call.args[1](filters);
-                        }
-                    });
-                    expect(mockElement.css).toHaveBeenCalledWith(
-                        'filter',
-                        'brightness(123%) contrast(21%)'
-                    );
-                });
-
-                it("clears filters when none are present", function () {
-                    mockScope.$watchCollection.calls.all().forEach(function (call) {
-                        if (call.args[0] === 'filters') {
-                            call.args[1](undefined);
-                        }
-                    });
-                    expect(mockElement.css)
-                        .toHaveBeenCalledWith('filter', '');
-                });
-            });
-        });
-    }
-);
-

platform/features/imagery/test/policies/ImageryViewPolicySpec.js

@@ -1,84 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-define(
-    ["../../src/policies/ImageryViewPolicy"],
-    function (ImageryViewPolicy) {
-
-        describe("Imagery view policy", function () {
-            var testView,
-                openmct,
-                mockDomainObject,
-                mockTelemetry,
-                mockMetadata,
-                policy;
-
-            beforeEach(function () {
-                testView = { key: "imagery" };
-                mockMetadata = jasmine.createSpyObj('metadata', [
-                    "valuesForHints"
-                ]);
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId', 'getModel', 'getCapability']
-                );
-                mockTelemetry = jasmine.createSpyObj(
-                    'telemetry',
-                    ['getMetadata']
-                );
-                mockDomainObject.getCapability.and.callFake(function (c) {
-                    return c === 'telemetry' ? mockTelemetry : undefined;
-                });
-                mockDomainObject.getId.and.returnValue("some-id");
-                mockDomainObject.getModel.and.returnValue({ name: "foo" });
-                mockTelemetry.getMetadata.and.returnValue(mockMetadata);
-                mockMetadata.valuesForHints.and.returnValue(["bar"]);
-
-                openmct = { telemetry: mockTelemetry };
-
-                policy = new ImageryViewPolicy(openmct);
-            });
-
-            it("checks for hints indicating image telemetry", function () {
-                policy.allow(testView, mockDomainObject);
-                expect(mockMetadata.valuesForHints)
-                    .toHaveBeenCalledWith(["image"]);
-            });
-
-            it("allows the imagery view for domain objects with image telemetry", function () {
-                expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
-            });
-
-            it("disallows the imagery view for domain objects without image telemetry", function () {
-                mockMetadata.valuesForHints.and.returnValue([]);
-                expect(policy.allow(testView, mockDomainObject)).toBeFalsy();
-            });
-
-            it("allows other views", function () {
-                testView.key = "somethingElse";
-                expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
-            });
-
-        });
-    }
-);
-

platform/features/my-items/README.md

@@ -0,0 +1,8 @@
+# My Items plugin
+Defines top-level folder named "My Items" to store user-created items. Enabled by default, this can be disabled in a 
+read-only deployment with no user-editable objects.
+
+## Installation
+```js
+openmct.install(openmct.plugins.MyItems());
+```

platform/import-export/README.md

@@ -0,0 +1,14 @@
+# Import / Export Plugin
+The Import/Export plugin allows objects to be exported as JSON files. This allows for sharing of objects between users 
+who are not using a shared persistence store. It also allows object trees to be backed up. Additionally, object trees 
+exported using this tool can then be exposed as read-only static root trees using the 
+[Static Root Plugin](../../src/plugins/staticRootPlugin/README.md).
+
+Upon installation it will add two new context menu actions to allow import and export of objects. Initiating the Export 
+action on an object will produce a JSON file that includes the object and all of its composed children. Selecting Import 
+on an object will allow the user to import a previously exported object tree as a child of the selected object.
+
+## Installation
+```js
+openmct.install(openmct.plugins.ImportExport())
+```

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

@@ -133,7 +133,7 @@ define(['lodash'], function (_) {
         copyOfChild.location = parentId;
         parent.composition[index] = copyOfChild.identifier;
         this.tree[newIdString] = copyOfChild;
-        this.tree[parentId].composition[index] = newIdString;
+        this.tree[parentId].composition[index] = copyOfChild.identifier;
 
         return copyOfChild;
     };

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

@@ -136,6 +136,10 @@ define(['zepto', '../../../../src/api/objects/object-utils.js'], function ($, ob
         return tree;
     };
 
+    ImportAsJSONAction.prototype.getKeyString = function (identifier) {
+        return this.openmct.objects.makeKeyString(identifier);
+    };
+
     /**
      * Rewrites all instances of a given id in the tree with a newly generated
      * replacement to prevent collision.

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

@@ -47,7 +47,12 @@ define(
                 uniqueId = 0;
                 newObjects = [];
                 openmct = {
-                    $injector: jasmine.createSpyObj('$injector', ['get'])
+                    $injector: jasmine.createSpyObj('$injector', ['get']),
+                    objects: {
+                        makeKeyString: function (identifier) {
+                            return identifier.key;
+                        }
+                    }
                 };
                 mockInstantiate = jasmine.createSpy('instantiate').and.callFake(
                     function (model, id) {
@@ -153,7 +158,7 @@ define(
                             body: JSON.stringify({
                                 "openmct": {
                                     "infiniteParent": {
-                                        "composition": ["infinteChild"],
+                                        "composition": [{key: "infinteChild", namespace: ""}],
                                         "name": "1",
                                         "type": "folder",
                                         "modified": 1503598129176,
@@ -161,7 +166,7 @@ define(
                                         "persisted": 1503598129176
                                     },
                                     "infinteChild": {
-                                        "composition": ["infiniteParent"],
+                                        "composition": [{key: "infinteParent", namespace: ""}],
                                         "name": "2",
                                         "type": "folder",
                                         "modified": 1503598132428,

platform/persistence/couch/README.md

@@ -1,2 +1,8 @@
-This bundle implements a connection to an external CouchDB persistence 
-store in Open MCT.
+# Couch DB Persistence Plugin
+An adapter for using CouchDB for persistence of user-created objects. The plugin installation function takes the URL 
+for the CouchDB database as a parameter.
+
+## Installation
+```js
+openmct.install(openmct.plugins.CouchDB('http://localhost:5984/openmct'))
+```

platform/persistence/elastic/README.md

@@ -1,2 +1,8 @@
-This bundle implements a connection to an external ElasticSearch persistence 
-store in Open MCT.
+# Elasticsearch Persistence Provider
+An adapter for using Elastic for persistence of user-created objects. The installation function takes the URL for an 
+Elasticsearch server as a parameter.
+
+## Installation
+```js
+openmct.install(openmct.plugins.Elasticsearch('http://localhost:9200'))
+```

platform/persistence/local/README.md

@@ -0,0 +1,9 @@
+# Local Storage Plugin
+Provides persistence of user-created objects in browser Local Storage. Objects persisted in this way will only be 
+available from the browser and machine on which they were persisted. For shared persistence, consider the 
+[Elasticsearch](../elastic/) and [CouchDB](../couch/) persistence plugins.
+
+## Installation
+```js
+openmct.install(openmct.plugins.LocalStorage());
+```

scripts/migrate-for-jshint.js

@@ -1,49 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-// Converts all templateUrl references in bundle.js files to
-// plain template references, loading said templates with the
-// RequireJS text plugin.
-
-var glob = require('glob'),
-    fs = require('fs');
-
-function migrate(file) {
-    var sourceCode = fs.readFileSync(file, 'utf8'),
-        lines = sourceCode.split('\n')
-            .filter(function (line) {
-                return !(/^\W*['"]use strict['"];\W*$/.test(line));
-            })
-            .filter(function (line) {
-                return line.indexOf("/*global") !== 0;
-            });
-    fs.writeFileSync(file, lines.join('\n'));
-}
-
-glob('@(src|platform)/**/*.js', {}, function (err, files) {
-    if (err) {
-        console.log(err);
-        return;
-    }
-
-    files.forEach(migrate);
-});

scripts/migrate-templates.js

@@ -1,106 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-// Converts all templateUrl references in bundle.js files to
-// plain template references, loading said templates with the
-// RequireJS text plugin.
-
-var glob = require('glob'),
-    fs = require('fs'),
-    path = require('path'),
-    _ = require('lodash');
-
-function toTemplateName(templateUrl) {
-    var parts = templateUrl.split('/');
-    return _.camelCase(parts[parts.length - 1].replace(".html", "")) +
-            "Template";
-}
-
-function getTemplateUrl(sourceLine) {
-    return _.trim(sourceLine.split(":")[1], "\", ");
-}
-
-function hasTemplateUrl(sourceLine) {
-    return sourceLine.indexOf("templateUrl") !== -1;
-}
-
-function findTemplateURLs(sourceCode) {
-    return sourceCode.split('\n')
-        .map(_.trim)
-        .filter(hasTemplateUrl)
-        .map(getTemplateUrl);
-}
-
-function injectRequireArgument(sourceCode, templateUrls) {
-    var lines = sourceCode.split('\n'),
-        index;
-
-    templateUrls = _.uniq(templateUrls);
-
-    // Add arguments for source paths...
-    index = lines.map(_.trim).indexOf("'legacyRegistry'");
-    lines = lines.slice(0, index).concat(templateUrls.map(function (url) {
-        return "    \"text!./res/" + url + "\",";
-    }).concat(lines.slice(index)));
-
-    /// ...and for arguments
-    index = lines.map(_.trim).indexOf("legacyRegistry");
-    lines = lines.slice(0, index).concat(templateUrls.map(function (url) {
-        return "    " + toTemplateName(url) + ",";
-    }).concat(lines.slice(index)));
-
-    return lines.join('\n');
-}
-
-function rewriteUrl(sourceLine) {
-    return [
-        sourceLine.substring(0, sourceLine.indexOf(sourceLine.trim())),
-        "\"template\": " + toTemplateName(getTemplateUrl(sourceLine)),
-        _.endsWith(sourceLine, ",") ? "," : ""
-    ].join('');
-}
-
-function rewriteLine(sourceLine) {
-    return hasTemplateUrl(sourceLine) ?
-        rewriteUrl(sourceLine.replace("templateUrl", "template")) :
-        sourceLine;
-}
-
-function rewriteTemplateUrls(sourceCode) {
-    return sourceCode.split('\n').map(rewriteLine).join('\n');
-}
-
-function migrate(file) {
-    var sourceCode = fs.readFileSync(file, 'utf8');
-    fs.writeFileSync(file, rewriteTemplateUrls(
-        injectRequireArgument(sourceCode, findTemplateURLs(sourceCode))
-    ), 'utf8');
-}
-
-glob('platform/**/bundle.js', {}, function (err, files) {
-    if (err) {
-        console.log(err);
-        return;
-    }
-
-    files.forEach(migrate);
-});

scripts/rebundle-template.txt

@@ -1,34 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/*global define*/
-
-define([
-    <%= implPaths %>
-    'legacyRegistry'
-], function (
-    <%= implNames %>
-    legacyRegistry
-) {
-    "use strict";
-
-    legacyRegistry.register("<%= bundleName %>", <%= bundleContents %>);
-});

scripts/rebundle.js

@@ -1,72 +0,0 @@
-// Temporary utility script to rewrite bundle.json
-// files as bundle.js files.
-
-var glob = require('glob'),
-    fs = require('fs'),
-    path = require('path'),
-    _ = require('lodash'),
-    template = _.template(
-        fs.readFileSync(path.resolve(__dirname, 'rebundle-template.txt'), 'utf8')
-    );
-
-function indent(str, depth) {
-    return _.trimLeft(str.split('\n').map(function (line) {
-        return _.repeat('    ', depth || 1) + line;
-    }).filter(function (line) {
-        return line.trim().length > 0;
-    }).join('\n'));
-}
-
-function findImpls(bundleContents) {
-    return _(bundleContents.extensions || {})
-        .map()
-        .flatten()
-        .pluck('implementation')
-        .filter()
-        .uniq()
-        .value();
-}
-
-function toIdentifier(impl) {
-    var parts = impl.replace(".js", "").split('/');
-    return parts[parts.length - 1];
-}
-
-function toPath(impl) {
-    return "\"./src/" + impl.replace(".js", "") + "\"";
-}
-
-function replaceImpls(bundleText) {
-    var rx = /"implementation": "([^"]*)"/;
-    return bundleText.split('\n').map(function (line) {
-        var m = line.match(rx);
-        return m !== null ?
-                line.replace(rx, '"implementation": ' + toIdentifier(m[1])) :
-                line;
-    }).join('\n');
-}
-
-function rebundle(file) {
-    var plainJson = fs.readFileSync(file, 'utf8'),
-        bundleContents = JSON.parse(plainJson),
-        impls = findImpls(bundleContents),
-        bundleName = file.replace("/bundle.json", ""),
-        outputFile = file.replace(".json", ".js"),
-        contents = template({
-            bundleName: bundleName,
-            implPaths: indent(impls.map(toPath).concat([""]).join(",\n")),
-            implNames: indent(impls.map(toIdentifier).concat([""]).join(",\n")),
-            bundleContents: indent(replaceImpls(JSON.stringify(bundleContents, null, 4)))
-        });
-    fs.writeFileSync(outputFile, contents, 'utf8');
-}
-
-glob('**/bundle.json', {}, function (err, files) {
-    if (err) {
-        console.log(err);
-        return;
-    }
-
-    files.forEach(rebundle);
-});
-

src/MCT.js

@@ -33,13 +33,12 @@ define([
     './adapter/indicators/legacy-indicators-plugin',
     './plugins/buildInfo/plugin',
     './ui/registries/ViewRegistry',
+    './plugins/imagery/plugin',
     './ui/registries/InspectorViewRegistry',
     './ui/registries/ToolbarRegistry',
     './ui/router/ApplicationRouter',
     './ui/router/Browse',
     '../platform/framework/src/Main',
-    './styles/core.scss',
-    './styles/notebook.scss',
     './ui/layout/Layout.vue',
     '../platform/core/src/objects/DomainObjectImpl',
     '../platform/core/src/capabilities/ContextualDomainObject',
@@ -61,13 +60,12 @@ define([
     LegacyIndicatorsPlugin,
     buildInfoPlugin,
     ViewRegistry,
+    ImageryPlugin,
     InspectorViewRegistry,
     ToolbarRegistry,
     ApplicationRouter,
     Browse,
     Main,
-    coreStyles,
-    NotebookStyles,
     Layout,
     DomainObjectImpl,
     ContextualDomainObject,
@@ -261,6 +259,7 @@ define([
         this.install(RemoveActionPlugin.default());
         this.install(this.plugins.FolderView());
         this.install(this.plugins.Tabs());
+        this.install(ImageryPlugin.default());
         this.install(this.plugins.FlexibleLayout());
         this.install(this.plugins.GoToOriginalAction());
         this.install(this.plugins.ImportExport());
@@ -318,11 +317,26 @@ define([
      * @memberof module:openmct.MCT#
      * @method setAssetPath
      */
-    MCT.prototype.setAssetPath = function (path) {
-        this.legacyExtension('constants', {
-            key: "ASSETS_PATH",
-            value: path
-        });
+    MCT.prototype.setAssetPath = function (assetPath) {
+        this._assetPath = assetPath;
+    };
+
+    /**
+     * Get path to where assets are hosted.
+     * @memberof module:openmct.MCT#
+     * @method getAssetPath
+     */
+    MCT.prototype.getAssetPath = function () {
+        const assetPathLength = this._assetPath && this._assetPath.length;
+        if (!assetPathLength) {
+            return '/';
+        }
+
+        if (this._assetPath[assetPathLength - 1] !== '/') {
+            return this._assetPath + '/';
+        }
+
+        return this._assetPath;
     };
 
     /**

src/adapter/policies/README.md

@@ -0,0 +1,7 @@
+# Espresso Theme
+Dark theme for the Open MCT user interface.
+
+## Installation
+```js
+openmct.install(openmct.plugins.Espresso());
+```

src/api/overlays/components/DialogComponent.vue

@@ -33,92 +33,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    @mixin legacyMessage() {
-        flex: 0 1 auto;
-        font-family: symbolsfont;
-        font-size: $messageIconD; // Singleton message in a dialog
-        margin-right: $interiorMarginLg;
-    }
-
-    .c-message {
-        display: flex;
-        align-items: center;
-
-        > * + * {
-            margin-left: $interiorMarginLg;
-        }
-
-        &__icon {
-            // Holds a background SVG graphic
-            $s: 80px;
-            flex: 0 0 auto;
-            min-width: $s;
-            min-height: $s;
-        }
-
-        &__text {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-
-            > * + * {
-                margin-top: $interiorMargin;
-            }
-        }
-
-        // __text elements
-        &__action-text {
-            font-size: 1.2em;
-        }
-
-        &__title {
-            font-size: 1.5em;
-            font-weight: bold;
-        }
-
-        &--simple {
-            // Icon and text elements only
-            &:before {
-                font-size: 30px !important;
-            }
-
-            [class*='__text'] {
-                font-size: 1.25em;
-            }
-        }
-
-        /************************** LEGACY */
-        &.message-severity-info:before {
-            @include legacyMessage();
-            content: $glyph-icon-info;
-            color: $colorInfo;
-        }
-
-        &.message-severity-alert:before {
-            @include legacyMessage();
-            content: $glyph-icon-alert-rect;
-            color: $colorWarningLo;
-        }
-
-        &.message-severity-error:before {
-            @include legacyMessage();
-            content: $glyph-icon-alert-triangle;
-            color: $colorWarningHi;
-        }
-
-        // Messages in a list
-        .c-overlay__messages & {
-            padding: $interiorMarginLg;
-            &:before {
-                font-size: $messageListIconD;
-            }
-        }
-    }
-</style>
-
 <script>
 export default {
     inject:['iconClass', 'title', 'hint', 'timestamp', 'message']

src/api/overlays/components/OverlayComponent.vue

@@ -36,154 +36,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    @mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) {
-        position: absolute;
-        top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR;
-        width: $width;
-        height: $height;
-    }
-
-    .l-overlay-wrapper {
-        // Created by overlayService.js, contains this template.
-        // Acts as an anchor for one or more overlays.
-        display: contents;
-    }
-
-    .c-overlay {
-        @include abs();
-        z-index: 70;
-
-        &__blocker {
-            display: none; // Mobile-first
-        }
-
-        &__outer {
-            @include abs();
-            background: $overlayColorBg;
-            color: $overlayColorFg;
-            display: flex;
-            flex-direction: column;
-            padding: $overlayInnerMargin;
-        }
-
-        &__close-button {
-            $p: $interiorMargin;
-            border-radius: 100% !important;
-            color: $overlayColorFg;
-            display: inline-block;
-            font-size: 1.25em;
-            position: absolute;
-            top: $p; right: $p;
-        }
-
-        &__contents {
-            flex: 1 1 auto;
-            display: flex;
-            flex-direction: column;
-            outline: none;
-            overflow: hidden;
-        }
-
-        &__top-bar {
-            flex: 0 0 auto;
-            flex-direction: column;
-            display: flex;
-
-            > * {
-                flex: 0 0 auto;
-                margin-bottom: $interiorMargin;
-            }
-        }
-
-        &__dialog-title {
-            @include ellipsize();
-            font-size: 1.5em;
-            line-height: 120%;
-        }
-
-        &__contents-main {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-            height: 0; // Chrome 73 overflow bug fix
-            overflow: auto;
-            padding-right: $interiorMargin; // fend off scroll bar
-        }
-
-        &__button-bar {
-            flex: 0 0 auto;
-            display: flex;
-            justify-content: flex-end;
-            margin-top: $interiorMargin;
-
-            > * + * {
-                margin-left: $interiorMargin;
-            }
-        }
-
-        .c-button,
-        .c-click-icon {
-            filter: $overlayBrightnessAdjust;
-        }
-    }
-
-    body.desktop {
-        .c-overlay {
-            &__blocker {
-                @include abs();
-                background: $colorOvrBlocker;
-                cursor: pointer;
-                display: block;
-            }
-        }
-
-        // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
-        .l-overlay-large,
-        .l-overlay-small,
-        .l-overlay-fit {
-            .c-overlay__outer {
-                border-radius: $overlayCr;
-                box-shadow: rgba(black, 0.5) 0 2px 25px;
-            }
-        }
-
-        .l-overlay-fullscreen {
-            // Used by About > Licenses display
-            .c-overlay__outer {
-                @include overlaySizing($overlayOuterMarginFullscreen);
-            }
-        }
-
-        .l-overlay-large {
-            // Default
-            .c-overlay__outer {
-                @include overlaySizing($overlayOuterMarginLg);
-            }
-        }
-
-        .l-overlay-small {
-            .c-overlay__outer {
-                @include overlaySizing($overlayOuterMarginDialog);
-            }
-        }
-
-        .t-dialog-sm .l-overlay-small, // Legacy dialog support
-        .l-overlay-fit {
-            .c-overlay__outer {
-                @include overlaySizing(auto);
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                min-width: 20%;
-            }
-        }
-    }
-
-</style>
-
 <script>
 export default {
     data: function () {

src/api/overlays/components/ProgressDialogComponent.vue

@@ -4,9 +4,6 @@
 </dialog-component>
 </template>
 
-<style lang="scss">
-</style>
-
 <script>
 import ProgressComponent from '../../../ui/components/ProgressBar.vue';
 import DialogComponent from './DialogComponent.vue';

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

@@ -0,0 +1,81 @@
+@mixin legacyMessage() {
+    flex: 0 1 auto;
+    font-family: symbolsfont;
+    font-size: $messageIconD; // Singleton message in a dialog
+    margin-right: $interiorMarginLg;
+}
+
+.c-message {
+    display: flex;
+    align-items: center;
+
+    > * + * {
+        margin-left: $interiorMarginLg;
+    }
+
+    &__icon {
+        // Holds a background SVG graphic
+        $s: 80px;
+        flex: 0 0 auto;
+        min-width: $s;
+        min-height: $s;
+    }
+
+    &__text {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+    }
+
+    // __text elements
+    &__action-text {
+        font-size: 1.2em;
+    }
+
+    &__title {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+
+    &--simple {
+        // Icon and text elements only
+        &:before {
+            font-size: 30px !important;
+        }
+
+        [class*='__text'] {
+            font-size: 1.25em;
+        }
+    }
+
+    /************************** LEGACY */
+    &.message-severity-info:before {
+        @include legacyMessage();
+        content: $glyph-icon-info;
+        color: $colorInfo;
+    }
+
+    &.message-severity-alert:before {
+        @include legacyMessage();
+        content: $glyph-icon-alert-rect;
+        color: $colorWarningLo;
+    }
+
+    &.message-severity-error:before {
+        @include legacyMessage();
+        content: $glyph-icon-alert-triangle;
+        color: $colorWarningHi;
+    }
+
+    // Messages in a list
+    .c-overlay__messages & {
+        padding: $interiorMarginLg;
+        &:before {
+            font-size: $messageListIconD;
+        }
+    }
+}

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

@@ -0,0 +1,142 @@
+@mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) {
+    position: absolute;
+    top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR;
+    width: $width;
+    height: $height;
+}
+
+.l-overlay-wrapper {
+    // Created by overlayService.js, contains this template.
+    // Acts as an anchor for one or more overlays.
+    display: contents;
+}
+
+.c-overlay {
+    @include abs();
+    z-index: 70;
+
+    &__blocker {
+        display: none; // Mobile-first
+    }
+
+    &__outer {
+        @include abs();
+        background: $overlayColorBg;
+        color: $overlayColorFg;
+        display: flex;
+        flex-direction: column;
+        padding: $overlayInnerMargin;
+    }
+
+    &__close-button {
+        $p: $interiorMargin;
+        border-radius: 100% !important;
+        color: $overlayColorFg;
+        display: inline-block;
+        font-size: 1.25em;
+        position: absolute;
+        top: $p; right: $p;
+    }
+
+    &__contents {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        outline: none;
+        overflow: hidden;
+    }
+
+    &__top-bar {
+        flex: 0 0 auto;
+        flex-direction: column;
+        display: flex;
+
+        > * {
+            flex: 0 0 auto;
+            margin-bottom: $interiorMargin;
+        }
+    }
+
+    &__dialog-title {
+        @include ellipsize();
+        font-size: 1.5em;
+        line-height: 120%;
+    }
+
+    &__contents-main {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        height: 0; // Chrome 73 overflow bug fix
+        overflow: auto;
+        padding-right: $interiorMargin; // fend off scroll bar
+    }
+
+    &__button-bar {
+        flex: 0 0 auto;
+        display: flex;
+        justify-content: flex-end;
+        margin-top: $interiorMargin;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    .c-button,
+    .c-click-icon {
+        filter: $overlayBrightnessAdjust;
+    }
+}
+
+body.desktop {
+    .c-overlay {
+        &__blocker {
+            @include abs();
+            background: $colorOvrBlocker;
+            cursor: pointer;
+            display: block;
+        }
+    }
+
+    // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
+    .l-overlay-large,
+    .l-overlay-small,
+    .l-overlay-fit {
+        .c-overlay__outer {
+            border-radius: $overlayCr;
+            box-shadow: rgba(black, 0.5) 0 2px 25px;
+        }
+    }
+
+    .l-overlay-fullscreen {
+        // Used by About > Licenses display
+        .c-overlay__outer {
+            @include overlaySizing($overlayOuterMarginFullscreen);
+        }
+    }
+
+    .l-overlay-large {
+        // Default
+        .c-overlay__outer {
+            @include overlaySizing($overlayOuterMarginLg);
+        }
+    }
+
+    .l-overlay-small {
+        .c-overlay__outer {
+            @include overlaySizing($overlayOuterMarginDialog);
+        }
+    }
+
+    .t-dialog-sm .l-overlay-small, // Legacy dialog support
+    .l-overlay-fit {
+        .c-overlay__outer {
+            @include overlaySizing(auto);
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            min-width: 20%;
+        }
+    }
+}

src/installDefaultBundles.js

@@ -38,7 +38,6 @@ const DEFAULTS = [
     'platform/exporters',
     'platform/telemetry',
     'platform/features/clock',
-    'platform/features/imagery',
     'platform/features/hyperlink',
     'platform/features/timeline',
     'platform/forms',
@@ -82,7 +81,6 @@ define([
     '../platform/execution/bundle',
     '../platform/exporters/bundle',
     '../platform/features/clock/bundle',
-    '../platform/features/imagery/bundle',
     '../platform/features/my-items/bundle',
     '../platform/features/hyperlink/bundle',
     '../platform/features/static-markup/bundle',

src/plugins/LADTable/components/LADRow.vue

@@ -31,10 +31,6 @@
 </tr>
 </template>
 
-<style lang="scss">
-
-</style>
-
 <script>
 
 const CONTEXT_MENU_ACTIONS = [

src/plugins/LADTable/components/LadTableSet.vue

@@ -51,10 +51,6 @@
 </table>
 </template>
 
-<style lang="scss">
-
-</style>
-
 <script>
 import LadRow from './LADRow.vue';
 

src/plugins/URLIndicatorPlugin/README.md

@@ -0,0 +1,21 @@
+# URL Indicator
+Adds an indicator which shows the availability of a URL, with success based on receipt of a 200 HTTP code. Can be used 
+for monitoring the availability of web services.
+
+## Installation
+```js
+openmct.install(openmct.plugins.URLIndicator({
+  url: 'http://localhost:8080',
+    iconClass: 'check',
+    interval: 10000,
+    label: 'Localhost'
+ })
+);
+```
+
+## Options
+* __url__: URL to indicate the status of
+* __iconClass__: Icon to show in the status bar, defaults to icon-database. See the [Style Guide](https://nasa.github.io/openmct/style-guide/#/browse/styleguide:home/glyphs?view=styleguide.glyphs) for more icon options.
+* __interval__: Interval between checking the connection, defaults to 10000
+* __label__: Name showing up as text in the status bar, defaults to url
+

src/plugins/autoflow/AutoflowTabularPlugin.js

@@ -25,15 +25,6 @@ define([
 ], function (
     AutoflowTabularView
 ) {
-    /**
-     * This plugin provides an Autoflow Tabular View for domain objects
-     * in Open MCT.
-     *
-     * @param {Object} options
-     * @param {String} [options.type] the domain object type for which
-     *        this view should be available; if omitted, this view will
-     *        be available for all objects
-     */
     return function (options) {
         return function (openmct) {
             var views = (openmct.mainViews || openmct.objectViews);

src/plugins/autoflow/README.md

@@ -0,0 +1,15 @@
+# Autoflow View
+
+This plugin provides the Autoflow View for domain objects in Open MCT. This view allows users to visualize the latest 
+values of a collection of telemetry points in a condensed list.
+
+## Installation
+``` js
+    openmct.install(openmct.plugins.AutoflowView({
+        type: "telemetry.fixed"
+    }));
+```
+
+## Options
+* `type`: The object type to add the Autoflow View to. Currently supports a single value. If not provided, will make the 
+Autoflow view available for all objects (which is probably not what you want).

src/plugins/displayLayout/components/BoxView.vue

@@ -34,19 +34,6 @@
 </layout-frame>
 </template>
 
-<style lang="scss">
-    @import '~styles/sass-base';
-
-    .c-box-view {
-        display: flex;
-        align-items: stretch;
-
-        .c-frame & {
-            @include abs();
-        }
-    }
-</style>
-
 <script>
 import LayoutFrame from './LayoutFrame.vue'
 

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -66,81 +66,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    @mixin displayMarquee($c) {
-        > .c-frame-edit {
-            // All other frames
-            //@include test($c, 0.4);
-            display: block;
-        }
-        > .c-frame > .c-frame-edit {
-            // Line object frame
-            //@include test($c, 0.4);
-            display: block;
-        }
-    }
-
-    .l-layout {
-        @include abs();
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-
-        &__grid-holder {
-            display: none;
-        }
-
-        &__frame {
-            position: absolute;
-        }
-    }
-
-    .is-editing {
-        .l-shell__main-container {
-            &[s-selected],
-            &[s-selected-parent] {
-                // Display grid and allow edit marquee to display in main layout holder when editing
-                > .l-layout {
-                    background: $editUIGridColorBg;
-
-                    > [class*="__grid-holder"] {
-                        display: block;
-                    }
-                }
-            }
-        }
-
-        .l-layout__frame {
-            &[s-selected],
-            &[s-selected-parent] {
-                // Display grid and allow edit marquee to display in nested layouts when editing
-                > * > * > .l-layout {
-                    background: $editUIGridColorBg;
-                    box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
-
-                    > [class*='grid-holder'] {
-                        display: block;
-                    }
-                }
-            }
-        }
-
-        /*********************** EDIT MARQUEE CONTROL */
-        *[s-selected-parent] {
-            > .l-layout {
-                // When main shell layout is the parent
-                @include displayMarquee(deeppink);
-            }
-            > * > * > * {
-                // When a sub-layout is the parent
-                @include displayMarquee(blue);
-            }
-        }
-    }
-</style>
-
 <script>
 import uuid from 'uuid';
 

src/plugins/displayLayout/components/EditMarquee.vue

@@ -45,66 +45,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-frame-edit {
-        // In Layouts, this is the editing rect and handles
-        display: none; // Set to display: block in DisplayLayout.vue
-        pointer-events: none;
-        @include abs();
-        border: $editMarqueeBorder;
-
-        &__handle {
-            $d: 6px;
-            $o: floor($d * -0.5);
-            background: $editFrameColorHandleFg;
-            box-shadow: $editFrameColorHandleBg 0 0 0 2px;
-            pointer-events: all;
-            position: absolute;
-            width: $d; height: $d;
-            top: auto; right: auto; bottom: auto; left: auto;
-
-            &:before {
-                // Extended hit area
-                @include abs(-10px);
-                content: '';
-                display: block;
-                z-index: 0;
-            }
-
-            &:hover {
-                background: $editUIColor;
-            }
-
-            &--nwse {
-                cursor: nwse-resize;
-            }
-
-            &--nw {
-                cursor: nw-resize;
-                left: $o; top: $o;
-            }
-
-            &--ne {
-                cursor: ne-resize;
-                right: $o; top: $o;
-            }
-
-            &--se {
-                cursor: se-resize;
-                right: $o; bottom: $o;
-            }
-
-            &--sw {
-                cursor: sw-resize;
-                left: $o; bottom: $o;
-            }
-        }
-    }
-</style>
-
-
 <script>
 import LayoutDrag from './../LayoutDrag'
 

src/plugins/displayLayout/components/ImageView.vue

@@ -34,21 +34,6 @@
 </layout-frame>
 </template>
 
-<style lang="scss">
-    @import '~styles/sass-base';
-
-    .c-image-view {
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-
-        .c-frame & {
-            @include abs();
-            border: 1px solid transparent;
-        }
-    }
-</style>
-
 <script>
 import LayoutFrame from './LayoutFrame.vue'
 

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -38,142 +38,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************* FRAME */
-    .c-frame {
-        display: flex;
-        flex-direction: column;
-
-        // Whatever is placed into the slot, make it fill the entirety of the space, obeying padding
-        > *:first-child {
-            flex: 1 1 auto;
-        }
-    }
-
-    .c-frame-edit__move {
-        display: none;
-    }
-
-    .is-editing {
-        /******************* STYLES FOR C-FRAME WHILE EDITING */
-        .c-frame {
-            &:not([s-selected]) {
-                &:hover {
-                    border: $editFrameBorderHov;
-                }
-            }
-
-            &[s-selected] {
-                // All frames selected while editing
-                border: $editFrameSelectedBorder;
-                box-shadow: $editFrameSelectedShdw;
-
-                .c-frame-edit__move {
-                    cursor: move;
-                }
-            }
-        }
-
-        /******************* DEFAULT STYLES FOR -EDIT__MOVE */
-        // All object types
-        .c-frame-edit__move {
-            @include abs();
-            display: block;
-        }
-
-        // Has-complex-content objects
-        .c-so-view.has-complex-content {
-            transition: $transOut;
-            transition-delay: $moveBarOutDelay;
-
-            > .c-so-view__local-controls {
-                transition: transform 250ms ease-in-out;
-                transition-delay: $moveBarOutDelay;
-            }
-
-            + .c-frame-edit__move {
-                display: none;
-            }
-
-        }
-
-        .l-layout {
-            /******************* 0 - 1 ITEM SELECTED */
-            &:not(.is-multi-selected) {
-                > .l-layout__frame[s-selected] {
-                    > .c-so-view.has-complex-content {
-                        > .c-so-view__local-controls {
-                            transition: transform $transOutTime ease-in-out;
-                            transition-delay: $moveBarOutDelay;
-                        }
-
-                        + .c-frame-edit__move {
-                            transition: $transOut;
-                            transition-delay: $moveBarOutDelay;
-                            @include userSelectNone();
-                            background: $editFrameMovebarColorBg;
-                            box-shadow: rgba(black, 0.2) 0 1px;
-                            bottom: auto;
-                            display: block;
-                            height: 0; // Height is set on hover below
-                            opacity: 0.8;
-                            max-height: 100%;
-                            overflow: hidden;
-                            text-align: center;
-
-                            &:before {
-                                // Grippy
-                                $h: 4px;
-                                $tbOffset: ($editFrameMovebarH - $h) / 2;
-                                $lrOffset: 25%;
-                                @include grippy($editFrameMovebarColorFg);
-                                content: '';
-                                display: block;
-                                position: absolute;
-                                top: $tbOffset;
-                                right: $lrOffset;
-                                bottom: $tbOffset;
-                                left: $lrOffset;
-                            }
-                        }
-                    }
-
-                    &:hover {
-                        > .c-so-view.has-complex-content {
-                            transition: $transIn;
-                            transition-delay: 0s;
-                            padding-top: $editFrameMovebarH + $interiorMarginSm;
-
-                            > .c-so-view__local-controls {
-                                transform: translateY($editFrameMovebarH);
-                                transition: transform $transInTime ease-in-out;
-                                transition-delay: 0s;
-                            }
-
-                            + .c-frame-edit__move {
-                                transition: $transIn;
-                                transition-delay: 0s;
-                                height: $editFrameMovebarH;
-                            }
-                        }
-                    }
-                }
-            }
-
-            /******************* > 1 ITEMS SELECTED */
-            &.is-multi-selected {
-                .l-layout__frame[s-selected] {
-                    > .c-so-view.has-complex-content + .c-frame-edit__move {
-                        display: block;
-                    }
-                }
-            }
-        }
-    }
-</style>
-
 <script>
 import LayoutDrag from './../LayoutDrag'
 

src/plugins/displayLayout/components/TelemetryView.vue

@@ -56,40 +56,6 @@
 </layout-frame>
 </template>
 
-<style lang="scss">
-    @import '~styles/sass-base';
-
-    .c-telemetry-view {
-        display: flex;
-        align-items: stretch;
-
-        > * {
-            // Label and value holders
-            flex: 1 1 auto;
-            display: flex;
-            flex-direction: row;
-           // justify-content: center;
-            align-items: center;
-            overflow: hidden;
-            padding: $interiorMargin;
-
-            > * {
-                // Text elements
-                @include ellipsize();
-            }
-        }
-
-        > * + * {
-            margin-left: $interiorMargin;
-        }
-
-        .c-frame & {
-            @include abs();
-            border: 1px solid transparent;
-        }
-    }
-</style>
-
 <script>
 import LayoutFrame from './LayoutFrame.vue'
 import printj from 'printj'

src/plugins/displayLayout/components/TextView.vue

@@ -36,20 +36,6 @@
 </layout-frame>
 </template>
 
-<style lang="scss">
-    @import '~styles/sass-base';
-
-    .c-text-view {
-        display: flex;
-        align-items: stretch;
-
-        .c-frame & {
-            @include abs();
-            border: 1px solid transparent;
-        }
-    }
-</style>
-
 <script>
 import LayoutFrame from './LayoutFrame.vue'
 

src/plugins/displayLayout/components/box-view.scss

@@ -0,0 +1,8 @@
+.c-box-view {
+    display: flex;
+    align-items: stretch;
+
+    .c-frame & {
+        @include abs();
+    }
+}

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

@@ -0,0 +1,70 @@
+@mixin displayMarquee($c) {
+    > .c-frame-edit {
+        // All other frames
+        //@include test($c, 0.4);
+        display: block;
+    }
+    > .c-frame > .c-frame-edit {
+        // Line object frame
+        //@include test($c, 0.4);
+        display: block;
+    }
+}
+
+.l-layout {
+    @include abs();
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    &__grid-holder {
+        display: none;
+    }
+
+    &__frame {
+        position: absolute;
+    }
+}
+
+.is-editing {
+    .l-shell__main-container {
+        &[s-selected],
+        &[s-selected-parent] {
+            // Display grid and allow edit marquee to display in main layout holder when editing
+            > .l-layout {
+                background: $editUIGridColorBg;
+
+                > [class*="__grid-holder"] {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    .l-layout__frame {
+        &[s-selected],
+        &[s-selected-parent] {
+            // Display grid and allow edit marquee to display in nested layouts when editing
+            > * > * > .l-layout {
+                background: $editUIGridColorBg;
+                box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
+
+                > [class*='grid-holder'] {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    /*********************** EDIT MARQUEE CONTROL */
+    *[s-selected-parent] {
+        > .l-layout {
+            // When main shell layout is the parent
+            @include displayMarquee(deeppink);
+        }
+        > * > * > * {
+            // When a sub-layout is the parent
+            @include displayMarquee(blue);
+        }
+    }
+}

src/plugins/displayLayout/components/edit-marquee.scss

@@ -0,0 +1,54 @@
+.c-frame-edit {
+    // In Layouts, this is the editing rect and handles
+    display: none; // Set to display: block in DisplayLayout.vue
+    pointer-events: none;
+    @include abs();
+    border: $editMarqueeBorder;
+
+    &__handle {
+        $d: 6px;
+        $o: floor($d * -0.5);
+        background: $editFrameColorHandleFg;
+        box-shadow: $editFrameColorHandleBg 0 0 0 2px;
+        pointer-events: all;
+        position: absolute;
+        width: $d; height: $d;
+        top: auto; right: auto; bottom: auto; left: auto;
+
+        &:before {
+            // Extended hit area
+            @include abs(-10px);
+            content: '';
+            display: block;
+            z-index: 0;
+        }
+
+        &:hover {
+            background: $editUIColor;
+        }
+
+        &--nwse {
+            cursor: nwse-resize;
+        }
+
+        &--nw {
+            cursor: nw-resize;
+            left: $o; top: $o;
+        }
+
+        &--ne {
+            cursor: ne-resize;
+            right: $o; top: $o;
+        }
+
+        &--se {
+            cursor: se-resize;
+            right: $o; bottom: $o;
+        }
+
+        &--sw {
+            cursor: sw-resize;
+            left: $o; bottom: $o;
+        }
+    }
+}

src/plugins/displayLayout/components/image-view.scss

@@ -0,0 +1,10 @@
+.c-image-view {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    .c-frame & {
+        @include abs();
+        border: 1px solid transparent;
+    }
+}

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

@@ -0,0 +1,131 @@
+/******************* FRAME */
+.c-frame {
+    display: flex;
+    flex-direction: column;
+
+    // Whatever is placed into the slot, make it fill the entirety of the space, obeying padding
+    > *:first-child {
+        flex: 1 1 auto;
+    }
+}
+
+.c-frame-edit__move {
+    display: none;
+}
+
+.is-editing {
+    /******************* STYLES FOR C-FRAME WHILE EDITING */
+    .c-frame {
+        &:not([s-selected]) {
+            &:hover {
+                border: $editFrameBorderHov;
+            }
+        }
+
+        &[s-selected] {
+            // All frames selected while editing
+            border: $editFrameSelectedBorder;
+            box-shadow: $editFrameSelectedShdw;
+
+            .c-frame-edit__move {
+                cursor: move;
+            }
+        }
+    }
+
+    /******************* DEFAULT STYLES FOR -EDIT__MOVE */
+    // All object types
+    .c-frame-edit__move {
+        @include abs();
+        display: block;
+    }
+
+    // Has-complex-content objects
+    .c-so-view.has-complex-content {
+        transition: $transOut;
+        transition-delay: $moveBarOutDelay;
+
+        > .c-so-view__local-controls {
+            transition: transform 250ms ease-in-out;
+            transition-delay: $moveBarOutDelay;
+        }
+
+        + .c-frame-edit__move {
+            display: none;
+        }
+
+    }
+
+    .l-layout {
+        /******************* 0 - 1 ITEM SELECTED */
+        &:not(.is-multi-selected) {
+            > .l-layout__frame[s-selected] {
+                > .c-so-view.has-complex-content {
+                    > .c-so-view__local-controls {
+                        transition: transform $transOutTime ease-in-out;
+                        transition-delay: $moveBarOutDelay;
+                    }
+
+                    + .c-frame-edit__move {
+                        transition: $transOut;
+                        transition-delay: $moveBarOutDelay;
+                        @include userSelectNone();
+                        background: $editFrameMovebarColorBg;
+                        box-shadow: rgba(black, 0.2) 0 1px;
+                        bottom: auto;
+                        display: block;
+                        height: 0; // Height is set on hover below
+                        opacity: 0.8;
+                        max-height: 100%;
+                        overflow: hidden;
+                        text-align: center;
+
+                        &:before {
+                            // Grippy
+                            $h: 4px;
+                            $tbOffset: ($editFrameMovebarH - $h) / 2;
+                            $lrOffset: 25%;
+                            @include grippy($editFrameMovebarColorFg);
+                            content: '';
+                            display: block;
+                            position: absolute;
+                            top: $tbOffset;
+                            right: $lrOffset;
+                            bottom: $tbOffset;
+                            left: $lrOffset;
+                        }
+                    }
+                }
+
+                &:hover {
+                    > .c-so-view.has-complex-content {
+                        transition: $transIn;
+                        transition-delay: 0s;
+                        padding-top: $editFrameMovebarH + $interiorMarginSm;
+
+                        > .c-so-view__local-controls {
+                            transform: translateY($editFrameMovebarH);
+                            transition: transform $transInTime ease-in-out;
+                            transition-delay: 0s;
+                        }
+
+                        + .c-frame-edit__move {
+                            transition: $transIn;
+                            transition-delay: 0s;
+                            height: $editFrameMovebarH;
+                        }
+                    }
+                }
+            }
+        }
+
+        /******************* > 1 ITEMS SELECTED */
+        &.is-multi-selected {
+            .l-layout__frame[s-selected] {
+                > .c-so-view.has-complex-content + .c-frame-edit__move {
+                    display: block;
+                }
+            }
+        }
+    }
+}

src/plugins/displayLayout/components/telemetry-view.scss

@@ -0,0 +1,29 @@
+.c-telemetry-view {
+    display: flex;
+    align-items: stretch;
+
+    > * {
+        // Label and value holders
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: row;
+       // justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        padding: $interiorMargin;
+
+        > * {
+            // Text elements
+            @include ellipsize();
+        }
+    }
+
+    > * + * {
+        margin-left: $interiorMargin;
+    }
+
+    .c-frame & {
+        @include abs();
+        border: 1px solid transparent;
+    }
+}

src/plugins/displayLayout/components/text-view.scss

@@ -0,0 +1,9 @@
+.c-text-view {
+    display: flex;
+    align-items: stretch;
+
+    .c-frame & {
+        @include abs();
+        border: 1px solid transparent;
+    }
+}

src/plugins/filters/components/FiltersView.vue

@@ -25,26 +25,6 @@
 </ul>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-inspector {
-        .c-filter-indication {
-            border-radius: $smallCr;
-            font-size: inherit;
-            padding: $interiorMarginSm $interiorMargin;
-            text-transform: inherit;
-        }
-        .c-filter-tree {
-            // Filters UI uses a tree-based structure
-            .c-properties {
-                // Add extra margin to account for filter-indicator
-                margin-left: 38px;
-            }
-        }
-    }
-</style>
-
 <script>
 import FilterObject from './FilterObject.vue';
 import GlobalFilters from './GlobalFilters.vue'

src/plugins/filters/components/GlobalFilters.vue

@@ -37,38 +37,6 @@
 </li>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-    .c-filter-indication {
-        // Appears as a block element beneath tables
-        @include userSelectNone();
-        background: $colorFilterBg;
-        color: $colorFilterFg;
-        display: flex;
-        align-items: center;
-        font-size: 0.9em;
-        margin-top: $interiorMarginSm;
-        padding: 2px;
-        text-transform: uppercase;
-
-        &:before {
-            font-family: symbolsfont-12px;
-            content: $glyph-icon-filter;
-            display: block;
-            font-size: 12px;
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    .c-filter-tree-item {
-        &__filter-indicator {
-            color: $colorFilter;
-            width: 1.2em; // Set width explicitly for layout reasons: will either have class icon-filter, or none.
-            flex: 0 0 auto;
-        }
-    }
-</style>
-
 <script>
 import FilterField from './FilterField.vue';
 

src/plugins/filters/components/filters-view.scss

@@ -0,0 +1,15 @@
+.c-inspector {
+    .c-filter-indication {
+        border-radius: $smallCr;
+        font-size: inherit;
+        padding: $interiorMarginSm $interiorMargin;
+        text-transform: inherit;
+    }
+    .c-filter-tree {
+        // Filters UI uses a tree-based structure
+        .c-properties {
+            // Add extra margin to account for filter-indicator
+            margin-left: 38px;
+        }
+    }
+}

src/plugins/filters/components/global-filters.scss

@@ -0,0 +1,28 @@
+.c-filter-indication {
+    // Appears as a block element beneath tables
+    @include userSelectNone();
+    background: $colorFilterBg;
+    color: $colorFilterFg;
+    display: flex;
+    align-items: center;
+    font-size: 0.9em;
+    margin-top: $interiorMarginSm;
+    padding: 2px;
+    text-transform: uppercase;
+
+    &:before {
+        font-family: symbolsfont-12px;
+        content: $glyph-icon-filter;
+        display: block;
+        font-size: 12px;
+        margin-right: $interiorMarginSm;
+    }
+}
+
+.c-filter-tree-item {
+    &__filter-indicator {
+        color: $colorFilter;
+        width: 1.2em; // Set width explicitly for layout reasons: will either have class icon-filter, or none.
+        flex: 0 0 auto;
+    }
+}

src/plugins/flexibleLayout/components/dropHint.vue

@@ -33,10 +33,6 @@
 </div>
 </template>
 
-<style lang="scss">
-
-</style>
-
 <script>
 export default {
     props:{

src/plugins/flexibleLayout/components/flexible-layout.scss

@@ -0,0 +1,320 @@
+@mixin containerGrippy($headerSize, $dir) {
+    position: absolute;
+    $h: 6px;
+    $minorOffset: ($headerSize - $h) / 2;
+    $majorOffset: 35%;
+    content: '';
+    display: block;
+    position: absolute;
+    @include grippy($c: $editFrameSelectedMovebarColorFg, $dir: $dir);
+    @if $dir == 'x' {
+        top: $minorOffset; right: $majorOffset; bottom: $minorOffset; left: $majorOffset;
+    } @else {
+        top: $majorOffset; right: $minorOffset; bottom: $majorOffset; left: $minorOffset;
+    }
+}
+
+.c-fl {
+    @include abs();
+    display: flex;
+
+    .temp-toolbar {
+        flex: 0 0 auto;
+    }
+
+    &__container-holder {
+        display: flex;
+        flex: 1 1 100%; // Must be 100% to work
+        overflow: auto;
+
+        // Columns by default
+        flex-direction: row;
+        > * + * { margin-left: 1px; }
+
+        &[class*='--rows'] {
+            flex-direction: column;
+            > * + * {
+                margin-left: 0;
+                margin-top: 1px;
+            }
+        }
+    }
+
+    &__empty {
+        @include abs();
+        background: rgba($colorBodyFg, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+
+        > * {
+            font-style: italic;
+            opacity: 0.5;
+        }
+    }
+
+    &__drag-ghost{
+        background: $colorItemTreeHoverBg;
+        color: $colorItemTreeHoverFg;
+        border-radius: $basicCr;
+        display: flex;
+        align-items: center;
+        padding: $interiorMarginLg $interiorMarginLg * 2;
+        position: absolute;
+        top: -10000px;
+        z-index: 2;
+
+        &:before {
+            color: $colorKey;
+            margin-right: $interiorMarginSm;
+        }
+    }
+}
+
+.c-fl-container {
+    /***************************************************** CONTAINERS */
+    $headerSize: 16px;
+
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    // flex-basis is set with inline style in code, controls size
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    &__header {
+        // Only displayed when editing, controlled via JS
+        background: $editFrameMovebarColorBg;
+        color: $editFrameMovebarColorFg;
+        cursor: move;
+        display: flex;
+        align-items: center;
+        flex: 0 0 $headerSize;
+
+        &:before {
+            // Drag grippy
+            @include containerGrippy($headerSize, 'x');
+            opacity: 0.5;
+        }
+    }
+
+    &__size-indicator {
+        position: absolute;
+        display: inline-block;
+        right: $interiorMargin;
+    }
+
+    &__frames-holder {
+        display: flex;
+        flex: 1 1 100%; // Must be 100% to work
+        flex-direction: column; // Default
+        align-content: stretch;
+        align-items: stretch;
+        overflow: hidden; // This sucks, but doing in the short-term
+    }
+
+    .is-editing & {
+        &:hover {
+            .c-fl-container__header {
+                background: $editFrameHovMovebarColorBg;
+                color: $editFrameHovMovebarColorFg;
+
+                &:before {
+                    opacity: .75;
+                }
+            }
+        }
+
+        &[s-selected] {
+            border: $editFrameSelectedBorder;
+
+            .c-fl-container__header {
+                background:$editFrameSelectedMovebarColorBg;
+                color: $editFrameSelectedMovebarColorFg;
+                &:before {
+                    // Grippy
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    /****** THEIR FRAMES */
+    // Frames get styled here because this is particular to their presence in this layout type
+    .c-fl-frame {
+        @include browserPrefix(margin-collapse, collapse);
+    }
+
+    /****** ROWS LAYOUT */
+    .c-fl--rows & {
+        // Layout is rows
+        flex-direction: row;
+
+        &__header {
+            flex-basis: $headerSize;
+            overflow: hidden;
+
+            &:before {
+                // Grippy
+                @include containerGrippy($headerSize, 'y');
+            }
+        }
+
+        &__size-indicator {
+            right: 0;
+            top: $interiorMargin;
+            transform-origin: top right;
+            transform: rotate(-90deg) translateY(-100%);
+        }
+
+        &__frames-holder {
+            flex-direction: row;
+        }
+    }
+}
+
+.c-fl-frame {
+    /***************************************************** CONTAINER FRAMES */
+    $sizeIndicatorM: 16px;
+    $dropHintSize: 15px;
+
+    display: flex;
+    flex: 1 1;
+    flex-direction: column;
+    overflow: hidden; // Needed to allow frames to collapse when sized down
+
+    &__drag-wrapper {
+        flex: 1 1 auto;
+        overflow: auto;
+
+        .is-editing & {
+            > * {
+                pointer-events: none;
+            }
+        }
+    }
+
+    &__header {
+        flex: 0 0 auto;
+        margin-bottom: $interiorMargin;
+    }
+
+    &__size-indicator {
+        $size: 35px;
+
+        @include ellipsize();
+        background: $colorBtnBg;
+        border-top-left-radius: $controlCr;
+        color: $colorBtnFg;
+        display: inline-block;
+        padding: $interiorMarginSm 0;
+        position: absolute;
+        pointer-events: none;
+        text-align: center;
+        width: $size;
+
+        // Changed when layout is different, see below
+        border-top-right-radius: $controlCr;
+        bottom: 1px;
+        right: $sizeIndicatorM;
+    }
+
+    &__drop-hint {
+        flex: 0 0 $dropHintSize;
+        .c-drop-hint {
+            border-radius: $smallCr;
+        }
+    }
+
+    &__resize-handle {
+        $size: 2px;
+        $margin: 3px;
+        $marginHov: 0;
+        $grippyThickness: $size + 6;
+        $grippyLen: $grippyThickness * 2;
+
+        display: flex;
+        flex-direction: column;
+        flex: 0 0 ($margin * 2) + $size;
+        transition: $transOut;
+
+        &:before {
+            // The visible resize line
+            background: $editUIColor;
+            content: '';
+            display: block;
+            flex: 1 1 auto;
+            min-height: $size; min-width: $size;
+        }
+
+        &.vertical {
+            padding: $margin $size;
+            &:hover{
+                cursor: row-resize;
+            }
+        }
+
+        &.horizontal {
+            padding: $size $margin;
+            &:hover{
+                cursor: col-resize;
+            }
+        }
+
+        &:hover {
+            transition: $transOut;
+            &:before {
+                // The visible resize line
+                background: $editUIColorHov;
+            }
+        }
+    }
+
+    // Hide the resize-handles in first and last c-fl-frame elements
+    &:first-child,
+    &:last-child {
+        .c-fl-frame__resize-handle {
+            display: none;
+        }
+    }
+
+    .c-fl--rows & {
+        flex-direction: row;
+
+        &__size-indicator {
+            border-bottom-left-radius: $controlCr;
+            border-top-right-radius: 0;
+            bottom: $sizeIndicatorM;
+            right: 1px;
+        }
+    }
+
+    &--first-in-container {
+        border: none;
+        flex: 0 0 0;
+        .c-fl-frame__drag-wrapper {
+            display: none;
+        }
+
+        &.is-dragging {
+            flex-basis: $dropHintSize;
+        }
+    }
+
+    .is-empty & {
+        &.c-fl-frame--first-in-container {
+            flex: 1 1 auto;
+        }
+
+        &__drop-hint {
+            flex: 1 0 100%;
+            margin: 0;
+        }
+    }
+
+    .c-object-view {
+        display: contents;
+    }
+}

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -86,331 +86,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import '~styles/sass-base';
-
-    @mixin containerGrippy($headerSize, $dir) {
-        position: absolute;
-        $h: 6px;
-        $minorOffset: ($headerSize - $h) / 2;
-        $majorOffset: 35%;
-        content: '';
-        display: block;
-        position: absolute;
-        @include grippy($c: $editFrameSelectedMovebarColorFg, $dir: $dir);
-        @if $dir == 'x' {
-            top: $minorOffset; right: $majorOffset; bottom: $minorOffset; left: $majorOffset;
-        } @else {
-            top: $majorOffset; right: $minorOffset; bottom: $majorOffset; left: $minorOffset;
-        }
-    }
-
-    .c-fl {
-        @include abs();
-        display: flex;
-
-        .temp-toolbar {
-            flex: 0 0 auto;
-        }
-
-        &__container-holder {
-            display: flex;
-            flex: 1 1 100%; // Must be 100% to work
-            overflow: auto;
-
-            // Columns by default
-            flex-direction: row;
-            > * + * { margin-left: 1px; }
-
-            &[class*='--rows'] {
-                flex-direction: column;
-                > * + * {
-                    margin-left: 0;
-                    margin-top: 1px;
-                }
-            }
-        }
-
-        &__empty {
-            @include abs();
-            background: rgba($colorBodyFg, 0.1);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-
-            > * {
-                font-style: italic;
-                opacity: 0.5;
-            }
-        }
-
-        &__drag-ghost{
-            background: $colorItemTreeHoverBg;
-            color: $colorItemTreeHoverFg;
-            border-radius: $basicCr;
-            display: flex;
-            align-items: center;
-            padding: $interiorMarginLg $interiorMarginLg * 2;
-            position: absolute;
-            top: -10000px;
-            z-index: 2;
-
-            &:before {
-                color: $colorKey;
-                margin-right: $interiorMarginSm;
-            }
-        }
-    }
-
-    .c-fl-container {
-        /***************************************************** CONTAINERS */
-        $headerSize: 16px;
-
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-
-        // flex-basis is set with inline style in code, controls size
-        flex-grow: 1;
-        flex-shrink: 1;
-
-        &__header {
-            // Only displayed when editing, controlled via JS
-            background: $editFrameMovebarColorBg;
-            color: $editFrameMovebarColorFg;
-            cursor: move;
-            display: flex;
-            align-items: center;
-            flex: 0 0 $headerSize;
-
-            &:before {
-                // Drag grippy
-                @include containerGrippy($headerSize, 'x');
-                opacity: 0.5;
-            }
-        }
-
-        &__size-indicator {
-            position: absolute;
-            display: inline-block;
-            right: $interiorMargin;
-        }
-
-        &__frames-holder {
-            display: flex;
-            flex: 1 1 100%; // Must be 100% to work
-            flex-direction: column; // Default
-            align-content: stretch;
-            align-items: stretch;
-            overflow: hidden; // This sucks, but doing in the short-term
-        }
-
-        .is-editing & {
-            &:hover {
-                .c-fl-container__header {
-                    background: $editFrameHovMovebarColorBg;
-                    color: $editFrameHovMovebarColorFg;
-
-                    &:before {
-                        opacity: .75;
-                    }
-                }
-            }
-
-            &[s-selected] {
-                border: $editFrameSelectedBorder;
-
-                .c-fl-container__header {
-                    background:$editFrameSelectedMovebarColorBg;
-                    color: $editFrameSelectedMovebarColorFg;
-                    &:before {
-                        // Grippy
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-
-        /****** THEIR FRAMES */
-        // Frames get styled here because this is particular to their presence in this layout type
-        .c-fl-frame {
-            @include browserPrefix(margin-collapse, collapse);
-        }
-
-        /****** ROWS LAYOUT */
-        .c-fl--rows & {
-            // Layout is rows
-            flex-direction: row;
-
-            &__header {
-                flex-basis: $headerSize;
-                overflow: hidden;
-
-                &:before {
-                    // Grippy
-                    @include containerGrippy($headerSize, 'y');
-                }
-            }
-
-            &__size-indicator {
-                right: 0;
-                top: $interiorMargin;
-                transform-origin: top right;
-                transform: rotate(-90deg) translateY(-100%);
-            }
-
-            &__frames-holder {
-                flex-direction: row;
-            }
-        }
-    }
-
-    .c-fl-frame {
-        /***************************************************** CONTAINER FRAMES */
-        $sizeIndicatorM: 16px;
-        $dropHintSize: 15px;
-
-        display: flex;
-        flex: 1 1;
-        flex-direction: column;
-        overflow: hidden; // Needed to allow frames to collapse when sized down
-
-        &__drag-wrapper {
-            flex: 1 1 auto;
-            overflow: auto;
-
-            .is-editing & {
-                > * {
-                    pointer-events: none;
-                }
-            }
-        }
-
-        &__header {
-            flex: 0 0 auto;
-            margin-bottom: $interiorMargin;
-        }
-
-        &__size-indicator {
-            $size: 35px;
-
-            @include ellipsize();
-            background: $colorBtnBg;
-            border-top-left-radius: $controlCr;
-            color: $colorBtnFg;
-            display: inline-block;
-            padding: $interiorMarginSm 0;
-            position: absolute;
-            pointer-events: none;
-            text-align: center;
-            width: $size;
-
-            // Changed when layout is different, see below
-            border-top-right-radius: $controlCr;
-            bottom: 1px;
-            right: $sizeIndicatorM;
-        }
-
-        &__drop-hint {
-            flex: 0 0 $dropHintSize;
-            .c-drop-hint {
-                border-radius: $smallCr;
-            }
-        }
-
-        &__resize-handle {
-            $size: 2px;
-            $margin: 3px;
-            $marginHov: 0;
-            $grippyThickness: $size + 6;
-            $grippyLen: $grippyThickness * 2;
-
-            display: flex;
-            flex-direction: column;
-            flex: 0 0 ($margin * 2) + $size;
-            transition: $transOut;
-
-            &:before {
-                // The visible resize line
-                background: $editUIColor;
-                content: '';
-                display: block;
-                flex: 1 1 auto;
-                min-height: $size; min-width: $size;
-            }
-
-            &.vertical {
-                padding: $margin $size;
-                &:hover{
-                    cursor: row-resize;
-                }
-            }
-
-            &.horizontal {
-                padding: $size $margin;
-                &:hover{
-                    cursor: col-resize;
-                }
-            }
-
-            &:hover {
-                transition: $transOut;
-                &:before {
-                    // The visible resize line
-                    background: $editUIColorHov;
-                }
-            }
-        }
-
-        // Hide the resize-handles in first and last c-fl-frame elements
-        &:first-child,
-        &:last-child {
-            .c-fl-frame__resize-handle {
-                display: none;
-            }
-        }
-
-        .c-fl--rows & {
-            flex-direction: row;
-
-            &__size-indicator {
-                border-bottom-left-radius: $controlCr;
-                border-top-right-radius: 0;
-                bottom: $sizeIndicatorM;
-                right: 1px;
-            }
-        }
-
-        &--first-in-container {
-            border: none;
-            flex: 0 0 0;
-            .c-fl-frame__drag-wrapper {
-                display: none;
-            }
-
-            &.is-dragging {
-                flex-basis: $dropHintSize;
-            }
-        }
-
-        .is-empty & {
-            &.c-fl-frame--first-in-container {
-                flex: 1 1 auto;
-            }
-
-            &__drop-hint {
-                flex: 1 0 100%;
-                margin: 0;
-            }
-        }
-
-        .c-object-view {
-            display: contents;
-        }
-    }
-</style>
-
 <script>
 import ContainerComponent  from './container.vue';
 import Container from '../utils/container';
@@ -557,18 +232,16 @@ export default {
             this.newFrameLocation = [containerIndex, insertFrameIndex];
         },
         addFrame(domainObject) {
-            if (this.newFrameLocation.length) {
-                let containerIndex = this.newFrameLocation[0],
-                    frameIndex = this.newFrameLocation[1],
-                    frame = new Frame(domainObject.identifier),
-                    container = this.containers[containerIndex];
+            let containerIndex = this.newFrameLocation.length ? this.newFrameLocation[0] : 0;
+            let container = this.containers[containerIndex];
+            let frameIndex = this.newFrameLocation.length ? this.newFrameLocation[1] : container.frames.length;
+            let frame = new Frame(domainObject.identifier);
 
             container.frames.splice(frameIndex + 1, 0, frame);
             sizeItems(container.frames, frame);
 
             this.newFrameLocation = [];
             this.persist(containerIndex);
-            }
         },
         deleteFrame(frameId) {
             let container = this.containers

src/plugins/folderView/components/GridItem.vue

@@ -35,132 +35,6 @@
 </a>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************************* GRID ITEMS */
-    .c-grid-item {
-        // Mobile-first
-        @include button($bg: $colorItemBg, $fg: $colorItemFg);
-        cursor: pointer;
-        display: flex;
-        padding: $interiorMarginLg;
-
-        &__type-icon {
-            filter: $colorKeyFilter;
-            flex: 0 0 $gridItemMobile;
-            font-size: floor($gridItemMobile / 2);
-            margin-right: $interiorMarginLg;
-        }
-
-        &.is-alias {
-            // Object is an alias to an original.
-            [class*='__type-icon'] {
-                @include isAlias();
-                color: $colorIconAliasForKeyFilter;
-            }
-        }
-
-        &__details {
-            display: flex;
-            flex-flow: column nowrap;
-            flex: 1 1 auto;
-        }
-
-        &__name {
-            @include ellipsize();
-            color: $colorItemFg;
-            @include headerFont(1.2em);
-            margin-bottom: $interiorMarginSm;
-        }
-
-        &__metadata {
-            color: $colorItemFgDetails;
-            font-size: 0.9em;
-
-            body.mobile & {
-                [class*='__item-count'] {
-                    &:before {
-                        content: ' - ';
-                    }
-                }
-            }
-        }
-
-        &__controls {
-            color: $colorItemFgDetails;
-            flex: 0 0 64px;
-            font-size: 1.2em;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-
-            > * + * {
-                margin-left: $interiorMargin;
-            }
-        }
-
-        body.desktop & {
-            $transOutMs: 300ms;
-            flex-flow: column nowrap;
-            transition: background $transOutMs ease-in-out;
-
-            &:hover {
-                background: $colorItemBgHov;
-                transition: $transIn;
-
-                .c-grid-item__type-icon {
-                    filter: $colorKeyFilterHov;
-                    transform: scale(1);
-                    transition: $transInBounce;
-                }
-            }
-
-            > * {
-                margin: 0; // Reset from mobile
-            }
-
-            &__controls {
-                align-items: start;
-                flex: 0 0 auto;
-                order: 1;
-                .c-info-button,
-                .c-pointer-icon { display: none; }
-            }
-
-            &__type-icon {
-                flex: 1 1 auto;
-                font-size: floor($gridItemDesk / 3);
-                margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
-                order: 2;
-                transform: scale(0.9);
-                transform-origin: center;
-                transition: all $transOutMs ease-in-out;
-            }
-
-            &__details {
-                flex: 0 0 auto;
-                justify-content: flex-end;
-                order: 3;
-            }
-
-            &__metadata {
-                display: flex;
-
-                &__type {
-                    flex: 1 1 auto;
-                    @include ellipsize();
-                }
-
-                &__item-count {
-                    opacity: 0.7;
-                    flex: 0 0 auto;
-                }
-            }
-        }
-    }
-</style>
-
 <script>
 import contextMenuGesture from '../../../ui/mixins/context-menu-gesture';
 import objectLink from '../../../ui/mixins/object-link';

src/plugins/folderView/components/GridView.vue

@@ -9,154 +9,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************************* GRID VIEW */
-    .l-grid-view {
-        display: flex;
-        flex-flow: column nowrap;
-        overflow: auto;
-
-        &__item {
-            flex: 0 0 auto;
-            + .l-grid-view__item { margin-top: $interiorMargin; }
-        }
-
-        body.desktop & {
-            flex-flow: row wrap;
-            &__item {
-                height: $gridItemDesk;
-                width: $gridItemDesk;
-                margin: 0 $interiorMargin $interiorMargin 0;
-            }
-        }
-    }
-
-    /******************************* GRID ITEMS */
-    .c-grid-item {
-        // Mobile-first
-        @include button($bg: $colorItemBg, $fg: $colorItemFg);
-        cursor: pointer;
-        display: flex;
-        padding: $interiorMarginLg;
-
-        &__type-icon {
-            filter: $colorKeyFilter;
-            flex: 0 0 $gridItemMobile;
-            font-size: floor($gridItemMobile / 2);
-            margin-right: $interiorMarginLg;
-        }
-
-        &.is-alias {
-            // Object is an alias to an original.
-            [class*='__type-icon'] {
-                @include isAlias();
-                color: $colorIconAliasForKeyFilter;
-            }
-        }
-
-        &__details {
-            display: flex;
-            flex-flow: column nowrap;
-            flex: 1 1 auto;
-        }
-
-        &__name {
-            @include ellipsize();
-            color: $colorItemFg;
-            font-size: 1.2em;
-            font-weight: 400;
-            margin-bottom: $interiorMarginSm;
-        }
-
-        &__metadata {
-            color: $colorItemFgDetails;
-            font-size: 0.9em;
-
-            body.mobile & {
-                [class*='__item-count'] {
-                    &:before {
-                        content: ' - ';
-                    }
-                }
-            }
-        }
-
-        &__controls {
-            color: $colorItemFgDetails;
-            flex: 0 0 64px;
-            font-size: 1.2em;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-
-            > * + * {
-                margin-left: $interiorMargin;
-            }
-        }
-
-        body.desktop & {
-            $transOutMs: 300ms;
-            flex-flow: column nowrap;
-            transition: background $transOutMs ease-in-out;
-
-            &:hover {
-                background: $colorItemBgHov;
-                transition: $transIn;
-
-                .c-grid-item__type-icon {
-                    filter: $colorKeyFilterHov;
-                    transform: scale(1);
-                    transition: $transInBounce;
-                }
-            }
-
-            > * {
-                margin: 0; // Reset from mobile
-            }
-
-            &__controls {
-                align-items: start;
-                flex: 0 0 auto;
-                order: 1;
-                .c-info-button,
-                .c-pointer-icon { display: none; }
-            }
-
-            &__type-icon {
-                flex: 1 1 auto;
-                font-size: floor($gridItemDesk / 3);
-                margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
-                order: 2;
-                transform: scale(0.9);
-                transform-origin: center;
-                transition: all $transOutMs ease-in-out;
-            }
-
-            &__details {
-                flex: 0 0 auto;
-                justify-content: flex-end;
-                order: 3;
-            }
-
-            &__metadata {
-                display: flex;
-
-                &__type {
-                    flex: 1 1 auto;
-                    @include ellipsize();
-                }
-
-                &__item-count {
-                    opacity: 0.7;
-                    flex: 0 0 auto;
-                }
-            }
-        }
-    }
-</style>
-
 <script>
 
 import compositionLoader from './composition-loader';

src/plugins/folderView/components/ListItem.vue

@@ -28,48 +28,6 @@
 </tr>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************************* LIST ITEM */
-    .c-list-item {
-        &__name a {
-            display: flex;
-
-            > * + * { margin-left: $interiorMarginSm; }
-        }
-
-        &__type-icon {
-            // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon
-            color: $colorKey;
-            display: inline-block;
-            width: 1em;
-            margin-right:$interiorMarginSm;
-        }
-
-        &__name-value {
-            @include ellipsize();
-        }
-
-        &.is-alias {
-            // Object is an alias to an original.
-            [class*='__type-icon'] {
-                &:after {
-                    color: $colorIconAlias;
-                    content: $glyph-icon-link;
-                    font-family: symbolsfont;
-                    display: block;
-                    position: absolute;
-                    text-shadow: rgba(black, 0.5) 0 1px 2px;
-                    top: auto; left: -1px; bottom: 1px; right: auto;
-                    transform-origin: bottom left;
-                    transform: scale(0.65);
-                }
-            }
-        }
-    }
-</style>
-
 <script>
 
 import moment from 'moment';

src/plugins/folderView/components/ListView.vue

@@ -61,46 +61,6 @@
 </div>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    /******************************* LIST VIEW */
-    .c-list-view {
-        overflow-x: auto !important;
-        overflow-y: auto;
-
-        tbody tr {
-            background: $colorListItemBg;
-            transition: $transOut;
-        }
-
-        body.desktop & {
-            tbody tr {
-                cursor: pointer;
-
-                &:hover {
-                    background: $colorListItemBgHov;
-                    transition: $transIn;
-                }
-            }
-        }
-
-        td {
-            $p: floor($interiorMargin * 1.5);
-            @include ellipsize();
-            line-height: 120%; // Needed for icon alignment
-            max-width: 0;
-            padding-top: $p;
-            padding-bottom: $p;
-            width: 25%;
-
-            &:not(.c-list-item__name) {
-                color: $colorItemFgDetails;
-            }
-        }
-    }
-</style>
-
 <script>
 import compositionLoader from './composition-loader';
 import ListItem from './ListItem.vue';

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

@@ -0,0 +1,121 @@
+/******************************* GRID ITEMS */
+.c-grid-item {
+    // Mobile-first
+    @include button($bg: $colorItemBg, $fg: $colorItemFg);
+    cursor: pointer;
+    display: flex;
+    padding: $interiorMarginLg;
+
+    &__type-icon {
+        filter: $colorKeyFilter;
+        flex: 0 0 $gridItemMobile;
+        font-size: floor($gridItemMobile / 2);
+        margin-right: $interiorMarginLg;
+    }
+
+    &.is-alias {
+        // Object is an alias to an original.
+        [class*='__type-icon'] {
+            @include isAlias();
+            color: $colorIconAliasForKeyFilter;
+        }
+    }
+
+    &__details {
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1 1 auto;
+    }
+
+    &__name {
+        @include ellipsize();
+        color: $colorItemFg;
+        @include headerFont(1.2em);
+        margin-bottom: $interiorMarginSm;
+    }
+
+    &__metadata {
+        color: $colorItemFgDetails;
+        font-size: 0.9em;
+
+        body.mobile & {
+            [class*='__item-count'] {
+                &:before {
+                    content: ' - ';
+                }
+            }
+        }
+    }
+
+    &__controls {
+        color: $colorItemFgDetails;
+        flex: 0 0 64px;
+        font-size: 1.2em;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    body.desktop & {
+        $transOutMs: 300ms;
+        flex-flow: column nowrap;
+        transition: background $transOutMs ease-in-out;
+
+        &:hover {
+            background: $colorItemBgHov;
+            transition: $transIn;
+
+            .c-grid-item__type-icon {
+                filter: $colorKeyFilterHov;
+                transform: scale(1);
+                transition: $transInBounce;
+            }
+        }
+
+        > * {
+            margin: 0; // Reset from mobile
+        }
+
+        &__controls {
+            align-items: start;
+            flex: 0 0 auto;
+            order: 1;
+            .c-info-button,
+            .c-pointer-icon { display: none; }
+        }
+
+        &__type-icon {
+            flex: 1 1 auto;
+            font-size: floor($gridItemDesk / 3);
+            margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
+            order: 2;
+            transform: scale(0.9);
+            transform-origin: center;
+            transition: all $transOutMs ease-in-out;
+        }
+
+        &__details {
+            flex: 0 0 auto;
+            justify-content: flex-end;
+            order: 3;
+        }
+
+        &__metadata {
+            display: flex;
+
+            &__type {
+                flex: 1 1 auto;
+                @include ellipsize();
+            }
+
+            &__item-count {
+                opacity: 0.7;
+                flex: 0 0 auto;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,143 @@
+/******************************* GRID VIEW */
+.l-grid-view {
+    display: flex;
+    flex-flow: column nowrap;
+    overflow: auto;
+
+    &__item {
+        flex: 0 0 auto;
+        + .l-grid-view__item { margin-top: $interiorMargin; }
+    }
+
+    body.desktop & {
+        flex-flow: row wrap;
+        &__item {
+            height: $gridItemDesk;
+            width: $gridItemDesk;
+            margin: 0 $interiorMargin $interiorMargin 0;
+        }
+    }
+}
+
+/******************************* GRID ITEMS */
+.c-grid-item {
+    // Mobile-first
+    @include button($bg: $colorItemBg, $fg: $colorItemFg);
+    cursor: pointer;
+    display: flex;
+    padding: $interiorMarginLg;
+
+    &__type-icon {
+        filter: $colorKeyFilter;
+        flex: 0 0 $gridItemMobile;
+        font-size: floor($gridItemMobile / 2);
+        margin-right: $interiorMarginLg;
+    }
+
+    &.is-alias {
+        // Object is an alias to an original.
+        [class*='__type-icon'] {
+            @include isAlias();
+            color: $colorIconAliasForKeyFilter;
+        }
+    }
+
+    &__details {
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1 1 auto;
+    }
+
+    &__name {
+        @include ellipsize();
+        color: $colorItemFg;
+        font-size: 1.2em;
+        font-weight: 400;
+        margin-bottom: $interiorMarginSm;
+    }
+
+    &__metadata {
+        color: $colorItemFgDetails;
+        font-size: 0.9em;
+
+        body.mobile & {
+            [class*='__item-count'] {
+                &:before {
+                    content: ' - ';
+                }
+            }
+        }
+    }
+
+    &__controls {
+        color: $colorItemFgDetails;
+        flex: 0 0 64px;
+        font-size: 1.2em;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    body.desktop & {
+        $transOutMs: 300ms;
+        flex-flow: column nowrap;
+        transition: background $transOutMs ease-in-out;
+
+        &:hover {
+            background: $colorItemBgHov;
+            transition: $transIn;
+
+            .c-grid-item__type-icon {
+                filter: $colorKeyFilterHov;
+                transform: scale(1);
+                transition: $transInBounce;
+            }
+        }
+
+        > * {
+            margin: 0; // Reset from mobile
+        }
+
+        &__controls {
+            align-items: start;
+            flex: 0 0 auto;
+            order: 1;
+            .c-info-button,
+            .c-pointer-icon { display: none; }
+        }
+
+        &__type-icon {
+            flex: 1 1 auto;
+            font-size: floor($gridItemDesk / 3);
+            margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
+            order: 2;
+            transform: scale(0.9);
+            transform-origin: center;
+            transition: all $transOutMs ease-in-out;
+        }
+
+        &__details {
+            flex: 0 0 auto;
+            justify-content: flex-end;
+            order: 3;
+        }
+
+        &__metadata {
+            display: flex;
+
+            &__type {
+                flex: 1 1 auto;
+                @include ellipsize();
+            }
+
+            &__item-count {
+                opacity: 0.7;
+                flex: 0 0 auto;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,37 @@
+/******************************* LIST ITEM */
+.c-list-item {
+    &__name a {
+        display: flex;
+
+        > * + * { margin-left: $interiorMarginSm; }
+    }
+
+    &__type-icon {
+        // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon
+        color: $colorKey;
+        display: inline-block;
+        width: 1em;
+        margin-right:$interiorMarginSm;
+    }
+
+    &__name-value {
+        @include ellipsize();
+    }
+
+    &.is-alias {
+        // Object is an alias to an original.
+        [class*='__type-icon'] {
+            &:after {
+                color: $colorIconAlias;
+                content: $glyph-icon-link;
+                font-family: symbolsfont;
+                display: block;
+                position: absolute;
+                text-shadow: rgba(black, 0.5) 0 1px 2px;
+                top: auto; left: -1px; bottom: 1px; right: auto;
+                transform-origin: bottom left;
+                transform: scale(0.65);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+/******************************* LIST VIEW */
+.c-list-view {
+    overflow-x: auto !important;
+    overflow-y: auto;
+
+    tbody tr {
+        background: $colorListItemBg;
+        transition: $transOut;
+    }
+
+    body.desktop & {
+        tbody tr {
+            cursor: pointer;
+
+            &:hover {
+                background: $colorListItemBgHov;
+                transition: $transIn;
+            }
+        }
+    }
+
+    td {
+        $p: floor($interiorMargin * 1.5);
+        @include ellipsize();
+        line-height: 120%; // Needed for icon alignment
+        max-width: 0;
+        padding-top: $p;
+        padding-bottom: $p;
+        width: 25%;
+
+        &:not(.c-list-item__name) {
+            color: $colorItemFgDetails;
+        }
+    }
+}

src/plugins/imagery/ImageryViewProvider.js

@@ -0,0 +1,47 @@
+import ImageryViewLayout from './components/ImageryViewLayout.vue';
+import Vue from 'vue';
+
+export default function ImageryViewProvider(openmct) {
+    const type = 'example.imagery';
+
+    const hasImageTelemetry = function (domainObject) {
+        const metadata = openmct.telemetry.getMetadata(domainObject);
+        if (!metadata) {
+            return false;
+        }
+
+        return metadata.valuesForHints(['image']).length > 0;
+    };
+
+    return {
+        key: type,
+        name: 'Imagery Layout',
+        cssClass: 'icon-image',
+        canView: function (domainObject) {
+            return hasImageTelemetry(domainObject);
+        },
+        view: function (domainObject) {
+            let component;
+
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        components: {
+                            ImageryViewLayout
+                        },
+                        provide: {
+                            openmct,
+                            domainObject
+                        },
+                        el: element,
+                        template: '<imagery-view-layout ref="ImageryLayout"></imagery-view-layout>'
+                    });
+                },
+                destroy: function () {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
+        }
+    }
+}

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -0,0 +1,238 @@
+<template>
+<div class="c-imagery">
+    <div class="c-imagery__main-image-wrapper has-local-controls">
+        <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
+            <span class="holder flex-elem grows c-imagery__lc__sliders">
+                <input v-model="filters.brightness"
+                       class="icon-brightness"
+                       type="range"
+                       min="0"
+                       max="500"
+                >
+                <input v-model="filters.contrast"
+                       class="icon-contrast"
+                       type="range"
+                       min="0"
+                       max="500"
+                >
+            </span>
+            <span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
+                <a class="s-icon-button icon-reset t-btn-reset"
+                   @click="filters={brightness: 100, contrast: 100}"
+                ></a>
+            </span>
+        </div>
+        <div class="main-image s-image-main c-imagery__main-image"
+             :class="{'paused unnsynced': paused(),'stale':false }"
+             :style="{'background-image': `url(${getImageUrl()})`,
+                      '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>
+            </div>
+        </div>
+    </div>
+    <div ref="thumbsWrapper"
+         class="c-imagery__thumbs-wrapper"
+         :class="{'is-paused': paused()}"
+         @scroll="handleScroll"
+    >
+        <div v-for="(imageData, index) in imageHistory"
+             :key="index"
+             class="c-imagery__thumb c-thumb"
+             :class="{selected: imageData.selected}"
+             @click="setSelectedImage(imageData)"
+        >
+            <img class="c-thumb__image"
+                 :src="getImageUrl(imageData)"
+            >
+            <div class="c-thumb__timestamp">{{ getTime(imageData) }}</div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    data() {
+        return {
+            autoScroll: true,
+            date: '',
+            filters : {
+                brightness: 100,
+                contrast: 100
+            },
+            image: {
+                selected: ''
+            },
+            imageFormat: '',
+            imageHistory: [],
+            imageUrl: '',
+            isPaused: false,
+            requestCount: 0,
+            timeFormat: ''
+        }
+    },
+    mounted() {
+        this.keystring = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+        this.subscribe(this.domainObject);
+    },
+    updated() {
+        this.scrollToRight();
+    },
+    beforeDestroy() {
+        this.stopListening();
+    },
+    methods: {
+        datumMatchesMostRecent(datum) {
+            if (this.imageHistory.length === 0) {
+                return false;
+            }
+
+            const datumTime = this.timeFormat.format(datum);
+            const datumURL = this.imageFormat.format(datum);
+            const lastHistoryTime = this.timeFormat.format(this.imageHistory.slice(-1)[0]);
+            const lastHistoryURL = this.imageFormat.format(this.imageHistory.slice(-1)[0]);
+
+            return (datumTime === lastHistoryTime) && (datumURL === lastHistoryURL);
+        },
+        getImageUrl(datum) {
+            return datum ?
+                this.imageFormat.format(datum) :
+                this.imageUrl;
+        },
+        getTime(datum) {
+            return datum ?
+                this.timeFormat.format(datum) :
+                this.time;
+        },
+        handleScroll() {
+            const thumbsWrapper = this.$refs.thumbsWrapper
+            if (!thumbsWrapper) {
+                return;
+            }
+
+            const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = thumbsWrapper;
+            const disableScroll = (scrollWidth - scrollLeft) > 2 * clientWidth
+                    || (scrollHeight - scrollTop) > 2 * clientHeight;
+            this.autoScroll = !disableScroll;
+        },
+        paused(state) {
+            if (arguments.length > 0 && state !== this.isPaused) {
+                this.unselectAllImages();
+                this.isPaused = state;
+                if (state === true) {
+                    // If we are pausing, select the latest image in imageHistory
+                    this.setSelectedImage(this.imageHistory[this.imageHistory.length - 1]);
+                }
+
+                if (this.nextDatum) {
+                    this.updateValues(this.nextDatum);
+                    delete this.nextDatum;
+                } else {
+                    this.updateValues(this.imageHistory[this.imageHistory.length - 1]);
+                }
+
+                this.autoScroll = true;
+            }
+
+            return this.isPaused;
+        },
+        requestHistory(bounds) {
+            this.requestCount++;
+            this.imageHistory = [];
+            const requestId = this.requestCount;
+            this.openmct.telemetry
+                .request(this.domainObject, bounds)
+                .then((values = []) => {
+                    if (this.requestCount > requestId) {
+                        return Promise.resolve('Stale request');
+                    }
+
+                    values.forEach(this.updateHistory);
+                    this.updateValues(values[values.length - 1]);
+                });
+        },
+        scrollToRight() {
+            if (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll) {
+                return;
+            }
+
+            const scrollWidth = this.$refs.thumbsWrapper.scrollWidth || 0;
+            if (!scrollWidth) {
+                return;
+            }
+
+            setTimeout(() => this.$refs.thumbsWrapper.scrollLeft = scrollWidth, 0);
+        },
+        setSelectedImage(image) {
+            // If we are paused and the current image IS selected, unpause
+            // Otherwise, set current image and pause
+            if (this.isPaused && image.selected) {
+                this.paused(false);
+                this.unselectAllImages();
+            } else {
+                this.imageUrl = this.getImageUrl(image);
+                this.time = this.getTime(image);
+                this.paused(true);
+                this.unselectAllImages();
+                image.selected = true;
+            }
+        },
+        stopListening() {
+            if (this.unsubscribe) {
+                this.unsubscribe();
+                delete this.unsubscribe;
+            }
+        },
+        subscribe(domainObject) {
+            this.date = ''
+            this.imageUrl = '';
+            this.openmct.objects.get(this.keystring)
+                .then((object) => {
+                    const metadata = this.openmct.telemetry.getMetadata(this.domainObject);
+                    this.timeKey = this.openmct.time.timeSystem().key;
+                    this.timeFormat = this.openmct.telemetry.getValueFormatter(metadata.value(this.timeKey));
+                    this.imageFormat = this.openmct.telemetry.getValueFormatter(metadata.valuesForHints(['image'])[0]);
+                    this.unsubscribe = this.openmct.telemetry
+                        .subscribe(this.domainObject, (datum) => {
+                            this.updateHistory(datum);
+                            this.updateValues(datum);
+                        });
+
+                    this.requestHistory(this.openmct.time.bounds());
+                });
+        },
+        unselectAllImages() {
+            this.imageHistory.forEach(image => image.selected = false);
+        },
+        updateHistory(datum) {
+            if (this.datumMatchesMostRecent(datum)) {
+                return;
+            }
+
+            const index = _.sortedIndex(this.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat));
+            this.imageHistory.splice(index, 0, datum);
+        },
+        updateValues(datum) {
+            if (this.isPaused) {
+                this.nextDatum = datum;
+
+                return;
+            }
+
+            this.time = this.timeFormat.format(datum);
+            this.imageUrl = this.imageFormat.format(datum);
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,161 @@
+.c-imagery {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    &__main-image-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+    }
+
+    &__main-image {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: 100%;
+
+        &.unnsynced{
+            @include sUnsynced();
+        }
+    }
+
+    &__control-bar {
+        padding: 5px 0 0 0;
+        display: flex;
+        align-items: center;
+    }
+
+    &__timestamp {
+        flex: 1 1 auto;
+    }
+
+    &__thumbs-wrapper {
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: row;
+        height: 135px;
+        overflow-x: auto;
+        overflow-y: hidden;
+
+        &.is-paused {
+            background: rgba($colorPausedBg, 0.4);
+        }
+
+        .c-thumb:last-child {
+            // Hilite the lastest thumb
+            background: $colorBodyFg;
+            color: $colorBodyBg;
+        }
+    }
+}
+
+/*************************************** THUMBS */
+.c-thumb {
+    display: flex;
+    flex-direction: column;
+    padding: 4px;
+    width: $imageThumbsD;
+
+    &:hover {
+        background: $colorThumbHoverBg;
+    }
+
+    &.selected {
+        background: $colorPausedBg !important;
+        color: $colorPausedFg !important;
+    }
+
+    &__image {
+        background-color: rgba($colorBodyFg, 0.2);
+        width: 100%;
+    }
+
+    &__timestamp {
+        flex: 0 0 auto;
+        padding: 2px 3px;
+    }
+}
+
+.l-layout,
+.c-fl {
+    .c-imagery__thumbs-wrapper {
+        //  When Imagery is in a layout, hide the thumbs area
+        display: none;
+    }
+}
+
+.s-image-main {
+    background-color: $colorPlotBg;
+    border: 1px solid transparent;
+}
+
+/*************************************** IMAGERY LOCAL CONTROLS*/
+.c-imagery {
+    .h-local-controls--overlay-content {
+        position: absolute;
+        right: $interiorMargin; top: $interiorMargin;
+        z-index: 2;
+        background: $colorLocalControlOvrBg;
+        border-radius: $basicCr;
+        max-width: 200px;
+        min-width: 100px;
+        width: 35%;
+        align-items: center;
+        padding: $interiorMargin $interiorMarginLg;
+
+        input[type="range"] {
+            display: block;
+            width: 100%;
+            &:not(:first-child) {
+                margin-top: $interiorMarginLg;
+            }
+
+            &:before {
+                margin-right: $interiorMarginSm;
+            }
+        }
+    }
+
+    &__lc {
+        &__reset-btn {
+            $bc: $scrollbarTrackColorBg;
+            &:before,
+            &:after {
+                border-right: 1px solid $bc;
+                content:'';
+                display: block;
+                width: 5px;
+                height: 4px;
+            }
+
+            &:before {
+                border-top: 1px solid $bc;
+                margin-bottom: 2px;
+            }
+
+            &:after {
+                border-bottom: 1px solid $bc;
+                margin-top: 2px;
+            }
+        }
+    }
+}
+
+/*************************************** BUTTONS */
+.c-button.pause-play {
+    // Pause icon set by default in markup
+    &.is-paused {
+        background: $colorPausedBg !important;
+        color: $colorPausedFg;
+
+        &:before {
+            content: $glyph-icon-play;
+        }
+    }
+}

src/plugins/imagery/plugin.js

@@ -0,0 +1,8 @@
+import ImageryViewProvider from './ImageryViewProvider';
+
+export default function () {
+    return function install(openmct) {
+        openmct.objectViews.addProvider(new ImageryViewProvider(openmct));
+    };
+}
+

src/plugins/plot/README.md

@@ -0,0 +1,10 @@
+# Plot Plugin
+
+Enables plot visualization of telemetry data. This plugin adds a plot view that is available from the view switcher for 
+all telemetry objects. Two user createble objects are also added by this plugin, for Overlay and Stacked Plots. 
+Telemetry objects can be added to Overlay and Stacked Plots via drag and drop.
+
+## Installation
+``` js
+openmct.install(openmct.plugins.Plot());
+```

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

@@ -225,7 +225,7 @@
                               left: (100 * (tick.value - min) / interval) + '%'
                           }"
                           ng-title=":: tick.fullText || tick.text">
-                         {{:: tick.text | reverse}}
+                         {{:: tick.text }}
                      </div>
                 </mct-ticks>
 

src/plugins/plot/src/configuration/PlotSeries.js

@@ -140,9 +140,14 @@ define([
          * @returns {Promise}
          */
         fetch: function (options) {
-            const strategy = options && options.shouldNotUseMinMax ? undefined : 'minMax';
+            let strategy;
+
+            if (this.model.interpolate !== 'none') {
+                strategy = 'minMax';
+            }
 
             options = _.extend({}, { size: 1000, strategy, filters: this.filters }, options || {});
+
             if (!this.unsubscribe) {
                 this.unsubscribe = this.openmct
                     .telemetry
@@ -372,6 +377,7 @@ define([
          * @public
          */
         updateFiltersAndRefresh: function (updatedFilters) {
+            if (this.filters && !_.isEqual(this.filters, updatedFilters)) {
                 this.filters = updatedFilters;
                 this.reset();
                 if (this.unsubscribe) {
@@ -379,19 +385,9 @@ define([
                     delete this.unsubscribe;
                 }
                 this.fetch();
-        },
-
-        /**
-         * Clears the plot series, unsubscribes and resubscribes
-         * @public
-         */
-        refresh: function () {
-            this.reset();
-            if (this.unsubscribe) {
-                this.unsubscribe();
-                delete this.unsubscribe;
+            } else {
+                this.filters = updatedFilters;
             }
-            this.fetch();
         }
     });
 

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

@@ -46,7 +46,7 @@ define([
             },
             {
                 modelProp: 'range',
-                objectPath: 'form.yAxis.range',
+                objectPath: 'configuration.yAxis.range',
                 coerce: function coerceRange(range) {
                     if (!range) {
                         return {

src/plugins/plot/src/telemetry/PlotController.js

@@ -102,8 +102,7 @@ define([
         this.startLoading();
         var options = {
             size: this.$element[0].offsetWidth,
-            domain: this.config.xAxis.get('key'),
-            shouldNotUseMinMax: this.shouldNotUseMinMax(series)
+            domain: this.config.xAxis.get('key')
         };
 
         series.load(options)
@@ -161,10 +160,6 @@ define([
         return config;
     };
 
-    PlotController.prototype.shouldNotUseMinMax = function (series) {
-        return series.model.interpolate === 'none';
-    };
-
     PlotController.prototype.onTimeSystemChange = function (timeSystem) {
         this.config.xAxis.set('key', timeSystem.key);
     };

src/plugins/plugins.js

@@ -28,6 +28,7 @@ define([
     './autoflow/AutoflowTabularPlugin',
     './timeConductor/plugin',
     '../../example/imagery/plugin',
+    './imagery/plugin',
     '../../platform/import-export/bundle',
     './summaryWidget/plugin',
     './URLIndicatorPlugin/URLIndicatorPlugin',
@@ -45,7 +46,10 @@ define([
     './objectMigration/plugin',
     './goToOriginalAction/plugin',
     './clearData/plugin',
-    './webPage/plugin'
+    './webPage/plugin',
+    './themes/espresso',
+    './themes/maelstrom',
+    './themes/snow'
 ], function (
     _,
     UTCTimeSystem,
@@ -54,6 +58,7 @@ define([
     AutoflowPlugin,
     TimeConductorPlugin,
     ExampleImagery,
+    ImageryPlugin,
     ImportExport,
     SummaryWidget,
     URLIndicatorPlugin,
@@ -71,7 +76,10 @@ define([
     ObjectMigration,
     GoToOriginalAction,
     ClearData,
-    WebPagePlugin
+    WebPagePlugin,
+    Espresso,
+    Maelstrom,
+    Snow
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -156,6 +164,7 @@ define([
     };
 
     plugins.ExampleImagery = ExampleImagery;
+    plugins.ImageryPlugin = ImageryPlugin;
     plugins.Plot = PlotPlugin;
     plugins.TelemetryTable = TelemetryTablePlugin;
 
@@ -173,6 +182,9 @@ define([
     plugins.GoToOriginalAction = GoToOriginalAction.default;
     plugins.ClearData = ClearData;
     plugins.WebPage = WebPagePlugin.default;
+    plugins.Espresso = Espresso.default;
+    plugins.Maelstrom = Maelstrom.default;
+    plugins.Snow = Snow.default;
 
     return plugins;
 });

src/plugins/staticRootPlugin/README.md

@@ -0,0 +1,19 @@
+# Static Root Plugin
+
+This plugin takes an object tree as JSON and exposes it as a non-editable root level tree. This can be useful if you 
+have static non-editable content that you wish to expose, such as a standard set of displays that should not be edited 
+(but which can be copied and then modified if desired).
+
+Any object tree in Open MCT can be exported as JSON after installing the 
+[Import/Export plugin](../../../platform/import-export/README.md).
+
+## Installation
+``` js
+openmct.install(openmct.plugins.StaticRootPlugin('mission', 'data/static-objects.json'));
+```
+
+## Parameters
+The StaticRootPlugin takes two parameters:
+1. __namespace__: This should be a name that uniquely identifies this collection of objects.
+2. __path__: The file that the static tree should be exposed from. This will need to be a path that is reachable by a web 
+browser, ie not a path on the local file system.